From 0e5b5cd670505e98c7772f28294ae613e55bec3f Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Tue, 21 Apr 2026 15:05:42 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-User:=20stat=20cards=20tr=C3=AAn?=
 =?UTF-8?q?=20Inbox=20(total,=20s=E1=BA=AFp=20h=E1=BA=A1n,=20qu=C3=A1=20h?=
 =?UTF-8?q?=E1=BA=A1n,=20t=E1=BB=95ng=20gi=C3=A1=20tr=E1=BB=8B)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe-user/src/pages/InboxPage.tsx | 90 ++++++++++++++++++++++++++++++---
 1 file changed, 83 insertions(+), 7 deletions(-)

diff --git a/fe-user/src/pages/InboxPage.tsx b/fe-user/src/pages/InboxPage.tsx
index d70e779..ed491b8 100644
--- a/fe-user/src/pages/InboxPage.tsx
+++ b/fe-user/src/pages/InboxPage.tsx
@@ -1,6 +1,7 @@
+import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
-import { Inbox } from 'lucide-react'
+import { Inbox, AlertTriangle, Clock, FileText } from 'lucide-react'
 import { PageHeader } from '@/components/PageHeader'
 import { DataTable, type Column } from '@/components/DataTable'
 import { PhaseBadge } from '@/components/PhaseBadge'
@@ -12,6 +13,30 @@ import { ContractTypeLabel } from '@/types/forms'
 
 const fmtMoney = (v: number) => v.toLocaleString('vi-VN')
 
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  tone = 'default',
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  value: React.ReactNode
+  tone?: 'default' | 'warn' | 'danger'
+}) {
+  const toneClass =
+    tone === 'danger' ? 'text-red-600' : tone === 'warn' ? 'text-amber-600' : 'text-brand-600'
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div className="text-xs font-medium text-slate-500">{label}</div>
+        <Icon className={`h-4 w-4 ${toneClass}`} />
+      </div>
+      <div className="mt-2 text-2xl font-bold text-slate-900">{value}</div>
+    </div>
+  )
+}
+
 export function InboxPage() {
   const navigate = useNavigate()
   const { user } = useAuth()
@@ -21,14 +46,58 @@ export function InboxPage() {
     queryFn: async () => (await api.get<ContractListItem[]>('/contracts/inbox')).data,
   })
 
+  const rows = list.data ?? []
+
+  const stats = useMemo(() => {
+    const now = Date.now()
+    const dayMs = 24 * 60 * 60 * 1000
+    let overdue = 0
+    let dueSoon = 0
+    let totalValue = 0
+    for (const c of rows) {
+      totalValue += c.giaTri ?? 0
+      if (!c.slaDeadline) continue
+      const diff = new Date(c.slaDeadline).getTime() - now
+      if (diff < 0) overdue++
+      else if (diff < dayMs) dueSoon++
+    }
+    return { total: rows.length, overdue, dueSoon, totalValue }
+  }, [rows])
+
   const columns: Column<ContractListItem>[] = [
-    { key: 'maHopDong', header: 'Mã HĐ', width: 'w-48', render: c => <span className="font-mono text-xs">{c.maHopDong ?? '—'}</span> },
+    {
+      key: 'maHopDong',
+      header: 'Mã HĐ',
+      width: 'w-48',
+      render: c => <span className="font-mono text-xs">{c.maHopDong ?? '—'}</span>,
+    },
     { key: 'tenHopDong', header: 'Tên HĐ', render: c => c.tenHopDong ?? '—' },
-    { key: 'type', header: 'Loại', width: 'w-32', render: c => ContractTypeLabel[c.type] ?? '—' },
-    { key: 'phase', header: 'Phase hiện tại', width: 'w-36', render: c => <PhaseBadge phase={c.phase} /> },
+    {
+      key: 'type',
+      header: 'Loại',
+      width: 'w-32',
+      render: c => ContractTypeLabel[c.type] ?? '—',
+    },
+    {
+      key: 'phase',
+      header: 'Phase hiện tại',
+      width: 'w-36',
+      render: c => <PhaseBadge phase={c.phase} />,
+    },
     { key: 'supplierName', header: 'NCC', render: c => c.supplierName },
-    { key: 'giaTri', header: 'Giá trị', align: 'right', width: 'w-32', render: c => fmtMoney(c.giaTri) },
-    { key: 'slaDeadline', header: 'SLA', width: 'w-40', render: c => <SlaTimer deadline={c.slaDeadline} createdAt={c.createdAt} /> },
+    {
+      key: 'giaTri',
+      header: 'Giá trị',
+      align: 'right',
+      width: 'w-32',
+      render: c => fmtMoney(c.giaTri),
+    },
+    {
+      key: 'slaDeadline',
+      header: 'SLA',
+      width: 'w-40',
+      render: c => <SlaTimer deadline={c.slaDeadline} createdAt={c.createdAt} />,
+    },
   ]
 
   return (
@@ -43,9 +112,16 @@ export function InboxPage() {
         description={`HĐ chờ vai trò ${user?.roles.join(', ') ?? ''} xử lý. Click row để xem chi tiết.`}
       />
 
+      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
+        <StatCard icon={Inbox} label="Cần xử lý" value={stats.total} />
+        <StatCard icon={Clock} label="Sắp quá hạn (24h)" value={stats.dueSoon} tone="warn" />
+        <StatCard icon={AlertTriangle} label="Đã quá hạn" value={stats.overdue} tone="danger" />
+        <StatCard icon={FileText} label="Tổng giá trị" value={fmtMoney(stats.totalValue)} />
+      </div>
+
       <DataTable
         columns={columns}
-        rows={list.data ?? []}
+        rows={rows}
         getRowKey={c => c.id}
         isLoading={list.isLoading}
         empty="Không có HĐ nào chờ bạn xử lý."