mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat: create TransferToLayingFormModal component
This commit is contained in:
ValdiANS
@@ -0,0 +1,940 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
FormEventHandler,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import useSWR, { useSWRConfig } from 'swr';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
import Modal, { useModal } from '@/components/Modal';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import DateInput from '@/components/input/DateInput';
|
||||||
|
import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||||
|
import { OptionType, useSelect } from '@/components/input/SelectInput';
|
||||||
|
import NumberInput from '@/components/input/NumberInput';
|
||||||
|
import TextArea from '@/components/input/TextArea';
|
||||||
|
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
|
import { ProjectFlockApi } from '@/services/api/production';
|
||||||
|
import { getIn, useFormik } from 'formik';
|
||||||
|
import {
|
||||||
|
getFilledTransferToLayingFormInitialValues,
|
||||||
|
getTransferToLayingFormInitialValues,
|
||||||
|
TransferToLayingFormSchema,
|
||||||
|
TransferToLayingFormValues,
|
||||||
|
} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
|
||||||
|
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
|
||||||
|
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import StatusBadge from '@/components/helper/StatusBadge';
|
||||||
|
import CheckboxInput from '@/components/input/CheckboxInput';
|
||||||
|
import { ProjectFlock } from '@/types/api/production/project-flock';
|
||||||
|
import { cn, formatNumber } from '@/lib/helper';
|
||||||
|
import {
|
||||||
|
CreateTransferToLayingPayload,
|
||||||
|
UpdateTransferToLayingPayload,
|
||||||
|
} from '@/types/api/production/transfer-to-laying';
|
||||||
|
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
|
||||||
|
|
||||||
|
const TransferToLayingFormModal = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const modalAction = searchParams.get('action');
|
||||||
|
const transferToLayingId = searchParams.get('id');
|
||||||
|
|
||||||
|
const { mutate } = useSWRConfig();
|
||||||
|
|
||||||
|
const refreshTransferToLayings = () => {
|
||||||
|
mutate(
|
||||||
|
(key) =>
|
||||||
|
typeof key === 'string' && key.includes(TransferToLayingApi.basePath)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
|
||||||
|
useSWR(transferToLayingId ? transferToLayingId : undefined, (id: number) =>
|
||||||
|
TransferToLayingApi.getSingle(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Step 1: General Information
|
||||||
|
* Step 2: Select source and destination kandang
|
||||||
|
* Step 3: Enter transfered quantity
|
||||||
|
* Step 4: Submit
|
||||||
|
*/
|
||||||
|
const [step, setStep] = useState(1);
|
||||||
|
|
||||||
|
const formModal = useModal();
|
||||||
|
|
||||||
|
const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Flock Source
|
||||||
|
const {
|
||||||
|
setInputValue: setFlockSourceInputValue,
|
||||||
|
options: flockSourceOptions,
|
||||||
|
isLoadingOptions: isLoadingFlockSourceOptions,
|
||||||
|
loadMore: loadMoreFlockSource,
|
||||||
|
rawData: flockSourceRawData,
|
||||||
|
} = useSelect<ProjectFlock>(
|
||||||
|
ProjectFlockApi.basePath,
|
||||||
|
'id',
|
||||||
|
'flock_name',
|
||||||
|
'search',
|
||||||
|
{
|
||||||
|
category: 'GROWING',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Flock Destination
|
||||||
|
const {
|
||||||
|
setInputValue: setFlockDestinationInputValue,
|
||||||
|
options: flockDestinationOptions,
|
||||||
|
isLoadingOptions: isLoadingFlockDestinationOptions,
|
||||||
|
loadMore: loadMoreFlockDestination,
|
||||||
|
rawData: flockDestinationRawData,
|
||||||
|
} = useSelect<ProjectFlock>(
|
||||||
|
ProjectFlockApi.basePath,
|
||||||
|
'id',
|
||||||
|
'flock_name',
|
||||||
|
'search',
|
||||||
|
{
|
||||||
|
category: 'LAYING',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const closeModalHandler = (shouldPushToRoute: boolean = true) => {
|
||||||
|
if (shouldPushToRoute) {
|
||||||
|
router.push('/production/transfer-to-laying');
|
||||||
|
}
|
||||||
|
|
||||||
|
formik.resetForm();
|
||||||
|
setStep(1);
|
||||||
|
setFormErrorMessage('');
|
||||||
|
formModal.closeModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTransferToLayingHandler = useCallback(
|
||||||
|
async (payload: CreateTransferToLayingPayload) => {
|
||||||
|
const createTransferToLayingRes =
|
||||||
|
await TransferToLayingApi.create(payload);
|
||||||
|
|
||||||
|
if (isResponseError(createTransferToLayingRes)) {
|
||||||
|
setFormErrorMessage(createTransferToLayingRes.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshTransferToLayings();
|
||||||
|
toast.success(createTransferToLayingRes?.message as string);
|
||||||
|
router.push('/production/transfer-to-laying');
|
||||||
|
closeModalHandler(false);
|
||||||
|
},
|
||||||
|
[router]
|
||||||
|
);
|
||||||
|
|
||||||
|
const updateTransferToLayingHandler = useCallback(
|
||||||
|
async (
|
||||||
|
transferToLayingId: number,
|
||||||
|
payload: UpdateTransferToLayingPayload
|
||||||
|
) => {
|
||||||
|
const updateKandangRes = await TransferToLayingApi.update(
|
||||||
|
transferToLayingId,
|
||||||
|
payload
|
||||||
|
);
|
||||||
|
|
||||||
|
if (updateKandangRes?.status === 'error') {
|
||||||
|
setFormErrorMessage(updateKandangRes.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshTransferToLayings();
|
||||||
|
toast.success(updateKandangRes?.message as string);
|
||||||
|
router.push('/production/transfer-to-laying');
|
||||||
|
closeModalHandler(false);
|
||||||
|
},
|
||||||
|
[router]
|
||||||
|
);
|
||||||
|
|
||||||
|
const [formikInitialValues, setFormikInitialValues] = useState(
|
||||||
|
getTransferToLayingFormInitialValues()
|
||||||
|
);
|
||||||
|
|
||||||
|
const formik = useFormik<TransferToLayingFormValues>({
|
||||||
|
initialValues: formikInitialValues,
|
||||||
|
validationSchema: TransferToLayingFormSchema,
|
||||||
|
onSubmit: async (values) => {
|
||||||
|
const transferToLayingPayload: CreateTransferToLayingPayload = {
|
||||||
|
transfer_date: values.transfer_date as string,
|
||||||
|
source_project_flock_id: values.flockSource?.value as number,
|
||||||
|
target_project_flock_id: values.flockDestination?.value as number,
|
||||||
|
totalQuantity: values.totalQuantity as number,
|
||||||
|
|
||||||
|
source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
|
||||||
|
project_flock_kandang_id: kandang.kandang.value,
|
||||||
|
quantity: parseFloat(kandang.quantity as string),
|
||||||
|
})) as CreateTransferToLayingPayload['source_kandangs'],
|
||||||
|
|
||||||
|
target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
|
||||||
|
project_flock_kandang_id: kandang.kandang.value,
|
||||||
|
quantity: parseFloat(kandang.quantity as string),
|
||||||
|
})) as CreateTransferToLayingPayload['target_kandangs'],
|
||||||
|
|
||||||
|
reason: values.reason as string,
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (modalAction) {
|
||||||
|
case 'add':
|
||||||
|
await createTransferToLayingHandler(transferToLayingPayload);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'edit':
|
||||||
|
await updateTransferToLayingHandler(
|
||||||
|
Number(transferToLayingId),
|
||||||
|
transferToLayingPayload
|
||||||
|
);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
|
||||||
|
|
||||||
|
const selectedFlockSourceRawData = isResponseSuccess(flockSourceRawData)
|
||||||
|
? flockSourceRawData.data.find(
|
||||||
|
(item) => item.id === formik.values.flockSource?.value
|
||||||
|
)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
const selectedFlockDestinationRawData = isResponseSuccess(
|
||||||
|
flockDestinationRawData
|
||||||
|
)
|
||||||
|
? flockDestinationRawData.data.find(
|
||||||
|
(item) => item.id === formik.values.flockDestination?.value
|
||||||
|
)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: flockSourceKandangsAvailability,
|
||||||
|
isLoading: isLoadingFlockSourceKandangsAvailability,
|
||||||
|
} = useSWR(
|
||||||
|
formik.values.flockSource
|
||||||
|
? String(formik.values.flockSource.value)
|
||||||
|
: undefined,
|
||||||
|
(id: string) =>
|
||||||
|
TransferToLayingApi.getMappedFlockKandangsAvailability(Number(id))
|
||||||
|
);
|
||||||
|
|
||||||
|
const mappedFlockSourceKandangsAvailability: {
|
||||||
|
kandang_name: string;
|
||||||
|
available_qty: number;
|
||||||
|
project_flock_kandang_id: number;
|
||||||
|
}[] = useMemo(() => {
|
||||||
|
if (!flockSourceKandangsAvailability || !selectedFlockSourceRawData)
|
||||||
|
return [];
|
||||||
|
|
||||||
|
return selectedFlockSourceRawData
|
||||||
|
? selectedFlockSourceRawData.kandangs.map((kandang) => {
|
||||||
|
const availability =
|
||||||
|
flockSourceKandangsAvailability[kandang.project_flock_kandang_id]
|
||||||
|
.available_qty;
|
||||||
|
|
||||||
|
return {
|
||||||
|
kandang_name: kandang.name,
|
||||||
|
available_qty: availability,
|
||||||
|
project_flock_kandang_id: kandang.project_flock_kandang_id,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
}, [flockSourceKandangsAvailability, selectedFlockSourceRawData]);
|
||||||
|
|
||||||
|
const mappedFlockSourceKandangsAvailabilityInfo: {
|
||||||
|
available: number;
|
||||||
|
unavailable: number;
|
||||||
|
} = useMemo(() => {
|
||||||
|
if (!mappedFlockSourceKandangsAvailability)
|
||||||
|
return { available: 0, unavailable: 0 };
|
||||||
|
|
||||||
|
let countAvailable = 0;
|
||||||
|
let countUnavailable = 0;
|
||||||
|
|
||||||
|
mappedFlockSourceKandangsAvailability.forEach((item) => {
|
||||||
|
if (item.available_qty > 0) {
|
||||||
|
countAvailable += 1;
|
||||||
|
} else {
|
||||||
|
countUnavailable += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return { available: countAvailable, unavailable: countUnavailable };
|
||||||
|
}, [mappedFlockSourceKandangsAvailability]);
|
||||||
|
|
||||||
|
const mappedFlockDestinationKandangsAvailabilityInfo: {
|
||||||
|
available: number;
|
||||||
|
unavailable: number;
|
||||||
|
} = useMemo(() => {
|
||||||
|
if (!selectedFlockDestinationRawData)
|
||||||
|
return { available: 0, unavailable: 0 };
|
||||||
|
|
||||||
|
let countAvailable = 0;
|
||||||
|
let countUnavailable = 0;
|
||||||
|
|
||||||
|
selectedFlockDestinationRawData?.kandangs.forEach((item) => {
|
||||||
|
// TODO: change this to real available quota later
|
||||||
|
if (item.capacity > 0) {
|
||||||
|
countAvailable += 1;
|
||||||
|
} else {
|
||||||
|
countUnavailable += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return { available: countAvailable, unavailable: countUnavailable };
|
||||||
|
}, [selectedFlockDestinationRawData]);
|
||||||
|
|
||||||
|
const totalEnteredChickenForTransfer =
|
||||||
|
formik.values.flockSourceKandangs.reduce(
|
||||||
|
(acc, item) => acc + Number(item.quantity),
|
||||||
|
0
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalTransferedChicken = formik.values.flockDestinationKandangs.reduce(
|
||||||
|
(acc, item) => acc + Number(item.quantity),
|
||||||
|
0
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalAvailableChickenForTransfer =
|
||||||
|
totalEnteredChickenForTransfer - totalTransferedChicken;
|
||||||
|
|
||||||
|
const isNextButtonDisabled = useMemo(() => {
|
||||||
|
if (step === 1) {
|
||||||
|
return Boolean(
|
||||||
|
!formik.values.transfer_date ||
|
||||||
|
!formik.values.flockSource ||
|
||||||
|
!formik.values.flockDestination
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === 2) {
|
||||||
|
return Boolean(
|
||||||
|
!formik.values.flockSourceKandangs.length ||
|
||||||
|
!formik.values.flockDestinationKandangs.length
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}, [step, formik.values]);
|
||||||
|
|
||||||
|
const nextButtonHandler = () => {
|
||||||
|
setStep(step + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteEnteredKandangHandler = () => {
|
||||||
|
formik.setFieldValue('flockSourceKandangs', []);
|
||||||
|
formik.setFieldValue('flockDestinationKandangs', []);
|
||||||
|
formik.setFieldValue('totalQuantity', '');
|
||||||
|
formik.setFieldValue('maxTotalQuantity', '');
|
||||||
|
formik.setFieldValue('reason', '');
|
||||||
|
formik.setFieldTouched('reason', false);
|
||||||
|
|
||||||
|
setStep(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
formik.setFieldValue('flockSource', val);
|
||||||
|
formik.setFieldValue('flockSourceKandangs', []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const flockDestinationChangeHandler = (
|
||||||
|
val: OptionType | OptionType[] | null
|
||||||
|
) => {
|
||||||
|
formik.setFieldValue('flockDestination', val);
|
||||||
|
formik.setFieldValue('flockDestinationKandangs', []);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (modalAction === 'add' || modalAction === 'edit') {
|
||||||
|
formModal.openModal();
|
||||||
|
}
|
||||||
|
}, [modalAction]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const getFilledInitialValues = async () => {
|
||||||
|
if (transferToLayingId && isResponseSuccess(transferToLaying)) {
|
||||||
|
const filledInitialValues =
|
||||||
|
await getFilledTransferToLayingFormInitialValues(
|
||||||
|
transferToLaying.data
|
||||||
|
);
|
||||||
|
|
||||||
|
formik.setValues(filledInitialValues);
|
||||||
|
setStep(3);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
getFilledInitialValues();
|
||||||
|
}, [transferToLayingId, transferToLaying]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
formik.setFieldValue('totalQuantity', totalTransferedChicken);
|
||||||
|
formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
|
||||||
|
}, [totalTransferedChicken]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
ref={formModal.ref}
|
||||||
|
position='end'
|
||||||
|
className={{
|
||||||
|
modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
onSubmit={handleFormSubmit}
|
||||||
|
className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
|
||||||
|
>
|
||||||
|
{/* 1st Section */}
|
||||||
|
<div className='w-full sm:w-[446px]'>
|
||||||
|
<div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
variant='ghost'
|
||||||
|
color='none'
|
||||||
|
onClick={() => closeModalHandler()}
|
||||||
|
className='p-0 text-black hover:text-base-content'
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className='w-px border-none bg-base-content/10' />
|
||||||
|
|
||||||
|
<h4 className='text-sm font-medium text-base-content/50'>
|
||||||
|
Add Transfer to Laying
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full p-4 flex flex-col'>
|
||||||
|
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
|
||||||
|
Informasi Umum
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<DateInput
|
||||||
|
name='transfer_date'
|
||||||
|
label='Tanggal'
|
||||||
|
placeholder='Tanggal'
|
||||||
|
value={formik.values.transfer_date ?? ''}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={
|
||||||
|
formik.touched.transfer_date &&
|
||||||
|
Boolean(formik.errors.transfer_date)
|
||||||
|
}
|
||||||
|
errorMessage={formik.errors.transfer_date}
|
||||||
|
disabled={step > 2}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInputRadio
|
||||||
|
label='Flock Asal'
|
||||||
|
placeholder='Pilih Flock Asal'
|
||||||
|
value={formik.values.flockSource}
|
||||||
|
onChange={flockSourceChangeHandler}
|
||||||
|
options={flockSourceOptions}
|
||||||
|
isLoading={isLoadingFlockSourceOptions}
|
||||||
|
onInputChange={setFlockSourceInputValue}
|
||||||
|
onMenuScrollToBottom={loadMoreFlockSource}
|
||||||
|
isDisabled={step > 2}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInputRadio
|
||||||
|
label='Flock Tujuan'
|
||||||
|
placeholder='Pilih Flock Tujuan'
|
||||||
|
value={formik.values.flockDestination}
|
||||||
|
onChange={flockDestinationChangeHandler}
|
||||||
|
options={flockDestinationOptions}
|
||||||
|
isLoading={isLoadingFlockDestinationOptions}
|
||||||
|
onInputChange={setFlockDestinationInputValue}
|
||||||
|
onMenuScrollToBottom={loadMoreFlockDestination}
|
||||||
|
isDisabled={step > 2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{step >= 2 && (
|
||||||
|
<>
|
||||||
|
<div className='w-full p-4 flex flex-col gap-3 border-y border-base-content/10'>
|
||||||
|
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
|
||||||
|
Pilih Kandang Asal
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className='w-fit flex flex-row items-stretch gap-3'>
|
||||||
|
<StatusBadge
|
||||||
|
color='info'
|
||||||
|
text={`Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.available})`}
|
||||||
|
className={{ badge: 'text-nowrap' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='w-px border-none bg-base-content/10' />
|
||||||
|
|
||||||
|
<StatusBadge
|
||||||
|
color='neutral'
|
||||||
|
text={`Tidak Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.unavailable})`}
|
||||||
|
className={{ badge: 'text-nowrap' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full rounded-xl border border-base-content/10'>
|
||||||
|
{mappedFlockSourceKandangsAvailability.map(
|
||||||
|
(item, itemIdx) => {
|
||||||
|
const isAvailable = item.available_qty > 0;
|
||||||
|
const isChecked = formik.values.flockSourceKandangs.some(
|
||||||
|
(k) => k.kandang.value === item.project_flock_kandang_id
|
||||||
|
);
|
||||||
|
|
||||||
|
const flockSourceKandangCheckboxChangeHandler: FormEventHandler<
|
||||||
|
HTMLInputElement
|
||||||
|
> = (e) => {
|
||||||
|
const checked = (e.target as HTMLInputElement).checked;
|
||||||
|
if (checked) {
|
||||||
|
formik.setFieldValue('flockSourceKandangs', [
|
||||||
|
...formik.values.flockSourceKandangs,
|
||||||
|
{
|
||||||
|
kandang: {
|
||||||
|
value: item.project_flock_kandang_id,
|
||||||
|
label: item.kandang_name,
|
||||||
|
},
|
||||||
|
quantity: '',
|
||||||
|
maxQuantity: item.available_qty,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
formik.setFieldValue(
|
||||||
|
'flockSourceKandangs',
|
||||||
|
formik.values.flockSourceKandangs.filter(
|
||||||
|
(k) =>
|
||||||
|
k.kandang.value !==
|
||||||
|
item.project_flock_kandang_id
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={itemIdx}
|
||||||
|
className='w-full p-3 flex flex-row items-center justify-between'
|
||||||
|
>
|
||||||
|
<div className='flex flex-row items-center gap-3'>
|
||||||
|
<CheckboxInput
|
||||||
|
name={`flockSourceKandang.${itemIdx}.value`}
|
||||||
|
value={item.project_flock_kandang_id}
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={flockSourceKandangCheckboxChangeHandler}
|
||||||
|
size='md'
|
||||||
|
disabled={!isAvailable}
|
||||||
|
classNames={{
|
||||||
|
checkbox: cn({
|
||||||
|
'bg-base-200 border border-base-content/10 opacity-100':
|
||||||
|
!isAvailable,
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label
|
||||||
|
htmlFor={`flockSourceKandang.${itemIdx}.value`}
|
||||||
|
className={cn('text-sm text-base-content/50', {
|
||||||
|
'cursor-pointer': isAvailable,
|
||||||
|
'cursor-not-allowed': !isAvailable,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{item.kandang_name}{' '}
|
||||||
|
<span className='text-base-content/20'>{`(Max: ${item.available_qty})`}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<StatusBadge
|
||||||
|
color={isAvailable ? 'info' : 'neutral'}
|
||||||
|
text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
|
||||||
|
className={{ badge: 'w-fit' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full p-4 flex flex-col gap-3'>
|
||||||
|
<div className='flex flex-row items-center justify-between'>
|
||||||
|
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
|
||||||
|
Pilih Kandang Tujuan
|
||||||
|
</h4>
|
||||||
|
{formik.touched.flockDestinationKandangs &&
|
||||||
|
formik.errors.flockDestinationKandangs &&
|
||||||
|
typeof formik.errors.flockDestinationKandangs ===
|
||||||
|
'string' && (
|
||||||
|
<span className='text-xs text-error'>
|
||||||
|
{formik.errors.flockDestinationKandangs}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-fit flex flex-row items-stretch gap-3'>
|
||||||
|
<StatusBadge
|
||||||
|
color='info'
|
||||||
|
text={`Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.available})`}
|
||||||
|
className={{ badge: 'text-nowrap' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='w-px border-none bg-base-content/10' />
|
||||||
|
|
||||||
|
<StatusBadge
|
||||||
|
color='neutral'
|
||||||
|
text={`Tidak Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.unavailable})`}
|
||||||
|
className={{ badge: 'text-nowrap' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full rounded-xl border border-base-content/10'>
|
||||||
|
{selectedFlockDestinationRawData?.kandangs.map(
|
||||||
|
(item, itemIdx) => {
|
||||||
|
// TODO: change this to real available quota later
|
||||||
|
const isAvailable = item.capacity > 0;
|
||||||
|
const isChecked =
|
||||||
|
formik.values.flockDestinationKandangs.some(
|
||||||
|
(k) =>
|
||||||
|
k.kandang.value === item.project_flock_kandang_id
|
||||||
|
);
|
||||||
|
|
||||||
|
const flockDestinationKandangCheckboxChangeHandler: FormEventHandler<
|
||||||
|
HTMLInputElement
|
||||||
|
> = (e) => {
|
||||||
|
const checked = (e.target as HTMLInputElement).checked;
|
||||||
|
if (checked) {
|
||||||
|
formik.setFieldValue('flockDestinationKandangs', [
|
||||||
|
...formik.values.flockDestinationKandangs,
|
||||||
|
{
|
||||||
|
kandang: {
|
||||||
|
value: item.project_flock_kandang_id,
|
||||||
|
label: item.name,
|
||||||
|
},
|
||||||
|
quantity: '',
|
||||||
|
// TODO: change this to real available quota later
|
||||||
|
maxQuantity: item.capacity,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
formik.setFieldValue(
|
||||||
|
'flockDestinationKandangs',
|
||||||
|
formik.values.flockDestinationKandangs.filter(
|
||||||
|
(k) =>
|
||||||
|
k.kandang.value !==
|
||||||
|
item.project_flock_kandang_id
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={itemIdx}
|
||||||
|
className='w-full p-3 flex flex-row items-center justify-between'
|
||||||
|
>
|
||||||
|
<div className='flex flex-row items-center gap-3'>
|
||||||
|
<CheckboxInput
|
||||||
|
name={`flockDestinationKandang.${itemIdx}.value`}
|
||||||
|
value={item.project_flock_kandang_id}
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={
|
||||||
|
flockDestinationKandangCheckboxChangeHandler
|
||||||
|
}
|
||||||
|
size='md'
|
||||||
|
disabled={!isAvailable}
|
||||||
|
classNames={{
|
||||||
|
checkbox: cn({
|
||||||
|
'bg-base-200 border border-base-content/10 opacity-100':
|
||||||
|
!isAvailable,
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label
|
||||||
|
htmlFor={`flockDestinationKandang.${itemIdx}.value`}
|
||||||
|
className={cn('text-sm text-base-content/50', {
|
||||||
|
'cursor-pointer': isAvailable,
|
||||||
|
'cursor-not-allowed': !isAvailable,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{item.name}{' '}
|
||||||
|
{/* TODO: change this to real available quota later */}
|
||||||
|
<span className='text-base-content/20'>{`(Max: ${item.capacity})`}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<StatusBadge
|
||||||
|
color={isAvailable ? 'info' : 'neutral'}
|
||||||
|
text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
|
||||||
|
className={{ badge: 'w-fit' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className='w-full p-4 border-t border-base-content/10'>
|
||||||
|
{step < 3 && (
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
onClick={nextButtonHandler}
|
||||||
|
disabled={isNextButtonDisabled}
|
||||||
|
className='w-full p-3 rounded-lg text-sm text-base-100'
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2nd Section */}
|
||||||
|
{step === 3 && (
|
||||||
|
<div className='w-full sm:w-[446px] border-l border-base-content/10'>
|
||||||
|
<div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
|
||||||
|
<h4 className='text-sm font-medium text-base-content/50'>
|
||||||
|
Tambah Kuantitas
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
variant='ghost'
|
||||||
|
color='none'
|
||||||
|
onClick={deleteEnteredKandangHandler}
|
||||||
|
className='p-0 text-error'
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:trash' width={20} height={20} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full p-4 flex flex-col'>
|
||||||
|
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
|
||||||
|
Informasi Kandang
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
{/* Source Kandang */}
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<span className='w-full py-2 text-xs font-semibold'>
|
||||||
|
Kandang Asal
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{formik.values.flockSourceKandangs.length === 0 && (
|
||||||
|
<span className='text-sm text-base-content/50 italic'>
|
||||||
|
Belum ada kandang asal yang dipilih
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{formik.values.flockSourceKandangs.length > 0 && (
|
||||||
|
<div className='flex flex-col gap-3'>
|
||||||
|
{formik.values.flockSourceKandangs.map((item, index) => {
|
||||||
|
const isInvalid =
|
||||||
|
item.quantity === ''
|
||||||
|
? false
|
||||||
|
: Boolean(
|
||||||
|
getIn(
|
||||||
|
formik.errors,
|
||||||
|
`flockSourceKandangs[${index}].quantity`
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const errorMessage = getIn(
|
||||||
|
formik.errors,
|
||||||
|
`flockSourceKandangs[${index}].quantity`
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NumberInput
|
||||||
|
key={`flockSourceKandangs-${item.kandang.value}-${index}`}
|
||||||
|
name={`flockSourceKandangs.${index}.quantity`}
|
||||||
|
placeholder='Masukkan Kuantitas'
|
||||||
|
value={item.quantity}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
isError={isInvalid}
|
||||||
|
errorMessage={errorMessage}
|
||||||
|
inputPrefix={
|
||||||
|
<div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
|
||||||
|
<span
|
||||||
|
title={item.kandang.label}
|
||||||
|
className='text-sm text-base-content self-center text-nowrap truncate'
|
||||||
|
>
|
||||||
|
{item.kandang.label}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div className='w-px bg-base-content/10' />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
className={{
|
||||||
|
inputPrefix:
|
||||||
|
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
|
||||||
|
inputPrefixSuffixWrapper: 'grid grid-cols-2',
|
||||||
|
inputWrapper: 'border-l-0 pl-5',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Destination Kandang */}
|
||||||
|
<div className='mt-3 flex flex-col'>
|
||||||
|
<span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
|
||||||
|
<span className='text-nowrap'>Kandang Tujuan</span>
|
||||||
|
|
||||||
|
<div className='w-px h-5 bg-base-content/10' />
|
||||||
|
|
||||||
|
<StatusBadge
|
||||||
|
color={
|
||||||
|
totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
|
||||||
|
}
|
||||||
|
text={`Sisa ayam: ${formatNumber(
|
||||||
|
totalAvailableChickenForTransfer
|
||||||
|
)} ekor`}
|
||||||
|
className={{
|
||||||
|
badge: 'text-nowrap',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{formik.values.flockDestinationKandangs.length === 0 && (
|
||||||
|
<span className='text-sm text-base-content/50 italic'>
|
||||||
|
Belum ada kandang tujuan yang dipilih
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{formik.values.flockDestinationKandangs.length > 0 && (
|
||||||
|
<div className='flex flex-col gap-3'>
|
||||||
|
{formik.values.flockDestinationKandangs.map(
|
||||||
|
(item, index) => {
|
||||||
|
const isInvalid =
|
||||||
|
item.quantity === ''
|
||||||
|
? false
|
||||||
|
: Boolean(
|
||||||
|
getIn(
|
||||||
|
formik.errors,
|
||||||
|
`flockDestinationKandangs[${index}].quantity`
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const errorMessage = getIn(
|
||||||
|
formik.errors,
|
||||||
|
`flockDestinationKandangs[${index}].quantity`
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NumberInput
|
||||||
|
key={`flockDestinationKandangs-${item.kandang.value}-${index}`}
|
||||||
|
name={`flockDestinationKandangs.${index}.quantity`}
|
||||||
|
placeholder='Masukkan Kuantitas'
|
||||||
|
value={item.quantity}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
isError={isInvalid}
|
||||||
|
errorMessage={errorMessage}
|
||||||
|
inputPrefix={
|
||||||
|
<div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
|
||||||
|
<span
|
||||||
|
title={item.kandang.label}
|
||||||
|
className='text-sm text-base-content self-center text-nowrap truncate'
|
||||||
|
>
|
||||||
|
{item.kandang.label}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div className='w-px bg-base-content/10' />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
className={{
|
||||||
|
inputPrefix:
|
||||||
|
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
|
||||||
|
inputPrefixSuffixWrapper: 'grid grid-cols-2',
|
||||||
|
inputWrapper: 'border-l-0 pl-5',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full p-4 flex flex-col border-y border-base-content/10'>
|
||||||
|
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
|
||||||
|
Informasi Umum
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<NumberInput
|
||||||
|
name='totalQuantity'
|
||||||
|
label='Jumlah Transfer'
|
||||||
|
placeholder='Total Kuantitas Transfer'
|
||||||
|
value={formik.values.totalQuantity}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={totalAvailableChickenForTransfer < 0}
|
||||||
|
errorMessage={
|
||||||
|
totalAvailableChickenForTransfer < 0
|
||||||
|
? 'Jumlah transfer melebihi ketersediaan'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextArea
|
||||||
|
name='reason'
|
||||||
|
label='Catatan'
|
||||||
|
placeholder='Alasan Transfer'
|
||||||
|
rows={4}
|
||||||
|
value={formik.values.reason}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={
|
||||||
|
Boolean(formik.touched.reason) &&
|
||||||
|
Boolean(formik.errors.reason)
|
||||||
|
}
|
||||||
|
errorMessage={formik.errors.reason}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full p-4 self-end flex flex-col gap-3'>
|
||||||
|
{formErrorMessage && (
|
||||||
|
<div role='alert' className='alert alert-error w-full'>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:error-outline'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
|
<span>{formErrorMessage}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type='submit'
|
||||||
|
disabled={
|
||||||
|
formik.isSubmitting || totalAvailableChickenForTransfer < 0
|
||||||
|
}
|
||||||
|
isLoading={formik.isSubmitting}
|
||||||
|
className='w-full p-3 rounded-lg text-sm text-base-100'
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TransferToLayingFormModal;
|
||||||
Reference in New Issue
Block a user