final changes and fixes added

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",
-    render: (value: any) => {
-      let renderedValue: any = "";
-      console.log("value", value.data);
-      if (typeof value === "object")
-        renderedValue = (
-          <>
-            {value.data.map((actionType: any) => (
-              <>
-                <Button>{actionType.name}</Button>
-              </>
-            ))}
-          </>
-        );
-      return renderedValue;
+    label: "Actions",
+    render: () => {
+      return (
+        <>
+          <Tooltip title="Register" placement="top">
+            <IconButton disabled size="small">
+              <AddCircleIcon />
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="De-register" placement="top">
+            <IconButton disabled size="small">
+              <RemoveCircleIcon />
+            </IconButton>
+          </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;
     },
   },
 ];