feat(FE-170,174,175): add validation for incomplete grading in GradingForm

This commit is contained in:
rstubryan
2025-11-19 19:05:45 +07:00
parent 9c69369a51
commit c876824c8f
@@ -256,6 +256,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
}, [formik.values.eggs_grading]);
const isGradingExceedsAvailable = currentGradingTotal > totalKonsumsiBaikEggs;
const isGradingIncomplete = currentGradingTotal < totalKonsumsiBaikEggs && totalKonsumsiBaikEggs > 0;
const hasUserStartedGrading = currentGradingTotal > 0;
// GRADING HANDLERS
const addGrading = () => {
@@ -355,10 +357,21 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
duration: 3000,
}
);
toast.dismiss('grading-incomplete');
} else if (isGradingIncomplete && hasUserStartedGrading) {
toast.error(
`Total grading (${currentGradingTotal}) tidak sama dengan total telur konsumsi baik yang tersedia (${totalKonsumsiBaikEggs})! Semua telur harus digrading.`,
{
id: 'grading-incomplete',
duration: 3000,
}
);
toast.dismiss('grading-exceeds');
} else {
toast.dismiss('grading-exceeds');
toast.dismiss('grading-incomplete');
}
}, [isGradingExceedsAvailable, currentGradingTotal, totalKonsumsiBaikEggs]);
}, [isGradingExceedsAvailable, isGradingIncomplete, hasUserStartedGrading, currentGradingTotal, totalKonsumsiBaikEggs]);
useEffect(() => {
if (
@@ -559,6 +572,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
className={`rounded-lg p-4 border-2 ${
isGradingExceedsAvailable
? 'bg-red-50 border-red-200'
: isGradingIncomplete && hasUserStartedGrading
? 'bg-yellow-50 border-yellow-200'
: 'bg-green-50 border-green-200'
}`}
>
@@ -578,13 +593,19 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
</div>
<div
className={`rounded-full p-2 ${
isGradingExceedsAvailable ? 'bg-red-100' : 'bg-green-100'
isGradingExceedsAvailable
? 'bg-red-100'
: isGradingIncomplete && hasUserStartedGrading
? 'bg-yellow-100'
: 'bg-green-100'
}`}
>
<Icon
icon={
isGradingExceedsAvailable
? 'material-symbols:error'
: isGradingIncomplete && hasUserStartedGrading
? 'material-symbols:warning'
: 'material-symbols:check-circle'
}
width={20}
@@ -592,6 +613,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
className={
isGradingExceedsAvailable
? 'text-red-600'
: isGradingIncomplete && hasUserStartedGrading
? 'text-yellow-600'
: 'text-green-600'
}
/>
@@ -606,6 +629,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
className={`font-semibold ${
isGradingExceedsAvailable
? 'text-red-600'
: isGradingIncomplete && hasUserStartedGrading
? 'text-yellow-600'
: 'text-green-600'
}`}
>
@@ -617,6 +642,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
className={`h-full transition-all duration-300 ${
isGradingExceedsAvailable
? 'bg-red-500'
: isGradingIncomplete && hasUserStartedGrading
? 'bg-yellow-500'
: 'bg-green-500'
}`}
style={{
@@ -634,6 +661,16 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
<span>Melebihi batas tersedia</span>
</div>
)}
{isGradingIncomplete && hasUserStartedGrading && (
<div className='flex items-center gap-1 text-xs text-yellow-600 mt-1'>
<Icon
icon='material-symbols:info'
width={12}
height={12}
/>
<span>Grading belum lengkap, semua telur harus digrading</span>
</div>
)}
</div>
</div>
</div>
@@ -775,13 +812,16 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
decimalSeparator='.'
isError={
isRepeaterInputError('eggs_grading', 'qty', idx)
.isError || isGradingExceedsAvailable
.isError ||
(isGradingExceedsAvailable || (isGradingIncomplete && hasUserStartedGrading))
}
errorMessage={
isRepeaterInputError('eggs_grading', 'qty', idx)
.errorMessage ||
(isGradingExceedsAvailable
? `Total grading melebihi telur yang tersedia (${totalKonsumsiBaikEggs})`
: isGradingIncomplete && hasUserStartedGrading
? `Total grading (${currentGradingTotal}) harus sama dengan total telur konsumsi baik (${totalKonsumsiBaikEggs})`
: undefined)
}
readOnly={type === 'detail'}
@@ -903,7 +943,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
disabled={
!formik.isValid ||
formik.isSubmitting ||
isGradingExceedsAvailable
isGradingExceedsAvailable ||
(isGradingIncomplete && hasUserStartedGrading)
}
>
Submit