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,25 +22,32 @@ 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'>
-          <Button
+          {onDelete && (
-            type='button'
+            <Button
-            color='error'
+              type='button'
-            onClick={onDelete}
+              color='error'
-            className='px-4'
+              onClick={onDelete}
-          >
+              className='px-4'
-            <Icon
+            >
-              icon='material-symbols:delete-outline-rounded'
+              <Icon
-              width={24}
+                icon='material-symbols:delete-outline-rounded'
-              height={24}
+                width={24}
-              className='justify-start text-sm'
+                height={24}
-            />
+                className='justify-start text-sm'
-            Delete
+              />
-          </Button>
+              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,20 +1397,58 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       </section>
 
       {type !== 'add' && (
-        <ConfirmationModal
+        <>
-          ref={deleteModal.ref}
+          <ConfirmationModal
-          type='error'
+            ref={deleteModal.ref}
-          text='Apakah anda yakin ingin menghapus data Recording ini?'
+            type='error'
-          secondaryButton={{
+            text='Apakah anda yakin ingin menghapus data Recording ini?'
-            text: 'Tidak',
+            secondaryButton={{
-          }}
+              text: 'Tidak',
-          primaryButton={{
+            }}
-            text: 'Ya',
+            primaryButton={{
-            color: 'error',
+              text: 'Ya',
-            isLoading: isDeleteLoading,
+              color: 'error',
-            onClick: confirmationModalDeleteClickHandler,
+              isLoading: isDeleteLoading,
-          }}
+              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,
+              }}
+            />
+          )}
+        </>
       )}
     </>
   );