c869d2617d
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m33s
- anh Kiet 16:59: "MA CV gom chu MEP-SUB-1 roi ten 1 MEP Sub MEP (Full) - dung kieu vay". - DbInitializer seed tuples 71 ma moi (VT->MAT, TP->SUB, MEP-0n->MEP-SUB-n, TB->MEP-EQU-n). - scripts/s59-rename-workitems-pmh.sql DA CHAY prod + LocalDB Dev TRUOC push (UPDATE giu Id, 71/71, OLD-CODES=0, verify JSON qua API prod tieng Viet nguyen ven). - FE x2 app (SHA256 mirror): PeWorkspaceCreateView + PeHeaderForm sort numeric-aware (ma khong pad -> string-sort loan "10"<"2") + tree Panel 1 workItemName numeric:true. - scripts/master-import-data.generated.md sync 71 dong W| + note mapping.
460 lines
23 KiB
TypeScript
460 lines
23 KiB
TypeScript
// List + Detail phiếu Duyệt NCC — 3-panel: List | Detail tabs | Workflow + history.
|
|
// URL params: type (filter A/B), pendingMe (1=inbox), id (selected), q (search).
|
|
// Plan AG Phase 1 (S26 2026-05-21) — Tree view 2-level Project > Gói thầu > PE
|
|
// UAT feedback bro Tra Sol: flat list "đám rừng" → Outlook folder structure.
|
|
// FE-only group view (no schema change) — Phase 2 ProjectPackage defer sau UAT confirm.
|
|
import { useMemo, useState } from 'react'
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { useNavigate, useSearchParams } from 'react-router-dom'
|
|
import { toast } from 'sonner'
|
|
import { ClipboardCheck, Search, X } from 'lucide-react'
|
|
import { Input } from '@/components/ui/Input'
|
|
import { Select } from '@/components/ui/Select'
|
|
import { EmptyState } from '@/components/EmptyState'
|
|
import { api } from '@/lib/api'
|
|
import { getErrorMessage } from '@/lib/apiError'
|
|
import { cn } from '@/lib/cn'
|
|
import type { Paged } from '@/types/master'
|
|
import {
|
|
PeDisplayStatus,
|
|
PeDisplayStatusColor,
|
|
PeDisplayStatusLabel,
|
|
PurchaseEvaluationPhase,
|
|
PurchaseEvaluationTypeLabel,
|
|
getPeDisplayStatus,
|
|
type PeDetailBundle,
|
|
type PeListItem,
|
|
} from '@/types/purchaseEvaluation'
|
|
import { PeDetailTabs } from '@/components/pe/PeDetailTabs'
|
|
import { PeWorkflowPanel } from '@/components/pe/PeWorkflowPanel'
|
|
|
|
export function PurchaseEvaluationsListPage() {
|
|
const navigate = useNavigate()
|
|
const qc = useQueryClient()
|
|
const [sp, setSp] = useSearchParams()
|
|
const typeFilter = sp.get('type') ? Number(sp.get('type')) : null
|
|
const pendingMe = sp.get('pendingMe') === '1'
|
|
const search = sp.get('q') ?? ''
|
|
const phase = sp.get('phase') ?? ''
|
|
const approvalWorkflowId = sp.get('awId') ?? '' // Mig 23 — filter quy trình
|
|
const selectedId = sp.get('id')
|
|
|
|
// Mig 23 — list quy trình duyệt V2 cho dropdown filter (filter theo type screen)
|
|
const approvalWorkflows = useQuery({
|
|
queryKey: ['approval-workflows-v2-filter', typeFilter],
|
|
queryFn: async () => {
|
|
if (!typeFilter) return []
|
|
const res = await api.get<{ types: { applicableType: number; history: { id: string; code: string; version: number; name: string; isActive: boolean }[] }[] }>(
|
|
'/approval-workflows-v2',
|
|
{ params: { applicableType: typeFilter } },
|
|
)
|
|
return res.data.types.find(t => t.applicableType === typeFilter)?.history ?? []
|
|
},
|
|
enabled: !!typeFilter,
|
|
})
|
|
|
|
const list = useQuery({
|
|
queryKey: ['pe-list', { typeFilter, pendingMe, search, phase, approvalWorkflowId }],
|
|
queryFn: async () => {
|
|
if (pendingMe) {
|
|
const res = await api.get<PeListItem[]>('/purchase-evaluations/inbox', {
|
|
params: {
|
|
type: typeFilter ?? undefined,
|
|
approvalWorkflowId: approvalWorkflowId || undefined,
|
|
},
|
|
})
|
|
return { items: res.data, total: res.data.length, page: 1, pageSize: res.data.length }
|
|
}
|
|
const res = await api.get<Paged<PeListItem>>('/purchase-evaluations', {
|
|
params: {
|
|
pageSize: 50,
|
|
search: search || undefined,
|
|
type: typeFilter ?? undefined,
|
|
phase: phase || undefined,
|
|
approvalWorkflowId: approvalWorkflowId || undefined,
|
|
},
|
|
})
|
|
return res.data
|
|
},
|
|
})
|
|
|
|
const detail = useQuery({
|
|
queryKey: ['pe-detail', selectedId],
|
|
queryFn: async () => (await api.get<PeDetailBundle>(`/purchase-evaluations/${selectedId}`)).data,
|
|
enabled: !!selectedId,
|
|
})
|
|
|
|
const del = useMutation({
|
|
mutationFn: async (id: string) => api.delete(`/purchase-evaluations/${id}`),
|
|
onSuccess: () => {
|
|
toast.success('Đã xóa phiếu.')
|
|
setParam('id', null)
|
|
qc.invalidateQueries({ queryKey: ['pe-list'] })
|
|
},
|
|
onError: e => toast.error(getErrorMessage(e)),
|
|
})
|
|
|
|
function setParam(key: string, value: string | null) {
|
|
const next = new URLSearchParams(sp)
|
|
if (value == null || value === '') next.delete(key)
|
|
else next.set(key, value)
|
|
if (key !== 'id') next.delete('page')
|
|
setSp(next, { replace: key === 'q' })
|
|
}
|
|
|
|
function selectRow(id: string) {
|
|
if (typeof window !== 'undefined' && window.matchMedia('(min-width: 1024px)').matches) {
|
|
setParam('id', id)
|
|
} else {
|
|
navigate(`/purchase-evaluations/${id}`)
|
|
}
|
|
}
|
|
|
|
const allRows = list.data?.items ?? []
|
|
// Duyệt (pendingMe) → filter cứng client-side chỉ "Đã gửi duyệt" (Nháp/Trả lại/
|
|
// Đã 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+.
|
|
|
|
// S59 — anh Kiệt FDC (Zalo 2026-06-11) + anh chốt follow-up: tree 4 tầng
|
|
// "Năm (tạo phiếu) > Dự án > Hạng mục công việc > Phiếu cần duyệt".
|
|
// Hạng mục từ 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: Năm DESC + Dự án A-Z (vi) + Hạng mục A-Z (vi) + PE createdAt DESC.
|
|
type WorkItemGroup = {
|
|
workItemId: string | null
|
|
workItemName: string
|
|
items: PeListItem[]
|
|
}
|
|
type ProjectGroup = {
|
|
projectId: string | null
|
|
projectName: string
|
|
workItems: WorkItemGroup[]
|
|
totalCount: number
|
|
}
|
|
type YearGroup = {
|
|
year: number
|
|
projects: ProjectGroup[]
|
|
totalCount: number
|
|
}
|
|
const yearGroups = useMemo<YearGroup[]>(() => {
|
|
const filtered = pendingMe
|
|
? allRows.filter(p => getPeDisplayStatus(p.phase) === PeDisplayStatus.DaGuiDuyet)
|
|
: allRows
|
|
const yearMap = new Map<number, YearGroup>()
|
|
for (const p of filtered) {
|
|
const year = new Date(p.createdAt).getFullYear()
|
|
if (!yearMap.has(year)) {
|
|
yearMap.set(year, { year, projects: [], totalCount: 0 })
|
|
}
|
|
const yg = yearMap.get(year)!
|
|
const projKey = p.projectId ?? '__no_project__'
|
|
const projName = p.projectName?.trim() || '(Dự án đã xoá)'
|
|
let pg = yg.projects.find(g => (g.projectId ?? '__no_project__') === projKey)
|
|
if (!pg) {
|
|
pg = { projectId: p.projectId ?? null, projectName: projName, workItems: [], totalCount: 0 }
|
|
yg.projects.push(pg)
|
|
}
|
|
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)
|
|
}
|
|
wg.items.push(p)
|
|
pg.totalCount++
|
|
yg.totalCount++
|
|
}
|
|
const arr = Array.from(yearMap.values())
|
|
arr.sort((a, b) => b.year - a.year)
|
|
for (const yg of arr) {
|
|
yg.projects.sort((a, b) => a.projectName.localeCompare(b.projectName, 'vi'))
|
|
for (const pg of yg.projects) {
|
|
// S59 — numeric:true vì tên PMH bắt đầu bằng STT không pad ("2 Mat…" < "10 Mat…")
|
|
pg.workItems.sort((a, b) => a.workItemName.localeCompare(b.workItemName, 'vi', { numeric: true }))
|
|
for (const wg of pg.workItems) {
|
|
wg.items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
|
}
|
|
}
|
|
}
|
|
return arr
|
|
}, [allRows, pendingMe])
|
|
|
|
// Total row count cho header badge (pendingMe đếm filtered, Danh sách đếm BE total).
|
|
const totalRowCount = yearGroups.reduce((sum, yg) => sum + yg.totalCount, 0)
|
|
|
|
// Plan AG2 — Expand state localStorage Set<string>. Default empty Set (all collapse).
|
|
// S59 key v3: node scheme chốt "Năm > Dự án > Hạng mục" → key v1/v2 vô nghĩa.
|
|
const STORAGE_KEY = 'pe_list_expanded_projects_v3'
|
|
const [expandedSet, setExpandedSet] = useState<Set<string>>(() => {
|
|
try {
|
|
const raw = localStorage.getItem(STORAGE_KEY)
|
|
return raw ? new Set(JSON.parse(raw) as string[]) : new Set<string>()
|
|
} catch {
|
|
return new Set<string>()
|
|
}
|
|
})
|
|
const isExpanded = (key: string) => expandedSet.has(key)
|
|
const toggleExpand = (key: string, open: boolean) => {
|
|
setExpandedSet(prev => {
|
|
const next = new Set(prev)
|
|
if (open) next.add(key)
|
|
else next.delete(key)
|
|
try { localStorage.setItem(STORAGE_KEY, JSON.stringify([...next])) } catch {}
|
|
return next
|
|
})
|
|
}
|
|
|
|
const headerTitle = typeFilter
|
|
? (pendingMe ? `${PurchaseEvaluationTypeLabel[typeFilter]} — Chờ duyệt` : PurchaseEvaluationTypeLabel[typeFilter])
|
|
: pendingMe ? 'Duyệt NCC — Chờ tôi' : 'Quy trình Duyệt NCC'
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-4rem)] flex-col">
|
|
<header className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-white px-6 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<ClipboardCheck className="h-5 w-5 text-slate-500" />
|
|
<h1 className="text-base font-semibold tracking-tight text-slate-900">{headerTitle}</h1>
|
|
<span className="ml-2 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
|
|
{pendingMe ? totalRowCount : (list.data?.total ?? 0)}
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
|
|
{/* Panel 1: List */}
|
|
<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
|
|
value={search}
|
|
onChange={e => setParam('q', e.target.value)}
|
|
placeholder="Tìm mã / tên gói thầu / dự án…"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
{/* Mig 23 — Dropdown quy trình duyệt CHỈ ở "Duyệt" (pendingMe).
|
|
Danh sách giữ nguyên (chỉ filter trạng thái) — user feedback
|
|
muốn Danh sách show hết phiếu không filter quy trình. */}
|
|
{pendingMe && (
|
|
<Select value={approvalWorkflowId} onChange={e => setParam('awId', e.target.value)}>
|
|
<option value="">Tất cả quy trình duyệt</option>
|
|
{approvalWorkflows.data?.map(w => (
|
|
<option key={w.id} value={w.id}>
|
|
{w.code} v{String(w.version).padStart(2, '0')} — {w.name}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
)}
|
|
{/* Duyệt (pendingMe) → filter cứng "Đã gửi duyệt", ẩn dropdown trạng thái.
|
|
Danh sách (pendingMe=false) → giữ dropdown cho user filter mọi trạng thái. */}
|
|
{pendingMe ? (
|
|
<div className="rounded border border-amber-200 bg-amber-50 px-2 py-1.5 text-[11px] text-amber-700">
|
|
Lọc cố định: <strong>Đã gửi duyệt</strong> (phiếu đang chờ duyệt)
|
|
</div>
|
|
) : (
|
|
<Select value={phase} onChange={e => setParam('phase', e.target.value)}>
|
|
<option value="">Tất cả trạng thái</option>
|
|
{Object.values(PeDisplayStatus).map(s => {
|
|
const phaseValue = s === PeDisplayStatus.Nhap
|
|
? String(PurchaseEvaluationPhase.DangSoanThao)
|
|
: s === PeDisplayStatus.DaDuyet
|
|
? String(PurchaseEvaluationPhase.DaDuyet)
|
|
: s === PeDisplayStatus.TraLai
|
|
? String(PurchaseEvaluationPhase.TraLai)
|
|
: s === PeDisplayStatus.TuChoi
|
|
? String(PurchaseEvaluationPhase.TuChoi)
|
|
: '' // DaGuiDuyet — multi-phase, không filter exact (TODO BE)
|
|
return phaseValue ? (
|
|
<option key={s} value={phaseValue}>{PeDisplayStatusLabel[s]}</option>
|
|
) : null
|
|
})}
|
|
</Select>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{list.isLoading && (
|
|
<div className="space-y-2 p-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="h-16 animate-pulse rounded-md bg-slate-100" />
|
|
))}
|
|
</div>
|
|
)}
|
|
{!list.isLoading && yearGroups.length === 0 && (
|
|
<div className="p-6">
|
|
<EmptyState icon={ClipboardCheck} title="Chưa có phiếu" description="Tạo phiếu mới để bắt đầu quy trình." />
|
|
</div>
|
|
)}
|
|
{/* S59 — Tree view chốt: 📅 Năm (bg-slate-50) > 📁 Dự án > 🧱 Hạng mục công việc > PE card.
|
|
3 layer <details>, named groups group/year + group/proj + group/wi cho chevron rotation. */}
|
|
<div className="divide-y divide-slate-100">
|
|
{yearGroups.map(yg => {
|
|
const yearKey = `y${yg.year}`
|
|
return (
|
|
<details
|
|
key={yearKey}
|
|
open={isExpanded(yearKey)}
|
|
onToggle={e => toggleExpand(yearKey, (e.currentTarget as HTMLDetailsElement).open)}
|
|
className="group/year"
|
|
>
|
|
<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/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-base">📅</span>
|
|
<span className="flex-1 truncate text-[13px] font-semibold text-slate-900">Năm {yg.year}</span>
|
|
<span className="rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-medium text-slate-700">{yg.totalCount}</span>
|
|
</summary>
|
|
<div className="ml-3 border-l border-slate-200">
|
|
{yg.projects.map(pg => {
|
|
const projKey = `${yearKey}::p${pg.projectId ?? '_none_'}`
|
|
return (
|
|
<details
|
|
key={projKey}
|
|
open={isExpanded(projKey)}
|
|
onToggle={e => toggleExpand(projKey, (e.currentTarget as HTMLDetailsElement).open)}
|
|
className="group/proj"
|
|
>
|
|
<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/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-sm">📁</span>
|
|
<span className="flex-1 truncate text-[12px] font-medium text-slate-700">{pg.projectName}</span>
|
|
<span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-600">{pg.totalCount}</span>
|
|
</summary>
|
|
<div className="ml-3 border-l border-slate-200">
|
|
{pg.workItems.map(wg => {
|
|
const wiKey = `${projKey}::w${wg.workItemId ?? '_none_'}`
|
|
return (
|
|
<details
|
|
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/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>
|
|
<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',
|
|
)}
|
|
>
|
|
{/* 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>
|
|
</details>
|
|
)
|
|
})}
|
|
</div>
|
|
</details>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Panel 2: Detail tabs */}
|
|
<main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
|
|
{!selectedId && (
|
|
<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." />
|
|
)}
|
|
{selectedId && detail.isLoading && <div className="text-sm text-slate-500">Đang tải…</div>}
|
|
{selectedId && detail.data && (
|
|
<PeDetailTabs
|
|
evaluation={detail.data}
|
|
onBack={() => setParam('id', null)}
|
|
onDelete={() => del.mutate(detail.data!.id)}
|
|
readOnly={true}
|
|
/>
|
|
)}
|
|
</main>
|
|
|
|
{/* Panel 3: Workflow + history */}
|
|
{/* Danh sách (pendingMe=false) → readOnly=true → ẩn Chuyển tiếp transition.
|
|
Duyệt (pendingMe=true) → readOnly=false → cho approver chuyển phase. */}
|
|
<aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
|
|
{!selectedId && (
|
|
<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>
|
|
)}
|
|
{selectedId && detail.data && <PeWorkflowPanel evaluation={detail.data} readOnly={!pendingMe} />}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Fullpage detail route cho mobile (/purchase-evaluations/:id)
|
|
export function PurchaseEvaluationDetailPage() {
|
|
const navigate = useNavigate()
|
|
const id = location.pathname.split('/').pop()!
|
|
const detail = useQuery({
|
|
queryKey: ['pe-detail', id],
|
|
queryFn: async () => (await api.get<PeDetailBundle>(`/purchase-evaluations/${id}`)).data,
|
|
})
|
|
const del = useMutation({
|
|
mutationFn: async () => api.delete(`/purchase-evaluations/${id}`),
|
|
onSuccess: () => {
|
|
toast.success('Đã xóa.')
|
|
navigate('/purchase-evaluations')
|
|
},
|
|
})
|
|
if (detail.isLoading) return <div className="p-6 text-sm text-slate-500">Đang tải…</div>
|
|
if (!detail.data) return <div className="p-6 text-sm text-red-600">Không tìm thấy phiếu.</div>
|
|
return (
|
|
<div className="space-y-4 p-6">
|
|
<PeDetailTabs evaluation={detail.data} onBack={() => navigate('/purchase-evaluations')} onDelete={() => del.mutate()} />
|
|
<PeWorkflowPanel evaluation={detail.data} />
|
|
</div>
|
|
)
|
|
}
|
|
|