Refactor root admin dashboard UI
This commit is contained in:
MOH
+265
-122
@@ -1,19 +1,37 @@
|
||||
import { ArrowLeft, ExternalLink, ImageIcon, LockKeyhole, LogOut } from "lucide-react";
|
||||
import {
|
||||
ExternalLink,
|
||||
FolderKanban,
|
||||
ImageIcon,
|
||||
LayoutDashboard,
|
||||
LockKeyhole,
|
||||
LogOut,
|
||||
ShieldAlert,
|
||||
Shapes,
|
||||
SwatchBook,
|
||||
ArrowLeft,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { AppHeader } from "@/components/layout/app-header";
|
||||
import { AppShell } from "@/components/layout/app-shell";
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { DashboardCard } from "@/components/dashboard/dashboard-card";
|
||||
import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { getLocalizedPath } from "@/lib/locale";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Badge, type BadgeProps } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardDescription, CardHeader } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
clearAdminSessionCookie,
|
||||
getAdminLockState,
|
||||
@@ -25,6 +43,12 @@ import {
|
||||
setAdminSessionCookie,
|
||||
} from "@/lib/admin-auth";
|
||||
import { getMaintenanceMode } from "@/lib/app-config";
|
||||
import { getLocalizedPath } from "@/lib/locale";
|
||||
import { getAdminMediaAssets } from "@/lib/media";
|
||||
import {
|
||||
getAdminPortfolioCategories,
|
||||
getAdminPortfolioProjects,
|
||||
} from "@/lib/portfolio";
|
||||
import { getRootNavigation } from "@/lib/root-navigation";
|
||||
|
||||
type RootPageProps = {
|
||||
@@ -52,7 +76,7 @@ const copy = {
|
||||
media: "Media",
|
||||
portfolio: "Portfolio",
|
||||
portfolioTitle: "Portfolio",
|
||||
portfolioDescription: "Kategorien, Projekte, Sections und Assets verwalten.",
|
||||
portfolioDescription: "Kategorien, Projekte, Abschnitte und Dateien verwalten.",
|
||||
portfolioAction: "Zum Portfolio",
|
||||
mediaTitle: "Media Library",
|
||||
mediaDescription: "Uploads, externe URLs und Verwendungsorte zentral verwalten.",
|
||||
@@ -68,6 +92,31 @@ const copy = {
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
uiKit: "UI Kit",
|
||||
tableTitle: "Bereiche",
|
||||
tableDescription: "Direkter Zugriff auf alle Verwaltungsbereiche mit aktuellem Status.",
|
||||
tableSection: "Bereich",
|
||||
tableSummary: "Zusammenfassung",
|
||||
tableStatus: "Status",
|
||||
tableAction: "Aktion",
|
||||
maintenanceStatusOn: "Aktiv",
|
||||
maintenanceStatusOff: "Inaktiv",
|
||||
authStatusOk: "Bereit",
|
||||
authStatusWarning: "Pruefen",
|
||||
authCard: "Root Zugang",
|
||||
authDescription: "Admin Passwort und Session Signatur sind gesetzt.",
|
||||
authDescriptionWarning: "Eine oder mehrere Root Variablen fehlen und sollten geprueft werden.",
|
||||
mediaCountDescription: "Verfuegbare Dateien fuer Portfolio und Inhalte.",
|
||||
projectCountDescription: "Gespeicherte Portfolio Projekte im System.",
|
||||
categoryCountDescription: "Portfolio Kategorien mit eigener Sortierung.",
|
||||
systemStatusTitle: "Systemstatus",
|
||||
systemStatusDescription: "Technischer Zustand des Root Bereichs und der wichtigsten Inhaltsbereiche.",
|
||||
maintenanceLabel: "Wartung",
|
||||
contentLabel: "Inhalte",
|
||||
contentDescription: "Portfolio, Media und Kategorien sind direkt aus diesem Bereich erreichbar.",
|
||||
publishedProjects: "Veroeffentlicht",
|
||||
totalProjects: "Projekte",
|
||||
totalCategories: "Kategorien",
|
||||
totalMedia: "Dateien",
|
||||
};
|
||||
|
||||
export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
@@ -77,7 +126,6 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
);
|
||||
const authenticated = isAdminAuthenticated();
|
||||
const lockState = getAdminLockState();
|
||||
const maintenanceEnabled = authenticated ? await getMaintenanceMode() : false;
|
||||
|
||||
async function loginAction(formData: FormData) {
|
||||
"use server";
|
||||
@@ -114,7 +162,7 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
return (
|
||||
<Container size="narrow" className="py-12">
|
||||
<MotionFade>
|
||||
<AppCard level={3}>
|
||||
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||||
<CardHeader>
|
||||
<p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
|
||||
<LockKeyhole className="h-4 w-4 text-brand-primary" />
|
||||
@@ -159,137 +207,232 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</Card>
|
||||
</MotionFade>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const sidebarItems = getRootNavigation(copy, "overview");
|
||||
const [maintenanceEnabled, categories, projects, mediaAssets] = await Promise.all([
|
||||
getMaintenanceMode(),
|
||||
getAdminPortfolioCategories(),
|
||||
getAdminPortfolioProjects(),
|
||||
getAdminMediaAssets(),
|
||||
]);
|
||||
const publishedProjects = projects.filter((project) => project.isPublished).length;
|
||||
const rootNavigation = getRootNavigation(copy, "overview");
|
||||
const authHealthy = authConfigured && basicConfigured;
|
||||
const sectionRows: Array<{
|
||||
label: string;
|
||||
summary: string;
|
||||
status: string;
|
||||
href: string;
|
||||
badgeVariant: BadgeProps["variant"];
|
||||
action: string;
|
||||
}> = [
|
||||
{
|
||||
label: copy.maintenanceTitle,
|
||||
summary: copy.maintenanceDescription,
|
||||
status: maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff,
|
||||
href: "/root/maintenance",
|
||||
badgeVariant: maintenanceEnabled ? "warning" : "success",
|
||||
action: copy.maintenanceAction,
|
||||
},
|
||||
{
|
||||
label: copy.mediaTitle,
|
||||
summary: `${mediaAssets.length} ${copy.totalMedia}`,
|
||||
status: copy.authStatusOk,
|
||||
href: "/root/media",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.mediaAction,
|
||||
},
|
||||
{
|
||||
label: copy.portfolioTitle,
|
||||
summary: `${projects.length} ${copy.totalProjects} / ${categories.length} ${copy.totalCategories}`,
|
||||
status: `${publishedProjects} ${copy.publishedProjects}`,
|
||||
href: "/root/portfolio",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.portfolioAction,
|
||||
},
|
||||
{
|
||||
label: copy.uiKitTitle,
|
||||
summary: copy.uiKitDescription,
|
||||
status: copy.authStatusOk,
|
||||
href: "/root/ui-kit",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.uiKitAction,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
sidebar={
|
||||
<AppSidebar
|
||||
title={copy.title}
|
||||
description={copy.subtitle}
|
||||
items={sidebarItems}
|
||||
footer={
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<ThemeToggle ariaLabel="Theme wechseln" />
|
||||
</div>
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href={getLocalizedPath("de")}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{copy.backToSite}
|
||||
</Link>
|
||||
</Button>
|
||||
<form action={logoutAction}>
|
||||
<Button type="submit" variant="destructive" className="w-full justify-start">
|
||||
<LogOut className="h-4 w-4" />
|
||||
{copy.logout}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<DashboardLayout
|
||||
title={copy.title}
|
||||
description={copy.subtitle}
|
||||
icon={LayoutDashboard}
|
||||
items={rootNavigation}
|
||||
sidebarFooter={
|
||||
<>
|
||||
<Button
|
||||
asChild
|
||||
variant={maintenanceEnabled ? "default" : "outline"}
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<Link href="/root/maintenance">
|
||||
{copy.maintenance}
|
||||
<ShieldAlert className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full justify-between">
|
||||
<Link href="/root/ui-kit">
|
||||
{copy.uiKit}
|
||||
<SwatchBook className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
header={
|
||||
<AppHeader
|
||||
title={copy.title}
|
||||
description={copy.subtitle}
|
||||
actions={
|
||||
maintenanceEnabled ? (
|
||||
<Button asChild variant="destructive">
|
||||
<Link href="/root/maintenance">
|
||||
{copy.maintenanceVisitorsClosed}
|
||||
</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
headerActions={
|
||||
<div className="flex flex-wrap items-center justify-end gap-2">
|
||||
{maintenanceEnabled ? (
|
||||
<Button asChild variant="destructive" className="hidden sm:inline-flex">
|
||||
<Link href="/root/maintenance">{copy.maintenanceVisitorsClosed}</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<ThemeToggle ariaLabel="Theme wechseln" />
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={getLocalizedPath("de")}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{copy.backToSite}
|
||||
</Link>
|
||||
</Button>
|
||||
<form action={logoutAction}>
|
||||
<Button type="submit" variant="ghost" size="sm" className="text-destructive hover:bg-destructive/10 hover:text-destructive">
|
||||
<LogOut className="h-4 w-4" />
|
||||
{copy.logout}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-6">
|
||||
<section className="grid gap-4 lg:grid-cols-4">
|
||||
<div className="space-y-6">
|
||||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<MotionFade delay={0.05}>
|
||||
<AppCard level={2}>
|
||||
<CardHeader>
|
||||
<CardDescription>{copy.maintenanceTitle}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
{maintenanceEnabled ? copy.maintenanceVisitorsClosed : copy.maintenanceOpen}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{copy.maintenanceDescription}
|
||||
</p>
|
||||
<Button asChild variant={maintenanceEnabled ? "destructive" : "outline"}>
|
||||
<Link href="/root/maintenance">
|
||||
{copy.maintenanceAction}
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<DashboardCard
|
||||
title={copy.maintenanceTitle}
|
||||
value={maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
|
||||
description={copy.maintenanceDescription}
|
||||
icon={ShieldAlert}
|
||||
/>
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.1}>
|
||||
<AppCard level={2}>
|
||||
<CardHeader>
|
||||
<CardDescription>{copy.uiKitTitle}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-lg font-semibold text-foreground">{copy.uiKitTitle}</p>
|
||||
<p className="text-sm text-muted-foreground">{copy.uiKitDescription}</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/root/ui-kit">
|
||||
{copy.uiKitAction}
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<DashboardCard
|
||||
title={copy.totalMedia}
|
||||
value={String(mediaAssets.length)}
|
||||
description={copy.mediaCountDescription}
|
||||
icon={ImageIcon}
|
||||
/>
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.15}>
|
||||
<AppCard level={2}>
|
||||
<CardHeader>
|
||||
<CardDescription>{copy.portfolioTitle}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-lg font-semibold text-foreground">{copy.portfolioTitle}</p>
|
||||
<p className="text-sm text-muted-foreground">{copy.portfolioDescription}</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/root/portfolio">
|
||||
{copy.portfolioAction}
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<DashboardCard
|
||||
title={copy.totalProjects}
|
||||
value={String(projects.length)}
|
||||
description={copy.projectCountDescription}
|
||||
icon={FolderKanban}
|
||||
/>
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.2}>
|
||||
<AppCard level={2}>
|
||||
<CardHeader>
|
||||
<CardDescription>{copy.mediaTitle}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-lg font-semibold text-foreground">{copy.mediaTitle}</p>
|
||||
<p className="text-sm text-muted-foreground">{copy.mediaDescription}</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/root/media">
|
||||
{copy.mediaAction}
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<DashboardCard
|
||||
title={copy.totalCategories}
|
||||
value={String(categories.length)}
|
||||
description={copy.categoryCountDescription}
|
||||
icon={Shapes}
|
||||
/>
|
||||
</MotionFade>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,1fr)]">
|
||||
<MotionFade delay={0.25}>
|
||||
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>{copy.tableTitle}</CardTitle>
|
||||
<CardDescription>{copy.tableDescription}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{copy.tableSection}</TableHead>
|
||||
<TableHead>{copy.tableSummary}</TableHead>
|
||||
<TableHead>{copy.tableStatus}</TableHead>
|
||||
<TableHead className="text-right">{copy.tableAction}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sectionRows.map((row) => (
|
||||
<TableRow key={row.href}>
|
||||
<TableCell className="font-medium">{row.label}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{row.summary}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={row.badgeVariant}>{row.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link href={row.href}>
|
||||
{row.action}
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</MotionFade>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<MotionFade delay={0.3}>
|
||||
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>{copy.systemStatusTitle}</CardTitle>
|
||||
<CardDescription>{copy.systemStatusDescription}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-lg border border-border bg-muted/40 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{copy.authCard}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{authHealthy ? copy.authDescription : copy.authDescriptionWarning}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={authHealthy ? "success" : "warning"}>
|
||||
{authHealthy ? copy.authStatusOk : copy.authStatusWarning}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">{copy.maintenanceLabel}</span>
|
||||
<Badge variant={maintenanceEnabled ? "warning" : "success"}>
|
||||
{maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">{copy.contentLabel}</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{`${publishedProjects} ${copy.publishedProjects} / ${projects.length} ${copy.totalProjects}`}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground">{copy.contentDescription}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</MotionFade>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</AppShell>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user