create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/ui/timesheet/index.tsx

@@ -0,0 +1,277 @@
+// Timesheet — bảng log giờ theo tuần (task management): hàng = task/dự án,
+// cột = 7 ngày trong tuần, ô = số giờ; footer tổng theo cột + grand total
+// (font-medium + tabular-nums chuẩn Statistic).
+// Tuần LUÔN bắt đầu Thứ 2 (spec timesheet: "vi: T2, en: Mon") — khác Calendar
+// (nôm theo firstDayOfWeek). Locale chỉ đổi NHÃN: vi/en qua date-picker/locale
+// (prop thắng DateLocaleProvider context, default vi); nhãn nội bộ (nút tuần,
+// tiêu đề cột, tổng) chọn theo identity VI_LOCALE — custom locale → nhãn en.
+// Editable → InputNumber compact trong ô (min 0 max 24 step 0.5, clamp sẵn);
+// ô null → trống. Cột cuối tuần (T7/CN — 2 cột CUỐI, mọi locale) nền bg-s3/60
+// nhẹ phân biệt (spec nháp bg-s2/60 = tàng hình trên wrapper bg-s2 light —
+// đổi token thấy được gần nhất, vẫn tokens-only).
+// Đổi tuần → grid remount qua key=weekKey → replay animate bp-fade-in
+// (motion-fast + ease-enter); InputNumber uncontrolled nhờ remount cũng tự
+// đồng bộ text theo tuần mới.
+// a11y: bảng thật table/thead/tbody/tfoot + th scope; aria-label ô
+// "Thứ 2 20/10 · Task A"; focus-visible ring chuẩn rule 4 ở nút điều hướng.
+// Sticky: cột label sticky-left + thead sticky-top khi overflow (z-10/z-20
+// theo idiom Table — sticky in-flow, không thuộc overlay scale --z-*).
+import { useEffect, useState, type ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+import { InputNumber } from '../input-number/index.js';
+import { Skeleton } from '../skeleton/index.js';
+import { VI_LOCALE, useDateLocale, type DateLocaleInput } from '../date-picker/locale.js';
+
+export interface TimesheetRow {
+  /** Key ổn định của hàng — bắn lại trong onCellChange. */
+  key: string;
+  /** Tên task/dự án (cột label sticky-left). */
+  label: ReactNode;
+  /** Dòng phụ dưới label (vd dự án / người thực hiện). */
+  meta?: ReactNode;
+  /** 7 giá trị giờ theo cột ngày (null = trống) — tuần Thứ 2 → Chủ nhật. */
+  values: Array<number | null>;
+}
+
+/** classNames sub-part slots (antd v5 style) — merge SAU default classes. */
+export interface TimesheetClassNames {
+  /** Khối ngoài (viền + nền + rounded). */
+  wrapper?: string;
+  /** thead. */
+  header?: string;
+  /** Mỗi tr thân bảng. */
+  row?: string;
+  /** Mỗi td ngày. */
+  cell?: string;
+  /** tfoot tổng. */
+  footer?: string;
+}
+
+export interface TimesheetProps {
+  rows: TimesheetRow[];
+  /** Bất kỳ ngày nào trong tuần hiển thị; tuần chuẩn hóa về Thứ 2. */
+  week: Date;
+  /** Bắn kèm tuần mới (Date = Thứ 2 của tuần) khi bấm prev/next. */
+  onWeekChange?: (weekStart: Date) => void;
+  /** Ô thay đổi: (rowKey, dayIndex 0–6 Thứ2→CN, giá trị đã clamp | null khi xoá). */
+  onCellChange?: (rowKey: string, dayIndex: number, value: number | null) => void;
+  /** true → ô nhập InputNumber; false → text (mặc định). */
+  editable?: boolean;
+  /** 'vi' | 'en' | DateLocale — thắng DateLocaleProvider context; default vi. */
+  locale?: DateLocaleInput;
+  /** Skeleton thay thân bảng (header + khoảng tuần vẫn render). */
+  loading?: boolean;
+  classNames?: TimesheetClassNames;
+  className?: string;
+}
+
+// Tuần bắt đầu Thứ 2: lùi về ngày thứ Hai của tuần chứa `date`.
+function weekStartOf(date: Date): Date {
+  const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  d.setDate(d.getDate() - ((d.getDay() + 6) % 7));
+  return d;
+}
+
+const sumVals = (vals: Array<number | null>): number => vals.reduce<number>((a, v) => a + (v ?? 0), 0);
+// Tổng 0.5 có thể ra binary noise (0.1+0.2) — làm tròn 2 chữ số thập phân.
+const fmtNum = (n: number): string => String(Math.round(n * 100) / 100);
+
+// Tên ngày ĐỦ cho aria-label ô — xếp theo CỘT (Thứ 2 → Chủ nhật).
+const FULL_DAYS_VI = ['Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7', 'Chủ nhật'];
+const FULL_DAYS_EN = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+const NAV_CLS =
+  'flex size-8 cursor-pointer items-center justify-center rounded-lg border border-line bg-transparent text-ink transition-colors hover:bg-s3 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none';
+
+export function Timesheet({
+  rows,
+  week,
+  onWeekChange,
+  onCellChange,
+  editable = false,
+  locale,
+  loading = false,
+  classNames,
+  className,
+}: TimesheetProps) {
+  const loc = useDateLocale(locale);
+  const isVi = loc === VI_LOCALE;
+  // Tuần hiển thị: state nội bộ (nav chủ động) + sync khi prop week đổi.
+  const [weekStart, setWeekStart] = useState(() => weekStartOf(week));
+  useEffect(() => {
+    setWeekStart(weekStartOf(week));
+  }, [week]);
+
+  const days = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(weekStart);
+    d.setDate(d.getDate() + i);
+    return d;
+  });
+  const weekEnd = days[6];
+  const weekKey = `${weekStart.getFullYear()}-${weekStart.getMonth()}-${weekStart.getDate()}`;
+
+  const nav = (delta: number) => {
+    const next = weekStartOf(new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + delta));
+    setWeekStart(next);
+    onWeekChange?.(next);
+  };
+
+  const str = isVi
+    ? { prevWeek: 'Tuần trước', nextWeek: 'Tuần sau', task: 'Công việc', total: 'Tổng', grand: 'Tổng cộng' }
+    : { prevWeek: 'Previous week', nextWeek: 'Next week', task: 'Task', total: 'Total', grand: 'Grand total' };
+
+  // Nhãn ngắn thứ trong tuần — weekdays của locale xếp từ firstDayOfWeek của nó
+  // (vi: T2 đầu / en: Su đầu) → quy đổi index qua chính firstDayOfWeek.
+  const weekdayShort = (d: Date) => loc.weekdays[(d.getDay() - loc.firstDayOfWeek + 7) % 7];
+  const fullDay = (col: number) => (isVi ? FULL_DAYS_VI[col] : FULL_DAYS_EN[col]);
+
+  // Nhãn khoảng tuần: vi "19–25 Th10 2026" · en "Oct 19–25, 2026";
+  // khác tháng: vi "26 Th10–1 Th11 2026" · en "Oct 26 – Nov 1, 2026".
+  const shortMonth = (d: Date) => (isVi ? `Th${d.getMonth() + 1}` : loc.months[d.getMonth()].slice(0, 3));
+  const sameMonth = weekStart.getMonth() === weekEnd.getMonth();
+  const weekLabel = isVi
+    ? sameMonth
+      ? `${weekStart.getDate()}–${weekEnd.getDate()} ${shortMonth(weekStart)} ${weekEnd.getFullYear()}`
+      : `${weekStart.getDate()} ${shortMonth(weekStart)}–${weekEnd.getDate()} ${shortMonth(weekEnd)} ${weekEnd.getFullYear()}`
+    : sameMonth
+      ? `${shortMonth(weekStart)} ${weekStart.getDate()}–${weekEnd.getDate()}, ${weekEnd.getFullYear()}`
+      : `${shortMonth(weekStart)} ${weekStart.getDate()} – ${shortMonth(weekEnd)} ${weekEnd.getDate()}, ${weekEnd.getFullYear()}`;
+
+  const colTotals = days.map((_, i) => sumVals(rows.map((r) => r.values[i] ?? null)));
+  const grandTotal = sumVals(colTotals);
+
+  const rowLabelText = (row: TimesheetRow) => (typeof row.label === 'string' ? row.label : row.key);
+  const cellLabel = (row: TimesheetRow, col: number, d: Date) =>
+    `${fullDay(col)} ${d.getDate()}/${d.getMonth() + 1} · ${rowLabelText(row)}`;
+
+  const borderCls = 'border-b border-line2';
+
+  return (
+    <div
+      className={`overflow-hidden rounded-xl border border-line bg-s2${classNames?.wrapper ? ` ${classNames.wrapper}` : ''}${className ? ` ${className}` : ''}`}
+    >
+      {/* Thanh tuần: nhãn khoảng tuần + nav prev/next */}
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-line px-3 py-2">
+        <span className="flex items-center gap-2 text-h3 font-semibold text-ink">
+          <Icon name="calendar" size={14} className="text-ink3" />
+          {weekLabel}
+        </span>
+        <span className="flex items-center gap-1">
+          <button type="button" aria-label={str.prevWeek} onClick={() => nav(-7)} className={NAV_CLS}>
+            <Icon name="chevron-left" size={14} />
+          </button>
+          <button type="button" aria-label={str.nextWeek} onClick={() => nav(7)} className={NAV_CLS}>
+            <Icon name="chevron-right" size={14} />
+          </button>
+        </span>
+      </div>
+
+      <div className="overflow-auto">
+        {/* key=weekKey → remount khi đổi tuần: replay fade-in + InputNumber
+            uncontrolled nhận lại text đúng giá trị tuần mới */}
+        <table
+          key={weekKey}
+          className="w-full border-collapse text-left animate-[bp-fade-in_var(--motion-fast)_var(--ease-enter)]"
+        >
+          <thead className={classNames?.header}>
+            <tr>
+              <th
+                scope="col"
+                className={`sticky left-0 top-0 z-20 min-w-40 bg-s3 px-3 py-2 text-label font-semibold text-ink2 ${borderCls}`}
+              >
+                {str.task}
+              </th>
+              {days.map((d, i) => (
+                <th
+                  key={i}
+                  scope="col"
+                  className={`sticky top-0 z-10 min-w-24 bg-s3 px-2 py-2 text-center ${borderCls}`}
+                >
+                  <span className="text-meta font-semibold text-ink3">{weekdayShort(d)}</span>{' '}
+                  <span className="text-label font-medium text-ink2 tabular-nums">{d.getDate()}</span>
+                </th>
+              ))}
+              <th scope="col" className={`sticky top-0 z-10 min-w-20 bg-s3 px-3 py-2 text-right text-label font-semibold text-ink2 ${borderCls}`}>
+                {str.total}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading
+              ? Array.from({ length: 4 }, (_, r) => (
+                  <tr key={`sk-${r}`}>
+                    <th scope="row" className={`sticky left-0 z-10 bg-s2 px-3 py-2 ${borderCls}`}>
+                      <Skeleton variant="text" />
+                    </th>
+                    {days.map((_, i) => (
+                      <td key={i} className={`px-2 py-2 ${borderCls}`}>
+                        <Skeleton variant="text" />
+                      </td>
+                    ))}
+                    <td className={`px-3 py-2 ${borderCls}`}>
+                      <Skeleton variant="text" />
+                    </td>
+                  </tr>
+                ))
+              : rows.map((row) => (
+                  <tr key={row.key} className={classNames?.row}>
+                    <th
+                      scope="row"
+                      className={`sticky left-0 z-10 bg-s2 px-3 py-2 text-left align-middle font-medium ${borderCls}`}
+                    >
+                      <div className="text-body text-ink">{row.label}</div>
+                      {row.meta != null && <div className="text-meta text-ink3">{row.meta}</div>}
+                    </th>
+                    {days.map((d, i) => {
+                      const v = row.values[i] ?? null;
+                      const weekend = i >= 5; // T7 + CN — 2 cột cuối, mọi locale
+                      return (
+                        <td
+                          key={i}
+                          aria-label={cellLabel(row, i, d)}
+                          className={`border-b border-line2 ${editable ? 'p-1' : 'px-3 py-1.5 text-right'}${weekend ? ' bg-s3/60' : ''}${classNames?.cell ? ` ${classNames.cell}` : ''}`}
+                        >
+                          {editable ? (
+                            <InputNumber
+                              key={`${row.key}:${weekKey}:${i}`}
+                              value={v ?? undefined}
+                              min={0}
+                              max={24}
+                              step={0.5}
+                              ariaLabel={cellLabel(row, i, d)}
+                              onChange={(n) => onCellChange?.(row.key, i, n)}
+                            />
+                          ) : v === null ? null : (
+                            <span className="text-body text-ink tabular-nums">{fmtNum(v)}</span>
+                          )}
+                        </td>
+                      );
+                    })}
+                    <td className={`px-3 py-2 text-right ${borderCls}`}>
+                      <span className="text-body font-medium text-ink tabular-nums">{fmtNum(sumVals(row.values))}</span>
+                    </td>
+                  </tr>
+                ))}
+          </tbody>
+          {!loading && (
+            <tfoot className={classNames?.footer}>
+              <tr className="border-t border-line">
+                <th scope="row" className="sticky left-0 z-10 bg-s3 px-3 py-2 text-left text-label font-semibold text-ink2">
+                  {str.total}
+                </th>
+                {colTotals.map((t, i) => (
+                  <td key={i} className="px-2 py-2 text-right">
+                    <span className="text-body font-medium text-ink tabular-nums">{fmtNum(t)}</span>
+                  </td>
+                ))}
+                <td className="px-3 py-2 text-right">
+                  <span className="text-body font-semibold text-ink tabular-nums">{fmtNum(grandTotal)}</span>
+                </td>
+              </tr>
+            </tfoot>
+          )}
+        </table>
+      </div>
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/timesheet/timesheet.stories.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Timesheet, type TimesheetRow } from './index';
+
+const meta = { title: 'Domain/Timesheet', component: Timesheet, tags: ['autodocs'] } satisfies Meta<typeof Timesheet>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+// Tue Oct 20 2026 — any day inside the Mon 19 → Sun 25 week (week normalizes to Monday).
+const WEEK = new Date(2026, 9, 20);
+
+const ROWS: TimesheetRow[] = [
+  { key: 'task-a', label: 'Task A', meta: 'Design system', values: [8, 8, 8, 8, 8, null, null] },
+  { key: 'task-b', label: 'Task B', meta: 'Gateway', values: [1, 2, 0.5, null, null, null, null] },
+  { key: 'task-c', label: 'Task C', meta: 'e2e suite', values: [null, null, null, 4, 6, 3, null] },
+];
+
+const RICH_ROWS: TimesheetRow[] = [
+  { key: 'fe-shell', label: 'MF shell', meta: 'Frontend', values: [7.5, 8, 8, 6.5, 4, null, null] },
+  { key: 'fe-tasks', label: 'Remote tasks', meta: 'Frontend', values: [0.5, null, null, 1.5, 4, 2, null] },
+  { key: 'be-outbox', label: 'Outbox + saga', meta: 'node-svc', values: [6, 6, 6, 6, 6, null, null] },
+  { key: 'ops-ci', label: 'CI convergence', meta: 'DevOps', values: [null, null, 2, 2, 2, 4, 1] },
+];
+
+/** BasicReadonly — rows × 7 day columns, per-row totals, no inputs. */
+export const BasicReadonly: S = {
+  args: { rows: ROWS, week: WEEK, locale: 'en' },
+};
+
+/** Editable — InputNumber per cell (min 0, max 24, step 0.5); totals recompute live. */
+export const Editable: S = {
+  // render demo tự quản state — args chỉ để thỏa rows/week required của StoryObj
+  args: { rows: ROWS, week: WEEK },
+  render: () => <EditableDemo />,
+};
+
+/** TotalsFooter — column totals + grand total in the footer (tabular-nums). */
+export const TotalsFooter: S = {
+  args: { rows: RICH_ROWS, week: WEEK, locale: 'en' },
+};
+
+/** WeekendsShaded — Sat/Sun columns get a subtle tint; still editable when `editable`. */
+export const WeekendsShaded: S = {
+  args: { rows: RICH_ROWS, week: WEEK, editable: true, locale: 'en' },
+};
+
+/** Loading — skeleton mirrors the grid while data lands; header stays real. */
+export const Loading: S = {
+  args: { rows: RICH_ROWS, week: WEEK, loading: true, locale: 'en' },
+};
+
+/** WeekNavigation — prev/next rewires the Monday-start week; label + grid animate. */
+export const WeekNavigation: S = {
+  args: { rows: ROWS, week: WEEK },
+  render: () => <WeekNavDemo />,
+};
+
+/** VietnameseLocale — default `vi`: T2-first headers, "19–25 Th10 2026" label. */
+export const VietnameseLocale: S = {
+  args: { rows: ROWS, week: WEEK },
+};
+
+function EditableDemo() {
+  const [rows, setRows] = useState(ROWS);
+  const [last, setLast] = useState('—');
+  return (
+    <div className="grid max-w-4xl gap-3">
+      <Timesheet
+        rows={rows}
+        week={WEEK}
+        editable
+        locale="en"
+        onCellChange={(rowKey, dayIndex, value) => {
+          setRows((prev) =>
+            prev.map((r) => (r.key === rowKey ? { ...r, values: r.values.map((v, i) => (i === dayIndex ? value : v)) } : r)),
+          );
+          setLast(`${rowKey}[${dayIndex}] = ${value}`);
+        }}
+      />
+      <p className="m-0 font-mono text-meta text-ink3">
+        last onCellChange: <strong className="text-ink">{last}</strong>
+      </p>
+    </div>
+  );
+}
+
+function WeekNavDemo() {
+  const [week, setWeek] = useState(WEEK);
+  return (
+    <div className="grid max-w-4xl gap-3">
+      <Timesheet rows={ROWS} week={week} onWeekChange={setWeek} locale="en" />
+      <p className="m-0 font-mono text-meta text-ink3">
+        controlled week (any day): <strong className="text-ink">{week.toDateString()}</strong>
+      </p>
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/timesheet/timesheet.test.tsx

@@ -0,0 +1,103 @@
+// Timesheet tests — hành vi: render grid + header theo locale, nhãn tuần vi/en,
+// nav prev/next (kèm tuần mới + cross-month), onCellChange payload, tổng
+// hàng/cột/grand, weekend shaded + vẫn edit được, readonly không input, loading skeleton.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Timesheet } from './index.js';
+
+// Tue 20/10/2026 — tuần Thứ 2 19 → Chủ nhật 25/10/2026
+const WEEK = new Date(2026, 9, 20);
+const ROWS = [
+  { key: 'task-a', label: 'Task A', meta: 'Design system', values: [8, 8, 8, 8, 8, null, null] },
+  { key: 'task-b', label: 'Task B', meta: 'Gateway', values: [1, 2, 0.5, null, null, null, null] },
+  { key: 'task-c', label: 'Task C', meta: 'e2e suite', values: [null, null, null, 4, 6, 3, null] },
+];
+
+afterEach(cleanup);
+
+describe('Timesheet', () => {
+  it('render rows + header 7 ngày (vi mặc định) + tổng hàng', () => {
+    render(<Timesheet rows={ROWS} week={WEEK} />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('Task A')).toBeInTheDocument();
+    expect(screen.getByText('Design system')).toBeInTheDocument(); // meta dòng phụ
+    expect(screen.getByText('T2')).toBeInTheDocument(); // cột Thứ 2 = 19/10
+    expect(screen.getByText('CN')).toBeInTheDocument();
+    expect(screen.getAllByText('8')).toHaveLength(5); // Task A T2–T6
+    expect(screen.getByText('40')).toBeInTheDocument(); // tổng hàng Task A
+    expect(screen.getByText('3.5')).toBeInTheDocument(); // 1 + 2 + 0.5
+  });
+
+  it('nhãn khoảng tuần vi: "19–25 Th10 2026"', () => {
+    render(<Timesheet rows={ROWS} week={WEEK} />);
+    expect(screen.getByText('19–25 Th10 2026')).toBeInTheDocument();
+  });
+
+  it('locale en: nhãn tuần "Oct 19–25, 2026" + header Mo…Su + aria nav', () => {
+    render(<Timesheet rows={ROWS} week={WEEK} locale="en" />);
+    expect(screen.getByText('Oct 19–25, 2026')).toBeInTheDocument();
+    expect(screen.getByText('Mo')).toBeInTheDocument();
+    expect(screen.getByText('Su')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Previous week' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next week' })).toBeInTheDocument();
+  });
+
+  it('prev/next đổi tuần — bắn onWeekChange đúng Thứ 2, cross-month vi', async () => {
+    const onWeekChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Timesheet rows={ROWS} week={WEEK} onWeekChange={onWeekChange} />);
+    await user.click(screen.getByRole('button', { name: 'Tuần trước' }));
+    expect(screen.getByText('12–18 Th10 2026')).toBeInTheDocument();
+    expect(onWeekChange).toHaveBeenLastCalledWith(new Date(2026, 9, 12));
+    await user.click(screen.getByRole('button', { name: 'Tuần sau' }));
+    await user.click(screen.getByRole('button', { name: 'Tuần sau' }));
+    expect(screen.getByText('26 Th10–1 Th11 2026')).toBeInTheDocument(); // vắt tháng
+    expect(onWeekChange).toHaveBeenLastCalledWith(new Date(2026, 9, 26));
+  });
+
+  it('editable: gõ vào ô → onCellChange(rowKey, dayIndex, giá trị clamp)', async () => {
+    const onCellChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Timesheet rows={ROWS} week={WEEK} editable onCellChange={onCellChange} />);
+    const input = screen.getByRole('spinbutton', { name: 'Thứ 3 20/10 · Task B' });
+    await user.clear(input); // xoá → null
+    await user.type(input, '3.5');
+    expect(onCellChange).toHaveBeenLastCalledWith('task-b', 1, 3.5);
+  });
+
+  it('tổng cột (footer) + grand total tính đúng, có tabular-nums', () => {
+    render(<Timesheet rows={ROWS} week={WEEK} />);
+    // cột: 9, 10, 8.5, 12, 14, 3, 0 — grand 56.5
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByText('56.5')).toBeInTheDocument();
+    const grand = screen.getByText('56.5');
+    expect(grand).toHaveClass('tabular-nums');
+    expect(grand).toHaveClass('font-semibold');
+  });
+
+  it('ô cuối tuần shaded (bg-s3/60) + vẫn edit được khi editable', async () => {
+    const onCellChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Timesheet rows={ROWS} week={WEEK} editable onCellChange={onCellChange} />);
+    const sat = screen.getByRole('spinbutton', { name: 'Thứ 7 24/10 · Task B' });
+    expect(sat.closest('td')).toHaveClass('bg-s3/60');
+    await user.type(sat, '2');
+    expect(onCellChange).toHaveBeenLastCalledWith('task-b', 5, 2);
+  });
+
+  it('readonly: không có input; ô null hiển thị trống', () => {
+    render(<Timesheet rows={ROWS} week={WEEK} />);
+    expect(screen.queryAllByRole('spinbutton')).toHaveLength(0);
+    expect(screen.getByLabelText('Thứ 7 24/10 · Task A')).toHaveTextContent('');
+  });
+
+  it('loading: skeleton thay thân bảng, header + nhãn tuần giữ nguyên', () => {
+    render(<Timesheet rows={ROWS} week={WEEK} loading />);
+    expect(screen.getAllByRole('status').length).toBeGreaterThan(0); // Skeleton bones
+    expect(screen.queryAllByRole('spinbutton')).toHaveLength(0);
+    expect(screen.queryByText('40')).not.toBeInTheDocument();
+    expect(screen.getByText('19–25 Th10 2026')).toBeInTheDocument();
+  });
+});

package/stack-template/app/ui-kit/src/ui/toggle-button/index.tsx

@@ -0,0 +1,28 @@
+// ToggleButton — button với checked state (antd-lite).
+import type { ReactNode } from 'react';
+
+export interface ToggleButtonProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Giá trị đại diện khi nằm trong `ToggleButtonGroup` (đứng lẻ: bỏ qua). */
+  value?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ToggleButton({ checked = false, onChange, disabled, children, className }: ToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={checked}
+      disabled={disabled}
+      onClick={() => onChange?.(!checked)}
+      className={`inline-flex h-8 cursor-pointer items-center gap-1 rounded-lg border px-3 text-body transition-colors focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${
+        checked ? 'border-accent bg-accent text-white' : 'border-line bg-s2 text-ink hover:border-accent hover:text-accent'
+      } ${disabled ? 'cursor-not-allowed opacity-50' : ''}${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </button>
+  );
+}

package/stack-template/app/ui-kit/src/ui/toggle-button/toggle-button-group.stories.tsx

@@ -0,0 +1,85 @@
+// ToggleButtonGroup stories — single/multiple toggle clusters (antd-lite
+// "checked semantics", PrimeReact SelectButton use-case). Meta without
+// `component` — children is a required prop, CSF types would then force args
+// onto render-only stories (image.stories pattern).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ToggleButton } from './index.js';
+import { ToggleButtonGroup } from './toggle-button-group.js';
+
+const meta = { title: 'Forms/ToggleButtonGroup', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Basic — single-pick view switcher; the group owns which value is pressed. */
+export const Basic: Story = {
+  name: 'Basic — single pick (view switcher)',
+  render: () => <SingleDemo />,
+};
+
+/** Multiple — chip-style multi pick; clicking a pressed chip removes it. */
+export const Multiple: Story = {
+  name: 'Multiple — multi pick filters',
+  render: () => <MultipleDemo />,
+};
+
+/** Disabled — whole group locked (individual buttons can still self-disable). */
+export const Disabled: Story = {
+  name: 'Disabled — locked group',
+  render: () => (
+    <ToggleButtonGroup disabled value="day" ariaLabel="Density" className="opacity-90">
+      <ToggleButton value="day">Day</ToggleButton>
+      <ToggleButton value="week">Week</ToggleButton>
+      <ToggleButton value="month" disabled>Month</ToggleButton>
+    </ToggleButtonGroup>
+  ),
+};
+
+/** DarkTheme — both modes on the dark canvas. */
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="flex w-fit flex-col gap-3 rounded-xl bg-canvas p-4">
+      <ToggleButtonGroup value="grid" ariaLabel="View">
+        <ToggleButton value="grid">Grid</ToggleButton>
+        <ToggleButton value="table">Table</ToggleButton>
+      </ToggleButtonGroup>
+      <ToggleButtonGroup multiple value={['new']} ariaLabel="Tags">
+        <ToggleButton value="new">New</ToggleButton>
+        <ToggleButton value="done">Done</ToggleButton>
+      </ToggleButtonGroup>
+    </div>
+  ),
+};
+
+function SingleDemo() {
+  const [view, setView] = useState('board');
+  return (
+    <div className="flex flex-col gap-3">
+      <ToggleButtonGroup value={view} onChange={setView} ariaLabel="View mode">
+        <ToggleButton value="list">List</ToggleButton>
+        <ToggleButton value="board">Board</ToggleButton>
+        <ToggleButton value="timeline">Timeline</ToggleButton>
+      </ToggleButtonGroup>
+      <p className="m-0 font-mono text-meta text-ink3">
+        value: <strong className="text-ink">{view}</strong>
+      </p>
+    </div>
+  );
+}
+
+function MultipleDemo() {
+  const [filters, setFilters] = useState<string[]>(['bugs']);
+  return (
+    <div className="flex flex-col gap-3">
+      <ToggleButtonGroup multiple value={filters} onChange={setFilters} ariaLabel="Item types">
+        <ToggleButton value="bugs">Bugs</ToggleButton>
+        <ToggleButton value="features">Features</ToggleButton>
+        <ToggleButton value="docs">Docs</ToggleButton>
+      </ToggleButtonGroup>
+      <p className="m-0 font-mono text-meta text-ink3">
+        value: <strong className="text-ink">[{filters.join(', ')}]</strong>
+      </p>
+    </div>
+  );
+}