From 0cf025d52938858a6c56530101ad3e42a2b730e4 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 14:02:43 +0100
Subject: [PATCH 1/8] some final fixes before the demo

---
 pkgs/ui/src/app/access-point/page.tsx         |  50 +++----
 pkgs/ui/src/app/client-1/page.tsx             | 123 ++++++++++-----
 pkgs/ui/src/app/client-2/page.tsx             | 127 ++++++++++------
 .../app/distributed-ledger-gateway/page.tsx   |  26 ++--
 pkgs/ui/src/app/home/page.tsx                 |  21 +--
 .../ui/src/components/hooks/useAppContext.tsx |  29 +++-
 pkgs/ui/src/components/hooks/useFetch.tsx     |  32 ++++
 .../src/components/hooks/useGetEntityById.tsx |  19 +++
 pkgs/ui/src/components/summary_card/index.tsx |   6 +-
 pkgs/ui/src/components/table/index.tsx        |   9 +-
 pkgs/ui/src/config/access_point/index.tsx     |  77 ++++++++++
 pkgs/ui/src/config/client_1/index.tsx         |  68 +++++++++
 pkgs/ui/src/config/client_2/index.tsx         |  68 +++++++++
 pkgs/ui/src/{mock => config}/dlg/index.ts     |   5 +-
 pkgs/ui/src/config/home/index.ts              |  34 +++++
 pkgs/ui/src/constants/index.ts                |  15 ++
 pkgs/ui/src/mock/access_point/index.ts        | 113 --------------
 pkgs/ui/src/mock/client_1/index.ts            | 140 ------------------
 pkgs/ui/src/mock/client_2/index.ts            | 140 ------------------
 pkgs/ui/src/mock/home/index.ts                |  47 ------
 pkgs/ui/src/types/index.ts                    |   5 +-
 pkgs/ui/src/utils/helpers.ts                  |  12 ++
 22 files changed, 577 insertions(+), 589 deletions(-)
 create mode 100644 pkgs/ui/src/components/hooks/useFetch.tsx
 create mode 100644 pkgs/ui/src/components/hooks/useGetEntityById.tsx
 create mode 100644 pkgs/ui/src/config/access_point/index.tsx
 create mode 100644 pkgs/ui/src/config/client_1/index.tsx
 create mode 100644 pkgs/ui/src/config/client_2/index.tsx
 rename pkgs/ui/src/{mock => config}/dlg/index.ts (88%)
 create mode 100644 pkgs/ui/src/config/home/index.ts
 create mode 100644 pkgs/ui/src/constants/index.ts
 delete mode 100644 pkgs/ui/src/mock/access_point/index.ts
 delete mode 100644 pkgs/ui/src/mock/client_1/index.ts
 delete mode 100644 pkgs/ui/src/mock/client_2/index.ts
 delete mode 100644 pkgs/ui/src/mock/home/index.ts
 create mode 100644 pkgs/ui/src/utils/helpers.ts

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index 6a18acf..ede2fee 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,56 +1,54 @@
 "use client";
 
+import useSWR, { mutate } from 'swr';
+import { useGetAttachedEntities } from "@/api/entities/entities";
+import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import {
   APSummaryDetails,
-  APAttachmentsDummyData,
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
-} from "@/mock/access_point";
-import { useEffect, useState } from "react";
-
-interface RepositoryData {
-  entity_name: string;
-  entity_did: string;
-  network: string;
-  ip_address: string;
-}
+} from "@/config/access_point";
 
 export default function AccessPoint() {
-  const [repositoryData, setRepositoryData] = useState<RepositoryData[]>([]);
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_repositories", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setRepositoryData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const { data: APAttachementData, isLoading: loadingAttachements, swrKey: attachedEntitiesKeyFunc } = useGetAttachedEntities();
+  const { data: APRepositories, isLoading: laodingRepositories, swrKey: repositoriesKeyFunc } = useGetRepositories();
+
+  const onRefresh = () => {
+    const attachedEntitiesKey = typeof attachedEntitiesKeyFunc === 'function' ? attachedEntitiesKeyFunc() : attachedEntitiesKeyFunc;
+    const repositoriesKey = typeof repositoriesKeyFunc === 'function' ? repositoriesKeyFunc() : repositoriesKeyFunc;
+
+    if (attachedEntitiesKey) {
+      mutate(attachedEntitiesKey);
+    }
+    if (repositoriesKey) {
+      mutate(repositoriesKey);
+    }
+  }
 
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{ name: "Access Point", details: APSummaryDetails }}
       />
       <div>
         <h4>Attachment View</h4>
         <CustomTable
-          data={APAttachmentsDummyData}
+          loading={loadingAttachements}
+          data={APAttachementData?.data}
           configuration={APAttachmentsTableConfig}
         />
       </div>
       <div>
         <h4>Service Repository View </h4>
         <CustomTable
-          data={repositoryData}
+          loading={laodingRepositories}
+          data={APRepositories?.data}
           configuration={APServiceRepositoryTableConfig}
         />
       </div>
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index 763702a..e9a3c02 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -1,65 +1,108 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useRef, useState } from "react";
 import {
-  Client1SummaryDetails,
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
-} from "@/mock/client_1";
+} from "@/config/client_1";
 import CustomTable from "@/components/table";
-import { useEffect, useState } from "react";
+import useGetEntityByName from "@/components/hooks/useGetEntityById";
+import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import { mutate } from "swr";
+import { useGetEntity } from "@/api/entities/entities";
+import { useGetConsumer } from "@/api/consumers/consumers";
+import { BASE_URL } from "@/constants";
+import axios from "axios";
 
 export default function Client1() {
-  const [consumerData, setConsumerData] = useState([]);
-  const [producerData, setProducerData] = useState([]);
 
-  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('C1');
+  const { data: client1, 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",
-    })
-      .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 1",
-          details: Client1SummaryDetails,
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
         }}
-      />
+      >
+        <h2>Client 1</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>{client1?.data?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{client1?.data?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{client1?.data?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          data={consumerData}
+          loading={loadingConsumerData}
+          data={consumerData?.data}
           configuration={Client1ConsumerTableConfig}
         />
       </div>
       <div>
         <h4>Producer View</h4>
         <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client1?.data?.producers}
           configuration={Client1ProducerTableConfig}
         />
       </div>
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index b3a7b75..9367b28 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/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>
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index 73312b2..96ee33f 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -1,31 +1,24 @@
 "use client";
 
-import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/mock/dlg";
+import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
-import { useEffect, useState } from "react";
+import useFetch from "@/components/hooks/useFetch";
+
 
 export default function DLG() {
-  const [resolutionData, setResolutionData] = useState([]);
+  const { data: resolutionData, loading: loadingResolutions, fetch } = useFetch('/get_resolutions');
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_resolutions", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setResolutionData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const onRefresh = () => {
+    fetch();
+  }
 
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{
           name: "Distributed Ledger Gateway",
           details: DLGSummaryDetails,
@@ -34,6 +27,7 @@ export default function DLG() {
       <div>
         <h4>DID Resolution View</h4>
         <CustomTable
+          loading={loadingResolutions}
           data={resolutionData}
           configuration={DLGResolutionTableConfig}
         />
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index d6c3566..9fcdfe4 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -1,27 +1,14 @@
 "use client";
 
+import { useAppState } from "@/components/hooks/useAppContext";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
-import { HomeTableConfig } from "@/mock/home";
-import { useEffect, useState } from "react";
+import { HomeTableConfig } from "@/config/home";
 
 export default function Home() {
-  const [homeData, setHomeData] = useState([]);
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_entities", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setHomeData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const { data } = useAppState();
 
   return (
     <div className="m-10">
@@ -33,7 +20,7 @@ export default function Home() {
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={homeData} configuration={HomeTableConfig} />
+        <CustomTable loading={data.loadingEntities} data={data?.allEntities} configuration={HomeTableConfig} />
       </div>
 
       <div>
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx
index a749aaf..476b3c4 100644
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -1,3 +1,5 @@
+import { useGetEntities } from "@/api/entities/entities";
+import { Entity } from "@/api/model";
 import { AxiosError } from "axios";
 import React, {
   createContext,
@@ -5,6 +7,7 @@ import React, {
   ReactNode,
   SetStateAction,
   useState,
+  useEffect,
 } from "react";
 
 type AppContextType = {
@@ -18,7 +21,11 @@ type AppContextType = {
 
 export const AppContext = createContext<AppContextType>({} as AppContextType);
 
-type AppState = NonNullable<unknown>;
+type AppState = {
+  allEntities: Entity[] | undefined,
+  loadingEntities: boolean,
+  entitiesKeyFunc: any,
+}
 
 interface AppContextProviderProps {
   children: ReactNode;
@@ -26,10 +33,28 @@ interface AppContextProviderProps {
 export const WithAppState = (props: AppContextProviderProps) => {
   const { children } = props;
 
+  const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
+
+
   const isLoading = false;
   const error = undefined;
 
-  const [data, setAppState] = useState<AppState>({});
+  const [data, setAppState] = useState<AppState>({
+    allEntities: [],
+    loadingEntities: true,
+    entitiesKeyFunc,
+  });
+
+  useEffect(() => {
+    if (entityData) {
+      setAppState(prevState => ({
+        ...prevState,
+        allEntities: entityData.data,
+        entitiesKeyFunc,
+        loadingEntities: false,
+      }));
+    }
+  }, [entityData]);
 
   return (
     <AppContext.Provider
diff --git a/pkgs/ui/src/components/hooks/useFetch.tsx b/pkgs/ui/src/components/hooks/useFetch.tsx
new file mode 100644
index 0000000..a176163
--- /dev/null
+++ b/pkgs/ui/src/components/hooks/useFetch.tsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { BASE_URL } from '@/constants';
+
+const useFetch = (url: string) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetch = () => {
+    setLoading(true);
+    axios.get(BASE_URL + url)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        setError(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetch();
+  }, [url]);
+
+  return { data, loading, error, fetch };
+};
+
+
+export default useFetch;
diff --git a/pkgs/ui/src/components/hooks/useGetEntityById.tsx b/pkgs/ui/src/components/hooks/useGetEntityById.tsx
new file mode 100644
index 0000000..b1be4f3
--- /dev/null
+++ b/pkgs/ui/src/components/hooks/useGetEntityById.tsx
@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { AppContext } from "./useAppContext";
+
+const useGetEntityByName = (nameOrDid: string) => {
+  const { data } = useContext(AppContext);
+  const allEntities = data.allEntities;
+
+  if (!allEntities) {
+    return { entity: undefined, isLoading: true };
+  }
+
+  const entity = allEntities.find(
+    (entity) => entity.name === nameOrDid || entity.did === nameOrDid
+  );
+
+  return { entity, isLoading: false };
+};
+
+export default useGetEntityByName;
\ No newline at end of file
diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx
index a9c979a..504935f 100644
--- a/pkgs/ui/src/components/summary_card/index.tsx
+++ b/pkgs/ui/src/components/summary_card/index.tsx
@@ -14,6 +14,8 @@ const SummaryDetails = ({
   entity,
   hasRefreshButton,
   hasAttachDetach,
+  fake,
+  onRefresh,
 }: ISummaryDetails) => {
   const cardContentRef = useRef(null);
   const hasDetails = entity.details && entity.details.length > 0;
@@ -34,13 +36,13 @@ const SummaryDetails = ({
               Attach / Detach
             </Button>
           )}
-          {hasRefreshButton && <Button variant="contained">Refresh</Button>}
+          {hasRefreshButton && <Button onClick={onRefresh} variant="contained">Refresh</Button>}
         </div>
       </div>
       {hasDetails && (
         <Card variant="outlined">
           <CardHeader
-            subheader="Summary"
+            subheader={fake ? "Summary (Fake Data)" : "Summary"}
             action={<CopyToClipboard contentRef={cardContentRef} />}
           />
           <CardContent ref={cardContentRef}>
diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx
index 36714df..090b325 100644
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/pkgs/ui/src/components/table/index.tsx
@@ -9,9 +9,14 @@ import Paper from "@mui/material/Paper";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import { StyledTableCell, StyledTableRow } from "./style";
 import { ICustomTable, CustomTableConfiguration } from "@/types";
-import { Checkbox } from "@mui/material";
+import { Checkbox, Skeleton } from "@mui/material";
+
+const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
+
+
+  if (loading)
+    return <Skeleton variant="rectangular" animation="wave" height={200} />
 
-const CustomTable = ({ configuration, data }: ICustomTable) => {
   // display empty icon in case there is no data
   if (!data || data.length === 0)
     return <NoDataOverlay label="No Activity yet" />;
diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx
new file mode 100644
index 0000000..f43ba4c
--- /dev/null
+++ b/pkgs/ui/src/config/access_point/index.tsx
@@ -0,0 +1,77 @@
+// AP - Summary
+
+export const APSummaryDetails = [
+  {
+    label: "DID",
+    value: "did:sov:test:1274",
+  },
+  {
+    label: "IP",
+    value: "127.0.0.2",
+  },
+  {
+    label: "Network",
+    value: "Carlo's Home Network",
+  },
+];
+
+export const APAttachmentsTableConfig = [
+  {
+    key: "entity_name",
+    label: "Entity name",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "other",
+    label: "Network",
+    render: (value: any) => {
+      let renderedValue = ''
+      if (typeof value === 'object')
+        renderedValue = value?.network;
+      return renderedValue;
+    }
+  },
+  {
+    key: "ip",
+    label: "IP address",
+  },
+];
+
+export const APServiceRepositoryTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End point",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "other",
+    label: "Type",
+    render: (value: any) => {
+      let renderedValue: any = ''
+      if (typeof value === 'object') {
+        const label = Object.keys(value)[0];
+        const info = value[label]
+        renderedValue = (<code>{label} {info}</code>);
+      }
+      return renderedValue;
+    }
+  },
+];
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
new file mode 100644
index 0000000..7d9b18f
--- /dev/null
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -0,0 +1,68 @@
+import { Button } from "@mui/material";
+
+export const Client1ConsumerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+    render: (value: any) => {
+      return <Button disabled variant="outlined">Consume</Button>
+    }
+  },
+  {
+    key: "entity",
+    label: "Entity",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];
+
+export const Client1ProducerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "other",
+    label: "Action",
+    render: (value: any) => {
+      let renderedValue: any = '';
+      if (typeof value === "object")
+        renderedValue = (
+          <>
+            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+          </>
+        )
+      return renderedValue;
+    },
+  }
+];
diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx
new file mode 100644
index 0000000..c9528d8
--- /dev/null
+++ b/pkgs/ui/src/config/client_2/index.tsx
@@ -0,0 +1,68 @@
+import { Button } from "@mui/material";
+
+export const Client2ConsumerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+    render: (value: any) => {
+      return <Button disabled variant="outlined">Consume</Button>
+    }
+  },
+  {
+    key: "entity",
+    label: "Entity",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];
+
+export const Client2ProducerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "other",
+    label: "Action",
+    render: (value: any) => {
+      let renderedValue: any = '';
+      if (typeof value === "object")
+        renderedValue = (
+          <>
+            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+          </>
+        )
+      return renderedValue;
+    },
+  }
+];
diff --git a/pkgs/ui/src/mock/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts
similarity index 88%
rename from pkgs/ui/src/mock/dlg/index.ts
rename to pkgs/ui/src/config/dlg/index.ts
index 2e33f79..134aadc 100644
--- a/pkgs/ui/src/mock/dlg/index.ts
+++ b/pkgs/ui/src/config/dlg/index.ts
@@ -1,5 +1,7 @@
 // DLG Summary Details
 
+import { formatDateTime } from "@/utils/helpers";
+
 export const DLGSummaryDetails = [
   {
     label: "DID",
@@ -44,5 +46,6 @@ export const DLGResolutionTableConfig = [
   {
     key: "timestamp",
     label: "Timestamp",
-  },
+    render: (value: string) => formatDateTime(value)
+  }
 ];
diff --git a/pkgs/ui/src/config/home/index.ts b/pkgs/ui/src/config/home/index.ts
new file mode 100644
index 0000000..57893fe
--- /dev/null
+++ b/pkgs/ui/src/config/home/index.ts
@@ -0,0 +1,34 @@
+export const HomeTableConfig = [
+  {
+    key: "name",
+    label: "Entity name",
+  },
+  {
+    key: "did",
+    label: "Entity DID",
+  },
+  {
+    key: "other",
+    label: "Network",
+    render: (value: any) => {
+      const renderedValue = typeof value === "object" ? value?.network : "-";
+      return renderedValue;
+    }
+  },
+  {
+    key: "ip",
+    label: "IP address",
+  },
+  {
+    key: "other",
+    label: "Roles",
+    render: (value: any) => {
+      const renderedValue = typeof value === "object" ? value?.roles?.join(", ") : "-";
+      return renderedValue;
+    }
+  },
+  {
+    key: "attached",
+    label: "Attached",
+  },
+];
diff --git a/pkgs/ui/src/constants/index.ts b/pkgs/ui/src/constants/index.ts
new file mode 100644
index 0000000..58bad54
--- /dev/null
+++ b/pkgs/ui/src/constants/index.ts
@@ -0,0 +1,15 @@
+const BASE_URL = 'http://localhost:2979/api/v1';
+
+// Home View
+const HOME_VIEW_TABLE = '/get_entities';
+
+
+// Access Point
+const SERVICE_REPOSITORY_URL = '/get_repositories';
+
+
+export {
+  BASE_URL,
+  HOME_VIEW_TABLE,
+  SERVICE_REPOSITORY_URL,
+}
\ No newline at end of file
diff --git a/pkgs/ui/src/mock/access_point/index.ts b/pkgs/ui/src/mock/access_point/index.ts
deleted file mode 100644
index 8af005c..0000000
--- a/pkgs/ui/src/mock/access_point/index.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-// AP - Summary
-
-export const APSummaryDetails = [
-  {
-    label: "DID",
-    value: "did:sov:test:1274",
-  },
-  {
-    label: "IP",
-    value: "127.0.0.2",
-  },
-  {
-    label: "Network",
-    value: "Carlo's Home Network",
-  },
-];
-
-// AP - Attachements
-
-export const APAttachmentsDummyData = [
-  {
-    entity_name: "C1",
-    entity_did: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-    ip_address: "127.0.0.1",
-  },
-  {
-    entity_name: "C2",
-    entity_did: "did:sov:test:4567",
-    network: "Steve's Home Network",
-    ip_address: "127.0.0.1",
-  },
-  {
-    entity_name: "C1-TEST",
-    entity_did: "did:sov:test:0001",
-    network: "Test Network A",
-    ip_address: "127.0.0.1",
-  },
-  {
-    entity_name: "C2-TEST",
-    entity_did: "did:sov:test:0002",
-    network: "Test Network B",
-    ip_address: "127.0.0.1",
-  },
-];
-export const APAttachmentsTableConfig = [
-  {
-    key: "entity_name",
-    label: "Entity name",
-  },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-  {
-    key: "ip_address",
-    label: "IP address",
-  },
-];
-
-// AP - Service Repository
-export const APServiceRepositoryDummyData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    entity: "C1",
-    entity_did: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Jeff's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    entity: "C2",
-    entity_did: "did:sov:test:5678",
-    network: "Jeff's Home Network",
-  },
-];
-export const APServiceRepositoryTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End point",
-  },
-  // {
-  //   key: "entity",
-  //   label: "Entity",
-  // },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  // {
-  //   key: "network",
-  //   label: "Network",
-  // },
-  {
-    key: "status",
-    label: "Status",
-  },
-];
diff --git a/pkgs/ui/src/mock/client_1/index.ts b/pkgs/ui/src/mock/client_1/index.ts
deleted file mode 100644
index 9139156..0000000
--- a/pkgs/ui/src/mock/client_1/index.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-// Client1 - Summary
-
-export const Client1SummaryDetails = [
-  {
-    label: "DID",
-    value: "did:sov:test:1234",
-  },
-  {
-    label: "IP",
-    value: "127.0.0.1",
-  },
-  {
-    label: "Network",
-    value: "Carlo's Home Network",
-  },
-];
-
-export const Client1ConsumerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1223",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1234",
-    network: "Steve's Home Network",
-  },
-  {
-    service_name: "Test A",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:4567",
-    network: "Test Network A",
-  },
-  {
-    service_name: "Test B",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:0062",
-    network: "Test Network B",
-  },
-];
-
-export const Client1ConsumerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  {
-    key: "entity",
-    label: "Entity",
-  },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];
-
-export const Client1ProducerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Register, Deregister, Delete",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "REGISTERED",
-    action: "Create",
-  },
-  {
-    service_name: "Test Printing A",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT",
-    action: "Register, Deregister",
-  },
-  {
-    service_name: "Test Printing B",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Delete, Create",
-  },
-];
-
-export const Client1ProducerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  // {
-  //   key: "usage",
-  //   label: "Usage",
-  // },
-  {
-    key: "status",
-    label: "Status",
-  },
-  // {
-  //   key: "action",
-  //   label: "Action",
-  // },
-];
diff --git a/pkgs/ui/src/mock/client_2/index.ts b/pkgs/ui/src/mock/client_2/index.ts
deleted file mode 100644
index 1f40fcd..0000000
--- a/pkgs/ui/src/mock/client_2/index.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-// Client2 - Summary
-
-export const Client2SummaryDetails = [
-  {
-    label: "DID",
-    value: "did:sov:test:1234",
-  },
-  {
-    label: "IP",
-    value: "127.0.0.2",
-  },
-  {
-    label: "Network",
-    value: "Carlo's Home Network",
-  },
-];
-
-export const Client2ConsumerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1223",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1234",
-    network: "Steve's Home Network",
-  },
-  {
-    service_name: "Test A",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:4567",
-    network: "Test Network A",
-  },
-  {
-    service_name: "Test B",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:0062",
-    network: "Test Network B",
-  },
-];
-
-export const Client2ConsumerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  {
-    key: "entity",
-    label: "Entity",
-  },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];
-
-export const Client2ProducerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Register, Deregister, Delete",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "REGISTERED",
-    action: "Create",
-  },
-  {
-    service_name: "Test Printing A",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT",
-    action: "Register, Deregister",
-  },
-  {
-    service_name: "Test Printing B",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Delete, Create",
-  },
-];
-
-export const Client2ProducerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  {
-    key: "usage",
-    label: "Usage",
-  },
-  {
-    key: "status",
-    label: "Status",
-  },
-  {
-    key: "action",
-    label: "Action",
-  },
-];
diff --git a/pkgs/ui/src/mock/home/index.ts b/pkgs/ui/src/mock/home/index.ts
deleted file mode 100644
index b6c2d4f..0000000
--- a/pkgs/ui/src/mock/home/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// HOME - Table Data
-
-export const HomeDummyData = [
-  {
-    entity_name: "C1",
-    entity_DID: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-    ip_address: "127.0.0.1",
-    roles: "service repository, service consumer, DLG",
-    visible: true,
-  },
-  {
-    entity_name: "C2",
-    entity_DID: "did:sov:test:4567",
-    network: "Steve's Home Network",
-    ip_address: "127.0.0.1",
-    roles: "service repository, service consumer, DLG",
-    visible: false,
-  },
-];
-
-export const HomeTableConfig = [
-  {
-    key: "name",
-    label: "Entity name",
-  },
-  {
-    key: "did",
-    label: "Entity DID",
-  },
-  // {
-  //   key: "network",
-  //   label: "Network",
-  // },
-  {
-    key: "ip",
-    label: "IP address",
-  },
-  // {
-  //   key: "roles",
-  //   label: "Roles",
-  // },
-  {
-    key: "attached",
-    label: "Attached",
-  },
-];
diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts
index 264feb4..fc40cbd 100644
--- a/pkgs/ui/src/types/index.ts
+++ b/pkgs/ui/src/types/index.ts
@@ -7,6 +7,7 @@ export interface CustomTableConfiguration {
 export interface ICustomTable {
   configuration: CustomTableConfiguration[];
   data: any;
+  loading?: boolean;
 }
 
 export interface EntityDetails {
@@ -20,7 +21,9 @@ export interface Entity {
 }
 
 export interface ISummaryDetails {
-  entity: Entity;
+  entity: any;
+  fake?: boolean;
   hasRefreshButton?: boolean;
   hasAttachDetach?: boolean;
+  onRefresh?: () => void;
 }
diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts
new file mode 100644
index 0000000..f852c27
--- /dev/null
+++ b/pkgs/ui/src/utils/helpers.ts
@@ -0,0 +1,12 @@
+export const formatDateTime = (date: string) => {
+  const _date = new Date(date);
+  return _date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  });
+}
\ No newline at end of file
-- 
2.51.0


From 9c4532a913131d1bc9917f8732bcfb9aecb22479 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 14:55:59 +0100
Subject: [PATCH 2/8] fixes

---
 pkgs/ui/src/app/access-point/page.tsx | 2 +-
 pkgs/ui/src/app/client-1/page.tsx     | 2 +-
 pkgs/ui/src/app/client-2/page.tsx     | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index ede2fee..3cb3115 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import useSWR, { mutate } from 'swr';
+import { mutate } from 'swr';
 import { useGetAttachedEntities } from "@/api/entities/entities";
 import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index e9a3c02..84b8245 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import {
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index 9367b28..747f59a 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -1,11 +1,10 @@
 "use client";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import {
   Client2ConsumerTableConfig,
   Client2ProducerTableConfig,
 } from "@/config/client_2";
 import CustomTable from "@/components/table";
-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";
-- 
2.51.0


From 7a7724f9770caf20dea3efbc474c9769ee8daad7 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 14:02:43 +0100
Subject: [PATCH 3/8] some final fixes before the demo

---
 pkgs/ui/src/app/access-point/page.tsx         |  50 +++----
 pkgs/ui/src/app/client-1/page.tsx             | 123 ++++++++++-----
 pkgs/ui/src/app/client-2/page.tsx             | 127 ++++++++++------
 .../app/distributed-ledger-gateway/page.tsx   |  26 ++--
 pkgs/ui/src/app/home/page.tsx                 |  21 +--
 .../ui/src/components/hooks/useAppContext.tsx |  29 +++-
 pkgs/ui/src/components/hooks/useFetch.tsx     |  32 ++++
 .../src/components/hooks/useGetEntityById.tsx |  19 +++
 pkgs/ui/src/components/summary_card/index.tsx |   6 +-
 pkgs/ui/src/components/table/index.tsx        |   9 +-
 pkgs/ui/src/config/access_point/index.tsx     |  77 ++++++++++
 pkgs/ui/src/config/client_1/index.tsx         |  68 +++++++++
 pkgs/ui/src/config/client_2/index.tsx         |  68 +++++++++
 pkgs/ui/src/{mock => config}/dlg/index.ts     |   5 +-
 pkgs/ui/src/config/home/index.ts              |  34 +++++
 pkgs/ui/src/constants/index.ts                |  15 ++
 pkgs/ui/src/mock/access_point/index.ts        | 113 --------------
 pkgs/ui/src/mock/client_1/index.ts            | 140 ------------------
 pkgs/ui/src/mock/client_2/index.ts            | 140 ------------------
 pkgs/ui/src/mock/home/index.ts                |  47 ------
 pkgs/ui/src/types/index.ts                    |   5 +-
 pkgs/ui/src/utils/helpers.ts                  |  12 ++
 22 files changed, 577 insertions(+), 589 deletions(-)
 create mode 100644 pkgs/ui/src/components/hooks/useFetch.tsx
 create mode 100644 pkgs/ui/src/components/hooks/useGetEntityById.tsx
 create mode 100644 pkgs/ui/src/config/access_point/index.tsx
 create mode 100644 pkgs/ui/src/config/client_1/index.tsx
 create mode 100644 pkgs/ui/src/config/client_2/index.tsx
 rename pkgs/ui/src/{mock => config}/dlg/index.ts (88%)
 create mode 100644 pkgs/ui/src/config/home/index.ts
 create mode 100644 pkgs/ui/src/constants/index.ts
 delete mode 100644 pkgs/ui/src/mock/access_point/index.ts
 delete mode 100644 pkgs/ui/src/mock/client_1/index.ts
 delete mode 100644 pkgs/ui/src/mock/client_2/index.ts
 delete mode 100644 pkgs/ui/src/mock/home/index.ts
 create mode 100644 pkgs/ui/src/utils/helpers.ts

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index 6a18acf..ede2fee 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,56 +1,54 @@
 "use client";
 
+import useSWR, { mutate } from 'swr';
+import { useGetAttachedEntities } from "@/api/entities/entities";
+import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import {
   APSummaryDetails,
-  APAttachmentsDummyData,
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
-} from "@/mock/access_point";
-import { useEffect, useState } from "react";
-
-interface RepositoryData {
-  entity_name: string;
-  entity_did: string;
-  network: string;
-  ip_address: string;
-}
+} from "@/config/access_point";
 
 export default function AccessPoint() {
-  const [repositoryData, setRepositoryData] = useState<RepositoryData[]>([]);
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_repositories", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setRepositoryData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const { data: APAttachementData, isLoading: loadingAttachements, swrKey: attachedEntitiesKeyFunc } = useGetAttachedEntities();
+  const { data: APRepositories, isLoading: laodingRepositories, swrKey: repositoriesKeyFunc } = useGetRepositories();
+
+  const onRefresh = () => {
+    const attachedEntitiesKey = typeof attachedEntitiesKeyFunc === 'function' ? attachedEntitiesKeyFunc() : attachedEntitiesKeyFunc;
+    const repositoriesKey = typeof repositoriesKeyFunc === 'function' ? repositoriesKeyFunc() : repositoriesKeyFunc;
+
+    if (attachedEntitiesKey) {
+      mutate(attachedEntitiesKey);
+    }
+    if (repositoriesKey) {
+      mutate(repositoriesKey);
+    }
+  }
 
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{ name: "Access Point", details: APSummaryDetails }}
       />
       <div>
         <h4>Attachment View</h4>
         <CustomTable
-          data={APAttachmentsDummyData}
+          loading={loadingAttachements}
+          data={APAttachementData?.data}
           configuration={APAttachmentsTableConfig}
         />
       </div>
       <div>
         <h4>Service Repository View </h4>
         <CustomTable
-          data={repositoryData}
+          loading={laodingRepositories}
+          data={APRepositories?.data}
           configuration={APServiceRepositoryTableConfig}
         />
       </div>
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index 763702a..e9a3c02 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -1,65 +1,108 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useRef, useState } from "react";
 import {
-  Client1SummaryDetails,
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
-} from "@/mock/client_1";
+} from "@/config/client_1";
 import CustomTable from "@/components/table";
-import { useEffect, useState } from "react";
+import useGetEntityByName from "@/components/hooks/useGetEntityById";
+import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import { mutate } from "swr";
+import { useGetEntity } from "@/api/entities/entities";
+import { useGetConsumer } from "@/api/consumers/consumers";
+import { BASE_URL } from "@/constants";
+import axios from "axios";
 
 export default function Client1() {
-  const [consumerData, setConsumerData] = useState([]);
-  const [producerData, setProducerData] = useState([]);
 
-  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('C1');
+  const { data: client1, 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",
-    })
-      .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 1",
-          details: Client1SummaryDetails,
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
         }}
-      />
+      >
+        <h2>Client 1</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>{client1?.data?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{client1?.data?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{client1?.data?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          data={consumerData}
+          loading={loadingConsumerData}
+          data={consumerData?.data}
           configuration={Client1ConsumerTableConfig}
         />
       </div>
       <div>
         <h4>Producer View</h4>
         <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client1?.data?.producers}
           configuration={Client1ProducerTableConfig}
         />
       </div>
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index b3a7b75..9367b28 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/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>
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index 73312b2..96ee33f 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -1,31 +1,24 @@
 "use client";
 
-import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/mock/dlg";
+import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
-import { useEffect, useState } from "react";
+import useFetch from "@/components/hooks/useFetch";
+
 
 export default function DLG() {
-  const [resolutionData, setResolutionData] = useState([]);
+  const { data: resolutionData, loading: loadingResolutions, fetch } = useFetch('/get_resolutions');
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_resolutions", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setResolutionData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const onRefresh = () => {
+    fetch();
+  }
 
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{
           name: "Distributed Ledger Gateway",
           details: DLGSummaryDetails,
@@ -34,6 +27,7 @@ export default function DLG() {
       <div>
         <h4>DID Resolution View</h4>
         <CustomTable
+          loading={loadingResolutions}
           data={resolutionData}
           configuration={DLGResolutionTableConfig}
         />
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index d6c3566..9fcdfe4 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -1,27 +1,14 @@
 "use client";
 
+import { useAppState } from "@/components/hooks/useAppContext";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
-import { HomeTableConfig } from "@/mock/home";
-import { useEffect, useState } from "react";
+import { HomeTableConfig } from "@/config/home";
 
 export default function Home() {
-  const [homeData, setHomeData] = useState([]);
 
-  useEffect(() => {
-    fetch("http://localhost:2979/api/v1/get_entities", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setHomeData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
-  }, []);
+  const { data } = useAppState();
 
   return (
     <div className="m-10">
@@ -33,7 +20,7 @@ export default function Home() {
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={homeData} configuration={HomeTableConfig} />
+        <CustomTable loading={data.loadingEntities} data={data?.allEntities} configuration={HomeTableConfig} />
       </div>
 
       <div>
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx
index a749aaf..476b3c4 100644
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -1,3 +1,5 @@
+import { useGetEntities } from "@/api/entities/entities";
+import { Entity } from "@/api/model";
 import { AxiosError } from "axios";
 import React, {
   createContext,
@@ -5,6 +7,7 @@ import React, {
   ReactNode,
   SetStateAction,
   useState,
+  useEffect,
 } from "react";
 
 type AppContextType = {
@@ -18,7 +21,11 @@ type AppContextType = {
 
 export const AppContext = createContext<AppContextType>({} as AppContextType);
 
-type AppState = NonNullable<unknown>;
+type AppState = {
+  allEntities: Entity[] | undefined,
+  loadingEntities: boolean,
+  entitiesKeyFunc: any,
+}
 
 interface AppContextProviderProps {
   children: ReactNode;
@@ -26,10 +33,28 @@ interface AppContextProviderProps {
 export const WithAppState = (props: AppContextProviderProps) => {
   const { children } = props;
 
+  const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
+
+
   const isLoading = false;
   const error = undefined;
 
-  const [data, setAppState] = useState<AppState>({});
+  const [data, setAppState] = useState<AppState>({
+    allEntities: [],
+    loadingEntities: true,
+    entitiesKeyFunc,
+  });
+
+  useEffect(() => {
+    if (entityData) {
+      setAppState(prevState => ({
+        ...prevState,
+        allEntities: entityData.data,
+        entitiesKeyFunc,
+        loadingEntities: false,
+      }));
+    }
+  }, [entityData]);
 
   return (
     <AppContext.Provider
diff --git a/pkgs/ui/src/components/hooks/useFetch.tsx b/pkgs/ui/src/components/hooks/useFetch.tsx
new file mode 100644
index 0000000..a176163
--- /dev/null
+++ b/pkgs/ui/src/components/hooks/useFetch.tsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { BASE_URL } from '@/constants';
+
+const useFetch = (url: string) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetch = () => {
+    setLoading(true);
+    axios.get(BASE_URL + url)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        setError(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetch();
+  }, [url]);
+
+  return { data, loading, error, fetch };
+};
+
+
+export default useFetch;
diff --git a/pkgs/ui/src/components/hooks/useGetEntityById.tsx b/pkgs/ui/src/components/hooks/useGetEntityById.tsx
new file mode 100644
index 0000000..b1be4f3
--- /dev/null
+++ b/pkgs/ui/src/components/hooks/useGetEntityById.tsx
@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { AppContext } from "./useAppContext";
+
+const useGetEntityByName = (nameOrDid: string) => {
+  const { data } = useContext(AppContext);
+  const allEntities = data.allEntities;
+
+  if (!allEntities) {
+    return { entity: undefined, isLoading: true };
+  }
+
+  const entity = allEntities.find(
+    (entity) => entity.name === nameOrDid || entity.did === nameOrDid
+  );
+
+  return { entity, isLoading: false };
+};
+
+export default useGetEntityByName;
\ No newline at end of file
diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx
index a9c979a..504935f 100644
--- a/pkgs/ui/src/components/summary_card/index.tsx
+++ b/pkgs/ui/src/components/summary_card/index.tsx
@@ -14,6 +14,8 @@ const SummaryDetails = ({
   entity,
   hasRefreshButton,
   hasAttachDetach,
+  fake,
+  onRefresh,
 }: ISummaryDetails) => {
   const cardContentRef = useRef(null);
   const hasDetails = entity.details && entity.details.length > 0;
@@ -34,13 +36,13 @@ const SummaryDetails = ({
               Attach / Detach
             </Button>
           )}
-          {hasRefreshButton && <Button variant="contained">Refresh</Button>}
+          {hasRefreshButton && <Button onClick={onRefresh} variant="contained">Refresh</Button>}
         </div>
       </div>
       {hasDetails && (
         <Card variant="outlined">
           <CardHeader
-            subheader="Summary"
+            subheader={fake ? "Summary (Fake Data)" : "Summary"}
             action={<CopyToClipboard contentRef={cardContentRef} />}
           />
           <CardContent ref={cardContentRef}>
diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx
index 36714df..090b325 100644
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/pkgs/ui/src/components/table/index.tsx
@@ -9,9 +9,14 @@ import Paper from "@mui/material/Paper";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import { StyledTableCell, StyledTableRow } from "./style";
 import { ICustomTable, CustomTableConfiguration } from "@/types";
-import { Checkbox } from "@mui/material";
+import { Checkbox, Skeleton } from "@mui/material";
+
+const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
+
+
+  if (loading)
+    return <Skeleton variant="rectangular" animation="wave" height={200} />
 
-const CustomTable = ({ configuration, data }: ICustomTable) => {
   // display empty icon in case there is no data
   if (!data || data.length === 0)
     return <NoDataOverlay label="No Activity yet" />;
diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx
new file mode 100644
index 0000000..f43ba4c
--- /dev/null
+++ b/pkgs/ui/src/config/access_point/index.tsx
@@ -0,0 +1,77 @@
+// AP - Summary
+
+export const APSummaryDetails = [
+  {
+    label: "DID",
+    value: "did:sov:test:1274",
+  },
+  {
+    label: "IP",
+    value: "127.0.0.2",
+  },
+  {
+    label: "Network",
+    value: "Carlo's Home Network",
+  },
+];
+
+export const APAttachmentsTableConfig = [
+  {
+    key: "entity_name",
+    label: "Entity name",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "other",
+    label: "Network",
+    render: (value: any) => {
+      let renderedValue = ''
+      if (typeof value === 'object')
+        renderedValue = value?.network;
+      return renderedValue;
+    }
+  },
+  {
+    key: "ip",
+    label: "IP address",
+  },
+];
+
+export const APServiceRepositoryTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End point",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "other",
+    label: "Type",
+    render: (value: any) => {
+      let renderedValue: any = ''
+      if (typeof value === 'object') {
+        const label = Object.keys(value)[0];
+        const info = value[label]
+        renderedValue = (<code>{label} {info}</code>);
+      }
+      return renderedValue;
+    }
+  },
+];
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
new file mode 100644
index 0000000..7d9b18f
--- /dev/null
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -0,0 +1,68 @@
+import { Button } from "@mui/material";
+
+export const Client1ConsumerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+    render: (value: any) => {
+      return <Button disabled variant="outlined">Consume</Button>
+    }
+  },
+  {
+    key: "entity",
+    label: "Entity",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];
+
+export const Client1ProducerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "other",
+    label: "Action",
+    render: (value: any) => {
+      let renderedValue: any = '';
+      if (typeof value === "object")
+        renderedValue = (
+          <>
+            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+          </>
+        )
+      return renderedValue;
+    },
+  }
+];
diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx
new file mode 100644
index 0000000..c9528d8
--- /dev/null
+++ b/pkgs/ui/src/config/client_2/index.tsx
@@ -0,0 +1,68 @@
+import { Button } from "@mui/material";
+
+export const Client2ConsumerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+    render: (value: any) => {
+      return <Button disabled variant="outlined">Consume</Button>
+    }
+  },
+  {
+    key: "entity",
+    label: "Entity",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];
+
+export const Client2ProducerTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+  },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "other",
+    label: "Action",
+    render: (value: any) => {
+      let renderedValue: any = '';
+      if (typeof value === "object")
+        renderedValue = (
+          <>
+            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+          </>
+        )
+      return renderedValue;
+    },
+  }
+];
diff --git a/pkgs/ui/src/mock/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts
similarity index 88%
rename from pkgs/ui/src/mock/dlg/index.ts
rename to pkgs/ui/src/config/dlg/index.ts
index 2e33f79..134aadc 100644
--- a/pkgs/ui/src/mock/dlg/index.ts
+++ b/pkgs/ui/src/config/dlg/index.ts
@@ -1,5 +1,7 @@
 // DLG Summary Details
 
+import { formatDateTime } from "@/utils/helpers";
+
 export const DLGSummaryDetails = [
   {
     label: "DID",
@@ -44,5 +46,6 @@ export const DLGResolutionTableConfig = [
   {
     key: "timestamp",
     label: "Timestamp",
-  },
+    render: (value: string) => formatDateTime(value)
+  }
 ];
diff --git a/pkgs/ui/src/config/home/index.ts b/pkgs/ui/src/config/home/index.ts
new file mode 100644
index 0000000..57893fe
--- /dev/null
+++ b/pkgs/ui/src/config/home/index.ts
@@ -0,0 +1,34 @@
+export const HomeTableConfig = [
+  {
+    key: "name",
+    label: "Entity name",
+  },
+  {
+    key: "did",
+    label: "Entity DID",
+  },
+  {
+    key: "other",
+    label: "Network",
+    render: (value: any) => {
+      const renderedValue = typeof value === "object" ? value?.network : "-";
+      return renderedValue;
+    }
+  },
+  {
+    key: "ip",
+    label: "IP address",
+  },
+  {
+    key: "other",
+    label: "Roles",
+    render: (value: any) => {
+      const renderedValue = typeof value === "object" ? value?.roles?.join(", ") : "-";
+      return renderedValue;
+    }
+  },
+  {
+    key: "attached",
+    label: "Attached",
+  },
+];
diff --git a/pkgs/ui/src/constants/index.ts b/pkgs/ui/src/constants/index.ts
new file mode 100644
index 0000000..58bad54
--- /dev/null
+++ b/pkgs/ui/src/constants/index.ts
@@ -0,0 +1,15 @@
+const BASE_URL = 'http://localhost:2979/api/v1';
+
+// Home View
+const HOME_VIEW_TABLE = '/get_entities';
+
+
+// Access Point
+const SERVICE_REPOSITORY_URL = '/get_repositories';
+
+
+export {
+  BASE_URL,
+  HOME_VIEW_TABLE,
+  SERVICE_REPOSITORY_URL,
+}
\ No newline at end of file
diff --git a/pkgs/ui/src/mock/access_point/index.ts b/pkgs/ui/src/mock/access_point/index.ts
deleted file mode 100644
index 8af005c..0000000
--- a/pkgs/ui/src/mock/access_point/index.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-// AP - Summary
-
-export const APSummaryDetails = [
-  {
-    label: "DID",
-    value: "did:sov:test:1274",
-  },
-  {
-    label: "IP",
-    value: "127.0.0.2",
-  },
-  {
-    label: "Network",
-    value: "Carlo's Home Network",
-  },
-];
-
-// AP - Attachements
-
-export const APAttachmentsDummyData = [
-  {
-    entity_name: "C1",
-    entity_did: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-    ip_address: "127.0.0.1",
-  },
-  {
-    entity_name: "C2",
-    entity_did: "did:sov:test:4567",
-    network: "Steve's Home Network",
-    ip_address: "127.0.0.1",
-  },
-  {
-    entity_name: "C1-TEST",
-    entity_did: "did:sov:test:0001",
-    network: "Test Network A",
-    ip_address: "127.0.0.1",
-  },
-  {
-    entity_name: "C2-TEST",
-    entity_did: "did:sov:test:0002",
-    network: "Test Network B",
-    ip_address: "127.0.0.1",
-  },
-];
-export const APAttachmentsTableConfig = [
-  {
-    key: "entity_name",
-    label: "Entity name",
-  },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-  {
-    key: "ip_address",
-    label: "IP address",
-  },
-];
-
-// AP - Service Repository
-export const APServiceRepositoryDummyData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    entity: "C1",
-    entity_did: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Jeff's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    entity: "C2",
-    entity_did: "did:sov:test:5678",
-    network: "Jeff's Home Network",
-  },
-];
-export const APServiceRepositoryTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End point",
-  },
-  // {
-  //   key: "entity",
-  //   label: "Entity",
-  // },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  // {
-  //   key: "network",
-  //   label: "Network",
-  // },
-  {
-    key: "status",
-    label: "Status",
-  },
-];
diff --git a/pkgs/ui/src/mock/client_1/index.ts b/pkgs/ui/src/mock/client_1/index.ts
deleted file mode 100644
index 9139156..0000000
--- a/pkgs/ui/src/mock/client_1/index.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-// Client1 - Summary
-
-export const Client1SummaryDetails = [
-  {
-    label: "DID",
-    value: "did:sov:test:1234",
-  },
-  {
-    label: "IP",
-    value: "127.0.0.1",
-  },
-  {
-    label: "Network",
-    value: "Carlo's Home Network",
-  },
-];
-
-export const Client1ConsumerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1223",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1234",
-    network: "Steve's Home Network",
-  },
-  {
-    service_name: "Test A",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:4567",
-    network: "Test Network A",
-  },
-  {
-    service_name: "Test B",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:0062",
-    network: "Test Network B",
-  },
-];
-
-export const Client1ConsumerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  {
-    key: "entity",
-    label: "Entity",
-  },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];
-
-export const Client1ProducerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Register, Deregister, Delete",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "REGISTERED",
-    action: "Create",
-  },
-  {
-    service_name: "Test Printing A",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT",
-    action: "Register, Deregister",
-  },
-  {
-    service_name: "Test Printing B",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Delete, Create",
-  },
-];
-
-export const Client1ProducerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  // {
-  //   key: "usage",
-  //   label: "Usage",
-  // },
-  {
-    key: "status",
-    label: "Status",
-  },
-  // {
-  //   key: "action",
-  //   label: "Action",
-  // },
-];
diff --git a/pkgs/ui/src/mock/client_2/index.ts b/pkgs/ui/src/mock/client_2/index.ts
deleted file mode 100644
index 1f40fcd..0000000
--- a/pkgs/ui/src/mock/client_2/index.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-// Client2 - Summary
-
-export const Client2SummaryDetails = [
-  {
-    label: "DID",
-    value: "did:sov:test:1234",
-  },
-  {
-    label: "IP",
-    value: "127.0.0.2",
-  },
-  {
-    label: "Network",
-    value: "Carlo's Home Network",
-  },
-];
-
-export const Client2ConsumerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1223",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:1234",
-    network: "Steve's Home Network",
-  },
-  {
-    service_name: "Test A",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:4567",
-    network: "Test Network A",
-  },
-  {
-    service_name: "Test B",
-    service_type: "3D Printing",
-    endpoint_url: "Consume",
-    entity: "C2",
-    entity_did: "did:sov:test:0062",
-    network: "Test Network B",
-  },
-];
-
-export const Client2ConsumerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  {
-    key: "entity",
-    label: "Entity",
-  },
-  {
-    key: "entity_did",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];
-
-export const Client2ProducerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Register, Deregister, Delete",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "REGISTERED",
-    action: "Create",
-  },
-  {
-    service_name: "Test Printing A",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT",
-    action: "Register, Deregister",
-  },
-  {
-    service_name: "Test Printing B",
-    service_type: "3D Printing",
-    endpoint_url: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Delete, Create",
-  },
-];
-
-export const Client2ProducerTableConfig = [
-  {
-    key: "service_name",
-    label: "Service name",
-  },
-  {
-    key: "service_type",
-    label: "Service Type",
-  },
-  {
-    key: "endpoint_url",
-    label: "End Point",
-  },
-  {
-    key: "usage",
-    label: "Usage",
-  },
-  {
-    key: "status",
-    label: "Status",
-  },
-  {
-    key: "action",
-    label: "Action",
-  },
-];
diff --git a/pkgs/ui/src/mock/home/index.ts b/pkgs/ui/src/mock/home/index.ts
deleted file mode 100644
index b6c2d4f..0000000
--- a/pkgs/ui/src/mock/home/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// HOME - Table Data
-
-export const HomeDummyData = [
-  {
-    entity_name: "C1",
-    entity_DID: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-    ip_address: "127.0.0.1",
-    roles: "service repository, service consumer, DLG",
-    visible: true,
-  },
-  {
-    entity_name: "C2",
-    entity_DID: "did:sov:test:4567",
-    network: "Steve's Home Network",
-    ip_address: "127.0.0.1",
-    roles: "service repository, service consumer, DLG",
-    visible: false,
-  },
-];
-
-export const HomeTableConfig = [
-  {
-    key: "name",
-    label: "Entity name",
-  },
-  {
-    key: "did",
-    label: "Entity DID",
-  },
-  // {
-  //   key: "network",
-  //   label: "Network",
-  // },
-  {
-    key: "ip",
-    label: "IP address",
-  },
-  // {
-  //   key: "roles",
-  //   label: "Roles",
-  // },
-  {
-    key: "attached",
-    label: "Attached",
-  },
-];
diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts
index 264feb4..fc40cbd 100644
--- a/pkgs/ui/src/types/index.ts
+++ b/pkgs/ui/src/types/index.ts
@@ -7,6 +7,7 @@ export interface CustomTableConfiguration {
 export interface ICustomTable {
   configuration: CustomTableConfiguration[];
   data: any;
+  loading?: boolean;
 }
 
 export interface EntityDetails {
@@ -20,7 +21,9 @@ export interface Entity {
 }
 
 export interface ISummaryDetails {
-  entity: Entity;
+  entity: any;
+  fake?: boolean;
   hasRefreshButton?: boolean;
   hasAttachDetach?: boolean;
+  onRefresh?: () => void;
 }
diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts
new file mode 100644
index 0000000..f852c27
--- /dev/null
+++ b/pkgs/ui/src/utils/helpers.ts
@@ -0,0 +1,12 @@
+export const formatDateTime = (date: string) => {
+  const _date = new Date(date);
+  return _date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  });
+}
\ No newline at end of file
-- 
2.51.0


From d705b866b9be392ac74482a2f10120b9c2603886 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 14:55:59 +0100
Subject: [PATCH 4/8] fixes

---
 pkgs/ui/src/app/access-point/page.tsx | 2 +-
 pkgs/ui/src/app/client-1/page.tsx     | 2 +-
 pkgs/ui/src/app/client-2/page.tsx     | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index ede2fee..3cb3115 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import useSWR, { mutate } from 'swr';
+import { mutate } from 'swr';
 import { useGetAttachedEntities } from "@/api/entities/entities";
 import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index e9a3c02..84b8245 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import {
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index 9367b28..747f59a 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -1,11 +1,10 @@
 "use client";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import {
   Client2ConsumerTableConfig,
   Client2ProducerTableConfig,
 } from "@/config/client_2";
 import CustomTable from "@/components/table";
-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";
-- 
2.51.0


From 760b4add33171341c523a5bdbbdfe8c5d5cde857 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 21:48:11 +0100
Subject: [PATCH 5/8] final final fixes?

---
 pkgs/clan-cli/tests/test_db_api.py            |  4 +-
 pkgs/ui/src/app/access-point/page.tsx         |  9 +++
 pkgs/ui/src/app/client-1/page.tsx             | 60 +++++++++++++------
 pkgs/ui/src/app/client-2/page.tsx             | 50 +++++++++++-----
 .../app/distributed-ledger-gateway/page.tsx   |  9 +++
 pkgs/ui/src/app/home/page.tsx                 | 20 ++++++-
 pkgs/ui/src/config/access_point/index.tsx     |  4 +-
 pkgs/ui/src/config/client_1/index.tsx         | 16 ++---
 pkgs/ui/src/config/client_2/index.tsx         | 16 ++---
 9 files changed, 136 insertions(+), 52 deletions(-)

diff --git a/pkgs/clan-cli/tests/test_db_api.py b/pkgs/clan-cli/tests/test_db_api.py
index 2595a86..cf393bf 100644
--- a/pkgs/clan-cli/tests/test_db_api.py
+++ b/pkgs/clan-cli/tests/test_db_api.py
@@ -266,7 +266,7 @@ def test_entity(api: TestClient) -> None:
     request_body = {
         "did": default_entity_did,
         "name": "C1",
-        "ip": "127.0.0.1",
+        "ip": "127.0.0.1:5555",
         "attached": False,
         "visible": True,
         "other": {
@@ -283,7 +283,7 @@ def test_entity2(api: TestClient) -> None:
     request_body = {
         "did": default_entity_did2,
         "name": "C2",
-        "ip": "127.0.0.2",
+        "ip": "127.0.0.1:5555",
         "attached": False,
         "visible": True,
         "other": {
diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index 3cb3115..5ef21b9 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -10,6 +10,7 @@ import {
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
 } from "@/config/access_point";
+import { useEffect } from 'react';
 
 export default function AccessPoint() {
 
@@ -28,6 +29,14 @@ export default function AccessPoint() {
     }
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index 84b8245..726d2fe 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -1,16 +1,15 @@
 "use client";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
 } from "@/config/client_1";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import { Alert, Button, Card, CardContent, CardHeader, Skeleton, Snackbar, Typography } from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { mutate } from "swr";
 import { useGetEntity } from "@/api/entities/entities";
-import { useGetConsumer } from "@/api/consumers/consumers";
 import { BASE_URL } from "@/constants";
 import axios from "axios";
 
@@ -18,37 +17,54 @@ export default function Client1() {
 
   const { entity } = useGetEntityByName('C1');
   const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
-  const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did })
   const cardContentRef = useRef(null);
+  const [isAttached, setIsAttached] = useState(entity?.attached || false);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  const closeSnackBar = () => {
+    setSnackbarMessage('');
+    setSnackbarOpen(false);
+  }
 
   const onAttachEntity = async () => {
     try {
       const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
-      alert(response.data.message);
+      setSnackbarMessage(response.data.message);
+      setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(true)
     }
   }
 
   const onDetachEntity = async () => {
     try {
       const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
-      console.log('detach', response)
-      alert('Entity Detached Successfully.');
+      console.log(response);
+      setSnackbarMessage('Entity detached successfully.');
+      setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(false)
     }
   }
 
   const onRefresh = () => {
     const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
-    const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
     if (entityKey) mutate(entityKey);
-    if (consumerKey) mutate(consumerKey)
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   if (isLoading)
     return <Skeleton height={500} />
 
@@ -63,12 +79,17 @@ export default function Client1() {
       >
         <h2>Client 1</h2>
         <div>
-          <Button onClick={onAttachEntity} className="mr-6" variant="contained">
-            Attach
-          </Button>
-          <Button onClick={onDetachEntity} className="mr-6" variant="contained">
-            Detach
-          </Button>
+
+          {isAttached === false ?
+            <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>
@@ -93,8 +114,8 @@ export default function Client1() {
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          loading={loadingConsumerData}
-          data={consumerData?.data}
+          loading={isLoading}
+          data={client1?.data?.producers}
           configuration={Client1ConsumerTableConfig}
         />
       </div>
@@ -106,6 +127,11 @@ export default function Client1() {
           configuration={Client1ProducerTableConfig}
         />
       </div>
+      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
+        <Alert severity="success" sx={{ width: '100%' }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index 747f59a..c48eaab 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -1,15 +1,14 @@
 "use client";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Client2ConsumerTableConfig,
   Client2ProducerTableConfig,
 } from "@/config/client_2";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import { Button, Card, CardContent, CardHeader, Skeleton, Typography, Snackbar, Alert } 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";
@@ -18,8 +17,15 @@ export default function Client2() {
 
   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);
+  const [isAttached, setIsAttached] = useState(entity?.attached);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  const closeSnackBar = () => {
+    setSnackbarMessage('');
+    setSnackbarOpen(false);
+  }
 
   const onAttachEntity = async () => {
     try {
@@ -28,6 +34,7 @@ export default function Client2() {
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(true)
     }
   }
 
@@ -39,16 +46,23 @@ export default function Client2() {
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(false)
     }
   }
 
   const onRefresh = () => {
     const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
-    const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
     if (entityKey) mutate(entityKey);
-    if (consumerKey) mutate(consumerKey)
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   if (isLoading)
     return <Skeleton height={500} />
 
@@ -63,12 +77,15 @@ export default function Client2() {
       >
         <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>
+          {isAttached === false ?
+            <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>
@@ -93,8 +110,8 @@ export default function Client2() {
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          loading={loadingConsumerData}
-          data={consumerData?.data}
+          loading={isLoading}
+          data={client2?.data?.producers}
           configuration={Client2ConsumerTableConfig}
         />
       </div>
@@ -106,6 +123,11 @@ export default function Client2() {
           configuration={Client2ProducerTableConfig}
         />
       </div>
+      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
+        <Alert severity="success" sx={{ width: '100%' }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index 96ee33f..a611b9c 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -4,6 +4,7 @@ import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
 import useFetch from "@/components/hooks/useFetch";
+import { useEffect } from "react";
 
 
 export default function DLG() {
@@ -13,6 +14,14 @@ export default function DLG() {
     fetch();
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index 9fcdfe4..ed1f67e 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -5,16 +5,34 @@ import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import { HomeTableConfig } from "@/config/home";
+import { useEffect } from "react";
+import { mutate } from "swr";
 
 export default function Home() {
 
   const { data } = useAppState();
 
+  const entitiesKeyFunc = data.entitiesKeyFunc;
+
+  const onRefresh = () => {
+    const entityKey = typeof entitiesKeyFunc === 'function' ? entitiesKeyFunc() : entitiesKeyFunc;
+    if (entitiesKeyFunc) mutate(entityKey);
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
         entity={{ name: "Home", details: [] }}
-        hasRefreshButton={false}
+        hasRefreshButton={true}
+        onRefresh={onRefresh}
         hasAttachDetach={false}
       />
 
diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx
index f43ba4c..335505a 100644
--- a/pkgs/ui/src/config/access_point/index.tsx
+++ b/pkgs/ui/src/config/access_point/index.tsx
@@ -17,11 +17,11 @@ export const APSummaryDetails = [
 
 export const APAttachmentsTableConfig = [
   {
-    key: "entity_name",
+    key: "name",
     label: "Entity name",
   },
   {
-    key: "entity_did",
+    key: "did",
     label: "Entity DID",
   },
   {
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
index 7d9b18f..e2b8ecf 100644
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -16,18 +16,18 @@ export const Client1ConsumerTableConfig = [
       return <Button disabled variant="outlined">Consume</Button>
     }
   },
-  {
-    key: "entity",
-    label: "Entity",
-  },
+  // {
+  //   key: "entity",
+  //   label: "Entity",
+  // },
   {
     key: "entity_did",
     label: "Entity DID",
   },
-  {
-    key: "network",
-    label: "Network",
-  },
+  // {
+  //   key: "network",
+  //   label: "Network",
+  // },
 ];
 
 export const Client1ProducerTableConfig = [
diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx
index c9528d8..a971098 100644
--- a/pkgs/ui/src/config/client_2/index.tsx
+++ b/pkgs/ui/src/config/client_2/index.tsx
@@ -16,18 +16,18 @@ export const Client2ConsumerTableConfig = [
       return <Button disabled variant="outlined">Consume</Button>
     }
   },
-  {
-    key: "entity",
-    label: "Entity",
-  },
+  // {
+  //   key: "entity",
+  //   label: "Entity",
+  // },
   {
     key: "entity_did",
     label: "Entity DID",
   },
-  {
-    key: "network",
-    label: "Network",
-  },
+  // {
+  //   key: "network",
+  //   label: "Network",
+  // },
 ];
 
 export const Client2ProducerTableConfig = [
-- 
2.51.0


From 85d96203e36943f0e7765b8d31cd3787c3935be0 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 22:05:24 +0100
Subject: [PATCH 6/8] added eslint disabling

---
 pkgs/ui/src/app/access-point/page.tsx               | 1 +
 pkgs/ui/src/app/client-1/page.tsx                   | 1 +
 pkgs/ui/src/app/client-2/page.tsx                   | 1 +
 pkgs/ui/src/app/distributed-ledger-gateway/page.tsx | 1 +
 pkgs/ui/src/app/home/page.tsx                       | 1 +
 pkgs/ui/src/components/hooks/useFetch.tsx           | 1 +
 6 files changed, 6 insertions(+)

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index 5ef21b9..70159ab 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -35,6 +35,7 @@ export default function AccessPoint() {
     }, 1000);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index 726d2fe..8d583a0 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -63,6 +63,7 @@ export default function Client1() {
     }, 1000);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (isLoading)
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index c48eaab..f10209f 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -61,6 +61,7 @@ export default function Client2() {
     }, 1000);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (isLoading)
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index a611b9c..5c7a501 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -20,6 +20,7 @@ export default function DLG() {
     }, 5000);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index ed1f67e..a4ec67b 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -25,6 +25,7 @@ export default function Home() {
     }, 500);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
diff --git a/pkgs/ui/src/components/hooks/useFetch.tsx b/pkgs/ui/src/components/hooks/useFetch.tsx
index a176163..24e103f 100644
--- a/pkgs/ui/src/components/hooks/useFetch.tsx
+++ b/pkgs/ui/src/components/hooks/useFetch.tsx
@@ -23,6 +23,7 @@ const useFetch = (url: string) => {
 
   useEffect(() => {
     fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url]);
 
   return { data, loading, error, fetch };
-- 
2.51.0


From fa25e13842c200a49d20014e98bde066afa51bea Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 12 Dec 2023 22:10:18 +0100
Subject: [PATCH 7/8] disabled eslint again

---
 pkgs/ui/src/components/hooks/useAppContext.tsx | 1 +
 pkgs/ui/src/config/client_1/index.tsx          | 2 +-
 pkgs/ui/src/config/client_2/index.tsx          | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx
index 476b3c4..e45ac7c 100644
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -54,6 +54,7 @@ export const WithAppState = (props: AppContextProviderProps) => {
         loadingEntities: false,
       }));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entityData]);
 
   return (
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
index e2b8ecf..69f44bb 100644
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -12,7 +12,7 @@ export const Client1ConsumerTableConfig = [
   {
     key: "endpoint_url",
     label: "End Point",
-    render: (value: any) => {
+    render: () => {
       return <Button disabled variant="outlined">Consume</Button>
     }
   },
diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx
index a971098..7cc0f2a 100644
--- a/pkgs/ui/src/config/client_2/index.tsx
+++ b/pkgs/ui/src/config/client_2/index.tsx
@@ -12,7 +12,7 @@ export const Client2ConsumerTableConfig = [
   {
     key: "endpoint_url",
     label: "End Point",
-    render: (value: any) => {
+    render: () => {
       return <Button disabled variant="outlined">Consume</Button>
     }
   },
-- 
2.51.0


From 78736f39445888cda3c66538918c449f3829f889 Mon Sep 17 00:00:00 2001
From: Luis-Hebendanz <consulting@qube.email>
Date: Tue, 12 Dec 2023 22:55:41 +0100
Subject: [PATCH 8/8] nix fmt

---
 pkgs/ui/src/app/access-point/page.tsx         | 29 +++++--
 pkgs/ui/src/app/client-1/page.tsx             | 84 ++++++++++++------
 pkgs/ui/src/app/client-2/page.tsx             | 85 +++++++++++++------
 .../app/distributed-ledger-gateway/page.tsx   |  9 +-
 pkgs/ui/src/app/home/page.tsx                 | 14 ++-
 .../ui/src/components/hooks/useAppContext.tsx | 11 ++-
 pkgs/ui/src/components/hooks/useFetch.tsx     | 10 +--
 .../src/components/hooks/useGetEntityById.tsx |  4 +-
 pkgs/ui/src/components/summary_card/index.tsx |  6 +-
 pkgs/ui/src/components/table/index.tsx        |  4 +-
 pkgs/ui/src/config/access_point/index.tsx     | 21 +++--
 pkgs/ui/src/config/client_1/index.tsx         | 21 +++--
 pkgs/ui/src/config/client_2/index.tsx         | 21 +++--
 pkgs/ui/src/config/dlg/index.ts               |  4 +-
 pkgs/ui/src/config/home/index.ts              |  7 +-
 pkgs/ui/src/constants/index.ts                | 14 +--
 pkgs/ui/src/utils/helpers.ts                  | 18 ++--
 17 files changed, 231 insertions(+), 131 deletions(-)

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
index 70159ab..91bd903 100644
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { mutate } from 'swr';
+import { mutate } from "swr";
 import { useGetAttachedEntities } from "@/api/entities/entities";
 import { useGetRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
@@ -10,16 +10,29 @@ import {
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
 } from "@/config/access_point";
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 export default function AccessPoint() {
-
-  const { data: APAttachementData, isLoading: loadingAttachements, swrKey: attachedEntitiesKeyFunc } = useGetAttachedEntities();
-  const { data: APRepositories, isLoading: laodingRepositories, swrKey: repositoriesKeyFunc } = useGetRepositories();
+  const {
+    data: APAttachementData,
+    isLoading: loadingAttachements,
+    swrKey: attachedEntitiesKeyFunc,
+  } = useGetAttachedEntities();
+  const {
+    data: APRepositories,
+    isLoading: laodingRepositories,
+    swrKey: repositoriesKeyFunc,
+  } = useGetRepositories();
 
   const onRefresh = () => {
-    const attachedEntitiesKey = typeof attachedEntitiesKeyFunc === 'function' ? attachedEntitiesKeyFunc() : attachedEntitiesKeyFunc;
-    const repositoriesKey = typeof repositoriesKeyFunc === 'function' ? repositoriesKeyFunc() : repositoriesKeyFunc;
+    const attachedEntitiesKey =
+      typeof attachedEntitiesKeyFunc === "function"
+        ? attachedEntitiesKeyFunc()
+        : attachedEntitiesKeyFunc;
+    const repositoriesKey =
+      typeof repositoriesKeyFunc === "function"
+        ? repositoriesKeyFunc()
+        : repositoriesKeyFunc;
 
     if (attachedEntitiesKey) {
       mutate(attachedEntitiesKey);
@@ -27,7 +40,7 @@ export default function AccessPoint() {
     if (repositoriesKey) {
       mutate(repositoriesKey);
     }
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx
index 8d583a0..c0343de 100644
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -6,7 +6,16 @@ import {
 } from "@/config/client_1";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Alert, Button, Card, CardContent, CardHeader, Skeleton, Snackbar, Typography } from "@mui/material";
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Snackbar,
+  Typography,
+} from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { mutate } from "swr";
 import { useGetEntity } from "@/api/entities/entities";
@@ -14,48 +23,56 @@ import { BASE_URL } from "@/constants";
 import axios from "axios";
 
 export default function Client1() {
-
-  const { entity } = useGetEntityByName('C1');
-  const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
+  const { entity } = useGetEntityByName("C1");
+  const {
+    data: client1,
+    isLoading,
+    swrKey: entityKeyFunc,
+  } = useGetEntity({ entity_did: entity?.did });
   const cardContentRef = useRef(null);
   const [isAttached, setIsAttached] = useState(entity?.attached || false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   const closeSnackBar = () => {
-    setSnackbarMessage('');
+    setSnackbarMessage("");
     setSnackbarOpen(false);
-  }
+  };
 
   const onAttachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/attach`, {
+        entity_did: entity?.did,
+      });
       setSnackbarMessage(response.data.message);
       setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(true)
+      setIsAttached(true);
     }
-  }
+  };
 
   const onDetachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/detach`, {
+        entity_did: entity?.did,
+      });
       console.log(response);
-      setSnackbarMessage('Entity detached successfully.');
+      setSnackbarMessage("Entity detached successfully.");
       setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(false)
+      setIsAttached(false);
     }
-  }
+  };
 
   const onRefresh = () => {
-    const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
     if (entityKey) mutate(entityKey);
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -66,8 +83,7 @@ export default function Client1() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (isLoading)
-    return <Skeleton height={500} />
+  if (isLoading) return <Skeleton height={500} />;
 
   return (
     <div className="m-10">
@@ -80,18 +96,27 @@ export default function Client1() {
       >
         <h2>Client 1</h2>
         <div>
-
-          {isAttached === false ?
-            <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+          {isAttached === false ? (
+            <Button
+              onClick={onAttachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Attach
             </Button>
-            :
-            <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+          ) : (
+            <Button
+              onClick={onDetachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Detach
             </Button>
-          }
+          )}
 
-          <Button onClick={onRefresh} variant="contained">Refresh</Button>
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
         </div>
       </div>
 
@@ -128,8 +153,13 @@ export default function Client1() {
           configuration={Client1ProducerTableConfig}
         />
       </div>
-      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
-        <Alert severity="success" sx={{ width: '100%' }}>
+      <Snackbar
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+      >
+        <Alert severity="success" sx={{ width: "100%" }}>
           {snackbarMessage}
         </Alert>
       </Snackbar>
diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx
index f10209f..31526a5 100644
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -6,7 +6,16 @@ import {
 } from "@/config/client_2";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Button, Card, CardContent, CardHeader, Skeleton, Typography, Snackbar, Alert } from "@mui/material";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Typography,
+  Snackbar,
+  Alert,
+} from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { useGetEntity } from "@/api/entities/entities";
 import { mutate } from "swr";
@@ -14,46 +23,54 @@ import axios from "axios";
 import { BASE_URL } from "@/constants";
 
 export default function Client2() {
-
-  const { entity } = useGetEntityByName('C2');
-  const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
+  const { entity } = useGetEntityByName("C2");
+  const {
+    data: client2,
+    isLoading,
+    swrKey: entityKeyFunc,
+  } = useGetEntity({ entity_did: entity?.did });
   const cardContentRef = useRef(null);
   const [isAttached, setIsAttached] = useState(entity?.attached);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   const closeSnackBar = () => {
-    setSnackbarMessage('');
+    setSnackbarMessage("");
     setSnackbarOpen(false);
-  }
+  };
 
   const onAttachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
+      const response = await axios.post(`${BASE_URL}/attach`, {
+        entity_did: entity?.did,
+      });
       alert(response.data.message);
     } catch (error) {
       console.error(error);
     } finally {
-      setIsAttached(true)
+      setIsAttached(true);
     }
-  }
+  };
 
   const onDetachEntity = async () => {
     try {
-      const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
-      console.log('detach', response)
-      alert('Entity Detached Successfully.');
+      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 {
-      setIsAttached(false)
+      setIsAttached(false);
     }
-  }
+  };
 
   const onRefresh = () => {
-    const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
     if (entityKey) mutate(entityKey);
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -64,8 +81,7 @@ export default function Client2() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (isLoading)
-    return <Skeleton height={500} />
+  if (isLoading) return <Skeleton height={500} />;
 
   return (
     <div className="m-10">
@@ -78,16 +94,26 @@ export default function Client2() {
       >
         <h2>Client 2</h2>
         <div>
-          {isAttached === false ?
-            <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+          {isAttached === false ? (
+            <Button
+              onClick={onAttachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Attach
             </Button>
-            :
-            <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+          ) : (
+            <Button
+              onClick={onDetachEntity}
+              className="mr-6"
+              variant="contained"
+            >
               Detach
             </Button>
-          }
-          <Button onClick={onRefresh} variant="contained">Refresh</Button>
+          )}
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
         </div>
       </div>
 
@@ -124,8 +150,13 @@ export default function Client2() {
           configuration={Client2ProducerTableConfig}
         />
       </div>
-      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
-        <Alert severity="success" sx={{ width: '100%' }}>
+      <Snackbar
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+      >
+        <Alert severity="success" sx={{ width: "100%" }}>
           {snackbarMessage}
         </Alert>
       </Snackbar>
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index 5c7a501..9698c9f 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -6,13 +6,16 @@ import SummaryDetails from "@/components/summary_card";
 import useFetch from "@/components/hooks/useFetch";
 import { useEffect } from "react";
 
-
 export default function DLG() {
-  const { data: resolutionData, loading: loadingResolutions, fetch } = useFetch('/get_resolutions');
+  const {
+    data: resolutionData,
+    loading: loadingResolutions,
+    fetch,
+  } = useFetch("/get_resolutions");
 
   const onRefresh = () => {
     fetch();
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index a4ec67b..d405ccf 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -9,15 +9,17 @@ import { useEffect } from "react";
 import { mutate } from "swr";
 
 export default function Home() {
-
   const { data } = useAppState();
 
   const entitiesKeyFunc = data.entitiesKeyFunc;
 
   const onRefresh = () => {
-    const entityKey = typeof entitiesKeyFunc === 'function' ? entitiesKeyFunc() : entitiesKeyFunc;
+    const entityKey =
+      typeof entitiesKeyFunc === "function"
+        ? entitiesKeyFunc()
+        : entitiesKeyFunc;
     if (entitiesKeyFunc) mutate(entityKey);
-  }
+  };
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -39,7 +41,11 @@ export default function Home() {
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable loading={data.loadingEntities} data={data?.allEntities} configuration={HomeTableConfig} />
+        <CustomTable
+          loading={data.loadingEntities}
+          data={data?.allEntities}
+          configuration={HomeTableConfig}
+        />
       </div>
 
       <div>
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx
index e45ac7c..d8e9c31 100644
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -22,10 +22,10 @@ type AppContextType = {
 export const AppContext = createContext<AppContextType>({} as AppContextType);
 
 type AppState = {
-  allEntities: Entity[] | undefined,
-  loadingEntities: boolean,
-  entitiesKeyFunc: any,
-}
+  allEntities: Entity[] | undefined;
+  loadingEntities: boolean;
+  entitiesKeyFunc: any;
+};
 
 interface AppContextProviderProps {
   children: ReactNode;
@@ -35,7 +35,6 @@ export const WithAppState = (props: AppContextProviderProps) => {
 
   const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
 
-
   const isLoading = false;
   const error = undefined;
 
@@ -47,7 +46,7 @@ export const WithAppState = (props: AppContextProviderProps) => {
 
   useEffect(() => {
     if (entityData) {
-      setAppState(prevState => ({
+      setAppState((prevState) => ({
         ...prevState,
         allEntities: entityData.data,
         entitiesKeyFunc,
diff --git a/pkgs/ui/src/components/hooks/useFetch.tsx b/pkgs/ui/src/components/hooks/useFetch.tsx
index 24e103f..5a138e8 100644
--- a/pkgs/ui/src/components/hooks/useFetch.tsx
+++ b/pkgs/ui/src/components/hooks/useFetch.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import axios from 'axios';
-import { BASE_URL } from '@/constants';
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { BASE_URL } from "@/constants";
 
 const useFetch = (url: string) => {
   const [data, setData] = useState([]);
@@ -9,7 +9,8 @@ const useFetch = (url: string) => {
 
   const fetch = () => {
     setLoading(true);
-    axios.get(BASE_URL + url)
+    axios
+      .get(BASE_URL + url)
       .then((response) => {
         setData(response.data);
       })
@@ -29,5 +30,4 @@ const useFetch = (url: string) => {
   return { data, loading, error, fetch };
 };
 
-
 export default useFetch;
diff --git a/pkgs/ui/src/components/hooks/useGetEntityById.tsx b/pkgs/ui/src/components/hooks/useGetEntityById.tsx
index b1be4f3..7736d44 100644
--- a/pkgs/ui/src/components/hooks/useGetEntityById.tsx
+++ b/pkgs/ui/src/components/hooks/useGetEntityById.tsx
@@ -10,10 +10,10 @@ const useGetEntityByName = (nameOrDid: string) => {
   }
 
   const entity = allEntities.find(
-    (entity) => entity.name === nameOrDid || entity.did === nameOrDid
+    (entity) => entity.name === nameOrDid || entity.did === nameOrDid,
   );
 
   return { entity, isLoading: false };
 };
 
-export default useGetEntityByName;
\ No newline at end of file
+export default useGetEntityByName;
diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx
index 504935f..0a6c016 100644
--- a/pkgs/ui/src/components/summary_card/index.tsx
+++ b/pkgs/ui/src/components/summary_card/index.tsx
@@ -36,7 +36,11 @@ const SummaryDetails = ({
               Attach / Detach
             </Button>
           )}
-          {hasRefreshButton && <Button onClick={onRefresh} variant="contained">Refresh</Button>}
+          {hasRefreshButton && (
+            <Button onClick={onRefresh} variant="contained">
+              Refresh
+            </Button>
+          )}
         </div>
       </div>
       {hasDetails && (
diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx
index 090b325..25af334 100644
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/pkgs/ui/src/components/table/index.tsx
@@ -12,10 +12,8 @@ import { ICustomTable, CustomTableConfiguration } from "@/types";
 import { Checkbox, Skeleton } from "@mui/material";
 
 const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
-
-
   if (loading)
-    return <Skeleton variant="rectangular" animation="wave" height={200} />
+    return <Skeleton variant="rectangular" animation="wave" height={200} />;
 
   // display empty icon in case there is no data
   if (!data || data.length === 0)
diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx
index 335505a..2d8575a 100644
--- a/pkgs/ui/src/config/access_point/index.tsx
+++ b/pkgs/ui/src/config/access_point/index.tsx
@@ -28,11 +28,10 @@ export const APAttachmentsTableConfig = [
     key: "other",
     label: "Network",
     render: (value: any) => {
-      let renderedValue = ''
-      if (typeof value === 'object')
-        renderedValue = value?.network;
+      let renderedValue = "";
+      if (typeof value === "object") renderedValue = value?.network;
       return renderedValue;
-    }
+    },
   },
   {
     key: "ip",
@@ -65,13 +64,17 @@ export const APServiceRepositoryTableConfig = [
     key: "other",
     label: "Type",
     render: (value: any) => {
-      let renderedValue: any = ''
-      if (typeof value === 'object') {
+      let renderedValue: any = "";
+      if (typeof value === "object") {
         const label = Object.keys(value)[0];
-        const info = value[label]
-        renderedValue = (<code>{label} {info}</code>);
+        const info = value[label];
+        renderedValue = (
+          <code>
+            {label} {info}
+          </code>
+        );
       }
       return renderedValue;
-    }
+    },
   },
 ];
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
index 69f44bb..ca3a025 100644
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -13,8 +13,12 @@ export const Client1ConsumerTableConfig = [
     key: "endpoint_url",
     label: "End Point",
     render: () => {
-      return <Button disabled variant="outlined">Consume</Button>
-    }
+      return (
+        <Button disabled variant="outlined">
+          Consume
+        </Button>
+      );
+    },
   },
   // {
   //   key: "entity",
@@ -55,14 +59,19 @@ export const Client1ProducerTableConfig = [
     key: "other",
     label: "Action",
     render: (value: any) => {
-      let renderedValue: any = '';
+      let renderedValue: any = "";
       if (typeof value === "object")
         renderedValue = (
           <>
-            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+            {value.action.map((actionType: string) => (
+              <>
+                <code>{actionType}</code>
+                <br />
+              </>
+            ))}
           </>
-        )
+        );
       return renderedValue;
     },
-  }
+  },
 ];
diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx
index 7cc0f2a..982b2ad 100644
--- a/pkgs/ui/src/config/client_2/index.tsx
+++ b/pkgs/ui/src/config/client_2/index.tsx
@@ -13,8 +13,12 @@ export const Client2ConsumerTableConfig = [
     key: "endpoint_url",
     label: "End Point",
     render: () => {
-      return <Button disabled variant="outlined">Consume</Button>
-    }
+      return (
+        <Button disabled variant="outlined">
+          Consume
+        </Button>
+      );
+    },
   },
   // {
   //   key: "entity",
@@ -55,14 +59,19 @@ export const Client2ProducerTableConfig = [
     key: "other",
     label: "Action",
     render: (value: any) => {
-      let renderedValue: any = '';
+      let renderedValue: any = "";
       if (typeof value === "object")
         renderedValue = (
           <>
-            {value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
+            {value.action.map((actionType: string) => (
+              <>
+                <code>{actionType}</code>
+                <br />
+              </>
+            ))}
           </>
-        )
+        );
       return renderedValue;
     },
-  }
+  },
 ];
diff --git a/pkgs/ui/src/config/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts
index 134aadc..0cc3109 100644
--- a/pkgs/ui/src/config/dlg/index.ts
+++ b/pkgs/ui/src/config/dlg/index.ts
@@ -46,6 +46,6 @@ export const DLGResolutionTableConfig = [
   {
     key: "timestamp",
     label: "Timestamp",
-    render: (value: string) => formatDateTime(value)
-  }
+    render: (value: string) => formatDateTime(value),
+  },
 ];
diff --git a/pkgs/ui/src/config/home/index.ts b/pkgs/ui/src/config/home/index.ts
index 57893fe..7f72fe5 100644
--- a/pkgs/ui/src/config/home/index.ts
+++ b/pkgs/ui/src/config/home/index.ts
@@ -13,7 +13,7 @@ export const HomeTableConfig = [
     render: (value: any) => {
       const renderedValue = typeof value === "object" ? value?.network : "-";
       return renderedValue;
-    }
+    },
   },
   {
     key: "ip",
@@ -23,9 +23,10 @@ export const HomeTableConfig = [
     key: "other",
     label: "Roles",
     render: (value: any) => {
-      const renderedValue = typeof value === "object" ? value?.roles?.join(", ") : "-";
+      const renderedValue =
+        typeof value === "object" ? value?.roles?.join(", ") : "-";
       return renderedValue;
-    }
+    },
   },
   {
     key: "attached",
diff --git a/pkgs/ui/src/constants/index.ts b/pkgs/ui/src/constants/index.ts
index 58bad54..449ac7f 100644
--- a/pkgs/ui/src/constants/index.ts
+++ b/pkgs/ui/src/constants/index.ts
@@ -1,15 +1,9 @@
-const BASE_URL = 'http://localhost:2979/api/v1';
+const BASE_URL = "http://localhost:2979/api/v1";
 
 // Home View
-const HOME_VIEW_TABLE = '/get_entities';
-
+const HOME_VIEW_TABLE = "/get_entities";
 
 // Access Point
-const SERVICE_REPOSITORY_URL = '/get_repositories';
+const SERVICE_REPOSITORY_URL = "/get_repositories";
 
-
-export {
-  BASE_URL,
-  HOME_VIEW_TABLE,
-  SERVICE_REPOSITORY_URL,
-}
\ No newline at end of file
+export { BASE_URL, HOME_VIEW_TABLE, SERVICE_REPOSITORY_URL };
diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts
index f852c27..8d6e3b2 100644
--- a/pkgs/ui/src/utils/helpers.ts
+++ b/pkgs/ui/src/utils/helpers.ts
@@ -1,12 +1,12 @@
 export const formatDateTime = (date: string) => {
   const _date = new Date(date);
-  return _date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: true
+  return _date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
   });
-}
\ No newline at end of file
+};
-- 
2.51.0