pkgs/ui/src/app/client-1/page.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import SummaryDetails from "@/components/summary_card";
-import { Client1SummaryDetails } from "@/mock/client_1";
+import {
+  Client1SummaryDetails,
+  Client1ConsumerData,
+  Client1ConsumerTableConfig,
+  Client1ProducerTableConfig,
+  Client1ProducerData,
+} from "@/mock/client_1";
+import CustomTable from "@/components/table";
 
 export default function Client1() {
   return (
@@ -14,6 +21,20 @@ export default function Client1() {
           details: Client1SummaryDetails,
         }}
       />
+      <div>
+        <h4>Consumer View</h4>
+        <CustomTable
+          data={Client1ConsumerData}
+          configuration={Client1ConsumerTableConfig}
+        />
+      </div>
+      <div>
+        <h4>Producer View</h4>
+        <CustomTable
+          data={Client1ProducerData}
+          configuration={Client1ProducerTableConfig}
+        />
+      </div>
     </div>
   );
 }

pkgs/ui/src/app/client-2/page.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import SummaryDetails from "@/components/summary_card";
-import { Client2SummaryDetails } from "@/mock/client_2";
+import {
+  Client2ConsumerData,
+  Client2ConsumerTableConfig,
+  Client2ProducerData,
+  Client2ProducerTableConfig,
+  Client2SummaryDetails,
+} from "@/mock/client_2";
+import CustomTable from "@/components/table";
 
 export default function Client1() {
   return (
@@ -14,6 +21,20 @@ export default function Client1() {
           details: Client2SummaryDetails,
         }}
       />
+      <div>
+        <h4>Consumer View</h4>
+        <CustomTable
+          data={Client2ConsumerData}
+          configuration={Client2ConsumerTableConfig}
+        />
+      </div>
+      <div>
+        <h4>Producer View</h4>
+        <CustomTable
+          data={Client2ProducerData}
+          configuration={Client2ProducerTableConfig}
+        />
+      </div>
     </div>
   );
 }

pkgs/ui/src/app/home/page.tsx

@@ -3,6 +3,7 @@
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
+import { HomeDummyData, HomeTableConfig } from "@/mock/home";
 
 export default function Home() {
   return (
@@ -15,7 +16,7 @@ export default function Home() {
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={[]} configuration={[]} />
+        <CustomTable data={HomeDummyData} configuration={HomeTableConfig} />
       </div>
 
       <div>

pkgs/ui/src/app/layout.tsx

@@ -50,7 +50,7 @@ export default function RootLayout({
         <title>Service Aware Networks</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Service Aware Networks" />
-        <link rel="icon" href="favicon.ico" sizes="any" />
+        <link rel="icon" href="tub-favicon.ico" sizes="any" />
       </head>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>
@@ -88,8 +88,8 @@ export default function RootLayout({
                               </div>
                               <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
                                 <Image
-                                  src="/favicon.png"
+                                  src="/tub-favicon.png"
-                                  alt="TUB Logo"
+                                  alt="TU Berlin Logo"
                                   width={58}
                                   height={58}
                                   priority

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

@@ -11,6 +11,7 @@ import Image from "next/image";
 import React, { ReactNode } from "react";
 
 import { tw } from "@/utils/tailwind";
+import Collapse from "@mui/material/Collapse";
 import Link from "next/link";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import HomeIcon from "@mui/icons-material/Home";
@@ -18,6 +19,8 @@ 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";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
 
 type MenuEntry = {
   icon: ReactNode;
@@ -28,6 +31,21 @@ type MenuEntry = {
   subMenuEntries?: MenuEntry[];
 };
 
+const menuEntityEntries: MenuEntry[] = [
+  {
+    icon: <PersonIcon />,
+    label: "C1",
+    to: "/client-1",
+    disabled: false,
+  },
+  {
+    icon: <PersonIcon />,
+    label: "C2",
+    to: "/client-2",
+    disabled: false,
+  },
+];
+
 const menuEntries: MenuEntry[] = [
   {
     icon: <HomeIcon />,
@@ -39,18 +57,6 @@ const menuEntries: MenuEntry[] = [
     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,
   },
   {
@@ -74,10 +80,17 @@ interface SidebarProps {
   show: boolean;
   onClose: () => void;
 }
+
 export function Sidebar(props: SidebarProps) {
   const { show, onClose } = props;
+  const [activeMenuItem, setActiveMenuItem] = React.useState(
+    typeof window !== "undefined" ? window.location.pathname : "",
+  );
+  const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true);
 
-  const [activeMenuItem, setActiveMenuItem] = React.useState("/");
+  const handleCollapseClick = () => {
+    setCollapseMenuOpen(!collapseMenuOpen);
+  };
 
   const handleMenuItemClick = (path: string) => {
     setActiveMenuItem(path);
@@ -93,10 +106,10 @@ export function Sidebar(props: SidebarProps) {
       <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"
+            src="/tub-logo.png"
-            alt="TUB Logo"
+            alt="TU Berlin Logo"
-            width={75}
+            width={125}
-            height={75}
+            height={90}
             priority
           />
         </div>
@@ -119,6 +132,7 @@ export function Sidebar(props: SidebarProps) {
                 disablePadding
                 className="!overflow-hidden py-2"
               >
+                {menuEntry.label !== "Entities" ? (
                   <ListItemButton
                     className="justify-center lg:justify-normal"
                     LinkComponent={Link}
@@ -141,6 +155,65 @@ export function Sidebar(props: SidebarProps) {
                       className="hidden lg:block"
                     />
                   </ListItemButton>
+                ) : (
+                  <div>
+                    <ListItemButton
+                      className="justify-center lg:justify-normal"
+                      disabled={menuEntry.disabled}
+                      selected={activeMenuItem === menuEntry.to}
+                      onClick={handleCollapseClick}
+                    >
+                      <ListItemIcon
+                        color="inherit"
+                        className="justify-center overflow-hidden text-white lg:justify-normal"
+                      >
+                        {menuEntry.icon}
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={menuEntry.label}
+                        primaryTypographyProps={{
+                          color: "inherit",
+                        }}
+                        className="hidden lg:block"
+                      />
+                      {collapseMenuOpen ? <ExpandLess /> : <ExpandMore />}
+                    </ListItemButton>
+                    <Collapse
+                      in={collapseMenuOpen}
+                      timeout="auto"
+                      unmountOnExit
+                    >
+                      <List component="div" disablePadding>
+                        {menuEntityEntries.map((menuEntry, idx) => (
+                          <ListItemButton
+                            key={idx}
+                            sx={{ pl: 4 }}
+                            className="justify-center lg:justify-normal"
+                            LinkComponent={Link}
+                            href={menuEntry.to}
+                            disabled={menuEntry.disabled}
+                            selected={activeMenuItem === menuEntry.to}
+                            onClick={() => handleMenuItemClick(menuEntry.to)}
+                          >
+                            <ListItemIcon
+                              color="inherit"
+                              className="justify-center overflow-hidden text-white lg:justify-normal"
+                            >
+                              {menuEntry.icon}
+                            </ListItemIcon>
+                            <ListItemText
+                              primary={menuEntry.label}
+                              primaryTypographyProps={{
+                                color: "inherit",
+                              }}
+                              className="hidden lg:block"
+                            />
+                          </ListItemButton>
+                        ))}
+                      </List>
+                    </Collapse>
+                  </div>
+                )}
               </ListItem>
             );
           })}

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

@@ -9,6 +9,7 @@ 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";
 
 const CustomTable = ({ configuration, data }: ICustomTable) => {
   // display empty icon in case there is no data
@@ -25,6 +26,10 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
     // cover use case if the data is an array
     if (Array.isArray(value)) renderedValue = value.join(", ");
 
+    // cover use case if the data is an boolean
+    if (typeof value === "boolean")
+      renderedValue = <Checkbox disabled checked={value} />;
+
     // cover use case if we want to render a component
     if (render) renderedValue = render(value);
 

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

@@ -14,3 +14,127 @@ export const Client1SummaryDetails = [
     value: "Carlo's Home Network",
   },
 ];
+
+export const Client1ConsumerData = [
+  {
+    service_name: "Carlo's Printing",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_did: "did:sov:test:1223",
+    network: "Carlo's Home Network",
+  },
+  {
+    service_name: "Steve's Printing",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_did: "did:sov:test:1234",
+    network: "Steve's Home Network",
+  },
+  {
+    service_name: "Test A",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_did: "did:sov:test:4567",
+    network: "Test Network A",
+  },
+  {
+    service_name: "Test B",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_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: "end_point",
+    label: "End Point",
+  },
+  {
+    key: "producer",
+    label: "Producer",
+  },
+  {
+    key: "producer_did",
+    label: "Producer DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];
+
+export const Client1ProducerData = [
+  {
+    service_name: "Carlo's Printing",
+    service_type: "3D Printing",
+    end_point: "URL",
+    usage: "C1(3), C3(4)",
+    status: "DRAFT, REGISTERED",
+    action: "Register, Deregister, Delete",
+  },
+  {
+    service_name: "Steve's Printing",
+    service_type: "3D Printing",
+    end_point: "URL",
+    usage: "C1(3), C3(4)",
+    status: "REGISTERED",
+    action: "Create",
+  },
+  {
+    service_name: "Test Printing A",
+    service_type: "3D Printing",
+    end_point: "URL",
+    usage: "C1(3), C3(4)",
+    status: "DRAFT",
+    action: "Register, Deregister",
+  },
+  {
+    service_name: "Test Printing B",
+    service_type: "3D Printing",
+    end_point: "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: "end_point",
+    label: "End Point",
+  },
+  {
+    key: "usage",
+    label: "Usage",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "action",
+    label: "Action",
+  },
+];

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

@@ -14,3 +14,127 @@ export const Client2SummaryDetails = [
     value: "Carlo's Home Network",
   },
 ];
+
+export const Client2ConsumerData = [
+  {
+    service_name: "Carlo's Printing",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_did: "did:sov:test:1223",
+    network: "Carlo's Home Network",
+  },
+  {
+    service_name: "Steve's Printing",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_did: "did:sov:test:1234",
+    network: "Steve's Home Network",
+  },
+  {
+    service_name: "Test A",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_did: "did:sov:test:4567",
+    network: "Test Network A",
+  },
+  {
+    service_name: "Test B",
+    service_type: "3D Printing",
+    end_point: "Consume",
+    producer: "C2",
+    producer_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: "end_point",
+    label: "End Point",
+  },
+  {
+    key: "producer",
+    label: "Producer",
+  },
+  {
+    key: "producer_did",
+    label: "Producer DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+];
+
+export const Client2ProducerData = [
+  {
+    service_name: "Carlo's Printing",
+    service_type: "3D Printing",
+    end_point: "URL",
+    usage: "C1(3), C3(4)",
+    status: "DRAFT, REGISTERED",
+    action: "Register, Deregister, Delete",
+  },
+  {
+    service_name: "Steve's Printing",
+    service_type: "3D Printing",
+    end_point: "URL",
+    usage: "C1(3), C3(4)",
+    status: "REGISTERED",
+    action: "Create",
+  },
+  {
+    service_name: "Test Printing A",
+    service_type: "3D Printing",
+    end_point: "URL",
+    usage: "C1(3), C3(4)",
+    status: "DRAFT",
+    action: "Register, Deregister",
+  },
+  {
+    service_name: "Test Printing B",
+    service_type: "3D Printing",
+    end_point: "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: "end_point",
+    label: "End Point",
+  },
+  {
+    key: "usage",
+    label: "Usage",
+  },
+  {
+    key: "status",
+    label: "Status",
+  },
+  {
+    key: "action",
+    label: "Action",
+  },
+];

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

@@ -0,0 +1,47 @@
+// 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: "entity_name",
+    label: "Entity name",
+  },
+  {
+    key: "entity_DID",
+    label: "Entity DID",
+  },
+  {
+    key: "network",
+    label: "Network",
+  },
+  {
+    key: "ip_address",
+    label: "IP address",
+  },
+  {
+    key: "roles",
+    label: "Roles",
+  },
+  {
+    key: "visible",
+    label: "Visible",
+  },
+];