From 2e437990469107bd580944406dc7c456dcad78d3 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Tue, 21 Apr 2026 15:13:43 +0700
Subject: [PATCH] [CLAUDE] FE: EmptyState component + MyContracts CTA empty
 state

---
 fe-admin/src/components/EmptyState.tsx        | 29 +++++++++++++++++++
 fe-user/src/components/EmptyState.tsx         | 29 +++++++++++++++++++
 .../src/pages/contracts/MyContractsPage.tsx   | 18 ++++++++++--
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 fe-admin/src/components/EmptyState.tsx
 create mode 100644 fe-user/src/components/EmptyState.tsx

diff --git a/fe-admin/src/components/EmptyState.tsx b/fe-admin/src/components/EmptyState.tsx
new file mode 100644
index 0000000..d80287e
--- /dev/null
+++ b/fe-admin/src/components/EmptyState.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: React.ComponentType<{ className?: string }>
+  title: ReactNode
+  description?: ReactNode
+  action?: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center gap-2 py-10 text-center', className)}>
+      {Icon && (
+        <div className="rounded-full bg-slate-100 p-3 text-slate-400">
+          <Icon className="h-6 w-6" />
+        </div>
+      )}
+      <div className="text-sm font-medium text-slate-700">{title}</div>
+      {description && <div className="max-w-sm text-xs text-slate-400">{description}</div>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  )
+}
diff --git a/fe-user/src/components/EmptyState.tsx b/fe-user/src/components/EmptyState.tsx
new file mode 100644
index 0000000..d80287e
--- /dev/null
+++ b/fe-user/src/components/EmptyState.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: React.ComponentType<{ className?: string }>
+  title: ReactNode
+  description?: ReactNode
+  action?: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center gap-2 py-10 text-center', className)}>
+      {Icon && (
+        <div className="rounded-full bg-slate-100 p-3 text-slate-400">
+          <Icon className="h-6 w-6" />
+        </div>
+      )}
+      <div className="text-sm font-medium text-slate-700">{title}</div>
+      {description && <div className="max-w-sm text-xs text-slate-400">{description}</div>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  )
+}
diff --git a/fe-user/src/pages/contracts/MyContractsPage.tsx b/fe-user/src/pages/contracts/MyContractsPage.tsx
index 8e5f8f0..f33478d 100644
--- a/fe-user/src/pages/contracts/MyContractsPage.tsx
+++ b/fe-user/src/pages/contracts/MyContractsPage.tsx
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
-import { FileText } from 'lucide-react'
+import { FileText, Plus } from 'lucide-react'
 import { PageHeader } from '@/components/PageHeader'
 import { DataTable, type Column } from '@/components/DataTable'
 import { PhaseBadge } from '@/components/PhaseBadge'
 import { SlaTimer } from '@/components/SlaTimer'
+import { EmptyState } from '@/components/EmptyState'
+import { Button } from '@/components/ui/Button'
 import { api } from '@/lib/api'
 import type { Paged } from '@/types/master'
 import type { ContractListItem } from '@/types/contracts'
@@ -47,7 +49,19 @@ export function MyContractsPage() {
         rows={list.data?.items ?? []}
         getRowKey={c => c.id}
         isLoading={list.isLoading}
-        empty="Bạn chưa tạo HĐ nào."
+        empty={
+          <EmptyState
+            icon={FileText}
+            title="Bạn chưa có HĐ nào"
+            description="Tạo HĐ mới để bắt đầu quy trình soạn thảo và trình ký."
+            action={
+              <Button onClick={() => navigate('/contracts/new')}>
+                <Plus className="mr-1 h-4 w-4" />
+                Tạo HĐ mới
+              </Button>
+            }
+          />
+        }
         onRowClick={c => navigate(`/contracts/${c.id}`)}
       />
     </div>