add: some util to dashboard

pkgs/ui/README.md

@@ -1,5 +1,22 @@
 # cLan - awesome UI
 
+## Prettier
+
+To use prettier and the plugins using vscode/vscodium the `prettier.config.js` needs to be at the root level of the editor's file explorer
+
+`cd clan-core/pkgs/ui && code .`
+
+When inspecting `OUTPUT > Prettier` the config should've been loaded:
+
+```sh
+["INFO" - 1:47:43 PM] Formatting completed in 48ms.
+["INFO" - 1:48:07 PM] Using config file at '.../clan-core/pkgs/ui/prettier.config.cjs'
+```
+
+If you have enabled `formatOnSave` the tailwind classes should get sorted into the officially recommended order.
+
+`prettier -w ./src/ --config prettier.config.cjs`
+
 ## Commands
 
 After changing dependencies with
@@ -17,4 +34,3 @@ To sort classnames manually:
 
 `cd /clan-core/pkgs/ui/`
 
-`prettier -w ./src/ --config pconf.cjs`

pkgs/ui/prettier.config.cjs

@@ -0,0 +1,4 @@
+// prettier.config.js
+module.exports = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};

pkgs/ui/src/app/layout.tsx

@@ -71,7 +71,7 @@ export default function RootLayout({
               <div
                 className={tw`${
                   !showSidebar && translate
-                } flex h-full w-full flex-col transition-[margin] ease-in-out duration-150`}
+                } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
               >
                 <div className="min-h-10 static top-0 mb-2 py-2">
                   <div className="grid grid-cols-3">
@@ -96,7 +96,7 @@ export default function RootLayout({
                 </div>
 
                 <div className="px-1">
-                  <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+                  <div className="relative flex flex-1 flex-col overflow-x-hidden">
                     <main>{children}</main>
                   </div>
                 </div>

pkgs/ui/src/app/nodes/NodeList.tsx

@@ -38,19 +38,7 @@ import {
 } from "@mui/material";
 import hexRgb from "hex-rgb";
 import useMediaQuery from "@mui/material/useMediaQuery";
-
-export interface TableData {
-  name: string;
-  id: string;
-  status: NodeStatus;
-  last_seen: number;
-}
-
-export enum NodeStatus {
-  Online,
-  Offline,
-  Pending,
-}
+import { NodeStatus, TableData } from "@/data/nodeData";
 
 interface HeadCell {
   disablePadding: boolean;

pkgs/ui/src/app/nodes/NodePieChart.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from "react";
+import React from "react";
 import {
   PieChart,
   Pie,

pkgs/ui/src/app/nodes/page.tsx

@@ -1,94 +1,9 @@
 "use client";
 
-import { StrictMode } from "react";
-import NodeList, { NodeStatus, TableData } from "./NodeList";
+import NodeList from "./NodeList";
 
 import Box from "@mui/material/Box";
-
-function createData(
-  name: string,
-  id: string,
-  status: NodeStatus,
-  last_seen: number,
-): TableData {
-  return {
-    name,
-    id,
-    status,
-    last_seen: last_seen,
-  };
-}
-
-const tableData = [
-  createData(
-    "Matchbox",
-    "42:0:f21:6916:e333:c47e:4b5c:e74c",
-    NodeStatus.Pending,
-    0,
-  ),
-  createData(
-    "Ahorn",
-    "42:0:3c46:b51c:b34d:b7e1:3b02:8d24",
-    NodeStatus.Online,
-    0,
-  ),
-  createData(
-    "Yellow",
-    "42:0:3c46:98ac:9c80:4f25:50e3:1d8f",
-    NodeStatus.Offline,
-    16.0,
-  ),
-  createData(
-    "Rauter",
-    "42:0:61ea:b777:61ea:803:f885:3523",
-    NodeStatus.Offline,
-    6.0,
-  ),
-  createData(
-    "Porree",
-    "42:0:e644:4499:d034:895e:34c8:6f9a",
-    NodeStatus.Offline,
-    13,
-  ),
-  createData(
-    "Helsinki",
-    "42:0:3c46:fd4a:acf9:e971:6036:8047",
-    NodeStatus.Online,
-    0,
-  ),
-  createData(
-    "Kelle",
-    "42:0:3c46:362d:a9aa:4996:c78e:839a",
-    NodeStatus.Online,
-    0,
-  ),
-  createData(
-    "Shodan",
-    "42:0:3c46:6745:adf4:a844:26c4:bf91",
-    NodeStatus.Online,
-    0.0,
-  ),
-  createData(
-    "Qubasa",
-    "42:0:3c46:123e:bbea:3529:db39:6764",
-    NodeStatus.Offline,
-    7.0,
-  ),
-  createData(
-    "Green",
-    "42:0:a46e:5af:632c:d2fe:a71d:cde0",
-    NodeStatus.Offline,
-    2,
-  ),
-  createData("Gum", "42:0:e644:238d:3e46:c884:6ec5:16c", NodeStatus.Offline, 0),
-  createData("Xu", "42:0:ca48:c2c2:19fb:a0e9:95b9:794f", NodeStatus.Online, 0),
-  createData(
-    "Zaatar",
-    "42:0:3c46:156e:10b6:3bd6:6e82:b2cd",
-    NodeStatus.Online,
-    0,
-  ),
-];
+import { tableData } from "@/data/nodeData";
 
 export default function Page() {
   return (

pkgs/ui/src/app/page.tsx

@@ -1,10 +1,15 @@
+import { RecentActivity } from "@/components/dashboard/activity";
+import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
+import { Notifications } from "@/components/dashboard/notifications";
+import { QuickActions } from "@/components/quickActions";
+
 interface DashboardCardProps {
   children?: React.ReactNode;
 }
 const DashboardCard = (props: DashboardCardProps) => {
   const { children } = props;
   return (
-    <div className="col-span-full border border-dashed border-slate-400 lg:col-span-1">
+    <div className="col-span-full row-span-1 border border-dashed border-slate-400 lg:col-span-1">
       {children}
     </div>
   );
@@ -16,7 +21,7 @@ interface DashboardPanelProps {
 const DashboardPanel = (props: DashboardPanelProps) => {
   const { children } = props;
   return (
-    <div className="col-span-full border border-dashed border-slate-400 lg:col-span-2">
+    <div className="col-span-full row-span-1 shrink-0 border border-dashed border-slate-400 lg:col-span-2">
       {children}
     </div>
   );
@@ -28,12 +33,12 @@ interface SplitDashboardCardProps {
 const SplitDashboardCard = (props: SplitDashboardCardProps) => {
   const { children } = props;
   return (
-    <div className="col-span-full lg:col-span-1">
+    <div className="col-span-full row-span-1 lg:col-span-1">
       <div className="grid h-full grid-cols-1 gap-4">
         {children?.map((row, idx) => (
           <div
             key={idx}
-            className="col-span-full border border-dashed border-slate-400"
+            className="col-span-full  row-span-1  border border-dashed border-slate-400"
           >
             {row}
           </div>
@@ -46,12 +51,16 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => {
 export default function Dashboard() {
   return (
     <div className="flex h-screen w-full">
-      <div className="grid w-full grid-cols-3 gap-4">
-        <DashboardCard>Current CLAN Overview</DashboardCard>
-        <DashboardCard>Recent Activity Log</DashboardCard>
+      <div className="grid w-full auto-rows-min grid-cols-3 gap-4">
+        <DashboardCard>
+          <NetworkOverview />
+        </DashboardCard>
+        <DashboardCard>
+          <RecentActivity />
+        </DashboardCard>
         <SplitDashboardCard>
-          <div>Notifications</div>
-          <div>Quick Action</div>
+          <Notifications />
+          <QuickActions />
         </SplitDashboardCard>
         <DashboardPanel>Panel</DashboardPanel>
         <DashboardCard>Side Bar (misc)</DashboardCard>

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

@@ -1,5 +1,22 @@
-import { Card } from "@mui/material";
+import { Typography } from "@mui/material";
+import { ReactNode } from "react";
 
-const DashboardCard = Card;
+interface DashboardCardProps {
+  title: string;
+  children?: ReactNode;
+}
+const DashboardCard = (props: DashboardCardProps) => {
+  const { children, title } = props;
+  return (
+    <div className="h-full w-full bg-slate-50 shadow-sm shadow-slate-500">
+      <div className="h-full w-full px-3 py-2">
+        <Typography variant="h6" color={"secondary"}>
+          {title}
+        </Typography>
+        {children}
+      </div>
+    </div>
+  );
+};
 
 export { DashboardCard };

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>
+  );
+};

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

@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+const StyledGridOverlay = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  "& .ant-empty-img-1": {
+    fill: theme.palette.mode === "light" ? "#aeb8c2" : "#262626",
+  },
+  "& .ant-empty-img-2": {
+    fill: theme.palette.mode === "light" ? "#f5f5f7" : "#595959",
+  },
+  "& .ant-empty-img-3": {
+    fill: theme.palette.mode === "light" ? "#dce0e6" : "#434343",
+  },
+  "& .ant-empty-img-4": {
+    fill: theme.palette.mode === "light" ? "#fff" : "#1c1c1c",
+  },
+  "& .ant-empty-img-5": {
+    fillOpacity: theme.palette.mode === "light" ? "0.8" : "0.08",
+    fill: theme.palette.mode === "light" ? "#f5f5f5" : "#fff",
+  },
+}));
+
+interface NoDataOverlayProps {
+  label: React.ReactNode;
+}
+export function NoDataOverlay(props: NoDataOverlayProps) {
+  const { label } = props;
+  return (
+    <StyledGridOverlay>
+      <svg
+        width="120"
+        height="100"
+        viewBox="0 0 184 152"
+        aria-hidden
+        focusable="false"
+      >
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(24 31.67)">
+            <ellipse
+              className="ant-empty-img-5"
+              cx="67.797"
+              cy="106.89"
+              rx="67.797"
+              ry="12.668"
+            />
+            <path
+              className="ant-empty-img-1"
+              d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+            />
+            <path
+              className="ant-empty-img-2"
+              d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+            />
+            <path
+              className="ant-empty-img-3"
+              d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+            />
+          </g>
+          <path
+            className="ant-empty-img-3"
+            d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+          />
+          <g className="ant-empty-img-4" transform="translate(149.65 15.383)">
+            <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
+            <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
+          </g>
+        </g>
+      </svg>
+      <Box sx={{ mt: 1 }}>{label}</Box>
+    </StyledGridOverlay>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { Button } from "@mui/material";
+
+export const QuickActions = () => {
+  return (
+    <div className="grid-cols-auto gris">
+      <Button>Action 1</Button>
+      <Button>Action 2</Button>
+      <Button>Action 3</Button>
+    </div>
+  );
+};

pkgs/ui/src/data/dashboardData.tsx

@@ -0,0 +1,170 @@
+export const status = {
+  online: "online",
+  offline: "offline",
+  pending: "pending",
+} as const;
+// Convert object keys in a union type
+export type Status = (typeof status)[keyof typeof status];
+
+export type Network = {
+  name: string;
+  id: string;
+};
+
+export type ClanDevice = {
+  id: string;
+  name: string;
+  status: Status;
+  ipv6: string;
+  networks: Network[];
+};
+
+export type ClanStatus = {
+  self: ClanDevice;
+  other: ClanDevice[];
+};
+export const clanStatus: ClanStatus = {
+  self: {
+    id: "1",
+    name: "My Computer",
+    ipv6: "",
+    status: "online",
+    networks: [
+      {
+        name: "Family",
+        id: "1",
+      },
+      {
+        name: "Fight-Club",
+        id: "1",
+      },
+    ],
+  },
+  // other: [],
+  other: [
+    {
+      id: "2",
+      name: "Daddies Computer",
+      status: "online",
+      networks: [
+        {
+          name: "Family",
+          id: "1",
+        },
+      ],
+      ipv6: "",
+    },
+    {
+      id: "3",
+      name: "Lars Notebook",
+      status: "offline",
+      networks: [
+        {
+          name: "Family",
+          id: "1",
+        },
+      ],
+      ipv6: "",
+    },
+    {
+      id: "4",
+      name: "Cassie Computer",
+      status: "pending",
+      networks: [
+        {
+          name: "Family",
+          id: "1",
+        },
+        {
+          name: "Fight-Club",
+          id: "2",
+        },
+      ],
+      ipv6: "",
+    },
+    {
+      id: "5",
+      name: "Chuck Norris Computer",
+      status: "online",
+      networks: [
+        {
+          name: "Fight-Club",
+          id: "2",
+        },
+      ],
+      ipv6: "",
+    },
+    {
+      id: "6",
+      name: "Ella Bright",
+      status: "pending",
+      networks: [
+        {
+          name: "Fight-Club",
+          id: "2",
+        },
+      ],
+      ipv6: "",
+    },
+    {
+      id: "7",
+      name: "Ryan Flabberghast",
+      status: "offline",
+      networks: [
+        {
+          name: "Fight-Club",
+          id: "2",
+        },
+      ],
+      ipv6: "",
+    },
+  ],
+};
+
+export const severity = {
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "error",
+} as const;
+// Convert object keys in a union type
+export type Severity = (typeof severity)[keyof typeof severity];
+
+export type Notification = {
+  id: string;
+  msg: string;
+  source: string;
+  date: string;
+  severity: Severity;
+};
+
+export const notificationData: Notification[] = [
+  {
+    id: "1",
+    date: "2022-12-27 08:26:49.219717",
+    severity: "success",
+    msg: "Defeated zombie mob flawless",
+    source: "Chuck Norris Computer",
+  },
+  {
+    id: "2",
+    date: "2022-12-27 08:26:49.219717",
+    severity: "error",
+    msg: "Application Crashed: my little pony",
+    source: "Cassie Computer",
+  },
+  {
+    id: "3",
+    date: "2022-12-27 08:26:49.219717",
+    severity: "warning",
+    msg: "Security update necessary",
+    source: "Daddies Computer",
+  },
+  {
+    id: "4",
+    date: "2022-12-27 08:26:49.219717",
+    severity: "info",
+    msg: "Decompressed snowflakes",
+    source: "My Computer",
+  },
+];

pkgs/ui/src/data/nodeData.tsx

@@ -0,0 +1,97 @@
+export interface TableData {
+  name: string;
+  id: string;
+  status: NodeStatus;
+  last_seen: number;
+}
+
+export enum NodeStatus {
+  Online,
+  Offline,
+  Pending,
+}
+
+function createData(
+  name: string,
+  id: string,
+  status: NodeStatus,
+  last_seen: number,
+): TableData {
+  return {
+    name,
+    id,
+    status,
+    last_seen: last_seen,
+  };
+}
+
+export const tableData = [
+  createData(
+    "Matchbox",
+    "42:0:f21:6916:e333:c47e:4b5c:e74c",
+    NodeStatus.Pending,
+    0,
+  ),
+  createData(
+    "Ahorn",
+    "42:0:3c46:b51c:b34d:b7e1:3b02:8d24",
+    NodeStatus.Online,
+    0,
+  ),
+  createData(
+    "Yellow",
+    "42:0:3c46:98ac:9c80:4f25:50e3:1d8f",
+    NodeStatus.Offline,
+    16.0,
+  ),
+  createData(
+    "Rauter",
+    "42:0:61ea:b777:61ea:803:f885:3523",
+    NodeStatus.Offline,
+    6.0,
+  ),
+  createData(
+    "Porree",
+    "42:0:e644:4499:d034:895e:34c8:6f9a",
+    NodeStatus.Offline,
+    13,
+  ),
+  createData(
+    "Helsinki",
+    "42:0:3c46:fd4a:acf9:e971:6036:8047",
+    NodeStatus.Online,
+    0,
+  ),
+  createData(
+    "Kelle",
+    "42:0:3c46:362d:a9aa:4996:c78e:839a",
+    NodeStatus.Online,
+    0,
+  ),
+  createData(
+    "Shodan",
+    "42:0:3c46:6745:adf4:a844:26c4:bf91",
+    NodeStatus.Online,
+    0.0,
+  ),
+  createData(
+    "Qubasa",
+    "42:0:3c46:123e:bbea:3529:db39:6764",
+    NodeStatus.Offline,
+    7.0,
+  ),
+  createData(
+    "Green",
+    "42:0:a46e:5af:632c:d2fe:a71d:cde0",
+    NodeStatus.Offline,
+    2,
+  ),
+  createData("Gum", "42:0:e644:238d:3e46:c884:6ec5:16c", NodeStatus.Offline, 0),
+  createData("Xu", "42:0:ca48:c2c2:19fb:a0e9:95b9:794f", NodeStatus.Online, 0),
+  createData(
+    "Zaatar",
+    "42:0:3c46:156e:10b6:3bd6:6e82:b2cd",
+    NodeStatus.Online,
+    0,
+  ),
+];