gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE-208): refactor Purchase Order forms to use table layout for improved readability and maintainability

Browse Source
This commit is contained in:
rstubryan
2025-11-12 21:52:02 +07:00
parent cd8ab8844b
commit 4a974048a7
2 changed files with 516 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+166 -306
View File
@@ -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,106 +392,135 @@ const PurchaseOrderAcceptApprovalForm = ({
} }
}; };
// ===== TABLE COLUMNS DEFINITION ===== return (
const columns = useMemo( <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
() => [ <div className='w-full'>
{ <h2 className='text-lg font-semibold mb-4'>
accessorKey: 'purchase_item', Konfirmasi Penerimaan Produk
header: () => ( </h2>
<div> <div className='overflow-x-auto'>
<table className='table'>
<thead>
<tr>
<th>
Item Item
<span className='text-error'>*</span> <span className='text-error'>*</span>
</div> </th>
), <th>
cell: ( Tanggal Diterima
props: TanStack.CellContext< <span className='text-error'>*</span>
PurchaseRequisitionsAcceptApprovalFormValues['items'][0], </th>
unknown <th>
> Gudang Tujuan
) => { <span className='text-error'>*</span>
const idx = props.row.index; </th>
const item = formik.values.items?.[idx]; <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 ( return (
<tr key={`purchase-item-${idx}`}>
<td>
<SelectInput <SelectInput
required required
isClearable={true} isClearable={true}
value={item?.purchase_item} value={item.purchase_item}
key={`purchase-item-${idx}`} key={`purchase-item-${idx}`}
onChange={(val) => purchaseItemChangeHandler(idx, val)} onChange={(val) => purchaseItemChangeHandler(idx, val)}
options={getPurchaseItemOptions()} options={getPurchaseItemOptions()}
isError={isRepeaterInputError(idx, 'purchase_item_id').isError} isError={
getPurchaseItemError(idx, 'purchase_item_id').isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'purchase_item_id').errorMessage getPurchaseItemError(idx, 'purchase_item_id')
.errorMessage
} }
placeholder='Pilih Item...' placeholder='Pilih Item...'
className={{ className={{
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80', wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
); </td>
}, <td>
}, <DateInput
{ required
accessorKey: 'warehouse_id', isNestedModal={true}
header: () => ( name={`items.${idx}.received_date`}
<div> value={item.received_date || ''}
Gudang Tujuan onChange={(e) =>
<span className='text-error'>*</span> formik.setFieldValue(
</div> `items.${idx}.received_date`,
), e.target.value
cell: ( )
props: TanStack.CellContext< }
PurchaseRequisitionsAcceptApprovalFormValues['items'][0], onBlur={formik.handleBlur}
unknown isError={
> getPurchaseItemError(idx, 'received_date').isError
) => { }
const idx = props.row.index; errorMessage={
const item = formik.values.items?.[idx]; getPurchaseItemError(idx, 'received_date')
.errorMessage
return ( }
className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
}}
/>
</td>
<td>
<SelectInput <SelectInput
required required
isClearable={true} isClearable={true}
value={item?.warehouse} value={item.warehouse}
key={`warehouse-${idx}`} key={`warehouse-${idx}`}
onChange={(val) => warehouseChangeHandler(idx, val)} onChange={(val) => warehouseChangeHandler(idx, val)}
options={getWarehouseOptions()} options={getWarehouseOptions()}
isError={isRepeaterInputError(idx, 'warehouse_id').isError} isError={
getPurchaseItemError(idx, 'warehouse_id').isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'warehouse_id').errorMessage getPurchaseItemError(idx, 'warehouse_id').errorMessage
} }
placeholder='Pilih Gudang...' placeholder='Pilih Gudang...'
className={{ className={{
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80', wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
); </td>
}, <td>
},
{
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 <TextInput
required required
name={`items.${idx}.travel_number`} name={`items.${idx}.travel_number`}
type='text' type='text'
value={item?.travel_number || ''} value={item.travel_number || ''}
onChange={(e) => onChange={(e) =>
formik.setFieldValue( formik.setFieldValue(
`items.${idx}.travel_number`, `items.${idx}.travel_number`,
@@ -503,41 +528,25 @@ const PurchaseOrderAcceptApprovalForm = ({
) )
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
isError={isRepeaterInputError(idx, 'travel_number').isError} isError={
getPurchaseItemError(idx, 'travel_number').isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'travel_number').errorMessage getPurchaseItemError(idx, 'travel_number')
.errorMessage
} }
placeholder='Masukkan no. surat jalan' placeholder='Masukkan no. surat jalan'
className={{ className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64', wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
}} }}
/> />
); </td>
}, <td>
},
{
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 <TextInput
required required
name={`items.${idx}.travel_document_path`} name={`items.${idx}.travel_document_path`}
type='text' type='text'
value={item?.travel_document_path || ''} value={item.travel_document_path || ''}
onChange={(e) => onChange={(e) =>
formik.setFieldValue( formik.setFieldValue(
`items.${idx}.travel_document_path`, `items.${idx}.travel_document_path`,
@@ -546,42 +555,25 @@ const PurchaseOrderAcceptApprovalForm = ({
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
isError={ isError={
isRepeaterInputError(idx, 'travel_document_path').isError getPurchaseItemError(idx, 'travel_document_path')
.isError
} }
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'travel_document_path').errorMessage getPurchaseItemError(idx, 'travel_document_path')
.errorMessage
} }
placeholder='Masukkan path dokumen' placeholder='Masukkan path dokumen'
className={{ className={{
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80', wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
); </td>
}, <td>
},
{
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 <TextInput
required required
name={`items.${idx}.vehicle_number`} name={`items.${idx}.vehicle_number`}
type='text' type='text'
value={item?.vehicle_number || ''} value={item.vehicle_number || ''}
onChange={(e) => onChange={(e) =>
formik.setFieldValue( formik.setFieldValue(
`items.${idx}.vehicle_number`, `items.${idx}.vehicle_number`,
@@ -589,81 +581,54 @@ const PurchaseOrderAcceptApprovalForm = ({
) )
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
isError={isRepeaterInputError(idx, 'vehicle_number').isError} isError={
getPurchaseItemError(idx, 'vehicle_number').isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'vehicle_number').errorMessage getPurchaseItemError(idx, 'vehicle_number')
.errorMessage
} }
placeholder='Masukkan nomor kendaraan' placeholder='Masukkan nomor kendaraan'
className={{ className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64', wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
}} }}
/> />
); </td>
}, <td>
},
{
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 <SelectInput
required required
isClearable={true} isClearable={true}
value={item?.expedition_vendor} value={item.expedition_vendor}
key={`expedition-vendor-${idx}`} key={`expedition-vendor-${idx}`}
onChange={(val) => expeditionVendorChangeHandler(idx, val)} onChange={(val) =>
expeditionVendorChangeHandler(idx, val)
}
options={getExpeditionVendorOptions()} options={getExpeditionVendorOptions()}
isError={ isError={
isRepeaterInputError(idx, 'expedition_vendor_id').isError getPurchaseItemError(idx, 'expedition_vendor_id')
.isError
} }
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'expedition_vendor_id').errorMessage getPurchaseItemError(idx, 'expedition_vendor_id')
.errorMessage
} }
placeholder='Pilih Vendor...' placeholder='Pilih Vendor...'
className={{ className={{
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72', wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
}} }}
/> />
); </td>
}, <td>
},
{
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 <NumberInput
required required
name={`items.${idx}.received_qty`} name={`items.${idx}.received_qty`}
value={item?.received_qty || ''} value={item.received_qty || ''}
onChange={(e) => onChange={(e) =>
handlePurchaseItemChange(idx, 'received_qty', e.target.value) handlePurchaseItemChange(
idx,
'received_qty',
e.target.value
)
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
placeholder='Masukkan jumlah diterima' placeholder='Masukkan jumlah diterima'
@@ -671,39 +636,22 @@ const PurchaseOrderAcceptApprovalForm = ({
decimalScale={0} decimalScale={0}
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
isError={isRepeaterInputError(idx, 'received_qty').isError} isError={
getPurchaseItemError(idx, 'received_qty').isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'received_qty').errorMessage getPurchaseItemError(idx, 'received_qty').errorMessage
} }
className={{ className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64', wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
}} }}
/> />
); </td>
}, <td>
},
{
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 <NumberInput
required required
name={`items.${idx}.transport_per_item`} name={`items.${idx}.transport_per_item`}
value={item?.transport_per_item || ''} value={item.transport_per_item || ''}
onChange={(e) => onChange={(e) =>
handlePurchaseItemChange( handlePurchaseItemChange(
idx, idx,
@@ -718,41 +666,30 @@ const PurchaseOrderAcceptApprovalForm = ({
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
inputPrefix={'Rp'} inputPrefix={'Rp'}
isError={isRepeaterInputError(idx, 'transport_per_item').isError} isError={
getPurchaseItemError(idx, 'transport_per_item')
.isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'transport_per_item').errorMessage getPurchaseItemError(idx, 'transport_per_item')
.errorMessage
} }
className={{ className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64', wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
}} }}
/> />
); </td>
}, <td>
},
{
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 <NumberInput
required required
name={`items.${idx}.transport_total`} name={`items.${idx}.transport_total`}
value={item?.transport_total || ''} value={item.transport_total || ''}
onChange={(e) => onChange={(e) =>
handlePurchaseItemChange(idx, 'transport_total', e.target.value) handlePurchaseItemChange(
idx,
'transport_total',
e.target.value
)
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
placeholder='Masukkan total transport' placeholder='Masukkan total transport'
@@ -761,101 +698,24 @@ const PurchaseOrderAcceptApprovalForm = ({
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
inputPrefix={'Rp'} inputPrefix={'Rp'}
isError={isRepeaterInputError(idx, 'transport_total').isError} isError={
getPurchaseItemError(idx, 'transport_total').isError
}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'transport_total').errorMessage getPurchaseItemError(idx, 'transport_total')
.errorMessage
} }
className={{ className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64', wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
}} }}
/> />
</td>
</tr>
); );
}, })}
}, </tbody>
], </table>
[
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>
))}
</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={'col-span-2'}> <div className={'col-span-2'}>
<TextInput <TextInput
label='Notes' label='Notes'
src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+79 -170
View File
@@ -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,37 +298,62 @@ const PurchaseOrderStaffApprovalForm = ({
} }
}; };
// ===== TABLE COLUMNS DEFINITION ===== return (
const columns = useMemo( <>
() => [ <form
{ onSubmit={formik.handleSubmit}
accessorKey: 'purchase_item', className='w-full flex flex-col gap-6'
header: () => ( >
<div> <div className='w-full'>
<h2 className='text-lg font-semibold mb-4'>
Konfirmasi Approve Pembelian
</h2>
<div className='overflow-x-auto'>
<table className='table'>
<thead>
<tr>
<th>
Item Item
<span className='text-error'>*</span> <span className='text-error'>*</span>
</div> </th>
), <th>Gudang</th>
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => { <th>Produk</th>
const idx = props.row.index; <th>Jenis Produk</th>
const item = formik.values.items?.[idx]; <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 ( return (
<tr key={`purchase-item-${idx}`}>
<td>
<SelectInput <SelectInput
required required
isClearable={true} isClearable={true}
value={item?.purchase_item} value={item.purchase_item}
key={`purchase-item-${idx}`} key={`purchase-item-${idx}`}
onChange={(val) => onChange={(val) =>
purchaseItemChangeHandler(idx, val) purchaseItemChangeHandler(idx, val)
} }
options={getPurchaseItemOptions()} options={getPurchaseItemOptions()}
isError={ isError={
isRepeaterInputError(idx, 'purchase_item_id') getPurchaseItemError(idx, 'purchase_item_id')
.isError .isError
} }
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'purchase_item_id') getPurchaseItemError(idx, 'purchase_item_id')
.errorMessage .errorMessage
} }
placeholder='Pilih Item...' placeholder='Pilih Item...'
@@ -339,23 +361,12 @@ const PurchaseOrderStaffApprovalForm = ({
wrapper: 'min-w-52 md:min-w-72 lg:min-w-80', wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
); </td>
}, <td>
},
{
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 <TextInput
name={`items.${idx}.warehouse`} name={`items.${idx}.warehouse`}
type='text' type='text'
value={selectedItem?.warehouse?.name || ''} value={selectedPurchaseItem?.warehouse?.name || ''}
readOnly={true} readOnly={true}
placeholder='Pilih item terlebih dahulu' placeholder='Pilih item terlebih dahulu'
className={{ className={{
@@ -363,23 +374,12 @@ const PurchaseOrderStaffApprovalForm = ({
}} }}
disabled={true} disabled={true}
/> />
); </td>
}, <td>
},
{
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 <TextInput
name={`items.${idx}.product_name`} name={`items.${idx}.product_name`}
type='text' type='text'
value={selectedItem?.product?.name || ''} value={selectedPurchaseItem?.product?.name || ''}
readOnly={true} readOnly={true}
placeholder='Pilih item terlebih dahulu' placeholder='Pilih item terlebih dahulu'
className={{ className={{
@@ -387,26 +387,17 @@ const PurchaseOrderStaffApprovalForm = ({
}} }}
disabled={true} disabled={true}
/> />
); </td>
}, <td>
},
{
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 <TextInput
name={`items.${idx}.product_category`} name={`items.${idx}.product_category`}
type='text' type='text'
value={ value={
typeof selectedItem?.product?.product_category === 'string' typeof selectedPurchaseItem?.product
? selectedItem.product.product_category ?.product_category === 'string'
: selectedItem?.product?.product_category?.name || '' ? selectedPurchaseItem.product.product_category
: selectedPurchaseItem?.product?.product_category
?.name || ''
} }
readOnly={true} readOnly={true}
placeholder='Pilih item terlebih dahulu' placeholder='Pilih item terlebih dahulu'
@@ -415,25 +406,16 @@ const PurchaseOrderStaffApprovalForm = ({
}} }}
disabled={true} disabled={true}
/> />
); </td>
}, <td>
},
{
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 <TextInput
name={`items.${idx}.quantity`} name={`items.${idx}.quantity`}
type='text' type='text'
value={ value={
selectedItem?.quantity selectedPurchaseItem?.quantity
? selectedItem.quantity.toLocaleString('id-ID') ? selectedPurchaseItem.quantity.toLocaleString(
'id-ID'
)
: '' : ''
} }
readOnly={true} readOnly={true}
@@ -443,23 +425,12 @@ const PurchaseOrderStaffApprovalForm = ({
}} }}
disabled={true} disabled={true}
/> />
); </td>
}, <td>
},
{
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 <TextInput
name={`items.${idx}.uom`} name={`items.${idx}.uom`}
type='text' type='text'
value={selectedItem?.product?.uom?.name || ''} value={selectedPurchaseItem?.product?.uom?.name || ''}
readOnly={true} readOnly={true}
placeholder='Pilih item terlebih dahulu' placeholder='Pilih item terlebih dahulu'
className={{ className={{
@@ -467,26 +438,12 @@ const PurchaseOrderStaffApprovalForm = ({
}} }}
disabled={true} disabled={true}
/> />
); </td>
}, <td>
},
{
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 <NumberInput
required required
name={`items.${idx}.price`} name={`items.${idx}.price`}
value={item?.price || ''} value={item.price || ''}
onChange={(e) => onChange={(e) =>
handlePurchaseItemChange( handlePurchaseItemChange(
idx, idx,
@@ -501,34 +458,20 @@ const PurchaseOrderStaffApprovalForm = ({
thousandSeparator=',' thousandSeparator=','
decimalSeparator='.' decimalSeparator='.'
inputPrefix={'Rp'} inputPrefix={'Rp'}
isError={isRepeaterInputError(idx, 'price').isError} isError={getPurchaseItemError(idx, 'price').isError}
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'price').errorMessage getPurchaseItemError(idx, 'price').errorMessage
} }
className={{ className={{
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72', wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
}} }}
/> />
); </td>
}, <td>
},
{
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 <NumberInput
required required
name={`items.${idx}.total_price`} name={`items.${idx}.total_price`}
value={item?.total_price || ''} value={item.total_price || ''}
onChange={(e) => onChange={(e) =>
handlePurchaseItemChange( handlePurchaseItemChange(
idx, idx,
@@ -544,57 +487,23 @@ const PurchaseOrderStaffApprovalForm = ({
decimalSeparator='.' decimalSeparator='.'
inputPrefix={'Rp'} inputPrefix={'Rp'}
isError={ isError={
isRepeaterInputError(idx, 'total_price').isError getPurchaseItemError(idx, 'total_price').isError
} }
errorMessage={ errorMessage={
isRepeaterInputError(idx, 'total_price') getPurchaseItemError(idx, 'total_price')
.errorMessage .errorMessage
} }
className={{ className={{
wrapper: 'min-w-48 md:min-w-64 lg:min-w-72', wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
}} }}
/> />
</td>
</tr>
); );
}, })}
}, </tbody>
], </table>
[formik.values.items, formik.handleBlur, purchaseItemChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, purchaseItems]
);
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 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>
}
/>
<div className={'col-span-2'}> <div className={'col-span-2'}>
<TextInput <TextInput
label='Notes' label='Notes'