Dashboard 03

// Dashboard 03 from Hirael <https://hirael.com/blocks/dashboard/dashboard-03>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { Check, ChevronLeft, ChevronRight, Download } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Badge } from '@/registry/hirael/bases/radix/ui/badge';
import { Button } from '@/registry/hirael/bases/radix/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/hirael/bases/radix/ui/card';
import { Separator } from '@/registry/hirael/bases/radix/ui/separator';

type PlanName = 'Pro' | 'Team' | 'Enterprise';
type InvoiceState = 'Paid' | 'Open' | 'Overdue';

const PLAN_TONE: Record<PlanName, { stroke: string; swatch: string }> = {
  Pro: { stroke: 'stroke-foreground/85', swatch: 'bg-foreground/85' },
  Team: {
    stroke: 'stroke-muted-foreground/50',
    swatch: 'bg-muted-foreground/50',
  },
  Enterprise: {
    stroke: 'stroke-muted-foreground/20',
    swatch: 'bg-muted-foreground/20',
  },
};

const INVOICE_TONE: Record<InvoiceState, string> = {
  Paid: 'bg-success',
  Open: 'bg-muted-foreground/50',
  Overdue: 'bg-destructive',
};

interface PlanSlice {
  plan: PlanName;
  share: number;
  mrr: number;
}

interface MonthData {
  label: string;
  total: number;
  delta: number;
  comparedWith: string;
  plans: readonly PlanSlice[];
  invoices: readonly { state: InvoiceState; count: number; amount: number }[];
}

const MONTHS: readonly MonthData[] = [
  {
    label: 'February 2025',
    total: 38410,
    delta: 6.1,
    comparedWith: 'Jan',
    plans: [
      { plan: 'Pro', share: 48, mrr: 18436 },
      { plan: 'Team', share: 33, mrr: 12675 },
      { plan: 'Enterprise', share: 19, mrr: 7299 },
    ],
    invoices: [
      { state: 'Paid', count: 212, amount: 36180 },
      { state: 'Open', count: 18, amount: 1940 },
      { state: 'Overdue', count: 4, amount: 290 },
    ],
  },
  {
    label: 'March 2025',
    total: 41260,
    delta: 7.4,
    comparedWith: 'Feb',
    plans: [
      { plan: 'Pro', share: 46, mrr: 18980 },
      { plan: 'Team', share: 34, mrr: 14028 },
      { plan: 'Enterprise', share: 20, mrr: 8252 },
    ],
    invoices: [
      { state: 'Paid', count: 231, amount: 39410 },
      { state: 'Open', count: 14, amount: 1620 },
      { state: 'Overdue', count: 3, amount: 230 },
    ],
  },
  {
    label: 'April 2025',
    total: 44892,
    delta: 8.8,
    comparedWith: 'Mar',
    plans: [
      { plan: 'Pro', share: 44, mrr: 19752 },
      { plan: 'Team', share: 35, mrr: 15712 },
      { plan: 'Enterprise', share: 21, mrr: 9428 },
    ],
    invoices: [
      { state: 'Paid', count: 247, amount: 42950 },
      { state: 'Open', count: 16, amount: 1780 },
      { state: 'Overdue', count: 2, amount: 162 },
    ],
  },
];

interface Txn {
  initials: string;
  name: string;
  email: string;
  status: 'paid' | 'open' | 'refunded';
  date: string;
  amount: number;
}

const TRANSACTIONS: readonly Txn[] = [
  {
    initials: 'LV',
    name: 'Lena Voss',
    email: 'lena@hirael.com',
    status: 'paid',
    date: 'Apr 28',
    amount: 249,
  },
  {
    initials: 'DR',
    name: 'Dario Reyes',
    email: 'dario@hirael.com',
    status: 'paid',
    date: 'Apr 27',
    amount: 1188,
  },
  {
    initials: 'PB',
    name: 'Priya Banerjee',
    email: 'priya@hirael.com',
    status: 'open',
    date: 'Apr 27',
    amount: 96,
  },
  {
    initials: 'TW',
    name: 'Tomas Weber',
    email: 'tomas@hirael.com',
    status: 'refunded',
    date: 'Apr 26',
    amount: -249,
  },
  {
    initials: 'AK',
    name: 'Amara Keita',
    email: 'amara@hirael.com',
    status: 'paid',
    date: 'Apr 25',
    amount: 468,
  },
  {
    initials: 'HS',
    name: 'Hana Suzuki',
    email: 'hana@hirael.com',
    status: 'paid',
    date: 'Apr 24',
    amount: 96,
  },
];

const TXN_STATUS: Record<Txn['status'], { label: string; dot: string; amount: string }> = {
  paid: { label: 'Paid', dot: 'bg-success', amount: 'text-foreground' },
  open: {
    label: 'Open',
    dot: 'bg-muted-foreground/50',
    amount: 'text-muted-foreground',
  },
  refunded: {
    label: 'Refunded',
    dot: 'bg-destructive',
    amount: 'text-destructive',
  },
};

const PAGE_SIZE = 3;

const ENTER =
  'animate-in fade-in slide-in-from-bottom-2 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';
const SWAP =
  'animate-in fade-in slide-in-from-bottom-1 duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';

const usd = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

const usdCents = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
});

const signedUsd = (amount: number) => {
  const sign = amount > 0 ? '+' : amount < 0 ? '−' : '';

  return `${sign}${usdCents.format(Math.abs(amount))}`;
};

interface DonutProps {
  plans: readonly PlanSlice[];
}

const Donut = ({ plans }: DonutProps) => {
  return (
    <svg viewBox="0 0 42 42" aria-hidden className="size-44">
      <circle cx="21" cy="21" r="15.9155" fill="none" strokeWidth="4" className="stroke-accent" />
      {plans.map((p, i) => {
        // 25 rotates the first slice to 12 o'clock.
        const offset = 25 - plans.slice(0, i).reduce((sum, prev) => sum + prev.share, 0);

        return (
          <circle
            key={p.plan}
            cx="21"
            cy="21"
            r="15.9155"
            fill="none"
            strokeWidth="4"
            strokeDasharray={`${p.share - 1} ${100 - p.share + 1}`}
            strokeDashoffset={offset}
            className={PLAN_TONE[p.plan].stroke}
          />
        );
      })}
    </svg>
  );
};

const Dashboard03 = () => {
  const [monthIndex, setMonthIndex] = React.useState(MONTHS.length - 1);
  const [page, setPage] = React.useState(0);
  const [exported, setExported] = React.useState(false);

  React.useEffect(() => {
    if (!exported) return;
    const timeout = setTimeout(() => setExported(false), 2000);

    return () => clearTimeout(timeout);
  }, [exported]);

  const month = MONTHS[monthIndex];
  const pageCount = Math.ceil(TRANSACTIONS.length / PAGE_SIZE);
  const pageStart = page * PAGE_SIZE;
  const pageRows = TRANSACTIONS.slice(pageStart, pageStart + PAGE_SIZE);

  return (
    <section data-slot="dashboard" className="bg-background py-20 sm:py-28">
      <div className="mx-auto w-full max-w-[1480px] px-4">
        <div
          data-slot="dashboard-header"
          className={cn(ENTER, 'flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between')}
        >
          <div className="flex max-w-xl flex-col gap-3">
            <span className="text-xs text-muted-foreground uppercase">Revenue</span>
            <h2 className="font-serif text-4xl font-medium tracking-tight sm:text-5xl">Where the money lands.</h2>
          </div>
          <div className="flex items-center gap-2">
            <div className="flex items-center rounded-sm border border-border">
              <Button
                variant="ghost"
                size="icon-sm"
                onClick={() => setMonthIndex((i) => Math.max(0, i - 1))}
                disabled={monthIndex === 0}
                aria-label="Previous month"
              >
                <ChevronLeft className="size-3.5 rtl:rotate-180" aria-hidden />
              </Button>
              <span aria-live="polite" className="w-32 text-center text-xs tabular-nums">
                {month.label}
              </span>
              <Button
                variant="ghost"
                size="icon-sm"
                onClick={() => setMonthIndex((i) => Math.min(MONTHS.length - 1, i + 1))}
                disabled={monthIndex === MONTHS.length - 1}
                aria-label="Next month"
              >
                <ChevronRight className="size-3.5 rtl:rotate-180" aria-hidden />
              </Button>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setExported(true)}
              aria-label={exported ? `Exported ${month.label}` : `Export ${month.label}`}
            >
              {exported ? (
                <Check className="size-3.5 animate-in duration-250 zoom-in-50 motion-reduce:animate-none" aria-hidden />
              ) : (
                <Download className="size-3.5" aria-hidden />
              )}
              <span className="sr-only sm:not-sr-only sm:inline">{exported ? 'Exported' : 'Export'}</span>
            </Button>
          </div>
        </div>

        <div className={cn(ENTER, 'mt-10 grid grid-cols-1 gap-6 delay-80 lg:grid-cols-3 lg:items-start')}>
          <div className="flex flex-col gap-6">
            <Card data-slot="dashboard-plan-mix">
              <CardHeader>
                <CardDescription>
                  <span className="text-xs uppercase">plan mix</span>
                </CardDescription>
                <CardTitle className="sr-only">Plan mix</CardTitle>
              </CardHeader>
              <CardContent key={month.label} className={cn(SWAP, 'flex flex-col items-center')}>
                <div className="relative">
                  <Donut plans={month.plans} />
                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5">
                    <span className="text-2xl font-semibold tracking-[-0.035em] tabular-nums">
                      {usd.format(month.total)}
                    </span>
                    <span
                      dir="ltr"
                      className={cn(
                        'text-xs uppercase',
                        month.delta === 0
                          ? 'text-muted-foreground'
                          : month.delta > 0
                            ? 'text-success'
                            : 'text-destructive',
                      )}
                    >
                      {month.delta > 0 ? '+' : month.delta < 0 ? '−' : ''}
                      {Math.abs(month.delta)}% vs {month.comparedWith}
                    </span>
                  </div>
                </div>
                <ul className="mt-5 flex w-full flex-col gap-2.5">
                  {month.plans.map((p) => (
                    <li key={p.plan} className="flex items-center gap-2.5">
                      <span aria-hidden className={cn('size-2 rounded-xs', PLAN_TONE[p.plan].swatch)} />
                      <span className="text-xs text-foreground">{p.plan}</span>
                      <span className="ms-auto text-xs text-muted-foreground tabular-nums">{p.share}%</span>
                      <span className="w-16 text-end text-xs tabular-nums">{usd.format(p.mrr)}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

            <Card data-slot="dashboard-invoices">
              <CardHeader>
                <CardDescription>
                  <span className="text-xs uppercase">invoices</span>
                </CardDescription>
                <CardTitle className="sr-only">Invoices</CardTitle>
              </CardHeader>
              <CardContent key={month.label} className={cn(SWAP, 'flex flex-col')}>
                {month.invoices.map((inv, i) => (
                  <React.Fragment key={inv.state}>
                    {i > 0 && <Separator className="my-3" />}
                    <div className="flex items-center gap-2.5">
                      <span aria-hidden className={cn('size-1.5 rounded-full', INVOICE_TONE[inv.state])} />
                      <span className="text-xs text-foreground">{inv.state}</span>
                      <span className="ms-auto text-xs text-muted-foreground tabular-nums">{inv.count}</span>
                      <span className="w-20 text-end text-xs tabular-nums">{usd.format(inv.amount)}</span>
                    </div>
                  </React.Fragment>
                ))}
              </CardContent>
            </Card>
          </div>

          <Card data-slot="dashboard-transactions" className="lg:col-span-2">
            <CardHeader>
              <div className="flex items-center justify-between">
                <div className="flex flex-col gap-1">
                  <CardDescription>
                    <span className="text-xs uppercase">transactions</span>
                  </CardDescription>
                  <CardTitle>Latest activity</CardTitle>
                </div>
                <Button variant="link" size="sm" className="h-auto" asChild>
                  <a href="#">View all</a>
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div
                aria-hidden
                className="hidden grid-cols-[1fr_110px_70px_110px] gap-3 border-b border-border pb-2 text-xs text-muted-foreground uppercase sm:grid"
              >
                <span>Customer</span>
                <span>Status</span>
                <span>Date</span>
                <span className="text-end">Amount</span>
              </div>
              <ul key={page} className={cn(SWAP, 'flex flex-col')}>
                {pageRows.map((t, i) => {
                  const status = TXN_STATUS[t.status];

                  return (
                    <li
                      key={t.email}
                      className={cn(
                        'grid grid-cols-[1fr_auto] items-center gap-3 py-3 sm:grid-cols-[1fr_110px_70px_110px]',
                        i < pageRows.length - 1 && 'border-b border-border',
                      )}
                    >
                      <div className="flex min-w-0 items-center gap-3">
                        <span
                          aria-hidden
                          className="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium"
                        >
                          {t.initials}
                        </span>
                        <div className="flex min-w-0 flex-col">
                          <span className="truncate text-sm font-medium">{t.name}</span>
                          <span className="truncate text-[11px] text-muted-foreground">{t.email}</span>
                        </div>
                      </div>
                      <Badge variant="outline" className="hidden w-fit sm:inline-flex">
                        <span aria-hidden className={cn('size-1.5 rounded-full', status.dot)} />
                        {status.label}
                      </Badge>
                      <span className="hidden text-xs text-muted-foreground tabular-nums sm:inline">{t.date}</span>
                      <span dir="ltr" className={cn('text-end text-sm tabular-nums', status.amount)}>
                        <span className="sr-only">{status.label}, </span>
                        {signedUsd(t.amount)}
                      </span>
                    </li>
                  );
                })}
              </ul>
              <Separator />
              <div className="flex items-center justify-between px-6 pt-4">
                <span dir="ltr" aria-live="polite" className="text-xs text-muted-foreground uppercase tabular-nums">
                  {pageStart + 1}–{pageStart + pageRows.length} of {TRANSACTIONS.length}
                </span>
                <div className="flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setPage((p) => Math.max(0, p - 1))}
                    disabled={page === 0}
                  >
                    <ChevronLeft className="size-3.5 rtl:rotate-180" aria-hidden />
                    Prev
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
                    disabled={page >= pageCount - 1}
                  >
                    Next
                    <ChevronRight className="size-3.5 rtl:rotate-180" aria-hidden />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
};

export default Dashboard03;