[CLAUDE] FE: PE ngan sach Block A -> bang luoi <table> vien o giong Excel (anh phan hoi)
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m46s
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m46s
Anh: "giao dien van chua chia cot dung, muon giong file Excel". Block A dang dung flex + spacing (khong co vien doc chia cot) -> chuyen sang <table border-collapse> vien o day du: header [Khoan muc | Du an | PRO | CCM] + 5 hang (full / ban hanh / hieu chinh / ghi chu PRO / ghi chu CCM). BudgetCell xep doc (input full o + nut Luu duoi) cho vua cot. BudgetNoteRow -> BudgetNoteCell (td colSpan=3). Mirror fe-user/fe-admin identical. FE-only, build 2 app PASS. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
@ -1084,36 +1084,40 @@ function BudgetCell({ value, editable, allowNegative = false, saving, onSave }:
|
|||||||
}
|
}
|
||||||
const dirty = parse() !== value
|
const dirty = parse() !== value
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-end gap-1">
|
<div className="space-y-1">
|
||||||
{allowNegative && (
|
<div className="flex items-center gap-1">
|
||||||
<button
|
{allowNegative && (
|
||||||
type="button"
|
<button
|
||||||
onClick={() => setNeg(v => !v)}
|
type="button"
|
||||||
className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
|
onClick={() => setNeg(v => !v)}
|
||||||
neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
|
className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
|
||||||
title="Đảo dấu âm/dương"
|
neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
|
||||||
>
|
title="Đảo dấu âm/dương"
|
||||||
{neg ? '−' : '+'}
|
>
|
||||||
</button>
|
{neg ? '−' : '+'}
|
||||||
)}
|
</button>
|
||||||
<Input
|
)}
|
||||||
type="text"
|
<Input
|
||||||
inputMode="numeric"
|
type="text"
|
||||||
value={text}
|
inputMode="numeric"
|
||||||
onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
|
value={text}
|
||||||
placeholder="0"
|
onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
|
||||||
className="h-7 min-w-0 px-1.5 text-right font-mono text-[12px]"
|
placeholder="0"
|
||||||
/>
|
className="h-7 min-w-0 flex-1 px-1.5 text-right font-mono text-[12px]"
|
||||||
<Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-7 shrink-0 px-2 text-[11px]">
|
/>
|
||||||
{saving ? '…' : 'Lưu'}
|
</div>
|
||||||
</Button>
|
<div className="flex justify-end">
|
||||||
|
<Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-6 px-2 text-[10px]">
|
||||||
|
{saving ? '…' : 'Lưu'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// [S76] Dòng ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
|
// [S76] Ô ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
|
||||||
function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, onSave }: {
|
// Đặt trong <td colSpan> của bảng ngân sách (không bọc row riêng).
|
||||||
label: string
|
function BudgetNoteCell({ editable, value, setValue, savedValue, saving, onSave }: {
|
||||||
editable: boolean
|
editable: boolean
|
||||||
value: string
|
value: string
|
||||||
setValue: (v: string) => void
|
setValue: (v: string) => void
|
||||||
@ -1121,30 +1125,26 @@ function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, o
|
|||||||
saving: boolean
|
saving: boolean
|
||||||
onSave: () => void
|
onSave: () => void
|
||||||
}) {
|
}) {
|
||||||
|
if (!editable) {
|
||||||
|
return (
|
||||||
|
<div className="whitespace-pre-wrap px-2 py-1.5 text-[12px] text-slate-600">
|
||||||
|
{savedValue || <span className="text-slate-400">—</span>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="flex items-start gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
|
<div className="space-y-1 px-2 py-1.5">
|
||||||
<div className="min-w-0 flex-1 text-slate-700">{label}</div>
|
<textarea
|
||||||
<div className="w-72 shrink-0">
|
value={value}
|
||||||
{editable ? (
|
onChange={e => setValue(e.target.value)}
|
||||||
<div className="space-y-1">
|
placeholder="Ghi chú…"
|
||||||
<textarea
|
rows={2}
|
||||||
value={value}
|
className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
|
||||||
onChange={e => setValue(e.target.value)}
|
/>
|
||||||
placeholder="Ghi chú…"
|
<div className="flex justify-end">
|
||||||
rows={2}
|
<Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
|
||||||
className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
|
{saving ? '…' : 'Lưu ghi chú'}
|
||||||
/>
|
</Button>
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
|
|
||||||
{saving ? '…' : 'Lưu ghi chú'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="whitespace-pre-wrap text-right text-[12px] text-slate-600">
|
|
||||||
{savedValue || <span className="text-slate-400">—</span>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -1252,98 +1252,111 @@ function PeBudgetSummaryTable({ ev, readOnly }: { ev: PeDetailBundle; readOnly:
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ===== Block A — NGÂN SÁCH gói thầu: MA TRẬN 3 cột (DỰ ÁN | PRO | CCM) =====
|
{/* ===== Block A — NGÂN SÁCH gói thầu: BẢNG LƯỚI 3 cột (DỰ ÁN | PRO | CCM) =====
|
||||||
[S76 anh Kiệt FDC] Mỗi phòng nhập+điều chỉnh cột của CHÍNH mình (role-gate):
|
[S76 anh Kiệt FDC] <table> viền ô đầy đủ giống file Excel. Mỗi phòng nhập+điều
|
||||||
PRO→cột PRO (canEditPro) · CCM→cột CCM (canEditCcm) · DỰ ÁN hiển thị-only
|
chỉnh cột CHÍNH mình (role-gate): PRO→cột PRO (canEditPro) · CCM→cột CCM
|
||||||
(chưa wire BE — sau có người dự án nhập). Full mỗi cột = ban hành + hiệu chỉnh. */}
|
(canEditCcm) · DỰ ÁN hiển-thị-only (—, sau có người dự án nhập). Full mỗi cột
|
||||||
|
= ban hành + hiệu chỉnh. */}
|
||||||
<BudgetBlockHeader>A. Ngân sách (gói thầu / gói vật tư)</BudgetBlockHeader>
|
<BudgetBlockHeader>A. Ngân sách (gói thầu / gói vật tư)</BudgetBlockHeader>
|
||||||
|
|
||||||
{/* Header 3 cột */}
|
<div className="overflow-x-auto">
|
||||||
<div className="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
|
<table className="w-full border-collapse text-[13px]">
|
||||||
<div className="min-w-0 flex-1" />
|
<thead>
|
||||||
<div className="w-36 shrink-0 text-center">Dự án</div>
|
<tr className="bg-slate-100 text-[11px] font-semibold uppercase tracking-wide text-slate-600">
|
||||||
<div className="w-36 shrink-0 text-center">PRO</div>
|
<th className="border border-slate-300 px-3 py-1.5 text-left">Khoản mục</th>
|
||||||
<div className="w-36 shrink-0 text-center">CCM</div>
|
<th className="w-20 border border-slate-300 px-2 py-1.5 text-center">Dự án</th>
|
||||||
|
<th className="w-40 border border-slate-300 px-2 py-1.5 text-center">PRO</th>
|
||||||
|
<th className="w-40 border border-slate-300 px-2 py-1.5 text-center">CCM</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{/* Ngân sách full (= ban hành + hiệu chỉnh) mỗi cột */}
|
||||||
|
<tr className="bg-[#1F7DC1]/10 font-semibold">
|
||||||
|
<td className="border border-slate-300 px-3 py-2 text-slate-800">Ngân sách (full gói thầu / gói vật tư)</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-2 text-right text-slate-300">—</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
|
||||||
|
{proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
|
||||||
|
</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
|
||||||
|
{ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Ban hành lần đầu */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách Ban hành lần đầu</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.proInitialAmount}
|
||||||
|
editable={bs.canEditPro}
|
||||||
|
saving={proMut.isPending || peFetching}
|
||||||
|
onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.initialAmount}
|
||||||
|
editable={bs.canEditCcm}
|
||||||
|
saving={ccmMut.isPending || peFetching}
|
||||||
|
onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* V0 / hiệu chỉnh tăng giảm (cho phép ÂM) */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.proAdjustmentAmount}
|
||||||
|
editable={bs.canEditPro}
|
||||||
|
allowNegative
|
||||||
|
saving={proMut.isPending || peFetching}
|
||||||
|
onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.adjustmentAmount}
|
||||||
|
editable={bs.canEditCcm}
|
||||||
|
allowNegative
|
||||||
|
saving={ccmMut.isPending || peFetching}
|
||||||
|
onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Ghi chú từ PRO (span 3 cột giá trị) */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ PRO</td>
|
||||||
|
<td className="border border-slate-300" colSpan={3}>
|
||||||
|
<BudgetNoteCell
|
||||||
|
editable={bs.canEditPro}
|
||||||
|
value={proNoteText}
|
||||||
|
setValue={setProNoteText}
|
||||||
|
savedValue={bs.proNote}
|
||||||
|
saving={proMut.isPending || peFetching}
|
||||||
|
onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Ghi chú từ CCM (span 3 cột giá trị) */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ CCM</td>
|
||||||
|
<td className="border border-slate-300" colSpan={3}>
|
||||||
|
<BudgetNoteCell
|
||||||
|
editable={bs.canEditCcm}
|
||||||
|
value={ccmNoteText}
|
||||||
|
setValue={setCcmNoteText}
|
||||||
|
savedValue={bs.ccmNote}
|
||||||
|
saving={ccmMut.isPending || peFetching}
|
||||||
|
onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dòng 1 — Ngân sách (full gói thầu) per cột = ban hành + hiệu chỉnh — brand-soft */}
|
|
||||||
<div className="flex items-center gap-2 border-b border-slate-100 bg-[#1F7DC1]/10 px-3 py-2 text-[13px]">
|
|
||||||
<div className="min-w-0 flex-1 font-semibold text-slate-800">Ngân sách (full gói thầu / gói vật tư)</div>
|
|
||||||
<div className="w-36 shrink-0 text-right text-slate-300">—</div>
|
|
||||||
<div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
|
|
||||||
{proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
|
|
||||||
</div>
|
|
||||||
<div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
|
|
||||||
{ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dòng 2 — Ban hành lần đầu: Dự án (—) | PRO (canEditPro) | CCM (canEditCcm) */}
|
|
||||||
<div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
|
|
||||||
<div className="min-w-0 flex-1 text-slate-700">Ngân sách Ban hành lần đầu</div>
|
|
||||||
<div className="w-36 shrink-0 text-right text-slate-300">—</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.proInitialAmount}
|
|
||||||
editable={bs.canEditPro}
|
|
||||||
saving={proMut.isPending || peFetching}
|
|
||||||
onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.initialAmount}
|
|
||||||
editable={bs.canEditCcm}
|
|
||||||
saving={ccmMut.isPending || peFetching}
|
|
||||||
onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dòng 3 — V0 / hiệu chỉnh tăng giảm (cho phép ÂM): Dự án (—) | PRO | CCM */}
|
|
||||||
<div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
|
|
||||||
<div className="min-w-0 flex-1 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</div>
|
|
||||||
<div className="w-36 shrink-0 text-right text-slate-300">—</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.proAdjustmentAmount}
|
|
||||||
editable={bs.canEditPro}
|
|
||||||
allowNegative
|
|
||||||
saving={proMut.isPending || peFetching}
|
|
||||||
onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.adjustmentAmount}
|
|
||||||
editable={bs.canEditCcm}
|
|
||||||
allowNegative
|
|
||||||
saving={ccmMut.isPending || peFetching}
|
|
||||||
onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Ghi chú từ PRO + từ CCM (cuối block A, đúng thứ tự Excel anh Kiệt) */}
|
|
||||||
<BudgetNoteRow
|
|
||||||
label="Ghi chú từ PRO"
|
|
||||||
editable={bs.canEditPro}
|
|
||||||
value={proNoteText}
|
|
||||||
setValue={setProNoteText}
|
|
||||||
savedValue={bs.proNote}
|
|
||||||
saving={proMut.isPending || peFetching}
|
|
||||||
onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
|
|
||||||
/>
|
|
||||||
<BudgetNoteRow
|
|
||||||
label="Ghi chú từ CCM"
|
|
||||||
editable={bs.canEditCcm}
|
|
||||||
value={ccmNoteText}
|
|
||||||
setValue={setCcmNoteText}
|
|
||||||
savedValue={bs.ccmNote}
|
|
||||||
saving={ccmMut.isPending || peFetching}
|
|
||||||
onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* ===== Block B — THỰC HIỆN ===== */}
|
{/* ===== Block B — THỰC HIỆN ===== */}
|
||||||
<BudgetBlockHeader>B. Thực hiện</BudgetBlockHeader>
|
<BudgetBlockHeader>B. Thực hiện</BudgetBlockHeader>
|
||||||
|
|
||||||
|
|||||||
@ -1084,36 +1084,40 @@ function BudgetCell({ value, editable, allowNegative = false, saving, onSave }:
|
|||||||
}
|
}
|
||||||
const dirty = parse() !== value
|
const dirty = parse() !== value
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-end gap-1">
|
<div className="space-y-1">
|
||||||
{allowNegative && (
|
<div className="flex items-center gap-1">
|
||||||
<button
|
{allowNegative && (
|
||||||
type="button"
|
<button
|
||||||
onClick={() => setNeg(v => !v)}
|
type="button"
|
||||||
className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
|
onClick={() => setNeg(v => !v)}
|
||||||
neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
|
className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
|
||||||
title="Đảo dấu âm/dương"
|
neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
|
||||||
>
|
title="Đảo dấu âm/dương"
|
||||||
{neg ? '−' : '+'}
|
>
|
||||||
</button>
|
{neg ? '−' : '+'}
|
||||||
)}
|
</button>
|
||||||
<Input
|
)}
|
||||||
type="text"
|
<Input
|
||||||
inputMode="numeric"
|
type="text"
|
||||||
value={text}
|
inputMode="numeric"
|
||||||
onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
|
value={text}
|
||||||
placeholder="0"
|
onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
|
||||||
className="h-7 min-w-0 px-1.5 text-right font-mono text-[12px]"
|
placeholder="0"
|
||||||
/>
|
className="h-7 min-w-0 flex-1 px-1.5 text-right font-mono text-[12px]"
|
||||||
<Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-7 shrink-0 px-2 text-[11px]">
|
/>
|
||||||
{saving ? '…' : 'Lưu'}
|
</div>
|
||||||
</Button>
|
<div className="flex justify-end">
|
||||||
|
<Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-6 px-2 text-[10px]">
|
||||||
|
{saving ? '…' : 'Lưu'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// [S76] Dòng ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
|
// [S76] Ô ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
|
||||||
function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, onSave }: {
|
// Đặt trong <td colSpan> của bảng ngân sách (không bọc row riêng).
|
||||||
label: string
|
function BudgetNoteCell({ editable, value, setValue, savedValue, saving, onSave }: {
|
||||||
editable: boolean
|
editable: boolean
|
||||||
value: string
|
value: string
|
||||||
setValue: (v: string) => void
|
setValue: (v: string) => void
|
||||||
@ -1121,30 +1125,26 @@ function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, o
|
|||||||
saving: boolean
|
saving: boolean
|
||||||
onSave: () => void
|
onSave: () => void
|
||||||
}) {
|
}) {
|
||||||
|
if (!editable) {
|
||||||
|
return (
|
||||||
|
<div className="whitespace-pre-wrap px-2 py-1.5 text-[12px] text-slate-600">
|
||||||
|
{savedValue || <span className="text-slate-400">—</span>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="flex items-start gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
|
<div className="space-y-1 px-2 py-1.5">
|
||||||
<div className="min-w-0 flex-1 text-slate-700">{label}</div>
|
<textarea
|
||||||
<div className="w-72 shrink-0">
|
value={value}
|
||||||
{editable ? (
|
onChange={e => setValue(e.target.value)}
|
||||||
<div className="space-y-1">
|
placeholder="Ghi chú…"
|
||||||
<textarea
|
rows={2}
|
||||||
value={value}
|
className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
|
||||||
onChange={e => setValue(e.target.value)}
|
/>
|
||||||
placeholder="Ghi chú…"
|
<div className="flex justify-end">
|
||||||
rows={2}
|
<Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
|
||||||
className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
|
{saving ? '…' : 'Lưu ghi chú'}
|
||||||
/>
|
</Button>
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
|
|
||||||
{saving ? '…' : 'Lưu ghi chú'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="whitespace-pre-wrap text-right text-[12px] text-slate-600">
|
|
||||||
{savedValue || <span className="text-slate-400">—</span>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -1252,98 +1252,111 @@ function PeBudgetSummaryTable({ ev, readOnly }: { ev: PeDetailBundle; readOnly:
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ===== Block A — NGÂN SÁCH gói thầu: MA TRẬN 3 cột (DỰ ÁN | PRO | CCM) =====
|
{/* ===== Block A — NGÂN SÁCH gói thầu: BẢNG LƯỚI 3 cột (DỰ ÁN | PRO | CCM) =====
|
||||||
[S76 anh Kiệt FDC] Mỗi phòng nhập+điều chỉnh cột của CHÍNH mình (role-gate):
|
[S76 anh Kiệt FDC] <table> viền ô đầy đủ giống file Excel. Mỗi phòng nhập+điều
|
||||||
PRO→cột PRO (canEditPro) · CCM→cột CCM (canEditCcm) · DỰ ÁN hiển thị-only
|
chỉnh cột CHÍNH mình (role-gate): PRO→cột PRO (canEditPro) · CCM→cột CCM
|
||||||
(chưa wire BE — sau có người dự án nhập). Full mỗi cột = ban hành + hiệu chỉnh. */}
|
(canEditCcm) · DỰ ÁN hiển-thị-only (—, sau có người dự án nhập). Full mỗi cột
|
||||||
|
= ban hành + hiệu chỉnh. */}
|
||||||
<BudgetBlockHeader>A. Ngân sách (gói thầu / gói vật tư)</BudgetBlockHeader>
|
<BudgetBlockHeader>A. Ngân sách (gói thầu / gói vật tư)</BudgetBlockHeader>
|
||||||
|
|
||||||
{/* Header 3 cột */}
|
<div className="overflow-x-auto">
|
||||||
<div className="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
|
<table className="w-full border-collapse text-[13px]">
|
||||||
<div className="min-w-0 flex-1" />
|
<thead>
|
||||||
<div className="w-36 shrink-0 text-center">Dự án</div>
|
<tr className="bg-slate-100 text-[11px] font-semibold uppercase tracking-wide text-slate-600">
|
||||||
<div className="w-36 shrink-0 text-center">PRO</div>
|
<th className="border border-slate-300 px-3 py-1.5 text-left">Khoản mục</th>
|
||||||
<div className="w-36 shrink-0 text-center">CCM</div>
|
<th className="w-20 border border-slate-300 px-2 py-1.5 text-center">Dự án</th>
|
||||||
|
<th className="w-40 border border-slate-300 px-2 py-1.5 text-center">PRO</th>
|
||||||
|
<th className="w-40 border border-slate-300 px-2 py-1.5 text-center">CCM</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{/* Ngân sách full (= ban hành + hiệu chỉnh) mỗi cột */}
|
||||||
|
<tr className="bg-[#1F7DC1]/10 font-semibold">
|
||||||
|
<td className="border border-slate-300 px-3 py-2 text-slate-800">Ngân sách (full gói thầu / gói vật tư)</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-2 text-right text-slate-300">—</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
|
||||||
|
{proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
|
||||||
|
</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
|
||||||
|
{ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Ban hành lần đầu */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách Ban hành lần đầu</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.proInitialAmount}
|
||||||
|
editable={bs.canEditPro}
|
||||||
|
saving={proMut.isPending || peFetching}
|
||||||
|
onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.initialAmount}
|
||||||
|
editable={bs.canEditCcm}
|
||||||
|
saving={ccmMut.isPending || peFetching}
|
||||||
|
onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* V0 / hiệu chỉnh tăng giảm (cho phép ÂM) */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</td>
|
||||||
|
<td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.proAdjustmentAmount}
|
||||||
|
editable={bs.canEditPro}
|
||||||
|
allowNegative
|
||||||
|
saving={proMut.isPending || peFetching}
|
||||||
|
onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
|
||||||
|
<BudgetCell
|
||||||
|
value={bs.adjustmentAmount}
|
||||||
|
editable={bs.canEditCcm}
|
||||||
|
allowNegative
|
||||||
|
saving={ccmMut.isPending || peFetching}
|
||||||
|
onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Ghi chú từ PRO (span 3 cột giá trị) */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ PRO</td>
|
||||||
|
<td className="border border-slate-300" colSpan={3}>
|
||||||
|
<BudgetNoteCell
|
||||||
|
editable={bs.canEditPro}
|
||||||
|
value={proNoteText}
|
||||||
|
setValue={setProNoteText}
|
||||||
|
savedValue={bs.proNote}
|
||||||
|
saving={proMut.isPending || peFetching}
|
||||||
|
onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/* Ghi chú từ CCM (span 3 cột giá trị) */}
|
||||||
|
<tr>
|
||||||
|
<td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ CCM</td>
|
||||||
|
<td className="border border-slate-300" colSpan={3}>
|
||||||
|
<BudgetNoteCell
|
||||||
|
editable={bs.canEditCcm}
|
||||||
|
value={ccmNoteText}
|
||||||
|
setValue={setCcmNoteText}
|
||||||
|
savedValue={bs.ccmNote}
|
||||||
|
saving={ccmMut.isPending || peFetching}
|
||||||
|
onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dòng 1 — Ngân sách (full gói thầu) per cột = ban hành + hiệu chỉnh — brand-soft */}
|
|
||||||
<div className="flex items-center gap-2 border-b border-slate-100 bg-[#1F7DC1]/10 px-3 py-2 text-[13px]">
|
|
||||||
<div className="min-w-0 flex-1 font-semibold text-slate-800">Ngân sách (full gói thầu / gói vật tư)</div>
|
|
||||||
<div className="w-36 shrink-0 text-right text-slate-300">—</div>
|
|
||||||
<div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
|
|
||||||
{proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
|
|
||||||
</div>
|
|
||||||
<div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
|
|
||||||
{ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dòng 2 — Ban hành lần đầu: Dự án (—) | PRO (canEditPro) | CCM (canEditCcm) */}
|
|
||||||
<div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
|
|
||||||
<div className="min-w-0 flex-1 text-slate-700">Ngân sách Ban hành lần đầu</div>
|
|
||||||
<div className="w-36 shrink-0 text-right text-slate-300">—</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.proInitialAmount}
|
|
||||||
editable={bs.canEditPro}
|
|
||||||
saving={proMut.isPending || peFetching}
|
|
||||||
onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.initialAmount}
|
|
||||||
editable={bs.canEditCcm}
|
|
||||||
saving={ccmMut.isPending || peFetching}
|
|
||||||
onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dòng 3 — V0 / hiệu chỉnh tăng giảm (cho phép ÂM): Dự án (—) | PRO | CCM */}
|
|
||||||
<div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
|
|
||||||
<div className="min-w-0 flex-1 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</div>
|
|
||||||
<div className="w-36 shrink-0 text-right text-slate-300">—</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.proAdjustmentAmount}
|
|
||||||
editable={bs.canEditPro}
|
|
||||||
allowNegative
|
|
||||||
saving={proMut.isPending || peFetching}
|
|
||||||
onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-36 shrink-0">
|
|
||||||
<BudgetCell
|
|
||||||
value={bs.adjustmentAmount}
|
|
||||||
editable={bs.canEditCcm}
|
|
||||||
allowNegative
|
|
||||||
saving={ccmMut.isPending || peFetching}
|
|
||||||
onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Ghi chú từ PRO + từ CCM (cuối block A, đúng thứ tự Excel anh Kiệt) */}
|
|
||||||
<BudgetNoteRow
|
|
||||||
label="Ghi chú từ PRO"
|
|
||||||
editable={bs.canEditPro}
|
|
||||||
value={proNoteText}
|
|
||||||
setValue={setProNoteText}
|
|
||||||
savedValue={bs.proNote}
|
|
||||||
saving={proMut.isPending || peFetching}
|
|
||||||
onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
|
|
||||||
/>
|
|
||||||
<BudgetNoteRow
|
|
||||||
label="Ghi chú từ CCM"
|
|
||||||
editable={bs.canEditCcm}
|
|
||||||
value={ccmNoteText}
|
|
||||||
setValue={setCcmNoteText}
|
|
||||||
savedValue={bs.ccmNote}
|
|
||||||
saving={ccmMut.isPending || peFetching}
|
|
||||||
onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* ===== Block B — THỰC HIỆN ===== */}
|
{/* ===== Block B — THỰC HIỆN ===== */}
|
||||||
<BudgetBlockHeader>B. Thực hiện</BudgetBlockHeader>
|
<BudgetBlockHeader>B. Thực hiện</BudgetBlockHeader>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user