2023-12-12 22:00:38 +00:00
22 changed files with 577 additions and 589 deletions
--- 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>
--- 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>
--- 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>
--- 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}
        />
--- 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>
--- 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
--- a/pkgs/ui/src/components/hooks/useFetch.tsx
+++ 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;
--- 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,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}>
--- 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" />;
--- a/pkgs/ui/src/config/access_point/index.tsx
+++ 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;
+    }
+  },
+];
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ 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;
+    },
+  }
+];
--- a/pkgs/ui/src/config/client_2/index.tsx
+++ 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;
+    },
+  }
+];
--- 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,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",
+  },
+];
--- a/pkgs/ui/src/constants/index.ts
+++ 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,
+}
--- 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
+  });
+}