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
-            type='button'
-            color='error'
-            onClick={onDelete}
-            className='px-4'
-          >
-            <Icon
-              icon='material-symbols:delete-outline-rounded'
-              width={24}
-              height={24}
-              className='justify-start text-sm'
-            />
-            Delete
-          </Button>
+          {onDelete && (
+            <Button
+              type='button'
+              color='error'
+              onClick={onDelete}
+              className='px-4'
+            >
+              <Icon
+                icon='material-symbols:delete-outline-rounded'
+                width={24}
+                height={24}
+                className='justify-start text-sm'
+              />
+              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' && (