major changes in the layout and added most components

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

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Button, Snackbar } from "@mui/material";
+
+const CopyToClipboard = ({ contentRef }: { contentRef: any }) => {
+  const [open, setOpen] = useState(false);
+  const handleClick = () => {
+    if (contentRef.current) {
+      const text = contentRef.current.textContent;
+      navigator.clipboard.writeText(text);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={handleClick}>Copy</Button>
+      <Snackbar
+        open={open}
+        onClose={() => setOpen(false)}
+        autoHideDuration={2000}
+        message="Copied to clipboard"
+      />
+    </>
+  );
+};
+export default CopyToClipboard;

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

@@ -35,7 +35,7 @@ interface NoDataOverlayProps {
 export function NoDataOverlay(props: NoDataOverlayProps) {
   const { label } = props;
   return (
-    <StyledGridOverlay className="block p-2">
+    <StyledGridOverlay className="p-2">
       <svg
         width="120"
         height="100"

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

@@ -85,6 +85,7 @@ export function Sidebar(props: SidebarProps) {
 
   return (
     <aside
+      style={{ backgroundColor: "#00497c" }}
       className={tw`${
         show ? showSidebar : hideSidebar
       } z-9999 static left-0  top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}

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

@@ -0,0 +1,60 @@
+"use client";
+import { useRef } from "react";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+} from "@mui/material";
+import { EntityDetails, ISummaryDetails } from "@/types";
+
+const SummaryDetails = ({
+  entity,
+  hasRefreshButton,
+  hasAttachDetach,
+}: ISummaryDetails) => {
+  const cardContentRef = useRef(null);
+  const hasDetails = entity.details && entity.details.length > 0;
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <h2>{entity.name}</h2>
+        <div>
+          {hasAttachDetach && (
+            <Button className="mr-6" variant="contained">
+              Attach / Detach
+            </Button>
+          )}
+          {hasRefreshButton && <Button variant="contained">Refresh</Button>}
+        </div>
+      </div>
+      {hasDetails && (
+        <Card variant="outlined">
+          <CardHeader
+            subheader="Summary"
+            action={<CopyToClipboard contentRef={cardContentRef} />}
+          />
+          <CardContent ref={cardContentRef}>
+            {entity.details.map((info: EntityDetails) => {
+              return (
+                <Typography color="text.primary" gutterBottom>
+                  {info.label}: <code>{info.value}</code>
+                </Typography>
+              );
+            })}
+          </CardContent>
+        </Card>
+      )}
+    </>
+  );
+};
+export default SummaryDetails;

pkgs/ui/src/components/table/style.tsx

@@ -4,7 +4,8 @@ import TableRow from "@mui/material/TableRow";
 
 export const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
-    backgroundColor: theme.palette.common.black,
+    // backgroundColor: theme.palette.common.black,
+    backgroundColor: "#003258",
     color: theme.palette.common.white,
   },
   [`&.${tableCellClasses.body}`]: {