Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/layouts/demo2/header/HeaderLogo.tsx

@@ -19,6 +19,16 @@ const HeaderLogo = () => {
   const { pathname } = useLocation();
   const { isRTL } = useLanguage();
   const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[0]);
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsSticky(window.scrollY > 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   useEffect(() => {
     MENU_ROOT.forEach((item) => {
@@ -55,7 +65,9 @@ const HeaderLogo = () => {
       </Link>
 
       <div className="flex items-center">
-        <h3 className="text-gray-50 text-xl hidden md:block">TPAY Dashboard Portal</h3>
+        <h3 className={`text-xl hidden md:block ${isSticky ? 'text-black' : 'text-gray-50'}`}>
+          TPAY Dashboard Portal
+        </h3>
       </div>
     </div>
   );

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

@@ -27,8 +27,8 @@ import {
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface SucosProps {
-  sucos_id: number;
+  id: number;
-  sucos_name: string;
+  name: string;
 }
 
 const API_URL = apiConfig.service_master_data;
@@ -181,7 +181,7 @@ const AddDialog = () => {
                           className="input col-span-5 text-left"
                           style={{ color: 'inherit' }}
                         >
-                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
+                          {sucos.find((suco) => suco.id === formField.sucosId)?.name ||
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
@@ -196,17 +196,17 @@ const AddDialog = () => {
                             <CommandGroup>
                               {sucos.map((suco) => (
                                 <CommandItem
-                                  key={suco.sucos_id}
+                                  key={suco.id}
-                                  value={suco.sucos_name}
+                                  value={suco.name}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      sucosId: suco.sucos_id
+                                      sucosId: suco.id
                                     });
                                     setOpen(false);
                                   }}
                                 >
-                                  {suco.sucos_name}
+                                  {suco.name}
                                 </CommandItem>
                               ))}
                             </CommandGroup>

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

@@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
@@ -52,6 +59,8 @@ const DeleteDialog = () => {
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">You will delete this data!</span>

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

@@ -27,8 +27,8 @@ import {
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface SucosProps {
-  sucos_id: number;
+  id: number;
-  sucos_name: string;
+  name: string;
 }
 
 const API_URL = apiConfig.service_master_data;
@@ -40,6 +40,7 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [sucos, setSucos] = useState<SucosProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -96,8 +97,8 @@ const EditDialog = () => {
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
 
-      // console.log('SUCOS', response?.data);
       setSucos(response?.data.list);
+      // console.log(sucos);
     } catch (error) {
       console.error('Error fetching Sucos', error);
       setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
@@ -105,7 +106,11 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
+    setIsLoading(true);
+
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -120,6 +125,7 @@ const EditDialog = () => {
         sucosId: 0
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -176,72 +182,87 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Aldeia Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
+                    </div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Aldeia Details...</p>
-                <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">
-                      Sucos ID<span className="text-red-500">*</span>
-                    </label>
-                    <Popover open={open} onOpenChange={setOpen}>
-                      <PopoverTrigger asChild>
-                        <button
-                          type="button"
-                          className="input col-span-5 text-left"
-                          style={{ color: 'inherit' }}
-                        >
-                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
-                            'Select Sucos'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
-                        <Command>
-                          <CommandInput placeholder="Search Sucos..." />
-                          <CommandList>
-                            <CommandEmpty>No Sucos found.</CommandEmpty>
-                            <CommandGroup>
-                              {sucos.map((suco) => (
-                                <CommandItem
-                                  key={suco.sucos_id}
-                                  value={suco.sucos_name}
-                                  onSelect={() => {
-                                    setFormField({
-                                      ...formField,
-                                      sucosId: suco.sucos_id
-                                    });
-                                    setOpen(false);
-                                  }}
-                                >
-                                  {suco.sucos_name}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-
-                <div className="flex justify-end">
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Aldeia Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Sucos ID<span className="text-red-500">*</span>
+                      </label>
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
+                            {sucos.find((suco) => suco.id === formField.sucosId)?.name ||
+                              'Select Sucos'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Sucos..." />
+                            <CommandList>
+                              <CommandEmpty>No Sucos found.</CommandEmpty>
+                              <CommandGroup>
+                                {sucos.map((suco) => (
+                                  <CommandItem
+                                    key={suco.id}
+                                    value={suco.name}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        sucosId: suco.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {suco.name}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button className="btn btn-primary">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,12 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -19,6 +21,15 @@ const ListToolbar = () => {
     table.setPageIndex(0);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -28,17 +39,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Aldeia"
+                placeholder="Search"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx

@@ -122,7 +122,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }

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

@@ -49,6 +49,7 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -74,8 +75,8 @@ const EditDialog = () => {
   const doUpdateConversion = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-        if(!showEditDialog) return;
+      if (!showEditDialog) return;
-      const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{
+      const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
         ...formField
       });
 
@@ -83,13 +84,13 @@ const EditDialog = () => {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update Conversion');
-              const createActivity = {
+        const createActivity = {
-                module: 'Manage Conversion',
+          module: 'Manage Conversion',
-                description: `Update Conversion => ${selectedConversion}`,
+          description: `Update Conversion => ${selectedConversion}`,
-                action: 'U'
+          action: 'U'
-              };
+        };
 
-              doSaveLogActivity(createActivity);
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Conversion');
@@ -100,7 +101,7 @@ const EditDialog = () => {
   );
 
   const doGetCurrency = async (sorting: any) => {
-    if (!showEditDialog)return;
+    if (!showEditDialog) return;
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
       const response = await GetData(`${API_URL}/dashboard/currency/`, {
@@ -117,30 +118,32 @@ const EditDialog = () => {
     }
   };
 
-   const doGetConversionById = useCallback(async (id: string) => {
+  const doFetchData = useCallback(async (id: string) => {
-      const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
+    setIsLoading(true);
-      console.log('Transaction Type: ', response?.data);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
-      if (response?.status) {
+    const fetchData = GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
-        setFormField((prev) => ({
+    const [response] = await Promise.all([fetchData, minDelay]);
-          ...prev,
-          status: response.data.status,
-          id_currency_origin: response.data.id_currency_origin,
-          id_currency_destination: response.data.id_currency_destination,
-          buy: response.data.buy,
-          sell: response.data.sell,
-        }));
-      }
-      // console.log('form fieldd Transaction Type: ', formField);
-    }, []);
-  
-    useEffect(() => {
-      if (selectedConversion) {
-        doGetConversionById(selectedConversion);
-      }
-    }, [selectedConversion]);
-
 
+    console.log('Transaction Type: ', response?.data);
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        status: response.data.status,
+        id_currency_origin: response.data.id_currency_origin,
+        id_currency_destination: response.data.id_currency_destination,
+        buy: response.data.buy,
+        sell: response.data.sell
+      }));
+    }
+    // console.log('form fieldd Transaction Type: ', formField);
+    setIsLoading(false);
+  }, []);
 
+  useEffect(() => {
+    if (selectedConversion) {
+      doFetchData(selectedConversion);
+    }
+  }, [selectedConversion]);
 
   useEffect(() => {
     if (showEditDialog) {
@@ -158,7 +161,6 @@ const EditDialog = () => {
     }
   }, [showEditDialog]);
 
-
   useEffect(() => {
     if (showEditDialog === false) {
       resetForm();
@@ -166,7 +168,7 @@ const EditDialog = () => {
   }, [showEditDialog]);
 
   return (
-    <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open,null)}>
+    <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Conversion - Update</DialogTitle>
@@ -180,96 +182,110 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={doUpdateConversion}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <label className="form-label">
+                  <div className="flex-1 space-y-4 py-1">
-                    Currency Origin <span className="text-red-500">*</span>
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                  </label>
+                    <div className="space-y-2">
-                  <Select
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    value={formField.id_currency_origin}
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                    onValueChange={(id_currency_origin) =>
+                    </div>
-                      setFormField((prev) => ({ ...prev, id_currency_origin }))
+                  </div>
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select Currency" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {currencies.map((currency, idx) => (
-                        <SelectItem value={currency.ID} key={currency.ID}>
-                          {currency.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
                 </div>
-                <div className="w-full">
+                <p className="mt-4 text-gray-500">Loading Conversion Details...</p>
-                  <label className="form-label">
+              </div>
-                    Currency Destination <span className="text-red-500">*</span>
+            ) : (
-                  </label>
+              <form onSubmit={doUpdateConversion}>
-                  <Select
+                <div className="card-body grid gap-5">
-                    value={formField.id_currency_destination}
+                  <div className="w-full">
-                    onValueChange={(id_currency_destination) =>
+                    <label className="form-label">
-                      setFormField((prev) => ({ ...prev, id_currency_destination }))
+                      Currency Origin <span className="text-red-500">*</span>
-                    }
+                    </label>
-                  >
+                    <Select
-                    <SelectTrigger>
+                      value={formField.id_currency_origin}
-                      <SelectValue placeholder="Select Currency" />
+                      onValueChange={(id_currency_origin) =>
-                    </SelectTrigger>
+                        setFormField((prev) => ({ ...prev, id_currency_origin }))
-                    <SelectContent>
+                      }
-                      {currencies.map((currency, idx) => (
+                    >
-                        <SelectItem value={currency.ID} key={currency.ID}>
+                      <SelectTrigger>
-                          {currency.name}
+                        <SelectValue placeholder="Select Currency" />
-                        </SelectItem>
+                      </SelectTrigger>
-                      ))}
+                      <SelectContent>
-                    </SelectContent>
+                        {currencies.map((currency, idx) => (
-                  </Select>
+                          <SelectItem value={currency.ID} key={currency.ID}>
-                </div>
+                            {currency.name}
-                <div className="w-full">
+                          </SelectItem>
-                  <label className="form-label">
+                        ))}
-                    Buy<span className="text-red-500">*</span>
+                      </SelectContent>
-                  </label>
+                    </Select>
-                  <NumericFormat
+                  </div>
-                    className="input"
+                  <div className="w-full">
-                    value={formField.buy}
+                    <label className="form-label">
-                    thousandSeparator="."
+                      Currency Destination <span className="text-red-500">*</span>
-                    decimalSeparator=","
+                    </label>
-                    allowNegative={false}
+                    <Select
-                    onValueChange={(values) => {
+                      value={formField.id_currency_destination}
-                      setFormField((prev) => ({
+                      onValueChange={(id_currency_destination) =>
-                        ...prev,
+                        setFormField((prev) => ({ ...prev, id_currency_destination }))
-                        buy: values.floatValue || 0
+                      }
-                      }));
+                    >
-                    }}
+                      <SelectTrigger>
-                    placeholder="Enter Buy"
+                        <SelectValue placeholder="Select Currency" />
-                  />
+                      </SelectTrigger>
-                </div>
+                      <SelectContent>
-                <div className="w-full">
+                        {currencies.map((currency, idx) => (
-                  <label className="form-label">
+                          <SelectItem value={currency.ID} key={currency.ID}>
-                    Sell
+                            {currency.name}
-                    <span className="text-red-500">*</span>
+                          </SelectItem>
-                  </label>
+                        ))}
-                  <NumericFormat
+                      </SelectContent>
-                    className="input"
+                    </Select>
-                    value={formField.sell}
+                  </div>
-                    thousandSeparator="."
+                  <div className="w-full">
-                    decimalSeparator=","
+                    <label className="form-label">
-                    allowNegative={false}
+                      Buy<span className="text-red-500">*</span>
-                    onValueChange={(values) => {
+                    </label>
-                      setFormField((prev) => ({
+                    <NumericFormat
-                        ...prev,
+                      className="input"
-                        sell: values.floatValue || 0
+                      value={formField.buy}
-                      }));
+                      thousandSeparator="."
-                    }}
+                      decimalSeparator=","
-                    placeholder="Enter Sell"
+                      allowNegative={false}
-                  />
+                      onValueChange={(values) => {
-                </div>
+                        setFormField((prev) => ({
-                <div className="w-full">
+                          ...prev,
+                          buy: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Buy"
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">
+                      Sell
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.sell}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          sell: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Sell"
+                    />
+                  </div>
+                  <div className="w-full">
                     <label className="form-label">
                       Status
                       <span className="text-red-500">*</span>
-                      </label>
+                    </label>
 
                     <div className="grow">
                       <Select
@@ -287,16 +303,16 @@ const EditDialog = () => {
                         </SelectContent>
                       </Select>
                     </div>
-
+                  </div>
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button variant="default">Save Changes</Button>
+                  </div>
                 </div>
-                <div className="flex justify-end gap-5">
+              </form>
-                  <Button type="button" variant="outline" onClick={resetForm}>
+            )}
-                    Reset
-                  </Button>
-                  <Button variant="default">Save Changes</Button>
-                </div>
-              </div>
-            </form>
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -49,6 +49,7 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -98,8 +99,12 @@ const EditDialog = () => {
     [formField]
   );
 
-  const doGetCurrencyById = useCallback(async (id: string) => {
+  const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
+
     // console.log('Transaction Type: ', response?.data);
     if (response?.status) {
       setFormField((prev) => ({
@@ -110,12 +115,13 @@ const EditDialog = () => {
         prefix: response.data.prefix
       }));
     }
+    setIsLoading(false);
     // console.log('form fieldd Transaction Type: ', formField);
   }, []);
 
   useEffect(() => {
     if (selectedCurrency) {
-      doGetCurrencyById(selectedCurrency);
+      doFetchData(selectedCurrency);
     }
   }, [selectedCurrency]);
 
@@ -150,74 +156,93 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={doUpdateCurrency}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <label className="form-label">
+                  <div className="flex-1 space-y-4 py-1">
-                    Code
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                    <span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                  </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                  <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                    type="text"
+                    </div>
-                    placeholder="Code"
+                  </div>
-                    value={formField.code}
-                    onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
-                  />
-                </div>
-                <div className="w-full">
-                  <label className="form-label">
-                    Name
-                    <span className="text-red-500">*</span>
-                  </label>
-                  <Input
-                    type="text"
-                    placeholder="Code"
-                    value={formField.name}
-                    onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
-                  />
-                </div>
-
-                <div className="w-full">
-                  <label className="form-label">
-                    Prefix
-                    <span className="text-red-500">*</span>
-                  </label>
-                  <Input
-                    type="text"
-                    placeholder="Code"
-                    value={formField.prefix}
-                    onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
-                  />
-                </div>
-
-                <div className="w-full">
-                  <label className="form-label">
-                    Status
-                    <span className="text-red-500">*</span>
-                  </label>
-
-                  <Select
-                    value={formField.status}
-                    onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select" defaultValue={formField.status} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Y">Active</SelectItem>
-                      <SelectItem value="N">Inactive</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button variant="default">Save Changes</Button>
                 </div>
+                <p className="mt-4 text-gray-500">Loading Currency Details...</p>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={doUpdateCurrency}>
+                <div className="card-body grid gap-5">
+                  <div className="w-full">
+                    <label className="form-label">
+                      Code
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      type="text"
+                      placeholder="Code"
+                      value={formField.code}
+                      onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
+                    />
+                  </div>
+                  <div className="w-full">
+                    <label className="form-label">
+                      Name
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      type="text"
+                      placeholder="Code"
+                      value={formField.name}
+                      onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                    />
+                  </div>
+
+                  <div className="w-full">
+                    <label className="form-label">
+                      Prefix
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      type="text"
+                      placeholder="Code"
+                      value={formField.prefix}
+                      onChange={(e) =>
+                        setFormField((prev) => ({ ...prev, prefix: e.target.value }))
+                      }
+                    />
+                  </div>
+
+                  <div className="w-full">
+                    <label className="form-label">
+                      Status
+                      <span className="text-red-500">*</span>
+                    </label>
+
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, status: value }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select" defaultValue={formField.status} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button variant="default">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

src/pages/master/municipios/Municipios.tsx

@@ -1,7 +1,6 @@
 import { Container, DataGridInner } from '@/components';
 import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext';
 import AddDialog from './blocks/AddDialog';
-import SearchDialog from './blocks/SearchDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import { Breadcrumbs, Link } from '@mui/material';
@@ -35,7 +34,6 @@ const Municipios = () => {
           <AddDialog />
           <EditDialog />
           <DeleteDialog />
-          <SearchDialog />
         </Container>
       </ManageMunicipiosProvider>
     </>

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

@@ -26,6 +26,7 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -75,7 +76,10 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/municipios/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -88,6 +92,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -141,27 +146,42 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Municipio Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
+                    </div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Municipio Details...</p>
-                <div className="flex justify-end pt-2.5">
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Municipio Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end pt-2.5">
+                    <Button className="btn btn-primary">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,7 +1,7 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
 import { Button } from '@/components/ui/button';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 const ListToolbar = () => {
@@ -9,48 +9,33 @@ const ListToolbar = () => {
   const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
   const [searchName, setSearchName] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
-  const handleFilterData = useCallback(() => {
+  useEffect(() => {
-    try {
+    const timer = setTimeout(() => {
-      table.getColumn('name')?.setFilterValue(searchName);
+      table.getColumn('name')?.setFilterValue(searchValue);
-    } catch (error) {
+      table.setPageIndex(0);
-      toast.error('Error applying filter');
+    }, 200);
-      console.error('Error applying filter:', error);
-    }
-  }, [searchName, table]);
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+    return () => clearTimeout(timer);
-    if (event.key === 'Enter') {
+  }, [searchValue, table]);
-      handleSearch();
-    }
-  };
-
-  const handleSearch = () => {
-    table.getColumn('name')?.setFilterValue(searchValue);
-    table.setPageIndex(0);
-  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3 overflow-hidden">
+            <label className="input input-sm w-1/3">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Municipio"
+                placeholder="Search"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"

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

@@ -1,177 +0,0 @@
-import { useRef, useState } from 'react';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Alert, KeenIcon } from '@/components';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
-import { apiConfig } from '@/config/api.config';
-import axios from 'axios';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-
-interface PostoAdmsProps {
-  id: number;
-  name: string;
-}
-
-const API_URL = apiConfig.service_master_data;
-
-const SearchDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const { showSearchDialog, handleSearchDialog, municipios } = useManageMunicipiosContext();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    id: 0,
-    name: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-  };
-  const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
-  const [isFound, setIsFound] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const id = Number(formField.id);
-
-    if (formField.id === 0) {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
-
-    try {
-      const response = await axios.get(`${API_URL}/municipios/postoadms/${id}`);
-
-      if (response.data.status) {
-        setPostoadms(response.data.data);
-        setIsFound(true);
-        // console.log('Found postoadms: ', response.data.data);
-      } else {
-        setPostoadms([]);
-        setIsFound(false);
-        setAlert({ show: true, message: 'No postoadms found.' });
-      }
-    } catch (error) {
-      console.error('Error fetching postoadms', error);
-      setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
-    }
-    setAlert({ show: false, message: '' });
-  };
-
-  const handleReset = () => {
-    setFormField(initialState);
-    setIsFound(false);
-    setPostoadms([]);
-  };
-  // console.log(municipios);
-  return (
-    <Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
-      <DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogTitle></DialogTitle>
-        <DialogDescription></DialogDescription>
-        <DialogHeader className="p-2 border-0">
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">
-                Search Postoadms
-              </h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleSearchDialog(false);
-                resetForm();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger" className="mb-5">
-                {alert.message}
-              </Alert>
-            )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid-cols-6 gap-5 p-0">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Municipio Name<span className="text-red-500">*</span>
-                  </label>
-
-                  <Select
-                    value={formField.id.toString()}
-                    onValueChange={(target) => {
-                      const selectedMunicipio = municipios.find((m) => m.id.toString() === target);
-                      if (selectedMunicipio) {
-                        setFormField({
-                          ...formField,
-                          id: selectedMunicipio.id,
-                          name: selectedMunicipio.name
-                        });
-                      }
-                    }}
-                  >
-                    <SelectTrigger className="col-span-6">
-                      <SelectValue placeholder="Select Municipios" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {municipios.map((municipio) => (
-                        <SelectItem key={municipio.id} value={municipio.id.toString()}>
-                          {municipio.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {isFound && postoadms.length > 0 && (
-                  <div className="mt-4 border-t pt-4">
-                    <h2 className="text-md font-semibold">Postu Administravo: </h2>
-                    <br />
-                    <div className="flex flex-col">
-                      <span className="text-sm form-hint">
-                        {postoadms.map((posto) => posto.name).join(', ')}
-                      </span>
-                    </div>
-                  </div>
-                )}
-
-                <div className="flex justify-end pt-2.5 gap-5 col-span-6">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
-                    Reset
-                  </Button>
-                  <Button variant={'default'} type="submit">
-                    Search
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default SearchDialog;

src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx

@@ -132,7 +132,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }

src/pages/master/postoadms/PostoAdmsMaster.tsx

@@ -1,7 +1,6 @@
 import AddDialog from './blocks/AddDialog';
 import DeleteDialog from './blocks/DeleteDialog';
 import EditDialog from './blocks/EditDialog';
-import SearchDialog from './blocks/SearchDialog';
 import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext';
 import { Container, DataGridInner } from '@/components';
 import { Breadcrumbs, Link } from '@mui/material';
@@ -37,7 +36,6 @@ const PostoAdmsMaster = () => {
           <AddDialog />
           <EditDialog />
           <DeleteDialog />
-          <SearchDialog />
         </Container>
       </ManagePostoAdmsContextProvider>
     </>

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

@@ -41,6 +41,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
 
   const [alert, setAlert] = useState({
@@ -112,7 +113,10 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -126,6 +130,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -184,71 +189,86 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Postu Administrativo Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
+                    </div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Postu Administrativo Details...</p>
-                <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">
-                      Municipio Name<span className="text-red-500">*</span>
-                    </label>
-                    <Popover open={open} onOpenChange={setOpen}>
-                      <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
-                          {municipios.find((municipio) => municipio.id === formField.municipio_id)
-                            ?.name || 'Select Municipio'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
-                        <Command>
-                          <CommandInput placeholder="Search Municipio..." />
-                          <CommandList>
-                            <CommandEmpty>No Municipio found.</CommandEmpty>
-                            <CommandGroup>
-                              {municipios.map((municipio) => (
-                                <CommandItem
-                                  key={municipio.id}
-                                  value={municipio.name}
-                                  onSelect={() => {
-                                    setFormField({
-                                      ...formField,
-                                      municipio_id: municipio.id
-                                    });
-                                    setOpen(false);
-                                  }}
-                                >
-                                  {municipio.name}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Postu Administrativo Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Municipio Name<span className="text-red-500">*</span>
+                      </label>
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button type="button" className="input col-span-5 text-left">
+                            {municipios.find((municipio) => municipio.id === formField.municipio_id)
+                              ?.name || 'Select Municipio'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Municipio..." />
+                            <CommandList>
+                              <CommandEmpty>No Municipio found.</CommandEmpty>
+                              <CommandGroup>
+                                {municipios.map((municipio) => (
+                                  <CommandItem
+                                    key={municipio.id}
+                                    value={municipio.name}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        municipio_id: municipio.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {municipio.name}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button className="btn btn-primary">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -2,12 +2,14 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 
 import { Button } from '@/components/ui/button';
 import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext();
-  const [searchPosto, setSearchPosto] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -16,10 +18,19 @@ const ListToolbar = () => {
   };
 
   const handleSearch = () => {
-    table.getColumn('name')?.setFilterValue(searchPosto);
+    table.getColumn('name')?.setFilterValue(searchValue);
     table.setPageIndex(0);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -30,34 +41,15 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search"
-                value={searchPosto}
+                value={searchValue}
-                onChange={(event) => setSearchPosto(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleSearch}>
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
             </DefaultTooltip> */}
-            {/* <Button
-              variant="outline"
-              className="h-7.5 text-[0.8rem]"
-              onClick={() => handleSearchDialog(true)}
-            >
-              Search Sucos
-            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

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

@@ -1,177 +0,0 @@
-import { useRef, useState } from 'react';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Alert, KeenIcon } from '@/components';
-import { Button } from '@/components/ui/button';
-import { apiConfig } from '@/config/api.config';
-import axios from 'axios';
-import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-
-interface SucosProps {
-  id: number;
-  name: string;
-}
-
-const API_URL = apiConfig.service_master_data;
-
-const SearchDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const [open, setOpen] = useState(false);
-  const { showSearchDialog, handleSearchDialog, postoAdms } = useManagePostoAdmsContext();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    id: 0,
-    name: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-  };
-  const [sucos, setSucos] = useState<SucosProps[]>([]);
-  const [isFound, setIsFound] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const id = Number(formField.id);
-
-    if (formField.id === 0) {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
-
-    try {
-      const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`);
-
-      if (response.data.status) {
-        setSucos(response.data.data);
-        console.log(sucos);
-        setIsFound(true);
-        console.log('Found postoadms: ', response.data.data);
-      } else {
-        setSucos([]);
-        setIsFound(false);
-        setAlert({ show: true, message: 'No postoadms found.' });
-      }
-    } catch (error) {
-      console.error('Error fetching postoadms', error);
-      setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
-    }
-    setAlert({ show: false, message: '' });
-  };
-
-  const handleReset = () => {
-    setFormField(initialState);
-    setIsFound(false);
-    setSucos([]);
-  };
-
-  return (
-    <Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
-      <DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogHeader className="p-2 border-0">
-          <DialogTitle></DialogTitle>
-          <DialogDescription></DialogDescription>
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">Search Sucos</h1>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleSearchDialog(false);
-                handleReset();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
-            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
-
-            <div className="grid grid-cols-8 gap-1 w-full items-center">
-              <label className="form-label flex items-center col-span-3">
-                Postu Administrativo Name<span className="text-red-500">*</span>
-              </label>
-
-              <Popover open={open} onOpenChange={setOpen}>
-                <PopoverTrigger asChild>
-                  <button type="button" className="input col-span-5 text-left">
-                    {formField.name || 'Select PostoAdms'}
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[400px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search PostoAdms..." />
-                    <CommandList>
-                      <CommandEmpty>No PostoAdms found.</CommandEmpty>
-                      <CommandGroup>
-                        {postoAdms.map((postoAdm) => (
-                          <CommandItem
-                            key={postoAdm.PostoAdms_id}
-                            value={postoAdm.PostoAdms_name}
-                            onSelect={() => {
-                              setFormField({
-                                id: postoAdm.PostoAdms_id,
-                                name: postoAdm.PostoAdms_name
-                              });
-                              setOpen(false);
-                            }}
-                          >
-                            {postoAdm.PostoAdms_name}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            {isFound && sucos.length > 0 && (
-              <div className="mt-4 border-t pt-4">
-                <h2 className="text-md font-semibold">Sucos: </h2>
-                <div className="flex flex-col">
-                  <span className="text-sm form-hint">
-                    {sucos.map((suco) => suco.name).join(', ')}
-                  </span>
-                </div>
-              </div>
-            )}
-
-            <div className="flex justify-end gap-4">
-              <Button type="reset" variant="outline" onClick={handleReset}>
-                Reset
-              </Button>
-              <Button type="submit" variant="default">
-                Search
-              </Button>
-            </div>
-          </form>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default SearchDialog;

src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx

@@ -131,7 +131,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }

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

@@ -36,6 +36,7 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [alert, setAlert] = useState({
@@ -123,7 +124,12 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
+    setIsLoading(true);
+
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 500));
+    const fetchData = GetData(`${API_URL}/product/getdata/${id}`, { id });
+
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log(response);
 
     if (response?.status) {
@@ -144,6 +150,7 @@ const EditDialog = () => {
     } else {
       setFormField(initialState);
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -214,225 +221,242 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
+                    </div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Products Details...</p>
-                <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">
-                      Type<span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.type}
-                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Code<span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.code}
-                      onChange={(e) => setFormField({ ...formField, code: e.target.value })}
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Description<span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Price Point<span className="text-red-500">*</span>
-                    </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.price_point ?? ''}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          price_point: values.floatValue !== undefined ? values.floatValue : ''
-                        }));
-                      }}
-                      placeholder="Enter Price Point"
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Price Cash<span className="text-red-500">*</span>
-                    </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.price_cash ?? ''}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          price_cash: values.floatValue !== undefined ? values.floatValue : ''
-                        }));
-                      }}
-                      placeholder="Enter Price Cash"
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Cashback Point<span className="text-red-500">*</span>
-                    </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.cashback_point ?? ''}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          cashback_point: values.floatValue !== undefined ? values.floatValue : ''
-                        }));
-                      }}
-                      placeholder="Enter Cashback Point"
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Cashback Cash<span className="text-red-500">*</span>
-                    </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.cashback_cash ?? ''}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
-                        }));
-                      }}
-                      placeholder="Enter Cashback Cash"
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Status<span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.status}
-                      onValueChange={(e) => setFormField({ ...formField, status: e })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <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">
-                      Provider ID
-                    </label>
-                    <Select
-                      value={formField.provider}
-                      onValueChange={(e) => setFormField({ ...formField, provider: e })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a Provider" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {providers.map((provider) => (
-                          <SelectItem key={provider.provider_id} value={provider.provider_id}>
-                            {provider.provider_name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <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">
-                      Process on Third Party<span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.process_on_third_party}
-                      onValueChange={(value) =>
-                        setFormField({ ...formField, process_on_third_party: value })
-                      }
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Yes</SelectItem>
-                        <SelectItem value="N">No</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button variant="default">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Type<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.type}
+                        onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Code<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.code}
+                        onChange={(e) => setFormField({ ...formField, code: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Description<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.description}
+                        onChange={(e) =>
+                          setFormField({ ...formField, description: e.target.value })
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Price Point<span className="text-red-500">*</span>
+                      </label>
+                      <NumericFormat
+                        className="input"
+                        value={formField.price_point ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            price_point: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                        }}
+                        placeholder="Enter Price Point"
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Price Cash<span className="text-red-500">*</span>
+                      </label>
+                      <NumericFormat
+                        className="input"
+                        value={formField.price_cash ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            price_cash: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                        }}
+                        placeholder="Enter Price Cash"
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Cashback Point<span className="text-red-500">*</span>
+                      </label>
+                      <NumericFormat
+                        className="input"
+                        value={formField.cashback_point ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            cashback_point: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                        }}
+                        placeholder="Enter Cashback Point"
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Cashback Cash<span className="text-red-500">*</span>
+                      </label>
+                      <NumericFormat
+                        className="input"
+                        value={formField.cashback_cash ?? ''}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
+                          }));
+                        }}
+                        placeholder="Enter Cashback Cash"
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Status<span className="text-red-500">*</span>
+                      </label>
+                      <Select
+                        value={formField.status}
+                        onValueChange={(e) => setFormField({ ...formField, status: e })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <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">
+                        Provider ID
+                      </label>
+                      <Select
+                        value={formField.provider}
+                        onValueChange={(e) => setFormField({ ...formField, provider: e })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a Provider" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {providers.map((provider) => (
+                            <SelectItem key={provider.provider_id} value={provider.provider_id}>
+                              {provider.provider_name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <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">
+                        Process on Third Party<span className="text-red-500">*</span>
+                      </label>
+                      <Select
+                        value={formField.process_on_third_party}
+                        onValueChange={(value) =>
+                          setFormField({ ...formField, process_on_third_party: value })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Yes</SelectItem>
+                          <SelectItem value="N">No</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button variant="default">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,10 +1,23 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProductsContext } from '../hooks/useManageProductsContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageProductsContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -15,22 +28,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Products"
+                placeholder="Search"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchValue}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/master/products/hooks/ManageProductsContext.tsx

@@ -231,7 +231,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }

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

@@ -23,6 +23,7 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [alert, setAlert] = useState({
@@ -72,7 +73,10 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/profession/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -82,6 +86,7 @@ const EditDialog = () => {
     } else {
       setFormField(initialState);
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -134,27 +139,42 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
+                    </div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Profession Details...</p>
-                <div className="flex justify-end">
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button className="btn btn-primary">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,10 +1,24 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
+import { set } from 'date-fns';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProfessionContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -15,24 +29,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Profession"
+                placeholder="Search"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchValue}
-                onChange={(event) =>
+                onChange={(event) => setSearchValue(event.target.value)}
-                  table.getColumn('name')?.setFilterValue(event.target.value)
-                }
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/master/profession/hooks/ManageProfessionContext.tsx

@@ -102,7 +102,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
@@ -151,7 +151,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'name', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getProfessionLists(pageIndex, pageSize, sorting, columnFilters)

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

@@ -47,6 +47,7 @@ const EditDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -146,19 +147,23 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
-        name: response?.data.name,
+        name: response?.data.name || null,
         description: response?.data.description,
         type: response?.data.type,
         status: response?.data.status,
-        transaction_type: response?.data.transaction_type.id,
+        transaction_type: response?.data.transaction_type?.id || null,
         agent: response?.data.agent?.id || null
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -169,7 +174,8 @@ const EditDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type.trim() === ''
+      formField.transaction_type.trim() === '' ||
+      formField.agent === null
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
@@ -206,7 +212,7 @@ const EditDialog = () => {
     getCustomerList([{ id: 'id', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
-  // console.log(selectedProvider);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -222,170 +228,192 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
-                      type="text"
-                      value={formField.name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, name: target.value }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Description<span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Type<span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.type}
-                      onValueChange={(value) => setFormField({ ...formField, type: value })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="h2h">Host to Host</SelectItem>
-                        <SelectItem value="agent">Agent</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <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">
-                      Status<span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <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">
-                      Transaction Type Id<span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.transaction_type}
-                      onValueChange={(value) =>
-                        setFormField({ ...formField, transaction_type: value })
-                      }
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Transaction Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {transactions.map((transaction) => (
-                          <SelectItem key={transaction.id} value={transaction.id}>
-                            {transaction.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                {formField.type === 'agent' ? (
-                  <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">
-                        Agent Name<span className="text-red-500">*</span>
-                      </label>
-                      <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            className="input col-span-5 text-left"
-                            style={{ color: 'inherit' }}
-                          >
-                            {customers.find((customer) => customer.id === formField.agent)
-                              ?.username || 'Select Agent'}
-                          </button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[400px] p-0">
-                          <Command>
-                            <CommandInput placeholder="Search Agent..." />
-                            <CommandList
-                              className="max-h-[300px] overflow-y-auto"
-                              style={{ touchAction: 'pan-y' }}
-                              onWheel={(e) => {
-                                e.currentTarget.scrollTop += e.deltaY;
-                              }}
-                            >
-                              <CommandEmpty>No Agent found.</CommandEmpty>
-                              <CommandGroup>
-                                {customers.map((customer) => (
-                                  <CommandItem
-                                    key={customer.id}
-                                    value={customer.username}
-                                    onSelect={() => {
-                                      setFormField({
-                                        ...formField,
-                                        agent: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
                     </div>
                   </div>
-                ) : (
-                  <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">
-                        Agent Name
-                      </label>
-                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
-                    </div>
-                  </div>
-                )}
-
-                <div className="flex justify-end">
-                  <Button variant="default">Save Changes</Button>
                 </div>
+                <p className="mt-4 text-gray-500">Loading Provider Details...</p>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, name: target.value }))
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Description<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.description}
+                        onChange={(e) =>
+                          setFormField({ ...formField, description: e.target.value })
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Type<span className="text-red-500">*</span>
+                      </label>
+                      <Select
+                        value={formField.type}
+                        onValueChange={(value) => setFormField({ ...formField, type: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="h2h">Host to Host</SelectItem>
+                          <SelectItem value="agent">Agent</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <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">
+                        Status<span className="text-red-500">*</span>
+                      </label>
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => setFormField({ ...formField, status: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <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">
+                        Transaction Type Id<span className="text-red-500">*</span>
+                      </label>
+                      <Select
+                        value={formField.transaction_type}
+                        onValueChange={(value) =>
+                          setFormField({ ...formField, transaction_type: value })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Transaction Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {transactions.map((transaction) => (
+                            <SelectItem key={transaction.id} value={transaction.id}>
+                              {transaction.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {formField.type === 'agent' ? (
+                    <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">
+                          Agent Name<span className="text-red-500">*</span>
+                        </label>
+                        <Popover open={open} onOpenChange={setOpen}>
+                          <PopoverTrigger asChild>
+                            <button
+                              type="button"
+                              className="input col-span-5 text-left"
+                              style={{ color: 'inherit' }}
+                            >
+                              {customers.find((customer) => customer.id === formField.agent)
+                                ?.username || 'Select Agent'}
+                            </button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[400px] p-0">
+                            <Command>
+                              <CommandInput placeholder="Search Agent..." />
+                              <CommandList
+                                className="max-h-[300px] overflow-y-auto"
+                                style={{ touchAction: 'pan-y' }}
+                                onWheel={(e) => {
+                                  e.currentTarget.scrollTop += e.deltaY;
+                                }}
+                              >
+                                <CommandEmpty>No Agent found.</CommandEmpty>
+                                <CommandGroup>
+                                  {customers.map((customer) => (
+                                    <CommandItem
+                                      key={customer.id}
+                                      value={customer.username}
+                                      onSelect={() => {
+                                        setFormField({
+                                          ...formField,
+                                          agent: customer.id
+                                        });
+                                        setOpen(false);
+                                      }}
+                                    >
+                                      {customer.username}
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                    </div>
+                  ) : (
+                    <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">
+                          Agent Name
+                        </label>
+                        <Input
+                          type="text"
+                          placeholder="Type Agent Only"
+                          readOnly
+                          className="cursor-not-allowed"
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex justify-end">
+                    <Button variant="default">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,10 +1,23 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProviderContext } from '../hooks/useManageProviderContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProviderContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -15,24 +28,11 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Provider"
+                placeholder="Search"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchValue}
-                onChange={(event) =>
+                onChange={(event) => setSearchValue(event.target.value)}
-                  table.getColumn('name')?.setFilterValue(event.target.value)
-                }
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/master/provider/hooks/ManageProviderContext.tsx

@@ -129,7 +129,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       },
@@ -158,7 +158,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }

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

@@ -33,6 +33,7 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -93,8 +94,10 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
-    // console.log('Ini datanya:', id);
+    setIsLoading(true);
-    const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log('API Response:', response);
 
     if (response?.status) {
@@ -106,6 +109,7 @@ const EditDialog = () => {
         status: response.data.status
       }));
     }
+    setIsLoading(false);
   }, []);
 
   // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -159,95 +163,112 @@ const EditDialog = () => {
           <div className="flex flex-col">
             {alert.show && <Alert variant="danger">{alert.message}</Alert>}
 
-            <form onSubmit={doUpdateReward}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <label className="form-label flex items-center gap-1 col-span-2">
+                  <div className="flex-1 space-y-4 py-1">
-                    Name<span className="text-red-500">*</span>
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                  </label>
+                    <div className="space-y-2">
-
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                  <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                    className="input col-span-6"
+                    </div>
-                    type="text"
-                    value={formField.name}
-                    onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
-                  />
-                </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Type<span className="text-red-500">*</span>
-                  </label>
-
-                  <div className="col-span-6">
-                    <Select
-                      value={formField.type}
-                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="Select Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {Object.entries(RewardType).map(
-                          ([label, value]: [string, RewardTypeValue]) => (
-                            <SelectItem key={value} value={value}>
-                              {label}
-                            </SelectItem>
-                          )
-                        )}
-                      </SelectContent>
-                    </Select>
                   </div>
                 </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                <p className="mt-4 text-gray-500">Loading Reward Details...</p>
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Amount<span className="text-red-500">*</span>
-                  </label>
-
-                  <NumericFormat
-                    className="input col-span-6"
-                    value={formField.amount}
-                    thousandSeparator="."
-                    decimalSeparator=","
-                    allowNegative={false}
-                    onValueChange={(values) => {
-                      setFormField((prev) => ({
-                        ...prev,
-                        amount: values.floatValue || 0
-                      }));
-                    }}
-                    placeholder="Enter Amount"
-                  />
-                </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Status<span className="text-red-500">*</span>
-                  </label>
-
-                  <div className="col-span-6">
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) =>
-                        setFormField((prev) => ({ ...prev, status: value }))
-                      }
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="Select" defaultValue={formField.status} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">InActive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button variant="default">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={doUpdateReward}>
+                <div className="card-body grid gap-5">
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Name<span className="text-red-500">*</span>
+                    </label>
+
+                    <Input
+                      className="input col-span-6"
+                      type="text"
+                      value={formField.name}
+                      onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                    />
+                  </div>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+
+                    <div className="col-span-6">
+                      <Select
+                        value={formField.type}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, type: value }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(RewardType).map(
+                            ([label, value]: [string, RewardTypeValue]) => (
+                              <SelectItem key={value} value={value}>
+                                {label}
+                              </SelectItem>
+                            )
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Amount<span className="text-red-500">*</span>
+                    </label>
+
+                    <NumericFormat
+                      className="input col-span-6"
+                      value={formField.amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Amount"
+                    />
+                  </div>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+
+                    <div className="col-span-6">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select" defaultValue={formField.status} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">InActive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button variant="default">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,10 +1,23 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageRewardContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -15,9 +28,9 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Reward"
+                placeholder="Search"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchValue}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
           </div>

src/pages/master/reward/hooks/ManageRewardContext.tsx

@@ -110,7 +110,8 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
           );
         },
         meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px] text-center',
+          cellClassName: 'text-center'
         }
       },
       {
@@ -138,7 +139,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
           );
         },
         meta: {
-          heaaderClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }

src/pages/master/sucos/SucosMaster.tsx

@@ -3,7 +3,6 @@ import { ManageSucosContextProvider } from './hooks/ManageSucosContext';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
-import SearchDialog from './blocks/SearchDialog';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 
@@ -37,7 +36,6 @@ const SucosMaster = () => {
           <AddDialog />
           <EditDialog />
           <DeleteDialog />
-          <SearchDialog />
         </Container>
       </ManageSucosContextProvider>
     </>

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

@@ -34,12 +34,12 @@ interface PostoAdmsProps {
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
-  const parentRef = useRef<any | null>(null);
   const { showEditDialog, handleEditDialog, selectedSucos, sucos } = useManageSucosContext();
   const { reload } = useDataGrid();
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
 
   const [alert, setAlert] = useState({
@@ -112,7 +112,10 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/sucos/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log('Data Sucos:', response?.data);
 
     if (response?.status) {
@@ -127,6 +130,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -183,72 +187,87 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleUpdate}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Sucos Name<span className="text-red-500">*</span>
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      className="input"
+                    </div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Sucos Details...</p>
-                <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">
-                      Postu Administrativo Name
-                      <span className="text-red-500">*</span>
-                    </label>
-                    <Popover open={open} onOpenChange={setOpen}>
-                      <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
-                          {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
-                            ?.PostoAdms_name || 'Select Postu Administrativo'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-[400px] p-0">
-                        <Command>
-                          <CommandInput placeholder="Search Postu Administrativo..." />
-                          <CommandList>
-                            <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
-                            <CommandGroup>
-                              {postoadms.map((posto) => (
-                                <CommandItem
-                                  key={posto.PostoAdms_id}
-                                  value={posto.PostoAdms_name}
-                                  onSelect={() => {
-                                    setFormField({
-                                      ...formField,
-                                      postoId: posto.PostoAdms_id
-                                    });
-                                    setOpen(false);
-                                  }}
-                                >
-                                  {posto.PostoAdms_name}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleUpdate}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Sucos Name<span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        className="input"
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Postu Administrativo Name
+                        <span className="text-red-500">*</span>
+                      </label>
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button type="button" className="input col-span-5 text-left">
+                            {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
+                              ?.PostoAdms_name || 'Select Postu Administrativo'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Postu Administrativo..." />
+                            <CommandList>
+                              <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
+                              <CommandGroup>
+                                {postoadms.map((posto) => (
+                                  <CommandItem
+                                    key={posto.PostoAdms_id}
+                                    value={posto.PostoAdms_name}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        postoId: posto.PostoAdms_id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {posto.PostoAdms_name}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button className="btn btn-primary">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,12 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageSucosContext } from '../hooks/useManageSucosContext';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManageSucosContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('sucos_name')?.getFilterValue() as string) ?? ''
+  );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -19,6 +21,15 @@ const ListToolbar = () => {
     table.setPageIndex(0);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('sucos_name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -31,32 +42,13 @@ const ListToolbar = () => {
                 placeholder="Search Sucos"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleSearch}>
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
             </DefaultTooltip> */}
-            {/* <Button
-              variant="outline"
-              className="h-7.5 text-[0.8rem]"
-              onClick={() => handleSearchDialog(true)}
-            >
-              Search Aldeias
-            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

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

@@ -1,177 +0,0 @@
-import { useRef, useState } from 'react';
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Alert, KeenIcon } from '@/components';
-import { Button } from '@/components/ui/button';
-import { apiConfig } from '@/config/api.config';
-import axios from 'axios';
-import { useManageSucosContext } from '../hooks/useManageSucosContext';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-
-interface AldeiasProps {
-  id: number;
-  name: string;
-}
-
-const API_URL = apiConfig.service_master_data;
-
-const SearchDialog = () => {
-  const parentRef = useRef<any | null>(null);
-  const [open, setOpen] = useState(false);
-  const { showSearchDialog, handleSearchDialog, sucos } = useManageSucosContext();
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    id: 0,
-    name: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-  };
-  const [aldeia, setAldeia] = useState<AldeiasProps[]>([]);
-  const [isFound, setIsFound] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const id = Number(formField.id);
-
-    if (formField.id === 0) {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
-
-    try {
-      const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`);
-
-      if (response.data.status) {
-        setAldeia(response.data.data);
-        console.log(aldeia);
-        setIsFound(true);
-        console.log('Found Sucos: ', response.data.data);
-      } else {
-        setAldeia([]);
-        setIsFound(false);
-        setAlert({ show: true, message: 'No sucos found.' });
-      }
-    } catch (error) {
-      console.error('Error fetching sucos', error);
-      setAlert({ show: true, message: 'Failed to fetch sucos. Please try again.' });
-    }
-    setAlert({ show: false, message: '' });
-  };
-
-  const handleReset = () => {
-    setFormField(initialState);
-    setIsFound(false);
-    setAldeia([]);
-  };
-
-  return (
-    <Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
-      <DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
-        <DialogHeader className="p-2 border-0">
-          <DialogTitle></DialogTitle>
-          <DialogDescription></DialogDescription>
-          <div className="flex items-center justify-between flex-wrap grow">
-            <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">Search Aldeias</h1>
-            </div>
-            <div
-              className="cursor-pointer hover:opacity-100 opacity-50"
-              onClick={() => {
-                handleSearchDialog(false);
-                handleReset();
-              }}
-            >
-              <KeenIcon icon="cross" className="text-1.5xl" />
-            </div>
-          </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
-            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
-
-            <div className="grid grid-cols-8 gap-1 w-full items-center">
-              <label className="form-label flex items-center col-span-3">
-                Sucos Name<span className="text-red-500">*</span>
-              </label>
-
-              <Popover open={open} onOpenChange={setOpen}>
-                <PopoverTrigger asChild>
-                  <button type="button" className="input col-span-5 text-left">
-                    {formField.name || 'Select Sucos'}
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[400px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search Sucos..." />
-                    <CommandList>
-                      <CommandEmpty>No PostoAdms found.</CommandEmpty>
-                      <CommandGroup>
-                        {sucos.map((suco) => (
-                          <CommandItem
-                            key={suco.sucos_id}
-                            value={suco.sucos_name}
-                            onSelect={() => {
-                              setFormField({
-                                id: suco.sucos_id,
-                                name: suco.sucos_name
-                              });
-                              setOpen(false);
-                            }}
-                          >
-                            {suco.sucos_name}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            {isFound && sucos.length > 0 && (
-              <div className="mt-4 border-t pt-4">
-                <h2 className="text-md font-semibold">Aldeias: </h2>
-                <div className="flex flex-col">
-                  <span className="text-sm form-hint">
-                    {aldeia.map((aldeias) => aldeias.name).join(', ')}
-                  </span>
-                </div>
-              </div>
-            )}
-
-            <div className="flex justify-end gap-4">
-              <Button type="reset" variant="outline" onClick={handleReset}>
-                Reset
-              </Button>
-              <Button type="submit" variant="default">
-                Search
-              </Button>
-            </div>
-          </form>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default SearchDialog;

src/pages/master/sucos/hooks/ManageSucosContext.tsx

@@ -9,9 +9,12 @@ import { useNavigate } from 'react-router';
 import axios from 'axios';
 
 interface SucosProps {
-  sucos_id: number;
+  id: string;
-  sucos_name: string;
+  name: string;
-  posto_name: string;
+  posto: {
+    id: string;
+    name: string;
+  };
 }
 
 interface ContextProps {
@@ -106,7 +109,9 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
           const value = row.getValue<string>(columnId);
           return String(value).includes(String(filterValue));
         },
-        header: ({ column }) => <DataGridColumnHeader title="Postu Administrativo Name" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Postu Administrativo Name" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: {
@@ -124,13 +129,13 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.sucos_id)}
+                onClick={() => handleEditDialog(true, row.id)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.sucos_id)}
+                onClick={() => handleDeleteDialog(true, row.id)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -138,7 +143,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
@@ -158,7 +163,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log('Sucos List Response:', response?.data);
       setSucos(response?.data.list || []);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {

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

@@ -45,6 +45,7 @@ const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -115,11 +116,13 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
       id
     });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
-    console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -132,6 +135,7 @@ const EditDialog = () => {
           : []
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const getCurrencyLists = async (sorting: any) => {
@@ -213,91 +217,110 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleSubmit}>
+            {isLoading ? (
-              <div className="card-body grid gap-5">
+              <div className="flex flex-col items-center justify-center p-8">
-                <div className="w-full">
+                <div className="animate-pulse flex space-x-4 w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex-1 space-y-4 py-1">
-                    <label className="form-label flex items-center gap-1 max-w-56">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                      Wallet Name
+                    <div className="space-y-2">
-                    </label>
+                      <div className="h-4 bg-gray-200 rounded"></div>
-                    <Input
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                      placeholder="Wallet Name"
-                    />
-                  </div>
-                </div>
-
-                <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">
-                      Description
-                    </label>
-                    <Input
-                      type="text"
-                      value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
-                      placeholder="Description"
-                    />
-                  </div>
-                </div>
-
-                <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">Status</label>
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <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">Currency</label>
-                    <div className="relative w-full">
-                      <Input
-                        type="text"
-                        placeholder="Empty"
-                        value={selectedCurrency?.name}
-                        readOnly
-                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
-                      />
                     </div>
                   </div>
                 </div>
-
+                <p className="mt-4 text-gray-500">Loading Wallet Details...</p>
-                <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">Groups</label>
-                    <div className="relative w-full">
-                      <Input
-                        type="text"
-                        placeholder="Empty"
-                        value={selectedGroupNames}
-                        readOnly
-                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-5">
-                  <Button variant="default" type="submit">
-                    Update
-                  </Button>
-                </div>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleSubmit}>
+                <div className="card-body grid gap-5">
+                  <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">
+                        Wallet Name
+                      </label>
+                      <Input
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                        placeholder="Wallet Name"
+                      />
+                    </div>
+                  </div>
+
+                  <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">
+                        Description
+                      </label>
+                      <Input
+                        type="text"
+                        value={formField.description}
+                        onChange={(e) =>
+                          setFormField({ ...formField, description: e.target.value })
+                        }
+                        placeholder="Description"
+                      />
+                    </div>
+                  </div>
+
+                  <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">Status</label>
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => setFormField({ ...formField, status: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <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">
+                        Currency
+                      </label>
+                      <div className="relative w-full">
+                        <Input
+                          type="text"
+                          placeholder="Empty"
+                          value={selectedCurrency?.name}
+                          readOnly
+                          className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <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">Groups</label>
+                      <div className="relative w-full">
+                        <Input
+                          type="text"
+                          placeholder="Empty"
+                          value={selectedGroupNames}
+                          readOnly
+                          className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button variant="default" type="submit">
+                      Update
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -1,12 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageWalletContext } from '../hooks/useManageWalletContext';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageWalletContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('wallets.name')?.getFilterValue() as string) ?? ''
+  );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -19,6 +21,15 @@ const ListToolbar = () => {
     table.setPageIndex(0);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('wallets.name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -31,24 +42,12 @@ const ListToolbar = () => {
                 placeholder="Search Wallet"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleSearch}>
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
             </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">

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

@@ -1,12 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageMenusContext } from '../hooks/useManageMenusContext';
 import { Button } from '@/components/ui/button';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageMenusContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -18,6 +20,15 @@ const ListToolbar = () => {
     table.getColumn('name')?.setFilterValue(searchValue);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -30,25 +41,12 @@ const ListToolbar = () => {
                 placeholder="Search Menu"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleSearch}>
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-            {/* <KeenIcon icon="filter" />
->>>>>>> raja
-              </Button>
             </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">

src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx

@@ -17,7 +17,6 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
-import { Alert, useDataGrid } from '@/components';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
@@ -59,15 +58,24 @@ const ApprovalDialog = () => {
                 toast.error('Please select a status.');
                 return;
             }
+
             const response = await PostData(`${API_URL}/transaction/set-approval`, {
                 id_transaction: transactionDetails.id,
                 status: formField.status,
                 notes: formField.notes,
             });
 
+            if (response?.status === false) {
+                setAlert({
+                    show: true,
+                    message: response?.message?.error?.message || 'Approval failed',
+                });
+                return;
+            }
+
             if (response?.status) {
                 setAlert({ show: false, message: '' });
-                toast.success('Success Update Position');
+                toast.success('Success Update Approval');
                 const createActivity = {
                     module: 'Approval Transaction',
                     description: `Change status approve for transaction => ${transactionDetails.code}`,
@@ -84,13 +92,13 @@ const ApprovalDialog = () => {
 
     useEffect(() => {
         if (showApprovalDialog) {
-            // Reset form fields when dialog opens
             setFormField({
                 transaction_code: '',
                 status: '',
                 notes: '',
             });
-            setTransactionDetails(null); // Optional reset
+            setTransactionDetails(null);
+            setAlert({ show: false, message: '' });
         }
     }, [showApprovalDialog]);
 
@@ -116,7 +124,6 @@ const ApprovalDialog = () => {
         }
     }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
 
-    // Set formField.transaction_code once details are fetched
     useEffect(() => {
         if (transactionDetails) {
             setFormField((prev) => ({
@@ -138,7 +145,6 @@ const ApprovalDialog = () => {
                             <div className="w-full">
                                 <div className="flex items-center flex-wrap gap-2.5">
                                     <label className="form-label max-w-56">Status</label>
-
                                     <div className="grow">
                                         <Select
                                             value={formField.status}
@@ -177,6 +183,14 @@ const ApprovalDialog = () => {
                                         </div>
                                     </div>
                                 )}
+
+                                {alert.show && (
+                                    <div className="mt-4">
+                                        <span className="inline-block bg-red-100 text-red-800 text-sm font-medium px-4 py-2 rounded-md">
+                                            {alert.message}
+                                        </span>
+                                    </div>
+                                )}
                             </div>
 
                             <hr />

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -205,7 +205,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         enableHiding: false,
         cell: (data) => {
           const row = data.row.original;
-          const isVisible = row.status === 'F' ? true : false || row.status === 'P' ? true : false;
+          const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
           return (
             <div key={`actions-${row.id}`}>
               <button