mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-23 23:05:46 +00:00
refactor(FE): Show pending stock usage and depletions in detail
This commit is contained in:
rstubryan
@@ -48,6 +48,7 @@ import {
|
|||||||
UpdateLayingRecordingPayload,
|
UpdateLayingRecordingPayload,
|
||||||
Recording,
|
Recording,
|
||||||
NextDayRecording,
|
NextDayRecording,
|
||||||
|
RecordingStock,
|
||||||
} from '@/types/api/production/recording';
|
} from '@/types/api/production/recording';
|
||||||
import { type BaseApiResponse } from '@/types/api/api-general';
|
import { type BaseApiResponse } from '@/types/api/api-general';
|
||||||
import {
|
import {
|
||||||
@@ -1103,14 +1104,51 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
|||||||
[formik.values.stocks, type]
|
[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(
|
const getStockUsageAdornment = useCallback(
|
||||||
(stockIdx: number) => {
|
(stockIdx: number) => {
|
||||||
if ((type as 'add' | 'edit' | 'detail') === 'detail') return null;
|
|
||||||
const stock = formik.values.stocks?.[stockIdx];
|
const stock = formik.values.stocks?.[stockIdx];
|
||||||
if (!stock || !stock.product_warehouse_id) return null;
|
if (!stock || !stock.product_warehouse_id) return null;
|
||||||
|
|
||||||
|
const isDetail = (type as 'add' | 'edit' | 'detail') === 'detail';
|
||||||
const availableStock = getAvailableStock(stock.product_warehouse_id);
|
const availableStock = getAvailableStock(stock.product_warehouse_id);
|
||||||
const requestedUsage = Number(stock.qty) || 0;
|
const requestedUsage = Number(stock.qty) || 0;
|
||||||
const remainingStock = availableStock - requestedUsage;
|
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) {
|
if (requestedUsage > 0) {
|
||||||
return (
|
return (
|
||||||
<span className='text-sm text-gray-600 whitespace-nowrap'>
|
<span className='text-sm text-gray-600 whitespace-nowrap'>
|
||||||
@@ -1127,7 +1165,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
|||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
[formik.values.stocks, getAvailableStock, type]
|
[formik.values.stocks, getAvailableStock, getStockPendingInfo, type]
|
||||||
);
|
);
|
||||||
|
|
||||||
const getProjectFlockBadgeAdornment = useCallback(() => {
|
const getProjectFlockBadgeAdornment = useCallback(() => {
|
||||||
@@ -2550,8 +2588,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
|||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' &&
|
{getStockUsageAdornment(idx)}
|
||||||
getStockUsageAdornment(idx)}
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||||
@@ -2604,209 +2641,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Depletions Table */}
|
{/* Depletions Table */}
|
||||||
<Card
|
{((type as 'add' | 'edit' | 'detail') !== 'detail' ||
|
||||||
title='Deplesi'
|
(formik.values.depletions?.length ?? 0) > 0) && (
|
||||||
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 && (
|
|
||||||
<Card
|
<Card
|
||||||
title='Telur'
|
title='Deplesi'
|
||||||
className={{
|
className={{
|
||||||
wrapper: 'w-full mb-4 shadow',
|
wrapper: 'w-full mb-4 shadow',
|
||||||
title: 'mb-4',
|
title: 'mb-4',
|
||||||
@@ -2819,24 +2657,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
|||||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||||
<th>
|
<th>
|
||||||
<CheckboxInput
|
<CheckboxInput
|
||||||
name='select-all-eggs'
|
name='select-all-depletions'
|
||||||
checked={
|
checked={
|
||||||
((formik.values as RecordingLayingFormValues).eggs
|
formik.values.depletions?.length ===
|
||||||
?.length ?? 0) === selectedEggs.length &&
|
selectedDepletions.length &&
|
||||||
((formik.values as RecordingLayingFormValues).eggs
|
formik.values.depletions?.length > 0
|
||||||
?.length ?? 0) > 0
|
|
||||||
}
|
}
|
||||||
onChange={(
|
onChange={(
|
||||||
e: React.ChangeEvent<HTMLInputElement>
|
e: React.ChangeEvent<HTMLInputElement>
|
||||||
) => {
|
) => {
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
setSelectedEggs(
|
setSelectedDepletions(
|
||||||
(
|
formik.values.depletions?.map(
|
||||||
formik.values as RecordingLayingFormValues
|
(_, idx) => idx
|
||||||
).eggs?.map((_, idx) => idx) ?? []
|
) ?? []
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
setSelectedEggs([]);
|
setSelectedDepletions([]);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
classNames={{
|
classNames={{
|
||||||
@@ -2846,201 +2683,412 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
|||||||
/>
|
/>
|
||||||
</th>
|
</th>
|
||||||
)}
|
)}
|
||||||
<th>Kondisi Telur</th>
|
<th>Kondisi</th>
|
||||||
<th>Jumlah</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' && (
|
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||||
<th>Action</th>
|
<th>Action</th>
|
||||||
)}
|
)}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{(formik.values as RecordingLayingFormValues).eggs?.map(
|
{formik.values.depletions?.map((depletion, idx) => (
|
||||||
(egg, idx) => (
|
<tr key={`depletion-${idx}`}>
|
||||||
<tr key={`egg-${idx}`}>
|
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
<td className='align-middle!'>
|
||||||
<td className='align-middle!'>
|
<CheckboxInput
|
||||||
<CheckboxInput
|
name={`depletion-${idx}`}
|
||||||
name={`egg-${idx}`}
|
checked={selectedDepletions.includes(idx)}
|
||||||
checked={selectedEggs.includes(idx)}
|
onChange={(
|
||||||
onChange={(
|
e: React.ChangeEvent<HTMLInputElement>
|
||||||
e: React.ChangeEvent<HTMLInputElement>
|
) => {
|
||||||
) => {
|
if (e.target.checked) {
|
||||||
if (e.target.checked) {
|
setSelectedDepletions([
|
||||||
setSelectedEggs([...selectedEggs, idx]);
|
...selectedDepletions,
|
||||||
} else {
|
idx,
|
||||||
setSelectedEggs(
|
]);
|
||||||
selectedEggs.filter((i) => i !== idx)
|
} else {
|
||||||
);
|
setSelectedDepletions(
|
||||||
}
|
selectedDepletions.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)}
|
classNames={{
|
||||||
placeholder='Pilih Kondisi Telur'
|
wrapper: 'flex justify-center',
|
||||||
isLoading={isLoadingEggProducts}
|
checkbox: 'checkbox checkbox-sm',
|
||||||
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>
|
||||||
|
)}
|
||||||
|
<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>
|
<td>
|
||||||
<NumberInput
|
<div className='flex items-center'>
|
||||||
name={`eggs.${idx}.qty`}
|
<Button
|
||||||
value={egg.qty ?? ''}
|
type='button'
|
||||||
onChange={handleEggQtyChangeWrapper(idx)}
|
color='error'
|
||||||
onBlur={formik.handleBlur}
|
onClick={() => removeDepletion(idx)}
|
||||||
decimalScale={0}
|
>
|
||||||
allowNegative={false}
|
<Icon
|
||||||
thousandSeparator=','
|
icon='mdi:trash-can'
|
||||||
decimalSeparator='.'
|
width={24}
|
||||||
isError={
|
height={24}
|
||||||
isRepeaterInputError('eggs', 'qty', idx).isError
|
/>
|
||||||
}
|
</Button>
|
||||||
errorMessage={
|
</div>
|
||||||
isRepeaterInputError('eggs', 'qty', idx)
|
|
||||||
.errorMessage
|
|
||||||
}
|
|
||||||
readOnly={type === 'detail'}
|
|
||||||
className={{
|
|
||||||
wrapper: 'w-full min-w-24',
|
|
||||||
}}
|
|
||||||
placeholder='Masukkan jumlah telur'
|
|
||||||
inputSuffix={'Butir'}
|
|
||||||
/>
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
)}
|
||||||
<NumberInput
|
</tr>
|
||||||
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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||||
{selectedEggs.length > 0 && (
|
{selectedDepletions.length > 0 && (
|
||||||
<Button
|
<Button
|
||||||
type='button'
|
type='button'
|
||||||
color='error'
|
color='error'
|
||||||
onClick={removeSelectedEggs}
|
onClick={removeSelectedDepletions}
|
||||||
disabled={selectedEggs.length === 0}
|
disabled={selectedDepletions.length === 0}
|
||||||
className='w-fit'
|
className='w-fit'
|
||||||
>
|
>
|
||||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||||
Hapus Terpilih ({selectedEggs.length})
|
Hapus Terpilih ({selectedDepletions.length})
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
type='button'
|
type='button'
|
||||||
color='success'
|
color='success'
|
||||||
onClick={addEgg}
|
onClick={addDepletion}
|
||||||
className='w-fit'
|
className='w-fit'
|
||||||
>
|
>
|
||||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||||
Tambah Telur
|
Tambah Depletion
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</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'>
|
<div className='w-full'>
|
||||||
{recordingFormErrorMessage && (
|
{recordingFormErrorMessage && (
|
||||||
<div role='alert' className='alert alert-error'>
|
<div role='alert' className='alert alert-error'>
|
||||||
|
|||||||
Reference in New Issue
Block a user