diff --git a/pkgs/ui/public/app-icons/app-placeholder.svg b/pkgs/ui/public/app-icons/app-placeholder.svg new file mode 100644 index 000000000..af8ca7319 --- /dev/null +++ b/pkgs/ui/public/app-icons/app-placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/chess.svg b/pkgs/ui/public/app-icons/chess.svg new file mode 100644 index 000000000..62a57b1b5 --- /dev/null +++ b/pkgs/ui/public/app-icons/chess.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/discord.svg b/pkgs/ui/public/app-icons/discord.svg new file mode 100644 index 000000000..109dfd7e1 --- /dev/null +++ b/pkgs/ui/public/app-icons/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/dochub.svg b/pkgs/ui/public/app-icons/dochub.svg new file mode 100644 index 000000000..ab3a14295 --- /dev/null +++ b/pkgs/ui/public/app-icons/dochub.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/firefox.svg b/pkgs/ui/public/app-icons/firefox.svg new file mode 100644 index 000000000..6eed5db9a --- /dev/null +++ b/pkgs/ui/public/app-icons/firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/games.svg b/pkgs/ui/public/app-icons/games.svg new file mode 100644 index 000000000..8732732f4 --- /dev/null +++ b/pkgs/ui/public/app-icons/games.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/mail.svg b/pkgs/ui/public/app-icons/mail.svg new file mode 100644 index 000000000..d6f8efdc9 --- /dev/null +++ b/pkgs/ui/public/app-icons/mail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/public-transport.svg b/pkgs/ui/public/app-icons/public-transport.svg new file mode 100644 index 000000000..b4c04e07a --- /dev/null +++ b/pkgs/ui/public/app-icons/public-transport.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/public/app-icons/youtube.svg b/pkgs/ui/public/app-icons/youtube.svg new file mode 100644 index 000000000..1fa207c19 --- /dev/null +++ b/pkgs/ui/public/app-icons/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx index 224c83a9f..208d3e8d5 100644 --- a/pkgs/ui/src/app/layout.tsx +++ b/pkgs/ui/src/app/layout.tsx @@ -96,7 +96,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/pkgs/ui/src/app/page.tsx b/pkgs/ui/src/app/page.tsx index 432dc4a60..80cf84192 100644 --- a/pkgs/ui/src/app/page.tsx +++ b/pkgs/ui/src/app/page.tsx @@ -1,15 +1,20 @@ import { RecentActivity } from "@/components/dashboard/activity"; +import { AppOverview } from "@/components/dashboard/appOverview"; import { NetworkOverview } from "@/components/dashboard/NetworkOverview"; import { Notifications } from "@/components/dashboard/notifications"; -import { QuickActions } from "@/components/quickActions"; +import { QuickActions } from "@/components/dashboard/quickActions"; +import { TaskQueue } from "@/components/dashboard/taskQueue"; +import { tw } from "@/utils/tailwind"; interface DashboardCardProps { children?: React.ReactNode; + rowSpan?: number; + sx?: string; } const DashboardCard = (props: DashboardCardProps) => { - const { children } = props; + const { children, rowSpan = 1, sx = "" } = props; return ( -
+
{children}
); @@ -21,9 +26,7 @@ interface DashboardPanelProps { const DashboardPanel = (props: DashboardPanelProps) => { const { children } = props; return ( -
- {children} -
+
{children}
); }; @@ -36,10 +39,7 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => {
{children?.map((row, idx) => ( -
+
{row}
))} @@ -51,19 +51,25 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => { export default function Dashboard() { return (
-
- +
+ - + - + + + - - Panel - Side Bar (misc) + + + + + + +
); diff --git a/pkgs/ui/src/components/card/index.tsx b/pkgs/ui/src/components/card/index.tsx index ad7942067..b88ba71ec 100644 --- a/pkgs/ui/src/components/card/index.tsx +++ b/pkgs/ui/src/components/card/index.tsx @@ -8,7 +8,7 @@ interface DashboardCardProps { const DashboardCard = (props: DashboardCardProps) => { const { children, title } = props; return ( -
+
{title} diff --git a/pkgs/ui/src/components/dashboard/appOverview/index.tsx b/pkgs/ui/src/components/dashboard/appOverview/index.tsx new file mode 100644 index 000000000..e97454d8f --- /dev/null +++ b/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 ( +
+
+
+ {`${name}-app-icon`} +
+
{name}
+
+
+ ); +}; + +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 ( + +
+
+
+ {apps.map((app) => ( + + ))} +
+
+
+ + ); +}; diff --git a/pkgs/ui/src/components/dashboard/quickActions/index.tsx b/pkgs/ui/src/components/dashboard/quickActions/index.tsx new file mode 100644 index 000000000..17e03c568 --- /dev/null +++ b/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; +}; + +export const QuickActions = () => { + const actions: Action[] = [ + { + id: "network", + icon: , + label: "Network", + eventHandler: (event) => { + console.log({ event }); + }, + }, + { + id: "apps", + icon: , + label: "Apps", + eventHandler: (event) => { + console.log({ event }); + }, + }, + { + id: "nodes", + icon: , + label: "Devices", + eventHandler: (event) => { + console.log({ event }); + }, + }, + ]; + return ( + +
+
+ {actions.map(({ id, icon, label, eventHandler }) => ( + + {icon} + {label} + + ))} +
+
+ + ); +}; diff --git a/pkgs/ui/src/components/dashboard/taskQueue/index.tsx b/pkgs/ui/src/components/dashboard/taskQueue/index.tsx new file mode 100644 index 000000000..c55ab3d25 --- /dev/null +++ b/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: , + done: , + planned: , +}; + +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 ( + <> +
{status}
+
{task}
+
+ +
+ + ); +}; + +export const TaskQueue = () => { + return ( + +
+ + + +
+ + ); +}; diff --git a/pkgs/ui/src/components/noDataOverlay/index.tsx b/pkgs/ui/src/components/noDataOverlay/index.tsx index 51904272f..dee6eb81f 100644 --- a/pkgs/ui/src/components/noDataOverlay/index.tsx +++ b/pkgs/ui/src/components/noDataOverlay/index.tsx @@ -34,7 +34,7 @@ interface NoDataOverlayProps { export function NoDataOverlay(props: NoDataOverlayProps) { const { label } = props; return ( - + { - return ( -
- - - -
- ); -};