goodgo-platform/apps/web/app/[locale]/(public)/design-system/page.tsx

'use client';

import {
  Activity,
  Bell,
  Building2,
  Home,
  LineChart,
  Map,
  User2,
} from 'lucide-react';
import {
  CompactHeader,
  DashboardLayout,
  DataTable,
  MarketIndex,
  PriceDelta,
  StatCard,
  TickerStrip,
  type DataTableColumn,
} from '@/components/design-system';

type DistrictRow = {
  id: string;
  code: string;
  name: string;
  price: number; // tr/m²
  changePercent: number;
  volume: number;
  area: number;
};

const tickerItems = [
  { id: 't-q1', label: 'Q1', changePercent: 2.3 },
  { id: 't-q2', label: 'Q2', changePercent: 0.5 },
  { id: 't-q7', label: 'Q7', changePercent: -1.1 },
  { id: 't-bt', label: 'BT', changePercent: 0.0 },
  { id: 't-td', label: 'TĐ', changePercent: 1.8 },
  { id: 't-gv', label: 'GV', changePercent: -0.4 },
  { id: 't-q9', label: 'Q9', changePercent: 3.1 },
  { id: 't-tb', label: 'TB', changePercent: 0.2 },
];

const rows: DistrictRow[] = [
  { id: 'q1', code: 'Q1', name: 'Quận 1', price: 152.4, changePercent: 2.3, volume: 42, area: 78 },
  { id: 'q2', code: 'Q2', name: 'Quận 2', price: 98.7, changePercent: 0.5, volume: 55, area: 120 },
  { id: 'q7', code: 'Q7', name: 'Quận 7', price: 85.2, changePercent: -1.1, volume: 67, area: 95 },
  { id: 'bt', code: 'BT', name: 'Bình Thạnh', price: 72.0, changePercent: 0.0, volume: 29, area: 88 },
  { id: 'td', code: 'TĐ', name: 'Thủ Đức', price: 58.9, changePercent: 1.8, volume: 91, area: 102 },
  { id: 'q9', code: 'Q9', name: 'Quận 9', price: 45.2, changePercent: 3.1, volume: 112, area: 110 },
  { id: 'tb', code: 'TB', name: 'Tân Bình', price: 76.5, changePercent: 0.2, volume: 38, area: 82 },
  { id: 'gv', code: 'GV', name: 'Gò Vấp', price: 62.3, changePercent: -0.4, volume: 44, area: 76 },
];

const columns: DataTableColumn<DistrictRow>[] = [
  {
    id: 'code',
    header: 'Mã',
    cell: (r) => <span className="font-mono text-foreground">{r.code}</span>,
    width: '64px',
    sortable: true,
    sortValue: (r) => r.code,
  },
  {
    id: 'name',
    header: 'Khu vực',
    cell: (r) => <span>{r.name}</span>,
    sortable: true,
    sortValue: (r) => r.name,
  },
  {
    id: 'price',
    header: 'Giá TB (tr/m²)',
    cell: (r) => r.price.toFixed(1),
    align: 'right',
    numeric: true,
    sortable: true,
    sortValue: (r) => r.price,
  },
  {
    id: 'delta',
    header: 'Δ 7d',
    cell: (r) => <PriceDelta value={r.changePercent} size="sm" />,
    align: 'right',
    sortable: true,
    sortValue: (r) => r.changePercent,
  },
  {
    id: 'area',
    header: 'DT TB (m²)',
    cell: (r) => r.area,
    align: 'right',
    numeric: true,
    sortable: true,
    sortValue: (r) => r.area,
  },
  {
    id: 'volume',
    header: 'KL',
    cell: (r) => r.volume,
    align: 'right',
    numeric: true,
    sortable: true,
    sortValue: (r) => r.volume,
  },
];

const sidebarItems = [
  { icon: Home, label: 'Trang chủ' },
  { icon: Building2, label: 'Listings' },
  { icon: Map, label: 'Bản đồ' },
  { icon: LineChart, label: 'Thị trường' },
  { icon: Activity, label: 'Hoạt động' },
];

export default function DesignSystemDemoPage() {
  return (
    <DashboardLayout
      sidebarCollapsed
      ticker={<TickerStrip items={tickerItems} />}
      sidebar={
        <nav className="flex flex-col items-center gap-1 py-3">
          {sidebarItems.map((item) => (
            <button
              key={item.label}
              type="button"
              title={item.label}
              className="flex h-10 w-10 items-center justify-center rounded-md text-foreground-muted hover:bg-background-surface hover:text-foreground"
            >
              <item.icon className="h-4 w-4" />
            </button>
          ))}
        </nav>
      }
      header={
        <CompactHeader
          logo={
            <span className="font-mono text-sm font-semibold text-primary">
              GOODGO
            </span>
          }
          breadcrumb={
            <span>
              <span className="text-foreground-dim">/</span> Design System{' '}
              <span className="text-foreground-dim">/</span> Demo
            </span>
          }
          actions={
            <>
              <button
                type="button"
                className="flex h-8 w-8 items-center justify-center rounded-md text-foreground-muted hover:bg-background-surface"
                aria-label="Thông báo"
              >
                <Bell className="h-4 w-4" />
              </button>
              <button
                type="button"
                className="flex h-8 w-8 items-center justify-center rounded-md text-foreground-muted hover:bg-background-surface"
                aria-label="Tài khoản"
              >
                <User2 className="h-4 w-4" />
              </button>
            </>
          }
        />
      }
      statusBar={
        <>
          <span>
            <span className="mr-1 inline-block h-2 w-2 rounded-full bg-signal-up" />
            Online
          </span>
          <span>Cập nhật: 14:32:07</span>
          <span className="ml-auto font-mono">GGX 1,245.82 +1.3%</span>
        </>
      }
    >
      <div className="space-y-6">
        <section className="flex items-end justify-between">
          <MarketIndex
            name="GGX Market Index"
            value="1,245.82"
            changePercent={1.32}
            change={+16.24}
            window="24h"
          />
          <div className="flex gap-2 text-[11px] text-foreground-muted">
            <span className="rounded-sm border border-border px-2 py-0.5">24h</span>
            <span className="rounded-sm border border-border px-2 py-0.5">7d</span>
            <span className="rounded-sm border border-border px-2 py-0.5">30d</span>
          </div>
        </section>

        <section className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <StatCard label="Tổng tin" value="12,345" sublabel="24h" delta={0.8} />
          <StatCard label="Giao dịch" value="234" sublabel="24h" delta={-2.1} />
          <StatCard label="Giá TB" value="45.2" unit="tr/m²" sublabel="7d" delta={1.8} />
          <StatCard label="Biến động" value="1.32" unit="%" sublabel="7d" delta={1.32} />
        </section>

        <section>
          <h2 className="mb-2 text-xs font-semibold uppercase tracking-wide text-foreground-muted">
            Bảng giá top khu vực
          </h2>
          <DataTable
            columns={columns}
            data={rows}
            getRowId={(r) => r.id}
            defaultSortId="price"
            defaultSortDir="desc"
          />
        </section>

        <section className="grid gap-3 md:grid-cols-3">
          <div className="rounded-md border border-border bg-background-elevated p-4">
            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-foreground-muted">
              PriceDelta variants
            </h3>
            <div className="flex flex-col gap-1 text-sm">
              <PriceDelta value={2.34} />
              <PriceDelta value={-1.21} />
              <PriceDelta value={0} />
              <PriceDelta value={5.5} size="lg" />
            </div>
          </div>
          <div className="rounded-md border border-border bg-background-elevated p-4">
            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-foreground-muted">
              Signal palette
            </h3>
            <div className="flex flex-col gap-2 text-xs">
              <div className="flex items-center gap-2">
                <span className="h-3 w-3 rounded-sm bg-signal-up" /> signal-up
              </div>
              <div className="flex items-center gap-2">
                <span className="h-3 w-3 rounded-sm bg-signal-down" /> signal-down
              </div>
              <div className="flex items-center gap-2">
                <span className="h-3 w-3 rounded-sm bg-signal-neutral" /> signal-neutral
              </div>
            </div>
          </div>
          <div className="rounded-md border border-border bg-background-elevated p-4">
            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-foreground-muted">
              Typography
            </h3>
            <div className="flex flex-col gap-1">
              <span className="font-mono text-data-lg">1,245.82</span>
              <span className="font-mono text-data-md">45.2 tr/m²</span>
              <span className="font-mono text-data-sm">+1.32%</span>
              <span className="text-sm text-foreground-muted">Inter body</span>
            </div>
          </div>
        </section>
      </div>
    </DashboardLayout>
  );
}