- improved ui for dashboard

- added refetch fn

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 = () => {
+type SystemHealthProps = {
-  const { query } = useGetSystemHealth();
+  startTime: string;
+  uptime: string;
+  statuses: SystemHealthStatus[];
+  isLoading: boolean;
+};
 
-  const startTime = query?.data?.StartTimeHumane;
+const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => {
-  const uptime = query?.data?.UptimeHumane;
+  if (isLoading) {
-  const statuses = query?.data?.Status;
+    return <span className="text-slate-500">Loading system health…</span>;
+  }
 
   return (
     <div className="h-100 md:h-70">

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" />
+      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth />
+      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
     </Card>
   );
 };

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();
 };

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) => {
+const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps) => {
-  console.log(status);
   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">
+      <div className="flex flex-row items-center w-full justify-between">
-        {/* {icon && <FontAwesomeIcon icon={icon} className="size-4" />} */}
+        <h2 className="flex flex-row text-xl items-center">
-        {status && <StatusIndicators status={status} />}
+          {status && <StatusIndicators status={status} />}
-        <h2 className="text-xl">{title}</h2>
+          {title}
+        </h2>
+        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
       </div>
     </div>
   );