[CLAUDE] FE-User+FE-Admin: Panel 2 tabs (Tổng quan / Chi tiết / Lịch sử)
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 2m39s
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 2m39s
Phần 2.6 — UI cho 4-bảng data model overhaul. Panel 2 trong 3-panel
layout giờ tabbed thay flat, expose 7 Details + Changelog cho user.
## Files mới (4 per app — cố ý duplicate theo project convention)
### types/contract-details.ts
7 typed interfaces (ThauPhuDetail, GiaoKhoanDetail, NhaCungCapDetail,
DichVuDetail, MuaBanDetail, NguyenTacNccDetail, NguyenTacDvDetail) +
ContractDetailsBundle wrapper (chỉ 1 list có data theo Type) +
ContractChangelog + 4 enum const-objects với Vietnamese label.
### components/contracts/ContractDetailsTab.tsx (~400 dòng)
- Auto-pick render component theo bundle.type (7 table renderers)
- Mỗi table: header per type + columns thanhTien total + delete row btn
- AddRowForm sử dụng FIELDS_BY_TYPE config (5-7 field per type)
- buildPayload auto compute thanhTien (SL × DonGia × (1+VAT/100) cho MuaBan)
- canEdit chỉ khi Phase = DangSoanThao (sau khi nộp HĐ → khóa edit details)
- Banner amber cảnh báo khi không edit được
### components/contracts/ContractChangelogsTab.tsx (~150 dòng)
- Render unified changelog list desc CreatedAt
- Icon + tone color theo EntityType (5 loại: Contract/Detail/Workflow/
Comment/Attachment)
- Expandable detail row hiển thị FieldChangesJson (parse JSON, render
table Field|Cũ|Mới với strike-through old + emerald new)
- Show contextNote khi có
## Files sửa (2 per app)
### components/contracts/ContractDetailContent.tsx
- Thêm useState<Tab>('overview')
- Tabs nav (TabButton helper, border-b underline active brand-700)
- 3 tab: Tổng quan (Info + Comments + Attachments) | Chi tiết (Details
table + add form) | Lịch sử (changelog timeline)
- Wrap Tổng quan content trong fragment, conditionally render
## Build verify
- fe-user: tsc + vite pass (521ms, 1888 modules)
- fe-admin: tsc + vite pass (997ms, 1903 modules)
## Test flow desktop
1. /my-contracts → click HĐ → Panel 2 mở tab "Tổng quan" (default)
2. Click tab "Chi tiết (HĐ Mua bán)" → table line items + add row form
3. Add row "Xi măng / kg / 1000 / 50000" → POST /contracts/{id}/details/mua-ban
→ table refresh + changelog tự log "Thêm SP: Xi măng"
4. Click tab "Lịch sử" → thấy entries: Tạo HĐ, Thêm SP Xi măng, ...
5. Tab giữ state khi switch HĐ khác (per-component state)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
477
fe-admin/src/components/contracts/ContractDetailsTab.tsx
Normal file
477
fe-admin/src/components/contracts/ContractDetailsTab.tsx
Normal file
@ -0,0 +1,477 @@
|
||||
// Tab "Chi tiết" — hiện table line items theo loại HĐ (7 schema khác nhau,
|
||||
// auto pick render component theo bundle.type). Add row form ở footer (chỉ
|
||||
// khi Phase=DangSoanThao và user là drafter — owner mới được edit details).
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Plus, Trash2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import { ContractPhase, type ContractDetail } from '@/types/contracts'
|
||||
import type {
|
||||
ContractDetailsBundle,
|
||||
ThauPhuDetail,
|
||||
GiaoKhoanDetail,
|
||||
NhaCungCapDetail,
|
||||
DichVuDetail,
|
||||
MuaBanDetail,
|
||||
NguyenTacNccDetail,
|
||||
NguyenTacDvDetail,
|
||||
} from '@/types/contract-details'
|
||||
|
||||
const fmtMoney = (v: number) => v.toLocaleString('vi-VN')
|
||||
|
||||
// Map ContractType → URL slug + render config
|
||||
type TypeKey = 'thau-phu' | 'giao-khoan' | 'nha-cung-cap' | 'dich-vu' | 'mua-ban' | 'nguyen-tac-ncc' | 'nguyen-tac-dv'
|
||||
const TYPE_TO_SLUG: Record<number, TypeKey> = {
|
||||
1: 'thau-phu',
|
||||
2: 'giao-khoan',
|
||||
3: 'nha-cung-cap',
|
||||
4: 'dich-vu',
|
||||
5: 'mua-ban',
|
||||
6: 'nguyen-tac-ncc',
|
||||
7: 'nguyen-tac-dv',
|
||||
}
|
||||
|
||||
export function ContractDetailsTab({ contract }: { contract: ContractDetail }) {
|
||||
const qc = useQueryClient()
|
||||
const canEdit = contract.phase === ContractPhase.DangSoanThao
|
||||
|
||||
const bundleQuery = useQuery({
|
||||
queryKey: ['contract-details', contract.id],
|
||||
queryFn: async () => (await api.get<ContractDetailsBundle>(`/contracts/${contract.id}/details`)).data,
|
||||
})
|
||||
|
||||
const deleteRow = useMutation({
|
||||
mutationFn: async (detailId: string) => {
|
||||
await api.delete(`/contracts/${contract.id}/details/${detailId}`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['contract-details', contract.id] })
|
||||
qc.invalidateQueries({ queryKey: ['contract-changelogs', contract.id] })
|
||||
toast.success('Đã xóa')
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
if (bundleQuery.isLoading) return <div className="text-sm text-slate-500">Đang tải chi tiết…</div>
|
||||
if (!bundleQuery.data) return <div className="text-sm text-slate-500">Không có chi tiết.</div>
|
||||
|
||||
const bundle = bundleQuery.data
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{bundle.type === 1 && <ThauPhuTable rows={bundle.thauPhu} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
{bundle.type === 2 && <GiaoKhoanTable rows={bundle.giaoKhoan} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
{bundle.type === 3 && <NhaCungCapTable rows={bundle.nhaCungCap} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
{bundle.type === 4 && <DichVuTable rows={bundle.dichVu} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
{bundle.type === 5 && <MuaBanTable rows={bundle.muaBan} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
{bundle.type === 6 && <NguyenTacNccTable rows={bundle.nguyenTacNcc} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
{bundle.type === 7 && <NguyenTacDvTable rows={bundle.nguyenTacDv} onDelete={deleteRow.mutate} canEdit={canEdit} />}
|
||||
|
||||
{canEdit && (
|
||||
<AddRowForm
|
||||
contractId={contract.id}
|
||||
contractType={contract.type}
|
||||
existingCount={getRowCount(bundle)}
|
||||
onAdded={() => {
|
||||
qc.invalidateQueries({ queryKey: ['contract-details', contract.id] })
|
||||
qc.invalidateQueries({ queryKey: ['contract-changelogs', contract.id] })
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!canEdit && (
|
||||
<div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
|
||||
⚠ Chỉ sửa được chi tiết khi HĐ ở phase "Đang soạn thảo". Hiện tại HĐ đã chuyển sang phase khác.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getRowCount(bundle: ContractDetailsBundle): number {
|
||||
return (
|
||||
bundle.thauPhu.length + bundle.giaoKhoan.length + bundle.nhaCungCap.length +
|
||||
bundle.dichVu.length + bundle.muaBan.length + bundle.nguyenTacNcc.length +
|
||||
bundle.nguyenTacDv.length
|
||||
)
|
||||
}
|
||||
|
||||
// ===== Per-type table renderers (gộp 1 file để dễ maintain) =====
|
||||
|
||||
function TableShell({ headers, totalRow, children }: { headers: string[]; totalRow?: React.ReactNode; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-lg border border-slate-200">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-slate-50 text-[11px] uppercase tracking-wider text-slate-500">
|
||||
<tr>
|
||||
<th className="w-10 px-2 py-2 text-left">#</th>
|
||||
{headers.map(h => <th key={h} className="px-2 py-2 text-left">{h}</th>)}
|
||||
<th className="w-10 px-2 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{children}
|
||||
</tbody>
|
||||
{totalRow}
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteBtn({ onDelete }: { onDelete: () => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => { if (confirm('Xóa dòng này?')) onDelete() }}
|
||||
className="text-slate-400 hover:text-red-600"
|
||||
aria-label="Xóa"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function totalOf(rows: { thanhTien: number }[]): number {
|
||||
return rows.reduce((s, r) => s + (r.thanhTien ?? 0), 0)
|
||||
}
|
||||
|
||||
function ThauPhuTable({ rows, onDelete, canEdit }: { rows: ThauPhuDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell
|
||||
headers={['Hạng mục', 'ĐVT', 'Khối lượng', 'Đơn giá', 'Thành tiền', 'Hoàn thành', 'Ghi chú']}
|
||||
totalRow={rows.length > 0 ? <tfoot className="bg-slate-50"><tr><td colSpan={5} className="px-2 py-2 text-right text-xs font-semibold">Tổng:</td><td className="px-2 py-2 font-semibold text-brand-700">{fmtMoney(totalOf(rows))}</td><td colSpan={3} /></tr></tfoot> : undefined}
|
||||
>
|
||||
{rows.length === 0 && <tr><td colSpan={9} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có hạng mục.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5">{r.hangMuc}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.khoiLuong)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGia)}</td>
|
||||
<td className="px-2 py-1.5 text-right font-medium">{fmtMoney(r.thanhTien)}</td>
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{r.thoiGianHoanThanh ? new Date(r.thoiGianHoanThanh).toLocaleDateString('vi-VN') : '—'}</td>
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{r.ghiChu ?? ''}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
function GiaoKhoanTable({ rows, onDelete, canEdit }: { rows: GiaoKhoanDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell
|
||||
headers={['Mã CV', 'Tên công việc', 'ĐVT', 'KL', 'Đơn giá', 'Thành tiền', 'Hoàn thành']}
|
||||
totalRow={rows.length > 0 ? <tfoot className="bg-slate-50"><tr><td colSpan={6} className="px-2 py-2 text-right text-xs font-semibold">Tổng:</td><td className="px-2 py-2 font-semibold text-brand-700">{fmtMoney(totalOf(rows))}</td><td colSpan={2} /></tr></tfoot> : undefined}
|
||||
>
|
||||
{rows.length === 0 && <tr><td colSpan={9} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có công việc.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5 font-mono text-xs">{r.maCongViec}</td>
|
||||
<td className="px-2 py-1.5">{r.tenCongViec}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.khoiLuong)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGia)}</td>
|
||||
<td className="px-2 py-1.5 text-right font-medium">{fmtMoney(r.thanhTien)}</td>
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{r.thoiGianHoanThanh ? new Date(r.thoiGianHoanThanh).toLocaleDateString('vi-VN') : '—'}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
function NhaCungCapTable({ rows, onDelete, canEdit }: { rows: NhaCungCapDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell
|
||||
headers={['Mã SP', 'Tên SP', 'ĐVT', 'SL', 'Đơn giá', 'Thành tiền', 'Giao hàng']}
|
||||
totalRow={rows.length > 0 ? <tfoot className="bg-slate-50"><tr><td colSpan={6} className="px-2 py-2 text-right text-xs font-semibold">Tổng:</td><td className="px-2 py-2 font-semibold text-brand-700">{fmtMoney(totalOf(rows))}</td><td colSpan={2} /></tr></tfoot> : undefined}
|
||||
>
|
||||
{rows.length === 0 && <tr><td colSpan={9} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có sản phẩm.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5 font-mono text-xs">{r.maSP}</td>
|
||||
<td className="px-2 py-1.5">{r.tenSP}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.soLuong)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGia)}</td>
|
||||
<td className="px-2 py-1.5 text-right font-medium">{fmtMoney(r.thanhTien)}</td>
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{r.thoiGianGiao ? new Date(r.thoiGianGiao).toLocaleDateString('vi-VN') : '—'}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
function DichVuTable({ rows, onDelete, canEdit }: { rows: DichVuDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell
|
||||
headers={['Mã DV', 'Tên DV', 'ĐVT', 'Thời gian', 'Đơn giá', 'Thành tiền']}
|
||||
totalRow={rows.length > 0 ? <tfoot className="bg-slate-50"><tr><td colSpan={5} className="px-2 py-2 text-right text-xs font-semibold">Tổng:</td><td className="px-2 py-2 font-semibold text-brand-700">{fmtMoney(totalOf(rows))}</td><td colSpan={2} /></tr></tfoot> : undefined}
|
||||
>
|
||||
{rows.length === 0 && <tr><td colSpan={8} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có dịch vụ.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5 font-mono text-xs">{r.maDichVu}</td>
|
||||
<td className="px-2 py-1.5">{r.tenDichVu}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.thoiGian)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGia)}</td>
|
||||
<td className="px-2 py-1.5 text-right font-medium">{fmtMoney(r.thanhTien)}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
function MuaBanTable({ rows, onDelete, canEdit }: { rows: MuaBanDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell
|
||||
headers={['Mã SP', 'Tên SP', 'ĐVT', 'SL', 'Đơn giá', 'VAT (%)', 'Thành tiền']}
|
||||
totalRow={rows.length > 0 ? <tfoot className="bg-slate-50"><tr><td colSpan={7} className="px-2 py-2 text-right text-xs font-semibold">Tổng:</td><td className="px-2 py-2 font-semibold text-brand-700">{fmtMoney(totalOf(rows))}</td><td /></tr></tfoot> : undefined}
|
||||
>
|
||||
{rows.length === 0 && <tr><td colSpan={9} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có sản phẩm.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5 font-mono text-xs">{r.maSP}</td>
|
||||
<td className="px-2 py-1.5">{r.tenSP}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.soLuong)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGia)}</td>
|
||||
<td className="px-2 py-1.5 text-right text-xs">{r.thueVAT}%</td>
|
||||
<td className="px-2 py-1.5 text-right font-medium">{fmtMoney(r.thanhTien)}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
function NguyenTacNccTable({ rows, onDelete, canEdit }: { rows: NguyenTacNccDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell headers={['Nhóm SP', 'Tên SP', 'ĐVT', 'Giá min', 'Giá max', 'Điều kiện thanh toán']}>
|
||||
{rows.length === 0 && <tr><td colSpan={8} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có SP.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5">{r.nhomSP}</td>
|
||||
<td className="px-2 py-1.5">{r.tenSP}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGiaToiThieu)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGiaToiDa)}</td>
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{r.dieuKienThanhToan ?? '—'}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
function NguyenTacDvTable({ rows, onDelete, canEdit }: { rows: NguyenTacDvDetail[]; onDelete: (id: string) => void; canEdit: boolean }) {
|
||||
return (
|
||||
<TableShell headers={['Loại DV', 'Tên DV', 'ĐVT', 'Giá min', 'Giá max', 'SLA']}>
|
||||
{rows.length === 0 && <tr><td colSpan={8} className="px-3 py-6 text-center text-xs text-slate-400">Chưa có DV.</td></tr>}
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{i + 1}</td>
|
||||
<td className="px-2 py-1.5">{r.loaiDichVu}</td>
|
||||
<td className="px-2 py-1.5">{r.tenDichVu}</td>
|
||||
<td className="px-2 py-1.5 text-xs">{r.donViTinh}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGiaToiThieu)}</td>
|
||||
<td className="px-2 py-1.5 text-right">{fmtMoney(r.donGiaToiDa)}</td>
|
||||
<td className="px-2 py-1.5 text-xs text-slate-500">{r.sla ?? '—'}</td>
|
||||
<td className="px-2 py-1.5">{canEdit && <DeleteBtn onDelete={() => onDelete(r.id)} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableShell>
|
||||
)
|
||||
}
|
||||
|
||||
// ===== Add row form — minimal: chỉ field bắt buộc, advanced edit qua FE
|
||||
// fullpage form sau (Iter 2). Hiện tại hỗ trợ quick-add 5-7 field per type.
|
||||
|
||||
function AddRowForm({
|
||||
contractId, contractType, existingCount, onAdded,
|
||||
}: {
|
||||
contractId: string
|
||||
contractType: number
|
||||
existingCount: number
|
||||
onAdded: () => void
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const slug = useMemo(() => TYPE_TO_SLUG[contractType], [contractType])
|
||||
|
||||
if (!slug) return null
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!open && (
|
||||
<Button variant="outline" onClick={() => setOpen(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Thêm dòng
|
||||
</Button>
|
||||
)}
|
||||
{open && (
|
||||
<AddRowFields
|
||||
contractId={contractId}
|
||||
slug={slug}
|
||||
contractType={contractType}
|
||||
nextOrder={existingCount + 1}
|
||||
onCancel={() => setOpen(false)}
|
||||
onAdded={() => { setOpen(false); onAdded() }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AddRowFields({
|
||||
contractId, slug, contractType, nextOrder, onCancel, onAdded,
|
||||
}: {
|
||||
contractId: string
|
||||
slug: TypeKey
|
||||
contractType: number
|
||||
nextOrder: number
|
||||
onCancel: () => void
|
||||
onAdded: () => void
|
||||
}) {
|
||||
const [form, setForm] = useState<Record<string, string>>({})
|
||||
|
||||
const submit = useMutation({
|
||||
mutationFn: async () => {
|
||||
const payload = buildPayload(contractType, nextOrder, form)
|
||||
await api.post(`/contracts/${contractId}/details/${slug}`, payload)
|
||||
},
|
||||
onSuccess: () => { toast.success('Đã thêm dòng'); onAdded() },
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
const fields = FIELDS_BY_TYPE[contractType] ?? []
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={e => { e.preventDefault(); submit.mutate() }}
|
||||
className="space-y-2 rounded-lg border border-brand-200 bg-brand-50/30 p-3"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{fields.map(f => (
|
||||
<div key={f.name} className="space-y-1">
|
||||
<label className="text-[11px] font-medium text-slate-600">{f.label}</label>
|
||||
<Input
|
||||
type={f.type === 'number' ? 'number' : f.type === 'date' ? 'date' : 'text'}
|
||||
value={form[f.name] ?? ''}
|
||||
onChange={e => setForm(s => ({ ...s, [f.name]: e.target.value }))}
|
||||
placeholder={f.placeholder}
|
||||
step={f.type === 'number' ? 'any' : undefined}
|
||||
required={f.required}
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" onClick={onCancel}>Hủy</Button>
|
||||
<Button type="submit" disabled={submit.isPending}>
|
||||
{submit.isPending ? 'Đang thêm…' : 'Thêm'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
type FieldDef = { name: string; label: string; type: 'text' | 'number' | 'date'; required?: boolean; placeholder?: string }
|
||||
|
||||
const FIELDS_BY_TYPE: Record<number, FieldDef[]> = {
|
||||
1: [ // ThauPhu
|
||||
{ name: 'hangMuc', label: 'Hạng mục *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true, placeholder: 'm2, kg, ngày...' },
|
||||
{ name: 'khoiLuong', label: 'Khối lượng *', type: 'number', required: true },
|
||||
{ name: 'donGia', label: 'Đơn giá *', type: 'number', required: true },
|
||||
{ name: 'thoiGianHoanThanh', label: 'Hoàn thành', type: 'date' },
|
||||
{ name: 'ghiChu', label: 'Ghi chú', type: 'text' },
|
||||
],
|
||||
2: [ // GiaoKhoan
|
||||
{ name: 'maCongViec', label: 'Mã CV *', type: 'text', required: true },
|
||||
{ name: 'tenCongViec', label: 'Tên công việc *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true },
|
||||
{ name: 'khoiLuong', label: 'KL *', type: 'number', required: true },
|
||||
{ name: 'donGia', label: 'Đơn giá *', type: 'number', required: true },
|
||||
{ name: 'thoiGianHoanThanh', label: 'Hoàn thành', type: 'date' },
|
||||
],
|
||||
3: [ // NhaCungCap
|
||||
{ name: 'maSP', label: 'Mã SP *', type: 'text', required: true },
|
||||
{ name: 'tenSP', label: 'Tên SP *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true },
|
||||
{ name: 'soLuong', label: 'SL *', type: 'number', required: true },
|
||||
{ name: 'donGia', label: 'Đơn giá *', type: 'number', required: true },
|
||||
{ name: 'thoiGianGiao', label: 'Giao hàng', type: 'date' },
|
||||
{ name: 'xuatXu', label: 'Xuất xứ', type: 'text' },
|
||||
],
|
||||
4: [ // DichVu
|
||||
{ name: 'maDichVu', label: 'Mã DV *', type: 'text', required: true },
|
||||
{ name: 'tenDichVu', label: 'Tên DV *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true },
|
||||
{ name: 'thoiGian', label: 'Thời gian *', type: 'number', required: true },
|
||||
{ name: 'donGia', label: 'Đơn giá *', type: 'number', required: true },
|
||||
],
|
||||
5: [ // MuaBan
|
||||
{ name: 'maSP', label: 'Mã SP *', type: 'text', required: true },
|
||||
{ name: 'tenSP', label: 'Tên SP *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true },
|
||||
{ name: 'soLuong', label: 'SL *', type: 'number', required: true },
|
||||
{ name: 'donGia', label: 'Đơn giá *', type: 'number', required: true },
|
||||
{ name: 'thueVAT', label: 'VAT (%)', type: 'number', placeholder: '10' },
|
||||
],
|
||||
6: [ // NguyenTacNcc
|
||||
{ name: 'nhomSP', label: 'Nhóm SP *', type: 'text', required: true },
|
||||
{ name: 'tenSP', label: 'Tên SP *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true },
|
||||
{ name: 'donGiaToiThieu', label: 'Giá min *', type: 'number', required: true },
|
||||
{ name: 'donGiaToiDa', label: 'Giá max *', type: 'number', required: true },
|
||||
],
|
||||
7: [ // NguyenTacDv
|
||||
{ name: 'loaiDichVu', label: 'Loại DV *', type: 'text', required: true },
|
||||
{ name: 'tenDichVu', label: 'Tên DV *', type: 'text', required: true },
|
||||
{ name: 'donViTinh', label: 'ĐVT *', type: 'text', required: true },
|
||||
{ name: 'donGiaToiThieu', label: 'Giá min *', type: 'number', required: true },
|
||||
{ name: 'donGiaToiDa', label: 'Giá max *', type: 'number', required: true },
|
||||
],
|
||||
}
|
||||
|
||||
// Build payload — convert string form values to typed fields BE expects.
|
||||
// thanhTien auto compute = soLuong * donGia (or khoiLuong * donGia).
|
||||
function buildPayload(contractType: number, order: number, form: Record<string, string>): Record<string, unknown> {
|
||||
const num = (k: string) => Number(form[k] ?? 0)
|
||||
const str = (k: string) => form[k] ?? null
|
||||
const date = (k: string) => form[k] ? new Date(form[k]).toISOString() : null
|
||||
|
||||
const common = { id: '00000000-0000-0000-0000-000000000000', order, ghiChu: str('ghiChu') }
|
||||
|
||||
switch (contractType) {
|
||||
case 1: // ThauPhu
|
||||
return { ...common, hangMuc: form.hangMuc, donViTinh: form.donViTinh, khoiLuong: num('khoiLuong'), donGia: num('donGia'), thanhTien: num('khoiLuong') * num('donGia'), thoiGianHoanThanh: date('thoiGianHoanThanh') }
|
||||
case 2: // GiaoKhoan
|
||||
return { ...common, maCongViec: form.maCongViec, tenCongViec: form.tenCongViec, donViTinh: form.donViTinh, khoiLuong: num('khoiLuong'), donGia: num('donGia'), thanhTien: num('khoiLuong') * num('donGia'), thoiGianHoanThanh: date('thoiGianHoanThanh'), yeuCauKyThuat: str('yeuCauKyThuat') }
|
||||
case 3: // NhaCungCap
|
||||
return { ...common, maSP: form.maSP, tenSP: form.tenSP, thongSoKyThuat: str('thongSoKyThuat'), donViTinh: form.donViTinh, soLuong: num('soLuong'), donGia: num('donGia'), thanhTien: num('soLuong') * num('donGia'), thoiGianGiao: date('thoiGianGiao'), xuatXu: str('xuatXu') }
|
||||
case 4: // DichVu
|
||||
return { ...common, maDichVu: form.maDichVu, tenDichVu: form.tenDichVu, moTa: str('moTa'), donViTinh: form.donViTinh, thoiGian: num('thoiGian'), donGia: num('donGia'), thanhTien: num('thoiGian') * num('donGia'), tuNgay: date('tuNgay'), denNgay: date('denNgay') }
|
||||
case 5: // MuaBan — thanhTien = SL * DonGia * (1 + VAT/100)
|
||||
return { ...common, maSP: form.maSP, tenSP: form.tenSP, moTa: str('moTa'), donViTinh: form.donViTinh, soLuong: num('soLuong'), donGia: num('donGia'), thueVAT: num('thueVAT'), thanhTien: num('soLuong') * num('donGia') * (1 + num('thueVAT') / 100), xuatXu: str('xuatXu') }
|
||||
case 6: // NguyenTacNcc
|
||||
return { ...common, nhomSP: form.nhomSP, tenSP: form.tenSP, donViTinh: form.donViTinh, donGiaToiThieu: num('donGiaToiThieu'), donGiaToiDa: num('donGiaToiDa'), dieuKienGiaoHang: str('dieuKienGiaoHang'), dieuKienThanhToan: str('dieuKienThanhToan') }
|
||||
case 7: // NguyenTacDv
|
||||
return { ...common, loaiDichVu: form.loaiDichVu, tenDichVu: form.tenDichVu, donViTinh: form.donViTinh, donGiaToiThieu: num('donGiaToiThieu'), donGiaToiDa: num('donGiaToiDa'), phamViDichVu: str('phamViDichVu'), sla: str('sla') }
|
||||
}
|
||||
return common
|
||||
}
|
||||
Reference in New Issue
Block a user