gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +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
+62 -14
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,6 +2641,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Card>
{/* Depletions Table */}
{((type as 'add' | 'edit' | 'detail') !== 'detail' ||
(formik.values.depletions?.length ?? 0) > 0) && (
<Card
title='Deplesi'
className={{
@@ -2685,11 +2724,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
value={
depletionProducts.find(
(product) =>
product.value === depletion.product_warehouse_id
product.value ===
depletion.product_warehouse_id
) || null
}
onChange={(selectedOption) => {
const option = selectedOption as OptionType | null;
const option =
selectedOption as OptionType | null;
formik.setFieldValue(
`depletions.${idx}.product_warehouse_id`,
option?.value || 0
@@ -2802,9 +2843,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</div>
)}
</Card>
)}
{/* Eggs Table - Only for LAYING Category */}
{isLayingCategory && (
{isLayingCategory &&
((type as 'add' | 'edit' | 'detail') !== 'detail' ||
((formik.values as RecordingLayingFormValues).eggs?.length ?? 0) >
0) && (
<Card
title='Telur'
className={{
@@ -2821,10 +2866,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<CheckboxInput
name='select-all-eggs'
checked={
((formik.values as RecordingLayingFormValues).eggs
?.length ?? 0) === selectedEggs.length &&
((formik.values as RecordingLayingFormValues).eggs
?.length ?? 0) > 0
((formik.values as RecordingLayingFormValues)
.eggs?.length ?? 0) === selectedEggs.length &&
((formik.values as RecordingLayingFormValues)
.eggs?.length ?? 0) > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
@@ -2874,7 +2919,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{(formik.values as RecordingLayingFormValues).eggs?.map(
(egg, idx) => (
<tr key={`egg-${idx}`}>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
{(type as 'add' | 'edit' | 'detail') !==
'detail' && (
<td className='align-middle!'>
<CheckboxInput
name={`egg-${idx}`}
@@ -2950,7 +2996,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
thousandSeparator=','
decimalSeparator='.'
isError={
isRepeaterInputError('eggs', 'qty', idx).isError
isRepeaterInputError('eggs', 'qty', idx)
.isError
}
errorMessage={
isRepeaterInputError('eggs', 'qty', idx)
@@ -2990,7 +3037,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
inputSuffix='Kilogram'
/>
</td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
{(type as 'add' | 'edit' | 'detail') !==
'detail' && (
<td>
<div className='flex items-center'>
<Button