Merge branch 'main' of https://github.com/NoorFatima01/team-management

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",

src/app/(lobby)/dashboard/page.tsx

@@ -40,7 +40,6 @@ export default async function DashboardPage() {
     .from('tasks')
     .select('title, details, projects(name)')
     .in('project_id', projectData?.map((project) => project.project_id) || [])
-    .eq('status', 'IN_PROGRESS')
     .not('projects', 'is', null);
   const tasksDataWithProjectName =
     tasksData as unknown as TaskDataWithProjectName[];
@@ -58,17 +57,17 @@ export default async function DashboardPage() {
   });
 
   return (
-    <div className='grid grid-flow-col gap-2'>
+    <div className='grid lg:grid-flow-col gap-2'>
       <Card className='col-span-4'>
         <CardHeader>
           <CardTitle>Project Statuses Per Team</CardTitle>
         </CardHeader>
-        <CardContent className='flex'>
+        <CardContent className='grid grid-flow-col'>
           <DashboardGraph projectsByTeam={projectsByTeam} />
         </CardContent>
       </Card>
 
-      <Card className='w-[350px]'>
+      <Card className='lg:w-[350px] col-span-4'>
         <CardHeader className='flex flex-col gap-3'>
           <CardTitle>Tasks</CardTitle>
           <CardDescription>Following are your ongoing tasks.</CardDescription>

src/app/(lobby)/dashboard/projects/[project]/page.tsx

@@ -9,18 +9,26 @@ interface ProjectDetailsPageProps {
   params: { project: string };
 }
 
+type TaskWithProjects = taskSchemaType & {
+  projects: {
+    name: string;
+    project_status: string;
+  };
+};
+
 export default async function ProjectDetailsPage({
   params,
 }: ProjectDetailsPageProps) {
   const { project } = params;
   const serverSupabase = createSupabaseServerClient();
-  const { data } = await serverSupabase
+
+  const { data: data } = await serverSupabase
     .from('tasks')
-    .select('title, details, status, filePath, projects(project_id)')
+    .select('title, details, filePath, projects(name, project_status)')
     .eq('projects.name', project)
     .not('projects', 'is', null);
 
-  const tasks = data as unknown as taskSchemaType[];
+  const tasks = data as unknown as TaskWithProjects[];
 
   return (
     <div>

src/app/(lobby)/inbox/page.tsx

@@ -1,5 +1,13 @@
+import Image from 'next/image';
 import React from 'react';
 
 export default function InboxPage() {
-  return <div>InboxPage</div>;
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <h1 className='text-3xl font-semibold mt-8 tracking-tighter'>
+        Chat with your team
+      </h1>
+      <Image src='/images/inbox.png' alt='Inbox' width={400} height={400} />
+    </div>
+  );
 }

src/app/api/project/route.ts

@@ -95,3 +95,39 @@ export async function GET(req: Request) {
     }
   }
 }
+
+export async function PUT(req: Request) {
+  try {
+    const serverSupabase = createSupabaseServerClient();
+    const reqData = await req.json();
+
+    //find the project with name project name
+    const { data: project } = await serverSupabase
+      .from('projects')
+      .select('*')
+      .eq('name', reqData.projectName);
+    const oldProject = project && project[0] ? project[0] : null;
+    const updatedProject = {
+      ...oldProject,
+      project_status: reqData.status,
+    };
+
+    const { error } = await serverSupabase
+      .from('projects')
+      .update(updatedProject)
+      .eq('name', reqData.projectName);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+    return new Response(JSON.stringify('Updation success'), { status: 200 });
+  } catch (error: unknown) {
+    if (error instanceof z.ZodError) {
+      return new Response(JSON.stringify(error.issues), { status: 422 });
+    } else if (error instanceof Error) {
+      return new Response(error.message, { status: 500 });
+    } else {
+      return new Response(null, { status: 500 });
+    }
+  }
+}

src/app/api/teams/route.ts

@@ -46,7 +46,6 @@ export async function POST(req: Request) {
         team_head: user_id,
         team_id: v4(),
         created_at: new Date().toISOString(),
-        projects_done: 0,
         projects_in_progress: 0,
       };
 

src/app/api/teams/team/[team_id]/route.ts

@@ -37,3 +37,30 @@ export async function POST(
 
   return new Response(JSON.stringify({ success: true }), { status: 200 });
 }
+
+export async function DELETE(
+  req: Request,
+  { params }: { params: { team_id: string } }
+) {
+  try {
+    const { team_id } = params;
+
+    const serverSupabase = createSupabaseServerClient();
+    //delete team
+    const { error } = await serverSupabase
+      .from('teams')
+      .delete()
+      .eq('team_id', team_id);
+    if (error) {
+      throw new Error(error.message);
+    }
+
+    return new Response(JSON.stringify({ success: true }), { status: 200 });
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return new Response(error.message, { status: 500 });
+    } else {
+      return new Response(null, { status: 500 });
+    }
+  }
+}

src/components/Skeleton.tsx

@@ -7,7 +7,7 @@ type SkeletonProps = React.ComponentPropsWithoutRef<'div'>;
 export default function Skeleton({ className, ...rest }: SkeletonProps) {
   return (
     <div
-      className={cn('animate-shimmer bg-[#f6f7f8]', className)}
+      className={cn('animate-shimmer bg-muted-foreground', className)}
       style={{
         backgroundImage:
           'linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%)',

src/components/dashboard-graph.tsx

@@ -71,13 +71,13 @@ export function DashboardGraph({ projectsByTeam }: DashboardGraphProps) {
               <XAxis
                 dataKey='status'
                 stroke='#888888'
-                fontSize={12}
+                fontSize={10}
                 tickLine={false}
                 axisLine={false}
               />
               <YAxis
                 stroke='#888888'
-                fontSize={12}
+                fontSize={10}
                 tickLine={false}
                 axisLine={false}
                 tickFormatter={(value) => `${value}`}

src/components/forms/add-task-form.tsx

@@ -100,17 +100,15 @@ export default function AddTaskForm({ projectName }: AddTaskFormProps) {
       title: data.title as string,
       details: data.details as string,
       filePath: filePath as string,
-      status: 'IN_PROGRESS',
+
       project_id: projectId as string,
     });
   };
 
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button size='sm' className='self-end'>
-          Add Task
-        </Button>
+        <Button size='sm'>Add Task</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader className='mb-4'>

src/components/icons.tsx

@@ -1,6 +1,7 @@
 import {
   type LucideProps,
   Bell,
+  Briefcase,
   CheckIcon,
   File,
   FileImage,
@@ -18,6 +19,7 @@ import {
   Plus,
   Settings,
   SunMedium,
+  Timer,
   UploadCloud,
   User,
   UserRoundPlus,
@@ -36,11 +38,13 @@ export const Icons = {
   employee: UserRoundPlus,
   spinner: Loader2,
   add: Plus,
+  project: Briefcase,
   folder: Folder,
   file: File,
   fileImage: FileImage,
   fileText: FileText,
   attach: Paperclip,
+  timer: Timer,
   user: User,
   dashboard: Gauge,
   settings: Settings,

src/components/message-field.tsx

@@ -42,6 +42,13 @@ export default function MessageField({ teamId }: MessageFieldProps) {
     sendMessage(message);
   };
 
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleClick(); // Call handleClick function when Enter key is pressed
+    }
+  };
+
   return (
     <div className='grid w-full items-center gap-4 p-6'>
       <Label>Message</Label>
@@ -51,6 +58,7 @@ export default function MessageField({ teamId }: MessageFieldProps) {
           placeholder={placeholder}
           value={message}
           onChange={handleChange}
+          onKeyPress={handleKeyPress} // Add event listener for key press
         />
         <Button size='sm' onClick={handleClick} disabled={isLoading}>
           {isLoading && (

src/components/paginated-projects.tsx

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 
 import Pagination from '@/components/pagination';
 import ProjectCard from '@/components/project-card';
+import { Skeleton } from '@/components/ui/skeleton';
 
 type Project = {
   project_id: number;
@@ -19,6 +20,9 @@ type Project = {
   end_date: string;
 };
 
+//an array from 0 to 2
+const divs = Array.from({ length: 3 }, (_, i) => i);
+
 const PaginatedProjects = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -51,12 +55,20 @@ const PaginatedProjects = () => {
     },
   });
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  // if (isLoading) {
+  //   return <div>Loading...</div>;
+  // }
 
-  if (isFetching) {
-    return <div>Fetching...</div>;
+  if (isFetching || isLoading) {
+    return (
+      <div className='container grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 my-4'>
+        {divs.map((div) => (
+          <div key={div}>
+            <Skeleton className=' h-64 w-[420px]  rounded-lg' />
+          </div>
+        ))}
+      </div>
+    );
   }
 
   if (error) {