From ec517f7174cc7c14068d7f55922d7fc1a3f67bca Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Tue, 16 Jun 2026 11:23:58 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-User:=20c=C3=A2y=20t=E1=BB=95=20c?=
 =?UTF-8?q?h=E1=BB=A9c=20g=E1=BB=91c=20"SOLUTION=20COMPANY"=20->=20to?=
 =?UTF-8?q?=E1=BA=A3=20xu=E1=BB=91ng=20ph=C3=B2ng=20ban?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Anh: hiển thị cha-con với gốc SOLUTION COMPANY trên cùng, phòng ban fan-out xuống
(giống NamGroup "Nam Group" là gốc). Gộp nút "Tất cả phòng ban" + list phẳng thành
1 node gốc công ty trong EmployeesListPage org-tree panel: chevron mở/gập
(companyOpen, mở mặc định) + bấm tên = pickDept(null) tất cả NV + CountBadge tổng;
các phòng ban render TreeNode depth=1 toả xuống dưới. Build PASS fe-user (tsc -b).
fe-user only (mirror fe-admin defer cùng Phase B).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 fe-user/src/pages/hrm/EmployeesListPage.tsx | 65 ++++++++++++++-------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/fe-user/src/pages/hrm/EmployeesListPage.tsx b/fe-user/src/pages/hrm/EmployeesListPage.tsx
index 3138aef..a821a7f 100644
--- a/fe-user/src/pages/hrm/EmployeesListPage.tsx
+++ b/fe-user/src/pages/hrm/EmployeesListPage.tsx
@@ -78,6 +78,7 @@ export function EmployeesListPage() {
 
   const [localSearch, setLocalSearch] = useState(search)
   const [treeOpenMobile, setTreeOpenMobile] = useState(false)
+  const [companyOpen, setCompanyOpen] = useState(true) // gốc công ty mở mặc định
 
   // Org tree (consume /departments/tree). Class-level [Authorize] only → any
   // authenticated user. Counts come pre-rolled-up from BE (TotalEmployeeCount).
@@ -175,30 +176,54 @@ export function EmployeesListPage() {
           </div>
         </header>
         <div className="min-h-0 flex-1 overflow-auto p-2">
-          <button
-            type="button"
-            onClick={() => pickDept(null)}
-            className={cn(
-              'mb-1 flex w-full items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm transition',
-              !deptFilter ? 'bg-brand-50 font-semibold text-brand-700' : 'text-slate-700 hover:bg-slate-50',
-            )}
-          >
-            <span className="flex items-center gap-2">
-              <Users className="h-4 w-4 shrink-0 text-slate-400" />
-              Tất cả phòng ban
-            </span>
-            <CountBadge value={list.data?.total ?? 0} active={!deptFilter} />
-          </button>
-
           {tree.isLoading ? (
             <div className="px-2 py-6 text-center text-xs text-slate-400">Đang tải cây tổ chức…</div>
-          ) : !tree.data || tree.data.length === 0 ? (
-            <div className="px-2 py-6 text-center text-xs text-slate-400">Chưa có phòng ban.</div>
           ) : (
             <ul className="space-y-0.5">
-              {tree.data.map(n => (
-                <TreeNode key={n.id} node={n} depth={0} selectedId={deptFilter} onPick={pickDept} />
-              ))}
+              {/* Gốc công ty — bấm = tất cả NV; các phòng ban toả xuống dưới (cha→con) */}
+              <li>
+                <div
+                  className={cn(
+                    'group flex items-center gap-1 rounded-lg pr-1.5 transition',
+                    !deptFilter ? 'bg-brand-50' : 'hover:bg-slate-50',
+                  )}
+                >
+                  <button
+                    type="button"
+                    onClick={() => setCompanyOpen(v => !v)}
+                    className="grid h-5 w-5 shrink-0 place-items-center rounded text-slate-400 hover:text-slate-700"
+                    aria-label={companyOpen ? 'Thu gọn' : 'Mở rộng'}
+                    aria-expanded={companyOpen}
+                  >
+                    <ChevronRight className={cn('h-3.5 w-3.5 transition-transform', companyOpen && 'rotate-90')} />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => pickDept(null)}
+                    className={cn(
+                      'flex min-w-0 flex-1 items-center justify-between gap-2 py-1.5 text-left text-sm transition',
+                      !deptFilter ? 'font-semibold text-brand-700' : 'text-slate-700',
+                    )}
+                    title="SOLUTION COMPANY"
+                  >
+                    <span className="flex min-w-0 items-center gap-2">
+                      <Building2 className="h-4 w-4 shrink-0 text-brand-500" />
+                      <span className="truncate font-semibold tracking-tight">SOLUTION COMPANY</span>
+                    </span>
+                    <CountBadge value={list.data?.total ?? 0} active={!deptFilter} />
+                  </button>
+                </div>
+                {companyOpen &&
+                  (!tree.data || tree.data.length === 0 ? (
+                    <div className="py-3 pl-9 text-xs text-slate-400">Chưa có phòng ban.</div>
+                  ) : (
+                    <ul className="space-y-0.5">
+                      {tree.data.map(n => (
+                        <TreeNode key={n.id} node={n} depth={1} selectedId={deptFilter} onPick={pickDept} />
+                      ))}
+                    </ul>
+                  ))}
+              </li>
             </ul>
           )}
         </div>