pkgs/ui/src/components/table/index.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+
+import { NoDataOverlay } from "@/components/noDataOverlay";
+import { StyledTableCell, StyledTableRow } from "./style";
+import { ICustomTable, CustomTableConfiguration } from "@/types";
+
+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" />;
+
+  const renderTableCell = (
+    value: any,
+    cellKey: string,
+    render?: (param: any) => void | undefined,
+  ) => {
+    let renderedValue = value;
+
+    // cover use case if the data is an array
+    if (Array.isArray(value)) renderedValue = value.join(", ");
+
+    // cover use case if we want to render a component
+    if (render) renderedValue = render(value);
+
+    return (
+      <StyledTableCell key={cellKey} align="left">
+        {renderedValue}
+      </StyledTableCell>
+    );
+  };
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 700 }} aria-label="customized table">
+        <TableHead>
+          <TableRow>
+            {configuration.map((header: CustomTableConfiguration) => (
+              <StyledTableCell key={header.key}>{header.label}</StyledTableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((data: any, rowIndex: number) => (
+            <StyledTableRow key={rowIndex}>
+              {configuration.map((column: CustomTableConfiguration) => {
+                const cellValue: any = data[column.key];
+                const cellKey = column.key;
+                const renderComponent = column?.render;
+                return renderTableCell(cellValue, cellKey, renderComponent);
+              })}
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default CustomTable;

pkgs/ui/src/components/table/style.tsx

@@ -0,0 +1,23 @@
+import { styled } from "@mui/material/styles";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+
+export const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+export const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  "&:nth-of-type(odd)": {
+    backgroundColor: theme.palette.action.hover,
+  },
+  // hide last border
+  "&:last-child td, &:last-child th": {
+    border: 0,
+  },
+}));

pkgs/ui/src/mock/access-point/index.ts

@@ -0,0 +1,92 @@
+// 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",
+    end_point: "URL",
+    producer: "C1",
+    producer_DID: "did:sov:test:1234",
+    network: "Carlo's Home Network",
+  },
+  {
+    service_name: "Jeff's Printing",
+    service_type: "3D Printing",
+    end_point: "URL",
+    producer: "C2",
+    producer_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: "end_point",
+    label: "End point",
+  },
+  {
+    key: "producer",
+    label: "Producer",
+  },
+  {
+    key: "producer_DID",
+    label: "Producer DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];

pkgs/ui/src/mock/dlg/index.ts

@@ -0,0 +1,33 @@
+export const DLGResolutionDummyData = [
+  {
+    requester_name: "C1",
+    requester_DID: "did:sov:test:1234",
+    DID_resolved: "did:sov:test:1234",
+    timestamp: "2023.11.01 17:05:45",
+  },
+  {
+    requester_name: "C2",
+    requester_DID: "did:sov:test:5678",
+    DID_resolved: "did:sov:test:5678",
+    timestamp: "2023.12.01 15:05:50",
+  },
+];
+
+export const DLGResolutionTableConfig = [
+  {
+    key: "requester_name",
+    label: "Requester name",
+  },
+  {
+    key: "requester_DID",
+    label: "Requester DID",
+  },
+  {
+    key: "DID_resolved",
+    label: "DID resolved",
+  },
+  {
+    key: "timestamp",
+    label: "Timestamp",
+  },
+];

pkgs/ui/src/types/index.ts

@@ -0,0 +1,10 @@
+export interface CustomTableConfiguration {
+  key: string;
+  label: string;
+  render?: (param: any) => void;
+}
+
+export interface ICustomTable {
+  configuration: CustomTableConfiguration[];
+  data: any;
+}