add more example utils to dashboard

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

@@ -0,0 +1,96 @@
+import { DashboardCard } from "@/components/card";
+import Image from "next/image";
+import { ReactNode } from "react";
+
+interface AppCardProps {
+  name: string;
+  icon?: string;
+}
+const AppCard = (props: AppCardProps) => {
+  const { name, icon } = props;
+  const iconPath = icon
+    ? `/app-icons/${icon}`
+    : "app-icons/app-placeholder.svg";
+  return (
+    <div
+      role="button"
+      className="flex h-40 w-40  cursor-pointer items-center justify-center rounded-3xl p-2
+       align-middle shadow-md ring-2 ring-inset ring-violet-500 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300"
+    >
+      <div className="flex w-full flex-col justify-center">
+        <div className="h-22 w-22 my-1 flex items-center justify-center self-center overflow-visible p-1">
+          <Image
+            src={iconPath}
+            alt={`${name}-app-icon`}
+            width={18 * 3}
+            height={18 * 3}
+          />
+        </div>
+        <div className="flex w-full justify-center">{name}</div>
+      </div>
+    </div>
+  );
+};
+
+type App = {
+  name: string;
+  icon?: string;
+};
+
+const apps = [
+  {
+    name: "Firefox",
+    icon: "firefox.svg",
+  },
+  {
+    name: "Discord",
+    icon: "discord.svg",
+  },
+  {
+    name: "Docs",
+  },
+  {
+    name: "Dochub",
+    icon: "dochub.svg",
+  },
+  {
+    name: "Chess",
+    icon: "chess.svg",
+  },
+  {
+    name: "Games",
+    icon: "games.svg",
+  },
+  {
+    name: "Mail",
+    icon: "mail.svg",
+  },
+  {
+    name: "Public transport",
+    icon: "public-transport.svg",
+  },
+  {
+    name: "Outlook",
+    icon: "mail.svg",
+  },
+  {
+    name: "Youtube",
+    icon: "youtube.svg",
+  },
+];
+
+export const AppOverview = () => {
+  return (
+    <DashboardCard title="Applications">
+      <div className="flex h-full w-full justify-center">
+        <div className="flex h-full w-fit justify-center">
+          <div className="grid w-full auto-cols-min auto-rows-min  grid-cols-2 gap-8 py-8 sm:grid-cols-3 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 ">
+            {apps.map((app) => (
+              <AppCard key={app.name} name={app.name} icon={app.icon} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </DashboardCard>
+  );
+};

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

@@ -0,0 +1,64 @@
+"use client";
+import { DashboardCard } from "@/components/card";
+import { Button, Fab } from "@mui/material";
+import { MouseEventHandler, ReactNode } from "react";
+
+import LanIcon from "@mui/icons-material/Lan";
+import AppsIcon from "@mui/icons-material/Apps";
+import DevicesIcon from "@mui/icons-material/Devices";
+
+type Action = {
+  id: string;
+  icon: ReactNode;
+  label: ReactNode;
+  eventHandler: MouseEventHandler<HTMLButtonElement>;
+};
+
+export const QuickActions = () => {
+  const actions: Action[] = [
+    {
+      id: "network",
+      icon: <LanIcon sx={{ mr: 1 }} />,
+      label: "Network",
+      eventHandler: (event) => {
+        console.log({ event });
+      },
+    },
+    {
+      id: "apps",
+      icon: <AppsIcon sx={{ mr: 1 }} />,
+      label: "Apps",
+      eventHandler: (event) => {
+        console.log({ event });
+      },
+    },
+    {
+      id: "nodes",
+      icon: <DevicesIcon sx={{ mr: 1 }} />,
+      label: "Devices",
+      eventHandler: (event) => {
+        console.log({ event });
+      },
+    },
+  ];
+  return (
+    <DashboardCard title="Quick Actions">
+      <div className="flex h-fit w-full items-center justify-start pt-5 align-bottom">
+        <div className="flex w-full flex-col flex-wrap justify-evenly gap-2 sm:flex-row">
+          {actions.map(({ id, icon, label, eventHandler }) => (
+            <Fab
+              className="w-fit self-center shadow-none"
+              color="secondary"
+              key={id}
+              onClick={eventHandler}
+              variant="extended"
+            >
+              {icon}
+              {label}
+            </Fab>
+          ))}
+        </div>
+      </div>
+    </DashboardCard>
+  );
+};

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

@@ -0,0 +1,56 @@
+import { DashboardCard } from "@/components/card";
+
+import SyncIcon from "@mui/icons-material/Sync";
+import ScheduleIcon from "@mui/icons-material/Schedule";
+import DoneIcon from "@mui/icons-material/Done";
+import { ReactNode } from "react";
+import { Chip } from "@mui/material";
+
+const statusMap = {
+  running: <SyncIcon className="animate-bounce" />,
+  done: <DoneIcon />,
+  planned: <ScheduleIcon />,
+};
+
+interface TaskEntryProps {
+  status: ReactNode;
+  result: "default" | "error" | "info" | "success" | "warning";
+  task: string;
+  details?: string;
+}
+const TaskEntry = (props: TaskEntryProps) => {
+  const { result, task, details, status } = props;
+  return (
+    <>
+      <div className="col-span-1">{status}</div>
+      <div className="col-span-4">{task}</div>
+      <div className="col-span-1">
+        <Chip color={result} label={result} />
+      </div>
+    </>
+  );
+};
+
+export const TaskQueue = () => {
+  return (
+    <DashboardCard title="Task Queue">
+      <div className="grid grid-cols-6 gap-2 p-4">
+        <TaskEntry
+          result="success"
+          task="Update DevX"
+          status={statusMap.done}
+        />
+        <TaskEntry
+          result="default"
+          task="Update XYZ"
+          status={statusMap.running}
+        />
+        <TaskEntry
+          result="default"
+          task="Update ABC"
+          status={statusMap.planned}
+        />
+      </div>
+    </DashboardCard>
+  );
+};