From 27d2c6a1b98925a89e84ef9ead9f136dd12d78bc Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 24 Nov 2025 20:32:52 +0000
Subject: [PATCH] - improved ui for dashboard - added refetch fn

---
 .../dashboard/components/SystemHealth.tsx       | 16 ++++++++++------
 .../dashboard/components/SystemOverview.tsx     | 12 ++++++++++--
 .../dashboard/hooks/useGetSystemHealth.ts       |  2 +-
 src/ui/CardHeader.tsx                           | 17 +++++++++++------
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/features/dashboard/components/SystemHealth.tsx b/src/features/dashboard/components/SystemHealth.tsx
index c93d731..6f1e12b 100644
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -1,13 +1,17 @@
 import type { SystemHealthStatus } from "../../../types/types";
 import Badge from "../../../ui/Badge";
-import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
 
-const SystemHealth = () => {
-  const { query } = useGetSystemHealth();
+type SystemHealthProps = {
+  startTime: string;
+  uptime: string;
+  statuses: SystemHealthStatus[];
+  isLoading: boolean;
+};
 
-  const startTime = query?.data?.StartTimeHumane;
-  const uptime = query?.data?.UptimeHumane;
-  const statuses = query?.data?.Status;
+const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => {
+  if (isLoading) {
+    return <span className="text-slate-500">Loading system health…</span>;
+  }
 
   return (
     <div className="h-100 md:h-70">
diff --git a/src/features/dashboard/components/SystemOverview.tsx b/src/features/dashboard/components/SystemOverview.tsx
index 05d1f20..2a6559d 100644
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -1,12 +1,20 @@
+import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
 import SystemHealth from "./SystemHealth";
 
 const SystemOverview = () => {
+  const { query } = useGetSystemHealth();
+
+  const startTime = query?.data?.StartTimeHumane;
+  const uptime = query?.data?.UptimeHumane;
+  const statuses = query?.data?.Status;
+  const isLoading = query?.isLoading;
   return (
     <Card className="p-4">
-      <CardHeader title="System Health" />
-      <SystemHealth />
+      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
+      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
     </Card>
   );
 };
diff --git a/src/features/dashboard/hooks/useGetSystemHealth.ts b/src/features/dashboard/hooks/useGetSystemHealth.ts
index 2c4bb3f..d9599d6 100644
--- a/src/features/dashboard/hooks/useGetSystemHealth.ts
+++ b/src/features/dashboard/hooks/useGetSystemHealth.ts
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 
 const fetchData = async () => {
-  const response = await fetch(`http://192.168.202.121/api/system-health`);
+  const response = await fetch(`http://100.115.148.59/api/system-health`);
   if (!response.ok) throw new Error("Cannot get System overview");
   return response.json();
 };
diff --git a/src/ui/CardHeader.tsx b/src/ui/CardHeader.tsx
index 25da205..3d6c3b2 100644
--- a/src/ui/CardHeader.tsx
+++ b/src/ui/CardHeader.tsx
@@ -1,22 +1,27 @@
 import clsx from "clsx";
 import StatusIndicators from "./StatusIndicators";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type CameraOverviewHeaderProps = {
   title?: string;
   status?: string;
+  refetch?: () => void;
+  icon?: IconProp;
 };
-const CardHeader = ({ title, status }: CameraOverviewHeaderProps) => {
-  console.log(status);
+const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
         "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
       )}
     >
-      <div className="flex items-center space-x-1">
-        {/* {icon && <FontAwesomeIcon icon={icon} className="size-4" />} */}
-        {status && <StatusIndicators status={status} />}
-        <h2 className="text-xl">{title}</h2>
+      <div className="flex flex-row items-center w-full justify-between">
+        <h2 className="flex flex-row text-xl items-center">
+          {status && <StatusIndicators status={status} />}
+          {title}
+        </h2>
+        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
       </div>
     </div>
   );