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

feat(FE-208): enhance Purchase Order acceptance form with Card component and improved layout for received date inputs

Browse Source
This commit is contained in:
rstubryan
2025-11-12 20:43:34 +07:00
parent 5d88af1a31
commit cd8ab8844b
1 changed files with 108 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+105 -83
View File
@@ -10,6 +10,7 @@ import TextInput from '@/components/input/TextInput';
import NumberInput from '@/components/input/NumberInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import Table from '@/components/Table';
import Card from '@/components/Card';
import * as TanStack from '@tanstack/react-table';
import {
@@ -406,7 +407,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -418,12 +424,9 @@ const PurchaseOrderAcceptApprovalForm = ({
key={`purchase-item-${idx}`}
onChange={(val) => purchaseItemChangeHandler(idx, val)}
options={getPurchaseItemOptions()}
isError={
isRepeaterInputError(idx, 'purchase_item_id').isError
}
isError={isRepeaterInputError(idx, 'purchase_item_id').isError}
errorMessage={
isRepeaterInputError(idx, 'purchase_item_id')
.errorMessage
isRepeaterInputError(idx, 'purchase_item_id').errorMessage
}
placeholder='Pilih Item...'
className={{
@@ -441,7 +444,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -453,9 +461,7 @@ const PurchaseOrderAcceptApprovalForm = ({
key={`warehouse-${idx}`}
onChange={(val) => warehouseChangeHandler(idx, val)}
options={getWarehouseOptions()}
isError={
isRepeaterInputError(idx, 'warehouse_id').isError
}
isError={isRepeaterInputError(idx, 'warehouse_id').isError}
errorMessage={
isRepeaterInputError(idx, 'warehouse_id').errorMessage
}
@@ -475,7 +481,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -492,12 +503,9 @@ const PurchaseOrderAcceptApprovalForm = ({
)
}
onBlur={formik.handleBlur}
isError={
isRepeaterInputError(idx, 'travel_number').isError
}
isError={isRepeaterInputError(idx, 'travel_number').isError}
errorMessage={
isRepeaterInputError(idx, 'travel_number')
.errorMessage
isRepeaterInputError(idx, 'travel_number').errorMessage
}
placeholder='Masukkan no. surat jalan'
className={{
@@ -515,7 +523,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -533,12 +546,10 @@ const PurchaseOrderAcceptApprovalForm = ({
}
onBlur={formik.handleBlur}
isError={
isRepeaterInputError(idx, 'travel_document_path')
.isError
isRepeaterInputError(idx, 'travel_document_path').isError
}
errorMessage={
isRepeaterInputError(idx, 'travel_document_path')
.errorMessage
isRepeaterInputError(idx, 'travel_document_path').errorMessage
}
placeholder='Masukkan path dokumen'
className={{
@@ -556,7 +567,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -573,12 +589,9 @@ const PurchaseOrderAcceptApprovalForm = ({
)
}
onBlur={formik.handleBlur}
isError={
isRepeaterInputError(idx, 'vehicle_number').isError
}
isError={isRepeaterInputError(idx, 'vehicle_number').isError}
errorMessage={
isRepeaterInputError(idx, 'vehicle_number')
.errorMessage
isRepeaterInputError(idx, 'vehicle_number').errorMessage
}
placeholder='Masukkan nomor kendaraan'
className={{
@@ -596,7 +609,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -606,17 +624,13 @@ const PurchaseOrderAcceptApprovalForm = ({
isClearable={true}
value={item?.expedition_vendor}
key={`expedition-vendor-${idx}`}
onChange={(val) =>
expeditionVendorChangeHandler(idx, val)
}
onChange={(val) => expeditionVendorChangeHandler(idx, val)}
options={getExpeditionVendorOptions()}
isError={
isRepeaterInputError(idx, 'expedition_vendor_id')
.isError
isRepeaterInputError(idx, 'expedition_vendor_id').isError
}
errorMessage={
isRepeaterInputError(idx, 'expedition_vendor_id')
.errorMessage
isRepeaterInputError(idx, 'expedition_vendor_id').errorMessage
}
placeholder='Pilih Vendor...'
className={{
@@ -634,7 +648,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -644,11 +663,7 @@ const PurchaseOrderAcceptApprovalForm = ({
name={`items.${idx}.received_qty`}
value={item?.received_qty || ''}
onChange={(e) =>
handlePurchaseItemChange(
idx,
'received_qty',
e.target.value
)
handlePurchaseItemChange(idx, 'received_qty', e.target.value)
}
onBlur={formik.handleBlur}
placeholder='Masukkan jumlah diterima'
@@ -656,9 +671,7 @@ const PurchaseOrderAcceptApprovalForm = ({
decimalScale={0}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError(idx, 'received_qty').isError
}
isError={isRepeaterInputError(idx, 'received_qty').isError}
errorMessage={
isRepeaterInputError(idx, 'received_qty').errorMessage
}
@@ -677,7 +690,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -700,13 +718,9 @@ const PurchaseOrderAcceptApprovalForm = ({
thousandSeparator=','
decimalSeparator='.'
inputPrefix={'Rp'}
isError={
isRepeaterInputError(idx, 'transport_per_item')
.isError
}
isError={isRepeaterInputError(idx, 'transport_per_item').isError}
errorMessage={
isRepeaterInputError(idx, 'transport_per_item')
.errorMessage
isRepeaterInputError(idx, 'transport_per_item').errorMessage
}
className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -723,7 +737,12 @@ const PurchaseOrderAcceptApprovalForm = ({
<span className='text-error'>*</span>
</div>
),
cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
cell: (
props: TanStack.CellContext<
PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
unknown
>
) => {
const idx = props.row.index;
const item = formik.values.items?.[idx];
@@ -733,11 +752,7 @@ const PurchaseOrderAcceptApprovalForm = ({
name={`items.${idx}.transport_total`}
value={item?.transport_total || ''}
onChange={(e) =>
handlePurchaseItemChange(
idx,
'transport_total',
e.target.value
)
handlePurchaseItemChange(idx, 'transport_total', e.target.value)
}
onBlur={formik.handleBlur}
placeholder='Masukkan total transport'
@@ -746,12 +761,9 @@ const PurchaseOrderAcceptApprovalForm = ({
thousandSeparator=','
decimalSeparator='.'
inputPrefix={'Rp'}
isError={
isRepeaterInputError(idx, 'transport_total').isError
}
isError={isRepeaterInputError(idx, 'transport_total').isError}
errorMessage={
isRepeaterInputError(idx, 'transport_total')
.errorMessage
isRepeaterInputError(idx, 'transport_total').errorMessage
}
className={{
wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -761,10 +773,23 @@ const PurchaseOrderAcceptApprovalForm = ({
},
},
],
[formik.values.items, formik.handleBlur, purchaseItemChangeHandler, warehouseChangeHandler, expeditionVendorChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, getWarehouseOptions, getExpeditionVendorOptions]
[
formik.values.items,
formik.handleBlur,
purchaseItemChangeHandler,
warehouseChangeHandler,
expeditionVendorChangeHandler,
handlePurchaseItemChange,
getPurchaseItemOptions,
getWarehouseOptions,
getExpeditionVendorOptions,
]
);
const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
const tableData = useMemo(
() => formik.values.items || [],
[formik.values.items]
);
return (
<form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
@@ -774,21 +799,20 @@ const PurchaseOrderAcceptApprovalForm = ({
</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'
<Card
variant='bordered'
className={{
wrapper: 'mb-6 w-full!',
body: 'p-4!',
title: 'text-lg! font-semibold!',
}}
>
<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>
<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) =>
@@ -804,13 +828,14 @@ const PurchaseOrderAcceptApprovalForm = ({
}
placeholder='Pilih tanggal diterima'
className={{
wrapper: 'w-full max-w-xs',
wrapper: 'w-full',
}}
isNestedModal={true}
/>
</div>
</div>
))}
</div>
</Card>
<Table
data={tableData}
@@ -822,15 +847,12 @@ const PurchaseOrderAcceptApprovalForm = ({
headerColumnClassName:
'px-2 py-3 text-xs font-semibold text-gray-500',
bodyRowClassName: 'border-b border-b-gray-200',
bodyColumnClassName:
'px-2 py-2',
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>
<span className='text-lg opacity-50'>Belum ada data item...</span>
</div>
}
/>