mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-208,212): enhance PurchaseOrder forms with onCancel functionality and UI improvements
This commit is contained in:
rstubryan
@@ -10,6 +10,7 @@ import Table from '@/components/Table';
|
||||
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
|
||||
import Button from '@/components/Button';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import Modal from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
@@ -21,6 +22,8 @@ import TextInput from '@/components/input/TextInput';
|
||||
import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
|
||||
|
||||
import { cn, formatDate, formatCurrency } from '@/lib/helper';
|
||||
import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
|
||||
import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
@@ -108,6 +111,8 @@ const PurchaseTable = () => {
|
||||
|
||||
// Modal hooks
|
||||
const deleteModal = useModal();
|
||||
const staffApprovalModal = useModal();
|
||||
const acceptApprovalModal = useModal();
|
||||
|
||||
// Supplier modal
|
||||
const {
|
||||
@@ -282,6 +287,30 @@ const PurchaseTable = () => {
|
||||
Tambah
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => staffApprovalModal.openModal()}
|
||||
variant='outline'
|
||||
color='info'
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='mdi:account-check-outline' width={24} height={24} />
|
||||
Staff Approval
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => acceptApprovalModal.openModal()}
|
||||
variant='outline'
|
||||
color='success'
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:package-variant-closed-check'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Accept Approval
|
||||
</Button>
|
||||
|
||||
{selectedRowIds.length > 0 && (
|
||||
<Button
|
||||
variant='outline'
|
||||
@@ -418,6 +447,34 @@ const PurchaseTable = () => {
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Staff Approval Modal */}
|
||||
<Modal
|
||||
ref={staffApprovalModal.ref}
|
||||
closeOnBackdrop
|
||||
className={{
|
||||
modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
|
||||
}}
|
||||
>
|
||||
<PurchaseOrderStaffApprovalForm
|
||||
type='add'
|
||||
onCancel={staffApprovalModal.closeModal}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
{/* Accept Approval Modal */}
|
||||
<Modal
|
||||
ref={acceptApprovalModal.ref}
|
||||
closeOnBackdrop
|
||||
className={{
|
||||
modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
|
||||
}}
|
||||
>
|
||||
<PurchaseOrderAcceptApprovalForm
|
||||
type='add'
|
||||
onCancel={acceptApprovalModal.closeModal}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -23,16 +23,16 @@ import {
|
||||
Purchase,
|
||||
} from '@/types/api/purchase/purchase';
|
||||
|
||||
import Card from '@/components/Card';
|
||||
|
||||
interface PurchaseOrderAcceptApprovalFormProps {
|
||||
type?: 'add' | 'edit';
|
||||
initialValues?: Purchase;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
const PurchaseOrderAcceptApprovalForm = ({
|
||||
type = 'add',
|
||||
initialValues,
|
||||
onCancel,
|
||||
}: PurchaseOrderAcceptApprovalFormProps) => {
|
||||
const searchParams = useSearchParams();
|
||||
const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
|
||||
@@ -121,6 +121,7 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
onCancel?.();
|
||||
},
|
||||
[initialValues?.id, searchParams]
|
||||
);
|
||||
@@ -136,6 +137,7 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
onCancel?.();
|
||||
window.location.href = '/purchase';
|
||||
},
|
||||
[]
|
||||
@@ -330,10 +332,7 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
formik.setFieldTouched(`items.${idx}.warehouse`, true);
|
||||
formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
|
||||
formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
|
||||
formik.setFieldValue(
|
||||
`items.${idx}.warehouse_id`,
|
||||
warehouse?.value || 0
|
||||
);
|
||||
formik.setFieldValue(`items.${idx}.warehouse_id`, warehouse?.value || 0);
|
||||
};
|
||||
|
||||
const expeditionVendorChangeHandler = (
|
||||
@@ -394,478 +393,462 @@ const PurchaseOrderAcceptApprovalForm = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full'>
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
className='w-full mt-8 flex flex-col gap-6'
|
||||
>
|
||||
<Card
|
||||
title='Konfirmasi Penerimaan Produk'
|
||||
className={{
|
||||
wrapper: 'w-full mb-4 shadow',
|
||||
title: 'mb-4',
|
||||
}}
|
||||
>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Item
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>Gudang</th>
|
||||
<th>Produk</th>
|
||||
<th>Jenis Produk</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Satuan</th>
|
||||
<th>
|
||||
Tanggal Diterima
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Gudang Tujuan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Nomor Perjalanan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Dokumen Perjalanan
|
||||
<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>
|
||||
<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>
|
||||
Item
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>Gudang</th>
|
||||
<th>Produk</th>
|
||||
<th>Jenis Produk</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Satuan</th>
|
||||
<th>
|
||||
Tanggal Diterima
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Gudang Tujuan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Nomor Perjalanan
|
||||
<span className='text-error'>*</span>
|
||||
</th>
|
||||
<th>
|
||||
Dokumen Perjalanan
|
||||
<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
|
||||
);
|
||||
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-48',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.warehouse`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.warehouse?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-32',
|
||||
}}
|
||||
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-48',
|
||||
}}
|
||||
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-32',
|
||||
}}
|
||||
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>
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.received_date`}
|
||||
type='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-36',
|
||||
}}
|
||||
/>
|
||||
</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-48',
|
||||
}}
|
||||
/>
|
||||
</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 nomor perjalanan'
|
||||
className={{
|
||||
wrapper: 'min-w-32',
|
||||
}}
|
||||
/>
|
||||
</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-48',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</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-40',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</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-48',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
name={`items.${idx}.warehouse`}
|
||||
type='text'
|
||||
value={selectedPurchaseItem?.warehouse?.name || ''}
|
||||
readOnly={true}
|
||||
placeholder='Pilih item terlebih dahulu'
|
||||
className={{
|
||||
wrapper: 'min-w-32',
|
||||
}}
|
||||
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-48',
|
||||
}}
|
||||
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-32',
|
||||
}}
|
||||
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>
|
||||
<TextInput
|
||||
required
|
||||
name={`items.${idx}.received_date`}
|
||||
type='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-36',
|
||||
}}
|
||||
/>
|
||||
</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-48',
|
||||
}}
|
||||
/>
|
||||
</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 nomor perjalanan'
|
||||
className={{
|
||||
wrapper: 'min-w-32',
|
||||
}}
|
||||
/>
|
||||
</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-48',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</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-40',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</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-32',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={'col-span-2'}>
|
||||
<TextInput
|
||||
label='Notes'
|
||||
name='notes'
|
||||
value={formik.values.notes || ''}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.notes && Boolean(formik.errors.notes)}
|
||||
errorMessage={formik.errors.notes as string}
|
||||
placeholder='Masukkan catatan'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={'col-span-2'}>
|
||||
<TextInput
|
||||
label='Notes'
|
||||
name='notes'
|
||||
value={formik.values.notes || ''}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.notes && Boolean(formik.errors.notes)}
|
||||
errorMessage={formik.errors.notes as string}
|
||||
placeholder='Masukkan catatan'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
|
||||
<div className='flex flex-row justify-end gap-2 w-full'>
|
||||
<Link href='/purchase'>
|
||||
<Button color='warning' className='px-4'>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
{/* Action buttons */}
|
||||
<div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
|
||||
<div className='flex flex-row justify-end gap-2 w-full'>
|
||||
<Button
|
||||
type='button'
|
||||
color='warning'
|
||||
className='px-4'
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
className='px-4'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
className='px-4'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{purchaseOrderFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{purchaseOrderFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</form>
|
||||
</section>
|
||||
</>
|
||||
{purchaseOrderFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{purchaseOrderFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -23,16 +23,17 @@ import {
|
||||
Purchase,
|
||||
} from '@/types/api/purchase/purchase';
|
||||
|
||||
import Card from '@/components/Card';
|
||||
|
||||
interface PurchaseOrderStaffApprovalFormProps {
|
||||
type?: 'add' | 'edit';
|
||||
initialValues?: Purchase;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
const PurchaseOrderStaffApprovalForm = ({
|
||||
type = 'add',
|
||||
initialValues,
|
||||
onCancel,
|
||||
}: PurchaseOrderStaffApprovalFormProps) => {
|
||||
const searchParams = useSearchParams();
|
||||
const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
|
||||
@@ -99,6 +100,7 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
onCancel?.();
|
||||
},
|
||||
[initialValues?.id, searchParams]
|
||||
);
|
||||
@@ -117,6 +119,7 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
onCancel?.();
|
||||
window.location.href = '/purchase';
|
||||
},
|
||||
[]
|
||||
@@ -299,18 +302,12 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full'>
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
className='w-full mt-8 flex flex-col gap-6'
|
||||
>
|
||||
<Card
|
||||
title='Konfirmasi Approve Pembelian'
|
||||
className={{
|
||||
wrapper: 'w-full mb-4 shadow',
|
||||
title: 'mb-4',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
@@ -525,11 +522,14 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
{/* Action buttons */}
|
||||
<div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
|
||||
<div className='flex flex-row justify-end gap-2 w-full'>
|
||||
<Link href='/purchase'>
|
||||
<Button color='warning' className='px-4'>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
type='button'
|
||||
color='warning'
|
||||
className='px-4'
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type='submit'
|
||||
@@ -543,19 +543,18 @@ const PurchaseOrderStaffApprovalForm = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{purchaseOrderFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{purchaseOrderFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</form>
|
||||
</section>
|
||||
{purchaseOrderFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{purchaseOrderFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user