add submitting handler on disbursement upload batch

src/pages/disbursement/history-transaction/blocks/UploadBatchDialog.tsx

@@ -24,6 +24,7 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_disbursement;
 
@@ -32,17 +33,18 @@ const UploadBatchDialog = () => {
   const { showUploadBatchDialog, handleUploadBatchDialog } = useTransactionContext();
   const { reload } = useDataGrid();
   const { PostData, PostDataFile, GetData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
   const initialState: {
-    execution_date: string,
+    execution_date: string;
     file: File | null;
   } = {
     execution_date: '',
     file: null
-  }
+  };
   const [formField, setFormField] = useState(initialState);
 
   const resetForm = () => {
@@ -54,31 +56,33 @@ const UploadBatchDialog = () => {
   const doUploadBatch = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-  
+      setIsSubmitting(true);
+
       const formData = new FormData();
       formData.append('execution_date', formField.execution_date);
+
       if (formField.file) {
         formData.append('file', formField.file);
       }
-  
+
       try {
         const response = await PostDataFile(`${API_URL}/upload-excel`, formData, {
           headers: {
             'Content-Type': 'multipart/form-data'
           }
         });
-  
+
         if (response?.status) {
           handleUploadBatchDialog(false);
           resetForm();
           reload();
-  
+
           const createActivity = {
             module: 'Disbursement',
             description: `Create New Disbursement => ${formField.file?.name}`,
             action: 'C'
           };
-  
+
           doSaveLogActivity(createActivity);
           toast.success('Success Create Disbursement');
         } else {
@@ -88,6 +92,8 @@ const UploadBatchDialog = () => {
       } catch (error) {
         toast.error('Error uploading batch');
         setAlert({ show: true, message: 'Something went wrong. Please try again.' });
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -98,10 +104,7 @@ const UploadBatchDialog = () => {
 
     console.log('Form data before submit:', formField);
 
-    if (
-      formField.execution_date.trim() === '' || 
-      formField.file === null
-    ) {
+    if (formField.execution_date.trim() === '' || formField.file === null) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
@@ -110,7 +113,7 @@ const UploadBatchDialog = () => {
     // console.log(formField);
     setAlert({ show: false, message: '' });
   };
-  
+
   useEffect(() => {
     if (showUploadBatchDialog === false) {
       resetForm();
@@ -150,7 +153,9 @@ const UploadBatchDialog = () => {
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">Execution Date</label>
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Execution Date
+                    </label>
                     <Input
                       className="input"
                       type="datetime-local"
@@ -167,19 +172,23 @@ const UploadBatchDialog = () => {
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">File</label>
                     <Input
-                        className="input"
-                        type="file"
-                        autoComplete="off"
-                        required
-                        onChange={({ target }) =>
-                            setFormField((prev) => ({ ...prev, file: target.files?.[0] ?? null }))
-                        }
+                      className="input"
+                      type="file"
+                      autoComplete="off"
+                      required
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, file: target.files?.[0] ?? null }))
+                      }
                     />
                   </div>
                 </div>
                 <div className="flex justify-end pt-2.5">
-                  <Button className="btn btn-primary" type="submit">
-                    Save Changes
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Submit'
+                    )}
                   </Button>
                 </div>
               </div>