From d4ee38134537d58750a38465c62e6348b0d61fb0 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Fri, 9 Aug 2024 12:05:40 +0545
Subject: [PATCH 1/7] feat(dashboard): implement api to to show tasks status
 with count

---
 src/frontend/src/api/dashboard.ts          | 12 ++++++++
 src/frontend/src/services/dashboard.ts     |  5 ++++
 src/frontend/src/views/Dashboard/index.tsx | 32 ++++++++++++----------
 3 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 src/frontend/src/services/dashboard.ts

diff --git a/src/frontend/src/api/dashboard.ts b/src/frontend/src/api/dashboard.ts
index 3b66b639..019c529a 100644
--- a/src/frontend/src/api/dashboard.ts
+++ b/src/frontend/src/api/dashboard.ts
@@ -1,6 +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';
 
 export const useGetRequestedTasksListQuery = (
   queryOptions?: Partial<UseQueryOptions>,
@@ -12,3 +13,14 @@ export const useGetRequestedTasksListQuery = (
     ...queryOptions,
   });
 };
+
+export const useGetDashboardTaskStaticsQuery = (
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
+  return useQuery({
+    queryKey: ['task-statistics'],
+    queryFn: getTaskStatistics,
+    select: (res: any) => res.data,
+    ...queryOptions,
+  });
+};
diff --git a/src/frontend/src/services/dashboard.ts b/src/frontend/src/services/dashboard.ts
new file mode 100644
index 00000000..61a07fd3
--- /dev/null
+++ b/src/frontend/src/services/dashboard.ts
@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+import { authenticated, api } from '.';
+
+export const getTaskStatistics = () =>
+  authenticated(api).get('/tasks/statistics/');
diff --git a/src/frontend/src/views/Dashboard/index.tsx b/src/frontend/src/views/Dashboard/index.tsx
index e33c65a2..023d3e3b 100644
--- a/src/frontend/src/views/Dashboard/index.tsx
+++ b/src/frontend/src/views/Dashboard/index.tsx
@@ -1,4 +1,4 @@
-import { useGetRequestedTasksListQuery } from '@Api/dashboard';
+import { useGetDashboardTaskStaticsQuery } from '@Api/dashboard';
 import { FlexRow } from '@Components/common/Layouts';
 import { DashboardSidebar, DashboardCard } from '@Components/Dashboard';
 import RequestLogs from '@Components/Dashboard/RequestLogs';
@@ -32,9 +32,16 @@ export default function Dashboard() {
       ? dashboardCardsForProjectCreator
       : dashboardCardsForDroneOperator;
 
-  const { data: requestedTasks } = useGetRequestedTasksListQuery({
-    select: (data: any) => data.data,
-  });
+  const { data: taskStatistics }: Record<string, any> =
+    useGetDashboardTaskStaticsQuery({
+      select: (data: any) => {
+        const taskCounts: Record<string, any> = data?.data;
+        return dashboardCards?.map(card => ({
+          ...card,
+          count: taskCounts?.[`${card?.value}`],
+        }));
+      },
+    });
 
   return (
     <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-16 naxatw-pt-8">
@@ -45,26 +52,23 @@ export default function Dashboard() {
         <DashboardSidebar />
         <div className="naxatw-col-span-4">
           <div className="naxatw-grid naxatw-grid-cols-4 naxatw-gap-5">
-            {dashboardCards.map(card => (
+            {taskStatistics?.map((task: any) => (
               <div
-                key={card.id}
+                key={task.id}
                 tabIndex={0}
                 role="button"
                 onKeyUp={() =>
-                  setActiveTab({ value: card.value, title: card.title })
+                  setActiveTab({ value: task.value, title: task.title })
                 }
                 onClick={() =>
-                  setActiveTab({ value: card.value, title: card.title })
+                  setActiveTab({ value: task.value, title: task.title })
                 }
                 className="naxatw-cursor-pointer"
               >
                 <DashboardCard
-                  title={card.title}
-                  value={
-                    // @ts-ignore
-                    card?.value === 'request_logs' ? requestedTasks?.length : 0
-                  }
-                  active={card.value === activeTab.value}
+                  title={task.title}
+                  count={task?.count}
+                  active={task.value === activeTab.value}
                 />
               </div>
             ))}

From cb71f4a8728c98bd17720457a27ef5fbd974835c Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Fri, 9 Aug 2024 12:10:39 +0545
Subject: [PATCH 2/7] feat(dashboard): update card UI

---
 .../src/components/Dashboard/DashboardCard/index.tsx |  6 +++---
 src/frontend/src/constants/dashboard.ts              | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/components/Dashboard/DashboardCard/index.tsx b/src/frontend/src/components/Dashboard/DashboardCard/index.tsx
index 7d9407c6..322fedf9 100644
--- a/src/frontend/src/components/Dashboard/DashboardCard/index.tsx
+++ b/src/frontend/src/components/Dashboard/DashboardCard/index.tsx
@@ -4,13 +4,13 @@ import graphImage from '@Assets/images/graph.svg';
 
 interface IDashboardCardProps {
   title: string;
-  value: number;
+  count: number;
   active: boolean;
 }
 
 export default function DashboardCard({
   title,
-  value,
+  count,
   active,
 }: IDashboardCardProps) {
   return (
@@ -19,7 +19,7 @@ export default function DashboardCard({
     >
       <Image src={graphImage} />
       <FlexColumn>
-        <h2>{value}</h2>
+        <h2>{count}</h2>
         <p>{title}</p>
       </FlexColumn>
     </FlexRow>
diff --git a/src/frontend/src/constants/dashboard.ts b/src/frontend/src/constants/dashboard.ts
index ca59a3ee..6064596c 100644
--- a/src/frontend/src/constants/dashboard.ts
+++ b/src/frontend/src/constants/dashboard.ts
@@ -6,18 +6,18 @@ export const dashboardCardsForProjectCreator = [
   },
   {
     id: 2,
-    title: 'Un-flyable Tasks',
-    value: 'un-flyable_tasks',
+    title: 'Unflyable Tasks',
+    value: 'unflyable_tasks',
   },
   {
     id: 3,
     title: 'Ongoing Tasks',
-    value: 'ongoing_task',
+    value: 'ongoing_tasks',
   },
   {
     id: 4,
     title: 'Completed Tasks',
-    value: 'complete_tasks',
+    value: 'completed_tasks',
   },
 ];
 
@@ -29,8 +29,8 @@ export const dashboardCardsForDroneOperator = [
   },
   {
     id: 2,
-    title: 'Tasks Mapped',
-    value: 'tasks_mapped',
+    title: 'Unflyable Tasks',
+    value: 'unflyable_tasks',
   },
   {
     id: 3,

From 2d036a14bd4a62492a1e9b104db3851e1e6f17e3 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Fri, 9 Aug 2024 12:59:43 +0545
Subject: [PATCH 3/7] feat(dashboard): show statistics loadings state

---
 .../Dashboard/DashboardCard/index.tsx         | 12 +++++
 src/frontend/src/views/Dashboard/index.tsx    | 51 +++++++++++--------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/components/Dashboard/DashboardCard/index.tsx b/src/frontend/src/components/Dashboard/DashboardCard/index.tsx
index 322fedf9..173b38a6 100644
--- a/src/frontend/src/components/Dashboard/DashboardCard/index.tsx
+++ b/src/frontend/src/components/Dashboard/DashboardCard/index.tsx
@@ -8,6 +8,18 @@ interface IDashboardCardProps {
   active: boolean;
 }
 
+export const DashboardCardSkeleton = () => {
+  return (
+    <div className="naxatw-flex naxatw-h-[130px] naxatw-w-full naxatw-animate-pulse naxatw-items-center naxatw-gap-3 naxatw-rounded-xl naxatw-bg-gray-200 naxatw-px-2">
+      <div className="naxatw-h-10 naxatw-w-10 naxatw-rounded-full naxatw-bg-gray-300" />
+      <div className="naxatw-flex naxatw-w-[140px] naxatw-flex-col naxatw-gap-2">
+        <div className="naxatw-h-9 naxatw-w-[50px] naxatw-bg-gray-300" />
+        <div className="naxatw-h-5 naxatw-w-full naxatw-bg-gray-300" />
+      </div>
+    </div>
+  );
+};
+
 export default function DashboardCard({
   title,
   count,
diff --git a/src/frontend/src/views/Dashboard/index.tsx b/src/frontend/src/views/Dashboard/index.tsx
index 023d3e3b..fe463030 100644
--- a/src/frontend/src/views/Dashboard/index.tsx
+++ b/src/frontend/src/views/Dashboard/index.tsx
@@ -1,6 +1,7 @@
 import { useGetDashboardTaskStaticsQuery } from '@Api/dashboard';
 import { FlexRow } from '@Components/common/Layouts';
 import { DashboardSidebar, DashboardCard } from '@Components/Dashboard';
+import { DashboardCardSkeleton } from '@Components/Dashboard/DashboardCard';
 import RequestLogs from '@Components/Dashboard/RequestLogs';
 import TaskLogs from '@Components/Dashboard/TaskLogs';
 import {
@@ -32,7 +33,7 @@ export default function Dashboard() {
       ? dashboardCardsForProjectCreator
       : dashboardCardsForDroneOperator;
 
-  const { data: taskStatistics }: Record<string, any> =
+  const { data: taskStatistics, isLoading }: Record<string, any> =
     useGetDashboardTaskStaticsQuery({
       select: (data: any) => {
         const taskCounts: Record<string, any> = data?.data;
@@ -52,26 +53,34 @@ export default function Dashboard() {
         <DashboardSidebar />
         <div className="naxatw-col-span-4">
           <div className="naxatw-grid naxatw-grid-cols-4 naxatw-gap-5">
-            {taskStatistics?.map((task: any) => (
-              <div
-                key={task.id}
-                tabIndex={0}
-                role="button"
-                onKeyUp={() =>
-                  setActiveTab({ value: task.value, title: task.title })
-                }
-                onClick={() =>
-                  setActiveTab({ value: task.value, title: task.title })
-                }
-                className="naxatw-cursor-pointer"
-              >
-                <DashboardCard
-                  title={task.title}
-                  count={task?.count}
-                  active={task.value === activeTab.value}
-                />
-              </div>
-            ))}
+            {isLoading ? (
+              <>
+                {Array.from({ length: 4 }, (_, index) => (
+                  <DashboardCardSkeleton key={index} />
+                ))}
+              </>
+            ) : (
+              taskStatistics?.map((task: any) => (
+                <div
+                  key={task.id}
+                  tabIndex={0}
+                  role="button"
+                  onKeyUp={() =>
+                    setActiveTab({ value: task.value, title: task.title })
+                  }
+                  onClick={() =>
+                    setActiveTab({ value: task.value, title: task.title })
+                  }
+                  className="naxatw-cursor-pointer"
+                >
+                  <DashboardCard
+                    title={task.title}
+                    count={task?.count}
+                    active={task.value === activeTab.value}
+                  />
+                </div>
+              ))
+            )}
           </div>
           {getContent(activeTab.value, activeTab.title)}
         </div>

From 6f470ec38cf18e8943e7ccd8a09cbf71f6d1d534 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Mon, 12 Aug 2024 09:10:40 +0545
Subject: [PATCH 4/7] feat(dashboard): create TaskLogsTable

---
 .../Dashboard/TaskLogs/TaskLogsTable.tsx      | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx

diff --git a/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx b/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
new file mode 100644
index 00000000..eaac4eab
--- /dev/null
+++ b/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
@@ -0,0 +1,58 @@
+import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+
+interface ITaskLogsTableProps {
+  data: any[];
+}
+
+const TaskLogsTable = ({ data: taskList }: ITaskLogsTableProps) => {
+  const navigate = useNavigate();
+  return (
+    <div className="flex">
+      <table className="naxatw-w-full naxatw-overflow-hidden naxatw-rounded-lg">
+        <thead>
+          <tr className="naxatw-bg-red naxatw-text-left naxatw-font-normal naxatw-text-white">
+            <td className="naxatw-w-80 naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+              ID
+            </td>
+            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+              Total task area
+            </td>
+            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+              Est.flight time
+            </td>
+            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+              Created Date
+            </td>
+            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+              Status
+            </td>
+            <td className="naxatw-w-12" />
+          </tr>
+        </thead>
+        <tbody>
+          {taskList?.map(task => (
+            <tr key={task.task_id}>
+              <td>{task.task_id}</td>
+              <td>{task.task_area}</td>
+              <td>-</td>
+              <td>{format(new Date(task.created_at), 'yyyy-MM-dd')}</td>
+              <td>{task.state}</td>
+              <td className="naxatw-flex naxatw-items-center">
+                <div
+                  className="naxatw-flex naxatw-h-8 naxatw-w-8 naxatw-cursor-pointer naxatw-items-center naxatw-justify-center naxatw-rounded-lg hover:naxatw-bg-gray-200"
+                  role="presentation"
+                  onClick={() => navigate(`/tasks/${task.task_id}`)}
+                >
+                  <i className="material-icons-outlined">zoom_in</i>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default TaskLogsTable;

From 6e3d8a1fda33929bfa6a12a5205c11bfbba61d65 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Mon, 12 Aug 2024 09:13:26 +0545
Subject: [PATCH 5/7] feat(dashboard): implement task listing api

---
 src/frontend/src/api/dashboard.ts             | 13 +++++++++-
 .../components/Dashboard/TaskLogs/index.tsx   | 25 ++++++++++++++++++-
 src/frontend/src/constants/dashboard.ts       |  8 +++---
 src/frontend/src/services/dashboard.ts        |  3 ++-
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/api/dashboard.ts b/src/frontend/src/api/dashboard.ts
index 019c529a..2e1a3b85 100644
--- a/src/frontend/src/api/dashboard.ts
+++ b/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,
+  });
+};
diff --git a/src/frontend/src/components/Dashboard/TaskLogs/index.tsx b/src/frontend/src/components/Dashboard/TaskLogs/index.tsx
index 0e681c6b..affc7bee 100644
--- a/src/frontend/src/components/Dashboard/TaskLogs/index.tsx
+++ b/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>
   );
 };
diff --git a/src/frontend/src/constants/dashboard.ts b/src/frontend/src/constants/dashboard.ts
index 6064596c..52779dd1 100644
--- a/src/frontend/src/constants/dashboard.ts
+++ b/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,
diff --git a/src/frontend/src/services/dashboard.ts b/src/frontend/src/services/dashboard.ts
index 61a07fd3..b6e8af2d 100644
--- a/src/frontend/src/services/dashboard.ts
+++ b/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/');

From bc561bfd6a9911a90212bf84c2d9f3c3a9be307d Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Mon, 12 Aug 2024 09:34:50 +0545
Subject: [PATCH 6/7] feat(dashbaord): add padding on task listing table row

---
 .../Dashboard/TaskLogs/TaskLogsTable.tsx           | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx b/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
index eaac4eab..e22d867e 100644
--- a/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
+++ b/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
@@ -33,12 +33,14 @@ const TaskLogsTable = ({ data: taskList }: ITaskLogsTableProps) => {
         <tbody>
           {taskList?.map(task => (
             <tr key={task.task_id}>
-              <td>{task.task_id}</td>
-              <td>{task.task_area}</td>
-              <td>-</td>
-              <td>{format(new Date(task.created_at), 'yyyy-MM-dd')}</td>
-              <td>{task.state}</td>
-              <td className="naxatw-flex naxatw-items-center">
+              <td className="naxatw-px-2 naxatw-py-1">{task.task_id}</td>
+              <td className="naxatw-px-2 naxatw-py-1">{task.task_area}</td>
+              <td className="naxatw-px-2 naxatw-py-1">-</td>
+              <td className="naxatw-px-2 naxatw-py-1">
+                {format(new Date(task.created_at), 'yyyy-MM-dd')}
+              </td>
+              <td className="naxatw-px-2">{task.state}</td>
+              <td className="naxatw-flex naxatw-items-center naxatw-px-2">
                 <div
                   className="naxatw-flex naxatw-h-8 naxatw-w-8 naxatw-cursor-pointer naxatw-items-center naxatw-justify-center naxatw-rounded-lg hover:naxatw-bg-gray-200"
                   role="presentation"

From 71734a9e881e5dcf83790d3384ca369dce73486c Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Mon, 12 Aug 2024 09:48:05 +0545
Subject: [PATCH 7/7] feat(dashbaord): update task state text for filter

---
 src/frontend/src/components/Dashboard/TaskLogs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/Dashboard/TaskLogs/index.tsx b/src/frontend/src/components/Dashboard/TaskLogs/index.tsx
index affc7bee..d1a7609d 100644
--- a/src/frontend/src/components/Dashboard/TaskLogs/index.tsx
+++ b/src/frontend/src/components/Dashboard/TaskLogs/index.tsx
@@ -9,7 +9,7 @@ interface TaskLogsProps {
 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 === 'Unflyable Tasks') return 'unflyable task';
   if (title === 'Completed Tasks') return 'completed';
 
   return '';