mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-208): refactor Purchase Order forms to use table layout for improved readability and maintainability
This commit is contained in:
rstubryan
@@ -9,9 +9,6 @@ import Button from '@/components/Button';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import Table from '@/components/Table';
|
||||
import Card from '@/components/Card';
|
||||
import * as TanStack from '@tanstack/react-table';
|
||||
|
||||
import {
|
||||
PurchaseRequisitionsAcceptApprovalFormDefaultValues,
|
||||
@@ -24,7 +21,6 @@ import {
|
||||
CreateAcceptApprovalRequisitionsPayload,
|
||||
Purchase,
|
||||
} from '@/types/api/purchase/purchase';
|
||||
import { PurchaseRequisitionsAcceptApprovalFormValues } from './PurchaseOrderForm.schema';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
|
||||
interface PurchaseOrderAcceptApprovalFormProps {
|
||||
@@ -71,7 +67,7 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
|
||||
// ===== UTILITY FUNCTIONS =====
|
||||
const isRepeaterInputError = (
|
||||
const getPurchaseItemError = (
|
||||
idx: number,
|
||||
field:
|
||||
| 'purchase_item_id'
|
||||
@@ -396,466 +392,330 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
};
|
||||
|
||||
// ===== TABLE COLUMNS DEFINITION =====
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'purchase_item',
|
||||
header: () => (
|
||||
<div>
|
||||
Item
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item?.purchase_item}
|
||||
key={`purchase-item-${idx}`}
|
||||
onChange={(val) => purchaseItemChangeHandler(idx, val)}
|
||||
options={getPurchaseItemOptions()}
|
||||
isError={isRepeaterInputError(idx, 'purchase_item_id').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'purchase_item_id').errorMessage
|
||||
}
|
||||
placeholder='Pilih Item...'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'warehouse_id',
|
||||
header: () => (
|
||||
<div>
|
||||
Gudang Tujuan
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item?.warehouse}
|
||||
key={`warehouse-${idx}`}
|
||||
onChange={(val) => warehouseChangeHandler(idx, val)}
|
||||
options={getWarehouseOptions()}
|
||||
isError={isRepeaterInputError(idx, 'warehouse_id').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'warehouse_id').errorMessage
|
||||
}
|
||||
placeholder='Pilih Gudang...'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'travel_number',
|
||||
header: () => (
|
||||
<div>
|
||||
No. Surat Jalan
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.travel_number`}
|
||||
type='text'
|
||||
value={item?.travel_number || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.travel_number`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isRepeaterInputError(idx, 'travel_number').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'travel_number').errorMessage
|
||||
}
|
||||
placeholder='Masukkan no. surat jalan'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'travel_document_path',
|
||||
header: () => (
|
||||
<div>
|
||||
Dokumen Surat Jalan
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.travel_document_path`}
|
||||
type='text'
|
||||
value={item?.travel_document_path || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.travel_document_path`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
isRepeaterInputError(idx, 'travel_document_path').isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'travel_document_path').errorMessage
|
||||
}
|
||||
placeholder='Masukkan path dokumen'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'vehicle_number',
|
||||
header: () => (
|
||||
<div>
|
||||
Nomor Kendaraan
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.vehicle_number`}
|
||||
type='text'
|
||||
value={item?.vehicle_number || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.vehicle_number`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isRepeaterInputError(idx, 'vehicle_number').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'vehicle_number').errorMessage
|
||||
}
|
||||
placeholder='Masukkan nomor kendaraan'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'expedition_vendor_id',
|
||||
header: () => (
|
||||
<div>
|
||||
Vendor Ekspedisi
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item?.expedition_vendor}
|
||||
key={`expedition-vendor-${idx}`}
|
||||
onChange={(val) => expeditionVendorChangeHandler(idx, val)}
|
||||
options={getExpeditionVendorOptions()}
|
||||
isError={
|
||||
isRepeaterInputError(idx, 'expedition_vendor_id').isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'expedition_vendor_id').errorMessage
|
||||
}
|
||||
placeholder='Pilih Vendor...'
|
||||
className={{
|
||||
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'received_qty',
|
||||
header: () => (
|
||||
<div>
|
||||
Jumlah Diterima
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.received_qty`}
|
||||
value={item?.received_qty || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(idx, 'received_qty', e.target.value)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan jumlah diterima'
|
||||
allowNegative={false}
|
||||
decimalScale={0}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={isRepeaterInputError(idx, 'received_qty').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'received_qty').errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'transport_per_item',
|
||||
header: () => (
|
||||
<div>
|
||||
Transport/Item
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.transport_per_item`}
|
||||
value={item?.transport_per_item || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'transport_per_item',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan transport/item'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={isRepeaterInputError(idx, 'transport_per_item').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'transport_per_item').errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'transport_total',
|
||||
header: () => (
|
||||
<div>
|
||||
Total Transport
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (
|
||||
props: TanStack.CellContext<
|
||||
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
|
||||
unknown
|
||||
>
|
||||
) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.transport_total`}
|
||||
value={item?.transport_total || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(idx, 'transport_total', e.target.value)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan total transport'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={isRepeaterInputError(idx, 'transport_total').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'transport_total').errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
formik.values.items,
|
||||
formik.handleBlur,
|
||||
purchaseItemChangeHandler,
|
||||
warehouseChangeHandler,
|
||||
expeditionVendorChangeHandler,
|
||||
handlePurchaseItemChange,
|
||||
getPurchaseItemOptions,
|
||||
getWarehouseOptions,
|
||||
getExpeditionVendorOptions,
|
||||
]
|
||||
);
|
||||
|
||||
const tableData = useMemo(
|
||||
() => formik.values.items || [],
|
||||
[formik.values.items]
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
|
||||
<div className='w-full'>
|
||||
<h2 className='text-lg font-semibold mb-4'>
|
||||
Konfirmasi Penerimaan Produk
|
||||
</h2>
|
||||
|
||||
{/* Date Inputs Section - Above Table */}
|
||||
<Card
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'mb-6 w-full!',
|
||||
body: 'p-4!',
|
||||
title: 'text-lg! font-semibold!',
|
||||
}}
|
||||
>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
|
||||
{formik.values.items?.map((item, idx) => (
|
||||
<div key={`received-date-${idx}`} className='space-y-2'>
|
||||
<DateInput
|
||||
required
|
||||
label={'Tanggal Penerimaan Produk'}
|
||||
name={`items.${idx}.received_date`}
|
||||
value={item.received_date || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.received_date`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isRepeaterInputError(idx, 'received_date').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'received_date').errorMessage
|
||||
}
|
||||
placeholder='Pilih tanggal diterima'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
isNestedModal={true}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Table
|
||||
data={tableData}
|
||||
columns={columns}
|
||||
className={{
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'table table-auto w-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-2 py-3 text-xs font-semibold text-gray-500',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName: 'px-2 py-2',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>Belum ada data item...</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Item
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Tanggal Diterima
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Gudang Tujuan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
No. Surat Jalan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Dokumen Surat Jalan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Nomor Kendaraan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Vendor Ekspedisi
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Jumlah Diterima
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Transport/Item
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Total Transport
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.items?.map((item, idx) => {
|
||||
purchaseItems.find((p) => p.value === item.purchase_item_id);
|
||||
return (
|
||||
<tr key={`purchase-item-${idx}`}>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.purchase_item}
|
||||
key={`purchase-item-${idx}`}
|
||||
onChange={(val) => purchaseItemChangeHandler(idx, val)}
|
||||
options={getPurchaseItemOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'purchase_item_id').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'purchase_item_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Item...'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<DateInput
|
||||
required
|
||||
isNestedModal={true}
|
||||
name={`items.${idx}.received_date`}
|
||||
value={item.received_date || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.received_date`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'received_date').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'received_date')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.warehouse}
|
||||
key={`warehouse-${idx}`}
|
||||
onChange={(val) => warehouseChangeHandler(idx, val)}
|
||||
options={getWarehouseOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'warehouse_id').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'warehouse_id').errorMessage
|
||||
}
|
||||
placeholder='Pilih Gudang...'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.travel_number`}
|
||||
type='text'
|
||||
value={item.travel_number || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.travel_number`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'travel_number').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'travel_number')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Masukkan no. surat jalan'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.travel_document_path`}
|
||||
type='text'
|
||||
value={item.travel_document_path || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.travel_document_path`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'travel_document_path')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'travel_document_path')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Masukkan path dokumen'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.vehicle_number`}
|
||||
type='text'
|
||||
value={item.vehicle_number || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.vehicle_number`,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'vehicle_number').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'vehicle_number')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Masukkan nomor kendaraan'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.expedition_vendor}
|
||||
key={`expedition-vendor-${idx}`}
|
||||
onChange={(val) =>
|
||||
expeditionVendorChangeHandler(idx, val)
|
||||
}
|
||||
options={getExpeditionVendorOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'expedition_vendor_id')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'expedition_vendor_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Vendor...'
|
||||
className={{
|
||||
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.received_qty`}
|
||||
value={item.received_qty || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'received_qty',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan jumlah diterima'
|
||||
allowNegative={false}
|
||||
decimalScale={0}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'received_qty').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'received_qty').errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.transport_per_item`}
|
||||
value={item.transport_per_item || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'transport_per_item',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan transport/item'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'transport_per_item')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'transport_per_item')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.transport_total`}
|
||||
value={item.transport_total || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'transport_total',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan total transport'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'transport_total').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'transport_total')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={'col-span-2'}>
|
||||
<TextInput
|
||||
label='Notes'
|
||||
|
||||
@@ -9,8 +9,6 @@ import Button from '@/components/Button';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import Table from '@/components/Table';
|
||||
import * as TanStack from '@tanstack/react-table';
|
||||
|
||||
import {
|
||||
PurchaseRequisitionsStaffApprovalFormDefaultValues,
|
||||
@@ -23,7 +21,6 @@ import {
|
||||
CreateStaffApprovalRequisitionsPayload,
|
||||
Purchase,
|
||||
} from '@/types/api/purchase/purchase';
|
||||
import { PurchaseRequisitionsStaffApprovalFormValues } from './PurchaseOrderForm.schema';
|
||||
|
||||
interface PurchaseOrderStaffApprovalFormProps {
|
||||
type?: 'add' | 'edit';
|
||||
@@ -57,7 +54,7 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}
|
||||
|
||||
// ===== UTILITY FUNCTIONS =====
|
||||
const isRepeaterInputError = (
|
||||
const getPurchaseItemError = (
|
||||
idx: number,
|
||||
field: 'purchase_item_id' | 'price' | 'total_price'
|
||||
): { isError: boolean; errorMessage: string } => {
|
||||
@@ -301,268 +298,6 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}
|
||||
};
|
||||
|
||||
// ===== TABLE COLUMNS DEFINITION =====
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'purchase_item',
|
||||
header: () => (
|
||||
<div>
|
||||
Item
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item?.purchase_item}
|
||||
key={`purchase-item-${idx}`}
|
||||
onChange={(val) =>
|
||||
purchaseItemChangeHandler(idx, val)
|
||||
}
|
||||
options={getPurchaseItemOptions()}
|
||||
isError={
|
||||
isRepeaterInputError(idx, 'purchase_item_id')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'purchase_item_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Item...'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'warehouse',
|
||||
header: 'Gudang',
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const selectedItem = purchaseItems.find(
|
||||
(p) => p.value === formik.values.items?.[idx]?.purchase_item_id
|
||||
);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
name={`items.${idx}.warehouse`}
|
||||
type='text'
|
||||
value={selectedItem?.warehouse?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'product_name',
|
||||
header: 'Produk',
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const selectedItem = purchaseItems.find(
|
||||
(p) => p.value === formik.values.items?.[idx]?.purchase_item_id
|
||||
);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
name={`items.${idx}.product_name`}
|
||||
type='text'
|
||||
value={selectedItem?.product?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'product_category',
|
||||
header: 'Jenis Produk',
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const selectedItem = purchaseItems.find(
|
||||
(p) => p.value === formik.values.items?.[idx]?.purchase_item_id
|
||||
);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
name={`items.${idx}.product_category`}
|
||||
type='text'
|
||||
value={
|
||||
typeof selectedItem?.product?.product_category === 'string'
|
||||
? selectedItem.product.product_category
|
||||
: selectedItem?.product?.product_category?.name || ''
|
||||
}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'quantity',
|
||||
header: 'Jumlah',
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const selectedItem = purchaseItems.find(
|
||||
(p) => p.value === formik.values.items?.[idx]?.purchase_item_id
|
||||
);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
name={`items.${idx}.quantity`}
|
||||
type='text'
|
||||
value={
|
||||
selectedItem?.quantity
|
||||
? selectedItem.quantity.toLocaleString('id-ID')
|
||||
: ''
|
||||
}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-24',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'uom',
|
||||
header: 'Satuan',
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const selectedItem = purchaseItems.find(
|
||||
(p) => p.value === formik.values.items?.[idx]?.purchase_item_id
|
||||
);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
name={`items.${idx}.uom`}
|
||||
type='text'
|
||||
value={selectedItem?.product?.uom?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-24',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'price',
|
||||
header: () => (
|
||||
<div>
|
||||
Harga Satuan
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.price`}
|
||||
value={item?.price || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'price',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan harga satuan'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={isRepeaterInputError(idx, 'price').isError}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'price').errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'total_price',
|
||||
header: () => (
|
||||
<div>
|
||||
Total (Rp.)
|
||||
<span className='text-error'>*</span>
|
||||
</div>
|
||||
),
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.total_price`}
|
||||
value={item?.total_price || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'total_price',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan total harga'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
isRepeaterInputError(idx, 'total_price').isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(idx, 'total_price')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[formik.values.items, formik.handleBlur, purchaseItemChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, purchaseItems]
|
||||
);
|
||||
|
||||
const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
@@ -573,28 +308,202 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
<h2 className='text-lg font-semibold mb-4'>
|
||||
Konfirmasi Approve Pembelian
|
||||
</h2>
|
||||
<Table
|
||||
data={tableData}
|
||||
columns={columns}
|
||||
className={{
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'table table-auto w-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-2 py-3 text-xs font-semibold text-gray-500',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-2 py-2',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Belum ada data item...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Item
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>Gudang</th>
|
||||
<th>Produk</th>
|
||||
<th>Jenis Produk</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Satuan</th>
|
||||
<th>
|
||||
Harga Satuan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Total (Rp.)
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.items?.map((item, idx) => {
|
||||
const selectedPurchaseItem = purchaseItems.find(
|
||||
(p) => p.value === item.purchase_item_id
|
||||
);
|
||||
return (
|
||||
<tr key={`purchase-item-${idx}`}>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.purchase_item}
|
||||
key={`purchase-item-${idx}`}
|
||||
onChange={(val) =>
|
||||
purchaseItemChangeHandler(idx, val)
|
||||
}
|
||||
options={getPurchaseItemOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'purchase_item_id')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'purchase_item_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Item...'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.warehouse`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.warehouse?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.product_name`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.product?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.product_category`}
|
||||
type='text'
|
||||
value={
|
||||
typeof selectedPurchaseItem?.product
|
||||
?.product_category === 'string'
|
||||
? selectedPurchaseItem.product.product_category
|
||||
: selectedPurchaseItem?.product?.product_category
|
||||
?.name || ''
|
||||
}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.quantity`}
|
||||
type='text'
|
||||
value={
|
||||
selectedPurchaseItem?.quantity
|
||||
? selectedPurchaseItem.quantity.toLocaleString(
|
||||
'id-ID'
|
||||
)
|
||||
: ''
|
||||
}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-24',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.uom`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.product?.uom?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-24',
|
||||
}}
|
||||
disabled={true}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.price`}
|
||||
value={item.price || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'price',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan harga satuan'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={getPurchaseItemError(idx, 'price').isError}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'price').errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
required
|
||||
name={`items.${idx}.total_price`}
|
||||
value={item.total_price || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
'total_price',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder='Masukkan total harga'
|
||||
allowNegative={false}
|
||||
decimalScale={2}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'total_price').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'total_price')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={'col-span-2'}>
|
||||
<TextInput
|
||||
label='Notes'
|
||||
|
||||
Reference in New Issue
Block a user