feat(dashboard): add accept/reject task mapping request functionality

src/frontend/src/views/Dashboard/index.tsx

@@ -1,8 +1,62 @@
-import { FlexRow } from '@Components/common/Layouts';
+import { useGetRequestedTasksListQuery } from '@Api/dashboard';
+import { FlexColumn, FlexRow } from '@Components/common/Layouts';
 import { DashboardSidebar, DashboardCard } from '@Components/Dashboard';
-import { dashboardCards } from '@Constants/dashboard';
+import { Button } from '@Components/RadixComponents/Button';
+import {
+  dashboardCardsForDroneOperator,
+  dashboardCardsForProjectCreator,
+} from '@Constants/dashboard';
+import { postTaskStatus } from '@Services/project';
+import { useMutation } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { toast } from 'react-toastify';
 
 export default function Dashboard() {
+  const signedInAs = localStorage.getItem('signedInAs') || 'Project Creator';
+  const dashboardCards =
+    signedInAs === 'Project Creator'
+      ? dashboardCardsForProjectCreator
+      : dashboardCardsForDroneOperator;
+
+  const { data: requestedTasks } = useGetRequestedTasksListQuery();
+
+  const { mutate: respondToRequest } = useMutation<any, any, any, unknown>({
+    mutationFn: postTaskStatus,
+    onSuccess: () => {
+      toast.success('Responded to the request');
+    },
+    onError: (err: any) => {
+      toast.error(err.message);
+    },
+  });
+
+  const requestedForMappingTasks: any[] =
+    useMemo(
+      () =>
+        // @ts-ignore
+        requestedTasks?.reduce((acc: any[], curr: Record<string, any>) => {
+          if (curr?.state === 'REQUEST_FOR_MAPPING') return [...acc, curr];
+          return acc;
+        }, []),
+      [requestedTasks],
+    ) || [];
+
+  const handleReject = (taskId: string, projectId: string) => {
+    respondToRequest({
+      projectId,
+      taskId,
+      data: { event: 'bad' },
+    });
+  };
+
+  const handleApprove = (taskId: string, projectId: string) => {
+    respondToRequest({
+      projectId,
+      taskId,
+      data: { event: 'map' },
+    });
+  };
+
   return (
     <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-16 naxatw-pt-8">
       <FlexRow className="naxatw-mb-4 naxatw-py-3">
@@ -17,9 +71,49 @@ export default function Dashboard() {
                 key={card.id}
                 title={card.title}
                 value={card.value}
+                active={card.title === 'Request Logs'}
               />
             ))}
           </div>
+          <div className="naxatw-mt-8 naxatw-flex-col">
+            <h4 className="naxatw-py-2 naxatw-text-base naxatw-font-bold naxatw-text-gray-800">
+              Request Logs
+            </h4>
+            <FlexColumn className="naxatw-max-h-[24.4rem] naxatw-gap-2 naxatw-overflow-y-auto">
+              {requestedForMappingTasks?.map((task: Record<string, any>) => (
+                <div
+                  key={task.task_id}
+                  className="naxatw-flex naxatw-h-fit naxatw-w-full naxatw-items-center naxatw-justify-between naxatw-rounded-xl naxatw-border naxatw-border-gray-300 naxatw-p-3"
+                >
+                  <div>
+                    The Task <strong>#{task.task_id}</strong> is requested for
+                    Mapping
+                  </div>
+                  <div className="naxatw-flex naxatw-w-[172px] naxatw-gap-3">
+                    <Button
+                      variant="outline"
+                      className="naxatw-text-red"
+                      onClick={() =>
+                        handleReject(task.task_id, task.project_id)
+                      }
+                      leftIcon="close"
+                    >
+                      Reject
+                    </Button>
+                    <Button
+                      className="!naxatw-bg-red naxatw-text-white"
+                      onClick={() =>
+                        handleApprove(task.task_id, task.project_id)
+                      }
+                      leftIcon="check"
+                    >
+                      Approve
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </FlexColumn>
+          </div>
         </div>
       </div>
     </section>