diff --git a/src/components/pages/production/recording/grading/form/GradingForm.tsx b/src/components/pages/production/recording/grading/form/GradingForm.tsx index 0acaaa02..5a8fb1b3 100644 --- a/src/components/pages/production/recording/grading/form/GradingForm.tsx +++ b/src/components/pages/production/recording/grading/form/GradingForm.tsx @@ -15,6 +15,7 @@ import { UpdateGradingPayload, RecordingEgg, GradingEgg, + Recording, } from '@/types/api/production/recording'; import { type FormStepStatus, @@ -31,6 +32,7 @@ import toast from 'react-hot-toast'; import { RecordingApi } from '@/services/api/production'; import { isResponseError } from '@/lib/api-helper'; import { useModal } from '@/components/Modal'; +import useSWR from 'swr'; import Card from '@/components/Card'; import StepItem from '@/components/steps/StepItem'; @@ -54,18 +56,36 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { const deleteModal = useModal(); // ===== API DATA FETCHING ===== - // const existingGradingsUrl = useMemo(() => { - // const recordingEggIdToUse = recordingId || initialValues?.id?.toString(); - // if (!recordingEggIdToUse) return null; - // return `${RecordingApi.basePath}/gradings?recording_egg_id=${recordingEggIdToUse}`; - // }, [recordingId, initialValues]); + const recordingUrl = useMemo(() => { + const recordingIdToUse = recordingId; + if (!recordingIdToUse) return null; + return `${RecordingApi.basePath}/${recordingIdToUse}`; + }, [recordingId]); - // const { data: existingGradings } = useSWR( - // existingGradingsUrl, - // existingGradingsUrl ? RecordingApi.getAllFetcher : null - // ); + const { data: recordingData } = useSWR( + recordingUrl, + recordingUrl ? RecordingApi.getAllFetcher : null + ); // ===== DATA PROCESSING ===== + const recording = + recordingData?.status === 'success' + ? (recordingData.data as unknown as Recording) + : undefined; + + const konsumsiBaikEggData = useMemo(() => { + if (!recording?.eggs) return null; + + const konsumsiBaikEgg = recording.eggs.find((egg: RecordingEgg) => + egg.product_warehouse?.product?.name + ?.toLowerCase() + .includes('konsumsi baik') + ); + + return konsumsiBaikEgg || null; + }, [recording]); + + const totalKonsumsiBaikEggs = konsumsiBaikEggData?.qty || 0; // ===== FORM HANDLERS ===== const createGradingHandler = useCallback( @@ -180,7 +200,14 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { }, }); - // Grading Handlers + const currentGradingTotal = useMemo(() => { + return (formik.values.eggs_grading || []).reduce((total, grading) => { + return total + (Number(grading.qty) || 0); + }, 0); + }, [formik.values.eggs_grading]); + + const isGradingExceedsAvailable = currentGradingTotal > totalKonsumsiBaikEggs; + const addGrading = () => { let recordingEggId: number | undefined = initialValues?.id; @@ -385,7 +412,7 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { className={ type === 'detail' ? 'flex flex-col gap-6' - : 'grid grid-cols-3 gap-4' + : 'grid grid-cols-2 gap-4' } > {type === 'detail' && initialValues ? ( @@ -398,6 +425,32 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { {formik.values.eggs_grading?.[0]?.recording_egg_id || '-'} )} + + {/* Total Telur Konsumsi Baik Info */} +
+ + Total Telur Konsumsi Baik + +
+

+ {totalKonsumsiBaikEggs} +

+ telur +
+
+ Total yang digrading: + + {currentGradingTotal} / {totalKonsumsiBaikEggs} + +
+ {isGradingExceedsAvailable && ( +
+ ⚠️ Total grading melebihi available telur! +
+ )} +
@@ -506,7 +559,6 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { { value: 'Grade B', label: 'Grade B' }, { value: 'Grade C', label: 'Grade C' }, { value: 'Grade D', label: 'Grade D' }, - { value: 'Extra', label: 'Extra' }, ]} placeholder='Pilih Grade' isError={ @@ -538,11 +590,14 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { decimalSeparator='.' isError={ isRepeaterInputError('eggs_grading', 'qty', idx) - .isError + .isError || isGradingExceedsAvailable } errorMessage={ isRepeaterInputError('eggs_grading', 'qty', idx) - .errorMessage + .errorMessage || + (isGradingExceedsAvailable + ? `Total grading melebihi available telur (${totalKonsumsiBaikEggs})` + : undefined) } readOnly={type === 'detail'} className={{ @@ -660,10 +715,20 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => { color='primary' className='px-4' isLoading={formik.isSubmitting} - disabled={!formik.isValid || formik.isSubmitting} + disabled={ + !formik.isValid || + formik.isSubmitting || + isGradingExceedsAvailable + } > Submit + {isGradingExceedsAvailable && ( +
+ Total grading ({currentGradingTotal}) melebihi available + telur ({totalKonsumsiBaikEggs}) +
+ )} )}