[CLAUDE] Contract: KHKK 3-panel mirror Duyet NCC (GD2 het lech kien-truc) + 4 mitigation cuong-hanh
Dua man Ke hoach Ky ket HD ve dung lop kien-truc ma GD1 (PE) va GD3 (HD) dang
dung: 1 man 3-panel h-[calc(100vh-4rem)] grid [400px_1fr_360px], thay cho
list 2-panel + detail trang rieng co workflow xep chong. GD2 la mat-xich lech
duy nhat trong 4 giai-doan truoc dot nay.
BE (7/7):
- DetailDto +5 field: WorkflowVersion / EndedByLevelFinalize / FinalizeStepName
/ FinalizeLevelName / Approvals. 2 field Finalize* KHONG phai field append —
ContractSigningPlan chi co co bool, phai DAN XUAT (lam in-memory tu cay
workflow da nap, thay vi port 3 subquery cua PE).
- ContractSigningPlanApprovalDto de moi (truoc do 0 hit toan repo).
- StepDto +DepartmentName (nuoi chip phong panel 3 + header nhom Section 5).
- GET {id}/changelogs — policy KeHoachKyKet.Read.
- POST {id}/approval-attachments + enum +ApprovalAttachment=3 (append-only).
- approvals[] loc bo Decision=Pending de so (N) cung nghia voi (N) cua PE.
- KHONG chep khuon authz cua PurchaseEvaluationsController: file do la mot lo
gotcha #82 (class [Authorize] tran + changelogs khong policy).
FE (x2 app, SHA256 byte-identical 8/8):
- components/khkk/{KhkkListPanel,KhkkDetailContent,KhkkWorkflowPanel}.tsx;
KhkkWorkflowPanel doi tu pages/ sang components/.
- Panel 2: 5 Section danh so, Section 5 "Y kien cap duyet" duoi cung — khoi nay
DOI TU panel 3 sang panel 2 (owner khoanh do trong anh); luoi 2 cot + meta
"x/y cap da duyet · N NV tham gia" thay list phang 1 cot.
- Panel 3: banner ket-thuc-som, chip ten phong, badge Duyet thay CEO, lam mo
buoc sau finalize, khoi File dinh kem khi duyet, Lich su duyet, Lich su
thay doi. Chua chon phieu -> hop dashed y PE (QD owner).
4 mitigation cuong-hanh (owner chot panel 1 = PipelineTreePanel; chon HINH
khong phai chap-nhan VO):
- M-1 fallback !canPe -> danh-sach KHKK phang. Khong co no, user chi co quyen
KHKK (vd nguoi duyet nhom N5) MAT TRANG danh-sach du API van cho doc —
display-layer khoa authz-layer dang mo, mat con lai cua #82.
- M-2 onOpen thanh callback tu host; mac-dinh giu navigate cu => 0 hoi-quy
trang PE/GD3.
- B1 stage2Content di CAP voi stage2Count qua conditional-spread:
khong truyen => stage2 van nhan groups => trang PE GIU NGUYEN 8 ngan N1-N8.
- R-11 search/loc di server-side, KHONG loc-tren-cay; giu dong canh-bao
"Cay tai 200 phieu moi nhat".
Chong hoi-quy da do: build 3/3 PASS · acceptance tinh 20/20 x 2 app ·
mirror SHA256 8/8 · 0 hit path cam (components|pages)/(pe|contracts) ·
KHONG ghi filter/view/group vao URL (chong tai-sinh bug S155 sidebar sang
nham leaf) · giu set-state-in-render :97-101 (dung khuon React, refactor
thanh useEffect se tai-hien va-5).
Con no, khai thang:
- E-7 bang "cot nao chet, chuyen di dau" (8 cot + 6 KpiCard -> card 400px)
THIEU: lane FE chet o luot tra ve, ly-do bo cot mat theo. Phai soi diff
bang mat truoc UAT, neu khong dung ca M-7 mat-chuc-nang-im-lang.
- Test 643/644. 1 FLAKY Create_DifferentEvaluationType_DoesNotAffect_Other
(full-suite 2->1->1, chay rieng 0/0/0; PeWorkflowAdminTests tao
new SqliteDbFixture() rieng x6 test). Baseline tren HEAD sach CHUA do
(git worktree fail duong-dan Dropbox) => CHUA duoc noi "flake co san".
- 5 acceptance RUNTIME cho UAT: approvals co dong Tra lai + ten nguoi (DB dev
0 hang KHKK) · UAT fe-user:8080 an-danh · deep-link fe-admin:8082 (menu
KHKK bi an trong ADMIN_HIDDEN_KEYS) · negative-control go fallback canPe ·
khoi file tu-an khi rong.
- P3-12 4 return-mode = HOAN, khong phai buoc-khac: tien-de "KHKK 3 tram ngan"
do lai la SAI (DbInitializer:554 = 3 Buoc x <=2 Cap, seed tu ghi "sao tu
workflow Duyet NCC prod").
Spec + 6 artifact phan-bien: .claude/workflows/runs/2026-08-04-S171-khkk-ui-mirror-pe/
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
709
fe-admin/src/components/khkk/KhkkDetailContent.tsx
Normal file
709
fe-admin/src/components/khkk/KhkkDetailContent.tsx
Normal file
@ -0,0 +1,709 @@
|
||||
// [S171 KHKK 3-panel] PANEL 2 (giữa) — nội-dung phiếu "Kế hoạch ký kết HĐ" (GĐ2).
|
||||
// File MIRROR SHA256 identical với fe-admin counterpart.
|
||||
//
|
||||
// 🔴 Khối ý-kiến cấp duyệt (Section 5) là bản thứ 3 của cùng một hình (PE
|
||||
// `PeDetailTabs.tsx:705-774` · HĐ `components/contracts/WorkflowHistoryPanel.tsx`).
|
||||
// Gộp được KHI VÀ CHỈ KHI BE 3 module thống-nhất shape `status` precompute — trước đó
|
||||
// gộp chỉ đẻ ra `if (module === …)`.
|
||||
//
|
||||
// Bố-cục mirror Duyệt NCC: dải 4 giai-đoạn trên cùng, rồi các Section ĐÁNH SỐ nối nhau
|
||||
// bằng `divide-y`, ý-kiến cấp duyệt nằm DƯỚI CÙNG (Ảnh 3 khoanh đỏ).
|
||||
// 1. Thông tin kế hoạch 4. File đính kèm
|
||||
// 2. Giá đề xuất theo NCC 5. Ý kiến cấp duyệt
|
||||
// 3. Căn cứ hồ sơ (b.8-9)
|
||||
// 🔸 KHÁC PE ở NỘI DUNG (miễn-trừ P2-3, có lý-do nghiệp-vụ): GĐ2 không có báo-giá / so-sánh
|
||||
// NCC (đã chốt ở GĐ1) mà có căn-cứ hồ-sơ TVGS. Giống nhau ở KHUNG, không ở chữ.
|
||||
//
|
||||
// [P2-7] `readOnly` là prop TỪ HOST — host quyết `phiếu ≠ Nháp ∨ user ≠ người soạn`.
|
||||
// Không dựng workspace riêng cho việc này.
|
||||
// [R-8] KHKK KHÔNG có phiếu V1-legacy (module sinh 2026-07-29) ⇒ KHÔNG port nhánh fallback
|
||||
// V1 của PE (`PeDetailTabs.tsx:434-436`) — đó là code chết ngay ngày đầu.
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
ClipboardList, FileCheck, MessageSquare, Paperclip, Pencil, Plus, Save, Trash2, Upload, Users,
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { PePipelineStrip } from '@/components/pe/PePipelineStrip'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Dialog } from '@/components/ui/Dialog'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Label } from '@/components/ui/Label'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import { cn } from '@/lib/cn'
|
||||
import {
|
||||
DOSSIER_KIND_LABELS, DOSSIER_STATUS_BADGE, DOSSIER_STATUS_LABELS,
|
||||
DossierItemKind, DossierItemStatus,
|
||||
KHKK_APPROVAL_GROUP_LABELS, KHKK_PHASE_BADGE, KHKK_PHASE_LABELS,
|
||||
KhkkAttachmentPurpose, KhkkPhase,
|
||||
type DossierItemKindValue, type DossierItemStatusValue, type KhkkAttachmentDto,
|
||||
type KhkkDetailDto, type KhkkDossierItemDto, type KhkkPhaseValue,
|
||||
type UpsertKhkkDossierItemInput,
|
||||
} from '@/types/khkk'
|
||||
|
||||
function formatVnd(n: number | null | undefined): string {
|
||||
if (n === null || n === undefined) return '—'
|
||||
return n.toLocaleString('vi-VN') + ' đ'
|
||||
}
|
||||
|
||||
function formatDateTime(iso: string): string {
|
||||
return new Date(iso).toLocaleString('vi-VN')
|
||||
}
|
||||
|
||||
function formatSize(b: number): string {
|
||||
return b > 1024 * 1024 ? `${(b / 1024 / 1024).toFixed(1)} MB` : `${Math.round(b / 1024)} KB`
|
||||
}
|
||||
|
||||
/** Khung Section ĐÁNH SỐ — mirror khuôn Section của màn Duyệt NCC (đánh số + divide-y). */
|
||||
function Section({
|
||||
title, icon, accent, head, chipBg, chipFg, count, actions, children,
|
||||
}: {
|
||||
title: string
|
||||
icon: ReactNode
|
||||
accent: string
|
||||
head: string
|
||||
chipBg: string
|
||||
chipFg: string
|
||||
count?: number
|
||||
actions?: ReactNode
|
||||
children: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<section className="px-5 py-4">
|
||||
<header className="mb-3 flex items-center gap-2">
|
||||
<span
|
||||
className="icon-chip"
|
||||
style={{ height: '1.75rem', width: '1.75rem', ['--chip-bg' as string]: chipBg, ['--chip-fg' as string]: chipFg }}
|
||||
aria-hidden
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<h3 className={cn('text-sm font-semibold tracking-tight', head)} style={{ ['--accent' as string]: accent }}>
|
||||
{title}
|
||||
</h3>
|
||||
{count != null && (
|
||||
<span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-slate-500">
|
||||
{count}
|
||||
</span>
|
||||
)}
|
||||
{actions && <span className="ml-auto">{actions}</span>}
|
||||
</header>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function Field({
|
||||
label, value, mono, full, children,
|
||||
}: {
|
||||
label: string
|
||||
value?: ReactNode
|
||||
mono?: boolean
|
||||
full?: boolean
|
||||
children?: ReactNode
|
||||
}) {
|
||||
const empty = value == null || value === ''
|
||||
return (
|
||||
<div className={cn('min-w-0 text-sm', full && 'sm:col-span-2')}>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-wide text-brand-600">{label}</div>
|
||||
<div className={cn('mt-0.5 break-words text-sm', empty && !children ? 'text-slate-300' : 'font-medium text-brand-800', mono && !empty && 'font-mono')}>
|
||||
{children ?? (empty ? '—' : value)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const EMPTY_ITEM: UpsertKhkkDossierItemInput = {
|
||||
kind: DossierItemKind.MauVatLieu,
|
||||
name: '',
|
||||
status: DossierItemStatus.ChuaNop,
|
||||
tvgsName: '',
|
||||
note: '',
|
||||
}
|
||||
|
||||
export function KhkkDetailContent({
|
||||
plan,
|
||||
readOnly,
|
||||
onChanged,
|
||||
}: {
|
||||
plan: KhkkDetailDto
|
||||
/** [P2-7] Host quyết: `true` khi phiếu ≠ Nháp/Trả lại HOẶC user ≠ người soạn. */
|
||||
readOnly: boolean
|
||||
onChanged?: () => void
|
||||
}) {
|
||||
const qc = useQueryClient()
|
||||
const id = plan.id
|
||||
const [editHeader, setEditHeader] = useState(false)
|
||||
const [ghiChu, setGhiChu] = useState('')
|
||||
const [hoSoLink, setHoSoLink] = useState('')
|
||||
const [itemForm, setItemForm] = useState<UpsertKhkkDossierItemInput | null>(null)
|
||||
|
||||
const phase = plan.phase as KhkkPhaseValue
|
||||
const draftPhase = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TraLai
|
||||
// Sửa được = phiếu còn ở Nháp/Trả lại VÀ host không khoá (readOnly).
|
||||
const isDraft = draftPhase && !readOnly
|
||||
|
||||
const invalidate = () => {
|
||||
qc.invalidateQueries({ queryKey: ['khkk-detail', id] })
|
||||
qc.invalidateQueries({ queryKey: ['khkk-list'] })
|
||||
onChanged?.()
|
||||
}
|
||||
|
||||
const saveHeader = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.put(`/contract-signing-plans/${id}`, {
|
||||
ghiChu: ghiChu.trim() || null,
|
||||
hoSoLink: hoSoLink.trim() || null,
|
||||
})
|
||||
},
|
||||
onSuccess: () => { toast.success('Đã lưu'); setEditHeader(false); invalidate() },
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
// Danh mục hạng mục SP-002 — chỉ tải khi phiếu còn sửa được (tránh 1 request thừa).
|
||||
const catalogOptions = useQuery({
|
||||
queryKey: ['contract-catalog', plan.approvalGroup],
|
||||
queryFn: async () =>
|
||||
(await api.get<{ id: string; code: string; tenVi: string }[]>('/catalogs/contract-catalog', {
|
||||
params: { approvalGroup: plan.approvalGroup },
|
||||
})).data,
|
||||
enabled: isDraft && plan.approvalGroup != null,
|
||||
})
|
||||
|
||||
const assignLine = useMutation({
|
||||
mutationFn: async (p: { lineId: string; catalogEntryId: string }) =>
|
||||
api.put(`/contract-signing-plans/${id}/lines/${p.lineId}`, { catalogEntryId: p.catalogEntryId }),
|
||||
onSuccess: () => { toast.success('Đã gán hạng mục'); invalidate() },
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
const upsertItem = useMutation({
|
||||
mutationFn: async (body: UpsertKhkkDossierItemInput) => {
|
||||
if (!body.name.trim()) throw new Error('Vui lòng nhập tên căn cứ')
|
||||
const payload = {
|
||||
...body,
|
||||
contractSigningPlanId: id,
|
||||
name: body.name.trim(),
|
||||
tvgsName: body.tvgsName?.trim() || null,
|
||||
note: body.note?.trim() || null,
|
||||
}
|
||||
// [F-4 S161] POST ép Id=null = LUÔN insert ⇒ "Sửa" phải đi PUT, không thì đẻ bản sao im lặng.
|
||||
if (body.id) await api.put(`/contract-signing-plans/${id}/dossier-items/${body.id}`, payload)
|
||||
else await api.post(`/contract-signing-plans/${id}/dossier-items`, payload)
|
||||
},
|
||||
onSuccess: () => { toast.success('Đã lưu căn cứ'); setItemForm(null); invalidate() },
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
const deleteItem = useMutation({
|
||||
mutationFn: async (itemId: string) => api.delete(`/contract-signing-plans/${id}/dossier-items/${itemId}`),
|
||||
onSuccess: () => { toast.success('Đã xóa căn cứ'); invalidate() },
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
const upload = useMutation({
|
||||
mutationFn: async (file: File) => {
|
||||
const fd = new FormData()
|
||||
fd.append('file', file)
|
||||
fd.append('purpose', String(KhkkAttachmentPurpose.DossierScan))
|
||||
return api.post(`/contract-signing-plans/${id}/attachments`, fd, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
},
|
||||
onSuccess: () => { toast.success('Đã tải lên'); invalidate() },
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
const deleteAttachment = useMutation({
|
||||
mutationFn: async (attId: string) => api.delete(`/contract-signing-plans/${id}/attachments/${attId}`),
|
||||
onSuccess: () => { toast.success('Đã xóa file'); invalidate() },
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
async function download(att: KhkkAttachmentDto) {
|
||||
try {
|
||||
const res = await api.get(`/contract-signing-plans/${id}/attachments/${att.id}/download`, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
const url = window.URL.createObjectURL(res.data as Blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = att.fileName
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
} catch (e) {
|
||||
toast.error(getErrorMessage(e))
|
||||
}
|
||||
}
|
||||
|
||||
async function onPickFiles(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const files = Array.from(e.target.files ?? [])
|
||||
e.target.value = ''
|
||||
for (const f of files) {
|
||||
try { await upload.mutateAsync(f) } catch { /* lỗi đã toast ở onError */ }
|
||||
}
|
||||
}
|
||||
|
||||
const startEditHeader = () => {
|
||||
setGhiChu(plan.ghiChu ?? '')
|
||||
setHoSoLink(plan.hoSoLink ?? '')
|
||||
setEditHeader(true)
|
||||
}
|
||||
|
||||
// File "đính kèm khi duyệt" thuộc panel 3 (mục 5) — Section 4 chỉ liệt kê hồ-sơ của phiếu.
|
||||
const planAttachments = plan.attachments.filter(a => a.purpose !== KhkkAttachmentPurpose.ApprovalAttachment)
|
||||
|
||||
// ── Section 5: ý-kiến cấp duyệt, gom theo BƯỚC (Phòng) → CẤP → NV ──────────────────
|
||||
const opinions = plan.levelOpinions ?? []
|
||||
const steps = plan.workflowSteps ?? []
|
||||
|
||||
return (
|
||||
<div className="card-accent overflow-hidden" style={{ ['--accent' as string]: 'var(--color-brand-500)' }}>
|
||||
{/* Dải 4 giai-đoạn — GĐ2 đang sáng. Cùng component với màn Duyệt NCC (không nhân bản). */}
|
||||
<PePipelineStrip current={2} />
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 border-b border-slate-200 px-5 py-3">
|
||||
<span className="font-mono text-sm font-semibold text-brand-800">{plan.maKeHoach ?? '(chưa cấp mã)'}</span>
|
||||
<span className="min-w-0 flex-1 truncate text-sm text-slate-700">{plan.peTenGoiThau ?? '—'}</span>
|
||||
{plan.approvalGroup != null && (
|
||||
<span
|
||||
className="inline-flex items-center rounded-md border border-violet-300 bg-violet-100 px-2 py-0.5 text-[11px] font-semibold text-violet-800"
|
||||
title={KHKK_APPROVAL_GROUP_LABELS[plan.approvalGroup] ?? `Nhóm ${plan.approvalGroup}`}
|
||||
>
|
||||
N{plan.approvalGroup}
|
||||
</span>
|
||||
)}
|
||||
<span className={cn('inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium', KHKK_PHASE_BADGE[phase])}>
|
||||
{KHKK_PHASE_LABELS[phase]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-200">
|
||||
{/* ─────────────── 1 ─────────────── */}
|
||||
<Section
|
||||
title="1. Thông tin kế hoạch"
|
||||
icon={<FileCheck className="h-4 w-4" />}
|
||||
accent="var(--color-brand-500)"
|
||||
head="text-brand-800"
|
||||
chipBg="var(--color-brand-50)"
|
||||
chipFg="var(--color-brand-600)"
|
||||
actions={
|
||||
isDraft && !editHeader ? (
|
||||
<Button variant="outline" size="sm" onClick={startEditHeader}>
|
||||
<Pencil className="mr-2 h-3.5 w-3.5" /> Sửa
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
|
||||
<Field label="Mã kế hoạch" value={plan.maKeHoach ?? '—'} mono />
|
||||
<Field label="Phiếu Duyệt NCC nguồn">
|
||||
<span className="font-mono text-sm">{plan.peMaPhieu ?? '—'}</span>
|
||||
</Field>
|
||||
<Field label="Dự án" value={plan.projectName ?? '—'} />
|
||||
<Field label="Phòng ban" value={plan.departmentName ?? '—'} />
|
||||
<Field label="Người soạn" value={plan.drafterFullName ?? '—'} />
|
||||
<Field label="Quy trình">
|
||||
{plan.workflowCode ? (
|
||||
<span>
|
||||
<span className="font-mono">{plan.workflowCode}</span>
|
||||
{plan.workflowVersion != null && <span className="font-mono"> v{plan.workflowVersion}</span>}
|
||||
{plan.workflowName ? ` · ${plan.workflowName}` : ''}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-300">— Chưa chọn —</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Ngày tạo" value={formatDateTime(plan.createdAt)} />
|
||||
<Field label="Hạn xử lý (tham khảo)" value={plan.slaDeadline ? formatDateTime(plan.slaDeadline) : '—'} />
|
||||
</div>
|
||||
|
||||
{editHeader ? (
|
||||
<div className="mt-4 space-y-3 rounded-lg border border-slate-200 bg-slate-50/60 p-4">
|
||||
<div>
|
||||
<Label htmlFor="hoSoLink">Link hồ sơ (NAS)</Label>
|
||||
<Input id="hoSoLink" value={hoSoLink} onChange={(e) => setHoSoLink(e.target.value)} maxLength={1000} placeholder="\\\\nas\\du-an\\..." />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="ghiChu">Ghi chú</Label>
|
||||
<Textarea id="ghiChu" value={ghiChu} onChange={(e) => setGhiChu(e.target.value)} maxLength={2000} rows={4} />
|
||||
<div className="mt-1 text-xs text-muted-foreground">{ghiChu.length}/2000</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setEditHeader(false)}>Huỷ</Button>
|
||||
<Button size="sm" onClick={() => saveHeader.mutate()} disabled={saveHeader.isPending}>
|
||||
<Save className="mr-2 h-3.5 w-3.5" />
|
||||
{saveHeader.isPending ? 'Đang lưu...' : 'Lưu'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
|
||||
<Field label="Link hồ sơ" full>
|
||||
{plan.hoSoLink ? <span className="break-all font-normal text-slate-700">{plan.hoSoLink}</span> : <span className="text-slate-300">—</span>}
|
||||
</Field>
|
||||
<Field label="Ghi chú" full>
|
||||
{plan.ghiChu ? <span className="whitespace-pre-wrap font-normal text-slate-700">{plan.ghiChu}</span> : <span className="text-slate-300">—</span>}
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* ─────────────── 2 ─────────────── */}
|
||||
<Section
|
||||
title={`2. Giá đề xuất theo NCC trúng thầu (${plan.lines.length} dòng)`}
|
||||
icon={<Users className="h-4 w-4" />}
|
||||
accent="var(--color-teal-500)"
|
||||
head="text-teal-700"
|
||||
chipBg="var(--color-teal-50)"
|
||||
chipFg="var(--color-teal-700)"
|
||||
actions={
|
||||
plan.budgetFrozen ? (
|
||||
<span className="inline-flex items-center rounded-md border border-amber-300 bg-amber-100 px-2 py-0.5 text-[11px] font-semibold normal-case tracking-normal text-amber-800">
|
||||
🔒 Giá đã chốt tại thời điểm duyệt
|
||||
</span>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
{plan.lines.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">Phiếu nguồn chưa có NCC trúng thầu.</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="border-b border-slate-200 bg-slate-50/70">
|
||||
<tr>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Nhà cung cấp</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Hạng mục</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-right">Giá tham chiếu</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-right">Giá đề xuất</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-right">Giá duyệt</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Ghi chú</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{plan.lines.map((l) => (
|
||||
<tr key={l.id} className="border-b border-slate-100 last:border-0">
|
||||
<td className="px-3 py-2 font-medium text-brand-800">
|
||||
{l.supplierName ?? '—'}
|
||||
{l.contractId && (
|
||||
<a href={`/contracts/${l.contractId}`} className="ml-2 text-[10px] font-medium text-brand-600 hover:underline" title="Dòng này đã được đưa vào hợp đồng">
|
||||
✓ HĐ
|
||||
</a>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-700">
|
||||
{isDraft && !l.contractId ? (
|
||||
<>
|
||||
<select
|
||||
value={l.catalogEntryId ?? ''}
|
||||
onChange={(e) => e.target.value && assignLine.mutate({ lineId: l.id, catalogEntryId: e.target.value })}
|
||||
disabled={assignLine.isPending}
|
||||
aria-label={`Gán hạng mục SP-002 cho dòng ${l.supplierName ?? l.id}`}
|
||||
className="h-8 w-full min-w-[12rem] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
|
||||
>
|
||||
<option value="">— Chọn hạng mục —</option>
|
||||
{/* Hạng mục ĐÃ LƯU mà không có trong options ⇒ chèn option đại diện,
|
||||
không thì dòng đã gán TRÔNG như chưa gán. */}
|
||||
{l.catalogEntryId && !(catalogOptions.data ?? []).some((c) => c.id === l.catalogEntryId) && (
|
||||
<option value={l.catalogEntryId}>{l.tenHangMuc ?? '(hạng mục đã gán)'}</option>
|
||||
)}
|
||||
{(catalogOptions.data ?? []).map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.code} — {c.tenVi}</option>
|
||||
))}
|
||||
</select>
|
||||
{catalogOptions.isError && (
|
||||
<div className="mt-1 text-[11px] text-red-600">
|
||||
Không tải được danh mục hạng mục —{' '}
|
||||
<button type="button" className="underline" onClick={() => catalogOptions.refetch()}>thử lại</button>
|
||||
</div>
|
||||
)}
|
||||
{catalogOptions.isSuccess && (catalogOptions.data?.length ?? 0) === 0 && (
|
||||
<div className="mt-1 text-[11px] text-amber-700">
|
||||
Nhóm duyệt N{plan.approvalGroup} chưa có hạng mục đang hiệu lực — liên hệ quản trị danh mục.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : l.tenHangMuc ? l.tenHangMuc : <span className="text-slate-300">—</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums text-slate-600">{formatVnd(l.peReferenceAmount)}</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums text-brand-800">{formatVnd(l.proposedAmount)}</td>
|
||||
<td className="px-3 py-2 text-right tabular-nums text-emerald-700">{formatVnd(l.approvedAmount)}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-600">{l.note ?? '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 text-xs text-muted-foreground">
|
||||
Giá tham chiếu là SNAPSHOT tổng báo giá được chọn của NCC trên phiếu Duyệt NCC tại thời điểm lập kế hoạch.
|
||||
{' '}Cột Hạng mục gán ngay tại bảng khi phiếu ở Nháp/Trả lại — mọi dòng phải gán xong mới trình duyệt được.
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* ─────────────── 3 ─────────────── */}
|
||||
<Section
|
||||
title="3. Căn cứ hồ sơ (mẫu vật liệu / shopdrawing)"
|
||||
icon={<ClipboardList className="h-4 w-4" />}
|
||||
accent="var(--color-violet-500)"
|
||||
head="text-violet-700"
|
||||
chipBg="var(--color-violet-50)"
|
||||
chipFg="var(--color-violet-700)"
|
||||
count={plan.dossierItems.length}
|
||||
actions={
|
||||
isDraft ? (
|
||||
<Button variant="outline" size="sm" onClick={() => setItemForm({ ...EMPTY_ITEM })}>
|
||||
<Plus className="mr-2 h-3.5 w-3.5" /> Thêm căn cứ
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
{plan.dossierItems.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">Chưa khai căn cứ nào.</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="border-b border-slate-200 bg-slate-50/70">
|
||||
<tr>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Loại</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Tên căn cứ</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Trạng thái</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">TVGS</th>
|
||||
<th className="label-eyebrow px-3 py-2 text-left">Ghi chú</th>
|
||||
{isDraft && <th className="label-eyebrow px-3 py-2 text-right">Thao tác</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{plan.dossierItems.map((d: KhkkDossierItemDto) => (
|
||||
<tr key={d.id} className="border-b border-slate-100 last:border-0">
|
||||
<td className="px-3 py-2 text-xs text-slate-600">{DOSSIER_KIND_LABELS[d.kind] ?? '—'}</td>
|
||||
<td className="px-3 py-2 font-medium text-brand-800">{d.name}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={cn('inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium', DOSSIER_STATUS_BADGE[d.status])}>
|
||||
{DOSSIER_STATUS_LABELS[d.status]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-600">
|
||||
{d.tvgsName ?? '—'}
|
||||
{d.tvgsResultAt && <span className="ml-1 text-[11px] text-slate-400">({formatDateTime(d.tvgsResultAt)})</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-600">{d.note ?? '—'}</td>
|
||||
{isDraft && (
|
||||
<td className="px-3 py-2 text-right">
|
||||
<div className="flex justify-end gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setItemForm({
|
||||
id: d.id, kind: d.kind, supplierId: d.supplierId, name: d.name,
|
||||
status: d.status, tvgsName: d.tvgsName ?? '', note: d.note ?? '',
|
||||
})}
|
||||
className="rounded px-1.5 py-1 text-violet-600 hover:bg-violet-50"
|
||||
title="Sửa"
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { if (window.confirm(`Xóa căn cứ "${d.name}"?`)) deleteItem.mutate(d.id) }}
|
||||
className="rounded px-1.5 py-1 text-red-600 hover:bg-red-50"
|
||||
title="Xóa"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* ─────────────── 4 ─────────────── */}
|
||||
<Section
|
||||
title="4. File đính kèm"
|
||||
icon={<Paperclip className="h-4 w-4" />}
|
||||
accent="var(--color-teal-500)"
|
||||
head="text-teal-700"
|
||||
chipBg="var(--color-teal-50)"
|
||||
chipFg="var(--color-teal-700)"
|
||||
count={planAttachments.length}
|
||||
actions={
|
||||
readOnly ? undefined : (
|
||||
<label className="inline-flex cursor-pointer items-center rounded-md border border-slate-300 px-2.5 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
|
||||
<Upload className="mr-2 h-3.5 w-3.5" />
|
||||
{upload.isPending ? 'Đang tải...' : 'Tải file lên'}
|
||||
<input type="file" multiple className="hidden" onChange={onPickFiles} />
|
||||
</label>
|
||||
)
|
||||
}
|
||||
>
|
||||
{planAttachments.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">Chưa có file đính kèm.</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{planAttachments.map((a) => (
|
||||
<li key={a.id} className="flex items-center justify-between rounded-lg border border-slate-200 p-2.5 text-sm">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium text-brand-800">{a.fileName}</div>
|
||||
<div className="text-xs text-muted-foreground">{formatSize(a.fileSize)} · {formatDateTime(a.createdAt)}</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-2">
|
||||
<button type="button" onClick={() => download(a)} className="text-xs text-primary hover:underline">Tải xuống</button>
|
||||
{!readOnly && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { if (window.confirm(`Xóa file "${a.fileName}"?`)) deleteAttachment.mutate(a.id) }}
|
||||
className="text-xs text-red-600 hover:underline"
|
||||
>
|
||||
Xóa
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* ─────────────── 5 — Ảnh 3 khoanh đỏ ───────────────
|
||||
Gom theo BƯỚC (kèm PHÒNG) → lưới 2 cột các ô ý-kiến của từng CẤP, đúng khuôn
|
||||
Section "Ý kiến cấp duyệt" V2 của Duyệt NCC (`PeDetailTabs.tsx:705-774`):
|
||||
forEach Bước → forEach Cấp → 1 ô. Ô chưa ký vẫn HIỆN (chỗ trống có tên người) —
|
||||
vắng ô là người đọc không biết còn thiếu chữ ký của ai. */}
|
||||
<Section
|
||||
title="5. Ý kiến cấp duyệt"
|
||||
icon={<MessageSquare className="h-4 w-4" />}
|
||||
accent="var(--color-violet-500)"
|
||||
head="text-violet-700"
|
||||
chipBg="var(--color-violet-50)"
|
||||
chipFg="var(--color-violet-700)"
|
||||
count={opinions.length}
|
||||
>
|
||||
{steps.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Phiếu chưa pin quy trình duyệt — chưa có cấp nào để ghi ý kiến.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{steps.map((step) => {
|
||||
const signedCount = step.levels.filter(lv =>
|
||||
opinions.some(o => o.approvalWorkflowLevelId === lv.id)).length
|
||||
return (
|
||||
<div key={step.id} className="rounded-lg border border-slate-200">
|
||||
<div className="flex flex-wrap items-center gap-2 border-b border-slate-100 bg-slate-50/70 px-3 py-2">
|
||||
<span className="text-xs font-semibold text-slate-800">Bước {step.order} — {step.name}</span>
|
||||
{step.departmentName && (
|
||||
<span className="rounded border border-slate-300 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-600">
|
||||
{step.departmentName}
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-auto text-[10px] text-slate-500">
|
||||
{signedCount}/{step.levels.length} cấp đã duyệt · {step.levels.length} NV tham gia
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2 p-3 md:grid-cols-2">
|
||||
{step.levels.length === 0 && (
|
||||
<p className="text-[11px] italic text-slate-400">Bước này chưa cấu hình cấp duyệt.</p>
|
||||
)}
|
||||
{step.levels.map((lv) => {
|
||||
const signed = opinions.find(o => o.approvalWorkflowLevelId === lv.id)
|
||||
return (
|
||||
<div
|
||||
key={lv.id}
|
||||
className={cn(
|
||||
'rounded-md border px-2.5 py-2 text-[11px]',
|
||||
signed ? 'border-emerald-200 bg-emerald-50/40' : 'border-dashed border-slate-200 bg-white',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-x-1.5 text-slate-700">
|
||||
<span className="font-medium">{lv.name || `Cấp ${lv.order}`}</span>
|
||||
<span className="text-slate-400">·</span>
|
||||
<span>{lv.approverFullName ?? '(chưa cấu hình)'}</span>
|
||||
{signed && (
|
||||
<>
|
||||
<span className="text-slate-400">·</span>
|
||||
<span className="text-slate-500">{formatDateTime(signed.signedAt)}</span>
|
||||
{signed.approverUserId && signed.approverUserId !== signed.signedByUserId && (
|
||||
<span className="rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold text-amber-800">
|
||||
duyệt thay ({signed.signedByFullName})
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-0.5 whitespace-pre-wrap text-slate-600">
|
||||
{signed
|
||||
? (signed.comment?.trim() || '(duyệt — không ý kiến)')
|
||||
: <span className="italic text-slate-300">Chưa ký</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
{/* Dialog thêm/sửa căn cứ */}
|
||||
<Dialog open={!!itemForm} onClose={() => setItemForm(null)} title={itemForm?.id ? 'Sửa căn cứ hồ sơ' : 'Thêm căn cứ hồ sơ'}>
|
||||
{itemForm && (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor="item-kind">Loại căn cứ</Label>
|
||||
<select
|
||||
id="item-kind"
|
||||
value={itemForm.kind}
|
||||
onChange={(e) => setItemForm({ ...itemForm, kind: Number(e.target.value) as DossierItemKindValue })}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
{Object.entries(DOSSIER_KIND_LABELS).map(([v, label]) => (
|
||||
<option key={v} value={v}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="item-name">Tên căn cứ <span className="text-red-500">*</span></Label>
|
||||
<Input id="item-name" value={itemForm.name} onChange={(e) => setItemForm({ ...itemForm, name: e.target.value })} maxLength={300} placeholder="vd. Mẫu thép D10 Hoà Phát" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="item-status">Trạng thái</Label>
|
||||
<select
|
||||
id="item-status"
|
||||
value={itemForm.status}
|
||||
onChange={(e) => setItemForm({ ...itemForm, status: Number(e.target.value) as DossierItemStatusValue })}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
{Object.entries(DOSSIER_STATUS_LABELS).map(([v, label]) => (
|
||||
<option key={v} value={v}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="item-tvgs">Tên TVGS xử lý</Label>
|
||||
<Input id="item-tvgs" value={itemForm.tvgsName ?? ''} onChange={(e) => setItemForm({ ...itemForm, tvgsName: e.target.value })} maxLength={200} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="item-note">Ghi chú</Label>
|
||||
<Textarea id="item-note" value={itemForm.note ?? ''} onChange={(e) => setItemForm({ ...itemForm, note: e.target.value })} maxLength={1000} rows={3} />
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="outline" onClick={() => setItemForm(null)}>Huỷ</Button>
|
||||
<Button onClick={() => upsertItem.mutate(itemForm)} disabled={upsertItem.isPending || !itemForm.name.trim()}>
|
||||
{upsertItem.isPending ? 'Đang lưu...' : 'Lưu'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
388
fe-admin/src/components/khkk/KhkkListPanel.tsx
Normal file
388
fe-admin/src/components/khkk/KhkkListPanel.tsx
Normal file
@ -0,0 +1,388 @@
|
||||
// [S171 KHKK 3-panel] PANEL 1 của màn "Kế hoạch ký kết HĐ" (GĐ2) — mirror bố-cục
|
||||
// Duyệt NCC (GĐ1) / Hợp đồng (GĐ3): khối filter trên cùng + thân danh sách cuộn riêng.
|
||||
// File MIRROR SHA256 identical với fe-admin counterpart.
|
||||
//
|
||||
// 🔴 KHỐI Ý-KIẾN / SƠ-ĐỒ DUYỆT là bản thứ 3 của cùng một hình (PE `PeDetailTabs.tsx:705-774`
|
||||
// · HĐ `components/contracts/WorkflowHistoryPanel.tsx`). Gộp được khi và chỉ khi BE 3 module
|
||||
// thống-nhất shape `status` precompute. Trước đó, gộp = đẻ `if (module === …)`.
|
||||
//
|
||||
// ══ OWNER CHỐT 2026-08-04 (QĐ-1): panel 1 = CÂY TOÀN TRÌNH `PipelineTreePanel currentStage={2}`.
|
||||
// Chọn HÌNH ≠ chấp-nhận VỠ ⇒ 4 mitigation dưới đây là BẮT BUỘC, không phải tuỳ chọn:
|
||||
// M-1 `canPe` (`usePipelineStages.ts:83`) khoá cây bằng 3 key của Duyệt NCC. Người CHỈ có
|
||||
// quyền KHKK (vd người duyệt nhóm N5) sẽ thấy cây trống trong khi API
|
||||
// `GET /contract-signing-plans` (policy `KeHoachKyKet.Read`) VẪN cho họ đọc — đúng mặt
|
||||
// còn lại của gotcha #82. ⇒ `!canPe` FALLBACK sang DANH-SÁCH PHẲNG cùng ô này.
|
||||
// Cây là lớp LÀM GIÀU, KHÔNG phải điều-kiện để thấy phiếu.
|
||||
// M-2 Leaf/card KHKK trên cây KHÔNG `navigate('/khkk/:id')` nữa mà gọi `onSelect` của host
|
||||
// (`usePipelineStages.ts` `onOpenKhkk`) — không thì bấm 1 cái là văng khỏi màn 3-panel.
|
||||
// B1 Truyền `stage2Content` PHẢI kèm `stage2Count` (`PipelineStageFolders.tsx:95-97`).
|
||||
// Trade-off khai thẳng: trong cây của trang này, folder GĐ2 hiện CARD PHIẾU thay cho
|
||||
// 8 ngăn N1-N8; lối vào nhóm giữ ở `Select` nhóm ngay bên trên.
|
||||
// R-11 Cây chỉ tải 200 phiếu PE mới nhất (`PipelineTreePanel.tsx:22`) và KHÔNG có "trang 2".
|
||||
// ⇒ ô tìm + `Select` trạng-thái đi SERVER-SIDE thẳng `GET /contract-signing-plans`
|
||||
// (bật chế-độ danh-sách phẳng), luôn có đường tới phiếu cũ; và dòng cảnh-báo
|
||||
// "Cây tải 200 phiếu mới nhất…" của cây KHÔNG bị nuốt.
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { FileCheck, Inbox, Search } from 'lucide-react'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Select } from '@/components/ui/Select'
|
||||
import { PipelineTreePanel } from '@/components/pipeline/PipelineTreePanel'
|
||||
import { usePipelineStages } from '@/hooks/usePipelineStages'
|
||||
import { api } from '@/lib/api'
|
||||
import { cn } from '@/lib/cn'
|
||||
import {
|
||||
KHKK_APPROVAL_GROUPS,
|
||||
KHKK_PHASE_BADGE,
|
||||
KHKK_PHASE_LABELS,
|
||||
KhkkPhase,
|
||||
khkkGroupMenuLabel,
|
||||
type KhkkListItemDto,
|
||||
type KhkkPhaseValue,
|
||||
type PagedResult,
|
||||
} from '@/types/khkk'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
function formatVnd(n: number | null | undefined): string {
|
||||
if (n === null || n === undefined) return '—'
|
||||
return n.toLocaleString('vi-VN') + ' đ'
|
||||
}
|
||||
|
||||
function formatDateTime(iso: string): string {
|
||||
return new Date(iso).toLocaleString('vi-VN', {
|
||||
day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [F-2] Chip "⚑ Kết thúc · {Bước}" — khuôn `components/pe/PeFinalizeChip.tsx` (S89/S97),
|
||||
* dựng lại ở đây thay vì import vì nguồn cờ khác module (KHKK đọc
|
||||
* `endedByLevelFinalize` + `finalizeStepName`, PE đọc `endsBeforeCeo`).
|
||||
*/
|
||||
export function KhkkFinalizeChip({
|
||||
endedByLevelFinalize,
|
||||
finalizeStepName,
|
||||
phase,
|
||||
}: {
|
||||
endedByLevelFinalize: boolean
|
||||
finalizeStepName: string | null
|
||||
phase?: number
|
||||
}) {
|
||||
if (!endedByLevelFinalize) {
|
||||
if (phase === KhkkPhase.DaDuyet) {
|
||||
return (
|
||||
<span
|
||||
className="inline-flex shrink-0 items-center rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-800"
|
||||
title="Kế hoạch đi HẾT quy trình (không kết thúc sớm ở cấp dưới)"
|
||||
>
|
||||
✅ Duyệt hết quy trình
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className="inline-flex shrink-0 items-center rounded bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-800"
|
||||
title={`Quy trình kết thúc tại ${finalizeStepName ?? 'cấp này'} — không trình tiếp cấp sau`}
|
||||
>
|
||||
{finalizeStepName ? `⚑ Kết thúc · ${finalizeStepName}` : '⚑ Kết thúc sớm'}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Card 3 hàng — thay cho bảng 8 cột + 6 KpiCard của bản cũ (bảng "cột nào chết, chuyển
|
||||
* đi đâu" nằm ở `sub-implementer-frontend-s171.md` §4).
|
||||
* [M-8] Σ tiền in MỘT số, suy từ `phase === DaDuyet` (đúng như BE suy `budgetFrozen`) —
|
||||
* KHÔNG thêm field vào `KhkkListItemDto`, vì `budgetFrozen` chỉ có ở DetailDto.
|
||||
*/
|
||||
export function KhkkPlanCard({
|
||||
plan,
|
||||
selected,
|
||||
onSelect,
|
||||
finalize,
|
||||
}: {
|
||||
plan: KhkkListItemDto
|
||||
selected: boolean
|
||||
onSelect: (id: string) => void
|
||||
/** Chỉ có khi phiếu ĐANG được chọn (detail đã tải) — list payload không mang cờ này. */
|
||||
finalize?: { endedByLevelFinalize: boolean; finalizeStepName: string | null }
|
||||
}) {
|
||||
const frozen = plan.phase === KhkkPhase.DaDuyet
|
||||
const amount = frozen ? (plan.totalApprovedAmount ?? plan.totalProposedAmount) : plan.totalProposedAmount
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(plan.id)}
|
||||
className={cn(
|
||||
'block w-full px-3 py-2.5 text-left transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500/60',
|
||||
selected && 'bg-brand-50 ring-1 ring-inset ring-brand-200',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{finalize && (
|
||||
<KhkkFinalizeChip
|
||||
endedByLevelFinalize={finalize.endedByLevelFinalize}
|
||||
finalizeStepName={finalize.finalizeStepName}
|
||||
phase={plan.phase}
|
||||
/>
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-900">
|
||||
{plan.peTenGoiThau ?? '(chưa có tên gói thầu)'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
'shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] font-medium',
|
||||
KHKK_PHASE_BADGE[plan.phase],
|
||||
)}
|
||||
>
|
||||
{KHKK_PHASE_LABELS[plan.phase]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
|
||||
<span className="font-mono">{plan.maKeHoach ?? '(chưa cấp mã)'}</span>
|
||||
{plan.approvalGroup != null && (
|
||||
<span className="rounded border border-violet-200 bg-violet-50 px-1 text-[9px] font-semibold text-violet-700">
|
||||
N{plan.approvalGroup}
|
||||
</span>
|
||||
)}
|
||||
<span>·</span>
|
||||
<span className="truncate">{formatDateTime(plan.createdAt)}</span>
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-center justify-between gap-2 text-[11px] text-slate-500">
|
||||
<span className="min-w-0 truncate">👤 {plan.drafterFullName ?? '—'}</span>
|
||||
<span className={cn('shrink-0 tabular-nums', frozen ? 'text-emerald-700' : 'text-brand-800')}>
|
||||
{formatVnd(amount)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function KhkkListPanel({
|
||||
selectedId,
|
||||
onSelect,
|
||||
search,
|
||||
onSearchChange,
|
||||
phase,
|
||||
onPhaseChange,
|
||||
group,
|
||||
onGroupChange,
|
||||
deletedView,
|
||||
page,
|
||||
onPageChange,
|
||||
selectedFinalize,
|
||||
}: {
|
||||
selectedId: string | null
|
||||
onSelect: (id: string) => void
|
||||
search: string
|
||||
onSearchChange: (v: string) => void
|
||||
phase: KhkkPhaseValue | null
|
||||
onPhaseChange: (v: KhkkPhaseValue | null) => void
|
||||
group: number | null
|
||||
onGroupChange: (v: number | null) => void
|
||||
deletedView: boolean
|
||||
page: number
|
||||
onPageChange: (p: number) => void
|
||||
selectedFinalize?: { endedByLevelFinalize: boolean; finalizeStepName: string | null }
|
||||
}) {
|
||||
const { canPe } = usePipelineStages()
|
||||
const term = search.trim()
|
||||
|
||||
// [R-11] Lọc đi SERVER-SIDE, KHÔNG lọc trên cây: có từ khoá / có trạng-thái / xem thùng
|
||||
// rác ⇒ chuyển sang danh-sách phẳng có phân-trang thật (`total` từ server) nên phiếu nằm
|
||||
// ngoài 200 phiếu mới nhất VẪN tới được.
|
||||
// [M-1] `!canPe` ⇒ cũng dùng đúng danh-sách phẳng này — cây khoá không được phép làm
|
||||
// người dùng mất trắng phiếu của chính họ.
|
||||
const flatMode = !canPe || deletedView || term.length > 0 || phase !== null
|
||||
|
||||
const list = useQuery({
|
||||
queryKey: ['khkk-list', { group, phase, search: term, page, deletedView }],
|
||||
queryFn: async () => {
|
||||
const url = deletedView ? '/contract-signing-plans/deleted' : '/contract-signing-plans'
|
||||
return (await api.get<PagedResult<KhkkListItemDto>>(url, {
|
||||
params: {
|
||||
phase: deletedView ? undefined : (phase ?? undefined),
|
||||
group: group ?? undefined,
|
||||
search: term || undefined,
|
||||
page,
|
||||
pageSize: PAGE_SIZE,
|
||||
},
|
||||
})).data
|
||||
},
|
||||
enabled: flatMode,
|
||||
})
|
||||
|
||||
const items = list.data?.items ?? []
|
||||
const total = list.data?.total ?? 0
|
||||
const totalPages = list.data?.totalPages ?? 1
|
||||
|
||||
// [B1] Thân folder GĐ2 của cây = CARD phiếu của chính trang này; `Select` nhóm lọc luôn
|
||||
// trên cây (client-side, an toàn: đây chỉ là chia lại đúng tập phiếu cây đã có).
|
||||
const stage2Content = (plans: KhkkListItemDto[]) => {
|
||||
const shown = group === null ? plans : plans.filter(k => k.approvalGroup === group)
|
||||
if (shown.length === 0) {
|
||||
return (
|
||||
<p className="px-3 py-2 text-[11px] italic text-slate-400">
|
||||
{group === null ? 'Gói này chưa có kế hoạch ký kết.' : `Gói này chưa có phiếu nhóm N${group}.`}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ul className="divide-y divide-slate-100">
|
||||
{shown.map(k => (
|
||||
<li key={k.id}>
|
||||
<KhkkPlanCard
|
||||
plan={k}
|
||||
selected={selectedId === k.id}
|
||||
onSelect={onSelect}
|
||||
finalize={selectedId === k.id ? selectedFinalize : undefined}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
const stage2Count = (plans: KhkkListItemDto[]) =>
|
||||
(group === null ? plans : plans.filter(k => k.approvalGroup === group)).length
|
||||
|
||||
return (
|
||||
<aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
|
||||
{/* Khối filter — CHỖ ĐẶT giống PE/GĐ3 (trên cùng panel 1). `Select` nhóm N1-N8 là
|
||||
chỗ KHKK khác nguồn dữ-liệu chứ không khác bố-trí (P1-4). */}
|
||||
<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 => onSearchChange(e.target.value)}
|
||||
placeholder="Tìm mã kế hoạch / mã phiếu / gói thầu…"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Select
|
||||
value={phase ?? ''}
|
||||
aria-label="Lọc trạng thái"
|
||||
onChange={e => onPhaseChange(e.target.value === '' ? null : (Number(e.target.value) as KhkkPhaseValue))}
|
||||
>
|
||||
<option value="">Tất cả trạng thái</option>
|
||||
{(Object.keys(KHKK_PHASE_LABELS) as unknown as number[]).map(p => (
|
||||
<option key={p} value={p}>{KHKK_PHASE_LABELS[Number(p) as KhkkPhaseValue]}</option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
value={group ?? ''}
|
||||
aria-label="Lọc nhóm duyệt"
|
||||
onChange={e => onGroupChange(e.target.value === '' ? null : Number(e.target.value))}
|
||||
>
|
||||
<option value="">Tất cả nhóm</option>
|
||||
{KHKK_APPROVAL_GROUPS.map(n => (
|
||||
<option key={n} value={n}>{khkkGroupMenuLabel(n)}</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
{flatMode && !deletedView && canPe && (
|
||||
<p className="text-[10px] italic text-slate-400">
|
||||
Đang lọc — danh sách lấy thẳng từ máy chủ (không giới hạn 200 phiếu của cây).
|
||||
</p>
|
||||
)}
|
||||
{!canPe && (
|
||||
<p className="text-[10px] italic text-slate-400">
|
||||
Bạn chưa có quyền xem phiếu Duyệt NCC nên cây toàn trình không dựng được — danh
|
||||
sách kế hoạch ký kết vẫn liệt kê đầy đủ ở dưới.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{!flatMode && (
|
||||
<PipelineTreePanel
|
||||
currentStage={2}
|
||||
className="border-0 shadow-none"
|
||||
bodyMaxHClass="max-h-[28rem] lg:max-h-none"
|
||||
stage2Options={{ stage2Content, stage2Count, onOpenKhkk: onSelect }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{flatMode && list.isLoading && (
|
||||
<div className="space-y-2 p-3">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="h-16 animate-pulse rounded-md bg-slate-100 motion-reduce:animate-none" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{flatMode && list.isError && (
|
||||
<div className="space-y-2 px-3 py-4">
|
||||
<p className="text-[12px] text-slate-500">Không tải được danh sách kế hoạch ký kết.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => list.refetch()}
|
||||
className="rounded-md border border-slate-300 px-2 py-1 text-[11px] font-semibold text-slate-600 transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
|
||||
>
|
||||
Thử lại
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{flatMode && !list.isLoading && !list.isError && items.length === 0 && (
|
||||
<div className="p-6 text-center text-sm text-slate-500">
|
||||
<span
|
||||
className="icon-chip mx-auto mb-2 flex"
|
||||
style={{ ['--chip-bg' as string]: '#f1f5f9', ['--chip-fg' as string]: '#94a3b8' }}
|
||||
aria-hidden
|
||||
>
|
||||
<Inbox className="h-4 w-4" />
|
||||
</span>
|
||||
{deletedView ? 'Không có phiếu đã xóa.' : 'Chưa có kế hoạch ký kết nào khớp bộ lọc.'}
|
||||
</div>
|
||||
)}
|
||||
{flatMode && items.length > 0 && (
|
||||
<ul className="divide-y divide-slate-100">
|
||||
{items.map(k => (
|
||||
<li key={k.id} className={cn(deletedView && 'opacity-70')}>
|
||||
<KhkkPlanCard
|
||||
plan={k}
|
||||
selected={selectedId === k.id}
|
||||
onSelect={deletedView ? () => { /* phiếu đã xóa: chỉ liệt kê, không mở */ } : onSelect}
|
||||
finalize={selectedId === k.id ? selectedFinalize : undefined}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{flatMode && totalPages > 1 && (
|
||||
<div className="flex shrink-0 items-center justify-between border-t border-slate-200 px-3 py-2 text-[11px]">
|
||||
<span className="text-slate-500">
|
||||
<FileCheck className="mr-1 inline h-3 w-3" />
|
||||
{total} kế hoạch — Trang {page} / {totalPages}
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onPageChange(Math.max(1, page - 1))}
|
||||
disabled={page <= 1}
|
||||
className="rounded border border-slate-300 px-2 py-0.5 text-slate-600 hover:bg-slate-50 disabled:opacity-40"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page >= totalPages}
|
||||
className="rounded border border-slate-300 px-2 py-0.5 text-slate-600 hover:bg-slate-50 disabled:opacity-40"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
726
fe-admin/src/components/khkk/KhkkWorkflowPanel.tsx
Normal file
726
fe-admin/src/components/khkk/KhkkWorkflowPanel.tsx
Normal file
@ -0,0 +1,726 @@
|
||||
// [S171 KHKK 3-panel] PANEL 3 (phải) — quy trình duyệt + lịch sử của "Kế hoạch ký kết HĐ".
|
||||
// DỜI từ thư mục trang KHKK (file cùng tên) sang `components/khkk/` (cùng lớp với
|
||||
// `components/pe/PeWorkflowPanel.tsx` của Duyệt NCC — panel dùng ở NHIỀU host thì không
|
||||
// thuộc về một trang). File MIRROR SHA256 identical với fe-admin counterpart.
|
||||
//
|
||||
// 🔴 Khối này là bản thứ 3 của cùng một hình (PE `PeDetailTabs.tsx:705-774` · HĐ
|
||||
// `components/contracts/WorkflowHistoryPanel.tsx`). Gộp được KHI VÀ CHỈ KHI BE 3 module
|
||||
// thống-nhất shape `status` precompute — trước đó gộp chỉ đẻ `if (module === …)`.
|
||||
//
|
||||
// 7 khối theo bố-cục đích (mirror Ảnh 2 của Duyệt NCC):
|
||||
// 1 "Quy trình duyệt" + meta {code} v{NN} · {name}
|
||||
// 2 Banner kết-thúc-sớm ("không qua CEO")
|
||||
// 3 Sơ đồ Bước → Cấp → NV (chip phòng · ⚑ Duyệt thay CEO · mờ nhánh không chạy · liệt-kê NV)
|
||||
// 4 Nút Duyệt / Trả lại / Từ chối + Dialog + nút Xóa phiếu
|
||||
// 5 📎 File đính kèm khi duyệt (upload THẬT — owner chốt QĐ-3)
|
||||
// 6 Lịch sử duyệt (N)
|
||||
// 7 Lịch sử thay đổi
|
||||
//
|
||||
// 🔴 KHÁC PE Ở CHỖ ĐẮT NHẤT: PE nhận `approvalFlow` đã có `status` Done/Current/Pending do
|
||||
// BE precompute. KHKK BE trả CÂY THÔ — panel này TỰ SUY từ cặp con-trỏ:
|
||||
// • `currentWorkflowStepIndex` = INDEX 0-based vào mảng `workflowSteps` (đã sort Order)
|
||||
// • `currentApprovalLevelOrder` = GIÁ TRỊ `level.order`
|
||||
// Luật so khớp OR-of-N canonical (BE `ContractSigningPlanFeatures.cs:259-260`):
|
||||
// `steps[idx].Levels.Any(l => l.Order == cur && l.ApproverUserId == uid)` — mirror bằng
|
||||
// `.some()` vì N Cấp CÙNG Order = OR-of-N, chỉ 1 người ký là tiến.
|
||||
//
|
||||
// [R-8] KHKK KHÔNG có phiếu V1-legacy ⇒ KHÔNG port nhánh fallback V1 của PE (code chết).
|
||||
// [ĐƠN-GIẢN-HOÁ CÓ CHỦ ĐÍCH] KHÔNG price-picker (KHKK chốt giá per-Line ở choke-point BE
|
||||
// `ApplyApprovedValuesOnFinalize`), KHÔNG badge "✎ NS PRO/CCM" (khái niệm riêng PE, Mig 50),
|
||||
// và đợt này giữ 1 return-mode (về Bước 1 · Cấp 1) — 4 mode của PE là món riêng, còn treo.
|
||||
// 🔴 [F-1 S166 · RATIFIED @S167] Ô-tích "Cấp này KẾT THÚC" = OPT-IN theo khuôn PE-LIVE S97
|
||||
// (`PeWorkflowPanel.tsx:61` useState(false)). Default KHÔNG tick ⇒ trình tiếp cấp sau.
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'sonner'
|
||||
import { Check, History, Paperclip, Send, Trash2, Undo2, Workflow, X } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Dialog } from '@/components/ui/Dialog'
|
||||
import { Label } from '@/components/ui/Label'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import { cn } from '@/lib/cn'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import {
|
||||
KHKK_CHANGELOG_ACTION_LABELS, KHKK_CHANGELOG_ENTITY_TYPE_LABELS,
|
||||
KHKK_PHASE_LABELS, KhkkApprovalDecision, KhkkAttachmentPurpose, KhkkPhase, KhkkTransitionAction,
|
||||
type KhkkApprovalDto, type KhkkAttachmentDto, type KhkkChangelogDto, type KhkkDetailDto,
|
||||
type KhkkPhaseValue, type KhkkTransitionActionValue, type KhkkTransitionInput,
|
||||
type KhkkTransitionResult, type KhkkWorkflowLevelDto,
|
||||
} from '@/types/khkk'
|
||||
|
||||
type NodeStatus = 'Done' | 'Current' | 'Pending'
|
||||
|
||||
function formatDateTime(iso: string): string {
|
||||
return new Date(iso).toLocaleString('vi-VN')
|
||||
}
|
||||
|
||||
function formatSize(b: number): string {
|
||||
return b > 1024 * 1024 ? `${(b / 1024 / 1024).toFixed(1)} MB` : `${Math.round(b / 1024)} KB`
|
||||
}
|
||||
|
||||
// Pattern 14 (Tailwind JIT): chuỗi class ĐẦY ĐỦ, KHÔNG nội suy mảnh (`bg-${x}-50` bị purge).
|
||||
const STATUS_DOT: Record<NodeStatus, string> = {
|
||||
Done: 'bg-emerald-500 text-white',
|
||||
Current: 'bg-brand-600 text-white',
|
||||
Pending: 'bg-slate-200 text-slate-500',
|
||||
}
|
||||
const STATUS_BOX: Record<NodeStatus, string> = {
|
||||
Done: 'border-emerald-200 bg-emerald-50/40',
|
||||
Current: 'border-brand-300 bg-brand-50/50',
|
||||
Pending: 'border-slate-200 bg-white',
|
||||
}
|
||||
const STATUS_ICON: Record<NodeStatus, string> = {
|
||||
Done: '✓',
|
||||
Current: '●',
|
||||
Pending: '○',
|
||||
}
|
||||
|
||||
const DECISION_LABEL: Record<number, string> = {
|
||||
0: 'Gửi duyệt',
|
||||
1: 'Duyệt',
|
||||
2: 'Trả lại / Từ chối',
|
||||
3: 'Tự động duyệt',
|
||||
}
|
||||
|
||||
export function KhkkWorkflowPanel({
|
||||
plan,
|
||||
onChanged,
|
||||
onDeleted,
|
||||
}: {
|
||||
plan: KhkkDetailDto
|
||||
/** gọi sau khi transition thành công — caller refetch detail/list theo id của nó. */
|
||||
onChanged?: () => void
|
||||
/** gọi sau khi XÓA phiếu — host 3-panel bỏ chọn, trang chi tiết quay về danh sách. */
|
||||
onDeleted?: () => void
|
||||
}) {
|
||||
const qc = useQueryClient()
|
||||
const { user } = useAuth()
|
||||
const [action, setAction] = useState<KhkkTransitionActionValue | null>(null)
|
||||
const [comment, setComment] = useState('')
|
||||
const [applyLevelFinalize, setApplyLevelFinalize] = useState(false)
|
||||
// [QĐ-3 / BE-7] File người duyệt đính kèm ngay trong dialog duyệt.
|
||||
const [pendingFiles, setPendingFiles] = useState<File[]>([])
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
|
||||
const phase = plan.phase as KhkkPhaseValue
|
||||
const steps = plan.workflowSteps ?? []
|
||||
const approvals = plan.approvals ?? []
|
||||
|
||||
const isWaiting = phase === KhkkPhase.ChoDuyet
|
||||
const isApproved = phase === KhkkPhase.DaDuyet
|
||||
const isDraftLike = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TraLai
|
||||
const canDeletePlan = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TuChoi
|
||||
|
||||
const curStepIdx = plan.currentWorkflowStepIndex
|
||||
const curLevelOrder = plan.currentApprovalLevelOrder
|
||||
|
||||
// Chữ ký thật: tra theo `approvalWorkflowLevelId` của các hàng ĐÃ DUYỆT trong lịch sử duyệt
|
||||
// (BE đã lọc `Pending`). Dùng nguồn này thay vì ý-kiến vì ý-kiến sống ở panel 2 (D-3).
|
||||
const signedByLevelId = useMemo(() => {
|
||||
const m = new Map<string, KhkkApprovalDto>()
|
||||
for (const a of approvals) {
|
||||
if (a.approvalWorkflowLevelId && a.decision !== KhkkApprovalDecision.Reject) {
|
||||
if (!m.has(a.approvalWorkflowLevelId)) m.set(a.approvalWorkflowLevelId, a)
|
||||
}
|
||||
}
|
||||
return m
|
||||
}, [approvals])
|
||||
|
||||
const stepStatus = (idx: number): NodeStatus => {
|
||||
if (isApproved) return 'Done'
|
||||
if (!isWaiting || curStepIdx == null) return 'Pending'
|
||||
if (idx < curStepIdx) return 'Done'
|
||||
if (idx === curStepIdx) return 'Current'
|
||||
return 'Pending'
|
||||
}
|
||||
|
||||
const levelStatus = (idx: number, order: number): NodeStatus => {
|
||||
const s = stepStatus(idx)
|
||||
if (s !== 'Current' || curLevelOrder == null) return s
|
||||
if (order < curLevelOrder) return 'Done'
|
||||
if (order === curLevelOrder) return 'Current'
|
||||
return 'Pending'
|
||||
}
|
||||
|
||||
// 🔴 OR-of-N: mọi Cấp CÙNG `order` trong Bước hiện tại đều là người được duyệt lượt này.
|
||||
const currentLevels: KhkkWorkflowLevelDto[] =
|
||||
isWaiting && curStepIdx != null && curStepIdx >= 0 && curStepIdx < steps.length && curLevelOrder != null
|
||||
? steps[curStepIdx].levels.filter(l => l.order === curLevelOrder)
|
||||
: []
|
||||
const currentStep = isWaiting && curStepIdx != null && curStepIdx >= 0 && curStepIdx < steps.length
|
||||
? steps[curStepIdx]
|
||||
: null
|
||||
|
||||
const isAdmin = user?.roles?.includes('Admin') ?? false
|
||||
const actorIsCurrentApprover = !!user?.id && currentLevels.some(l => l.approverUserId === user.id)
|
||||
const actorInLevel = isAdmin || actorIsCurrentApprover
|
||||
const blockedByLevel = isWaiting && !actorInLevel
|
||||
|
||||
// Ô-tích hiện theo cờ của ĐÚNG level BE sẽ chấm — mirror `ResolveActingLevel`
|
||||
// (`ContractSigningPlanWorkflowService.cs:455-469`): own-level TRƯỚC, Admin không có own
|
||||
// ⇒ level ĐẦU nhóm cùng-order. Soi cờ của level KHÁC là hiện ô-tích nói dối.
|
||||
const actingLevel = currentLevels.find(l => l.approverUserId === user?.id)
|
||||
?? (isAdmin ? currentLevels[0] : undefined)
|
||||
const approverFinalizeEligible = actingLevel?.allowApproverFinalize === true
|
||||
|
||||
// Nút "Gửi duyệt": guard THẬT ở BE (`CreatedBy ∨ DeptManager ∨ Admin`). FE KHÔNG suy được
|
||||
// vế DeptManager ⇒ CỐ Ý không ẩn nút theo vai (ẩn = giấu nút với đúng người có quyền, im
|
||||
// lặng — bug-class gotcha #44). Chỉ chặn ca chắc-chắn-hỏng: chưa pin quy trình.
|
||||
const canSubmit = isDraftLike && !!plan.approvalWorkflowId
|
||||
|
||||
const approvalFiles: KhkkAttachmentDto[] =
|
||||
(plan.attachments ?? []).filter(a => a.purpose === KhkkAttachmentPurpose.ApprovalAttachment)
|
||||
|
||||
// [BE-5] Lịch sử thay đổi — chỉ tải khi người dùng mở khối (không tốn 1 request/phiếu).
|
||||
const [showChangelog, setShowChangelog] = useState(false)
|
||||
const changelogs = useQuery({
|
||||
queryKey: ['khkk-changelogs', plan.id],
|
||||
queryFn: async () =>
|
||||
(await api.get<KhkkChangelogDto[]>(`/contract-signing-plans/${plan.id}/changelogs`, {
|
||||
params: { take: 200 },
|
||||
})).data,
|
||||
enabled: showChangelog,
|
||||
})
|
||||
|
||||
const transition = useMutation({
|
||||
mutationFn: async (a: KhkkTransitionActionValue) => {
|
||||
const body: KhkkTransitionInput = {
|
||||
action: a,
|
||||
comment: comment.trim() || null,
|
||||
...(a === KhkkTransitionAction.Approve
|
||||
? { applyLevelFinalize: approverFinalizeEligible ? applyLevelFinalize : true }
|
||||
: {}),
|
||||
}
|
||||
const res = await api.post<KhkkTransitionResult>(`/contract-signing-plans/${plan.id}/transitions`, body)
|
||||
// [QĐ-3] File đính kèm khi duyệt — upload SAU khi transition thành công (transition
|
||||
// hỏng thì không đẻ file mồ côi). BE tự ép `purpose=ApprovalAttachment`, FE KHÔNG gửi
|
||||
// số enum lên (hợp-đồng lane BE §5).
|
||||
for (const f of pendingFiles) {
|
||||
const fd = new FormData()
|
||||
fd.append('file', f)
|
||||
await api.post(`/contract-signing-plans/${plan.id}/approval-attachments`, fd, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
}
|
||||
return res.data
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
const label = KHKK_PHASE_LABELS[res.phase as KhkkPhaseValue] ?? `Phase ${res.phase}`
|
||||
toast.success(`Đã cập nhật — trạng thái: ${label}.`)
|
||||
setAction(null)
|
||||
setComment('')
|
||||
setPendingFiles([])
|
||||
qc.invalidateQueries({ queryKey: ['khkk-detail', plan.id] })
|
||||
qc.invalidateQueries({ queryKey: ['khkk-list'] })
|
||||
qc.invalidateQueries({ queryKey: ['khkk-changelogs', plan.id] })
|
||||
qc.invalidateQueries({ queryKey: ['pipeline-khkk-index'] })
|
||||
onChanged?.()
|
||||
},
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
const removePlan = useMutation({
|
||||
mutationFn: async () => api.delete(`/contract-signing-plans/${plan.id}`),
|
||||
onSuccess: () => {
|
||||
toast.success('Đã xóa kế hoạch')
|
||||
setConfirmDelete(false)
|
||||
qc.invalidateQueries({ queryKey: ['khkk-list'] })
|
||||
qc.invalidateQueries({ queryKey: ['pipeline-khkk-index'] })
|
||||
onDeleted?.()
|
||||
},
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
const dialogTitle =
|
||||
action === KhkkTransitionAction.Submit ? '➤ Gửi duyệt kế hoạch ký kết'
|
||||
: action === KhkkTransitionAction.Approve ? '✓ Duyệt kế hoạch ký kết'
|
||||
: action === KhkkTransitionAction.Return ? '← Trả lại người soạn sửa'
|
||||
: '✗ Từ chối kế hoạch ký kết'
|
||||
const commentRequired =
|
||||
action === KhkkTransitionAction.Return || action === KhkkTransitionAction.Reject
|
||||
const confirmDisabled = transition.isPending || (commentRequired && !comment.trim())
|
||||
|
||||
return (
|
||||
<section className="card-accent" style={{ ['--accent' as string]: 'var(--color-emerald-500)' }}>
|
||||
{/* ── 1. Header + meta {code} v{NN} · {name} ───────────────────────────── */}
|
||||
<header className="flex flex-wrap items-center gap-2 border-b border-slate-100 px-5 py-3">
|
||||
<span
|
||||
className="icon-chip"
|
||||
style={{ height: '1.75rem', width: '1.75rem', ['--chip-bg' as string]: 'var(--color-emerald-50)', ['--chip-fg' as string]: 'var(--color-emerald-600)' }}
|
||||
aria-hidden
|
||||
>
|
||||
<Workflow className="h-4 w-4" />
|
||||
</span>
|
||||
<h3 className="text-sm font-semibold tracking-tight text-emerald-700">Quy trình duyệt</h3>
|
||||
{plan.workflowCode && (
|
||||
<span className="font-mono text-[11px] text-slate-500">
|
||||
{plan.workflowCode}
|
||||
{plan.workflowVersion != null && ` v${plan.workflowVersion}`}
|
||||
{plan.workflowName && <span className="font-sans"> · {plan.workflowName}</span>}
|
||||
</span>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="space-y-4 p-5">
|
||||
{/* ── 2. Banner kết-thúc-sớm ──────────────────────────────────────────── */}
|
||||
{plan.endedByLevelFinalize && (
|
||||
<div className="rounded border border-violet-300 bg-violet-50 px-3 py-2 text-[11px] text-violet-800">
|
||||
<div className="font-medium">
|
||||
⚑ Kết thúc tại {plan.finalizeStepName ?? 'cấp được cấu hình'}
|
||||
{plan.finalizeLevelName ? ` · ${plan.finalizeLevelName}` : ''}
|
||||
</div>
|
||||
<div className="mt-0.5">
|
||||
{isApproved
|
||||
? 'Kế hoạch đã duyệt xong ngay tại cấp này — không qua CEO / Ban Giám đốc.'
|
||||
: 'Cấp này được cấu hình duyệt là KẾT THÚC — nếu người duyệt tích ô kết thúc thì kế hoạch không qua CEO.'}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 3. Sơ đồ Bước → Cấp → NV ───────────────────────────────────────── */}
|
||||
{steps.length > 0 ? (
|
||||
<ol className="space-y-2">
|
||||
{steps.map((step, idx) => {
|
||||
const st = stepStatus(idx)
|
||||
// Gom Cấp CÙNG `order` thành MỘT dòng — OR-of-N: N người, chỉ 1 chữ ký là tiến.
|
||||
const orders = [...new Set(step.levels.map(l => l.order))].sort((a, b) => a - b)
|
||||
return (
|
||||
<li key={step.id} className={cn('rounded-md border p-2', STATUS_BOX[st])}>
|
||||
<div className="flex flex-wrap items-center gap-1.5 text-xs font-medium">
|
||||
<span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded-full font-bold', STATUS_DOT[st])}>
|
||||
{STATUS_ICON[st]}
|
||||
</span>
|
||||
<span className="text-slate-800">Bước {step.order} — {step.name}</span>
|
||||
{/* Chip PHÒNG của Bước (BE-4 join `Departments`). */}
|
||||
{step.departmentName && (
|
||||
<span className="rounded border border-slate-300 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-600">
|
||||
{step.departmentName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{orders.length > 0 && (
|
||||
<ul className="ml-7 mt-1.5 space-y-1 border-l-2 border-violet-200 pl-2">
|
||||
{orders.map(order => {
|
||||
const group = step.levels.filter(l => l.order === order)
|
||||
const signedRows = group.map(l => signedByLevelId.get(l.id)).filter(Boolean) as KhkkApprovalDto[]
|
||||
const hasSigned = signedRows.length > 0
|
||||
const finalizeHere = group.some(l => l.allowApproverFinalize)
|
||||
// Nhánh KHÔNG CHẠY: phiếu đã duyệt bằng đường kết-thúc-sớm ⇒ các cấp
|
||||
// sau đó không ai ký. Vẽ MỜ + trạng thái ○ thay vì bịa ✓ cho cả cây.
|
||||
const skipped = isApproved && plan.endedByLevelFinalize && !hasSigned
|
||||
const ls: NodeStatus = skipped ? 'Pending' : levelStatus(idx, order)
|
||||
return (
|
||||
<li key={`${step.id}-${order}`} className={cn('text-[11px]', skipped && 'opacity-50')}>
|
||||
<div className="flex items-start gap-1.5">
|
||||
<span className={cn('mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[9px] font-bold', STATUS_DOT[ls])}>
|
||||
{STATUS_ICON[ls]}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium text-slate-700">
|
||||
{group[0]?.name || `Cấp ${order}`}
|
||||
{ls === 'Current' && <span className="ml-1.5 text-[10px] font-normal text-brand-700">đang chờ</span>}
|
||||
{ls === 'Done' && <span className="ml-1.5 text-[10px] font-normal text-emerald-600">đã duyệt</span>}
|
||||
{skipped && <span className="ml-1.5 text-[10px] font-normal text-slate-500">không phải qua</span>}
|
||||
{finalizeHere && (
|
||||
<span
|
||||
className="ml-1.5 inline-flex items-center rounded bg-violet-100 px-1.5 py-0.5 text-[9px] font-semibold text-violet-800"
|
||||
title="Cấp này duyệt là KẾT THÚC quy trình — duyệt THAY CEO, không trình lên Ban Giám đốc"
|
||||
>
|
||||
⚑ Duyệt thay CEO
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* [F-3] Liệt-kê NV của cấp: người ĐÃ KÝ in đậm, NV cùng cấp còn
|
||||
lại `/ Tên` mờ — mirror `PeWorkflowPanel.tsx:453-465`. */}
|
||||
<div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-slate-500">
|
||||
{group.length === 0
|
||||
? '(chưa cấu hình)'
|
||||
: group.map((l, i) => {
|
||||
const sign = signedByLevelId.get(l.id)
|
||||
return (
|
||||
<span key={l.id} className="inline-flex items-center gap-1">
|
||||
{i > 0 && <span className="text-slate-300">/</span>}
|
||||
<span className={cn(sign ? 'font-semibold text-slate-800' : 'text-slate-400')}>
|
||||
{l.approverFullName ?? '(chưa cấu hình)'}
|
||||
</span>
|
||||
{sign && (
|
||||
<span className="text-[10px] text-emerald-600">✓ {formatDateTime(sign.approvedAt)}</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ol>
|
||||
) : (
|
||||
<div className="rounded border border-slate-200 bg-slate-50 px-3 py-2 text-[11px] text-slate-600">
|
||||
Quy trình duyệt chưa cấu hình Bước/Cấp — liên hệ Admin để dựng quy trình loại
|
||||
“Kế hoạch ký kết HĐ” trước khi trình duyệt.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Banner "đến lượt bạn" — khuôn PeWorkflowPanel:489-508. */}
|
||||
{isWaiting && currentStep && (
|
||||
<div className={cn(
|
||||
'rounded border px-3 py-2 text-[11px]',
|
||||
actorInLevel ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-amber-300 bg-amber-50 text-amber-800',
|
||||
)}>
|
||||
<div className="font-medium">
|
||||
Đang chờ Bước {currentStep.order} ({currentStep.name}) — Cấp {curLevelOrder}
|
||||
</div>
|
||||
<div className="mt-0.5">
|
||||
Người duyệt: {currentLevels.map(l => l.approverFullName ?? '(chưa rõ)').join(' / ') || '(chưa có)'}
|
||||
</div>
|
||||
{actorInLevel
|
||||
? <div className="mt-0.5 font-medium">✓ Đến lượt bạn duyệt</div>
|
||||
: <div className="mt-0.5">⚠ Không phải lượt bạn — chỉ người trên mới thao tác cấp này</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === KhkkPhase.TraLai && (
|
||||
<div className="rounded border border-orange-300 bg-orange-50 px-3 py-2 text-[11px] text-orange-800">
|
||||
⚠ Kế hoạch bị TRẢ LẠI — sửa nội dung rồi bấm “Gửi duyệt”, quy trình chạy lại từ Bước 1 · Cấp 1.
|
||||
</div>
|
||||
)}
|
||||
{phase === KhkkPhase.TuChoi && (
|
||||
<div className="rounded border border-red-300 bg-red-50 px-3 py-2 text-[11px] text-red-800">
|
||||
✗ Kế hoạch đã bị TỪ CHỐI — không thao tác được nữa. Lập kế hoạch mới nếu cần làm lại.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 4. Hành động + nút Xóa ─────────────────────────────────────────── */}
|
||||
{(canSubmit || isWaiting || canDeletePlan) && (
|
||||
<div>
|
||||
<Label className="text-xs">Hành động:</Label>
|
||||
<div className="mt-1 flex flex-wrap gap-1.5">
|
||||
{canSubmit && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setComment(''); setPendingFiles([]); setAction(KhkkTransitionAction.Submit) }}
|
||||
className="inline-flex items-center gap-1 rounded border border-brand-300 px-2 py-1 text-[11px] font-bold text-brand-700 transition hover:bg-brand-50"
|
||||
>
|
||||
<Send className="h-3 w-3" /> Gửi duyệt
|
||||
</button>
|
||||
)}
|
||||
{isDraftLike && !plan.approvalWorkflowId && (
|
||||
<span className="rounded border border-dashed border-slate-300 px-2 py-1 text-[11px] text-slate-500">
|
||||
Chưa pin quy trình duyệt — không gửi duyệt được.
|
||||
</span>
|
||||
)}
|
||||
{isWaiting && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
disabled={blockedByLevel}
|
||||
onClick={() => {
|
||||
if (!blockedByLevel) {
|
||||
setComment('')
|
||||
setPendingFiles([])
|
||||
// reset về default KHÔNG-tick (opt-IN, khuôn PE S97) mỗi lần mở dialog.
|
||||
setApplyLevelFinalize(false)
|
||||
setAction(KhkkTransitionAction.Approve)
|
||||
}
|
||||
}}
|
||||
title={blockedByLevel ? 'Cấp hiện tại chỉ người được phân công mới thao tác được.' : 'Duyệt cấp hiện tại'}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded border px-2 py-1 text-[11px] font-bold transition',
|
||||
blockedByLevel ? 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400' : 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
|
||||
)}
|
||||
>
|
||||
<Check className="h-3 w-3" /> Duyệt
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={blockedByLevel}
|
||||
onClick={() => { if (!blockedByLevel) { setComment(''); setPendingFiles([]); setAction(KhkkTransitionAction.Return) } }}
|
||||
title={blockedByLevel ? 'Cấp hiện tại chỉ người được phân công mới thao tác được.' : 'Trả lại người soạn sửa'}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded border px-2 py-1 text-[11px] font-bold transition',
|
||||
blockedByLevel ? 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400' : 'border-amber-300 text-amber-700 hover:bg-amber-50',
|
||||
)}
|
||||
>
|
||||
<Undo2 className="h-3 w-3" /> Trả lại
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={blockedByLevel}
|
||||
onClick={() => { if (!blockedByLevel) { setComment(''); setPendingFiles([]); setAction(KhkkTransitionAction.Reject) } }}
|
||||
title={blockedByLevel ? 'Cấp hiện tại chỉ người được phân công mới thao tác được.' : 'Từ chối kế hoạch (khoá phiếu)'}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded border px-2 py-1 text-[11px] font-bold transition',
|
||||
blockedByLevel ? 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400' : 'border-red-300 text-red-700 hover:bg-red-50',
|
||||
)}
|
||||
>
|
||||
<X className="h-3 w-3" /> Từ chối
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{canDeletePlan && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
className="inline-flex items-center gap-1 rounded border border-slate-300 px-2 py-1 text-[11px] font-bold text-slate-600 transition hover:border-red-300 hover:bg-red-50 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" /> Xóa phiếu
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 5. 📎 File đính kèm khi duyệt — TỰ ẨN khi rỗng (khuôn PE :928-967) ── */}
|
||||
{approvalFiles.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 text-xs font-semibold text-slate-700">
|
||||
<Paperclip className="h-3.5 w-3.5 text-teal-500" />
|
||||
File đính kèm khi duyệt
|
||||
<span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-slate-500">
|
||||
{approvalFiles.length}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="mt-1.5 space-y-1.5">
|
||||
{approvalFiles.map(a => (
|
||||
<li key={a.id} className="flex items-center justify-between gap-2 rounded border border-slate-200 bg-slate-50/60 px-2.5 py-1.5 text-[11px]">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium text-slate-700">{a.fileName}</div>
|
||||
<div className="text-slate-500">{formatSize(a.fileSize)} · {formatDateTime(a.createdAt)}</div>
|
||||
</div>
|
||||
<a
|
||||
href={`/api/contract-signing-plans/${plan.id}/attachments/${a.id}/download`}
|
||||
className="shrink-0 text-[11px] font-medium text-brand-600 hover:underline"
|
||||
>
|
||||
Tải xuống
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 6. Lịch sử duyệt (N) ───────────────────────────────────────────── */}
|
||||
{/* [B4/D-11] BE ĐÃ LỌC hàng `decision = Pending` (hành-vi GỬI duyệt) ⇒ số (N) ở đây
|
||||
CÙNG NGHĨA với (N) của Duyệt NCC. FE KHÔNG dedupe lại; sự kiện "Gửi duyệt" vẫn
|
||||
còn nguyên ở "Lịch sử thay đổi" bên dưới. */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 text-xs font-semibold text-slate-700">
|
||||
<Check className="h-3.5 w-3.5 text-emerald-500" />
|
||||
Lịch sử duyệt
|
||||
<span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-slate-500">
|
||||
{approvals.length}
|
||||
</span>
|
||||
</div>
|
||||
{approvals.length === 0 ? (
|
||||
<p className="mt-1.5 text-[11px] italic text-slate-400">Chưa có lượt duyệt nào.</p>
|
||||
) : (
|
||||
<ul className="mt-1.5 space-y-1.5">
|
||||
{approvals.map(a => (
|
||||
<li key={a.id} className="rounded border border-slate-200 bg-slate-50/60 px-2.5 py-1.5 text-[11px]">
|
||||
<div className="flex flex-wrap items-center gap-x-1.5 text-slate-700">
|
||||
<span className={cn(
|
||||
'rounded px-1.5 py-0.5 text-[9px] font-semibold',
|
||||
a.decision === KhkkApprovalDecision.Reject ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800',
|
||||
)}>
|
||||
{DECISION_LABEL[a.decision] ?? 'Chuyển trạng thái'}
|
||||
</span>
|
||||
<span className="font-medium">{a.approvedByFullName ?? '(hệ thống)'}</span>
|
||||
<span className="text-slate-400">·</span>
|
||||
<span className="text-slate-500">{formatDateTime(a.approvedAt)}</span>
|
||||
</div>
|
||||
<div className="mt-0.5 text-slate-600">
|
||||
{a.stepName ? `Bước ${a.stepOrder} — ${a.stepName}` : 'Cấp duyệt'}
|
||||
{a.levelOrder != null && ` · Cấp ${a.levelOrder}`}
|
||||
{a.levelName ? ` (${a.levelName})` : ''}
|
||||
<span className="text-slate-400">
|
||||
{' '}· {KHKK_PHASE_LABELS[a.fromPhase]} → {KHKK_PHASE_LABELS[a.toPhase]}
|
||||
</span>
|
||||
</div>
|
||||
{a.comment?.trim() && (
|
||||
<div className="mt-0.5 whitespace-pre-wrap text-slate-600">{a.comment}</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 7. Lịch sử thay đổi ────────────────────────────────────────────── */}
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowChangelog(v => !v)}
|
||||
className="flex w-full items-center gap-1.5 text-xs font-semibold text-slate-700 hover:text-brand-700"
|
||||
>
|
||||
<History className="h-3.5 w-3.5 text-slate-400" />
|
||||
Lịch sử thay đổi
|
||||
<span className="ml-auto text-[10px] font-normal text-slate-400">{showChangelog ? 'Ẩn' : 'Xem'}</span>
|
||||
</button>
|
||||
{showChangelog && (
|
||||
<div className="mt-1.5">
|
||||
{changelogs.isLoading && <p className="text-[11px] text-slate-400">Đang tải…</p>}
|
||||
{changelogs.isError && <p className="text-[11px] text-red-600">Không tải được lịch sử thay đổi.</p>}
|
||||
{changelogs.data && changelogs.data.length === 0 && (
|
||||
<p className="text-[11px] italic text-slate-400">Chưa có thay đổi nào được ghi.</p>
|
||||
)}
|
||||
<ul className="space-y-1">
|
||||
{(changelogs.data ?? []).map(c => (
|
||||
<li key={c.id} className="rounded border border-slate-100 bg-white px-2.5 py-1.5 text-[11px]">
|
||||
<div className="flex flex-wrap items-center gap-x-1.5 text-slate-600">
|
||||
<span className="font-medium text-slate-700">
|
||||
{KHKK_CHANGELOG_ACTION_LABELS[c.action] ?? 'Thay đổi'}
|
||||
</span>
|
||||
<span className="text-slate-400">·</span>
|
||||
<span>{KHKK_CHANGELOG_ENTITY_TYPE_LABELS[c.entityType] ?? 'Khác'}</span>
|
||||
<span className="text-slate-400">·</span>
|
||||
<span>{c.userName ?? '(hệ thống)'}</span>
|
||||
<span className="text-slate-400">·</span>
|
||||
<span className="text-slate-500">{formatDateTime(c.createdAt)}</span>
|
||||
</div>
|
||||
{(c.summary || c.contextNote) && (
|
||||
<div className="mt-0.5 whitespace-pre-wrap text-slate-600">
|
||||
{c.summary}
|
||||
{c.contextNote ? ` — ${c.contextNote}` : ''}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{action !== null && (
|
||||
<Dialog
|
||||
open
|
||||
onClose={() => setAction(null)}
|
||||
title={dialogTitle}
|
||||
footer={<>
|
||||
<Button variant="outline" onClick={() => setAction(null)}>Huỷ</Button>
|
||||
<Button onClick={() => transition.mutate(action)} disabled={confirmDisabled}>
|
||||
{transition.isPending ? 'Đang gửi...' : 'Xác nhận'}
|
||||
</Button>
|
||||
</>}
|
||||
>
|
||||
{action === KhkkTransitionAction.Submit && (
|
||||
<div className="mb-3 rounded border border-brand-200 bg-brand-50 px-3 py-2 text-[11px] text-brand-800">
|
||||
Kế hoạch chuyển sang “Chờ duyệt” và trình lên Bước 1 · Cấp 1 của quy trình
|
||||
{plan.workflowName ? ` "${plan.workflowName}"` : ''}. Sau khi trình, nội dung nháp không sửa được nữa.
|
||||
</div>
|
||||
)}
|
||||
{action === KhkkTransitionAction.Return && (
|
||||
<div className="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] text-amber-800">
|
||||
Kế hoạch về trạng thái “Trả lại”. Người soạn sửa xong gửi lại thì quy trình chạy
|
||||
từ Bước 1 · Cấp 1.
|
||||
</div>
|
||||
)}
|
||||
{action === KhkkTransitionAction.Reject && (
|
||||
<div className="mb-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-[11px] text-red-800">
|
||||
⚠ Kế hoạch bị khoá hoàn toàn (không sửa / không duyệt tiếp). Người soạn phải lập kế hoạch mới.
|
||||
</div>
|
||||
)}
|
||||
{action === KhkkTransitionAction.Approve && approverFinalizeEligible && (
|
||||
<div className="mb-3 rounded border border-emerald-300 bg-emerald-50 px-3 py-2 text-[12px] text-emerald-800">
|
||||
<label className="flex cursor-pointer items-start gap-2">
|
||||
<input type="checkbox" className="mt-0.5" checked={applyLevelFinalize} onChange={e => setApplyLevelFinalize(e.target.checked)} />
|
||||
<span>
|
||||
<span className="font-medium">Cấp này KẾT THÚC quy trình</span>
|
||||
<span className="mt-0.5 block text-[11px] text-emerald-700/80">
|
||||
{applyLevelFinalize
|
||||
? 'Đã tích — duyệt xong là kế hoạch "Đã duyệt", KẾT THÚC tại cấp này, KHÔNG trình tiếp cấp sau.'
|
||||
: 'Mặc định: duyệt xong kế hoạch TRÌNH TIẾP lên cấp sau của quy trình. TÍCH vào nếu muốn KẾT THÚC ngay tại cấp này.'}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<Label>
|
||||
Ý kiến{commentRequired ? <span className="text-red-500"> *</span> : ' (tuỳ chọn)'}
|
||||
</Label>
|
||||
<Textarea
|
||||
value={comment}
|
||||
onChange={e => setComment(e.target.value)}
|
||||
rows={3}
|
||||
maxLength={2000}
|
||||
placeholder={commentRequired ? 'Nêu lý do trả lại / từ chối...' : 'Ý kiến của bạn (ghi vào phiếu)...'}
|
||||
/>
|
||||
|
||||
{/* [QĐ-3 / BE-7] File đính kèm khi duyệt — upload THẬT qua đường riêng
|
||||
`POST {id}/approval-attachments` (BE ép `purpose=ApprovalAttachment`). */}
|
||||
{action !== KhkkTransitionAction.Submit && (
|
||||
<div className="mt-3">
|
||||
<Label className="text-xs">File đính kèm (tuỳ chọn)</Label>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
setPendingFiles(Array.from(e.target.files ?? []))
|
||||
e.target.value = ''
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="inline-flex items-center gap-1 rounded border border-slate-300 px-2 py-1 text-[11px] font-medium text-slate-700 hover:bg-slate-50"
|
||||
>
|
||||
<Paperclip className="h-3 w-3" /> Chọn file
|
||||
</button>
|
||||
{pendingFiles.length === 0
|
||||
? <span className="text-[11px] text-slate-400">Chưa chọn file nào</span>
|
||||
: (
|
||||
<span className="text-[11px] text-slate-600">
|
||||
{pendingFiles.map(f => f.name).join(', ')}
|
||||
<button type="button" onClick={() => setPendingFiles([])} className="ml-2 text-red-600 underline">bỏ chọn</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-1 text-[11px] text-slate-500">
|
||||
File được tải lên SAU khi thao tác duyệt thành công và hiện ở mục “File đính kèm khi duyệt”.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{action === KhkkTransitionAction.Approve && (
|
||||
<p className="mt-1 text-[11px] text-slate-500">
|
||||
Ý kiến sẽ được ghi vào mục “Ý kiến cấp duyệt” của kế hoạch (1 ô/Cấp — duyệt lại
|
||||
thì ghi đè ô cũ).
|
||||
</p>
|
||||
)}
|
||||
</Dialog>
|
||||
)}
|
||||
|
||||
{confirmDelete && (
|
||||
<Dialog
|
||||
open
|
||||
onClose={() => setConfirmDelete(false)}
|
||||
title="🗑 Xóa kế hoạch ký kết"
|
||||
footer={<>
|
||||
<Button variant="outline" onClick={() => setConfirmDelete(false)}>Huỷ</Button>
|
||||
<Button onClick={() => removePlan.mutate()} disabled={removePlan.isPending}>
|
||||
{removePlan.isPending ? 'Đang xóa...' : 'Xóa phiếu'}
|
||||
</Button>
|
||||
</>}
|
||||
>
|
||||
<div className="rounded border border-red-200 bg-red-50 px-3 py-2 text-[12px] text-red-800">
|
||||
Phiếu <span className="font-mono font-semibold">{plan.maKeHoach ?? '(chưa cấp mã)'}</span> sẽ bị
|
||||
xóa mềm: biến khỏi danh sách và khỏi cây toàn trình, chỉ còn xem được ở mục “Đã xóa”.
|
||||
</div>
|
||||
</Dialog>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user