[CLAUDE] PurchaseEvaluation: tree Panel 1 doi nhom theo anh Kiet FDC "Du an (Nam) > Hang muc cong viec > Phieu" (bo tang NCC, SHA256 mirror x2 app) + wipe testing data prod S59

- Tree Panel 1: moi cap (Du an, Nam-tao-phieu) = 1 folder label "Ten du an (Nam)",
  level 2 = Hang muc cong viec (WorkItemId Mig 49, phieu cu null -> "(Chua gan hang muc)"),
  bo tang NCC khoi tree (van hien o card/detail). Expand-state localStorage key v2.
- scripts/s59-wipe-testing-data.sql DA CHAY prod (anh chot AskUserQuestion): xoa 10 PE
  + 7 HD [DEMO] + 64 notif + 1 workflow V2 cu inactive; reset PeSeq/CtSeq -> ma moi tu 001;
  GIU master 70/86/22 + users 55 + templates 9 + 7 workflow ghim. Uploads orphan da don.

fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx

@@ -115,64 +115,60 @@ export function PurchaseEvaluationsListPage() {
   // Đã duyệt/Từ chối loại bỏ). BE /inbox hiện loose UAT có thể trả phiếu Nháp →
   // FE filter để UX đúng kỳ vọng. Phân quyền strict V2 BE pending Session 18+.
 
-  // Plan AG5 — Group 3-level Project > Năm > NCC > PE (anh feedback 2026-05-21:
-  // "Folder cấp dưới dự án là theo năm và dưới năm là theo NCC"). Filter pendingMe TRƯỚC group.
-  // Year extract từ createdAt.getFullYear(). NCC = selectedSupplierName fallback "(Chưa chọn NCC)"
-  // khi PE chưa DaDuyet. Sort: Project A-Z (vi) + Year DESC + NCC A-Z (vi) + PE createdAt DESC.
-  type SupplierGroup = {
-    supplierId: string | null
-    supplierName: string
+  // S59 — anh Kiệt FDC (Zalo 2026-06-11): "Tên dự án ( 2026 ) -> Hạng mục công việc -> Phiếu cần duyệt"
+  // (mirror cấu trúc folder Outlook FDC, thứ tự label "Dự án - Năm"). Thay tree AG5 cũ (Project > Năm > NCC):
+  // mỗi cặp (Dự án, Năm-tạo-phiếu) = 1 folder label "Tên dự án (Năm)", level 2 = Hạng mục công việc
+  // (WorkItemId Mig 49, phiếu cũ chưa gắn → "(Chưa gắn hạng mục)"). NCC bỏ khỏi tree — vẫn hiện ở card/detail.
+  // Filter pendingMe TRƯỚC group. Sort: Project A-Z (vi) + Năm DESC + Hạng mục A-Z (vi) + PE createdAt DESC.
+  type WorkItemGroup = {
+    workItemId: string | null
+    workItemName: string
     items: PeListItem[]
   }
-  type YearGroup = {
-    year: number
-    suppliers: SupplierGroup[]
-    totalCount: number
-  }
-  type ProjectGroup = {
+  type ProjectYearGroup = {
     projectId: string | null
     projectName: string
-    years: YearGroup[]
+    year: number
+    label: string
+    workItems: WorkItemGroup[]
     totalCount: number
   }
-  const projectGroups = useMemo<ProjectGroup[]>(() => {
+  const projectGroups = useMemo<ProjectYearGroup[]>(() => {
     const filtered = pendingMe
       ? allRows.filter(p => getPeDisplayStatus(p.phase) === PeDisplayStatus.DaGuiDuyet)
       : allRows
-    const projectMap = new Map<string, ProjectGroup>()
+    const groupMap = new Map<string, ProjectYearGroup>()
     for (const p of filtered) {
-      const projKey = p.projectId ?? '__no_project__'
-      const projName = p.projectName?.trim() || '(Dự án đã xoá)'
-      if (!projectMap.has(projKey)) {
-        projectMap.set(projKey, { projectId: p.projectId ?? null, projectName: projName, years: [], totalCount: 0 })
-      }
-      const pg = projectMap.get(projKey)!
       const year = new Date(p.createdAt).getFullYear()
-      let yg = pg.years.find(y => y.year === year)
-      if (!yg) {
-        yg = { year, suppliers: [], totalCount: 0 }
-        pg.years.push(yg)
+      const projName = p.projectName?.trim() || '(Dự án đã xoá)'
+      const groupKey = `${p.projectId ?? '__no_project__'}::y${year}`
+      if (!groupMap.has(groupKey)) {
+        groupMap.set(groupKey, {
+          projectId: p.projectId ?? null,
+          projectName: projName,
+          year,
+          label: `${projName} (${year})`,
+          workItems: [],
+          totalCount: 0,
+        })
       }
-      const supKey = p.selectedSupplierId ?? '__no_supplier__'
-      const supName = p.selectedSupplierName?.trim() || '(Chưa chọn NCC)'
-      let sg = yg.suppliers.find(s => (s.supplierId ?? '__no_supplier__') === supKey)
-      if (!sg) {
-        sg = { supplierId: p.selectedSupplierId ?? null, supplierName: supName, items: [] }
-        yg.suppliers.push(sg)
+      const pg = groupMap.get(groupKey)!
+      const wiKey = p.workItemId ?? '__no_workitem__'
+      const wiName = p.workItemName?.trim() || '(Chưa gắn hạng mục)'
+      let wg = pg.workItems.find(w => (w.workItemId ?? '__no_workitem__') === wiKey)
+      if (!wg) {
+        wg = { workItemId: p.workItemId ?? null, workItemName: wiName, items: [] }
+        pg.workItems.push(wg)
       }
-      sg.items.push(p)
-      yg.totalCount++
+      wg.items.push(p)
       pg.totalCount++
     }
-    const arr = Array.from(projectMap.values())
-    arr.sort((a, b) => a.projectName.localeCompare(b.projectName, 'vi'))
+    const arr = Array.from(groupMap.values())
+    arr.sort((a, b) => a.projectName.localeCompare(b.projectName, 'vi') || b.year - a.year)
     for (const pg of arr) {
-      pg.years.sort((a, b) => b.year - a.year)
-      for (const yg of pg.years) {
-        yg.suppliers.sort((a, b) => a.supplierName.localeCompare(b.supplierName, 'vi'))
-        for (const sg of yg.suppliers) {
-          sg.items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-        }
+      pg.workItems.sort((a, b) => a.workItemName.localeCompare(b.workItemName, 'vi'))
+      for (const wg of pg.workItems) {
+        wg.items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
       }
     }
     return arr
@@ -181,9 +177,9 @@ export function PurchaseEvaluationsListPage() {
   // Total row count cho header badge (pendingMe đếm filtered, Danh sách đếm BE total).
   const totalRowCount = projectGroups.reduce((sum, pg) => sum + pg.totalCount, 0)
 
-  // Plan AG2 — Expand state localStorage Set<string> (projectId only, drop ::gtKey suffix).
-  // Default empty Set (all collapse). Single-PE project skip <details> wrapper (render flat).
-  const STORAGE_KEY = 'pe_list_expanded_projects'
+  // Plan AG2 — Expand state localStorage Set<string>. Default empty Set (all collapse).
+  // S59 key v2: node scheme đổi (Dự án+Năm gộp 1 node + Hạng mục thay NCC) → key cũ vô nghĩa.
+  const STORAGE_KEY = 'pe_list_expanded_projects_v2'
   const [expandedSet, setExpandedSet] = useState<Set<string>>(() => {
     try {
       const raw = localStorage.getItem(STORAGE_KEY)
@@ -285,13 +281,11 @@ export function PurchaseEvaluationsListPage() {
                 <EmptyState icon={ClipboardCheck} title="Chưa có phiếu" description="Tạo phiếu mới để bắt đầu quy trình." />
               </div>
             )}
-            {/* Plan AG5 — Tree view 3-level Project > Năm > NCC > PE (anh feedback 2026-05-21:
-                "Folder cấp dưới dự án là theo năm và dưới năm là theo NCC").
-                3 layer <details>: 📁 Project (bg-slate-50) > 📅 Năm > 🏢 NCC > PE card.
-                Tailwind v3 named groups group/proj + group/year + group/sup cho chevron rotation. */}
+            {/* S59 — Tree view theo anh Kiệt FDC: 📁 "Tên dự án (Năm)" (bg-slate-50) > 🧱 Hạng mục
+                công việc > PE card. 2 layer <details>, named groups group/proj + group/wi cho chevron. */}
             <div className="divide-y divide-slate-100">
               {projectGroups.map(pg => {
-                const projKey = pg.projectId ?? '__no_project__'
+                const projKey = `${pg.projectId ?? '__no_project__'}::y${pg.year}`
                 return (
                   <details
                     key={projKey}
@@ -302,92 +296,72 @@ export function PurchaseEvaluationsListPage() {
                     <summary className="flex cursor-pointer items-center gap-1.5 bg-slate-50 px-3 py-2 hover:bg-slate-100 [&::-webkit-details-marker]:hidden">
                       <svg className="h-3 w-3 shrink-0 text-slate-500 transition-transform group-open/proj:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
                       <span className="text-base">📁</span>
-                      <span className="flex-1 truncate text-[13px] font-medium text-slate-900">{pg.projectName}</span>
+                      <span className="flex-1 truncate text-[13px] font-medium text-slate-900">{pg.label}</span>
                       <span className="rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-medium text-slate-700">{pg.totalCount}</span>
                     </summary>
                     <div className="ml-3 border-l border-slate-200">
-                      {pg.years.map(yg => {
-                        const yearKey = `${projKey}::y${yg.year}`
+                      {pg.workItems.map(wg => {
+                        const wiKey = `${projKey}::w${wg.workItemId ?? '_none_'}`
                         return (
                           <details
-                            key={yearKey}
-                            open={isExpanded(yearKey)}
-                            onToggle={e => toggleExpand(yearKey, (e.currentTarget as HTMLDetailsElement).open)}
-                            className="group/year"
+                            key={wiKey}
+                            open={isExpanded(wiKey)}
+                            onToggle={e => toggleExpand(wiKey, (e.currentTarget as HTMLDetailsElement).open)}
+                            className="group/wi"
                           >
                             <summary className="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 hover:bg-slate-50 [&::-webkit-details-marker]:hidden">
-                              <svg className="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open/year:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
-                              <span className="text-sm">📅</span>
-                              <span className="flex-1 truncate text-[12px] font-medium text-slate-700">Năm {yg.year}</span>
-                              <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-600">{yg.totalCount}</span>
+                              <svg className="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open/wi:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+                              <span className="text-sm">🧱</span>
+                              <span className={cn('flex-1 truncate text-[12px]', wg.workItemId ? 'font-medium text-slate-700' : 'italic text-slate-400')}>{wg.workItemName}</span>
+                              <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-600">{wg.items.length}</span>
                             </summary>
-                            <div className="ml-3 border-l border-slate-200">
-                              {yg.suppliers.map(sg => {
-                                const supKey = `${yearKey}::s${sg.supplierId ?? '_none_'}`
-                                return (
-                                  <details
-                                    key={supKey}
-                                    open={isExpanded(supKey)}
-                                    onToggle={e => toggleExpand(supKey, (e.currentTarget as HTMLDetailsElement).open)}
-                                    className="group/sup"
+                            <ul className="ml-3 divide-y divide-slate-100 border-l border-slate-200">
+                              {wg.items.map(p => (
+                                <li key={p.id}>
+                                  <button
+                                    onClick={() => selectRow(p.id)}
+                                    className={cn(
+                                      'block w-full px-3 py-2 text-left transition hover:bg-slate-50',
+                                      selectedId === p.id && 'bg-brand-50 ring-1 ring-inset ring-brand-200',
+                                    )}
                                   >
-                                    <summary className="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 hover:bg-slate-50 [&::-webkit-details-marker]:hidden">
-                                      <svg className="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open/sup:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
-                                      <span className="text-sm">🏢</span>
-                                      <span className={cn('flex-1 truncate text-[12px]', sg.supplierId ? 'text-slate-700' : 'italic text-slate-400')}>{sg.supplierName}</span>
-                                      <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-600">{sg.items.length}</span>
-                                    </summary>
-                                    <ul className="ml-3 divide-y divide-slate-100 border-l border-slate-200">
-                                      {sg.items.map(p => (
-                                        <li key={p.id}>
-                                          <button
-                                            onClick={() => selectRow(p.id)}
-                                            className={cn(
-                                              'block w-full px-3 py-2 text-left transition hover:bg-slate-50',
-                                              selectedId === p.id && 'bg-brand-50 ring-1 ring-inset ring-brand-200',
-                                            )}
-                                          >
-                                            {/* Plan AG6 — compact card 3 row: title+badge / mã+time / drafter+dept+contract */}
-                                            <div className="flex items-start justify-between gap-2">
-                                              <div className="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-900">{p.tenGoiThau}</div>
-                                              <span
-                                                className={cn(
-                                                  'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium',
-                                                  PeDisplayStatusColor[getPeDisplayStatus(p.phase)],
-                                                )}
-                                              >
-                                                {PeDisplayStatusLabel[getPeDisplayStatus(p.phase)]}
-                                              </span>
-                                            </div>
-                                            <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
-                                              <span className="font-mono">{p.maPhieu ?? '—'}</span>
-                                              <span className="text-slate-300">·</span>
-                                              {/* S23 t2 UAT: BE list sort theo UpdatedAt DESC (fallback CreatedAt). */}
-                                              <span title={`Tạo lúc ${new Date(p.createdAt).toLocaleString('vi-VN')}`}>
-                                                {new Date(p.createdAt).toLocaleString('vi-VN', {
-                                                  day: '2-digit', month: '2-digit', year: 'numeric',
-                                                  hour: '2-digit', minute: '2-digit',
-                                                })}
-                                              </span>
-                                            </div>
-                                            {(p.drafterName || p.departmentName || p.contractId) && (
-                                              <div className="mt-0.5 flex items-center justify-between gap-2 text-[11px]">
-                                                <span className="min-w-0 flex-1 truncate text-slate-500">
-                                                  {p.drafterName && <>👤 {p.drafterName}</>}
-                                                  {p.drafterName && p.departmentName && <span className="text-slate-300"> · </span>}
-                                                  {p.departmentName && <span className="text-slate-400">{p.departmentName}</span>}
-                                                </span>
-                                                {p.contractId && <span className="shrink-0 text-[10px] font-medium text-brand-600">✓ HĐ</span>}
-                                              </div>
-                                            )}
-                                          </button>
-                                        </li>
-                                      ))}
-                                    </ul>
-                                  </details>
-                                )
-                              })}
-                            </div>
+                                    {/* Plan AG6 — compact card 3 row: title+badge / mã+time / drafter+dept+contract */}
+                                    <div className="flex items-start justify-between gap-2">
+                                      <div className="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-900">{p.tenGoiThau}</div>
+                                      <span
+                                        className={cn(
+                                          'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium',
+                                          PeDisplayStatusColor[getPeDisplayStatus(p.phase)],
+                                        )}
+                                      >
+                                        {PeDisplayStatusLabel[getPeDisplayStatus(p.phase)]}
+                                      </span>
+                                    </div>
+                                    <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
+                                      <span className="font-mono">{p.maPhieu ?? '—'}</span>
+                                      <span className="text-slate-300">·</span>
+                                      {/* S23 t2 UAT: BE list sort theo UpdatedAt DESC (fallback CreatedAt). */}
+                                      <span title={`Tạo lúc ${new Date(p.createdAt).toLocaleString('vi-VN')}`}>
+                                        {new Date(p.createdAt).toLocaleString('vi-VN', {
+                                          day: '2-digit', month: '2-digit', year: 'numeric',
+                                          hour: '2-digit', minute: '2-digit',
+                                        })}
+                                      </span>
+                                    </div>
+                                    {(p.drafterName || p.departmentName || p.contractId) && (
+                                      <div className="mt-0.5 flex items-center justify-between gap-2 text-[11px]">
+                                        <span className="min-w-0 flex-1 truncate text-slate-500">
+                                          {p.drafterName && <>👤 {p.drafterName}</>}
+                                          {p.drafterName && p.departmentName && <span className="text-slate-300"> · </span>}
+                                          {p.departmentName && <span className="text-slate-400">{p.departmentName}</span>}
+                                        </span>
+                                        {p.contractId && <span className="shrink-0 text-[10px] font-medium text-brand-600">✓ HĐ</span>}
+                                      </div>
+                                    )}
+                                  </button>
+                                </li>
+                              ))}
+                            </ul>
                           </details>
                         )
                       })}