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

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

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

@@ -14,3 +14,65 @@ 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"
+  }
+]