add: some util to dashboard

pkgs/ui/src/components/dashboard/NetworkOverview/index.tsx

@@ -0,0 +1,74 @@
+import { DashboardCard } from "@/components/card";
+import { NoDataOverlay } from "@/components/noDataOverlay";
+import { status, Status, clanStatus } from "@/data/dashboardData";
+import {
+  Chip,
+  Divider,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import Link from "next/link";
+import React from "react";
+
+const statusColorMap: Record<
+  Status,
+  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
+> = {
+  online: "info",
+  offline: "error",
+  pending: "default",
+};
+
+const MAX_OTHERS = 5;
+
+export const NetworkOverview = () => {
+  const { self, other } = clanStatus;
+
+  const firstOthers = other.slice(0, MAX_OTHERS);
+  return (
+    <DashboardCard title="Clan Overview">
+      <List>
+        <ListItem>
+          <ListItemText primary={self.name} secondary={self.status} />
+          <ListItemIcon>
+            <Chip
+              label={status[self.status]}
+              color={statusColorMap[self.status]}
+            />
+          </ListItemIcon>
+        </ListItem>
+        <Divider flexItem />
+        {!other.length && (
+          <div className="my-3 flex h-full w-full justify-center align-middle">
+            <NoDataOverlay
+              label={
+                <ListItemText
+                  primary="No other nodes"
+                  secondary={<Link href="/nodes">Add devices</Link>}
+                />
+              }
+            />
+          </div>
+        )}
+        {firstOthers.map((o) => (
+          <ListItem key={o.id}>
+            <ListItemText primary={o.name} secondary={o.status} />
+            <ListItemIcon>
+              <Chip label={status[o.status]} color={statusColorMap[o.status]} />
+            </ListItemIcon>
+          </ListItem>
+        ))}
+        {other.length > MAX_OTHERS && (
+          <ListItem>
+            <ListItemText
+              secondary={` ${other.length - MAX_OTHERS} more ...`}
+            />
+          </ListItem>
+        )}
+      </List>
+    </DashboardCard>
+  );
+};

pkgs/ui/src/components/dashboard/activity/index.tsx

@@ -0,0 +1,12 @@
+import { DashboardCard } from "@/components/card";
+import { NoDataOverlay } from "@/components/noDataOverlay";
+
+export const RecentActivity = () => {
+  return (
+    <DashboardCard title="Recent Activity">
+      <div className="flex h-full w-full justify-center align-middle">
+        <NoDataOverlay label="No Activity yet" />
+      </div>
+    </DashboardCard>
+  );
+};

pkgs/ui/src/components/dashboard/notifications/index.tsx

@@ -0,0 +1,73 @@
+import { DashboardCard } from "@/components/card";
+import { notificationData } from "@/data/dashboardData";
+import { tw } from "@/utils/tailwind";
+import {
+  Avatar,
+  Chip,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import { Label } from "recharts";
+
+import CheckIcon from "@mui/icons-material/Check";
+import InfoIcon from "@mui/icons-material/Info";
+import PriorityHighIcon from "@mui/icons-material/PriorityHigh";
+import CloseIcon from "@mui/icons-material/Close";
+
+const severityMap = {
+  info: {
+    icon: <InfoIcon />,
+    color: "info",
+  },
+  success: {
+    icon: <CheckIcon />,
+    color: "success",
+  },
+  warning: {
+    icon: <PriorityHighIcon />,
+    color: "warning",
+  },
+  error: {
+    icon: <CloseIcon />,
+    color: "error",
+  },
+};
+
+export const Notifications = () => {
+  return (
+    <DashboardCard title="Notifications">
+      <List>
+        {notificationData.map((n, idx) => (
+          <ListItem key={idx}>
+            <ListItemAvatar>
+              <Avatar
+                sx={{
+                  bgcolor: `${n.severity}.main`,
+                }}
+              >
+                {severityMap[n.severity].icon}
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={n.msg}
+              secondary={n.date}
+              sx={{
+                width: "100px",
+              }}
+            />
+            <ListItemText
+              primary={n.source}
+              sx={{
+                width: "100px",
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </DashboardCard>
+  );
+};