ui: add protected dashboard CRUD screens and assignment docs
This commit is contained in:
parent
bf42037619
commit
cb0d4d7809
24 changed files with 2662 additions and 101 deletions
123
apps/web/src/components/dashboard-shell.tsx
Normal file
123
apps/web/src/components/dashboard-shell.tsx
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
import { Button } from "@minmon/ui/components/button";
|
||||
import { cn } from "@minmon/ui/lib/utils";
|
||||
import { Link, Outlet, useRouterState } from "@tanstack/react-router";
|
||||
import { Activity, BookText, Globe, LayoutGrid, Server, Wrench } from "lucide-react";
|
||||
|
||||
const dashboardLinks = [
|
||||
{
|
||||
to: "/dashboard",
|
||||
label: "Overview",
|
||||
description: "Health, alerts, and recent checks",
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
{
|
||||
to: "/dashboard/servers",
|
||||
label: "Servers",
|
||||
description: "Inventory and host details",
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
to: "/dashboard/services",
|
||||
label: "Services",
|
||||
description: "Processes and uptime targets",
|
||||
icon: Wrench,
|
||||
},
|
||||
{
|
||||
to: "/dashboard/domains",
|
||||
label: "Domains",
|
||||
description: "DNS, SSL, and expiry status",
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
to: "/dashboard/notes",
|
||||
label: "Notes",
|
||||
description: "Runbooks and operational handover",
|
||||
icon: BookText,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export function DashboardShell({
|
||||
userName,
|
||||
userEmail,
|
||||
}: {
|
||||
userName?: string | null;
|
||||
userEmail?: string | null;
|
||||
}) {
|
||||
const pathname = useRouterState({
|
||||
select: (state) => state.location.pathname,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-muted/20">
|
||||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-6 lg:px-6">
|
||||
<section className="border bg-card">
|
||||
<div className="grid gap-4 px-5 py-5 lg:grid-cols-[1.4fr_0.6fr] lg:px-6">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Server Management Dashboard
|
||||
</p>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Operations overview for demos and day-to-day admin tasks</h1>
|
||||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||
Use this area to review monitored assets, inspect detail states, and stage CRUD forms that can connect to tRPC routers as they are added.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 border-l-0 border-t pt-4 lg:border-l lg:border-t-0 lg:pl-6 lg:pt-0">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">Signed in as</p>
|
||||
<p className="mt-1 text-sm font-medium">{userName ?? "Administrator"}</p>
|
||||
<p className="text-xs text-muted-foreground">{userEmail ?? "admin@minmon.local"}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link to="/dashboard/servers/new">
|
||||
<Button size="sm">Add server</Button>
|
||||
</Link>
|
||||
<Link to="/dashboard/notes/new">
|
||||
<Button size="sm" variant="outline">
|
||||
New note
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)]">
|
||||
<aside className="h-fit border bg-card">
|
||||
<div className="border-b px-4 py-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<Activity className="size-4" />
|
||||
Navigation
|
||||
</div>
|
||||
</div>
|
||||
<nav className="grid gap-1 p-2">
|
||||
{dashboardLinks.map(({ to, label, description, icon: Icon }) => {
|
||||
const active = pathname === to || pathname.startsWith(`${to}/`);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
className={cn(
|
||||
"grid gap-0.5 border px-3 py-2 text-left transition-colors",
|
||||
active ? "border-foreground/20 bg-muted" : "border-transparent hover:border-border hover:bg-muted/40",
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm font-medium">
|
||||
<Icon className="size-4" />
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{description}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main className="min-w-0">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
282
apps/web/src/components/dashboard-ui.tsx
Normal file
282
apps/web/src/components/dashboard-ui.tsx
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
import { Button } from "@minmon/ui/components/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@minmon/ui/components/card";
|
||||
import { Input } from "@minmon/ui/components/input";
|
||||
import { Label } from "@minmon/ui/components/label";
|
||||
import { StatusBadge } from "@minmon/ui/components/status-badge";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableWrapper,
|
||||
} from "@minmon/ui/components/table";
|
||||
import { Textarea } from "@minmon/ui/components/textarea";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
type BadgeVariant = "neutral" | "success" | "warning" | "destructive" | "info";
|
||||
|
||||
export function PageSection({ title, description, action, children }: SectionProps) {
|
||||
return (
|
||||
<section className="grid gap-4">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-lg font-semibold tracking-tight">{title}</h2>
|
||||
{description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
|
||||
</div>
|
||||
{action ? <div>{action}</div> : null}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function SummaryCard({
|
||||
label,
|
||||
value,
|
||||
hint,
|
||||
status,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
hint: string;
|
||||
status?: { label: string; variant: BadgeVariant };
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardDescription>{label}</CardDescription>
|
||||
{status ? <StatusBadge variant={status.variant}>{status.label}</StatusBadge> : null}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<p className="text-2xl font-semibold tracking-tight">{value}</p>
|
||||
<p className="text-sm text-muted-foreground">{hint}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResourceListCard<TItem>({
|
||||
title,
|
||||
description,
|
||||
columns,
|
||||
items,
|
||||
emptyTitle,
|
||||
emptyDescription,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
columns: { key: string; header: string; render: (item: TItem) => ReactNode; className?: string }[];
|
||||
items: TItem[];
|
||||
emptyTitle: string;
|
||||
emptyDescription: string;
|
||||
}) {
|
||||
return (
|
||||
<Card className="gap-0">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>{title}</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-0">
|
||||
{items.length ? (
|
||||
<TableWrapper className="border-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent">
|
||||
{columns.map((column) => (
|
||||
<TableHead key={column.key} className={column.className}>
|
||||
{column.header}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
{columns.map((column) => (
|
||||
<TableCell key={column.key} className={column.className}>
|
||||
{column.render(item)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableWrapper>
|
||||
) : (
|
||||
<EmptyState title={emptyTitle} description={emptyDescription} className="border-0" />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailCard({
|
||||
title,
|
||||
description,
|
||||
rows,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
rows: { label: string; value: ReactNode }[];
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 sm:grid-cols-2">
|
||||
{rows.map((row) => (
|
||||
<div key={row.label} className="space-y-1 border-l-2 border-border pl-3">
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">{row.label}</p>
|
||||
<div className="text-sm">{row.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormCard({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
footer,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
children: ReactNode;
|
||||
footer?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">{children}</CardContent>
|
||||
{footer ? <CardFooter className="justify-between gap-3">{footer}</CardFooter> : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function FieldGroup({
|
||||
label,
|
||||
htmlFor,
|
||||
description,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
htmlFor: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor={htmlFor}>{label}</Label>
|
||||
{children}
|
||||
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextField(props: React.ComponentProps<typeof Input> & { label: string; description?: string }) {
|
||||
const { label, description, id, ...inputProps } = props;
|
||||
|
||||
return (
|
||||
<FieldGroup label={label} htmlFor={id ?? inputProps.name ?? label} description={description}>
|
||||
<Input id={id ?? inputProps.name ?? label} {...inputProps} />
|
||||
</FieldGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextAreaField(
|
||||
props: React.ComponentProps<typeof Textarea> & { label: string; description?: string },
|
||||
) {
|
||||
const { label, description, id, ...textareaProps } = props;
|
||||
|
||||
return (
|
||||
<FieldGroup label={label} htmlFor={id ?? textareaProps.name ?? label} description={description}>
|
||||
<Textarea id={id ?? textareaProps.name ?? label} {...textareaProps} />
|
||||
</FieldGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function EmptyState({
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
className,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
action?: ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={"border px-4 py-8 text-center " + (className ?? "")}>
|
||||
<p className="text-sm font-medium">{title}</p>
|
||||
<p className="mx-auto mt-2 max-w-lg text-sm text-muted-foreground">{description}</p>
|
||||
{action ? <div className="mt-4 flex justify-center">{action}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function QueryStateCard({
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
action?: ReactNode;
|
||||
}) {
|
||||
return <EmptyState title={title} description={description} action={action} />;
|
||||
}
|
||||
|
||||
export function SectionLinks({ items }: { items: { label: string; to: string; detail: string }[] }) {
|
||||
return (
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
{items.map((item) => (
|
||||
<Link key={item.to} to={item.to} className="border bg-card p-4 transition-colors hover:bg-muted/30">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{item.label}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{item.detail}</p>
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormActions({ cancelTo, submitLabel }: { cancelTo: string; submitLabel: string }) {
|
||||
return (
|
||||
<>
|
||||
<Link to={cancelTo}>
|
||||
<Button variant="ghost">Cancel</Button>
|
||||
</Link>
|
||||
<Button type="submit">{submitLabel}</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface SectionProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
|
@ -7,26 +7,34 @@ export default function Header() {
|
|||
const links = [
|
||||
{ to: "/", label: "Home" },
|
||||
{ to: "/dashboard", label: "Dashboard" },
|
||||
{ to: "/dashboard/servers", label: "Servers" },
|
||||
{ to: "/dashboard/services", label: "Services" },
|
||||
{ to: "/dashboard/domains", label: "Domains" },
|
||||
{ to: "/dashboard/notes", label: "Notes" },
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-row items-center justify-between px-2 py-1">
|
||||
<nav className="flex gap-4 text-lg">
|
||||
<div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75">
|
||||
<div className="mx-auto flex max-w-7xl flex-row items-center justify-between gap-4 px-4 py-3 lg:px-6">
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/" className="text-sm font-semibold tracking-[0.2em] uppercase">
|
||||
minmon
|
||||
</Link>
|
||||
<nav className="flex flex-wrap gap-4 text-sm text-muted-foreground">
|
||||
{links.map(({ to, label }) => {
|
||||
return (
|
||||
<Link key={to} to={to}>
|
||||
<Link key={to} to={to} activeProps={{ className: "text-foreground" }}>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ModeToggle />
|
||||
<UserMenu />
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue