feat(FE-170,174,175): add tooltip for grading button based on consumable eggs validation

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
+import Tooltip from '@/components/Tooltip';
 
 import {
   ProjectFlockKandangApi,
@@ -950,6 +951,54 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     );
   }, [formik.values.stocks, getStockUsageError, type]);
 
+  const hasConsumableEggs = useMemo(() => {
+    if (!isLayingCategory) return false;
+    const layingValues = formik.values as RecordingLayingFormValues;
+    if (!layingValues.eggs || layingValues.eggs.length === 0) return false;
+
+    return layingValues.eggs.some((egg) => {
+      if (!egg.product_warehouse_id || Number(egg.qty) <= 0) return false;
+
+      const product = eggProducts.find(
+        (opt) => opt.value === egg.product_warehouse_id
+      );
+
+      if (!product) return false;
+
+      const productName = product.label.toLowerCase();
+      return (
+        productName.includes('konsumsi') &&
+        productName.includes('baik') &&
+        Number(egg.qty) > 0
+      );
+    });
+  }, [isLayingCategory, formik.values, eggProducts]);
+
+  const hasConsumableEggsInRecording = useCallback((recording?: Recording) => {
+    if (!recording || !recording.eggs || recording.eggs.length === 0)
+      return false;
+
+    return recording.eggs.some((egg) => {
+      if (!egg.product_warehouse || !egg.product_warehouse.product)
+        return false;
+      if (Number(egg.qty) <= 0) return false;
+
+      const productName = egg.product_warehouse.product.name.toLowerCase();
+      return (
+        productName.includes('konsumsi') &&
+        productName.includes('baik') &&
+        Number(egg.qty) > 0
+      );
+    });
+  }, []);
+
+  const hasConsumableEggsInCurrentRecording = useMemo(() => {
+    return (
+      hasConsumableEggsInRecording(initialValues) ||
+      hasConsumableEggsInRecording(newRecordingData || undefined)
+    );
+  }, [initialValues, newRecordingData, hasConsumableEggsInRecording]);
+
   const isRepeaterInputError = (
     arrayName: 'body_weights' | 'stocks' | 'depletions' | 'eggs',
     column: string,
@@ -2606,9 +2655,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             </div>
             <div className='flex flex-row justify-end gap-2'>
               {type === 'detail' && isLayingCategory && (
+                <Tooltip
+                  content={
+                    hasConsumableEggsInCurrentRecording
+                      ? 'Lanjut ke proses grading untuk telur konsumsi baik'
+                      : 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik'
+                  }
+                  position='top'
+                  color={
+                    hasConsumableEggsInCurrentRecording ? 'info' : 'warning'
+                  }
+                >
                   <Button
                     type='button'
                     color='primary'
+                    disabled={!hasConsumableEggsInCurrentRecording}
                     onClick={() => {
                       const recordingId =
                         newRecordingData?.id || initialValues?.id;
@@ -2629,6 +2690,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       ? 'Edit Grading'
                       : 'Lanjut ke Grading'}
                   </Button>
+                </Tooltip>
               )}
 
               {type === 'edit' && (
@@ -2683,6 +2745,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     Submit
                   </Button>
                   {isLayingCategory && (
+                    <Tooltip
+                      content={
+                        hasConsumableEggs
+                          ? 'Lanjut ke proses grading untuk telur konsumsi baik'
+                          : 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik'
+                      }
+                      position='top'
+                      color={hasConsumableEggs ? 'info' : 'warning'}
+                    >
                       <Button
                         type='button'
                         color='info'
@@ -2691,7 +2762,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         disabled={
                           hasExceededStock ||
                           !formik.isValid ||
-                        formik.isSubmitting
+                          formik.isSubmitting ||
+                          !hasConsumableEggs
                         }
                         onClick={async () => {
                           if (!formik.isValid) {
@@ -2743,6 +2815,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         />
                         Next Step: Grading
                       </Button>
+                    </Tooltip>
                   )}
                 </>
               )}