🥭 sprint tabs completed

mango-frontend/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@reduxjs/toolkit": "^2.2.6",
     "@tanstack/react-table": "^8.19.2",
     "@types/redux-persist": "^4.3.1",

mango-frontend/src/components/Create Sprint/CreateSprint.tsx

@@ -34,28 +34,14 @@ const CreateSprint: React.FC<CreateSprintProps> = ({ isOpen, onClose }) => {
     const [status, setStatus] = React.useState<'ongoing' | 'upcoming' | 'completed'>('ongoing');
     const today = startOfToday();
     const dispatch = useDispatch<AppDispatch>();
+    console.log(status);
 
     React.useEffect(() => {
         if (startDate && isBefore(today, startDate)) {
             setStatus('upcoming');
         }
     }, [startDate, today]);
 
-    const days = React.useMemo(() => {
-        const calculateDays = (): number | null => {
-            if (startDate && endDate) {
-                const start = new Date(startDate);
-                const end = new Date(endDate);
-                const diffInTime = end.getTime() - start.getTime();
-                const diffInDays = Math.ceil(diffInTime / (1000 * 3600 * 24) + 1);
-                return diffInDays;
-            }
-            return null;
-        };
-        return calculateDays();
-    }, [startDate, endDate]);
-
-    console.log("days", days);
     const handleClose = (): void => {
         resetName();
         resetDescription();
@@ -67,6 +53,11 @@ const CreateSprint: React.FC<CreateSprintProps> = ({ isOpen, onClose }) => {
     const handleSubmit = async (e: React.FormEvent): Promise<void> => {
         e.preventDefault();
 
+        if (!name.trim()) {
+            toast.error('Sprint name is required');
+            return;
+        }
+
         const sprint: createSprintDataType = {
             name,
             description,

mango-frontend/src/components/Sprints/Sprint.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Sprint: React.FC = () => {
+    return (
+        <div>Sprint</div>
+    )
+}
+
+export default Sprint

mango-frontend/src/components/Sprints/SprintList.tsx

@@ -0,0 +1,89 @@
+import type { Sprint } from '@/types'
+import React from 'react'
+import { Separator } from "@/components/ui/separator"
+import { Ellipsis } from 'lucide-react'; import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type listPropType = {
+    sprints: Sprint[]
+}
+
+const SprintList: React.FC<listPropType> = ({ sprints }) => {
+    console.log(sprints);
+    return (
+        <div className='w-full '>
+            {sprints.map((sprint, i) => (
+                <div key={i}>
+                    <SingleSprint sprint={sprint} />
+
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default SprintList;
+
+const SingleSprint: React.FC<{ sprint: Sprint }> = ({ sprint }) => {
+    const formatDate = (date: string) => {
+        const formattedDate = new Date(date);
+        return formattedDate.toLocaleDateString('en-US', {
+            month: 'short',
+            day: '2-digit',
+            year: 'numeric'
+        })
+    };
+
+    const days = React.useMemo(() => {
+        const calculateDays = (): number | null => {
+            if (sprint?.end_date) {
+                const today = new Date();
+                const end = new Date(sprint?.end_date);
+                const diffInTime = end.getTime() - today.getTime();
+                const diffInDays = Math.ceil(diffInTime / (1000 * 3600 * 24) + 1);
+                return diffInDays;
+            }
+            return null;
+        };
+        return calculateDays();
+    }, [sprint?.end_date]);
+
+    return (
+        <>
+            <div className='text-black flex text-[14px] items-center mt-4 h-11 hover:bg-blue-50'>
+
+                <div className='flex w-full items-center justify-between'>
+                    <div className='mx-4 pl-1'>
+                        {sprint?.name}
+                    </div>
+                    <div className='flex items-center gap-3 mr-7'>
+                        <div className='border rounded-sm px-1 h-fit w-fit bg-[#e9ece5] border-gray-300'>
+                            <h3 className='text-[12px]'>
+                                {formatDate(sprint?.start_date)} &nbsp; 🡒  &nbsp; {formatDate(sprint?.end_date)}
+                            </h3>
+                        </div>
+                        <div className='border-yellow-500 text-[11px] border bg-[#ffe5a3] rounded-sm px-[6px]'>{days} days left</div>
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger className="bg-blue-500 h-6 w-6 cursor-pointer rounded-full">
+                                    <h5 className="text-center text-white text-[12px] pt-[1px]">HS</h5>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    <p>Creator</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                        <Ellipsis className='h-6 w-8' />
+                    </div>
+
+                </div>
+
+            </div>
+            <Separator />
+
+        </>)
+}

mango-frontend/src/components/Sprints/Sprints.tsx

@@ -7,6 +7,7 @@ import { AppDispatch, RootState } from '@/redux/store'
 import { clearError, clearMessage, fetchSprints } from '@/redux/slices/sprintSlice'
 import { UseDialog } from '@/hooks/useDialog'
 import CreateSprint from '../Create Sprint/CreateSprint'
+import SprintList from './SprintList'
 
 const Sprints: React.FC = () => {
     const dispatch = useDispatch<AppDispatch>();
@@ -35,33 +36,21 @@ const Sprints: React.FC = () => {
                     <Button className='border-2' onClick={openDialog}>Add Sprint</Button>
                 </div>
                 <Separator className='mt-[2px]' />
-                <div className='mx-4 mt-3'>
-                    <Tabs defaultValue="ongoing" className="w-[400px]">
-                        <TabsList>
+                <div className=' mt-3'>
+                    <Tabs defaultValue="ongoing">
+                        <TabsList className='mx-4'>
                             <TabsTrigger value="ongoing">Ongoing</TabsTrigger>
                             <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
                             <TabsTrigger value="completed">Completed</TabsTrigger>
                         </TabsList>
                         <TabsContent value="ongoing">
-                            {sprints.map((sprint, i) => (
-                                <div className='text-black' key={i}>
-                                    {sprint.status === 'ongoing' && sprint.name}
-                                </div>
-                            ))}
+                            <SprintList sprints={sprints.filter(sprint => sprint.status === 'ongoing')} />
                         </TabsContent>
                         <TabsContent value="upcoming">
-                            {sprints.map((sprint, i) => (
-                                <div key={i}>
-                                    {sprint.status === 'upcoming' && sprint.name}
-                                </div>
-                            ))}
+                            <SprintList sprints={sprints.filter(sprint => sprint.status === 'upcoming')} />
                         </TabsContent>
                         <TabsContent value="completed">
-                            {sprints.map((sprint, i) => (
-                                <div key={i}>
-                                    {sprint.status === 'completed' && sprint.name}
-                                </div>
-                            ))}
+                            <SprintList sprints={sprints.filter(sprint => sprint.status === 'completed')} />
                         </TabsContent>
                     </Tabs>
                 </div>

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

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-2 py-1 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }