🥭 Basic Sprint Details Page done

mango-frontend/src/Pages/SprintDetail.tsx

@@ -1,8 +1,15 @@
 import React from 'react'
 
+import { Sidebar } from '@/components/sidebar/sidebar';
+import Details from '@/components/SprintDetail/Details';
+
+
 const SprintDetail: React.FC = () => {
     return (
-        <div>SprintDetail</div>
+        <div className='flex'>
+            <Sidebar />
+            <Details />
+        </div>
     )
 }
 

mango-frontend/src/components/Issue Table/IssueTable.tsx

@@ -40,7 +40,7 @@ export function IssueTable<TData, TValue>({
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => {
                                     return (
-                                        <TableHead key={header.id}>
+                                        <TableHead className="border-r hover:bg-red-400" key={header.id}>
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
@@ -61,7 +61,7 @@ export function IssueTable<TData, TValue>({
                                     data-state={row.getIsSelected() && "selected"}
                                 >
                                     {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
+                                        <TableCell className="border-red-500 border hover:to-blue-900" key={cell.id}>
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}

mango-frontend/src/components/SprintDetail/Details.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect } from 'react'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Link, useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/redux/store';
+import { fetchSprints } from '@/redux/slices/sprintSlice';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Button } from "@/components/ui/button"
+import { UseDialog } from '@/hooks/useDialog';
+import { CreateIssue } from '../Create Issue/CreateIssue';
+import { Separator } from "@/components/ui/separator"
+import { IssueTable } from '../Issue Table/IssueTable';
+import { columns } from '../Issue Table/Columns';
+import { IssueType } from '@/types';
+
+
+const Details: React.FC = () => {
+
+    const { sprint_id } = useParams<{ sprint_id: string }>();
+    const dispatch = useDispatch<AppDispatch>();
+
+    const { isOpen, openDialog, closeDialog } = UseDialog();
+
+    useEffect(() => {
+        async function fetchData() {
+            await dispatch(fetchSprints());
+        }
+        fetchData();
+    }, [dispatch])
+    const { sprints } = useSelector((state: RootState) => state.sprints);
+
+    const sprint = sprints.find((sprint) => sprint.sprint_id === Number(sprint_id));
+    console.log(sprint);
+
+    const issues: IssueType[] = sprint?.issue || [];
+
+    const issueCount = sprint?.issue?.length || 0;
+
+    return (
+        <>
+            <div className=' w-full my-5'>
+                <div className='flex mx-7 justify-between items-center'>
+                    <Breadcrumb>
+                        <BreadcrumbList>
+                            <BreadcrumbItem>
+                                🥭 Mango
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                                <BreadcrumbLink>
+                                    <Link to="/sprints">Sprints</Link>
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                                <BreadcrumbPage className='border px-2 rounded-sm'>{sprint?.name}&nbsp;&nbsp;
+                                    <span className='bg-blue-300 px-1 rounded-lg text-white '>
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger> {issueCount}</TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>This sprint has {issueCount} issue</p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+
+                                    </span>
+                                </BreadcrumbPage>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                    <Button onClick={openDialog} size={'md'} className='border bg-blue-400 text-white hover:bg-blue-500'>
+                        Add Issue
+                    </Button>
+                </div>
+                <Separator className='mt-[2px]' />
+                <IssueTable columns={columns} data={issues} />
+            </div>
+            <CreateIssue isOpen={isOpen} onClose={closeDialog} />
+        </>
+    )
+}
+
+export default Details

mango-frontend/src/components/sidebar/desktop.tsx

@@ -78,6 +78,7 @@ export function SidebarDesktop() {
                     </div>
                 </div>
             </aside>
-            <CreateIssue isOpen={isOpen} onClose={closeDialog} />        </>
+            <CreateIssue isOpen={isOpen} onClose={closeDialog} />
+        </>
     );
 }

mango-frontend/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

mango-frontend/src/components/ui/table.tsx

@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors data-[state=selected]:bg-muted",
       className
     )}
     {...props}

mango-frontend/src/types/index.ts

@@ -6,6 +6,7 @@ export interface Sprint {
   end_date: string;
   status: 'ongoing' | 'upcoming' | 'completed';
   organizationId: number;
+  issue: IssueType[];
 }
 
 export interface createSprintPayloadType {
@@ -85,15 +86,6 @@ export interface Organization {
   name: string;
 }
 
-export interface Sprint {
-  sprint_id: number;
-  name: string;
-  description?: string;
-  start_date: string;
-  end_date: string;
-  status: 'ongoing' | 'upcoming' | 'completed';
-  organizationId: number;
-}
 
 export interface IssueType {
   issue_id: number;