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

refactor(FE): Show pending stock usage and depletions in detail

Browse Source
This commit is contained in:
rstubryan
2026-02-03 14:20:32 +07:00
parent 43afd35e54
commit f31eb8db59
1 changed files with 421 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/recording/form/RecordingForm.tsx
+421 -373
View File
@@ -48,6 +48,7 @@ import {
UpdateLayingRecordingPayload,
Recording,
NextDayRecording,
RecordingStock,
} from '@/types/api/production/recording';
import { type BaseApiResponse } from '@/types/api/api-general';
import {
@@ -1103,14 +1104,51 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
[formik.values.stocks, type]
);
const getStockPendingInfo = useCallback(
(productWarehouseId: number) => {
if ((type === 'edit' || type === 'detail') && initialValues?.stocks) {
const existingStock = initialValues.stocks.find(
(s) => s.product_warehouse_id === productWarehouseId
) as RecordingStock | undefined;
if (existingStock) {
return {
usageAmount: existingStock.usage_amount ?? 0,
pendingQty: existingStock.pending_qty ?? 0,
};
}
}
return {
usageAmount: 0,
pendingQty: 0,
};
},
[initialValues, type]
);
const getStockUsageAdornment = useCallback(
(stockIdx: number) => {
if ((type as 'add' | 'edit' | 'detail') === 'detail') return null;
const stock = formik.values.stocks?.[stockIdx];
if (!stock || !stock.product_warehouse_id) return null;
const isDetail = (type as 'add' | 'edit' | 'detail') === 'detail';
const availableStock = getAvailableStock(stock.product_warehouse_id);
const requestedUsage = Number(stock.qty) || 0;
const remainingStock = availableStock - requestedUsage;
const { pendingQty } = getStockPendingInfo(stock.product_warehouse_id);
if (isDetail) {
if (pendingQty > 0) {
return (
<span className='text-sm text-gray-600 whitespace-nowrap'>
(tersedia: {formatNumber(requestedUsage)} | pending:{' '}
<span className='text-error'>{formatNumber(pendingQty)}</span> |
pakai: {formatNumber(requestedUsage + pendingQty)})
</span>
);
}
return null;
}
if (requestedUsage > 0) {
return (
<span className='text-sm text-gray-600 whitespace-nowrap'>
@@ -1127,7 +1165,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</span>
);
},
[formik.values.stocks, getAvailableStock, type]
[formik.values.stocks, getAvailableStock, getStockPendingInfo, type]
);
const getProjectFlockBadgeAdornment = useCallback(() => {
@@ -2550,8 +2588,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
: null
}
/>
{(type as 'add' | 'edit' | 'detail') !== 'detail' &&
getStockUsageAdornment(idx)}
{getStockUsageAdornment(idx)}
</div>
</td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
@@ -2604,209 +2641,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Card>
{/* Depletions Table */}
<Card
title='Deplesi'
className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
}}
>
<div className='overflow-x-auto'>
<table className='table'>
<thead>
<tr>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<th>
<CheckboxInput
name='select-all-depletions'
checked={
formik.values.depletions?.length ===
selectedDepletions.length &&
formik.values.depletions?.length > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDepletions(
formik.values.depletions?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedDepletions([]);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</th>
)}
<th>Kondisi</th>
<th>Jumlah</th>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<th>Action</th>
)}
</tr>
</thead>
<tbody>
{formik.values.depletions?.map((depletion, idx) => (
<tr key={`depletion-${idx}`}>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<td className='align-middle!'>
<CheckboxInput
name={`depletion-${idx}`}
checked={selectedDepletions.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDepletions([
...selectedDepletions,
idx,
]);
} else {
setSelectedDepletions(
selectedDepletions.filter((i) => i !== idx)
);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</td>
)}
<td>
<SelectInput
value={
depletionProducts.find(
(product) =>
product.value === depletion.product_warehouse_id
) || null
}
onChange={(selectedOption) => {
const option = selectedOption as OptionType | null;
formik.setFieldValue(
`depletions.${idx}.product_warehouse_id`,
option?.value || 0
);
}}
options={getAvailableDepletionProductOptions(idx)}
placeholder='Pilih Kondisi'
isLoading={isLoadingDepletionProducts}
onMenuScrollToBottom={loadMoreDepletionProducts}
isError={
isRepeaterInputError(
'depletions',
'product_warehouse_id',
idx
).isError
}
errorMessage={
isRepeaterInputError(
'depletions',
'product_warehouse_id',
idx
).errorMessage
}
isDisabled={type === 'detail'}
className={{
wrapper: 'w-full min-w-48',
}}
isSearchable
isClearable={type !== 'detail'}
/>
</td>
<td>
<NumberInput
name={`depletions.${idx}.qty`}
value={depletion.qty ?? ''}
onChange={handleDepletionQtyChangeWrapper(idx)}
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('depletions', 'qty', idx)
.isError
}
errorMessage={
isRepeaterInputError('depletions', 'qty', idx)
.errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
placeholder='Masukkan jumlah deplesi'
inputSuffix={
depletion.product_warehouse_id
? getProductUomSuffix(
depletion.product_warehouse_id,
'depletion'
)
: null
}
/>
</td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<td>
<div className='flex items-center'>
<Button
type='button'
color='error'
onClick={() => removeDepletion(idx)}
>
<Icon
icon='mdi:trash-can'
width={24}
height={24}
/>
</Button>
</div>
</td>
)}
</tr>
))}
</tbody>
</table>
</div>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<div className='flex justify-center items-center mt-4 gap-4'>
{selectedDepletions.length > 0 && (
<Button
type='button'
color='error'
onClick={removeSelectedDepletions}
disabled={selectedDepletions.length === 0}
className='w-fit'
>
<Icon icon='mdi:trash-can' width={24} height={24} />
Hapus Terpilih ({selectedDepletions.length})
</Button>
)}
<Button
type='button'
color='success'
onClick={addDepletion}
className='w-fit'
>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah Depletion
</Button>
</div>
)}
</Card>
{/* Eggs Table - Only for LAYING Category */}
{isLayingCategory && (
{((type as 'add' | 'edit' | 'detail') !== 'detail' ||
(formik.values.depletions?.length ?? 0) > 0) && (
<Card
title='Telur'
title='Deplesi'
className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
@@ -2819,24 +2657,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<th>
<CheckboxInput
name='select-all-eggs'
name='select-all-depletions'
checked={
((formik.values as RecordingLayingFormValues).eggs
?.length ?? 0) === selectedEggs.length &&
((formik.values as RecordingLayingFormValues).eggs
?.length ?? 0) > 0
formik.values.depletions?.length ===
selectedDepletions.length &&
formik.values.depletions?.length > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedEggs(
(
formik.values as RecordingLayingFormValues
).eggs?.map((_, idx) => idx) ?? []
setSelectedDepletions(
formik.values.depletions?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedEggs([]);
setSelectedDepletions([]);
}
}}
classNames={{
@@ -2846,201 +2683,412 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
/>
</th>
)}
<th>Kondisi Telur</th>
<th>Kondisi</th>
<th>Jumlah</th>
<th className='flex items-center gap-1'>
Total Berat (Kilogram)
<Tooltip
className={{
wrapper: 'cursor-pointer',
}}
position='bottom'
content='Untuk menggunakan koma bisa menekan tombol titik (.) pada keyboard, Misal 0.123'
>
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
className='text-gray-400 hover:text-gray-600 shrink-0'
/>
</Tooltip>
</th>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<th>Action</th>
)}
</tr>
</thead>
<tbody>
{(formik.values as RecordingLayingFormValues).eggs?.map(
(egg, idx) => (
<tr key={`egg-${idx}`}>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<td className='align-middle!'>
<CheckboxInput
name={`egg-${idx}`}
checked={selectedEggs.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedEggs([...selectedEggs, idx]);
} else {
setSelectedEggs(
selectedEggs.filter((i) => i !== idx)
);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</td>
)}
<td>
<SelectInput
value={
eggProducts.find(
(product) =>
product.value === egg.product_warehouse_id
) || null
}
onChange={(selectedOption) => {
const option =
selectedOption as OptionType | null;
formik.setFieldValue(
`eggs.${idx}.product_warehouse_id`,
option?.value || 0
);
{formik.values.depletions?.map((depletion, idx) => (
<tr key={`depletion-${idx}`}>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<td className='align-middle!'>
<CheckboxInput
name={`depletion-${idx}`}
checked={selectedDepletions.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDepletions([
...selectedDepletions,
idx,
]);
} else {
setSelectedDepletions(
selectedDepletions.filter((i) => i !== idx)
);
}
}}
options={getAvailableEggProductOptions(idx)}
placeholder='Pilih Kondisi Telur'
isLoading={isLoadingEggProducts}
onMenuScrollToBottom={loadMoreEggProducts}
isError={
isRepeaterInputError(
'eggs',
'product_warehouse_id',
idx
).isError
}
errorMessage={
isRepeaterInputError(
'eggs',
'product_warehouse_id',
idx
).errorMessage
}
isDisabled={type === 'detail'}
className={{
wrapper: 'w-full min-w-48',
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
isSearchable
isClearable={type !== 'detail'}
/>
</td>
)}
<td>
<SelectInput
value={
depletionProducts.find(
(product) =>
product.value ===
depletion.product_warehouse_id
) || null
}
onChange={(selectedOption) => {
const option =
selectedOption as OptionType | null;
formik.setFieldValue(
`depletions.${idx}.product_warehouse_id`,
option?.value || 0
);
}}
options={getAvailableDepletionProductOptions(idx)}
placeholder='Pilih Kondisi'
isLoading={isLoadingDepletionProducts}
onMenuScrollToBottom={loadMoreDepletionProducts}
isError={
isRepeaterInputError(
'depletions',
'product_warehouse_id',
idx
).isError
}
errorMessage={
isRepeaterInputError(
'depletions',
'product_warehouse_id',
idx
).errorMessage
}
isDisabled={type === 'detail'}
className={{
wrapper: 'w-full min-w-48',
}}
isSearchable
isClearable={type !== 'detail'}
/>
</td>
<td>
<NumberInput
name={`depletions.${idx}.qty`}
value={depletion.qty ?? ''}
onChange={handleDepletionQtyChangeWrapper(idx)}
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('depletions', 'qty', idx)
.isError
}
errorMessage={
isRepeaterInputError('depletions', 'qty', idx)
.errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
placeholder='Masukkan jumlah deplesi'
inputSuffix={
depletion.product_warehouse_id
? getProductUomSuffix(
depletion.product_warehouse_id,
'depletion'
)
: null
}
/>
</td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<td>
<NumberInput
name={`eggs.${idx}.qty`}
value={egg.qty ?? ''}
onChange={handleEggQtyChangeWrapper(idx)}
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('eggs', 'qty', idx).isError
}
errorMessage={
isRepeaterInputError('eggs', 'qty', idx)
.errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
placeholder='Masukkan jumlah telur'
inputSuffix={'Butir'}
/>
<div className='flex items-center'>
<Button
type='button'
color='error'
onClick={() => removeDepletion(idx)}
>
<Icon
icon='mdi:trash-can'
width={24}
height={24}
/>
</Button>
</div>
</td>
<td>
<NumberInput
name={`eggs.${idx}.weight`}
value={egg.weight ?? ''}
onChange={handleEggWeightChangeWrapper(idx)}
onBlur={formik.handleBlur}
decimalScale={3}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('eggs', 'weight', idx)
.isError
}
errorMessage={
isRepeaterInputError('eggs', 'weight', idx)
.errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
placeholder='Masukkan total berat telur (Kilogram)...'
inputSuffix='Kilogram'
/>
</td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<td>
<div className='flex items-center'>
<Button
type='button'
color='error'
onClick={() => removeEgg(idx)}
>
<Icon
icon='mdi:trash-can'
width={24}
height={24}
/>
</Button>
</div>
</td>
)}
</tr>
)
)}
)}
</tr>
))}
</tbody>
</table>
</div>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<div className='flex justify-center items-center mt-4 gap-4'>
{selectedEggs.length > 0 && (
{selectedDepletions.length > 0 && (
<Button
type='button'
color='error'
onClick={removeSelectedEggs}
disabled={selectedEggs.length === 0}
onClick={removeSelectedDepletions}
disabled={selectedDepletions.length === 0}
className='w-fit'
>
<Icon icon='mdi:trash-can' width={24} height={24} />
Hapus Terpilih ({selectedEggs.length})
Hapus Terpilih ({selectedDepletions.length})
</Button>
)}
<Button
type='button'
color='success'
onClick={addEgg}
onClick={addDepletion}
className='w-fit'
>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah Telur
Tambah Depletion
</Button>
</div>
)}
</Card>
)}
{/* Eggs Table - Only for LAYING Category */}
{isLayingCategory &&
((type as 'add' | 'edit' | 'detail') !== 'detail' ||
((formik.values as RecordingLayingFormValues).eggs?.length ?? 0) >
0) && (
<Card
title='Telur'
className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
}}
>
<div className='overflow-x-auto'>
<table className='table'>
<thead>
<tr>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<th>
<CheckboxInput
name='select-all-eggs'
checked={
((formik.values as RecordingLayingFormValues)
.eggs?.length ?? 0) === selectedEggs.length &&
((formik.values as RecordingLayingFormValues)
.eggs?.length ?? 0) > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedEggs(
(
formik.values as RecordingLayingFormValues
).eggs?.map((_, idx) => idx) ?? []
);
} else {
setSelectedEggs([]);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</th>
)}
<th>Kondisi Telur</th>
<th>Jumlah</th>
<th className='flex items-center gap-1'>
Total Berat (Kilogram)
<Tooltip
className={{
wrapper: 'cursor-pointer',
}}
position='bottom'
content='Untuk menggunakan koma bisa menekan tombol titik (.) pada keyboard, Misal 0.123'
>
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
className='text-gray-400 hover:text-gray-600 shrink-0'
/>
</Tooltip>
</th>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<th>Action</th>
)}
</tr>
</thead>
<tbody>
{(formik.values as RecordingLayingFormValues).eggs?.map(
(egg, idx) => (
<tr key={`egg-${idx}`}>
{(type as 'add' | 'edit' | 'detail') !==
'detail' && (
<td className='align-middle!'>
<CheckboxInput
name={`egg-${idx}`}
checked={selectedEggs.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedEggs([...selectedEggs, idx]);
} else {
setSelectedEggs(
selectedEggs.filter((i) => i !== idx)
);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</td>
)}
<td>
<SelectInput
value={
eggProducts.find(
(product) =>
product.value === egg.product_warehouse_id
) || null
}
onChange={(selectedOption) => {
const option =
selectedOption as OptionType | null;
formik.setFieldValue(
`eggs.${idx}.product_warehouse_id`,
option?.value || 0
);
}}
options={getAvailableEggProductOptions(idx)}
placeholder='Pilih Kondisi Telur'
isLoading={isLoadingEggProducts}
onMenuScrollToBottom={loadMoreEggProducts}
isError={
isRepeaterInputError(
'eggs',
'product_warehouse_id',
idx
).isError
}
errorMessage={
isRepeaterInputError(
'eggs',
'product_warehouse_id',
idx
).errorMessage
}
isDisabled={type === 'detail'}
className={{
wrapper: 'w-full min-w-48',
}}
isSearchable
isClearable={type !== 'detail'}
/>
</td>
<td>
<NumberInput
name={`eggs.${idx}.qty`}
value={egg.qty ?? ''}
onChange={handleEggQtyChangeWrapper(idx)}
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('eggs', 'qty', idx)
.isError
}
errorMessage={
isRepeaterInputError('eggs', 'qty', idx)
.errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
placeholder='Masukkan jumlah telur'
inputSuffix={'Butir'}
/>
</td>
<td>
<NumberInput
name={`eggs.${idx}.weight`}
value={egg.weight ?? ''}
onChange={handleEggWeightChangeWrapper(idx)}
onBlur={formik.handleBlur}
decimalScale={3}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('eggs', 'weight', idx)
.isError
}
errorMessage={
isRepeaterInputError('eggs', 'weight', idx)
.errorMessage
}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
placeholder='Masukkan total berat telur (Kilogram)...'
inputSuffix='Kilogram'
/>
</td>
{(type as 'add' | 'edit' | 'detail') !==
'detail' && (
<td>
<div className='flex items-center'>
<Button
type='button'
color='error'
onClick={() => removeEgg(idx)}
>
<Icon
icon='mdi:trash-can'
width={24}
height={24}
/>
</Button>
</div>
</td>
)}
</tr>
)
)}
</tbody>
</table>
</div>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
<div className='flex justify-center items-center mt-4 gap-4'>
{selectedEggs.length > 0 && (
<Button
type='button'
color='error'
onClick={removeSelectedEggs}
disabled={selectedEggs.length === 0}
className='w-fit'
>
<Icon icon='mdi:trash-can' width={24} height={24} />
Hapus Terpilih ({selectedEggs.length})
</Button>
)}
<Button
type='button'
color='success'
onClick={addEgg}
className='w-fit'
>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah Telur
</Button>
</div>
)}
</Card>
)}
<div className='w-full'>
{recordingFormErrorMessage && (
<div role='alert' className='alert alert-error'>