some final fixes before the demo

pkgs/ui/src/app/client-2/page.tsx

@@ -1,66 +1,109 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useRef, useState } from "react";
 import {
   Client2ConsumerTableConfig,
   Client2ProducerTableConfig,
-  Client2SummaryDetails,
-} from "@/mock/client_2";
+} from "@/config/client_2";
 import CustomTable from "@/components/table";
-import { useEffect, useState } from "react";
+import { useAppState } from "@/components/hooks/useAppContext";
+import useGetEntityByName from "@/components/hooks/useGetEntityById";
+import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import { useGetEntity } from "@/api/entities/entities";
+import { useGetConsumer } from "@/api/consumers/consumers";
+import { mutate } from "swr";
+import axios from "axios";
+import { BASE_URL } from "@/constants";
 
-export default function Client1() {
-  const [consumerData, setConsumerData] = useState([]);
-  const [producerData, setProducerData] = useState([]);
+export default function Client2() {
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_consumers", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setConsumerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+  const { entity } = useGetEntityByName('C2');
+  const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
+  const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did })
+  const cardContentRef = useRef(null);
 
-    fetch("http://localhost:2979/api/v1/get_producers", {
-      method: "GET",
-      // credentials: 'include',
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setProducerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const onAttachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
+      alert(response.data.message);
+    } catch (error) {
+      console.error(error);
+    } finally {
+    }
+  }
+
+  const onDetachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
+      console.log('detach', response)
+      alert('Entity Detached Successfully.');
+    } catch (error) {
+      console.error(error);
+    } finally {
+    }
+  }
+
+  const onRefresh = () => {
+    const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
+    const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
+    if (entityKey) mutate(entityKey);
+    if (consumerKey) mutate(consumerKey)
+  }
+
+  if (isLoading)
+    return <Skeleton height={500} />
 
   return (
     <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 2",
-          details: Client2SummaryDetails,
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
         }}
-      />
+      >
+        <h2>Client 2</h2>
+        <div>
+          <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+            Attach
+          </Button>
+          <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+            Detach
+          </Button>
+          <Button onClick={onRefresh} variant="contained">Refresh</Button>
+        </div>
+      </div>
+
+      <Card variant="outlined">
+        <CardHeader
+          subheader="Summary"
+          action={<CopyToClipboard contentRef={cardContentRef} />}
+        />
+        <CardContent ref={cardContentRef}>
+          <Typography color="text.primary" gutterBottom>
+            DID: <code>{client2?.data?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{client2?.data?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{client2?.data?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          data={consumerData}
+          loading={loadingConsumerData}
+          data={consumerData?.data}
           configuration={Client2ConsumerTableConfig}
         />
       </div>
       <div>
         <h4>Producer View</h4>
         <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client2?.data?.producers}
           configuration={Client2ProducerTableConfig}
         />
       </div>