feat(dashboard): implement task listing api

src/frontend/src/api/dashboard.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 import { getRequestedTasks } from '@Services/project';
-import { getTaskStatistics } from '@Services/dashboard';
+import { getTaskList, getTaskStatistics } from '@Services/dashboard';
 
 export const useGetRequestedTasksListQuery = (
   queryOptions?: Partial<UseQueryOptions>,
@@ -24,3 +24,14 @@ export const useGetDashboardTaskStaticsQuery = (
     ...queryOptions,
   });
 };
+
+export const useGetTaskListQuery = (
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
+  return useQuery({
+    queryKey: ['task-list'],
+    queryFn: getTaskList,
+    select: (res: any) => res.data,
+    ...queryOptions,
+  });
+};

src/frontend/src/components/Dashboard/TaskLogs/index.tsx

@@ -1,14 +1,37 @@
+import { useMemo } from 'react';
+import { useGetTaskListQuery } from '@Api/dashboard';
+import TaskLogsTable from './TaskLogsTable';
+
 interface TaskLogsProps {
   title: string;
 }
 
+const getStatusByTitle = (title: string): string => {
+  if (title === 'Ongoing Tasks') return 'ongoing';
+  if (title === 'Request Logs') return 'request logs';
+  if (title === 'Unflyable Tasks') return 'Unflyable';
+  if (title === 'Completed Tasks') return 'completed';
+
+  return '';
+};
+
 const TaskLogs = ({ title }: TaskLogsProps) => {
+  const { data: taskList }: any = useGetTaskListQuery();
+
+  const filteredData = useMemo(
+    () =>
+      taskList?.filter(
+        (task: Record<string, any>) => task?.state === getStatusByTitle(title),
+      ),
+    [title, taskList],
+  );
+
   return (
     <div className="naxatw-mt-8 naxatw-flex-col">
       <h4 className="naxatw-py-2 naxatw-text-base naxatw-font-bold naxatw-text-gray-800">
         {title}
       </h4>
-      {/* <FlexColumn className="naxatw-max-h-[24.4rem] naxatw-gap-2 naxatw-overflow-y-auto"></FlexColumn> */}
+      <TaskLogsTable data={filteredData} />
     </div>
   );
 };

src/frontend/src/constants/dashboard.ts

@@ -6,13 +6,13 @@ export const dashboardCardsForProjectCreator = [
   },
   {
     id: 2,
-    title: 'Unflyable Tasks',
-    value: 'unflyable_tasks',
+    title: 'Ongoing Tasks',
+    value: 'ongoing_tasks',
   },
   {
     id: 3,
-    title: 'Ongoing Tasks',
-    value: 'ongoing_tasks',
+    title: 'Unflyable Tasks',
+    value: 'unflyable_tasks',
   },
   {
     id: 4,

src/frontend/src/services/dashboard.ts

@@ -1,5 +1,6 @@
-/* eslint-disable import/prefer-default-export */
 import { authenticated, api } from '.';
 
 export const getTaskStatistics = () =>
   authenticated(api).get('/tasks/statistics/');
+
+export const getTaskList = () => authenticated(api).get('/tasks/');