// ELS HRM — Module 01: Dashboard (Role-based) — Tailwind utility classes
// Hiển thị khác nhau theo role: Admin · HR Manager · Dept Manager · Employee

// ── Sparkline datasets ─────────────────────────────────────────────
const SK_HEAD   = [221,224,228,231,235,237,239,241,244,245,246,247];
const SK_ATTEND = [94,96,95,97,93,98,96,97,95,96,97,96];
const SK_LEAVE  = [5,8,6,9,7,11,8,10,9,12,10,12];
const SK_RECR   = [3,4,4,5,5,6,6,6,5,6,6,6];
const SK_TEAM   = [21,22,20,23,22,24,23,22,21,22,23,22];
const SK_PERS   = [8,8,0,8,8,8,8,0,8,8,8,8,8,8,8,8,0,8,8,8,8,8,8];

// shadcn table styling reproduced via arbitrary child variants (1 className, structure untouched)
const TABLE_CLS = "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";

const CARD = "rounded-xl border border-border bg-card shadow-xs";
const CARD_HEAD = "flex items-center justify-between gap-3 border-b border-border px-5 py-4";
const CARD_TITLE = "text-md font-semibold text-foreground";
const CARD_BODY = "p-5";

// ── Stat card with optional sparkline ─────────────────────────────
const EStat = ({ label, value, delta, deltaDir = 'up', icon, iconBg, iconColor, spark }) => (
  <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">
    <div className="flex items-center justify-between">
      <span className="text-xs font-medium uppercase tracking-[0.04em] text-muted-foreground">{label}</span>
      <span className="grid size-9 place-items-center rounded-md" style={{ background: iconBg, color: iconColor }}>
        <Icon name={icon} size={18} />
      </span>
    </div>
    <div className="text-2xl font-bold leading-none tabular-nums text-foreground">{value}</div>
    {spark && (
      <div className="-mx-0.5 mt-0.5">
        <MiniChart data={spark} height={30} color={iconColor || 'var(--color-primary)'} filled />
      </div>
    )}
    {delta && (
      <div className={"inline-flex items-center gap-1 text-xs font-medium " + (deltaDir === 'down' ? 'text-destructive' : 'text-success')}>
        <Icon name={deltaDir === 'down' ? 'trending-down' : 'trending-up'} size={11} />
        {delta}
      </div>
    )}
  </div>
);

// ── Donut chart card with legend ───────────────────────────────────
const DonutCard = ({ title, segments, center, size = 108 }) => {
  const total = segments.reduce((a, b) => a + b.value, 0);
  return (
    <div className={CARD + " min-w-60"}>
      <div className={CARD_HEAD}><div className={CARD_TITLE}>{title}</div></div>
      <div className={CARD_BODY}>
        <div className="flex items-center gap-3.5">
          <div className="relative shrink-0">
            <Donut segments={segments} size={size} stroke={14} />
            <div className="absolute inset-0 flex flex-col items-center justify-center">
              <span className="text-xl font-bold leading-none text-foreground">{center != null ? center : total}</span>
              <span className="text-2xs text-muted-foreground">tổng</span>
            </div>
          </div>
          <div className="flex flex-1 flex-col gap-[7px]">
            {segments.map((s, i) => (
              <div key={i} className="flex items-center gap-1.5">
                <span className="size-[7px] shrink-0 rounded-[2px]" style={{ background: s.color }} />
                <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs text-muted-foreground">{s.label}</span>
                <span className="whitespace-nowrap text-xs font-semibold text-foreground">
                  {s.value}<span className="font-normal text-muted-foreground"> ({Math.round(s.value / total * 100)}%)</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ── SparkCard: full-width trend chart ──────────────────────────────
const SparkCard = ({ title, subtitle, data, labels, color, bigValue, bigSub }) => (
  <div className={CARD + " flex-1"}>
    <div className={CARD_HEAD}>
      <div>
        <div className={CARD_TITLE}>{title}</div>
        {subtitle && <div className="mt-0.5 text-xs text-muted-foreground">{subtitle}</div>}
      </div>
      {bigValue && (
        <div className="flex items-baseline gap-[5px]">
          <span className="text-2xl font-bold text-foreground">{bigValue}</span>
          {bigSub && <span className="text-xs font-semibold text-success">{bigSub}</span>}
        </div>
      )}
    </div>
    <div className={CARD_BODY + " pt-2"}>
      <MiniChart data={data} height={80} color={color || 'var(--color-primary)'} />
      {labels && (
        <div className="mt-1.5 flex justify-between">
          {labels.map((l, i) => <span key={i} className="text-2xs text-muted-foreground">{l}</span>)}
        </div>
      )}
    </div>
  </div>
);

// ── Greeting banner ────────────────────────────────────────────────
const DashGreeting = ({ name, roleLabel, pending = 0, dept }) => (
  <div className="mb-4 flex items-center justify-between rounded-xl bg-primary px-5 py-3.5 text-white">
    <div className="flex items-center gap-3">
      <div className="grid size-[38px] place-items-center rounded-lg bg-white/[0.18]">
        <Icon name="sun" size={18} />
      </div>
      <div>
        <div className="text-md font-bold">Xin chào, {name}!</div>
        <div className="mt-0.5 text-xs opacity-[0.82]">Thứ Ba, 20 tháng 5, 2026 · {roleLabel}{dept ? ' — ' + dept : ''}</div>
      </div>
    </div>
    {pending > 0 && (
      <div className="flex items-center gap-[7px] rounded-md bg-white/[0.18] px-3.5 py-[7px]">
        <Icon name="bell" size={13} />
        <span className="text-xs font-semibold">{pending} việc cần xử lý</span>
      </div>
    )}
  </div>
);

// ── Section label helper ───────────────────────────────────────────
const SectionLabel = ({ children }) => (
  <div className="mb-2.5 text-xs font-bold uppercase tracking-[0.06em] text-muted-foreground">{children}</div>
);

// ─────────────────────────────────────────────────────────────────
//  01  ADMIN
// ─────────────────────────────────────────────────────────────────
const DashboardSystemAdmin = () => {
  const LOG = [
    { time: '09:41', user: 'Nguyễn Anh Đức',  action: 'Thêm vai trò "Kế toán trưởng" vào hệ thống',    t: 'info' },
    { time: '09:15', user: 'Trần Minh',         action: 'Cập nhật ma trận quyền cho HR Manager',          t: 'warning' },
    { time: '08:52', user: 'Lê Thu Hà',          action: 'Vô hiệu hóa tài khoản người dùng #1043',        t: 'danger' },
    { time: '08:30', user: 'Phạm Đức Tài',       action: 'Tạo phòng ban mới "R&D Lab"',                   t: 'success' },
    { time: '08:05', user: 'Hoàng Minh Lan',     action: 'Gán 12 nhân viên vào nhóm Kỹ thuật',            t: 'info' },
    { time: '07:48', user: 'Vũ Thị Nga',          action: 'Reset mật khẩu cho 3 tài khoản người dùng',    t: 'warning' },
  ];
  const T_ICON  = { info: 'check-circle', warning: 'alert-circle', danger: 'x-circle', success: 'check-circle' };
  const T_COLOR = { info: 'var(--color-info)', warning: 'oklch(0.55 0.158 65)', danger: 'var(--color-destructive)', success: 'var(--color-success)' };
  const ROLES = [
    { label: 'Admin',  count: 3,   color: 'var(--color-chart-1)' },
    { label: 'HR Manager',    count: 8,   color: 'var(--color-chart-2)' },
    { label: 'Dept Manager',  count: 12,  color: 'var(--color-chart-3)' },
    { label: 'Nhân viên',     count: 224, color: 'var(--color-muted-foreground)' },
  ];
  return (
    <HRMShell active="dashboard" title="Dashboard" user={{ name: 'Trần Minh', role: 'Admin' }}
      crumbs={['Dashboard']}
      actions={<>
        <Btn variant="outline" size="sm" icon="download">Xuất báo cáo</Btn>
        <Btn variant="primary" size="sm" icon="plus">Tác vụ nhanh</Btn>
      </>}>

      <DashGreeting name="Trần Minh" roleLabel="Admin" pending={8} />

      <div className="mb-4 grid grid-cols-4 gap-3.5">
        <EStat label="Tổng nhân viên"   value="247" delta="+3 tháng này"  deltaDir="up"   icon="users"         iconBg="var(--color-primary-soft)"     iconColor="var(--color-primary)"     spark={SK_HEAD} />
        <EStat label="Phòng ban"         value="12"  delta="đang hoạt động" deltaDir="up"  icon="building"      iconBg="var(--color-info-soft)"        iconColor="var(--color-info)" />
        <EStat label="Vai trò hệ thống"  value="5"                                          icon="settings"      iconBg="var(--color-warning-soft)"     iconColor="oklch(0.55 0.158 65)" />
        <EStat label="Chờ phê duyệt"    value="8"   delta="2 khẩn cấp"    deltaDir="down"  icon="alert-circle"  iconBg="var(--color-destructive-soft)" iconColor="var(--color-destructive)" />
      </div>

      <div className="mb-4 grid grid-cols-2 gap-3.5">
        <SparkCard
          title="Biến động nhân sự" subtitle="12 tháng gần nhất"
          data={SK_HEAD} color="var(--color-primary)" bigValue="247" bigSub="+12.1%"
          labels={['T6/25','T7','T8','T9','T10','T11','T12','T1/26','T2','T3','T4','T5']} />
        <DonutCard title="Phân bổ nhân sự" center={247} segments={[
          { label: 'Kỹ thuật',   value: 72, color: 'var(--color-chart-1)' },
          { label: 'Kinh doanh', value: 45, color: 'var(--color-chart-2)' },
          { label: 'Vận hành',   value: 38, color: 'var(--color-chart-3)' },
          { label: 'Marketing',  value: 28, color: 'var(--color-chart-4)' },
          { label: 'Khác',       value: 64, color: 'var(--color-chart-5)' },
        ]} />
      </div>

      <div className="grid grid-cols-2 gap-3.5">
        {/* Activity log */}
        <div className={CARD + " overflow-hidden"}>
          <div className={CARD_HEAD}>
            <div className={CARD_TITLE}>Nhật ký hoạt động hệ thống</div>
            <Btn variant="ghost" size="sm">Xem tất cả</Btn>
          </div>
          <table className={TABLE_CLS}>
            <thead><tr>
              <th style={{ width: 68 }}>Giờ</th>
              <th style={{ width: 160 }}>Người dùng</th>
              <th>Hành động</th>
              <th style={{ width: 36, textAlign: 'center' }}></th>
            </tr></thead>
            <tbody>
              {LOG.map((r, i) => (
                <tr key={i}>
                  <td><span className="text-xs tabular-nums text-muted-foreground">{r.time}</span></td>
                  <td>
                    <div className="flex items-center gap-2">
                      <Avatar name={r.user} size="sm" />
                      <span className="max-w-[110px] overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium">{r.user}</span>
                    </div>
                  </td>
                  <td><span className="text-xs text-muted-foreground">{r.action}</span></td>
                  <td className="text-center"><Icon name={T_ICON[r.t]} size={13} style={{ color: T_COLOR[r.t] }} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* User by role */}
        <div className={CARD}>
          <div className={CARD_HEAD}><div className={CARD_TITLE}>Người dùng theo vai trò</div></div>
          <div className={CARD_BODY + " flex flex-col gap-3.5"}>
            {ROLES.map((r, i) => {
              const pct = Math.round(r.count / 247 * 100);
              return (
                <div key={i}>
                  <div className="mb-[5px] flex justify-between">
                    <span className="text-xs font-medium text-foreground">{r.label}</span>
                    <span className="text-xs text-muted-foreground">{r.count} ({pct}%)</span>
                  </div>
                  <div className="h-2 overflow-hidden rounded-full bg-muted"><div className="h-full rounded-full" style={{ width: `${pct}%`, background: r.color }} /></div>
                </div>
              );
            })}
            <div className="mt-1 flex items-center justify-between border-t border-border pt-3">
              <span className="text-xs text-muted-foreground">Đăng nhập hôm nay</span>
              <Badge variant="success">183 người</Badge>
            </div>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─────────────────────────────────────────────────────────────────
//  02  HR MANAGER
// ─────────────────────────────────────────────────────────────────
const DashboardHRManager = () => {
  const LEAVES = [
    { name: 'Nguyễn Thị Bích', dept: 'Kỹ thuật',  type: 'Nghỉ năm',    dates: '20/05 → 22/05',   days: 3,  st: 'pending' },
    { name: 'Trần Văn Cường',  dept: 'Kinh doanh', type: 'Nghỉ ốm',     dates: '20/05',            days: 1,  st: 'pending' },
    { name: 'Lê Thị Dung',     dept: 'Marketing',  type: 'Nghỉ năm',    dates: '21/05 → 25/05',   days: 5,  st: 'pending' },
    { name: 'Phạm Văn Đông',   dept: 'Vận hành',   type: 'Việc riêng',  dates: '22/05',            days: 1,  st: 'approved' },
    { name: 'Hoàng Thị Giang', dept: 'HR',          type: 'Thai sản',    dates: '01/06 → 30/08',   days: 90, st: 'approved' },
  ];
  const PIPELINE = [
    { stage: 'Nộp hồ sơ',     count: 38, pct: 100, color: 'var(--color-chart-2)' },
    { stage: 'Sơ tuyển',       count: 22, pct: 58,  color: 'var(--color-chart-1)' },
    { stage: 'Phỏng vấn',      count: 12, pct: 32,  color: 'var(--color-chart-4)' },
    { stage: 'Đề xuất offer',  count: 3,  pct: 8,   color: 'var(--color-chart-3)' },
    { stage: 'Đã onboard',     count: 1,  pct: 3,   color: 'var(--color-success)' },
  ];
  return (
    <HRMShell active="dashboard" title="Dashboard" user={{ name: 'Lê Thị Hoa', role: 'HR Manager' }}
      crumbs={['Dashboard']}
      actions={<>
        <Btn variant="outline" size="sm" icon="file-text">Báo cáo tháng</Btn>
        <Btn variant="primary" size="sm" icon="plus">Tạo yêu cầu</Btn>
      </>}>

      <DashGreeting name="Lê Thị Hoa" roleLabel="HR Manager" pending={12} />

      <div className="mb-4 grid grid-cols-4 gap-3.5">
        <EStat label="Tổng nhân viên"       value="247"  delta="+18 tháng này"   deltaDir="up"   icon="users"       iconBg="var(--color-primary-soft)"     iconColor="var(--color-primary)"              spark={SK_HEAD} />
        <EStat label="Đơn nghỉ chờ duyệt"  value="12"   delta="5 mới hôm nay"   deltaDir="down" icon="umbrella"    iconBg="var(--color-warning-soft)"     iconColor="oklch(0.55 0.158 65)"        spark={SK_LEAVE} />
        <EStat label="Vị trí tuyển dụng"    value="6"    delta="+2 mới mở"       deltaDir="up"   icon="briefcase"   iconBg="var(--color-info-soft)"        iconColor="var(--color-info)"                 spark={SK_RECR} />
        <EStat label="Ứng viên đang xét"    value="38"   delta="8 pvấn tuần này" deltaDir="up"   icon="user-check"  iconBg="var(--color-success-soft)"     iconColor="var(--color-success)" />
      </div>

      <div className="mb-4 grid grid-cols-2 gap-3.5">
        <SparkCard
          title="Tỷ lệ chấm công" subtitle="12 tuần gần nhất (%)"
          data={SK_ATTEND} color="var(--color-info)" bigValue="96%" bigSub="+0.8%"
          labels={['T3/25','T4','T5','T6','T7','T8','T9','T10','T11','T12','T1/26','T2']} />
        <DonutCard title="Phân loại nghỉ phép" segments={[
          { label: 'Nghỉ năm',    value: 58, color: 'var(--color-chart-1)' },
          { label: 'Nghỉ ốm',    value: 24, color: 'var(--color-chart-3)' },
          { label: 'Việc riêng', value: 11, color: 'var(--color-chart-4)' },
          { label: 'Thai sản',   value: 7,  color: 'var(--color-chart-7)' },
        ]} />
      </div>

      <div className="grid grid-cols-2 gap-3.5">
        {/* Leave requests */}
        <div className={CARD + " overflow-hidden"}>
          <div className={CARD_HEAD}>
            <div className={CARD_TITLE}>Đơn nghỉ phép chờ duyệt</div>
            <div className="flex gap-1.5">
              <Btn variant="ghost" size="sm">Xem tất cả</Btn>
              <Btn variant="primary" size="sm">Duyệt hàng loạt</Btn>
            </div>
          </div>
          <table className={TABLE_CLS}>
            <thead><tr>
              <th>Nhân viên</th>
              <th>Loại nghỉ</th>
              <th>Thời gian</th>
              <th style={{ width: 48, textAlign: 'center' }}>Ngày</th>
              <th style={{ width: 100 }}>Trạng thái</th>
              <th style={{ width: 80 }}></th>
            </tr></thead>
            <tbody>
              {LEAVES.map((r, i) => (
                <tr key={i}>
                  <td>
                    <div className="flex items-center gap-2">
                      <Avatar name={r.name} size="sm" />
                      <div>
                        <div className="text-xs font-medium">{r.name}</div>
                        <div className="text-xs text-muted-foreground">{r.dept}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="text-xs text-muted-foreground">{r.type}</span></td>
                  <td><span className="text-xs">{r.dates}</span></td>
                  <td className="text-center"><span className="text-xs font-bold text-foreground">{r.days}</span></td>
                  <td>
                    <Badge variant={r.st === 'pending' ? 'warning' : 'success'} dot>
                      {r.st === 'pending' ? 'Chờ duyệt' : 'Đã duyệt'}
                    </Badge>
                  </td>
                  <td>
                    {r.st === 'pending' && (
                      <div className="flex gap-1">
                        <Btn variant="ghost" size="sm" iconOnly icon="check" />
                        <Btn variant="ghost" size="sm" iconOnly icon="x" />
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* Pipeline */}
        <div className={CARD}>
          <div className={CARD_HEAD}>
            <div className={CARD_TITLE}>Pipeline tuyển dụng</div>
            <Badge variant="info">Tháng 5/2026</Badge>
          </div>
          <div className={CARD_BODY + " flex flex-col gap-3"}>
            {PIPELINE.map((p, i) => (
              <div key={i}>
                <div className="mb-[5px] flex items-center justify-between">
                  <span className="text-xs font-medium text-foreground">{p.stage}</span>
                  <span className="text-xs font-bold text-foreground">{p.count}</span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-muted"><div className="h-full rounded-full" style={{ width: `${p.pct}%`, background: p.color }} /></div>
              </div>
            ))}
            <div className="mt-1 flex justify-between border-t border-border pt-3">
              <span className="text-xs text-muted-foreground">Tỷ lệ chuyển đổi</span>
              <span className="text-xs font-bold text-success">2.6%</span>
            </div>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─────────────────────────────────────────────────────────────────
//  03  DEPT MANAGER
// ─────────────────────────────────────────────────────────────────
const DashboardDeptManager = () => {
  const TEAM = [
    { name: 'Nguyễn Anh Tuấn', role: 'Senior Frontend Dev',  checkin: '08:12', st: 'success', label: 'Đang làm' },
    { name: 'Trần Thị Thu',     role: 'Backend Developer',    checkin: '08:45', st: 'info',    label: 'Công tác' },
    { name: 'Lê Minh Đức',      role: 'DevOps Engineer',      checkin: '07:58', st: 'success', label: 'Đang làm' },
    { name: 'Phạm Thị Hoa',     role: 'QA Lead',              checkin: '—',     st: 'warning', label: 'Nghỉ phép' },
    { name: 'Hoàng Văn Đức',    role: 'Product Manager',      checkin: '—',     st: 'danger',  label: 'Vắng' },
    { name: 'Vũ Thị Linh',      role: 'UI/UX Designer',       checkin: '09:02', st: 'success', label: 'Đang làm' },
  ];
  const EVENTS = [
    { date: 'Hôm nay',   time: '14:00', title: 'Họp team sprint planning',      t: 'info' },
    { date: 'Ngày mai',  time: '10:00', title: '1-on-1 Nguyễn Anh Tuấn',         t: 'neutral' },
    { date: 'T5, 22/05', time: '09:00', title: 'Demo Q2 với stakeholders',       t: 'warning' },
    { date: 'T2, 25/05', time: '09:00', title: 'Đánh giá hiệu suất Q2',          t: 'success' },
  ];
  const EV_COLOR = { info: 'var(--color-info)', neutral: 'var(--color-border-strong)', warning: 'oklch(0.55 0.158 65)', success: 'var(--color-success)' };
  const ST_VAR   = { success: 'success', info: 'info', warning: 'warning', danger: 'danger' };
  return (
    <HRMShell active="dashboard" title="Dashboard" user={{ name: 'Nguyễn Văn Phú', role: 'Dept Manager' }}
      crumbs={['Dashboard']}
      actions={<>
        <Btn variant="outline" size="sm" icon="calendar">Xem lịch nhóm</Btn>
        <Btn variant="primary" size="sm" icon="plus">Giao việc</Btn>
      </>}>

      <DashGreeting name="Nguyễn Văn Phú" roleLabel="Dept Manager" dept="Phòng Kỹ thuật" pending={3} />

      <div className="mb-4 grid grid-cols-4 gap-3.5">
        <EStat label="Nhân sự phòng"       value="24"    delta="+1 tháng này"  deltaDir="up"   icon="users"    iconBg="var(--color-primary-soft)"  iconColor="var(--color-primary)" />
        <EStat label="Chấm công hôm nay"   value="22/24" delta="2 vắng mặt"   deltaDir="down" icon="clock"    iconBg="var(--color-warning-soft)"  iconColor="oklch(0.55 0.158 65)"  spark={SK_TEAM} />
        <EStat label="Đơn nghỉ chờ duyệt" value="3"                                            icon="umbrella" iconBg="var(--color-info-soft)"     iconColor="var(--color-info)" />
        <EStat label="Đánh giá sắp tới"   value="2"     delta="25/05/2026"    deltaDir="up"   icon="star"     iconBg="var(--color-success-soft)"  iconColor="var(--color-success)" />
      </div>

      <div className="mb-4 grid grid-cols-2 gap-3.5">
        <SparkCard
          title="Chấm công nhóm" subtitle="12 tuần gần nhất (người)"
          data={SK_TEAM} color="var(--color-chart-3)" bigValue="22" bigSub={null}
          labels={['T3/25','T4','T5','T6','T7','T8','T9','T10','T11','T12','T1/26','T2']} />
        <DonutCard title="Trạng thái nhóm" center={24} segments={[
          { label: 'Đang làm việc', value: 20, color: 'var(--color-chart-3)' },
          { label: 'Nghỉ phép',     value: 2,  color: 'var(--color-chart-4)' },
          { label: 'Công tác',      value: 1,  color: 'var(--color-chart-2)' },
          { label: 'Vắng mặt',     value: 1,  color: 'var(--color-chart-6)' },
        ]} />
      </div>

      <div className="grid grid-cols-2 gap-3.5">
        {/* Team list */}
        <div className={CARD + " overflow-hidden"}>
          <div className={CARD_HEAD}>
            <div className={CARD_TITLE}>Danh sách nhóm hôm nay</div>
            <Btn variant="ghost" size="sm">Xem tất cả</Btn>
          </div>
          <table className={TABLE_CLS}>
            <thead><tr>
              <th>Thành viên</th>
              <th style={{ width: 90 }}>Check-in</th>
              <th style={{ width: 110 }}>Trạng thái</th>
              <th style={{ width: 48 }}></th>
            </tr></thead>
            <tbody>
              {TEAM.map((r, i) => (
                <tr key={i}>
                  <td>
                    <div className="flex items-center gap-2">
                      <Avatar name={r.name} size="sm" />
                      <div>
                        <div className="text-xs font-medium">{r.name}</div>
                        <div className="text-xs text-muted-foreground">{r.role}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="text-xs tabular-nums text-muted-foreground">{r.checkin}</span></td>
                  <td><Badge variant={ST_VAR[r.st]} dot>{r.label}</Badge></td>
                  <td><Btn variant="ghost" size="sm" iconOnly icon="more-horizontal" /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* Upcoming events */}
        <div className={CARD}>
          <div className={CARD_HEAD}>
            <div className={CARD_TITLE}>Sự kiện sắp tới</div>
            <Btn variant="ghost" size="sm" icon="calendar">Lịch</Btn>
          </div>
          <div className={CARD_BODY + " flex flex-col gap-0"}>
            {EVENTS.map((ev, i) => (
              <div key={i} className={"flex gap-2.5 py-2.5 " + (i < EVENTS.length - 1 ? "border-b border-border" : "")}>
                <div className="min-h-[32px] w-[3px] shrink-0 self-stretch rounded" style={{ background: EV_COLOR[ev.t] }} />
                <div className="flex-1">
                  <div className="mb-[3px] text-xs font-semibold text-foreground">{ev.title}</div>
                  <div className="text-xs text-muted-foreground">{ev.date} · {ev.time}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="flex items-center justify-between gap-3 border-t border-border px-5 py-3">
            <span className="text-xs text-muted-foreground">3 đơn nghỉ phép cần xử lý</span>
            <Btn variant="soft" size="sm">Duyệt ngay</Btn>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─────────────────────────────────────────────────────────────────
//  04  EMPLOYEE
// ─────────────────────────────────────────────────────────────────
const DashboardEmployee = () => {
  const SCHEDULE = [
    { date: 'Hôm nay',   time: '09:00', title: 'Họp team sprint planning',    t: 'info' },
    { date: 'Ngày mai',  time: '14:00', title: 'Review code với tech lead',    t: 'neutral' },
    { date: 'T5, 22/05', time: '10:30', title: 'Demo Q2 với stakeholders',     t: 'warning' },
    { date: 'T2, 25/05', time: '09:00', title: 'Đánh giá hiệu suất Q2',        t: 'success' },
  ];
  const QUICK = [
    { icon: 'umbrella', label: 'Đăng ký nghỉ phép', color: 'var(--color-primary)',           bg: 'var(--color-primary-soft)' },
    { icon: 'dollar',   label: 'Xem bảng lương',    color: 'var(--color-success)',            bg: 'var(--color-success-soft)' },
    { icon: 'clock',    label: 'Bảng công tháng',   color: 'var(--color-info)',               bg: 'var(--color-info-soft)' },
    { icon: 'user',     label: 'Hồ sơ cá nhân',     color: 'oklch(0.55 0.158 65)',      bg: 'var(--color-warning-soft)' },
  ];
  const NOTIFS = [
    { icon: 'check-circle', color: 'var(--color-success)', text: 'Đơn nghỉ phép ngày 15/05 đã được duyệt', time: '2 giờ trước' },
    { icon: 'dollar',       color: 'var(--color-info)',     text: 'Phiếu lương tháng 5/2026 đã sẵn sàng',  time: '1 ngày trước' },
    { icon: 'alert-circle', color: 'oklch(0.55 0.158 65)', text: 'Nhớ hoàn thành bảng tự đánh giá Q2', time: '2 ngày trước' },
  ];
  const EV_COLOR = { info: 'var(--color-info)', neutral: 'var(--color-border-strong)', warning: 'oklch(0.55 0.158 65)', success: 'var(--color-success)' };
  return (
    <HRMShell active="dashboard" title="Dashboard" user={{ name: 'Phạm Anh Tuấn', role: 'Nhân viên' }}
      crumbs={['Dashboard']}
      actions={<>
        <Btn variant="outline" size="sm" icon="umbrella">Đăng ký nghỉ phép</Btn>
      </>}>

      <DashGreeting name="Phạm Anh Tuấn" roleLabel="Nhân viên" dept="Phòng Kỹ thuật" pending={3} />

      <div className="mb-4 grid grid-cols-4 gap-3.5">
        <EStat label="Ngày phép còn lại"  value="12"    delta="trong 15 ngày/năm"   deltaDir="up"   icon="umbrella"  iconBg="var(--color-primary-soft)"  iconColor="var(--color-primary)" />
        <EStat label="Chấm công tháng 5"  value="22/23" delta="1 ngày chưa vào"     deltaDir="down" icon="clock"     iconBg="var(--color-warning-soft)"  iconColor="oklch(0.55 0.158 65)"  spark={SK_PERS} />
        <EStat label="Lương tháng 5"      value="18.5M" delta="Đã thanh toán"        deltaDir="up"   icon="dollar"    iconBg="var(--color-success-soft)"  iconColor="var(--color-success)" />
        <EStat label="Thông báo mới"      value="3"     delta="1 cần xử lý"          deltaDir="down" icon="bell"      iconBg="var(--color-info-soft)"     iconColor="var(--color-info)" />
      </div>

      <div className="mb-4 grid grid-cols-2 gap-3.5">
        <div className={CARD + " flex-1"}>
          <div className={CARD_HEAD}>
            <div>
              <div className={CARD_TITLE}>Chấm công tháng 5/2026</div>
              <div className="mt-0.5 text-xs text-muted-foreground">Ngày công thực tế: 22 / 23 ngày</div>
            </div>
            <Badge variant="success" dot>Đang làm việc</Badge>
          </div>
          <div className={CARD_BODY + " pt-2"}>
            <MiniChart data={SK_PERS} height={80} color="var(--color-chart-3)" />
            <div className="mt-1.5 flex justify-between">
              {['1','3','5','7','9','11','13','15','17','19','21','23'].map((l, i) => (
                <span key={i} className="text-2xs text-muted-foreground">{l}</span>
              ))}
            </div>
          </div>
        </div>
        <DonutCard title="Ngày phép năm 2026" center={15} segments={[
          { label: 'Đã sử dụng', value: 3,  color: 'var(--color-chart-1)' },
          { label: 'Còn lại',   value: 12, color: 'var(--color-chart-3)' },
        ]} />
      </div>

      <div className="grid grid-cols-2 gap-3.5">
        {/* Schedule + Notifications */}
        <div className="flex flex-col gap-3.5">
          <div className={CARD}>
            <div className={CARD_HEAD}>
              <div className={CARD_TITLE}>Lịch sắp tới</div>
              <Btn variant="ghost" size="sm" icon="calendar">Xem lịch</Btn>
            </div>
            <div className={CARD_BODY + " flex flex-col gap-0"}>
              {SCHEDULE.map((ev, i) => (
                <div key={i} className={"flex gap-2.5 py-[9px] " + (i < SCHEDULE.length - 1 ? "border-b border-border" : "")}>
                  <div className="min-h-[28px] w-[3px] shrink-0 self-stretch rounded" style={{ background: EV_COLOR[ev.t] }} />
                  <div className="flex-1">
                    <div className="mb-0.5 text-xs font-semibold text-foreground">{ev.title}</div>
                    <div className="text-xs text-muted-foreground">{ev.date} · {ev.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* Notifications */}
          <div className={CARD}>
            <div className={CARD_HEAD}>
              <div className={CARD_TITLE}>Thông báo gần đây</div>
              <Badge variant="info">3 mới</Badge>
            </div>
            <div className={CARD_BODY + " flex flex-col gap-2.5"}>
              {NOTIFS.map((n, i) => (
                <div key={i} className="flex items-start gap-2.5">
                  <Icon name={n.icon} size={14} className="mt-px shrink-0" style={{ color: n.color }} />
                  <div className="flex-1">
                    <div className="text-xs leading-[1.4] text-foreground">{n.text}</div>
                    <div className="mt-0.5 text-xs text-muted-foreground">{n.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        {/* Quick actions */}
        <div className={CARD}>
          <div className={CARD_HEAD}><div className={CARD_TITLE}>Tác vụ nhanh</div></div>
          <div className={CARD_BODY}>
            <div className="grid grid-cols-2 gap-3">
              {QUICK.map((q, i) => (
                <div key={i} className="flex cursor-pointer flex-col items-center justify-center gap-2.5 rounded-lg border border-transparent px-3 py-5" style={{ background: q.bg }}>
                  <div className="grid size-10 place-items-center rounded-lg bg-white shadow-xs" style={{ color: q.color }}>
                    <Icon name={q.icon} size={18} />
                  </div>
                  <span className="text-center text-xs font-semibold leading-[1.3]" style={{ color: q.color }}>{q.label}</span>
                </div>
              ))}
            </div>
            <div className="mt-3.5 flex items-center gap-2.5 rounded-lg bg-muted px-3.5 py-3">
              <Icon name="gift" size={14} className="shrink-0 text-primary" />
              <div className="flex-1">
                <div className="text-xs font-semibold text-foreground">Sinh nhật sắp tới trong nhóm</div>
                <div className="mt-px text-xs text-muted-foreground">Trần Thị Thu — T5, 22/05</div>
              </div>
              <Badge variant="primary">3 ngày nữa</Badge>
            </div>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

Object.assign(window, {
  DashboardSystemAdmin,
  DashboardHRManager,
  DashboardDeptManager,
  DashboardEmployee,
});