- added status grid items

- add react modal pkg

src/features/dashboard/components/SystemHealth.tsx

@@ -1,5 +1,5 @@
 import type { SystemHealthStatus } from "../../../types/types";
-import Badge from "../../../ui/Badge";
+import StatusGridItem from "./statusGridItem/StatusGridItem";
 
 type SystemHealthProps = {
   startTime: string;
@@ -13,7 +13,28 @@ type SystemHealthProps = {
 const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
   const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
 
-  // console.log(statuses);
+  const statusCategories = statuses?.reduce<Record<string, SystemHealthStatus[]>>(
+    (acc, cur) => {
+      if (cur?.groupID === "ChannelA") acc?.channelA?.push(cur);
+      if (cur?.groupID === "ChannelB") acc?.channelB?.push(cur);
+      if (cur?.groupID === "ChannelC") acc?.channelC?.push(cur);
+      if (cur?.groupID === "Default") acc?.default?.push(cur);
+      return acc;
+    },
+    {
+      channelA: [],
+      channelB: [],
+      channelC: [],
+      default: [],
+    },
+  );
+
+  const convertObjtoArray = (obj: Record<string, SystemHealthStatus[]>) => {
+    if (!obj) return;
+    const statusCategoryArray = Object.entries(obj);
+    return statusCategoryArray;
+  };
+  const statusCategoryArray = convertObjtoArray(statusCategories);
 
   if (isError) {
     return <span className="text-red-500">Error loading system health.</span>;
@@ -31,11 +52,9 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
           <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
         </div>
       </div>
-      <div className="h-50 overflow-auto">
-        {statuses?.map((status: SystemHealthStatus) => (
-          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
-            <span>{status.id}</span> <Badge text={status.tags[0]} />
-          </div>
+      <div className="h-50 overflow-auto grid grid-cols-2 gap-4">
+        {statusCategoryArray?.map((status) => (
+          <StatusGridItem title={status[0]} statusCategory={status[1]} />
         ))}
       </div>
       <div className="border-t border-gray-500">