Admin overview

"use client";

import {
  AppShell,
  Avatar,
  AvatarFallback,
  AvatarImage,
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  Metric,
  MetricDelta,
  MetricLabel,
  MetricValue,
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
  SidebarTrigger,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cooud-ui/ui";
import {
  ChartColumnIncreasing,
  CreditCard,
  LayoutDashboard,
  Settings,
  ShoppingCart,
  Users,
} from "lucide-react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

const nav = [
  { id: "overview", label: "Overview", icon: LayoutDashboard },
  { id: "users", label: "Users", icon: Users },
  { id: "orders", label: "Orders", icon: ShoppingCart },
  { id: "billing", label: "Billing", icon: CreditCard },
  { id: "settings", label: "Settings", icon: Settings },
];

const status = [
  { label: "Monthly volume", value: "$312.8k", delta: "+8.4%", trend: "up" as const, badge: { text: "Healthy", variant: "success" as const } },
  { label: "Open orders", value: "184", delta: "+12", trend: "up" as const, badge: { text: "Processing", variant: "info" as const } },
  { label: "Refund rate", value: "2.1%", delta: "+0.5%", trend: "up" as const, badge: { text: "Watch", variant: "warning" as const } },
];

const signupsData = [
  { day: "Mon", signups: 142 },
  { day: "Tue", signups: 188 },
  { day: "Wed", signups: 164 },
  { day: "Thu", signups: 221 },
  { day: "Fri", signups: 276 },
  { day: "Sat", signups: 198 },
  { day: "Sun", signups: 152 },
];

const signupsConfig = {
  signups: { label: "Signups", color: "var(--color-chart-2)" },
} satisfies ChartConfig;

const rows = [
  { id: "u1", name: "Mara Castillo", email: "mara@northwind.io", initials: "MC", avatar: "https://i.pravatar.cc/96?img=12", role: "Owner", roleVariant: "primary" as const, orders: 42, spend: "$18,240", status: "Active", statusVariant: "success" as const },
  { id: "u2", name: "Devon Lane", email: "devon@acme.dev", initials: "DL", avatar: "https://i.pravatar.cc/96?img=33", role: "Admin", roleVariant: "info" as const, orders: 28, spend: "$9,610", status: "Active", statusVariant: "success" as const },
  { id: "u3", name: "Priya Sharma", email: "priya@lumon.co", initials: "PS", role: "Member", roleVariant: "secondary" as const, orders: 11, spend: "$3,180", status: "Invited", statusVariant: "warning" as const },
  { id: "u4", name: "Tobias Funke", email: "tobias@bluth.com", initials: "TF", avatar: "https://i.pravatar.cc/96?img=68", role: "Member", roleVariant: "secondary" as const, orders: 6, spend: "$1,420", status: "Suspended", statusVariant: "error" as const },
  { id: "u5", name: "Aiko Tanaka", email: "aiko@hooli.com", initials: "AT", role: "Member", roleVariant: "secondary" as const, orders: 19, spend: "$6,050", status: "Active", statusVariant: "success" as const },
];

export function DashboardAdminOverviewBlock() {
  const sidebar = (
    <Sidebar collapsible="icon" aria-label="Admin">
      <SidebarHeader>
        <div className="flex items-center gap-2 px-1.5 py-1.5 group-data-[collapsible=icon]/sidebar:justify-center group-data-[collapsible=icon]/sidebar:px-0">
          <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
            <ChartColumnIncreasing className="size-4" aria-hidden="true" />
          </span>
          <span className="truncate text-sm font-semibold text-fg group-data-[collapsible=icon]/sidebar:hidden">
            Cooud Admin
          </span>
        </div>
      </SidebarHeader>
      <SidebarSeparator />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Manage</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {nav.map((item, index) => (
                <SidebarMenuItem key={item.id}>
                  <SidebarMenuButton isActive={index === 1} tooltip={item.label}>
                    <item.icon aria-hidden="true" />
                    <span>{item.label}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Lena Park">
              <Avatar className="size-6">
                <AvatarImage src="https://i.pravatar.cc/96?img=5" alt="Lena Park" />
                <AvatarFallback>LP</AvatarFallback>
              </Avatar>
              <span>Lena Park</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );

  const header = (
    <div className="flex w-full items-center gap-3">
      <SidebarTrigger />
      <div className="flex flex-col">
        <span className="text-sm font-semibold text-fg">Admin overview</span>
        <span className="text-xs text-fg-tertiary">Toggle the sidebar to collapse to icons</span>
      </div>
      <div className="ml-auto flex items-center gap-2">
        <Button variant="outline" size="sm">Export</Button>
        <Button variant="gradient" size="sm">New user</Button>
      </div>
    </div>
  );

  return (
    <div className="h-[40rem] w-full overflow-hidden rounded-xl border border-border bg-surface-base">
      <AppShell sidebar={sidebar} header={header} className="h-full" providerProps={{ defaultOpen: false, enableKeyboardShortcut: false }}>
        <div className="flex flex-col gap-6 p-6">
          <div className="grid gap-4 md:grid-cols-3">
            {status.map(({ label, value, delta, trend, badge }) => (
              <Card key={label} className="gap-4 py-5">
                <CardContent className="flex flex-col gap-3">
                  <div className="flex items-center justify-between gap-3">
                    <MetricLabel>{label}</MetricLabel>
                    <Badge variant={badge.variant}>{badge.text}</Badge>
                  </div>
                  <Metric className="gap-1.5">
                    <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                      <MetricValue className="text-3xl">{value}</MetricValue>
                      <MetricDelta trend={trend}>{delta}</MetricDelta>
                    </div>
                  </Metric>
                </CardContent>
              </Card>
            ))}
          </div>

          <Card>
            <CardHeader className="flex-row items-center justify-between gap-3">
              <div className="flex flex-col gap-1">
                <CardTitle className="font-display text-base">New signups</CardTitle>
                <p className="text-sm text-fg-secondary">Last 7 days</p>
              </div>
              <MetricDelta trend="up">+11.2%</MetricDelta>
            </CardHeader>
            <CardContent>
              <ChartContainer config={signupsConfig} className="aspect-[16/5] w-full">
                <AreaChart accessibilityLayer data={signupsData} margin={{ left: 4, right: 4 }}>
                  <defs>
                    <linearGradient id="fillSignups" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="var(--color-chart-2)" stopOpacity={0.4} />
                      <stop offset="95%" stopColor="var(--color-chart-2)" stopOpacity={0.04} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid vertical={false} />
                  <XAxis dataKey="day" tickLine={false} axisLine={false} tickMargin={8} fontSize={12} />
                  <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
                  <Area dataKey="signups" type="natural" fill="url(#fillSignups)" stroke="var(--color-chart-2)" strokeWidth={2} />
                </AreaChart>
              </ChartContainer>
            </CardContent>
          </Card>

          <Card className="gap-0 py-0">
            <CardHeader className="flex-row items-center justify-between gap-3 px-6 py-5">
              <div className="flex flex-col gap-1">
                <CardTitle className="font-display text-base">Users &amp; orders</CardTitle>
                <p className="text-sm text-fg-secondary">All workspace accounts</p>
              </div>
              <Badge variant="secondary">{rows.length} total</Badge>
            </CardHeader>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>User</TableHead>
                  <TableHead>Role</TableHead>
                  <TableHead className="text-right">Orders</TableHead>
                  <TableHead className="text-right">Spend</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    <TableCell>
                      <div className="flex items-center gap-3">
                        <Avatar className="size-8">
                          {row.avatar ? <AvatarImage src={row.avatar} alt={row.name} /> : null}
                          <AvatarFallback>{row.initials}</AvatarFallback>
                        </Avatar>
                        <div className="flex min-w-0 flex-col">
                          <span className="truncate text-sm font-medium text-fg">{row.name}</span>
                          <span className="truncate text-xs text-fg-tertiary">{row.email}</span>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell><Badge variant={row.roleVariant}>{row.role}</Badge></TableCell>
                    <TableCell className="text-right tabular-nums text-fg-secondary">{row.orders}</TableCell>
                    <TableCell className="text-right font-medium tabular-nums text-fg">{row.spend}</TableCell>
                    <TableCell><Badge variant={row.statusVariant}>{row.status}</Badge></TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>
        </div>
      </AppShell>
    </div>
  );
}