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

@@ -4,6 +4,8 @@ import SummaryDetails from "@/components/summary_card";
 import {
     Client2ConsumerData,
     Client2ConsumerTableConfig,
+    Client2ProducerData,
+    Client2ProducerTableConfig,
     Client2SummaryDetails
 } from "@/mock/client_2";
 import CustomTable from "@/components/table";
@@ -26,6 +28,13 @@ export default function Client1() {
                 configuration={Client2ConsumerTableConfig}
             />
         </div>
+        <div>
+            <h4>Producer View</h4>
+            <CustomTable
+                data={Client2ProducerData}
+                configuration={Client2ProducerTableConfig}
+            />
+        </div>
     </div>
   );
 }

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

@@ -75,4 +75,66 @@ export const Client2ConsumerTableConfig = [
     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"
+  }
+]