mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +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 TextInput from '@/components/input/TextInput';
|
||||||
import NumberInput from '@/components/input/NumberInput';
|
import NumberInput from '@/components/input/NumberInput';
|
||||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
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 {
|
import {
|
||||||
PurchaseRequisitionsAcceptApprovalFormDefaultValues,
|
PurchaseRequisitionsAcceptApprovalFormDefaultValues,
|
||||||
@@ -24,7 +21,6 @@ import {
|
|||||||
CreateAcceptApprovalRequisitionsPayload,
|
CreateAcceptApprovalRequisitionsPayload,
|
||||||
Purchase,
|
Purchase,
|
||||||
} from '@/types/api/purchase/purchase';
|
} from '@/types/api/purchase/purchase';
|
||||||
import { PurchaseRequisitionsAcceptApprovalFormValues } from './PurchaseOrderForm.schema';
|
|
||||||
import DateInput from '@/components/input/DateInput';
|
import DateInput from '@/components/input/DateInput';
|
||||||
|
|
||||||
interface PurchaseOrderAcceptApprovalFormProps {
|
interface PurchaseOrderAcceptApprovalFormProps {
|
||||||
@@ -71,7 +67,7 @@ const PurchaseOrderAcceptApprovalForm = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ===== UTILITY FUNCTIONS =====
|
// ===== UTILITY FUNCTIONS =====
|
||||||
const isRepeaterInputError = (
|
const getPurchaseItemError = (
|
||||||
idx: number,
|
idx: number,
|
||||||
field:
|
field:
|
||||||
| 'purchase_item_id'
|
| '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 (
|
return (
|
||||||
<form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
|
<form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
|
||||||
<div className='w-full'>
|
<div className='w-full'>
|
||||||
<h2 className='text-lg font-semibold mb-4'>
|
<h2 className='text-lg font-semibold mb-4'>
|
||||||
Konfirmasi Penerimaan Produk
|
Konfirmasi Penerimaan Produk
|
||||||
</h2>
|
</h2>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
{/* Date Inputs Section - Above Table */}
|
<table className='table'>
|
||||||
<Card
|
<thead>
|
||||||
variant='bordered'
|
<tr>
|
||||||
className={{
|
<th>
|
||||||
wrapper: 'mb-6 w-full!',
|
Item
|
||||||
body: 'p-4!',
|
<span className='text-error'>*</span>
|
||||||
title: 'text-lg! font-semibold!',
|
</th>
|
||||||
}}
|
<th>
|
||||||
>
|
Tanggal Diterima
|
||||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
|
<span className='text-error'>*</span>
|
||||||
{formik.values.items?.map((item, idx) => (
|
</th>
|
||||||
<div key={`received-date-${idx}`} className='space-y-2'>
|
<th>
|
||||||
<DateInput
|
Gudang Tujuan
|
||||||
required
|
<span className='text-error'>*</span>
|
||||||
label={'Tanggal Penerimaan Produk'}
|
</th>
|
||||||
name={`items.${idx}.received_date`}
|
<th>
|
||||||
value={item.received_date || ''}
|
No. Surat Jalan
|
||||||
onChange={(e) =>
|
<span className='text-error'>*</span>
|
||||||
formik.setFieldValue(
|
</th>
|
||||||
`items.${idx}.received_date`,
|
<th>
|
||||||
e.target.value
|
Dokumen Surat Jalan
|
||||||
)
|
<span className='text-error'>*</span>
|
||||||
}
|
</th>
|
||||||
onBlur={formik.handleBlur}
|
<th>
|
||||||
isError={isRepeaterInputError(idx, 'received_date').isError}
|
Nomor Kendaraan
|
||||||
errorMessage={
|
<span className='text-error'>*</span>
|
||||||
isRepeaterInputError(idx, 'received_date').errorMessage
|
</th>
|
||||||
}
|
<th>
|
||||||
placeholder='Pilih tanggal diterima'
|
Vendor Ekspedisi
|
||||||
className={{
|
<span className='text-error'>*</span>
|
||||||
wrapper: 'w-full',
|
</th>
|
||||||
}}
|
<th>
|
||||||
isNestedModal={true}
|
Jumlah Diterima
|
||||||
/>
|
<span className='text-error'>*</span>
|
||||||
</div>
|
</th>
|
||||||
))}
|
<th>
|
||||||
</div>
|
Transport/Item
|
||||||
</Card>
|
<span className='text-error'>*</span>
|
||||||
|
</th>
|
||||||
<Table
|
<th>
|
||||||
data={tableData}
|
Total Transport
|
||||||
columns={columns}
|
<span className='text-error'>*</span>
|
||||||
className={{
|
</th>
|
||||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
</tr>
|
||||||
tableClassName: 'table table-auto w-full!',
|
</thead>
|
||||||
headerRowClassName: 'border-b border-b-gray-200',
|
<tbody>
|
||||||
headerColumnClassName:
|
{formik.values.items?.map((item, idx) => {
|
||||||
'px-2 py-3 text-xs font-semibold text-gray-500',
|
purchaseItems.find((p) => p.value === item.purchase_item_id);
|
||||||
bodyRowClassName: 'border-b border-b-gray-200',
|
return (
|
||||||
bodyColumnClassName: 'px-2 py-2',
|
<tr key={`purchase-item-${idx}`}>
|
||||||
paginationClassName: 'hidden',
|
<td>
|
||||||
}}
|
<SelectInput
|
||||||
emptyContent={
|
required
|
||||||
<div className='w-full p-5 text-center'>
|
isClearable={true}
|
||||||
<span className='text-lg opacity-50'>Belum ada data item...</span>
|
value={item.purchase_item}
|
||||||
</div>
|
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'}>
|
<div className={'col-span-2'}>
|
||||||
<TextInput
|
<TextInput
|
||||||
label='Notes'
|
label='Notes'
|
||||||
|
|||||||
@@ -9,8 +9,6 @@ import Button from '@/components/Button';
|
|||||||
import TextInput from '@/components/input/TextInput';
|
import TextInput from '@/components/input/TextInput';
|
||||||
import NumberInput from '@/components/input/NumberInput';
|
import NumberInput from '@/components/input/NumberInput';
|
||||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||||
import Table from '@/components/Table';
|
|
||||||
import * as TanStack from '@tanstack/react-table';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
PurchaseRequisitionsStaffApprovalFormDefaultValues,
|
PurchaseRequisitionsStaffApprovalFormDefaultValues,
|
||||||
@@ -23,7 +21,6 @@ import {
|
|||||||
CreateStaffApprovalRequisitionsPayload,
|
CreateStaffApprovalRequisitionsPayload,
|
||||||
Purchase,
|
Purchase,
|
||||||
} from '@/types/api/purchase/purchase';
|
} from '@/types/api/purchase/purchase';
|
||||||
import { PurchaseRequisitionsStaffApprovalFormValues } from './PurchaseOrderForm.schema';
|
|
||||||
|
|
||||||
interface PurchaseOrderStaffApprovalFormProps {
|
interface PurchaseOrderStaffApprovalFormProps {
|
||||||
type?: 'add' | 'edit';
|
type?: 'add' | 'edit';
|
||||||
@@ -57,7 +54,7 @@ const PurchaseOrderStaffApprovalForm = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ===== UTILITY FUNCTIONS =====
|
// ===== UTILITY FUNCTIONS =====
|
||||||
const isRepeaterInputError = (
|
const getPurchaseItemError = (
|
||||||
idx: number,
|
idx: number,
|
||||||
field: 'purchase_item_id' | 'price' | 'total_price'
|
field: 'purchase_item_id' | 'price' | 'total_price'
|
||||||
): { isError: boolean; errorMessage: string } => {
|
): { 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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<form
|
<form
|
||||||
@@ -573,28 +308,202 @@ const PurchaseOrderStaffApprovalForm = ({
|
|||||||
<h2 className='text-lg font-semibold mb-4'>
|
<h2 className='text-lg font-semibold mb-4'>
|
||||||
Konfirmasi Approve Pembelian
|
Konfirmasi Approve Pembelian
|
||||||
</h2>
|
</h2>
|
||||||
<Table
|
<div className='overflow-x-auto'>
|
||||||
data={tableData}
|
<table className='table'>
|
||||||
columns={columns}
|
<thead>
|
||||||
className={{
|
<tr>
|
||||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
<th>
|
||||||
tableClassName: 'table table-auto w-full!',
|
Item
|
||||||
headerRowClassName: 'border-b border-b-gray-200',
|
<span className='text-error'>*</span>
|
||||||
headerColumnClassName:
|
</th>
|
||||||
'px-2 py-3 text-xs font-semibold text-gray-500',
|
<th>Gudang</th>
|
||||||
bodyRowClassName: 'border-b border-b-gray-200',
|
<th>Produk</th>
|
||||||
bodyColumnClassName:
|
<th>Jenis Produk</th>
|
||||||
'px-2 py-2',
|
<th>Jumlah</th>
|
||||||
paginationClassName: 'hidden',
|
<th>Satuan</th>
|
||||||
}}
|
<th>
|
||||||
emptyContent={
|
Harga Satuan
|
||||||
<div className='w-full p-5 text-center'>
|
<span className='text-error'>*</span>
|
||||||
<span className='text-lg opacity-50'>
|
</th>
|
||||||
Belum ada data item...
|
<th>
|
||||||
</span>
|
Total (Rp.)
|
||||||
</div>
|
<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'}>
|
<div className={'col-span-2'}>
|
||||||
<TextInput
|
<TextInput
|
||||||
label='Notes'
|
label='Notes'
|
||||||
|
|||||||
Reference in New Issue
Block a user