- 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 = () => {
-  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">

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