add loading when post/put data on master data module

src/pages/master/aldeias/blocks/AddDialog.tsx

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface SucosProps {
   id: number;
@@ -54,6 +55,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -63,7 +65,9 @@ const AddDialog = () => {
   const doCreateAldeias = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL}/aldeias/create`, formField);
 
         if (response?.status) {
@@ -71,16 +75,21 @@ const AddDialog = () => {
           handleAddDialog(false);
           toast.success('Success Create Aldeia');
           reload();
+
           const createActivity = {
             module: 'Manage Aldeia',
             description: `Create Aldeia => ${formField.name}`,
             action: 'C'
           };
-
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Error Create Aldeia');
-        setAlert({ show: true, message: 'Failed to create Aldeia. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -221,7 +230,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/aldeias/blocks/EditDialog.tsx

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface SucosProps {
   id: number;
@@ -54,6 +55,7 @@ const EditDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -63,7 +65,9 @@ const EditDialog = () => {
   const doUpdateAldeias = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(`${API_URL}/aldeias/update/${selectedAldeias}`, formField);
 
         if (response?.status) {
@@ -80,7 +84,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Error Update Aldeia');
-        setAlert({ show: true, message: 'Error Update Aldeia' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedAldeias, formField]
@@ -258,7 +267,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end">
-                    <Button className="btn btn-primary">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/conversion/blocks/AddDialog.tsx

@@ -34,6 +34,7 @@ import {
 } from '@/components/ui/select';
 import { useManageConversionContext } from '../hooks/useManageConversionContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -65,6 +66,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -74,7 +76,9 @@ const AddDialog = () => {
   const doCreateConversion = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL}/dashboard/conversion`, formField);
 
         if (response?.status) {
@@ -91,7 +95,12 @@ const AddDialog = () => {
           reload();
         } else {
           toast.error('Error Create Conversion');
-        setAlert({ show: true, message: 'Failed to create Conversion. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something Went Wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -280,7 +289,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/conversion/blocks/EditDialog.tsx

@@ -34,6 +34,7 @@ import {
 } from '@/components/ui/select';
 import { useManageConversionContext } from '../hooks/useManageConversionContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -49,6 +50,7 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
@@ -75,7 +77,9 @@ const EditDialog = () => {
   const doUpdateConversion = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      if (!showEditDialog) return;
+      setIsSubmitting(true);
+
+      try {
         const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
           ...formField
         });
@@ -94,7 +98,12 @@ const EditDialog = () => {
           reload();
         } else {
           toast.error('Error Create Conversion');
-        setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -305,7 +314,13 @@ const EditDialog = () => {
                     </div>
                   </div>
                   <div className="flex justify-end gap-5">
-                    <Button variant="default">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Create'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/currency/blocks/AddDialog.tsx

@@ -35,6 +35,7 @@ import {
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
 import { prefix } from 'stylis';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -50,6 +51,7 @@ const AddDialog = () => {
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -74,7 +76,9 @@ const AddDialog = () => {
   const doCreateCurrency = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL}/dashboard/currency/`, formField);
 
         if (response?.status) {
@@ -91,7 +95,12 @@ const AddDialog = () => {
           reload();
         } else {
           toast.error('Error Create Currency');
-        setAlert({ show: true, message: 'Failed to create Currency. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -220,7 +229,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/currency/blocks/EditDialog.tsx

@@ -34,6 +34,7 @@ import {
 } from '@/components/ui/select';
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -49,6 +50,7 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
@@ -74,10 +76,13 @@ const EditDialog = () => {
   const doUpdateCurrency = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      if (!showEditDialog) return;
+      setIsSubmitting(true);
-      const response = await PutData(`${API_URL}/dashboard/currency/${selectedCurrency}`, {
+
-        ...formField
+      try {
-      });
+        const response = await PutData(
+          `${API_URL}/dashboard/currency/${selectedCurrency}`,
+          formField
+        );
 
         if (response?.status) {
           resetForm();
@@ -93,7 +98,12 @@ const EditDialog = () => {
           reload();
         } else {
           toast.error('Error Create Currency');
-        setAlert({ show: true, message: 'Failed to Update Currency. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -235,7 +245,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button variant="default">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/municipios/blocks/AddDialog.tsx

@@ -17,6 +17,7 @@ import { toast } from 'sonner';
 import { getAuth, useAuthContext } from '@/auth';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -39,6 +40,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -48,6 +50,9 @@ const AddDialog = () => {
   const doCreateMunicipio = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
+
+      try {
         const response = await PostData(`${API_URL}/municipios/create`, formField);
 
         if (response?.status) {
@@ -64,7 +69,12 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed to create municipio.');
-        setAlert({ show: true, message: 'Failed to create municipio. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -140,8 +150,12 @@ const AddDialog = () => {
                   <Button variant={'outline'} type="reset" onClick={handleReset}>
                     Reset
                   </Button>
-                  <Button variant={'default'} type="submit">
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
-                    Create
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
                   </Button>
                 </div>
               </div>

src/pages/master/municipios/blocks/EditDialog.tsx

@@ -17,6 +17,7 @@ import { Button } from '@/components/ui/button';
 import { getAuth, useAuthContext } from '@/auth';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -27,6 +28,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -50,6 +52,9 @@ const EditDialog = () => {
   const doUpdateMunicipios = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
+
+      try {
         const response = await PutData(
           `${API_URL}/municipios/update/${selectedMunicipios}`,
           formField
@@ -69,7 +74,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed update user');
-        setAlert({ show: true, message: 'Failed to update municipio. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedMunicipios, formField]
@@ -177,7 +187,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end pt-2.5">
-                    <Button className="btn btn-primary">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/postoadms/blocks/AddDialog.tsx

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface MunicipioProps {
   id: number;
@@ -41,6 +42,7 @@ const AddDialog = () => {
   const parsedUser = getAuth()?.user;
   const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -65,7 +67,9 @@ const AddDialog = () => {
   const doCreatePostoAdm = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL}/postoadms/create`, formField);
 
         if (response?.status) {
@@ -84,9 +88,14 @@ const AddDialog = () => {
           toast.error('Failed to create Postu Administrativo. Please try again.');
           setAlert({
             show: true,
-          message: 'Failed to create Postu Administrativo. Please try again.'
+            message: response?.message
           });
         }
+      } catch (error) {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
     },
     [formField]
   );
@@ -222,7 +231,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/postoadms/blocks/EditDialog.tsx

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface MunicipioProps {
   id: number;
@@ -43,6 +44,7 @@ const EditDialog = () => {
   const [open, setOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [alert, setAlert] = useState({
     show: false,
@@ -66,8 +68,13 @@ const EditDialog = () => {
   const doUpdatePostoAdm = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
-      const response = await PutData(`${API_URL}/postoadms/update/${selectedPostoAdms}`, formField);
+      try {
+        const response = await PutData(
+          `${API_URL}/postoadms/update/${selectedPostoAdms}`,
+          formField
+        );
 
         if (response?.status) {
           handleEditDialog(false, null);
@@ -86,9 +93,14 @@ const EditDialog = () => {
           toast.error('Error Update Postu Administrativo');
           setAlert({
             show: true,
-          message: 'Failed to update Postu Administrativo Please try again.'
+            message: response?.message
           });
         }
+      } catch (error) {
+        toast.error('Something went wrong, please try again');
+      } finally {
+        setIsSubmitting(false);
+      }
     },
     [selectedPostoAdms, formField]
   );
@@ -261,7 +273,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button className="btn btn-primary">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/products/blocks/AddDialog.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { NumericFormat } from 'react-number-format';
+import { RefreshCw } from 'lucide-react';
 
 interface ProviderProps {
   provider_id: number;
@@ -72,6 +73,7 @@ const AddDialog = () => {
   };
   const [formField, setFormField] = useState(initialState);
   const [providers, setProviders] = useState<ProviderProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -83,7 +85,9 @@ const AddDialog = () => {
   const doCreateProduct = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL}/product/create`, formField);
 
         if (response?.status) {
@@ -103,6 +107,11 @@ const AddDialog = () => {
           toast.error('Failed Create Product');
           setAlert({ show: true, message: response?.message });
         }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
     },
     [formField]
   );
@@ -356,9 +365,7 @@ const AddDialog = () => {
 
                 <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">
+                    <label className="form-label flex items-center gap-1 max-w-56">Provider</label>
-                      Provider
-                    </label>
                     <Select
                       value={formField.provider}
                       onValueChange={(value) =>
@@ -408,7 +415,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/products/blocks/EditDialog.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { NumericFormat } from 'react-number-format';
+import { RefreshCw } from 'lucide-react';
 
 interface ProviderProps {
   provider_id: string;
@@ -37,6 +38,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [alert, setAlert] = useState({
@@ -83,7 +85,9 @@ const EditDialog = () => {
   const doUpdateProduct = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(`${API_URL}/product/update/${selectedProducts}`, formField);
 
         if (response?.status) {
@@ -101,7 +105,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed to update Product. Please try again.');
-        setAlert({ show: true, message: 'Failed to update Product. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedProducts, formField]
@@ -449,7 +458,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button variant="default">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/profession/blocks/AddDialog.tsx

@@ -16,6 +16,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 const AddDialog = () => {
@@ -35,6 +36,7 @@ const AddDialog = () => {
     created_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -46,7 +48,9 @@ const AddDialog = () => {
   const doCreateProfession = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL}/profession/create`, formField);
 
         if (response?.status) {
@@ -66,6 +70,11 @@ const AddDialog = () => {
           toast.error('Failed Create Profession');
           setAlert({ show: true, message: response?.message });
         }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
     },
     [formField]
   );
@@ -134,7 +143,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Create</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/profession/blocks/EditDialog.tsx

@@ -16,6 +16,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
@@ -24,6 +25,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [alert, setAlert] = useState({
@@ -45,7 +47,9 @@ const EditDialog = () => {
   const doUpdateProfession = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(
           `${API_URL}/profession/update/${selectedProfession}`,
           formField
@@ -66,7 +70,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed Update Profession');
-        setAlert({ show: true, message: 'Failed Update Profession' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedProfession, formField]
@@ -170,7 +179,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end">
-                    <Button className="btn btn-primary">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/provider/blocks/AddDialog.tsx

@@ -32,6 +32,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 export interface CustomerProps {
   id: string;
@@ -57,6 +58,7 @@ const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const parsedUser = getAuth()?.user;
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -96,7 +98,9 @@ const AddDialog = () => {
   const doCreateProvider = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
         if (response?.status) {
@@ -113,7 +117,12 @@ const AddDialog = () => {
           reload();
         } else {
           toast.error('Failed Create Provider');
-        setAlert({ show: true, message: 'Failed Create Provider' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -361,7 +370,12 @@ const AddDialog = () => {
                       <label className="form-label flex items-center gap-1 max-w-56">
                         Agent Name
                       </label>
-                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
+                      <Input
+                        type="text"
+                        placeholder="Type Agent Only"
+                        readOnly
+                        className="cursor-not-allowed"
+                      />
                     </div>
                   </div>
                 )}
@@ -370,7 +384,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Create</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/provider/blocks/EditDialog.tsx

@@ -33,6 +33,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -76,6 +77,7 @@ const EditDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -85,7 +87,9 @@ const EditDialog = () => {
   const doUpdateProvider = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(
           `${API_URL_MASTERDATA}/provider/update/${selectedProvider}`,
           formField
@@ -105,7 +109,12 @@ const EditDialog = () => {
           reload();
         } else {
           toast.error('Failed to update provider.');
-        setAlert({ show: true, message: 'Failed to update provider.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedProvider, formField]
@@ -409,7 +418,13 @@ const EditDialog = () => {
                   )}
 
                   <div className="flex justify-end">
-                    <Button variant="default">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/reward/blocks/AddDialog.tsx

@@ -24,6 +24,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -48,6 +49,7 @@ const AddDialog = () => {
   };
 
   const [formField, setFormField] = useState(initialState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -68,7 +70,9 @@ const AddDialog = () => {
   const doCreateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      // console.log('Data yang akan dikirim:', formField);
+      setIsSubmitting(true);
+
+      try {
         const response = await PostData(`${API_URL}/reward/create`, formField);
 
         if (response?.status) {
@@ -85,7 +89,12 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed to create reward.');
-        setAlert({ show: true, message: 'Failed to create reward. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -223,8 +232,12 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default" type="submit">
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
-                    Save Change
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
                   </Button>
                 </div>
               </div>

src/pages/master/reward/blocks/EditDialog.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/select';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -34,6 +35,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -69,8 +71,9 @@ const EditDialog = () => {
   const doUpdateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
-      // console.log('Ini datanya:', selectedReward);
+      try {
         const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
 
         if (response?.status) {
@@ -87,7 +90,12 @@ const EditDialog = () => {
           doSaveLogActivity(editActivity);
         } else {
           toast.error('Error Update Reward');
-        setAlert({ show: true, message: 'Failed to Update Reward. Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedReward, formField]
@@ -261,7 +269,13 @@ const EditDialog = () => {
                     </div>
                   </div>
                   <div className="flex justify-end gap-5">
-                    <Button variant="default">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/sucos/blocks/AddDialog.tsx

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface PostoAdmsProps {
   PostoAdms_id: number;
@@ -40,6 +41,7 @@ const AddDialog = () => {
   const parsedUser = getAuth()?.user;
   const [posto_adms, setPostoadms] = useState<PostoAdmsProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -63,6 +65,9 @@ const AddDialog = () => {
   const doCreateSucos = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
+
+      try {
         const response = await PostData(`${API_URL}/sucos/create`, formField);
 
         if (response?.status) {
@@ -79,7 +84,12 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed to create Sucos Please try again.');
-        setAlert({ show: true, message: 'Failed to create Sucos Please try again.' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -225,7 +235,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/sucos/blocks/EditDialog.tsx

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface PostoAdmsProps {
   PostoAdms_id: number; // Ubah ke PostoAdms_id
@@ -39,6 +40,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
 
@@ -69,7 +71,9 @@ const EditDialog = () => {
   const doUpdateSucos = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(`${API_URL}/sucos/update/${selectedSucos}`, formField);
 
         if (response?.status) {
@@ -86,7 +90,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed Update Sucos');
-        setAlert({ show: true, message: 'Failed Update Sucos. Please try again' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedSucos, formField]
@@ -260,7 +269,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button className="btn btn-primary">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>

src/pages/master/wallet/blocks/AddDialog.tsx

@@ -23,6 +23,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface CurrencyProps {
   ID: string;
@@ -64,6 +65,7 @@ const AddDialog = () => {
     id_currency: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [groups, setGroups] = useState<GroupProps[]>([]);
 
@@ -95,7 +97,9 @@ const AddDialog = () => {
   const doCreateWallet = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL_MASTER_DATA}/wallet/create`, formField);
 
         if (response?.status) {
@@ -112,7 +116,12 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed Create Wallet');
-        setAlert({ show: true, message: 'Failed Create Wallet' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -293,7 +302,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Create</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/wallet/blocks/EditDialog.tsx

@@ -22,6 +22,7 @@ import {
 } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface CurrencyProps {
   ID: string;
@@ -66,6 +67,7 @@ const EditDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [groups, setGroups] = useState<GroupProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -75,7 +77,9 @@ const EditDialog = () => {
   const doUpdateWallet = useCallback(
     async (payload: { name: string; description: string; status: string }) => {
       // e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(
           `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.id}`,
           payload
@@ -95,7 +99,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed Update Wallet');
-        setAlert({ show: true, message: 'Failed Update Wallet' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -314,8 +323,12 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button variant="default" type="submit">
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
-                      Update
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
                     </Button>
                   </div>
                 </div>

src/pages/master/walletRule/blocks/AddDialog.tsx

@@ -32,6 +32,7 @@ import {
 } from '@/components/ui/command';
 import { NumericFormat } from 'react-number-format';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface GroupProps {
   ID: string;
@@ -88,6 +89,7 @@ const AddDialog = () => {
   };
   const [formField, setFormField] = useState(initialState);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -97,7 +99,9 @@ const AddDialog = () => {
   const doCreateWalletRule = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL_WALLET}/dashboard/wallet_rule`, formField);
 
         if (response?.status) {
@@ -114,7 +118,12 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed Create Wallet Rule');
-        setAlert({ show: true, message: 'Failed Create Wallet Rule' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -377,7 +386,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Create</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/master/walletRule/blocks/EditDialog.tsx

@@ -32,6 +32,7 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface GroupProps {
   ID: string;
@@ -79,6 +80,7 @@ const EditDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const [groups, setGroups] = useState<GroupProps[]>([]);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -88,7 +90,9 @@ const EditDialog = () => {
   const doUpdateWalletRule = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
+      try {
         const response = await PutData(
           `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule?.ID}`,
           formField
@@ -108,7 +112,12 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
         } else {
           toast.error('Failed Update Wallet Rule');
-        setAlert({ show: true, message: 'Failed Update Wallet Rule' });
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -402,7 +411,13 @@ const EditDialog = () => {
                 </div>
 
                 <div className="flex justify-end gap-5">
-                  <Button variant="default">Update</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                    ) : (
+                      'Save Changes'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/menu/manage-menu/blocks/AddDIalog.tsx

@@ -22,6 +22,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_dashboard;
 const AddDialog = () => {
@@ -43,9 +44,11 @@ const AddDialog = () => {
     status: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setIsSubmitting(true);
 
     if (
       formField.module === '' ||
@@ -58,11 +61,9 @@ const AddDialog = () => {
       return;
     }
 
-    // console.log('Data dikirim ke API:', formField);
+    try {
       const response = await PostData(`${API_URL}/menus/create`, formField);
 
-    // console.log('Response from API:', response);
-
       if (response?.status) {
         handleAddDialog(false);
         resetForm();
@@ -77,9 +78,14 @@ const AddDialog = () => {
         reload();
       } else {
         toast.error('Failed Create Menu');
-      setAlert({ show: true, message: 'Failed Create Menu' });
+        setAlert({ show: true, message: response?.message });
       }
-    // console.log(formField);
+    } catch (error) {
+      toast.error('Something went wrong, please try again');
+    } finally {
+      setIsSubmitting(false);
+    }
+
     setAlert({ show: false, message: '' });
   };
 
@@ -226,7 +232,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <Button variant="default">Save Changes</Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>

src/pages/menu/manage-menu/blocks/EditDialog.tsx

@@ -32,6 +32,7 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { PutData } = useCallApi();
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -49,6 +50,7 @@ const EditDialog = () => {
 
   const handleUpdate = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setIsSubmitting(true);
 
     if (
       selectedMenu.module === '' ||
@@ -62,6 +64,7 @@ const EditDialog = () => {
       return;
     }
 
+    try {
       const updateMenu = selectedMenu;
       if (updateMenu.id_parent === null) updateMenu.id_parent = '';
       delete updateMenu.parentName;
@@ -80,8 +83,14 @@ const EditDialog = () => {
         reload();
       } else {
         toast.error('Failed Update Menu');
-      setAlert({ show: true, message: 'Failed Update Menu' });
+        setAlert({ show: true, message: response?.message });
       }
+    } catch (error) {
+      toast.error('Something went wrong, please trt again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+
     setAlert({ show: false, message: '' });
   };