@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/case2-employee-me.tsx

@@ -1,438 +0,0 @@
-/**
- * Showcase · case2 — 従業員ダッシュボード (/me)
- *
- * The employee self-service home (`/me/dashboard`), built ENTIRELY from real
- * @godxjp/ui primitives. 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 slots
- *   page header + status ... PageContainer (extra slot) + Badge(tone)
- *   PunchCard FSM .......... Card + Button + Badge(tone) + Alert — renders ONLY
- *                            the valid actions for the current session state
- *                            (Off → Working → Break → Closed); checkout locked
- *                            on break shown via Alert tone="warning".
- *   month KPI 2×2 .......... ResponsiveGrid + StatCard (tabular value + delta)
- *   7-day attendance ....... Card + Table + Badge(tone), tabular-nums
- *   today summary .......... Card + Descriptions-style key/value rows
- *
- * DNA applied: default density (comfortable touch on the punch buttons where
- * tapped), small headings, fixed color signaling (success 若竹 / warning 山吹 /
- * attention 朱 / info 群青), tabular numerics, bilingual JP·VI labels on the
- * shared employee surface, quiet factual copy, no emoji.
- */
-import * as React from "react";
-import {
-  CalendarDays,
-  ClipboardList,
-  Clock,
-  Coffee,
-  LayoutDashboard,
-  LogIn,
-  MapPin,
-  RotateCcw,
-  Settings,
-  Square,
-} from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
-import {
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  StatCard,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  type BadgeProps,
-} from "@godxjp/ui/data-display";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  ResponsiveGrid,
-  Separator,
-  Sidebar,
-  type SidebarSectionProp,
-} from "@godxjp/ui/layout";
-
-/** Badge tone vocabulary (derive from BadgeProps — not separately re-exported). */
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-
-// ── /me sidebar (single section — the employee surface is minimal) ────────────
-
-const NAV_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "マイページ",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "my-shifts", label: "マイシフト", icon: CalendarDays },
-      { id: "timesheet", label: "勤怠表", icon: ClipboardList },
-      { id: "settings", label: "設定", icon: Settings },
-    ],
-  },
-];
-
-// ── Punch FSM ─────────────────────────────────────────────────────────────────
-//
-// The cardinal attendance UX rule: render ONLY the actions valid for the current
-// session state — never four disabled buttons. State derives from the last punch
-// log (CheckIn / BreakStart / BreakEnd / CheckOut).
-
-type PunchState = "off" | "working" | "break" | "closed";
-
-const PUNCH_STATUS: Record<
-  PunchState,
-  { label: string; tone: Extract<BadgeTone, "success" | "warning" | "neutral">; meta: string }
-> = {
-  off: { label: "未出勤 · Chưa chấm công", tone: "neutral", meta: "本日の打刻はまだありません" },
-  working: {
-    label: "勤務中 · Đang làm",
-    tone: "success",
-    meta: "出勤 09:30 · 渋谷店 · 経過 4時間12分",
-  },
-  break: { label: "休憩中 · Nghỉ giải lao", tone: "warning", meta: "休憩開始 13:48 · 経過 12分" },
-  closed: {
-    label: "退勤済 · Đã tan ca",
-    tone: "neutral",
-    meta: "09:30 → 18:12 · 休憩 24分 · 残業 0時間",
-  },
-};
-
-/** A punch button descriptor. `comfortable` density floors these at the 44px touch target. */
-type PunchAction = {
-  key: string;
-  label: string;
-  icon: React.ComponentType<{ className?: string }>;
-  variant: NonNullable<React.ComponentProps<typeof Button>["variant"]>;
-  next: PunchState;
-};
-
-const PUNCH_ACTIONS: Record<PunchState, PunchAction[]> = {
-  off: [{ key: "in", label: "出勤 · Check In", icon: LogIn, variant: "default", next: "working" }],
-  working: [
-    {
-      key: "break-start",
-      label: "休憩開始 · Nghỉ",
-      icon: Coffee,
-      variant: "outline",
-      next: "break",
-    },
-    { key: "out", label: "退勤 · Check Out", icon: Square, variant: "destructive", next: "closed" },
-  ],
-  break: [
-    {
-      key: "break-end",
-      label: "休憩終了 · Kết thúc nghỉ",
-      icon: RotateCcw,
-      variant: "default",
-      next: "working",
-    },
-  ],
-  closed: [],
-};
-
-function PunchCard() {
-  // Seeded "working" so the open/active state is visible at rest (no click needed).
-  const [state, setState] = React.useState<PunchState>("working");
-  const [clock, setClock] = React.useState("13:42");
-  const status = PUNCH_STATUS[state];
-  const actions = PUNCH_ACTIONS[state];
-
-  // The defining behaviour: on break, Check Out is locked until the break ends.
-  const checkoutLocked = state === "break";
-
-  return (
-    <Card density="cozy" className="self-start" accent={state === "break" ? "warning" : undefined}>
-      <CardHeader>
-        <CardTitle level={2} className="whitespace-nowrap">
-          打刻 · Chấm công
-        </CardTitle>
-        <CardAction>
-          <Badge tone={status.tone} variant="outline" className="whitespace-nowrap">
-            {status.label}
-          </Badge>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="col" gap="md">
-          {/* Big tabular clock — the signature employee block. */}
-          <Flex direction="col" gap="xs">
-            {/* Hero numeral at the system's max step (2xl) — the golden scale tops here by design. */}
-            <Text as="div" size="2xl" weight="bold" tabular className="leading-none">
-              {clock}
-            </Text>
-            <Text as="div" size="sm" tone="muted">
-              {status.meta}
-            </Text>
-          </Flex>
-
-          {/* Checkout-locked notice (attention, not destructive — it's a fixable hold). */}
-          {checkoutLocked ? (
-            <Alert tone="warning">
-              <AlertTitle>退勤は休憩終了後 · Check Out đang khoá</AlertTitle>
-              <AlertDescription>
-                休憩中は退勤できません。先に「休憩終了」を打刻してください。
-              </AlertDescription>
-            </Alert>
-          ) : null}
-
-          {/* Valid actions only — comfortable density floors each button at 44px (touch). */}
-          {state === "closed" ? (
-            <div className="ui-density-comfortable">
-              <Button variant="outline" disabled className="w-full">
-                <Clock aria-hidden="true" />
-                本日の勤務は完了 · Đã hoàn thành
-              </Button>
-            </div>
-          ) : (
-            <Flex direction="col" gap="sm">
-              <ResponsiveGrid
-                columns={{ sm: 2, md: 2, lg: 2 }}
-                gap="sm"
-                className="ui-density-comfortable"
-              >
-                {actions.map((a) => {
-                  const Icon = a.icon;
-                  return (
-                    <Button
-                      key={a.key}
-                      variant={a.variant}
-                      className="w-full"
-                      onClick={() => {
-                        setState(a.next);
-                        if (a.next === "closed") setClock("18:12");
-                      }}
-                    >
-                      <Icon aria-hidden="true" />
-                      {a.label}
-                    </Button>
-                  );
-                })}
-              </ResponsiveGrid>
-            </Flex>
-          )}
-
-          {/* Geofence caption — the documented punch footer line. */}
-          <Flex direction="row" align="center" gap="xs">
-            <MapPin className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
-            <Text size="2xs" tone="muted" tabular>
-              位置情報: 渋谷店 (35.659, 139.700) · 134m
-            </Text>
-          </Flex>
-
-          {/* Demo state stepper — lets a reader walk every FSM state at rest. */}
-          <Separator />
-          <Flex direction="row" wrap gap="xs">
-            <Text size="2xs" tone="muted" className="self-center">
-              状態:
-            </Text>
-            {(["off", "working", "break", "closed"] as PunchState[]).map((s) => (
-              <Button
-                key={s}
-                variant={s === state ? "secondary" : "ghost"}
-                size="xs"
-                onClick={() => {
-                  setState(s);
-                  setClock(s === "closed" ? "18:12" : "13:42");
-                }}
-              >
-                {PUNCH_STATUS[s].label.split(" · ")[0]}
-              </Button>
-            ))}
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-// ── Month KPI 2×2 ──────────────────────────────────────────────────────────────
-
-const KPIS: Array<{
-  label: string;
-  value: string;
-  hint: string;
-  delta?: string;
-  inverse?: boolean;
-}> = [
-  { label: "勤務時間 · Giờ làm", value: "96.5h", hint: "計画 168h · 達成 57%", delta: "+2.0h" },
-  { label: "残業 · Overtime", value: "4.2h", hint: "先月比", delta: "-1.8h", inverse: true },
-  { label: "出勤日数 · Ngày đi làm", value: "13", hint: "22営業日中" },
-  { label: "遅刻 · Đến trễ", value: "1", hint: "12分 · 5/7", delta: "+1", inverse: true },
-];
-
-// ── 7-day attendance ────────────────────────────────────────────────────────────
-
-type DayStatus = "present" | "late" | "leave" | "holiday";
-
-const STATUS_DEF: Record<
-  DayStatus,
-  { label: string; tone: BadgeTone; variant: BadgeProps["variant"] }
-> = {
-  present: { label: "通常 · Bình thường", tone: "success", variant: "outline" },
-  late: { label: "遅刻 · Đến trễ", tone: "warning", variant: "outline" },
-  leave: { label: "有給 · Nghỉ phép", tone: "info", variant: "outline" },
-  holiday: { label: "休日 · Nghỉ", tone: "neutral", variant: "outline" },
-};
-
-const DAYS: Array<{
-  date: string;
-  weekday: string;
-  work: string;
-  ot: string;
-  status: DayStatus;
-}> = [
-  { date: "5/08", weekday: "木", work: "8.0h", ot: "0.0h", status: "present" },
-  { date: "5/07", weekday: "水", work: "8.5h", ot: "0.5h", status: "present" },
-  { date: "5/06", weekday: "火", work: "7.7h", ot: "0.0h", status: "late" },
-  { date: "5/05", weekday: "月", work: "—", ot: "—", status: "holiday" },
-  { date: "5/04", weekday: "日", work: "—", ot: "—", status: "holiday" },
-  { date: "5/03", weekday: "土", work: "—", ot: "—", status: "leave" },
-  { date: "5/02", weekday: "金", work: "8.2h", ot: "1.0h", status: "present" },
-];
-
-// ── Today summary ────────────────────────────────────────────────────────────────
-
-const SUMMARY: Array<{ label: string; value: string }> = [
-  { label: "シフト · Ca", value: "早番 09:00–18:00" },
-  { label: "出勤 · Check In", value: "09:30" },
-  { label: "休憩 · Nghỉ", value: "12:00–12:24 (24分)" },
-  { label: "退勤予定 · Dự kiến", value: "18:00" },
-  { label: "勤務地 · Nơi làm", value: "渋谷店" },
-];
-
-export default function EmployeeMeShowcase() {
-  const [activeNav, setActiveNav] = React.useState("dashboard");
-
-  const sidebar = (
-    <Sidebar
-      activeId={activeNav}
-      onSelect={setActiveNav}
-      sections={NAV_SECTIONS}
-      product={{ name: "Acme", role: "田中 美咲 · 渋谷店" }}
-    />
-  );
-
-  return (
-    <AppShell
-      sidebar={sidebar}
-      topbarLeft={<Text as="strong">マイページ</Text>}
-      topbarRight={
-        <Flex direction="row" align="center" gap="sm">
-          <Badge tone="success" variant="outline" className="whitespace-nowrap">
-            勤務中 · 4時間12分
-          </Badge>
-          <Text size="xs" tone="muted" tabular className="hidden sm:inline">
-            2026年5月8日 · 木曜日
-          </Text>
-        </Flex>
-      }
-    >
-      <PageContainer title="ダッシュボード" subtitle="田中 美咲 · 渋谷店 · 5月度" density="default">
-        <Flex direction="col" gap="lg">
-          {/* Punch (left) + month KPI 2×2 (right) — stack <lg, side-by-side ≥lg */}
-          <ResponsiveGrid columns={{ sm: 1, lg: 3 }} gap="md">
-            <div className="lg:col-span-1">
-              <PunchCard />
-            </div>
-
-            <div className="lg:col-span-2">
-              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 2 }}>
-                {KPIS.map((k) => (
-                  <StatCard
-                    key={k.label}
-                    label={k.label}
-                    value={k.value}
-                    hint={k.hint}
-                    delta={k.delta}
-                    inverse={k.inverse}
-                  />
-                ))}
-              </ResponsiveGrid>
-            </div>
-          </ResponsiveGrid>
-
-          {/* 7-day attendance (left, wide) + today summary (right) */}
-          <ResponsiveGrid columns={{ sm: 1, lg: 3 }} gap="md">
-            <Card className="self-start lg:col-span-2">
-              <CardHeader>
-                <CardTitle level={2} className="whitespace-nowrap">
-                  最近7日 · 7 ngày gần nhất
-                </CardTitle>
-                <CardAction>
-                  <Text size="xs" tone="muted" className="whitespace-nowrap">
-                    勤務 47.4h · 残業 1.5h
-                  </Text>
-                </CardAction>
-              </CardHeader>
-              <CardContent flush>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="whitespace-nowrap">日付</TableHead>
-                      <TableHead className="text-end whitespace-nowrap">勤務</TableHead>
-                      <TableHead className="text-end whitespace-nowrap">残業</TableHead>
-                      <TableHead className="whitespace-nowrap">状態</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {DAYS.map((d) => {
-                      const def = STATUS_DEF[d.status];
-                      return (
-                        <TableRow key={d.date}>
-                          <TableCell className="whitespace-nowrap tabular-nums">
-                            {d.date}
-                            <Text tone="muted">({d.weekday})</Text>
-                          </TableCell>
-                          <TableCell className="text-end tabular-nums">{d.work}</TableCell>
-                          <TableCell className="text-end tabular-nums">{d.ot}</TableCell>
-                          <TableCell>
-                            <Badge
-                              tone={def.tone}
-                              variant={def.variant}
-                              className="whitespace-nowrap"
-                            >
-                              {def.label}
-                            </Badge>
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-
-            <Card className="self-start lg:col-span-1">
-              <CardHeader>
-                <CardTitle level={2} className="whitespace-nowrap">
-                  本日のサマリー · Hôm nay
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <Descriptions columns={1} layout="horizontal" labelAlign="start">
-                  {SUMMARY.map((s) => (
-                    <Descriptions.Item key={s.label} label={s.label}>
-                      <Text size="sm" weight="medium" tabular>
-                        {s.value}
-                      </Text>
-                    </Descriptions.Item>
-                  ))}
-                </Descriptions>
-              </CardContent>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}