From 3b98845976c84d4cec8ec2367e06d69fb51b8e1f Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Fri, 19 Jun 2026 13:53:11 +0700
Subject: [PATCH] [CLAUDE] FE: PE tra danh sach ve layout goc (bam trai lap
 day) + giu focus overlay bam phieu

anh Kiet/Tra Sol UAT: list state dang canh giua (max-w-5xl) trong 2 ben -> tra ve bo cuc goc 8e68ed1: grid lg:[400px_1fr_360px], list bam trai + 2 placeholder panel lap day man hinh, KHONG canh giua. Giu nguyen focus overlay S78 (bam phieu -> overlay truot tu phai che het menu+list; Duyet/Thu gon/Esc -> dong ve danh sach). <lg single-col compact. 2 app SHA256-identical. FE-only, 0 BE, 0 migration. Build PASS x2. Recover tu agent process-death (edit hoan chinh tren disk, em-main build-verify + mirror fe-admin).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../pages/pe/PurchaseEvaluationsListPage.tsx  | 30 +++++++++++++++----
 .../pages/pe/PurchaseEvaluationsListPage.tsx  | 30 +++++++++++++++----
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx b/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx
index 401ecaf..c6321a5 100644
--- a/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx
+++ b/fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx
@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { toast } from 'sonner'
-import { ArrowLeft, ClipboardCheck, Search } from 'lucide-react'
+import { ArrowLeft, ClipboardCheck, Search, X } from 'lucide-react'
 import { Input } from '@/components/ui/Input'
 import { Select } from '@/components/ui/Select'
 import { EmptyState } from '@/components/EmptyState'
@@ -307,11 +307,14 @@ export function PurchaseEvaluationsListPage() {
         </div>
       </header>
 
-      {/* S78 — list state: 1 panel rộng thoải mái (panel giữa/phải đã chuyển vào
-          focus overlay). max-w để dòng phiếu không trải quá dài trên màn siêu rộng. */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <aside className="mx-auto flex w-full max-w-5xl flex-1 flex-col overflow-hidden bg-white">
-          <div className="space-y-2 border-b border-slate-200 p-3 sm:p-4">
+      {/* S79 — list state RESTORE bản gốc 8e68ed1: grid 3-panel bám trái lấp đầy
+          màn hình (KHÔNG canh giữa). List <aside> trái + 2 placeholder panel
+          giữa/phải. Chọn phiếu (?id) → focus overlay S78 CHE hẳn tất cả → 2
+          placeholder ở yên (overlay phủ lên). <lg → grid về 1 cột = chỉ list. */}
+      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
+        {/* Panel 1: List — bám trái, fills, không max-w/mx-auto. */}
+        <aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
+          <div className="space-y-2 border-b border-slate-200 p-3">
             <div className="relative">
               <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
               <Input
@@ -489,6 +492,21 @@ export function PurchaseEvaluationsListPage() {
             </div>
           </div>
         </aside>
+
+        {/* Panel 2: placeholder giữa (như bản gốc). Chọn phiếu → focus overlay
+            S78 phủ lên trên, placeholder này KHÔNG đổi (không render detail inline
+            phía sau overlay → tránh double-mount PeDetailTabs). */}
+        <main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
+          <EmptyState icon={ClipboardCheck} title="Chọn phiếu ở danh sách" description="Chi tiết NCC + báo giá + duyệt sẽ hiển thị ở đây." />
+        </main>
+
+        {/* Panel 3: placeholder phải (như bản gốc). */}
+        <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
+          <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
+            <X className="mx-auto mb-2 h-5 w-5" />
+            Quy trình duyệt sẽ hiện khi chọn phiếu.
+          </div>
+        </aside>
       </div>
 
       {/* ─── S78 Focus overlay (full-bleed, slide-from-right) ─────────────────
diff --git a/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx b/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx
index 401ecaf..c6321a5 100644
--- a/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx
+++ b/fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx
@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { toast } from 'sonner'
-import { ArrowLeft, ClipboardCheck, Search } from 'lucide-react'
+import { ArrowLeft, ClipboardCheck, Search, X } from 'lucide-react'
 import { Input } from '@/components/ui/Input'
 import { Select } from '@/components/ui/Select'
 import { EmptyState } from '@/components/EmptyState'
@@ -307,11 +307,14 @@ export function PurchaseEvaluationsListPage() {
         </div>
       </header>
 
-      {/* S78 — list state: 1 panel rộng thoải mái (panel giữa/phải đã chuyển vào
-          focus overlay). max-w để dòng phiếu không trải quá dài trên màn siêu rộng. */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <aside className="mx-auto flex w-full max-w-5xl flex-1 flex-col overflow-hidden bg-white">
-          <div className="space-y-2 border-b border-slate-200 p-3 sm:p-4">
+      {/* S79 — list state RESTORE bản gốc 8e68ed1: grid 3-panel bám trái lấp đầy
+          màn hình (KHÔNG canh giữa). List <aside> trái + 2 placeholder panel
+          giữa/phải. Chọn phiếu (?id) → focus overlay S78 CHE hẳn tất cả → 2
+          placeholder ở yên (overlay phủ lên). <lg → grid về 1 cột = chỉ list. */}
+      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
+        {/* Panel 1: List — bám trái, fills, không max-w/mx-auto. */}
+        <aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
+          <div className="space-y-2 border-b border-slate-200 p-3">
             <div className="relative">
               <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
               <Input
@@ -489,6 +492,21 @@ export function PurchaseEvaluationsListPage() {
             </div>
           </div>
         </aside>
+
+        {/* Panel 2: placeholder giữa (như bản gốc). Chọn phiếu → focus overlay
+            S78 phủ lên trên, placeholder này KHÔNG đổi (không render detail inline
+            phía sau overlay → tránh double-mount PeDetailTabs). */}
+        <main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
+          <EmptyState icon={ClipboardCheck} title="Chọn phiếu ở danh sách" description="Chi tiết NCC + báo giá + duyệt sẽ hiển thị ở đây." />
+        </main>
+
+        {/* Panel 3: placeholder phải (như bản gốc). */}
+        <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
+          <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
+            <X className="mx-auto mb-2 h-5 w-5" />
+            Quy trình duyệt sẽ hiện khi chọn phiếu.
+          </div>
+        </aside>
       </div>
 
       {/* ─── S78 Focus overlay (full-bleed, slide-from-right) ─────────────────