[CLAUDE] FE: PE tra danh sach ve layout goc (bam trai lap day) + giu focus overlay bam phieu
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m40s
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m40s
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>
This commit is contained in:
pqhuy1987
@ -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) ─────────────────
|
||||
|
||||
@ -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) ─────────────────
|
||||
|
||||
Reference in New Issue
Block a user