feat: project status updation

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,7 +57,7 @@ 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>
@@ -68,7 +67,7 @@ export default async function DashboardPage() {
         </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/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/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/tasks.tsx

@@ -39,9 +39,16 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import UploadFile from '@/components/upload-file';
 
+type TaskWithProjects = taskSchemaType & {
+  projects: {
+    name: string;
+    project_status: string;
+  };
+};
+
 interface TasksProps {
+  tasks: TaskWithProjects[];
   projectName: string;
-  tasks: taskSchemaType[];
 }
 type FileData = {
   id: string;
@@ -50,9 +57,13 @@ type FileData = {
 };
 
 export default function Tasks({ projectName, tasks }: TasksProps) {
-  const [taskSelected, setTaskSelected] = React.useState<taskSchemaType | null>(
-    tasks ? tasks[0] : null
-  );
+  const status =
+    tasks && tasks.length > 0
+      ? tasks[0].projects.project_status
+      : 'IN_PROGRESS';
+  const [isProjectInProgress] = React.useState(status === 'IN_PROGRESS');
+  const [taskSelected, setTaskSelected] =
+    React.useState<TaskWithProjects | null>(tasks ? tasks[0] : null);
   const [isLoading, setIsLoading] = React.useState(false);
   const { handleZip } = useDownload(
     taskSelected ? ([taskSelected?.filePath] as string[]) : ['']
@@ -93,6 +104,18 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
     },
   });
 
+  const updateProjectStatus = async (status: string) => {
+    const response = await fetch('/api/project', {
+      method: 'PUT',
+      body: JSON.stringify({ projectName, status }),
+    });
+    if (response.ok) {
+      toast.success('Project status updated');
+    } else {
+      toast.error('Failed to update project status');
+    }
+  };
+
   const onSubmit: SubmitHandler<fileSchemaType> = async (
     data: fileSchemaType
   ) => {
@@ -118,7 +141,66 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
   };
   return (
     <div className='h-96 flex flex-col gap-3'>
-      <AddTaskForm projectName={projectName} />
+      {tasks && tasks.length > 0 ? (
+        <div className='flex justify-between'>
+          <h2 className='text-sm text-muted-foreground'>
+            Project Status:{' '}
+            <span
+              className={cn(
+                status === 'COMPLETED'
+                  ? 'text-primary'
+                  : status === 'CANCELLED'
+                  ? 'text-destructive'
+                  : ''
+              )}
+            >
+              {status}
+            </span>
+          </h2>
+
+          <div className='flex gap-2'>
+            <Button
+              size='sm'
+              disabled={!isProjectInProgress}
+              onClick={() => {
+                updateProjectStatus('COMPLETED');
+              }}
+            >
+              Mark Project as Done
+            </Button>
+            <Button
+              size='sm'
+              variant='destructive'
+              disabled={!isProjectInProgress}
+              onClick={() => {
+                updateProjectStatus('CANCELLED');
+              }}
+            >
+              Mark Project as Cancelled
+            </Button>
+            <AddTaskForm projectName={projectName} />
+          </div>
+        </div>
+      ) : (
+        <div className='flex justify-between'>
+          <h2 className='text-sm text-muted-foreground'>
+            Project Status:{' '}
+            <span
+              className={cn(
+                status === 'COMPLETED'
+                  ? 'text-primary'
+                  : status === 'CANCELLED'
+                  ? 'text-destructive'
+                  : ''
+              )}
+            >
+              {status}
+            </span>
+          </h2>
+
+          <AddTaskForm projectName={projectName} />
+        </div>
+      )}
 
       <ResizablePanelGroup
         direction='horizontal'
@@ -179,9 +261,6 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
                       >
                         Download Reference Material
                       </Button>
-                      <Button size='sm' variant='secondary'>
-                        Mark as Done
-                      </Button>
                     </div>
                   </div>
                 ) : (
@@ -206,7 +285,7 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
 
                     <Dialog>
                       <DialogTrigger asChild>
-                        <Button size='sm'>
+                        <Button size='sm' disabled={!isProjectInProgress}>
                           <Icons.attach className='mr-2 size-4' />
                           Attach File
                         </Button>

src/lib/schemas.ts

@@ -119,9 +119,6 @@ export const taskFormSchema = fileSchema.extend({
 export const taskSchema = z.object({
   title: z.string(),
   details: z.string(),
-  status: z
-    .enum(['IN_PROGRESS', 'COMPLETED', 'CANCELLED'])
-    .default('IN_PROGRESS'),
   filePath: z.string(),
   project_id: z.string().uuid(),
 });