Before Milestone Meeting Final Changes (#40)

some final fixes before the demo Co-authored-by: Luis-Hebendanz <consulting@qube.email> Reviewed-on: #40 Co-authored-by: sara-pervana <saramakishti@gmail.com> Co-committed-by: sara-pervana <saramakishti@gmail.com>
2023-12-12 23:00:37 +01:00
parent 85d62aac89
commit 8ee14f1a7b
23 changed files with 759 additions and 581 deletions
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -1,56 +1,77 @@
 "use client";

+import { 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";
+import { useEffect } from "react";

 export default function AccessPoint() {
-  const [repositoryData, setRepositoryData] = useState<RepositoryData[]>([]);
+  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);
+    }
+  };

  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 interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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>
--- a/pkgs/ui/src/app/client-1/page.tsx
+++ b/pkgs/ui/src/app/client-1/page.tsx
@@ -1,68 +1,168 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useEffect, 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 {
+  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 { BASE_URL } from "@/constants";
+import axios from "axios";

 export default function Client1() {
-  const [consumerData, setConsumerData] = useState([]);
-  const [producerData, setProducerData] = useState([]);
+  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 closeSnackBar = () => {
+    setSnackbarMessage("");
+    setSnackbarOpen(false);
+  };
+
+  const onAttachEntity = async () => {
+    try {
+      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);
+    }
+  };
+
+  const onDetachEntity = async () => {
+    try {
+      const response = await axios.post(`${BASE_URL}/detach`, {
+        entity_did: entity?.did,
+      });
+      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;
+    if (entityKey) mutate(entityKey);
+  };

  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 interval = setInterval(() => {
+      onRefresh();
+    }, 1000);

-    fetch("http://localhost:2979/api/v1/get_producers", {
-      method: "GET",
-    })
-      .then((resp) =>
-        resp.json().then((jsonData) => {
-          console.log(jsonData);
-          setProducerData(jsonData);
-        }),
-      )
-      .then()
-      .catch();
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  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>
+          {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>
+
+      <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={isLoading}
+          data={client1?.data?.producers}
          configuration={Client1ConsumerTableConfig}
        />
      </div>
      <div>
        <h4>Producer View</h4>
        <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client1?.data?.producers}
          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>
  );
 }
--- a/pkgs/ui/src/app/client-2/page.tsx
+++ b/pkgs/ui/src/app/client-2/page.tsx
@@ -1,69 +1,165 @@
 "use client";
-
-import SummaryDetails from "@/components/summary_card";
+import { useEffect, 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 useGetEntityByName from "@/components/hooks/useGetEntityById";
+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";
+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() {
+  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 closeSnackBar = () => {
+    setSnackbarMessage("");
+    setSnackbarOpen(false);
+  };
+
+  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 {
+      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.");
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAttached(false);
+    }
+  };
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
+    if (entityKey) mutate(entityKey);
+  };

  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 interval = setInterval(() => {
+      onRefresh();
+    }, 1000);

-    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();
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  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>
+          {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>
+
+      <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={isLoading}
+          data={client2?.data?.producers}
          configuration={Client2ConsumerTableConfig}
        />
      </div>
      <div>
        <h4>Producer View</h4>
        <CustomTable
-          data={producerData}
+          loading={isLoading}
+          data={client2?.data?.producers}
          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>
  );
 }
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -1,31 +1,37 @@
 "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";
+import { useEffect } from "react";

 export default function DLG() {
-  const [resolutionData, setResolutionData] = useState([]);
+  const {
+    data: resolutionData,
+    loading: loadingResolutions,
+    fetch,
+  } = useFetch("/get_resolutions");
+
+  const onRefresh = () => {
+    fetch();
+  };

  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 interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="m-10">
      <SummaryDetails
+        fake
        hasRefreshButton
+        onRefresh={onRefresh}
        entity={{
          name: "Distributed Ledger Gateway",
          details: DLGSummaryDetails,
@@ -34,6 +40,7 @@ export default function DLG() {
      <div>
        <h4>DID Resolution View</h4>
        <CustomTable
+          loading={loadingResolutions}
          data={resolutionData}
          configuration={DLGResolutionTableConfig}
        />
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -1,39 +1,51 @@
 "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";
+import { useEffect } from "react";
+import { mutate } from "swr";

 export default function Home() {
-  const [homeData, setHomeData] = useState([]);
+  const { data } = useAppState();
+
+  const entitiesKeyFunc = data.entitiesKeyFunc;
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entitiesKeyFunc === "function"
+        ? entitiesKeyFunc()
+        : entitiesKeyFunc;
+    if (entitiesKeyFunc) mutate(entityKey);
+  };

  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 interval = setInterval(() => {
+      onRefresh();
+    }, 500);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="m-10">
      <SummaryDetails
        entity={{ name: "Home", details: [] }}
-        hasRefreshButton={false}
+        hasRefreshButton={true}
+        onRefresh={onRefresh}
        hasAttachDetach={false}
      />

      <div>
        <h4>Home View Table</h4>
-        <CustomTable data={homeData} configuration={HomeTableConfig} />
+        <CustomTable
+          loading={data.loadingEntities}
+          data={data?.allEntities}
+          configuration={HomeTableConfig}
+        />
      </div>

      <div>
--- 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,
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entityData]);

  return (
    <AppContext.Provider
--- a/pkgs/ui/src/components/hooks/useFetch.tsx
+++ b/pkgs/ui/src/components/hooks/useFetch.tsx
@@ -0,0 +1,33 @@
+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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+
+  return { data, loading, error, fetch };
+};
+
+export default useFetch;
--- a/pkgs/ui/src/components/hooks/useGetEntityById.tsx
+++ 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;
--- 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,17 @@ 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}>
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/pkgs/ui/src/components/table/index.tsx
@@ -9,9 +9,12 @@ 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" />;
--- a/pkgs/ui/src/config/access_point/index.tsx
+++ b/pkgs/ui/src/config/access_point/index.tsx
@@ -0,0 +1,80 @@
+// 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: "name",
+    label: "Entity name",
+  },
+  {
+    key: "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;
+    },
+  },
+];
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -0,0 +1,77 @@
+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: () => {
+      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;
+    },
+  },
+];
--- a/pkgs/ui/src/config/client_2/index.tsx
+++ b/pkgs/ui/src/config/client_2/index.tsx
@@ -0,0 +1,77 @@
+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: () => {
+      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;
+    },
+  },
+];
--- a/pkgs/ui/src/config/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),
  },
 ];
--- a/pkgs/ui/src/config/home/index.ts
+++ b/pkgs/ui/src/config/home/index.ts
@@ -0,0 +1,35 @@
+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",
+  },
+];
--- a/pkgs/ui/src/constants/index.ts
+++ b/pkgs/ui/src/constants/index.ts
@@ -0,0 +1,9 @@
+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 };
--- a/pkgs/ui/src/mock/access_point/index.ts
+++ b/pkgs/ui/src/mock/access_point/index.ts
@@ -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",
-  },
-];
--- a/pkgs/ui/src/mock/client_1/index.ts
+++ b/pkgs/ui/src/mock/client_1/index.ts
@@ -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",
-  // },
-];
--- a/pkgs/ui/src/mock/client_2/index.ts
+++ b/pkgs/ui/src/mock/client_2/index.ts
@@ -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",
-  },
-];
--- a/pkgs/ui/src/mock/home/index.ts
+++ b/pkgs/ui/src/mock/home/index.ts
@@ -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",
-  },
-];
--- 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;
 }
--- a/pkgs/ui/src/utils/helpers.ts
+++ 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,
+  });
+};