feat(FE-170,174): add notes input to approval and rejection confirmation modals

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

@@ -14,6 +14,7 @@ import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import { useModal } from '@/components/Modal';
 import Tooltip from '@/components/Tooltip';
 
@@ -92,6 +93,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [approvalNotes, setApprovalNotes] = useState('');
   const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
     useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -1134,16 +1136,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.values.project_flock_kandang_id,
   ]);
 
-  const approveHandler = async () => {
+  const approveHandler = async (notes: string) => {
     setIsApproveLoading(true);
 
     const approveResponse = await RecordingApi.approve(
-      initialValues?.id as number
+      initialValues?.id as number,
+      notes
     );
 
     if (isResponseSuccess(approveResponse)) {
       toast.success('Recording berhasil disetujui!');
       approveModal.closeModal();
+      setApprovalNotes('');
       await refreshApprovals();
       router.push('/production/recording');
     } else {
@@ -1156,17 +1160,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     setIsApproveLoading(false);
   };
 
-  const rejectHandler = async () => {
+  const rejectHandler = async (notes: string) => {
     setIsRejectLoading(true);
 
     const rejectResponse = await RecordingApi.reject(
       initialValues?.id as number,
-      ''
+      notes
     );
 
     if (isResponseSuccess(rejectResponse)) {
       toast.success('Recording berhasil ditolak!');
       rejectModal.closeModal();
+      setApprovalNotes('');
       await refreshApprovals();
       router.push('/production/recording');
     } else {
@@ -1477,7 +1482,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <Button
                     variant='outline'
                     color='success'
-                    onClick={() => approveModal.openModal()}
+                    onClick={() => {
+                      setApprovalNotes('');
+                      approveModal.openModal();
+                    }}
                     isLoading={isApproveLoading}
                     className='w-full sm:w-fit'
                   >
@@ -1492,7 +1500,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <Button
                     variant='outline'
                     color='error'
-                    onClick={() => rejectModal.openModal()}
+                    onClick={() => {
+                      setApprovalNotes('');
+                      rejectModal.openModal();
+                    }}
                     isLoading={isRejectLoading}
                     className='w-full sm:w-fit'
                   >
@@ -1778,7 +1789,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Berat Ayam (gram)
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom '
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1787,7 +1798,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Jumlah Ayam
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom'
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -1796,7 +1807,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Rata-rata Berat Ayam (gram)
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom '
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -2014,7 +2025,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Persediaan
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom '
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -2023,7 +2034,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Jumlah Pakai
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom '
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -2234,7 +2245,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Kondisi
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom '
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -2243,7 +2254,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <th>
                       Jumlah
                       <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        className='tooltip tooltip-error tooltip-bottom '
                         data-tip='required'
                       >
                         <span className='text-error'>*</span>
@@ -2444,7 +2455,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <th>
                         Kondisi Telur
                         <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          className='tooltip tooltip-error tooltip-bottom '
                           data-tip='required'
                         >
                           <span className='text-error'>*</span>
@@ -2453,7 +2464,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <th>
                         Jumlah
                         <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          className='tooltip tooltip-error tooltip-bottom '
                           data-tip='required'
                         >
                           <span className='text-error'>*</span>
@@ -2852,12 +2863,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {(type as 'add' | 'edit' | 'detail') === 'detail' &&
             !isRecordingApproved(initialValues) &&
             (!isLayingCategory || hasGradingData(initialValues)) && (
-              <ConfirmationModal
+              <ConfirmationModalWithNotes
                 ref={approveModal.ref}
                 type='success'
                 text='Apakah anda yakin ingin menyetujui data Recording ini?'
                 secondaryButton={{
                   text: 'Tidak',
+                  onClick: () => setApprovalNotes(''),
                 }}
                 primaryButton={{
                   text: 'Ya',
@@ -2865,6 +2877,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   isLoading: isApproveLoading,
                   onClick: approveHandler,
                 }}
+                placeholder='(Opsional) Tambahkan catatan untuk approval ini...'
+                rows={3}
               />
             )}
 
@@ -2872,12 +2886,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {(type as 'add' | 'edit' | 'detail') === 'detail' &&
             !isRecordingApproved(initialValues) &&
             (!isLayingCategory || hasGradingData(initialValues)) && (
-              <ConfirmationModal
+              <ConfirmationModalWithNotes
                 ref={rejectModal.ref}
                 type='error'
                 text='Apakah anda yakin ingin menolak data Recording ini?'
                 secondaryButton={{
                   text: 'Tidak',
+                  onClick: () => setApprovalNotes(''),
                 }}
                 primaryButton={{
                   text: 'Ya',
@@ -2885,6 +2900,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   isLoading: isRejectLoading,
                   onClick: rejectHandler,
                 }}
+                placeholder='(Opsional) Tambahkan catatan untuk reject ini...'
+                rows={3}
               />
             )}
         </>