[Homepage] Table View

- implemented home view table and added checkbox component

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/components/table/index.tsx

@@ -6,14 +6,15 @@ 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";
+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) => {
+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" />;
+        return <NoDataOverlay label="No Activity yet"/>;
 
     const renderTableCell = (
         value: any,
@@ -25,6 +26,9 @@ 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);
 
@@ -37,7 +41,7 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
 
     return (
         <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 700 }} aria-label="customized table">
+            <Table sx={{minWidth: 700}} aria-label="customized table">
                 <TableHead>
                     <TableRow>
                         {configuration.map((header: CustomTableConfiguration) => (

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",
+    },
+];