solution-erp/fe-user/src/pages/hrm/HrmDashboardPage.tsx

// HR Dashboard — Phase 10.4 G-H3 (S38 2026-05-28).
// 4 KPI card aggregate + gender ratio + birthdays + new hires.
// File MIRROR SHA256 identical fe-user counterpart.
import { useQuery } from '@tanstack/react-query'
import { Cake, TrendingUp, UserCheck, Users } from 'lucide-react'
import { PageHeader } from '@/components/PageHeader'
import { api } from '@/lib/api'
import { cn } from '@/lib/cn'
import type { HrDashboardDto } from '@/types/workflowApps'

const CARDS = [
  { key: 'totalEmployees', label: 'Tổng nhân viên', icon: Users, color: 'bg-blue-50 text-blue-700 border-blue-200' },
  { key: 'activeEmployees', label: 'Đang làm việc', icon: UserCheck, color: 'bg-emerald-50 text-emerald-700 border-emerald-200' },
  { key: 'birthdaysThisWeek', label: 'Sinh nhật 7 ngày tới', icon: Cake, color: 'bg-amber-50 text-amber-700 border-amber-200' },
  { key: 'newHiresThisMonth', label: 'Mới vào tháng này', icon: TrendingUp, color: 'bg-violet-50 text-violet-700 border-violet-200' },
] as const

export function HrmDashboardPage() {
  const data = useQuery({
    queryKey: ['hr-dashboard'],
    queryFn: async () => (await api.get<HrDashboardDto>('/hr/dashboard')).data,
  })

  const d = data.data

  return (
    <div className="space-y-4">
      <PageHeader title="Dashboard Nhân sự" description="KPI tổng quan + sinh nhật + tuyển dụng" />

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        {CARDS.map((card) => {
          const Icon = card.icon
          const value = d ? (d as any)[card.key] : '—'
          return (
            <div key={card.key} className={cn('rounded-lg border p-4', card.color)}>
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-xs font-medium opacity-80">{card.label}</div>
                  <div className="text-3xl font-bold mt-1 tabular-nums">{data.isLoading ? '—' : value}</div>
                </div>
                <Icon className="h-8 w-8 opacity-60" />
              </div>
            </div>
          )
        })}
      </div>

      {d && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <div className="rounded-lg border bg-card p-4">
            <h3 className="font-medium text-sm mb-3">Phân bố giới tính</h3>
            <div className="flex items-center gap-4">
              <div className="flex-1">
                <div className="text-xs text-muted-foreground">Nam</div>
                <div className="text-2xl font-bold text-blue-700 tabular-nums">{d.maleCount}</div>
              </div>
              <div className="flex-1">
                <div className="text-xs text-muted-foreground">Nữ</div>
                <div className="text-2xl font-bold text-pink-700 tabular-nums">{d.femaleCount}</div>
              </div>
            </div>
          </div>

          <div className="rounded-lg border bg-card p-4">
            <h3 className="font-medium text-sm mb-3">Trạng thái nhân sự</h3>
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>Đang làm việc</span>
                <span className="font-semibold text-emerald-700 tabular-nums">{d.activeEmployees}</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>Nghỉ phép</span>
                <span className="font-semibold text-amber-700 tabular-nums">{d.onLeaveEmployees}</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>Đã nghỉ việc</span>
                <span className="font-semibold text-slate-500 tabular-nums">{d.resignedEmployees}</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}