359 lines
12 KiB
TypeScript
359 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {
|
|
Activity,
|
|
ArrowUpRight,
|
|
ChevronDown,
|
|
Coins,
|
|
LayoutTemplate,
|
|
Search,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatEurFromCents = (cents: number) =>
|
|
new Intl.NumberFormat("de-DE", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(cents / 100);
|
|
|
|
const mockRuns = [
|
|
{
|
|
id: "run-8841",
|
|
workspace: "Sommer-Kampagne",
|
|
node: "KI-Bild",
|
|
model: "flux-pro",
|
|
status: "done" as const,
|
|
credits: 42,
|
|
updated: "vor 12 Min.",
|
|
},
|
|
{
|
|
id: "run-8839",
|
|
workspace: "Produktfotos",
|
|
node: "KI-Bild",
|
|
model: "flux-schnell",
|
|
status: "executing" as const,
|
|
credits: 18,
|
|
updated: "gerade eben",
|
|
},
|
|
{
|
|
id: "run-8832",
|
|
workspace: "Social Variants",
|
|
node: "Compare",
|
|
model: "—",
|
|
status: "idle" as const,
|
|
credits: 0,
|
|
updated: "vor 1 Std.",
|
|
},
|
|
{
|
|
id: "run-8828",
|
|
workspace: "Sommer-Kampagne",
|
|
node: "KI-Bild",
|
|
model: "flux-pro",
|
|
status: "error" as const,
|
|
credits: 0,
|
|
updated: "vor 2 Std.",
|
|
},
|
|
];
|
|
|
|
const mockWorkspaces = [
|
|
{ name: "Sommer-Kampagne", nodes: 24, frames: 3, initial: "S" },
|
|
{ name: "Produktfotos", nodes: 11, frames: 2, initial: "P" },
|
|
{ name: "Social Variants", nodes: 8, frames: 1, initial: "V" },
|
|
];
|
|
|
|
function StatusDot({ status }: { status: (typeof mockRuns)[0]["status"] }) {
|
|
const base = "inline-block size-2 rounded-full";
|
|
switch (status) {
|
|
case "done":
|
|
return <span className={cn(base, "bg-primary")} />;
|
|
case "executing":
|
|
return (
|
|
<span className="relative inline-flex size-2">
|
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-primary/60" />
|
|
<span className={cn(base, "relative bg-primary")} />
|
|
</span>
|
|
);
|
|
case "idle":
|
|
return <span className={cn(base, "bg-border")} />;
|
|
case "error":
|
|
return <span className={cn(base, "bg-destructive")} />;
|
|
}
|
|
}
|
|
|
|
function statusLabel(status: (typeof mockRuns)[0]["status"]) {
|
|
switch (status) {
|
|
case "done":
|
|
return "Fertig";
|
|
case "executing":
|
|
return "Läuft";
|
|
case "idle":
|
|
return "Bereit";
|
|
case "error":
|
|
return "Fehler";
|
|
}
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const balanceCents = 4320;
|
|
const reservedCents = 180;
|
|
const monthlyPoolCents = 5000;
|
|
const usagePercent = Math.round(
|
|
((monthlyPoolCents - balanceCents) / monthlyPoolCents) * 100,
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-full bg-background">
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-10 border-b bg-background/90 backdrop-blur-sm">
|
|
<div className="mx-auto flex h-14 max-w-5xl items-center gap-4 px-6">
|
|
<div className="flex items-center gap-2.5 text-base font-semibold tracking-tight">
|
|
<Image
|
|
src="/logos/lemonspace-logo-v2-primary-rgb.svg"
|
|
alt=""
|
|
width={449}
|
|
height={86}
|
|
unoptimized
|
|
className="h-5 w-auto shrink-0"
|
|
aria-hidden
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative ml-8 hidden max-w-xs flex-1 sm:block">
|
|
<Search className="pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="h-8 rounded-lg bg-muted/60 pl-8 text-sm"
|
|
placeholder="Suchen…"
|
|
type="search"
|
|
disabled
|
|
/>
|
|
</div>
|
|
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="gap-2 px-1.5">
|
|
<Avatar className="size-7">
|
|
<AvatarFallback className="bg-primary/12 text-xs font-medium text-primary">
|
|
MK
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className="hidden text-sm font-medium md:inline">
|
|
Mock Nutzer
|
|
</span>
|
|
<ChevronDown className="size-3.5 text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuLabel>Account (Demo)</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem disabled>Einstellungen</DropdownMenuItem>
|
|
<DropdownMenuItem disabled>Abrechnung</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem disabled>Abmelden</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto max-w-5xl px-6 pt-10 pb-16">
|
|
{/* Greeting & Context */}
|
|
<div className="mb-10">
|
|
<h1 className="text-2xl font-semibold tracking-tight">
|
|
Guten Tag, Mock Nutzer
|
|
</h1>
|
|
<p className="mt-1.5 text-muted-foreground">
|
|
Überblick über deine Credits und laufende Generierungen.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Credits & Active Generation — asymmetric two-column */}
|
|
<div className="mb-12 grid gap-6 lg:grid-cols-[1fr_1.2fr]">
|
|
{/* Credits Section */}
|
|
<div className="space-y-5">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Coins className="size-3.5" />
|
|
<span>Credit-Guthaben</span>
|
|
</div>
|
|
<div className="text-4xl font-semibold tabular-nums tracking-tight">
|
|
{formatEurFromCents(balanceCents)}
|
|
</div>
|
|
|
|
<div className="space-y-3 pt-1">
|
|
<div className="flex items-baseline justify-between text-sm">
|
|
<span className="text-muted-foreground">Reserviert</span>
|
|
<span className="tabular-nums font-medium">
|
|
{formatEurFromCents(reservedCents)}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div className="mb-2 flex items-baseline justify-between text-sm">
|
|
<span className="text-muted-foreground">
|
|
Monatskontingent
|
|
</span>
|
|
<span className="tabular-nums text-muted-foreground">
|
|
{usagePercent}%
|
|
</span>
|
|
</div>
|
|
<Progress value={usagePercent} className="h-1.5" />
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs leading-relaxed text-muted-foreground/80">
|
|
Bei fehlgeschlagenen Jobs werden reservierte Credits automatisch
|
|
freigegeben.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Active Generation */}
|
|
<div className="rounded-2xl border bg-card p-6 shadow-sm shadow-foreground/3">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Sparkles className="size-3.5" />
|
|
<span>Aktive Generierung</span>
|
|
</div>
|
|
<Badge className="gap-1.5 font-normal">
|
|
<span className="relative inline-flex size-1.5">
|
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-primary-foreground/60 opacity-75" />
|
|
<span className="relative inline-flex size-1.5 rounded-full bg-primary-foreground" />
|
|
</span>
|
|
Läuft
|
|
</Badge>
|
|
</div>
|
|
|
|
<h2 className="mt-4 text-lg font-medium">
|
|
Produktfotos — Variante 3/4
|
|
</h2>
|
|
|
|
<div className="mt-5">
|
|
<div className="mb-2 flex items-baseline justify-between text-sm">
|
|
<span className="text-muted-foreground">Fortschritt</span>
|
|
<span className="font-medium tabular-nums">62%</span>
|
|
</div>
|
|
<Progress value={62} className="h-1.5" />
|
|
</div>
|
|
|
|
<p className="mt-4 text-xs text-muted-foreground leading-relaxed">
|
|
Step 2 von 4 —{" "}
|
|
<span className="font-mono text-[0.7rem]">flux-schnell</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workspaces */}
|
|
<section className="mb-12">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm font-medium">
|
|
<LayoutTemplate className="size-3.5 text-muted-foreground" />
|
|
Workspaces
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-muted-foreground"
|
|
disabled
|
|
>
|
|
Neuer Workspace
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
{mockWorkspaces.map((ws) => (
|
|
<button
|
|
key={ws.name}
|
|
className={cn(
|
|
"group flex items-center gap-4 rounded-xl border bg-card p-4 text-left shadow-sm shadow-foreground/3 transition-all",
|
|
"hover:bg-muted/60 hover:shadow-md hover:shadow-foreground/4",
|
|
)}
|
|
disabled
|
|
>
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-sm font-semibold text-primary">
|
|
{ws.initial}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{ws.name}</p>
|
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
|
{ws.nodes} Nodes · {ws.frames} Frames
|
|
</p>
|
|
</div>
|
|
<ArrowUpRight className="size-4 text-muted-foreground/0 transition-colors group-hover:text-muted-foreground" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Recent Activity */}
|
|
<section>
|
|
<div className="mb-4 flex items-center gap-2 text-sm font-medium">
|
|
<Activity className="size-3.5 text-muted-foreground" />
|
|
Letzte Aktivität
|
|
</div>
|
|
|
|
<div className="rounded-xl border bg-card shadow-sm shadow-foreground/3">
|
|
<div className="divide-y">
|
|
{mockRuns.map((run) => (
|
|
<div
|
|
key={run.id}
|
|
className="flex items-center gap-4 px-5 py-3.5"
|
|
>
|
|
<StatusDot status={run.status} />
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="truncate text-sm font-medium">
|
|
{run.workspace}
|
|
</span>
|
|
<span className="shrink-0 text-xs text-muted-foreground">
|
|
{run.node}
|
|
</span>
|
|
</div>
|
|
<div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
|
|
{run.model !== "—" && (
|
|
<span className="font-mono text-[0.7rem]">
|
|
{run.model}
|
|
</span>
|
|
)}
|
|
{run.credits > 0 && (
|
|
<>
|
|
<span aria-hidden>·</span>
|
|
<span className="tabular-nums">{run.credits} ct</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shrink-0 text-right">
|
|
<span className="text-xs text-muted-foreground">
|
|
{statusLabel(run.status)}
|
|
</span>
|
|
<p className="mt-0.5 text-[0.7rem] text-muted-foreground/70">
|
|
{run.updated}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|