diff --git a/src/frontend/src/api/dashboard.ts b/src/frontend/src/api/dashboard.ts new file mode 100644 index 00000000..3b66b639 --- /dev/null +++ b/src/frontend/src/api/dashboard.ts @@ -0,0 +1,14 @@ +/* eslint-disable import/prefer-default-export */ +import { UseQueryOptions, useQuery } from '@tanstack/react-query'; +import { getRequestedTasks } from '@Services/project'; + +export const useGetRequestedTasksListQuery = ( + queryOptions?: Partial, +) => { + return useQuery({ + queryKey: ['requested-task-list'], + queryFn: getRequestedTasks, + select: (res: any) => res.data, + ...queryOptions, + }); +}; diff --git a/src/frontend/src/components/Dashboard/DashboardCard/index.tsx b/src/frontend/src/components/Dashboard/DashboardCard/index.tsx index c43eac43..811fbded 100644 --- a/src/frontend/src/components/Dashboard/DashboardCard/index.tsx +++ b/src/frontend/src/components/Dashboard/DashboardCard/index.tsx @@ -5,11 +5,18 @@ import graphImage from '@Assets/images/graph.svg'; interface IDashboardCardProps { title: string; value: number; + active: boolean; } -export default function DashboardCard({ title, value }: IDashboardCardProps) { +export default function DashboardCard({ + title, + value, + active, +}: IDashboardCardProps) { return ( - +

{value}

diff --git a/src/frontend/src/constants/dashboard.ts b/src/frontend/src/constants/dashboard.ts index 830c9a37..016198c5 100644 --- a/src/frontend/src/constants/dashboard.ts +++ b/src/frontend/src/constants/dashboard.ts @@ -1,8 +1,8 @@ /* eslint-disable import/prefer-default-export */ -export const dashboardCards = [ +export const dashboardCardsForProjectCreator = [ { id: 1, - title: 'Task Created', + title: 'Request Logs', value: 12, }, { @@ -21,3 +21,21 @@ export const dashboardCards = [ value: 7, }, ]; + +export const dashboardCardsForDroneOperator = [ + { + id: 2, + title: 'Ongoing Task', + value: 7, + }, + { + id: 3, + title: 'Completed Task', + value: 5, + }, + { + id: 4, + title: 'Completed Task', + value: 7, + }, +]; diff --git a/src/frontend/src/services/project.ts b/src/frontend/src/services/project.ts index 6d58acc3..8281f0ff 100644 --- a/src/frontend/src/services/project.ts +++ b/src/frontend/src/services/project.ts @@ -10,3 +10,5 @@ export const postTaskStatus = (payload: Record) => { headers: { 'Content-Type': 'application/json' }, }); }; +export const getRequestedTasks = () => + authenticated(api).get('/tasks/requested_tasks/pending'); diff --git a/src/frontend/src/views/Dashboard/index.tsx b/src/frontend/src/views/Dashboard/index.tsx index 6feb591a..2837f2c9 100644 --- a/src/frontend/src/views/Dashboard/index.tsx +++ b/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({ + 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) => { + 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 (
@@ -17,9 +71,49 @@ export default function Dashboard() { key={card.id} title={card.title} value={card.value} + active={card.title === 'Request Logs'} /> ))} +
+

+ Request Logs +

+ + {requestedForMappingTasks?.map((task: Record) => ( +
+
+ The Task #{task.task_id} is requested for + Mapping +
+
+ + +
+
+ ))} +
+