// ELS HRM — Module 07: Bảng Công — Màn hình Danh mục / Duyệt+Comment / Báo cáo
// Bổ sung cho timesheet-screens.jsx. Phân quyền theo action:timesheet:* + data:timesheet:*.
// Tailwind utility classes, tiếng Việt UI. Nạp SAU shared/hrm-shell/timesheet-screens.

// Kiểu bảng dùng chung (đồng bộ TABLE_CLS của timesheet-screens.jsx).
const TA_TABLE = "w-full border-collapse text-sm "
  + "[&_thead_th]:border-b [&_thead_th]:border-border [&_thead_th]:bg-muted [&_thead_th]:px-3.5 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-xs [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-[0.04em] [&_thead_th]:text-muted-foreground [&_thead_th]:whitespace-nowrap "
  + "[&_tbody_td]:border-b [&_tbody_td]:border-border [&_tbody_td]:px-3.5 [&_tbody_td]:py-3 [&_tbody_td]:align-middle [&_tbody_td]:text-foreground "
  + "[&_tbody_tr:last-child_td]:border-0 [&_tbody_tr:hover]:bg-muted";

// Personas cho từng nhóm màn — thể hiện phân quyền trong sidebar footer.
const TA_ADMIN = { name: 'Nguyễn Quản Trị', role: 'Quản trị Bảng công' };
const TA_MANAGER = { name: 'Lê Hữu Phước', role: 'Department Manager' };

// ─── Điều hướng module (đồng bộ LeaveShell của module Nghỉ phép) ──────────────
// Mỗi nút postMessage '__dc_navigate' để DesignCanvas focus sang artboard tương ứng
// (slot = "section/artboard"). Thanh nav lọc theo quyền của persona đang xem.
const tsNav = (slot) => { try { window.postMessage({ type: '__dc_navigate', slotId: slot }, '*'); } catch (e) {} };
const TS_P = {
  SCREEN: 'screen:timesheet', OWN: 'data:timesheet:own', DEPT: 'data:timesheet:dept', ALL: 'data:timesheet:all',
  SUBMIT: 'action:timesheet:submit', APPROVE: 'action:timesheet:approve', REJECT: 'action:timesheet:reject',
  M_CUST: 'action:timesheet:manage_customer', M_PROJ: 'action:timesheet:manage_project',
  M_ACT: 'action:timesheet:manage_activity', M_CFG: 'action:timesheet:manage_config',
};
const tsCan = (perms, need) => need.every((n) => perms.includes(n) || (n === TS_P.DEPT && perms.includes(TS_P.ALL)));
const TSP_ESS    = [TS_P.SCREEN, TS_P.OWN, TS_P.SUBMIT];
const TSP_MANAGE = [TS_P.SCREEN, TS_P.OWN, TS_P.SUBMIT, TS_P.DEPT, TS_P.APPROVE, TS_P.REJECT];
const TSP_ADMIN  = [TS_P.SCREEN, TS_P.OWN, TS_P.SUBMIT, TS_P.DEPT, TS_P.ALL, TS_P.APPROVE, TS_P.REJECT, TS_P.M_CUST, TS_P.M_PROJ, TS_P.M_ACT, TS_P.M_CFG];

const TS_NAV_GROUPS = [
  { title: 'Của tôi', items: [
    { id: 'my', label: 'Bảng công của tôi', icon: 'calendar', slot: 'main/entry', need: [TS_P.OWN] },
  ]},
  { title: 'Quản lý', items: [
    { id: 'list', label: 'Chờ duyệt', icon: 'inbox', slot: 'main/list', need: [TS_P.DEPT] },
    { id: 'approve', label: 'Duyệt & trao đổi', icon: 'check-circle', slot: 'approve-flow/approve-comments', need: [TS_P.APPROVE] },
  ]},
  { title: 'Danh mục', items: [
    { id: 'cust', label: 'Khách hàng', icon: 'building', slot: 'catalog/cust-list', need: [TS_P.M_CUST] },
    { id: 'proj', label: 'Dự án', icon: 'briefcase', slot: 'catalog/proj-list', need: [TS_P.M_PROJ] },
    { id: 'act', label: 'Hoạt động', icon: 'file-text', slot: 'catalog/act-list', need: [TS_P.M_ACT] },
  ]},
  { title: 'Báo cáo', items: [
    { id: 'report', label: 'Báo cáo', icon: 'trending-up', slot: 'reports/rep-project', need: [TS_P.DEPT] },
  ]},
];

const TSModuleNav = ({ active, perms = [] }) => {
  const groups = TS_NAV_GROUPS
    .map((g) => ({ ...g, items: g.items.filter((n) => tsCan(perms, n.need)) }))
    .filter((g) => g.items.length);
  return (
    <div className="mb-4 flex flex-wrap items-center gap-1 rounded-xl border border-border bg-card px-2.5 py-2 shadow-xs">
      {groups.map((g, gi) => (
        <React.Fragment key={g.title}>
          {gi > 0 && <div className="mx-2 h-5 w-px shrink-0 bg-border" />}
          <div className="flex items-center gap-0.5">
            <span className="mr-0.5 px-1 text-2xs font-bold uppercase tracking-[0.08em] text-muted-foreground" style={{ opacity: 0.5 }}>{g.title}</span>
            {g.items.map((n) => {
              const on = n.id === active;
              return (
                <button key={n.id} onClick={() => !on && tsNav(n.slot)}
                  className={"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors "
                    + (on ? "bg-primary text-primary-foreground" : "cursor-pointer text-muted-foreground hover:bg-muted hover:text-foreground")}>
                  <Icon name={n.icon} size={13} className="shrink-0" />{n.label}
                </button>
              );
            })}
          </div>
        </React.Fragment>
      ))}
    </div>
  );
};

// ─── Dữ liệu mẫu danh mục ─────────────────────────────────────────────────────
const TA_CUSTOMERS = [
  { code: 'ELS', name: 'ELS Technologies', projects: 3, status: 'active' },
  { code: 'ABC', name: 'ABC Corp',         projects: 2, status: 'active' },
  { code: 'INT', name: 'Internal',         projects: 4, status: 'active' },
  { code: 'XYZ', name: 'XYZ Retail (cũ)',  projects: 0, status: 'archived' },
];

const TA_PROJECTS = [
  { code: 'ELS-HRM', name: 'ELS HRM Platform',     customer: 'ELS Technologies', status: 'active',   headcount: 8, activities: 5, rate: '450.000₫', referenced: true,  color: 'var(--color-primary)' },
  { code: 'CLI-001', name: 'ABC Corp Portal',      customer: 'ABC Corp',          status: 'active',   headcount: 5, activities: 3, rate: '520.000₫', referenced: true,  color: 'var(--color-info)' },
  { code: 'INT-DEV', name: 'Internal Development', customer: 'Internal',          status: 'inactive', headcount: 3, activities: 4, rate: null,       referenced: true,  color: 'var(--color-success)' },
  { code: 'OPS-SUP', name: 'Operations Support',   customer: 'Internal',          status: 'active',   headcount: 2, activities: 2, rate: null,       referenced: true,  color: 'oklch(0.564 0.198 320)' },
  { code: 'NEW-01',  name: 'Dự án mới (chưa dùng)', customer: 'ABC Corp',          status: 'active',   headcount: 0, activities: 0, rate: null,       referenced: false, color: 'var(--color-muted-foreground)' },
];

const TA_STATUS = {
  active:   { label: 'Đang hoạt động', v: 'success' },
  inactive: { label: 'Ngừng dùng',     v: 'warning' },
  archived: { label: 'Đã lưu trữ',     v: 'neutral' },
};

const TA_ACTIVITY_GROUPS = [
  { proj: 'ELS HRM Platform', color: 'var(--color-primary)', items: [
    { name: 'Frontend Development', billable: true,  entries: 128 },
    { name: 'Backend API',          billable: true,  entries: 96 },
    { name: 'Code Review',          billable: true,  entries: 32, status: 'inactive' },
    { name: 'UI/UX Design',         billable: true,  entries: 40 },
    { name: 'Họp nội bộ',           billable: false, entries: 16 },
  ]},
  { proj: 'ABC Corp Portal', color: 'var(--color-info)', items: [
    { name: 'API Integration', billable: true,  entries: 72 },
    { name: 'Testing',         billable: true,  entries: 48 },
    { name: 'Triển khai',      billable: false, entries: 0 },
  ]},
];

const TA_ASSIGNEES = [
  { name: 'Đỗ Văn Hùng',   role: 'Frontend Developer', assigned: true },
  { name: 'Trần Minh Tuấn', role: 'Backend Developer',  assigned: true },
  { name: 'Lê Thị Hương',   role: 'QA Engineer',        picked: true },
  { name: 'Phạm Thu Trang', role: 'UI/UX Designer',     picked: true },
  { name: 'Ngô Minh Khoa',  role: 'DevOps Engineer' },
  { name: 'Vũ Đức Anh',     role: 'Backend Developer' },
];

// Lớp phủ dialog — bám khung artboard (root màn có class relative).
const TAOverlay = ({ children, width = 520 }) => (
  <div className="absolute inset-0 z-50 flex items-center justify-center bg-[oklch(0.2_0.02_264/0.45)] p-8">
    <div className="w-full overflow-hidden rounded-xl border border-border bg-card shadow-2xl" style={{ maxWidth: width }}>
      {children}
    </div>
  </div>
);

const TADialogHead = ({ title, sub }) => (
  <div className="flex items-start justify-between border-b border-border px-5 py-4">
    <div>
      <div className="text-md font-bold text-foreground">{title}</div>
      {sub && <div className="mt-0.5 text-xs text-muted-foreground">{sub}</div>}
    </div>
    <Btn variant="ghost" size="sm" iconOnly icon="x" />
  </div>
);

const TAField = ({ label, children, hint }) => (
  <div className="flex flex-col gap-1.5">
    <label className="text-sm font-semibold text-foreground">{label}</label>
    {children}
    {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
  </div>
);

const TA_INPUT = "h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring";

// ══════════════════════════════════════════════════════════════════════════════
// SECTION DANH MỤC — Admin · action:timesheet:manage_customer/project/activity
// ══════════════════════════════════════════════════════════════════════════════

// ─── 06: Khách hàng — danh sách ───────────────────────────────────────────────
const TSCustomerScreen = ({ dialog = false }) => (
  <div className="relative h-full w-full">
    <HRMShell active="timesheet" user={TA_ADMIN}
      title="Khách hàng"
      crumbs={['Bảng công', 'Danh mục', 'Khách hàng']}
      actions={<Btn variant="primary" size="sm" icon="plus">Thêm khách hàng</Btn>}>

      <TSModuleNav active="cust" perms={TSP_ADMIN} />

      <div className="mb-3.5 flex items-center gap-2.5 rounded-xl border border-border bg-card px-3.5 py-2.5 shadow-xs">
        <div className="relative flex w-64 items-center">
          <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
          <input className="h-8 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-xs text-foreground shadow-xs focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm khách hàng..." />
        </div>
        <Select className="h-8 w-40 text-xs" defaultValue="Tất cả trạng thái" options={['Tất cả trạng thái', 'Đang hoạt động', 'Đã lưu trữ']} />
        <div className="flex-1" />
        <span className="text-xs text-muted-foreground">{TA_CUSTOMERS.length} khách hàng</span>
      </div>

      <div className="overflow-hidden rounded-lg border border-border bg-card">
        <table className={TA_TABLE}>
          <thead>
            <tr>
              <th>Mã</th><th>Tên khách hàng</th>
              <th style={{ textAlign: 'center' }}>Số dự án</th>
              <th>Trạng thái</th><th style={{ textAlign: 'right' }}>Thao tác</th>
            </tr>
          </thead>
          <tbody>
            {TA_CUSTOMERS.map(c => {
              const st = TA_STATUS[c.status];
              return (
                <tr key={c.code}>
                  <td><span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-semibold text-muted-foreground">{c.code}</span></td>
                  <td className="font-medium">{c.name}</td>
                  <td className="text-center tabular-nums">{c.projects}</td>
                  <td><Badge variant={st.v} dot>{st.label}</Badge></td>
                  <td>
                    <div className="flex justify-end gap-1">
                      <Btn variant="ghost" size="sm" iconOnly icon="edit" />
                      {/* Archive-only: có dự án → chỉ lưu trữ; chưa có dự án → được xóa cứng */}
                      {c.projects > 0
                        ? <Btn variant="ghost" size="sm" iconOnly icon="inbox" title="Lưu trữ" />
                        : <Btn variant="ghost" size="sm" iconOnly icon="trash" title="Xóa (chưa bị tham chiếu)" />}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </HRMShell>

    {dialog && (
      <TAOverlay width={480}>
        <TADialogHead title="Thêm khách hàng" sub="action:timesheet:manage_customer" />
        <div className="flex flex-col gap-4 px-5 py-5">
          <TAField label="Mã khách hàng"><input className={TA_INPUT} placeholder="VD: ELS" defaultValue="" /></TAField>
          <TAField label="Tên khách hàng"><input className={TA_INPUT} placeholder="VD: ELS Technologies" /></TAField>
          <TAField label="Ghi chú" hint="Tùy chọn">
            <textarea className="h-16 w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Mô tả ngắn về khách hàng..." />
          </TAField>
        </div>
        <div className="flex justify-end gap-2 border-t border-border bg-muted px-5 py-3">
          <Btn variant="outline" size="sm">Hủy</Btn>
          <Btn variant="primary" size="sm">Lưu khách hàng</Btn>
        </div>
      </TAOverlay>
    )}
  </div>
);

// ─── 08: Dự án — danh sách ────────────────────────────────────────────────────
const TSProjectListScreen = () => (
  <div className="relative h-full w-full">
    <HRMShell active="timesheet" user={TA_ADMIN}
      title="Dự án"
      crumbs={['Bảng công', 'Danh mục', 'Dự án']}
      actions={<Btn variant="primary" size="sm" icon="plus">Thêm dự án</Btn>}>

      <TSModuleNav active="proj" perms={TSP_ADMIN} />

      <div className="mb-4 grid grid-cols-4 gap-3">
        {[
          { label: 'Tổng dự án',    val: '5',  icon: 'briefcase',    ib: 'var(--color-primary-soft)', ic: 'var(--color-primary)' },
          { label: 'Đang hoạt động', val: '4', icon: 'check-circle', ib: 'var(--color-success-soft)', ic: 'var(--color-success)' },
          { label: 'Ngừng dùng',    val: '1',  icon: 'pause-circle', ib: 'var(--color-warning-soft)', ic: 'oklch(0.55 0.158 65)' },
          { label: 'Nhân sự tham gia', val: '18', icon: 'users',     ib: 'var(--color-info-soft)',    ic: 'var(--color-info)' },
        ].map((s, i) => <StatCard key={i} label={s.label} value={s.val} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
      </div>

      <div className="mb-3.5 flex items-center gap-2.5 rounded-xl border border-border bg-card px-3.5 py-2.5 shadow-xs">
        <div className="relative flex w-60 items-center">
          <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
          <input className="h-8 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-xs text-foreground shadow-xs focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm dự án..." />
        </div>
        <Select className="h-8 w-44 text-xs" defaultValue="Tất cả khách hàng" options={['Tất cả khách hàng', 'ELS Technologies', 'ABC Corp', 'Internal']} />
        <Select className="h-8 w-40 text-xs" defaultValue="Tất cả trạng thái" options={['Tất cả trạng thái', 'Đang hoạt động', 'Ngừng dùng', 'Đã lưu trữ']} />
        <div className="flex-1" />
        <span className="text-xs text-muted-foreground">{TA_PROJECTS.length} dự án</span>
      </div>

      <div className="overflow-hidden rounded-lg border border-border bg-card">
        <table className={TA_TABLE}>
          <thead>
            <tr>
              <th>Dự án</th><th>Khách hàng</th>
              <th style={{ textAlign: 'center' }}>Nhân sự</th>
              <th style={{ textAlign: 'center' }}>Hoạt động</th>
              <th style={{ textAlign: 'right' }}>Đơn giá/giờ</th>
              <th>Trạng thái</th><th style={{ textAlign: 'right' }}>Thao tác</th>
            </tr>
          </thead>
          <tbody>
            {TA_PROJECTS.map(p => {
              const st = TA_STATUS[p.status];
              return (
                <tr key={p.code}>
                  <td>
                    <div className="flex items-center gap-2.5">
                      <span className="size-2.5 shrink-0 rounded-full" style={{ background: p.color }} />
                      <div>
                        <div className="text-sm font-semibold text-primary">{p.name}</div>
                        <div className="font-mono text-xs text-muted-foreground">{p.code}</div>
                      </div>
                    </div>
                  </td>
                  <td className="text-sm">{p.customer}</td>
                  <td className="text-center">
                    <span className="inline-flex items-center gap-1 tabular-nums"><Icon name="users" size={13} className="text-muted-foreground" />{p.headcount}</span>
                  </td>
                  <td className="text-center tabular-nums">{p.activities}</td>
                  <td className="text-right tabular-nums">{p.rate || <span className="text-muted-foreground">N/A</span>}</td>
                  <td><Badge variant={st.v} dot>{st.label}</Badge></td>
                  <td>
                    <div className="flex justify-end gap-1">
                      <Btn variant="ghost" size="sm" iconOnly icon="eye" title="Chi tiết" />
                      <Btn variant="ghost" size="sm" iconOnly icon="edit" title="Sửa" />
                      {p.referenced
                        ? <Btn variant="ghost" size="sm" iconOnly icon="inbox" title="Lưu trữ (đã có dữ liệu công)" />
                        : <Btn variant="ghost" size="sm" iconOnly icon="trash" title="Xóa (chưa bị tham chiếu)" />}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <p className="mt-3 flex items-center gap-1.5 text-xs text-muted-foreground">
        <Icon name="info" size={13} />
        Dự án đã phát sinh dòng công hoặc hoạt động con chỉ có thể <b className="font-semibold">Lưu trữ</b>. Nút Xóa cứng chỉ hiện với dự án chưa bị tham chiếu.
      </p>
    </HRMShell>
  </div>
);

// ─── 09 & 10: Dự án — chi tiết (tabs) [+ dialog gán nhân sự] ───────────────────
const PROJ_TABS = [
  { id: 'info', label: 'Thông tin', icon: 'info' },
  { id: 'activities', label: 'Hoạt động', icon: 'file-text' },
  { id: 'assignees', label: 'Nhân sự tham gia', icon: 'users' },
];

const TSProjectDetailScreen = ({ tab = 'info', dialog = false }) => {
  const p = TA_PROJECTS[0];
  const acts = TA_ACTIVITY_GROUPS[0].items;
  return (
    <div className="relative h-full w-full">
      <HRMShell active="timesheet" user={TA_ADMIN}
        title={p.name}
        crumbs={['Bảng công', 'Danh mục', 'Dự án', p.code]}
        meta={p.code}
        actions={<>
          <Btn variant="outline" size="sm" icon="inbox">Lưu trữ</Btn>
          <Btn variant="primary" size="sm" icon="edit">Chỉnh sửa</Btn>
        </>}>

        <TSModuleNav active="proj" perms={TSP_ADMIN} />

        {/* Tabs */}
        <div className="mb-4 flex gap-1 border-b border-border">
          {PROJ_TABS.map(t => {
            const on = t.id === tab;
            return (
              <div key={t.id} className={"flex cursor-pointer items-center gap-1.5 border-b-2 px-3.5 py-2.5 text-sm font-medium "
                + (on ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")}>
                <Icon name={t.icon} size={14} />{t.label}
                {t.id === 'activities' && <span className="rounded-full bg-muted px-1.5 text-xs">{p.activities}</span>}
                {t.id === 'assignees' && <span className="rounded-full bg-muted px-1.5 text-xs">{p.headcount}</span>}
              </div>
            );
          })}
        </div>

        {tab === 'info' && (
          <div className="grid grid-cols-[1fr_300px] gap-4">
            <div className="flex flex-col gap-4 rounded-xl border border-border bg-card p-5 shadow-xs">
              <div className="grid grid-cols-2 gap-x-8 gap-y-4">
                {[
                  ['Mã dự án', p.code], ['Khách hàng', p.customer],
                  ['Trạng thái', <Badge variant={TA_STATUS[p.status].v} dot>{TA_STATUS[p.status].label}</Badge>],
                  ['Đơn giá/giờ (billing_rate)', p.rate || 'N/A'],
                  ['Ngày tạo', '02/01/2026'], ['Người tạo', 'Nguyễn Quản Trị'],
                ].map(([k, v], i) => (
                  <div key={i}>
                    <div className="mb-1 text-xs font-medium uppercase tracking-[0.04em] text-muted-foreground">{k}</div>
                    <div className="text-sm font-semibold text-foreground">{v}</div>
                  </div>
                ))}
              </div>
              <div>
                <div className="mb-1 text-xs font-medium uppercase tracking-[0.04em] text-muted-foreground">Mô tả</div>
                <div className="text-sm leading-relaxed text-foreground">Nền tảng quản trị nhân sự nội bộ ELS — bao gồm PIM, chấm công, nghỉ phép và bảng công.</div>
              </div>
            </div>
            <div className="flex flex-col gap-3">
              <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
                <div className="mb-3 text-xs font-bold uppercase tracking-[0.04em] text-muted-foreground">Tổng quan</div>
                {[['Nhân sự tham gia', `${p.headcount} người`], ['Hoạt động', `${p.activities} loại`], ['Giờ đã duyệt', '312h']].map(([k, v], i) => (
                  <div key={i} className={"flex justify-between py-2 text-sm " + (i < 2 ? "border-b border-border" : "")}>
                    <span className="text-muted-foreground">{k}</span><span className="font-semibold">{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {tab === 'activities' && (
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border bg-muted px-4 py-2.5">
              <span className="text-xs font-semibold uppercase tracking-[0.04em] text-muted-foreground">Hoạt động của dự án</span>
              <Btn variant="soft" size="xs" icon="plus">Thêm hoạt động</Btn>
            </div>
            <table className={TA_TABLE}>
              <thead><tr><th>Tên hoạt động</th><th>Loại</th><th style={{ textAlign: 'center' }}>Dòng công</th><th style={{ textAlign: 'right' }}>Thao tác</th></tr></thead>
              <tbody>
                {acts.map((a, i) => (
                  <tr key={i}>
                    <td className="font-medium"><span className="inline-flex items-center gap-2">{a.name}{a.status === 'inactive' && <Badge variant="neutral">Đã ngừng</Badge>}</span></td>
                    <td><Badge variant={a.billable ? 'success' : 'neutral'}>{a.billable ? 'Tính phí' : 'Không tính phí'}</Badge></td>
                    <td className="text-center tabular-nums">{a.entries}</td>
                    <td>
                      <div className="flex justify-end gap-1">
                        <Btn variant="ghost" size="sm" iconOnly icon="edit" />
                        {a.status === 'inactive'
                          ? <Btn variant="ghost" size="sm" iconOnly icon="rotate-ccw" title="Bật lại hoạt động" />
                          : a.entries > 0
                            ? <Btn variant="ghost" size="sm" iconOnly icon="pause-circle" title="Ngừng dùng (đã có dòng công)" />
                            : <Btn variant="ghost" size="sm" iconOnly icon="trash" title="Xóa (chưa bị tham chiếu)" />}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {tab === 'assignees' && (
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border bg-muted px-4 py-2.5">
              <span className="text-xs font-semibold uppercase tracking-[0.04em] text-muted-foreground">Nhân sự được phân bổ</span>
              <Btn variant="soft" size="xs" icon="plus">Gán nhân sự</Btn>
            </div>
            <table className={TA_TABLE}>
              <thead><tr><th>Nhân viên</th><th>Vai trò</th><th>Ngày gán</th><th style={{ textAlign: 'right' }}>Thao tác</th></tr></thead>
              <tbody>
                {TA_ASSIGNEES.filter(a => a.assigned).map((a, i) => (
                  <tr key={i}>
                    <td><div className="flex items-center gap-2.5"><Avatar name={a.name} size="sm" /><span className="text-sm font-medium">{a.name}</span></div></td>
                    <td className="text-sm text-muted-foreground">{a.role}</td>
                    <td className="text-xs text-muted-foreground">02/01/2026</td>
                    <td><div className="flex justify-end"><Btn variant="ghost" size="sm" iconOnly icon="x" title="Gỡ phân bổ" /></div></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </HRMShell>

      {dialog && (
        <TAOverlay width={520}>
          <TADialogHead title="Gán nhân sự vào dự án" sub={`${p.name} · chọn nhiều nhân viên`} />
          <div className="px-5 py-4">
            <div className="relative mb-3 flex items-center">
              <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
              <input className={TA_INPUT + " pl-8"} placeholder="Tìm nhân viên theo tên hoặc phòng ban..." />
            </div>
            <div className="max-h-[280px] overflow-auto rounded-lg border border-border">
              {TA_ASSIGNEES.map((a, i) => (
                <label key={i} className={"flex cursor-pointer items-center gap-3 border-b border-border px-3.5 py-2.5 last:border-0 "
                  + (a.assigned ? "opacity-55" : "hover:bg-muted")}>
                  <input type="checkbox" defaultChecked={a.assigned || a.picked} disabled={a.assigned} />
                  <Avatar name={a.name} size="sm" />
                  <div className="flex-1">
                    <div className="text-sm font-medium">{a.name}</div>
                    <div className="text-xs text-muted-foreground">{a.role}</div>
                  </div>
                  {a.assigned && <Badge variant="neutral">Đã gán</Badge>}
                  {a.picked && <Badge variant="primary" dot>Chọn mới</Badge>}
                </label>
              ))}
            </div>
            <div className="mt-2.5 text-xs text-muted-foreground">Đã chọn <b className="font-semibold text-foreground">2</b> nhân viên mới để phân bổ.</div>
          </div>
          <div className="flex justify-end gap-2 border-t border-border bg-muted px-5 py-3">
            <Btn variant="outline" size="sm">Hủy</Btn>
            <Btn variant="primary" size="sm" icon="check">Gán 2 nhân viên</Btn>
          </div>
        </TAOverlay>
      )}
    </div>
  );
};

// ─── 11: Hoạt động — nhóm theo dự án ──────────────────────────────────────────
const TSActivityScreen = () => (
  <div className="relative h-full w-full">
    <HRMShell active="timesheet" user={TA_ADMIN}
      title="Hoạt động"
      crumbs={['Bảng công', 'Danh mục', 'Hoạt động']}
      actions={<Btn variant="primary" size="sm" icon="plus">Thêm hoạt động</Btn>}>

      <TSModuleNav active="act" perms={TSP_ADMIN} />

      <div className="mb-3.5 flex items-center gap-2.5 rounded-xl border border-border bg-card px-3.5 py-2.5 shadow-xs">
        <Select className="h-8 w-56 text-xs" defaultValue="Tất cả dự án" options={['Tất cả dự án', 'ELS HRM Platform', 'ABC Corp Portal']} />
        <Select className="h-8 w-40 text-xs" defaultValue="Tất cả loại" options={['Tất cả loại', 'Tính phí', 'Không tính phí']} />
        <div className="flex-1" />
        <span className="text-xs text-muted-foreground">8 hoạt động · 2 dự án</span>
      </div>

      <div className="flex flex-col gap-4">
        {TA_ACTIVITY_GROUPS.map((g, gi) => (
          <div key={gi} className="overflow-hidden rounded-lg border border-border bg-card">
            <div className="flex items-center gap-2.5 border-b border-border bg-muted px-4 py-2.5">
              <span className="size-2.5 rounded-full" style={{ background: g.color }} />
              <span className="text-sm font-semibold">{g.proj}</span>
              <span className="text-xs text-muted-foreground">· {g.items.length} hoạt động</span>
            </div>
            <table className={TA_TABLE}>
              <thead><tr><th>Tên hoạt động</th><th>Loại</th><th style={{ textAlign: 'center' }}>Dòng công</th><th style={{ textAlign: 'right' }}>Thao tác</th></tr></thead>
              <tbody>
                {g.items.map((a, i) => (
                  <tr key={i}>
                    <td className="font-medium"><span className="inline-flex items-center gap-2">{a.name}{a.status === 'inactive' && <Badge variant="neutral">Đã ngừng</Badge>}</span></td>
                    <td>
                      {a.billable
                        ? <Badge variant="success" dot>Tính phí</Badge>
                        : <Badge variant="neutral" dot>Không tính phí</Badge>}
                    </td>
                    <td className="text-center tabular-nums">{a.entries}</td>
                    <td>
                      <div className="flex justify-end gap-1">
                        <Btn variant="ghost" size="sm" iconOnly icon="edit" />
                        {a.status === 'inactive'
                          ? <Btn variant="ghost" size="sm" iconOnly icon="rotate-ccw" title="Bật lại hoạt động" />
                          : a.entries > 0
                            ? <Btn variant="ghost" size="sm" iconOnly icon="pause-circle" title="Ngừng dùng (đã có dòng công)" />
                            : <Btn variant="ghost" size="sm" iconOnly icon="trash" title="Xóa (chưa bị tham chiếu)" />}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
      </div>
    </HRMShell>
  </div>
);

// ══════════════════════════════════════════════════════════════════════════════
// SECTION DUYỆT & TRAO ĐỔI — Manager/Approver · action:timesheet:approve + reject
// ══════════════════════════════════════════════════════════════════════════════

const TA_THREAD = [
  { who: 'Đỗ Văn Hùng', role: 'emp', at: '16/05 · 09:12', kind: 'submit', text: 'Đã hoàn thành sprint 19. Thứ 6 có tăng ca để fix bug production.' },
  { who: 'Lê Hữu Phước', role: 'mgr', at: '16/05 · 14:03', kind: 'comment', text: 'Giờ thứ 6 (10h) hơi cao so với thường lệ, em xác nhận lại giúp anh nhé.' },
  { who: 'Đỗ Văn Hùng', role: 'emp', at: '16/05 · 14:20', kind: 'comment', text: 'Dạ đúng rồi anh, hôm đó sự cố production nên em ở lại xử lý.' },
];

// ─── 12: Duyệt bảng công + luồng comment ──────────────────────────────────────
const TSApproveCommentsScreen = ({ reject = false }) => (
  <div className="relative h-full w-full">
    <HRMShell active="timesheet" user={TA_MANAGER}
      title="Xem xét bảng công"
      crumbs={['Bảng công', 'Chờ duyệt', 'ts-24-02']}
      meta="Đỗ Văn Hùng · Tuần 19"
      actions={<>
        <Btn variant="outline" size="sm" icon="x">Từ chối</Btn>
        <Btn variant="primary" size="sm" icon="check">Phê duyệt</Btn>
      </>}>
      <TSModuleNav active="approve" perms={TSP_MANAGE} />
      <div className="grid grid-cols-[1fr_360px] gap-4">
        {/* Trái: tóm tắt + bảng công read-only */}
        <div className="flex flex-col gap-3.5">
          <div className="flex items-center gap-4 rounded-xl border border-border bg-card p-5 shadow-xs">
            <Avatar name="Đỗ Văn Hùng" size="lg" />
            <div className="flex-1">
              <div className="mb-1 text-md font-bold">Đỗ Văn Hùng</div>
              <div className="text-sm text-muted-foreground">Frontend Developer · Engineering</div>
              <div className="mt-2 flex items-center gap-2">
                <Badge variant="warning" dot>Chờ phê duyệt</Badge>
                <span className="text-xs text-muted-foreground">Nộp: 16/05/2026 · Người duyệt: cấp trên trực tiếp</span>
              </div>
            </div>
            <div className="text-right">
              <div className="text-4xl font-extrabold leading-none text-primary">31.5h</div>
              <div className="text-xs text-muted-foreground">Tuần 19 · 12-18/05</div>
            </div>
          </div>

          <div className="overflow-hidden rounded-xl border border-border bg-card shadow-xs">
            <table className={TA_TABLE}>
              <thead><tr><th>Dự án / Hoạt động</th><th style={{ textAlign: 'center' }}>Giờ</th><th>Loại</th></tr></thead>
              <tbody>
                {[
                  ['ELS HRM Platform', 'Frontend Development', 37.5, true, 'var(--color-primary)',
                    [['T2 12/5', 'Dựng trang đăng nhập, tích hợp form OTP'], ['T4 14/5', 'Review PR #42 & sửa lỗi validate form']]],
                  ['ABC Corp Portal', 'API Integration', 2, true, 'var(--color-info)',
                    [['T6 16/5', 'Nối API đồng bộ dữ liệu khách hàng ABC']]],
                ].map((r, i) => (
                  <tr key={i}>
                    <td className="align-top">
                      <div className="flex items-start gap-2">
                        <span className="mt-1.5 size-2 shrink-0 rounded-full" style={{ background: r[4] }} />
                        <div>
                          <div className="text-sm font-medium">{r[0]}</div>
                          <div className="text-xs text-muted-foreground">{r[1]}</div>
                          {r[5] && r[5].length > 0 && (
                            <ul className="mt-1.5 flex flex-col gap-0.5">
                              {r[5].map((n, j) => (
                                <li key={j} className="flex gap-1.5 text-xs leading-relaxed">
                                  <span className="shrink-0 font-semibold text-foreground">{n[0]}:</span>
                                  <span className="italic text-muted-foreground">{n[1]}</span>
                                </li>
                              ))}
                            </ul>
                          )}
                        </div>
                      </div>
                    </td>
                    <td className="text-center align-top font-bold tabular-nums">{r[2]}</td>
                    <td className="align-top"><Badge variant={r[3] ? 'success' : 'neutral'}>{r[3] ? 'Tính phí' : 'Nội bộ'}</Badge></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Phải: luồng trao đổi (Timesheet Comments) */}
        <div className="flex flex-col rounded-xl border border-border bg-card shadow-xs">
          <div className="flex items-center gap-2 border-b border-border px-4 py-3">
            <Icon name="message-square" size={15} className="text-primary" />
            <span className="text-sm font-bold">Trao đổi</span>
            <span className="rounded-full bg-muted px-1.5 text-xs text-muted-foreground">{TA_THREAD.length}</span>
          </div>
          <div className="flex-1 space-y-3.5 overflow-auto px-4 py-4">
            {TA_THREAD.map((c, i) => (
              <div key={i} className="flex gap-2.5">
                <Avatar name={c.who} size="sm" />
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="text-xs font-semibold text-foreground">{c.who}</span>
                    {c.kind === 'submit' && <Badge variant="info">Đã nộp</Badge>}
                    <span className="text-xs text-muted-foreground">{c.at}</span>
                  </div>
                  <div className={"mt-1 rounded-lg px-3 py-2 text-sm leading-relaxed "
                    + (c.role === 'mgr' ? "bg-primary-soft text-foreground" : "bg-muted text-foreground")}>
                    {c.text}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="border-t border-border p-3">
            <div className="flex items-end gap-2">
              <textarea className="h-[38px] flex-1 resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-sm text-foreground shadow-xs focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Viết bình luận..." />
              <Btn variant="primary" size="sm" iconOnly icon="send" />
            </div>
          </div>
        </div>
      </div>
    </HRMShell>

    {reject && (
      <TAOverlay width={460}>
        <TADialogHead title="Từ chối bảng công" sub="Đỗ Văn Hùng · Tuần 19" />
        <div className="px-5 py-5">
          <div className="mb-3 flex items-start gap-2 rounded-md bg-destructive-soft px-3 py-2.5 text-xs text-destructive">
            <Icon name="alert-triangle" size={15} className="mt-px shrink-0" />
            <span>Bảng công sẽ chuyển về trạng thái <b>Từ chối</b> và nhân viên phải nộp lại. Lý do là <b>bắt buộc</b>.</span>
          </div>
          <TAField label="Lý do từ chối *" hint="Nhân viên sẽ thấy lý do này khi nộp lại.">
            <textarea className="h-24 w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="VD: Vui lòng bổ sung ghi chú cho 10h ngày thứ 6..." />
          </TAField>
        </div>
        <div className="flex justify-end gap-2 border-t border-border bg-muted px-5 py-3">
          <Btn variant="outline" size="sm">Hủy</Btn>
          <Btn variant="destructive" size="sm" icon="x">Xác nhận từ chối</Btn>
        </div>
      </TAOverlay>
    )}
  </div>
);

// ══════════════════════════════════════════════════════════════════════════════
// SECTION BÁO CÁO — screen:timesheet · scope data:timesheet:dept/all · chỉ approved
// ══════════════════════════════════════════════════════════════════════════════

const REPORT_TABS = [
  { id: 'project',  label: 'Giờ theo Dự án' },
  { id: 'employee', label: 'Giờ theo Nhân viên' },
  { id: 'cost',     label: 'Chi phí Dự án' },
  { id: 'util',     label: 'Tỷ lệ sử dụng' },
];

const UTIL_CLASS = {
  UNDER: { label: 'Dưới công suất', v: 'danger' },
  NORMAL: { label: 'Bình thường', v: 'info' },
  OPTIMAL: { label: 'Tối ưu', v: 'success' },
  OVER: { label: 'Quá tải', v: 'warning' },
};

const TSReportScreen = ({ tab = 'project' }) => {
  const active = REPORT_TABS.find(t => t.id === tab) || REPORT_TABS[0];
  return (
    <div className="relative h-full w-full">
      <HRMShell active="timesheet" user={TA_MANAGER}
        title="Báo cáo công"
        crumbs={['Bảng công', 'Báo cáo']}
        actions={<>
          <Btn variant="outline" size="sm" icon="download">CSV</Btn>
          <Btn variant="outline" size="sm" icon="file-text">PDF</Btn>
        </>}>

        <TSModuleNav active="report" perms={TSP_MANAGE} />

        {/* Bộ lọc + scope quyền dữ liệu */}
        <div className="mb-3.5 flex flex-wrap items-center gap-2.5 rounded-xl border border-border bg-card px-3.5 py-2.5 shadow-xs">
          <Select className="h-8 w-48 text-xs" defaultValue="Tháng 5/2026" options={['Tháng 5/2026', 'Quý 2/2026', 'Tùy chọn khoảng...']} />
          <Select className="h-8 w-44 text-xs" defaultValue="Tất cả dự án" options={['Tất cả dự án', 'ELS HRM Platform', 'ABC Corp Portal']} />
          <div className="flex items-center gap-1.5 rounded-md border border-border bg-muted px-1 py-1">
            <span className="px-1.5 text-xs font-medium text-muted-foreground">Phạm vi</span>
            <button className="rounded bg-card px-2 py-1 text-xs font-semibold text-primary shadow-xs">Phòng ban</button>
            <button className="rounded px-2 py-1 text-xs font-medium text-muted-foreground" title="Yêu cầu data:timesheet:all">Toàn công ty</button>
          </div>
          <div className="flex-1" />
          <span className="flex items-center gap-1 text-xs text-muted-foreground"><Icon name="check-circle" size={12} className="text-success" />Chỉ tính bảng công đã duyệt</span>
        </div>

        {/* Tabs loại báo cáo */}
        <div className="mb-4 flex gap-1 border-b border-border">
          {REPORT_TABS.map(t => {
            const on = t.id === tab;
            return (
              <div key={t.id} className={"cursor-pointer border-b-2 px-3.5 py-2.5 text-sm font-medium "
                + (on ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")}>
                {t.label}
              </div>
            );
          })}
        </div>

        {tab === 'project' && <>
          <div className="mb-4 grid grid-cols-4 gap-3">
            {[
              { label: 'Tổng giờ', val: '653h', icon: 'clock', ib: 'var(--color-primary-soft)', ic: 'var(--color-primary)' },
              { label: 'Giờ tính phí', val: '484h', icon: 'dollar', ib: 'var(--color-success-soft)', ic: 'var(--color-success)' },
              { label: 'Giờ không tính phí', val: '169h', icon: 'briefcase', ib: 'var(--color-muted)', ic: 'var(--color-muted-foreground)' },
              { label: 'Số dự án', val: '4', icon: 'briefcase', ib: 'var(--color-info-soft)', ic: 'var(--color-info)' },
            ].map((s, i) => <StatCard key={i} {...{ label: s.label, value: s.val, icon: s.icon, iconBg: s.ib, iconColor: s.ic }} />)}
          </div>
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <table className={TA_TABLE}>
              <thead><tr><th>Dự án</th><th>Khách hàng</th><th style={{ textAlign: 'right' }}>Tổng giờ</th><th style={{ textAlign: 'right' }}>Tính phí</th><th style={{ textAlign: 'right' }}>Không tính phí</th></tr></thead>
              <tbody>
                {[
                  ['ELS HRM Platform', 'ELS Technologies', 312, 288, 24],
                  ['ABC Corp Portal', 'ABC Corp', 196, 196, 0],
                  ['Internal Development', 'Internal', 84, 0, 84],
                  ['Operations Support', 'Internal', 61, 0, 61],
                ].map((r, i) => (
                  <tr key={i}>
                    <td className="font-medium">{r[0]}</td><td className="text-sm text-muted-foreground">{r[1]}</td>
                    <td className="text-right font-bold tabular-nums">{r[2]}h</td>
                    <td className="text-right tabular-nums text-success">{r[3]}h</td>
                    <td className="text-right tabular-nums text-muted-foreground">{r[4]}h</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>}

        {tab === 'employee' && (
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <table className={TA_TABLE}>
              <thead><tr><th>Nhân viên</th><th>Bộ phận</th><th style={{ textAlign: 'center' }}>Bảng công</th><th style={{ textAlign: 'right' }}>Tổng giờ</th><th style={{ textAlign: 'right' }}>Hiệu suất</th></tr></thead>
              <tbody>
                {[
                  ['Đỗ Văn Hùng', 'Engineering', 4, 168, 105],
                  ['Lê Thị Hương', 'QA', 4, 160, 100],
                  ['Trần Minh Tuấn', 'Engineering', 4, 152, 95],
                  ['Ngô Minh Khoa', 'DevOps', 4, 128, 80],
                ].map((r, i) => (
                  <tr key={i}>
                    <td><div className="flex items-center gap-2.5"><Avatar name={r[0]} size="sm" /><span className="text-sm font-medium">{r[0]}</span></div></td>
                    <td className="text-sm text-muted-foreground">{r[1]}</td>
                    <td className="text-center tabular-nums">{r[2]}</td>
                    <td className="text-right font-bold tabular-nums">{r[3]}h</td>
                    <td className="text-right"><span className="tabular-nums font-semibold" style={{ color: r[4] >= 100 ? 'var(--color-success)' : 'var(--color-warning)' }}>{r[4]}%</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {tab === 'cost' && <>
          <div className="mb-3 flex items-center gap-1.5 text-xs text-muted-foreground">
            <Icon name="info" size={13} />Chi phí = Giờ tính phí × Đơn giá dự án (<span className="font-mono">projects.billing_rate</span>). Dự án không có đơn giá hiển thị <b>N/A</b>.
          </div>
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <table className={TA_TABLE}>
              <thead><tr><th>Dự án</th><th>Khách hàng</th><th style={{ textAlign: 'right' }}>Giờ tính phí</th><th style={{ textAlign: 'right' }}>Đơn giá/giờ</th><th style={{ textAlign: 'right' }}>Tổng chi phí</th></tr></thead>
              <tbody>
                {[
                  ['ELS HRM Platform', 'ELS Technologies', 288, '450.000₫', '129.600.000₫'],
                  ['ABC Corp Portal', 'ABC Corp', 196, '520.000₫', '101.920.000₫'],
                  ['Internal Development', 'Internal', 0, null, null],
                  ['Operations Support', 'Internal', 0, null, null],
                ].map((r, i) => (
                  <tr key={i}>
                    <td className="font-medium">{r[0]}</td><td className="text-sm text-muted-foreground">{r[1]}</td>
                    <td className="text-right tabular-nums">{r[2]}h</td>
                    <td className="text-right tabular-nums">{r[3] || <span className="text-muted-foreground">N/A</span>}</td>
                    <td className="text-right font-bold tabular-nums">{r[4] || <span className="font-normal text-muted-foreground">N/A</span>}</td>
                  </tr>
                ))}
                <tr className="bg-muted"><td className="font-bold uppercase tracking-[0.04em] text-xs text-muted-foreground" colSpan={4}>Tổng chi phí dự kiến</td><td className="text-right text-md font-extrabold text-primary tabular-nums">231.520.000₫</td></tr>
              </tbody>
            </table>
          </div>
        </>}

        {tab === 'util' && <>
          <div className="mb-3.5 grid grid-cols-4 gap-3">
            {[
              { k: 'Dưới công suất', v: '1', c: 'var(--color-destructive)' },
              { k: 'Bình thường', v: '0', c: 'var(--color-info)' },
              { k: 'Tối ưu', v: '4', c: 'var(--color-success)' },
              { k: 'Quá tải', v: '1', c: 'var(--color-warning)' },
            ].map((s, i) => (
              <div key={i} className="rounded-lg border border-border bg-card p-4">
                <div className="text-xs font-medium uppercase tracking-[0.04em] text-muted-foreground">{s.k}</div>
                <div className="mt-1.5 text-2xl font-bold tabular-nums" style={{ color: s.c }}>{s.v}</div>
              </div>
            ))}
          </div>
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <table className={TA_TABLE}>
              <thead><tr><th>Nhân viên</th><th style={{ textAlign: 'right' }}>Giờ thực tế</th><th style={{ textAlign: 'right' }}>Giờ kỳ vọng</th><th>Tỷ lệ sử dụng</th><th>Phân loại</th></tr></thead>
              <tbody>
                {[
                  ['Nguyễn Bảo', 184, 160, 115, 'OVER'],
                  ['Đỗ Văn Hùng', 168, 160, 105, 'OPTIMAL'],
                  ['Lê Thị Hương', 160, 160, 100, 'OPTIMAL'],
                  ['Trần Minh Tuấn', 152, 160, 95, 'OPTIMAL'],
                  ['Ngô Minh Khoa', 128, 160, 80, 'OPTIMAL'],
                  ['Vũ Đức Anh', 68, 160, 43, 'UNDER'],
                ].map((r, i) => {
                  const cl = UTIL_CLASS[r[4]];
                  const barColor = r[4] === 'OVER' ? 'var(--color-warning)' : r[4] === 'UNDER' ? 'var(--color-destructive)' : 'var(--color-success)';
                  return (
                    <tr key={i}>
                      <td><div className="flex items-center gap-2.5"><Avatar name={r[0]} size="sm" /><span className="text-sm font-medium">{r[0]}</span></div></td>
                      <td className="text-right font-semibold tabular-nums">{r[1]}h</td>
                      <td className="text-right tabular-nums text-muted-foreground">{r[2]}h</td>
                      <td>
                        <div className="flex items-center gap-2">
                          <div className="h-[6px] w-28 overflow-hidden rounded-full bg-muted">
                            <div className="h-full rounded-full" style={{ width: `${Math.min(r[3], 100)}%`, background: barColor }} />
                          </div>
                          <span className="w-10 text-right text-xs font-semibold tabular-nums" style={{ color: barColor }}>{r[3]}%</span>
                        </div>
                      </td>
                      <td><Badge variant={cl.v} dot>{cl.label}</Badge></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </>}
      </HRMShell>
    </div>
  );
};

Object.assign(window, {
  TSCustomerScreen, TSProjectListScreen, TSProjectDetailScreen, TSActivityScreen,
  TSApproveCommentsScreen, TSReportScreen,
  TSModuleNav, TSP_ESS, TSP_MANAGE, TSP_ADMIN,
});