mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-208,212): implement table-based UI for Purchase Order acceptance and staff approval forms
This commit is contained in:
rstubryan
@@ -9,6 +9,8 @@ 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 {
|
||||
PurchaseRequisitionsAcceptApprovalFormDefaultValues,
|
||||
@@ -21,6 +23,7 @@ import {
|
||||
CreateAcceptApprovalRequisitionsPayload,
|
||||
Purchase,
|
||||
} from '@/types/api/purchase/purchase';
|
||||
import { PurchaseRequisitionsAcceptApprovalFormValues } from './PurchaseOrderForm.schema';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
|
||||
interface PurchaseOrderAcceptApprovalFormProps {
|
||||
@@ -67,7 +70,7 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
|
||||
// ===== UTILITY FUNCTIONS =====
|
||||
const getPurchaseItemError = (
|
||||
const isRepeaterInputError = (
|
||||
idx: number,
|
||||
field:
|
||||
| 'purchase_item_id'
|
||||
@@ -392,78 +395,34 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
// ===== TABLE COLUMNS DEFINITION =====
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'purchase_item',
|
||||
header: () => (
|
||||
<div>
|
||||
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) => {
|
||||
const selectedPurchaseItem = purchaseItems.find(
|
||||
(p) => p.value === item.purchase_item_id
|
||||
);
|
||||
</div>
|
||||
),
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<tr key={`purchase-item-${idx}`}>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.purchase_item}
|
||||
value={item?.purchase_item}
|
||||
key={`purchase-item-${idx}`}
|
||||
onChange={(val) => purchaseItemChangeHandler(idx, val)}
|
||||
options={getPurchaseItemOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'purchase_item_id').isError
|
||||
isRepeaterInputError(idx, 'purchase_item_id').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'purchase_item_id')
|
||||
isRepeaterInputError(idx, 'purchase_item_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Item...'
|
||||
@@ -471,58 +430,61 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
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>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
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}
|
||||
value={item?.warehouse}
|
||||
key={`warehouse-${idx}`}
|
||||
onChange={(val) => warehouseChangeHandler(idx, val)}
|
||||
options={getWarehouseOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'warehouse_id').isError
|
||||
isRepeaterInputError(idx, 'warehouse_id').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'warehouse_id').errorMessage
|
||||
isRepeaterInputError(idx, 'warehouse_id').errorMessage
|
||||
}
|
||||
placeholder='Pilih Gudang...'
|
||||
className={{
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.travel_number`}
|
||||
type='text'
|
||||
value={item.travel_number || ''}
|
||||
value={item?.travel_number || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.travel_number`,
|
||||
@@ -531,10 +493,10 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'travel_number').isError
|
||||
isRepeaterInputError(idx, 'travel_number').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'travel_number')
|
||||
isRepeaterInputError(idx, 'travel_number')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Masukkan no. surat jalan'
|
||||
@@ -542,13 +504,27 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.travel_document_path`}
|
||||
type='text'
|
||||
value={item.travel_document_path || ''}
|
||||
value={item?.travel_document_path || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.travel_document_path`,
|
||||
@@ -557,11 +533,11 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'travel_document_path')
|
||||
isRepeaterInputError(idx, 'travel_document_path')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'travel_document_path')
|
||||
isRepeaterInputError(idx, 'travel_document_path')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Masukkan path dokumen'
|
||||
@@ -569,13 +545,27 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.vehicle_number`}
|
||||
type='text'
|
||||
value={item.vehicle_number || ''}
|
||||
value={item?.vehicle_number || ''}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.vehicle_number`,
|
||||
@@ -584,10 +574,10 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'vehicle_number').isError
|
||||
isRepeaterInputError(idx, 'vehicle_number').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'vehicle_number')
|
||||
isRepeaterInputError(idx, 'vehicle_number')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Masukkan nomor kendaraan'
|
||||
@@ -595,23 +585,37 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
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
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.expedition_vendor}
|
||||
value={item?.expedition_vendor}
|
||||
key={`expedition-vendor-${idx}`}
|
||||
onChange={(val) =>
|
||||
expeditionVendorChangeHandler(idx, val)
|
||||
}
|
||||
options={getExpeditionVendorOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'expedition_vendor_id')
|
||||
isRepeaterInputError(idx, 'expedition_vendor_id')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'expedition_vendor_id')
|
||||
isRepeaterInputError(idx, 'expedition_vendor_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Vendor...'
|
||||
@@ -619,12 +623,26 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.received_qty`}
|
||||
value={item.received_qty || ''}
|
||||
value={item?.received_qty || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
@@ -639,21 +657,35 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'received_qty').isError
|
||||
isRepeaterInputError(idx, 'received_qty').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'received_qty').errorMessage
|
||||
isRepeaterInputError(idx, 'received_qty').errorMessage
|
||||
}
|
||||
className={{
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.transport_per_item`}
|
||||
value={item.transport_per_item || ''}
|
||||
value={item?.transport_per_item || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
@@ -669,23 +701,37 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'transport_per_item')
|
||||
isRepeaterInputError(idx, 'transport_per_item')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'transport_per_item')
|
||||
isRepeaterInputError(idx, 'transport_per_item')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.transport_total`}
|
||||
value={item.transport_total || ''}
|
||||
value={item?.transport_total || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
@@ -701,23 +747,93 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'transport_total').isError
|
||||
isRepeaterInputError(idx, 'transport_total').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'transport_total')
|
||||
isRepeaterInputError(idx, 'transport_total')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
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 */}
|
||||
<div className='mb-4 space-y-3'>
|
||||
<h3 className='text-md font-semibold'>Tanggal Penerimaan Produk</h3>
|
||||
{formik.values.items?.map((item, idx) => (
|
||||
<div
|
||||
key={`received-date-${idx}`}
|
||||
className='flex items-center gap-4'
|
||||
>
|
||||
<div className='flex-1 max-w-sm'>
|
||||
<label className='block text-sm font-medium mb-1'>
|
||||
Item:{' '}
|
||||
{purchaseItems.find((p) => p.value === item.purchase_item_id)
|
||||
?.label || `Item ${idx + 1}`}
|
||||
</label>
|
||||
<DateInput
|
||||
required
|
||||
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 max-w-xs',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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'}>
|
||||
<TextInput
|
||||
label='Notes'
|
||||
|
||||
@@ -5,11 +5,12 @@ import { useFormik } from 'formik';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
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,
|
||||
@@ -22,7 +23,7 @@ import {
|
||||
CreateStaffApprovalRequisitionsPayload,
|
||||
Purchase,
|
||||
} from '@/types/api/purchase/purchase';
|
||||
|
||||
import { PurchaseRequisitionsStaffApprovalFormValues } from './PurchaseOrderForm.schema';
|
||||
|
||||
interface PurchaseOrderStaffApprovalFormProps {
|
||||
type?: 'add' | 'edit';
|
||||
@@ -56,7 +57,7 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}
|
||||
|
||||
// ===== UTILITY FUNCTIONS =====
|
||||
const getPurchaseItemError = (
|
||||
const isRepeaterInputError = (
|
||||
idx: number,
|
||||
field: 'purchase_item_id' | 'price' | 'total_price'
|
||||
): { isError: boolean; errorMessage: string } => {
|
||||
@@ -300,60 +301,37 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
// ===== TABLE COLUMNS DEFINITION =====
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'purchase_item',
|
||||
header: () => (
|
||||
<div>
|
||||
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
|
||||
);
|
||||
</div>
|
||||
),
|
||||
cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
|
||||
const idx = props.row.index;
|
||||
const item = formik.values.items?.[idx];
|
||||
|
||||
return (
|
||||
<tr key={`purchase-item-${idx}`}>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
isClearable={true}
|
||||
value={item.purchase_item}
|
||||
value={item?.purchase_item}
|
||||
key={`purchase-item-${idx}`}
|
||||
onChange={(val) =>
|
||||
purchaseItemChangeHandler(idx, val)
|
||||
}
|
||||
options={getPurchaseItemOptions()}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'purchase_item_id')
|
||||
isRepeaterInputError(idx, 'purchase_item_id')
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'purchase_item_id')
|
||||
isRepeaterInputError(idx, 'purchase_item_id')
|
||||
.errorMessage
|
||||
}
|
||||
placeholder='Pilih Item...'
|
||||
@@ -361,12 +339,23 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
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
|
||||
name={`items.${idx}.warehouse`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.warehouse?.name || ''}
|
||||
value={selectedItem?.warehouse?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
@@ -374,12 +363,23 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}}
|
||||
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
|
||||
name={`items.${idx}.product_name`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.product?.name || ''}
|
||||
value={selectedItem?.product?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
@@ -387,17 +387,26 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}}
|
||||
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
|
||||
name={`items.${idx}.product_category`}
|
||||
type='text'
|
||||
value={
|
||||
typeof selectedPurchaseItem?.product
|
||||
?.product_category === 'string'
|
||||
? selectedPurchaseItem.product.product_category
|
||||
: selectedPurchaseItem?.product
|
||||
?.product_category?.name || ''
|
||||
typeof selectedItem?.product?.product_category === 'string'
|
||||
? selectedItem.product.product_category
|
||||
: selectedItem?.product?.product_category?.name || ''
|
||||
}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
@@ -406,16 +415,25 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}}
|
||||
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
|
||||
name={`items.${idx}.quantity`}
|
||||
type='text'
|
||||
value={
|
||||
selectedPurchaseItem?.quantity
|
||||
? selectedPurchaseItem.quantity.toLocaleString(
|
||||
'id-ID'
|
||||
)
|
||||
selectedItem?.quantity
|
||||
? selectedItem.quantity.toLocaleString('id-ID')
|
||||
: ''
|
||||
}
|
||||
readOnly={true}
|
||||
@@ -425,14 +443,23 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}}
|
||||
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
|
||||
name={`items.${idx}.uom`}
|
||||
type='text'
|
||||
value={
|
||||
selectedPurchaseItem?.product?.uom?.name || ''
|
||||
}
|
||||
value={selectedItem?.product?.uom?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
@@ -440,12 +467,26 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
}}
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.price`}
|
||||
value={item.price || ''}
|
||||
value={item?.price || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
@@ -460,20 +501,34 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={getPurchaseItemError(idx, 'price').isError}
|
||||
isError={isRepeaterInputError(idx, 'price').isError}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'price').errorMessage
|
||||
isRepeaterInputError(idx, 'price').errorMessage
|
||||
}
|
||||
className={{
|
||||
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
|
||||
required
|
||||
name={`items.${idx}.total_price`}
|
||||
value={item.total_price || ''}
|
||||
value={item?.total_price || ''}
|
||||
onChange={(e) =>
|
||||
handlePurchaseItemChange(
|
||||
idx,
|
||||
@@ -489,23 +544,57 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
decimalSeparator='.'
|
||||
inputPrefix={'Rp'}
|
||||
isError={
|
||||
getPurchaseItemError(idx, 'total_price').isError
|
||||
isRepeaterInputError(idx, 'total_price').isError
|
||||
}
|
||||
errorMessage={
|
||||
getPurchaseItemError(idx, 'total_price')
|
||||
isRepeaterInputError(idx, 'total_price')
|
||||
.errorMessage
|
||||
}
|
||||
className={{
|
||||
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 className={'col-span-2'}>
|
||||
<TextInput
|
||||
label='Notes'
|
||||
|
||||
Reference in New Issue
Block a user