feat(FE-137): add approve and reject functionality in RecordingForm with confirmation modals

src/components/helper/form/FormActions.tsx

@@ -9,6 +9,11 @@ interface FormActionsProps<T> {
   editUrl?: string;
   onDelete?: () => void;
   disableSubmit?: boolean;
+  onApprove?: () => void;
+  onReject?: () => void;
+  isApproveLoading?: boolean;
+  isRejectLoading?: boolean;
+  showApproveReject?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -17,11 +22,17 @@ export const FormActions = <T,>({
   editUrl,
   onDelete,
   disableSubmit = false,
+  onApprove,
+  onReject,
+  isApproveLoading = false,
+  isRejectLoading = false,
+  showApproveReject = false,
 }: FormActionsProps<T>) => {
   return (
     <div className='flex flex-row justify-between gap-2 flex-wrap'>
-      {type !== 'add' && onDelete && (
+      {type !== 'add' && (
         <div className='flex flex-row justify-start gap-2'>
+          {onDelete && (
             <Button
               type='button'
               color='error'
@@ -36,6 +47,7 @@ export const FormActions = <T,>({
               />
               Delete
             </Button>
+          )}
           {type !== 'edit' && editUrl && (
             <Button
               type='button'
@@ -52,6 +64,44 @@ export const FormActions = <T,>({
               Edit
             </Button>
           )}
+          {type === 'detail' && showApproveReject && (onApprove || onReject) && (
+            <>
+              {onApprove && (
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={onApprove}
+                  className='px-4'
+                  isLoading={isApproveLoading}
+                >
+                  <Icon
+                    icon='material-symbols:check-circle-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Approve
+                </Button>
+              )}
+              {onReject && (
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={onReject}
+                  className='px-4'
+                  isLoading={isRejectLoading}
+                >
+                  <Icon
+                    icon='material-symbols:cancel-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Reject
+                </Button>
+              )}
+            </>
+          )}
         </div>
       )}
       {type !== 'detail' && (

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

@@ -12,10 +12,12 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
+import { RecordingApi } from '@/services/api/production';
 import {
   CreateRecordingPayload,
   Recording,
 } from '@/types/api/production/recording';
+import { type BaseApiResponse } from '@/types/api/api-general';
 import {
   RecordingFormSchema,
   RecordingFormValues,
@@ -28,6 +30,8 @@ import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
+import { useModal } from '@/components/Modal';
+import toast from 'react-hot-toast';
 
 import Card from '@/components/Card';
 
@@ -130,6 +134,73 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     confirmationModalDeleteClickHandler,
   } = useRecordingFormHandlers(initialValues?.id);
 
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  // Modals for approve/reject actions
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Approve handler
+  const approveHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: [initialValues?.id as number],
+        notes: 'Approved via Form',
+      },
+    });
+
+    if (isResponseSuccess(approveResponse)) {
+      toast.success('Recording berhasil disetujui!');
+      approveModal.closeModal();
+      // Optional: redirect or refresh data
+      if (typeof window !== 'undefined') {
+        window.location.href = '/production/recording';
+      }
+    } else {
+      toast.error(approveResponse?.message as string || 'Gagal menyetujui recording');
+      approveModal.closeModal();
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  // Reject handler
+  const rejectHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids: [initialValues?.id as number],
+        notes: 'Rejected via Form',
+      },
+    });
+
+    if (isResponseSuccess(rejectResponse)) {
+      toast.success('Recording berhasil ditolak!');
+      rejectModal.closeModal();
+      // Optional: redirect or refresh data
+      if (typeof window !== 'undefined') {
+        window.location.href = '/production/recording';
+      }
+    } else {
+      toast.error(rejectResponse?.message as string || 'Gagal menolak recording');
+      rejectModal.closeModal();
+    }
+
+    setIsRejectLoading(false);
+  };
+
   const formikInitialValues = useMemo<RecordingFormValues>(
     () => getRecordingFormInitialValues(initialValues),
     [initialValues]
@@ -1305,6 +1376,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 : undefined
             }
             onDelete={deleteRecordingClickHandler}
+            onApprove={() => approveModal.openModal()}
+            onReject={() => rejectModal.openModal()}
+            isApproveLoading={isApproveLoading}
+            isRejectLoading={isRejectLoading}
+            showApproveReject={type === 'detail'}
             disableSubmit={hasExceededStock}
           />
           {recordingFormErrorMessage && (
@@ -1321,6 +1397,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       </section>
 
       {type !== 'add' && (
+        <>
           <ConfirmationModal
             ref={deleteModal.ref}
             type='error'
@@ -1335,6 +1412,43 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               onClick: confirmationModalDeleteClickHandler,
             }}
           />
+
+          {/* Approve Confirmation Modal */}
+          {type === 'detail' && (
+            <ConfirmationModal
+              ref={approveModal.ref}
+              type='success'
+              text='Apakah anda yakin ingin menyetujui data Recording ini?'
+              secondaryButton={{
+                text: 'Tidak',
+              }}
+              primaryButton={{
+                text: 'Ya',
+                color: 'success',
+                isLoading: isApproveLoading,
+                onClick: approveHandler,
+              }}
+            />
+          )}
+
+          {/* Reject Confirmation Modal */}
+          {type === 'detail' && (
+            <ConfirmationModal
+              ref={rejectModal.ref}
+              type='error'
+              text='Apakah anda yakin ingin menolak data Recording ini?'
+              secondaryButton={{
+                text: 'Tidak',
+              }}
+              primaryButton={{
+                text: 'Ya',
+                color: 'error',
+                isLoading: isRejectLoading,
+                onClick: rejectHandler,
+              }}
+            />
+          )}
+        </>
       )}
     </>
   );