final changes and fixes added

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

@@ -133,7 +133,7 @@ const SequenceDiagram = () => {
     <div className="flex flex-col items-end">
       {hasData ? (
         <>
-          <div className="flex justify-end gap-2.5 mb-5">
+          <div className="flex justify-end">
             <Tooltip placement="top" title="Refresh Diagram">
               <IconButton color="default" onClick={onRefresh}>
                 <RefreshIcon />
@@ -170,7 +170,7 @@ const SequenceDiagram = () => {
           </div>
         </>
       ) : (
-        <div className="flex w-full justify-center items-center">
+        <div className="flex w-full justify-center">
           <NoDataOverlay label="No Activity yet" />
         </div>
       )}

pkgs/ui/src/config/access_point/index.tsx

@@ -59,22 +59,31 @@ export const APServiceRepositoryTableConfig = [
   {
     key: "status",
     label: "Status",
-  },
-  {
-    key: "other",
-    label: "Type",
     render: (value: any) => {
       let renderedValue: any = "";
-      if (typeof value === "object") {
+      if (Array.isArray(value.data)) {
-        const label = Object.keys(value)[0];
+        renderedValue = value.data.join(", ");
-        const info = value[label];
+      } else {
-        renderedValue = (
+        console.error("Status is not an array", value);
-          <code>
-            {label} {info}
-          </code>
-        );
       }
       return renderedValue;
     },
   },
+  // {
+  //   key: "other",
+  //   label: "Type",
+  //   render: (value: any) => {
+  //     let renderedValue: any = "";
+  //     if (typeof value === "object") {
+  //       const label = Object.keys(value)[0];
+  //       const info = value[label];
+  //       renderedValue = (
+  //         <code>
+  //           {label} {info}
+  //         </code>
+  //       );
+  //     }
+  //     return renderedValue;
+  //   },
+  // },
 ];

pkgs/ui/src/config/client_1/index.tsx

@@ -1,4 +1,7 @@
-import { Button } from "@mui/material";
+import { Button, IconButton, Tooltip } from "@mui/material";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 export const ClientTableConfig = [
   {
@@ -51,6 +54,24 @@ export const ServiceTableConfig = [
     key: "entity_did",
     label: "Entity DID",
   },
+  {
+    key: "usage",
+    label: "Usage",
+    render: (value: any) => {
+      let renderedValue = "";
+
+      if (value.length > 0) {
+        renderedValue = value.map((item: any, index: number) => {
+          return (
+            <div key={index}>
+              {item.consumer_entity_did} ({item.times_consumed})
+            </div>
+          );
+        });
+      }
+      return renderedValue;
+    },
+  },
   {
     key: "status",
     label: "Status",
@@ -66,21 +87,40 @@ export const ServiceTableConfig = [
   },
   {
     key: "action",
-    label: "Action",
+    label: "Actions",
-    render: (value: any) => {
+    render: () => {
-      let renderedValue: any = "";
+      return (
-      console.log("value", value.data);
+        <>
-      if (typeof value === "object")
+          <Tooltip title="Register" placement="top">
-        renderedValue = (
+            <IconButton disabled size="small">
-          <>
+              <AddCircleIcon />
-            {value.data.map((actionType: any) => (
+            </IconButton>
-              <>
+          </Tooltip>
-                <Button>{actionType.name}</Button>
+
-              </>
+          <Tooltip title="De-register" placement="top">
-            ))}
+            <IconButton disabled size="small">
-          </>
+              <RemoveCircleIcon />
-        );
+            </IconButton>
-      return renderedValue;
+          </Tooltip>
+          <Tooltip title="Delete" placement="top">
+            <IconButton disabled size="small" color="secondary">
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </>
+      );
+      // let renderedValue: any = "";
+      // if (typeof value === "object")
+      //   renderedValue = (
+      //     <>
+      //       {[...value.data, { name: 'Delete', endpoint: '' }].map((actionType: any) => (
+      //         <>
+      //           <Button disabled style={{ marginRight: 8 }} variant="outlined" size="small">{actionType.name}</Button>
+      //         </>
+      //       ))}
+      //     </>
+      //   );
+      // return renderedValue;
     },
   },
 ];