15 changed files with 353 additions and 38 deletions
--- a/pkgs/ui/src/app/access-point/page.tsx
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import {RecentActivity} from "@/components/dashboard/activity";
+import {APServiceRepositoryDummyData, APServiceRepositoryTableConfig} from "@/mock/ap/serviceRepository";
+import {APAttachmentsDummyData, APAttachmentsTableConfig} from "@/mock/ap/attachmentData";
+
+export default function AccessPoint() {
+    return (
+        <div>
+            <RecentActivity title={"Attachments"} data={APAttachmentsDummyData}
+                            configuration={APAttachmentsTableConfig}/><br/>
+            <RecentActivity title={"Service Repository"} data={APServiceRepositoryDummyData}
+                            configuration={APServiceRepositoryTableConfig}/>
+        </div>
+    )
+}
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import {RecentActivity} from "@/components/dashboard/activity";
+import {DLGResolutionDummyData, DLGResolutionTableConfig} from "@/mock/dlg/attachmentData";
+
+export default function DLG() {
+    return (
+        <div>
+            <RecentActivity title={"DID Resolution"} data={DLGResolutionDummyData}
+                            configuration={DLGResolutionTableConfig}/><br/>
+        </div>
+    )
+}
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -47,9 +47,9 @@ export default function RootLayout({
  return (
    <html lang="en">
      <head>
-        <title>Clan.lol</title>
+        <title>Service-Aware Networks</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="Clan.lol - build your own network" />
+        <meta name="description" content="Service-Aware Networks" />
        <link rel="icon" href="favicon.ico" sizes="any" />
      </head>
      <StyledEngineProvider injectFirst>
@@ -72,9 +72,8 @@ export default function RootLayout({
                          onClose={() => setShowSidebar(false)}
                        />
                        <div
-                          className={tw`${
-                            !showSidebarDerived && translate
-                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
+                          className={tw`${!showSidebarDerived && translate
+                            } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                        >
                          <div className="static top-0 mb-2 py-2">
                            <div className="grid grid-cols-3">
@@ -89,7 +88,7 @@ export default function RootLayout({
                              <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
                                <Image
                                  src="/favicon.png"
-                                  alt="Clan Logo"
+                                  alt="TUB Logo"
                                  width={58}
                                  height={58}
                                  priority
--- a/pkgs/ui/src/app/page.tsx
+++ b/pkgs/ui/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Dashboard() {
      <div className="grid h-full place-items-center">
        <div className="mt-8 w-full max-w-xl">
          <LoadingOverlay
-            title="Clan Experience"
+            title="Service-Aware Networks"
            subtitle="Loading"
            variant="circle"
          />
--- a/pkgs/ui/src/app/theme/themes.ts
+++ b/pkgs/ui/src/app/theme/themes.ts
@@ -4,7 +4,8 @@ import {
  createTheme,
 } from "@mui/material/styles";

-import colors from "@clan/colors/colors.json";
+// import colors from "@clan/colors/colors.json";
+import colors from "../../../../theme/src/colors.json";
 const { palette, common } = colors.ref;

 const commonOptions: Partial<ThemeOptions> = {
@@ -46,8 +47,8 @@ export const darkTheme = createTheme({
    mode: "dark",
    ...commonPalette,
    background: {
-      default: palette.neutral2.value,
-      paper: palette.neutral5.value,
+      default: palette.neutral20.value,
+      paper: palette.neutral50.value,
    },
    common: {
      black: common.black.value,
--- a/pkgs/ui/src/components/dashboard/activity/index.tsx
+++ b/pkgs/ui/src/components/dashboard/activity/index.tsx
@@ -1,12 +1,26 @@
-import { DashboardCard } from "@/components/card";
-import { NoDataOverlay } from "@/components/noDataOverlay";
+import {DashboardCard} from "@/components/card";
+import {NoDataOverlay} from "@/components/noDataOverlay";
+import {ReactNode} from "react";
+import CustomTable from "@/components/table";
+import {ICustomTable} from "@/types";

-export const RecentActivity = () => {
-  return (
-    <DashboardCard title="Recent Activity">
-      <div className="flex w-full justify-center align-middle">
-        <NoDataOverlay label="No Activity yet" />
-      </div>
-    </DashboardCard>
-  );
+interface DashboardCardProps {
+    title: ReactNode;
+    data: ReactNode;
+    configuration: ICustomTable;
+}
+
+export const RecentActivity = (props: DashboardCardProps) => {
+    const {title, data, configuration} = props;
+    return (
+        <DashboardCard title={title}>
+            {/*<div className="flex w-full justify-center align-middle">*/}
+            {/*    <NoDataOverlay label="No Activity yet"/>*/}
+            {/*</div>*/}
+
+            <div>
+                <CustomTable data={data} configuration={configuration}/>
+            </div>
+        </DashboardCard>
+    );
 };
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@@ -8,13 +8,17 @@ import {
  ListItemText,
 } from "@mui/material";
 import Image from "next/image";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";

 import { tw } from "@/utils/tailwind";
-import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
+
 import Link from "next/link";
-import WysiwygIcon from "@mui/icons-material/Wysiwyg";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import HomeIcon from '@mui/icons-material/Home';
+import HubIcon from '@mui/icons-material/Hub';
+import PersonIcon from '@mui/icons-material/Person';
+import RouterIcon from '@mui/icons-material/Router';
+import StorageIcon from '@mui/icons-material/Storage';

 type MenuEntry = {
  icon: ReactNode;
@@ -27,17 +31,41 @@ type MenuEntry = {

 const menuEntries: MenuEntry[] = [
  {
-    icon: <AssignmentIndIcon />,
-    label: "Freelance",
+    icon: <HomeIcon />,
+    label: "Home",
    to: "/",
    disabled: false,
  },
  {
-    icon: <WysiwygIcon />,
-    label: "Blog",
-    to: "/blog",
+    icon: <HubIcon />,
+    label: "Entities",
+    to: "/entities",
    disabled: true,
  },
+  {
+    icon: <PersonIcon />,
+    label: "C1",
+    to: "/client-1",
+    disabled: false,
+  },
+  {
+    icon: <PersonIcon />,
+    label: "C2",
+    to: "/client-2",
+    disabled: false,
+  },
+  {
+    icon: <RouterIcon />,
+    label: "AP",
+    to: "/access-point",
+    disabled: false,
+  },
+  {
+    icon: <StorageIcon />,
+    label: "DLG",
+    to: "/distributed-ledger-gateway",
+    disabled: false,
+  }
 ];

 const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
@@ -50,17 +78,22 @@ interface SidebarProps {
 export function Sidebar(props: SidebarProps) {
  const { show, onClose } = props;

+  const [activeMenuItem, setActiveMenuItem] = React.useState('/');
+
+  const handleMenuItemClick = (path: string) => {
+    setActiveMenuItem(path);
+  };
+
  return (
    <aside
-      className={tw`${
-        show ? showSidebar : hideSidebar
-      } z-9999 static left-0  top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
+      className={tw`${show ? showSidebar : hideSidebar
+        } z-9999 static left-0  top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
    >
      <div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
        <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
          <Image
            src="/logo.png"
-            alt="Clan Logo"
+            alt="TUB Logo"
            width={75}
            height={75}
            priority
@@ -90,6 +123,8 @@ export function Sidebar(props: SidebarProps) {
                  LinkComponent={Link}
                  href={menuEntry.to}
                  disabled={menuEntry.disabled}
+                  selected={activeMenuItem === menuEntry.to}
+                  onClick={() => handleMenuItemClick(menuEntry.to)}
                >
                  <ListItemIcon
                    color="inherit"
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/pkgs/ui/src/components/table/index.tsx
@@ -0,0 +1,66 @@
+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 { CustomTableConfiguration, ICustomTable } 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;
--- a/pkgs/ui/src/components/table/style.tsx
+++ b/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,
+  },
+}));
--- a/pkgs/ui/src/mock/ap/attachmentData.tsx
+++ b/pkgs/ui/src/mock/ap/attachmentData.tsx
@@ -0,0 +1,44 @@
+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"
+    }
+]
--- a/pkgs/ui/src/mock/ap/serviceRepository.tsx
+++ b/pkgs/ui/src/mock/ap/serviceRepository.tsx
@@ -0,0 +1,44 @@
+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"
+    },
+]
--- a/pkgs/ui/src/mock/dlg/attachmentData.tsx
+++ b/pkgs/ui/src/mock/dlg/attachmentData.tsx
@@ -0,0 +1,34 @@
+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"
+    }
+]
--- a/pkgs/ui/src/types/index.ts
+++ b/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
+}
--- a/pkgs/ui/tailwind.config.js
+++ b/pkgs/ui/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 import colors from "@clan/colors/colors.json";
+// import colors from "../theme/src/colors.json";

 const {
  ref: { palette, common },
--- a/pkgs/ui/tsconfig.json
+++ b/pkgs/ui/tsconfig.json
@@ -1,7 +1,11 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
@@ -21,10 +25,21 @@
      }
    ],
    "paths": {
-      "@/*": ["./src/*"],
-      "@API/*": ["./src/api/*"]
+      "@/*": [
+        "./src/*"
+      ],
+      "@API/*": [
+        "./src/api/*"
+      ]
    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }