@godxjp/ui 31.31.8 → 32.0.0

package/docs/showcase/case1-warehouse-dashboard.tsx

@@ -1,358 +0,0 @@
-/**
- * Showcase · case1 — Warehouse Dashboard (Tổng quan kho)
- *
- * A full standalone admin/勤怠 dashboard page, served at `/showcase/case1-warehouse-dashboard`.
- * Built ENTIRELY from real @godxjp/ui primitives — the reference-design handoff
- * recreated as a "skeleton" (intent + look), not a transcription of its prototype DOM.
- *
- * Composition map (prototype block → @godxjp/ui primitive):
- *   page chrome ............ AppShell + Sidebar + Topbar
- *   page header + actions .. PageContainer (extra slot) + Button
- *   KPI row ................ ResponsiveGrid + StatCard
- *   "Cần xử lý" queue ...... Card + rows + Badge(tone) + Button
- *   "Hoạt động" feed ....... Card + Timeline
- *   capacity heatmap ....... Card + Progress (per zone) — no hand-rolled heat divs
- *   recent shipments ....... Card + Table + Badge(tone)
- *
- * DNA applied: compact density, small headings, fixed color signaling
- * (success 若竹 / warning 山吹 / attention 朱 / danger 茜), tabular numerics,
- * quiet factual copy, no emoji.
- */
-import * as React from "react";
-import {
-  AlertTriangle,
-  Box,
-  LayoutDashboard,
-  type LucideIcon,
-  Package,
-  RefreshCw,
-  Download,
-  ReceiptText,
-  Smartphone,
-  Truck,
-  Boxes,
-  MapPin,
-  Tags,
-} from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  ListRow,
-  Progress,
-  StatCard,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Timeline,
-  type BadgeProps,
-  type TimelineItem,
-} from "@godxjp/ui/data-display";
-
-/** Badge tone vocabulary (not re-exported by name — derive from BadgeProps). */
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  ResponsiveGrid,
-  Sidebar,
-  type SidebarSectionProp,
-} from "@godxjp/ui/layout";
-
-// ── Mock data (lifted from the design's admin/data.jsx) ───────────────────────
-
-const KPIS: Array<{ label: string; value: number; delta: string; inverse?: boolean }> = [
-  // `inverse` flips delta semantics where a rise is bad (more backlog = worse).
-  { label: "Item chưa phân loại", value: 9, delta: "+3 trong 2h qua", inverse: true },
-  { label: "Kiện đang mở", value: 5, delta: "12 item chưa gán" },
-  { label: "Hóa đơn đang chờ", value: 3, delta: "-1 đã thanh toán", inverse: true },
-  { label: "Chuyến hàng tuần này", value: 8, delta: "+2 vs tuần trước" },
-];
-
-type QueueTone = Extract<BadgeTone, "warning" | "destructive" | "info" | "muted">;
-
-const QUEUE: Array<{
-  icon: LucideIcon;
-  tone: QueueTone;
-  title: string;
-  meta: string;
-  action: string;
-}> = [
-  {
-    icon: Smartphone,
-    tone: "warning",
-    title: "2 thiết bị đang chờ duyệt",
-    meta: "Phạm Văn C · iPhone 13 mini · 14:12 · cách đây 30 phút",
-    action: "Mở danh sách",
-  },
-  {
-    icon: AlertTriangle,
-    tone: "destructive",
-    title: "Hoá đơn INV-2080 trễ 4 ngày",
-    meta: "Lê Hùng · ZOZOTOWN · 9.800¥ · 2 line item",
-    action: "Xem hóa đơn",
-  },
-  {
-    icon: Tags,
-    tone: "warning",
-    title: "9 item chưa phân loại",
-    meta: "2 cái > 24 giờ chưa lên giá · ưu tiên xếp",
-    action: "Xem item",
-  },
-  {
-    icon: Box,
-    tone: "info",
-    title: "PKG-000038 sẵn sàng tạo chuyến",
-    meta: "Bùi Hà · Hà Nội · 8 item · 2,8kg · đã đóng từ hôm qua",
-    action: "Tạo chuyến",
-  },
-];
-
-const ACTIVITY: TimelineItem[] = [
-  { title: "Nguyễn Văn A đã đóng kiện PKG-000040", time: "Hôm nay · 10:15", current: true },
-  { title: "Trần Thị B đã thêm 3 item vào PKG-000042", time: "Hôm nay · 10:08" },
-  { title: "Hoá đơn INV-2080 trễ 4 ngày", time: "Hôm nay · 09:42" },
-  { title: "Phạm Văn C yêu cầu duyệt iPhone 13 mini", time: "Hôm qua · 14:12" },
-  { title: "Nguyễn Văn A đã nhập kho INV-2089 (1 item)", time: "Hôm qua · 13:42" },
-  { title: "Hệ thống đã tạo shipment SHP-083", time: "Hôm qua · 11:18" },
-];
-
-const CAPACITY: Array<{ zone: string; used: number; cap: number }> = [
-  { zone: "Zone A", used: 18, cap: 40 },
-  { zone: "Zone B", used: 31, cap: 40 },
-  { zone: "Zone C", used: 38, cap: 40 },
-  { zone: "Zone D", used: 6, cap: 40 },
-];
-
-const SHIPMENTS: Array<{
-  id: string;
-  route: string;
-  status: string;
-  tone: BadgeTone;
-  pkg: number;
-}> = [
-  { id: "SHP-085", route: "Saitama → Hà Nội", status: "Đang giao", tone: "info", pkg: 12 },
-  { id: "SHP-084", route: "Saitama → TP.HCM", status: "Đã đến", tone: "success", pkg: 9 },
-  { id: "SHP-083", route: "Saitama → Đà Nẵng", status: "Đang giao", tone: "info", pkg: 7 },
-  { id: "SHP-082", route: "Saitama → Hà Nội", status: "Chờ xuất", tone: "warning", pkg: 5 },
-  { id: "SHP-081", route: "Saitama → TP.HCM", status: "Đã đến", tone: "success", pkg: 14 },
-];
-
-// ── Sidebar ───────────────────────────────────────────────────────────────────
-
-const NAV_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "Vận hành",
-    items: [
-      { id: "dashboard", label: "Tổng quan", icon: LayoutDashboard },
-      { id: "items", label: "Item", icon: Boxes, badge: 9 },
-      { id: "packings", label: "Đóng kiện", icon: Package, badge: 5 },
-      { id: "shipments", label: "Chuyến hàng", icon: Truck },
-    ],
-  },
-  {
-    label: "Quản lý",
-    items: [
-      { id: "invoices", label: "Hóa đơn", icon: ReceiptText, badge: 3 },
-      { id: "locations", label: "Vị trí kho", icon: MapPin },
-      { id: "devices", label: "Thiết bị", icon: Smartphone, badge: 2 },
-    ],
-  },
-];
-
-function capacityTone(pct: number): "success" | "warning" {
-  // Color signaling is fixed-mapping; Progress only offers success/warning tones.
-  return pct < 0.85 ? "success" : "warning";
-}
-
-export default function WarehouseDashboardShowcase() {
-  const [activeNav, setActiveNav] = React.useState("dashboard");
-
-  const sidebar = (
-    <Sidebar
-      activeId={activeNav}
-      onSelect={setActiveNav}
-      sections={NAV_SECTIONS}
-      product={{ name: "Acme", role: "Kho B · Saitama" }}
-    />
-  );
-
-  return (
-    <AppShell
-      sidebar={sidebar}
-      topbarLeft={<Text as="strong">Tổng quan kho</Text>}
-      topbarRight={
-        <Text size="xs" tone="muted" tabular>
-          cập nhật 14:32 · 26/05/2026
-        </Text>
-      }
-    >
-      <PageContainer
-        title="Tổng quan"
-        subtitle="Kho B · Acme Saitama"
-        density="compact"
-        extra={
-          <Flex direction="row" gap="sm">
-            <Button variant="outline" size="sm">
-              <RefreshCw aria-hidden="true" />
-              Làm mới
-            </Button>
-            <Button variant="outline" size="sm">
-              <Download aria-hidden="true" />
-              Báo cáo
-            </Button>
-          </Flex>
-        }
-      >
-        <Flex direction="col" gap="lg">
-          {/* KPI row */}
-          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-            {KPIS.map((k) => (
-              <StatCard
-                key={k.label}
-                label={k.label}
-                value={k.value}
-                delta={k.delta}
-                inverse={k.inverse}
-              />
-            ))}
-          </ResponsiveGrid>
-
-          {/* Queue + Activity */}
-          <ResponsiveGrid columns={{ sm: 1, md: 1, lg: 2 }}>
-            <Card className="self-start">
-              <CardHeader>
-                <CardTitle level={2}>Cần xử lý</CardTitle>
-                <CardAction>
-                  <Text size="xs" tone="muted">
-                    {QUEUE.length} hàng đợi
-                  </Text>
-                </CardAction>
-              </CardHeader>
-              <CardContent flush>
-                <ul className="divide-border divide-y">
-                  {QUEUE.map((q) => {
-                    return (
-                      <ListRow
-                        as="li"
-                        key={q.title}
-                        leading={
-                          <Badge
-                            tone={q.tone}
-                            variant="outline"
-                            icon={q.icon}
-                            aria-label={q.title}
-                          />
-                        }
-                        title={q.title}
-                        description={q.meta}
-                        trailing={
-                          <Button variant="outline" size="sm">
-                            {q.action}
-                          </Button>
-                        }
-                      />
-                    );
-                  })}
-                </ul>
-              </CardContent>
-            </Card>
-
-            <Card className="self-start">
-              <CardHeader>
-                <CardTitle level={2}>Hoạt động gần đây</CardTitle>
-                <CardAction>
-                  <Text size="xs" tone="muted">
-                    24h qua
-                  </Text>
-                </CardAction>
-              </CardHeader>
-              <CardContent>
-                <Timeline items={ACTIVITY} />
-              </CardContent>
-            </Card>
-          </ResponsiveGrid>
-
-          {/* Capacity + Recent shipments */}
-          <ResponsiveGrid columns={{ sm: 1, md: 1, lg: 2 }}>
-            <Card className="self-start">
-              <CardHeader>
-                <CardTitle level={2}>Dung lượng giá hàng</CardTitle>
-                <CardAction>
-                  <Button variant="ghost" size="sm">
-                    Xem tất cả
-                  </Button>
-                </CardAction>
-              </CardHeader>
-              <CardContent>
-                <Flex direction="col" gap="md">
-                  {CAPACITY.map((c) => {
-                    const pct = c.used / c.cap;
-                    return (
-                      <Progress
-                        key={c.zone}
-                        value={Math.round(pct * 100)}
-                        label={`${c.zone} · ${c.used}/${c.cap}`}
-                        tone={capacityTone(pct)}
-                      />
-                    );
-                  })}
-                </Flex>
-              </CardContent>
-            </Card>
-
-            <Card className="self-start">
-              <CardHeader>
-                <CardTitle level={2}>Chuyến gần nhất</CardTitle>
-                <CardAction>
-                  <Button variant="ghost" size="sm">
-                    Tất cả
-                  </Button>
-                </CardAction>
-              </CardHeader>
-              <CardContent flush>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Mã</TableHead>
-                      <TableHead>Tuyến</TableHead>
-                      <TableHead>Trạng thái</TableHead>
-                      <TableHead className="text-end">Kiện</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {SHIPMENTS.map((s) => (
-                      <TableRow key={s.id}>
-                        <TableCell>
-                          <Text mono size="xs">
-                            {s.id}
-                          </Text>
-                        </TableCell>
-                        <TableCell>{s.route}</TableCell>
-                        <TableCell>
-                          <Badge tone={s.tone} variant="outline">
-                            {s.status}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-end tabular-nums">{s.pkg}</TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}