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

src/pages/groups/Column.tsx

@@ -1,3 +1,4 @@
+import { KeenIcon } from '@/components';
 import { ColumnDef } from '@tanstack/react-table';
 
 export type Group = {
@@ -8,7 +9,7 @@ export type Group = {
   description: string;
 };
 
-export const columns: ColumnDef<Group>[] = [
+export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
   {
     accessorKey: 'no',
     header: 'ID'
@@ -30,8 +31,19 @@ export const columns: ColumnDef<Group>[] = [
     accessorKey: 'description',
     header: 'Description'
   },
-  // {
-  //   id: 'actions',
-  //   header: 'Actions'
-  // }
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const dataMembers = row.original;
+
+      return (
+        <button
+          className="btn btn-sm btn-icon btn-clear btn-light"
+          onClick={() => handleUpdate(dataMembers)}
+        >
+          <KeenIcon icon="notepad-edit" />
+        </button>
+      );
+    }
+  }
 ];

src/pages/groups/ListToolbar.tsx

@@ -0,0 +1,49 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+
+const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
+  const { table, reload } = useDataGrid();
+
+  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">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search users"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) => 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 variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ListToolBar };

src/pages/groups/ManageGroups.tsx

@@ -1,5 +1,5 @@
 import { DataTable } from '@/components/ui/DataTable';
-import { columns, Group } from './Column';
+import { getColumns, Group } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
 import { Helmet } from 'react-helmet';
@@ -24,6 +24,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ConfirmDialog from '@/components/confirm';
 import { toast } from 'sonner';
+import { Container, DataGridProvider } from '@/components';
+import { ListToolBar } from './ListToolbar';
 // import { DialogHeader } from '@/components/ui/dialog';
 // import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 const BASE_URL = apiConfig.service_customer;
@@ -66,7 +68,7 @@ const ManageGroups = () => {
       let resGroups = groups.data.data.list.map((el: any) => {
         el.no = temp++;
         return el;
-      });
+      })
       setDataGroup(resGroups);
     } catch (error: any) {
       alert(error.message);
@@ -89,9 +91,9 @@ const ManageGroups = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!formData.groupName) return toast.warning(`Group name can not be empty!`)
-    if (!formData.status) return toast.warning(`Status can not be empty!`)
-    if (!formData.description) return toast.warning(`Description can not be empty!`)
+    if (!formData.groupName) return toast.warning(`Group name can not be empty!`);
+    if (!formData.status) return toast.warning(`Status can not be empty!`);
+    if (!formData.description) return toast.warning(`Description can not be empty!`);
     setIsDialogOpen(false);
     setDialogOpen(true);
   };
@@ -134,7 +136,7 @@ const ManageGroups = () => {
           description: formData.description,
           created_at: new Date()
         });
-        toast.success(`Success create group`)
+        toast.success(`Success create group`);
       } else if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
           name: formData.groupName,
@@ -142,14 +144,14 @@ const ManageGroups = () => {
           description: formData.description,
           updated_at: new Date()
         });
-        toast.success(`Success update group`)
+        toast.success(`Success update group`);
       } else if (dialogType === 'delete') {
         await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
-        toast.success(`Success delete group`)
+        toast.success(`Success delete group`);
       }
     } catch (error: any) {
       console.log(error);
-      toast.error(error.message)
+      toast.error(error.message);
     } finally {
       await fetchGroups();
       setDialogOpen(false);
@@ -162,19 +164,19 @@ const ManageGroups = () => {
       <Helmet>
         <title>TPAY | Manage Group</title>
       </Helmet>
-      <ConfirmDialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
-        content={
-          `Are you sure you want to ` +
-          (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
-        }
-        onYes={handleYes}
-        onNo={() => setDialogOpen(false)}
-      />
-      <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
-      <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
+      <Container>
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={
+            `Are you sure you want to ` +
+            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
+          }
+          onYes={handleYes}
+          onNo={() => setDialogOpen(false)}
+        />
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Groups</h1>
         <Breadcrumbs>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -188,84 +190,101 @@ const ManageGroups = () => {
             <span className="text-sm">Manage Groups</span>
           </Link>
         </Breadcrumbs>
-      </div>
-      <div className="w-full overflow-x-auto px-4">
-        <DataTable
+        {/* <div className="w-full overflow-x-auto px-4"> */}
+        <div className="grid gap-5 lg:gap-7.5 mt-5">
+          {/* <DataTable
           data={dataGroup}
           columns={columns}
           createData={createGroup}
           onUpdate={handleUpdate}
           onDelete={null}
-        />
-      </div>
+          /> */}
+          <DataGridProvider
+            data={dataGroup}
+            columns={getColumns(handleUpdate)}
+            pagination={{ size: 25 }}
+            toolbar={<ListToolBar createGroup={createGroup} />}
+            layout={{ card: true }}
+            sorting={[{ id: 'created_at', desc: true }]}
+            serverSide={false}
+            onRowSelectionChange={(selected, table: any) => {
+              const selectedRow = table.getSelectedRowModel().rows[0];
+              if (selectedRow) handleUpdate(selectedRow.original);
+            }}
+          />
+        </div>
+        {/* </div> */}
 
-      <Dialog open={isDialogOpen} onClose={closeDialog}>
-        <DialogContent className="w-full">
-          <div className="flex justify-between">
-            <DialogTitle>{dialogType==='create'?"Create New Group":"Update Group"}</DialogTitle>
-            <Box display="flex" justifyContent="flex-end">
-              <Button
-                variant="outlined"
-                sx={{ borderColor: 'white', color: 'grey' }}
-                onClick={closeDialog}
-              >
-                <CloseIcon />
-              </Button>
-            </Box>
-          </div>
-          <Divider />
-          <div className="p-5 mt-5">
-            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
-              <div className="grid grid-cols-4 items-center gap-4 w-full">
-                <label className="form-label text-sm">
-                  <span className="text-red-500">*</span>Group Name:
-                </label>
-                <input
-                  type="text"
-                  name="groupName"
-                  className="input w-full col-span-3"
-                  value={formData.groupName}
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4 w-full">
-                <label className="form-label text-sm">
-                  <span className="text-red-500">*</span>Active Status:
-                </label>
-                <FormControl>
-                  <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
-                    <FormControlLabel
-                      value="Y"
-                      checked={formData.status === 'Y'}
-                      control={<Radio />}
-                      label="Yes"
-                    />
-                    <FormControlLabel
-                      value="N"
-                      checked={formData.status === 'N'}
-                      control={<Radio />}
-                      label="No"
-                    />
-                  </RadioGroup>
-                </FormControl>
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4 w-full">
-                <label className="form-label text-sm">
-                  <span className="text-red-500">*</span>Description:
-                </label>
-                <input
-                  type="text"
-                  name="description"
-                  className="input w-full col-span-3"
-                  value={formData.description}
-                  onChange={handleChange}
-                />
-              </div>
-              <Button type="submit">Submit</Button>
-            </form>
-          </div>
-        </DialogContent>
-      </Dialog>
+        <Dialog open={isDialogOpen} onClose={closeDialog}>
+          <DialogContent className="w-full">
+            <div className="flex justify-between">
+              <DialogTitle>
+                {dialogType === 'create' ? 'Create New Group' : 'Update Group'}
+              </DialogTitle>
+              <Box display="flex" justifyContent="flex-end">
+                <Button
+                  variant="outlined"
+                  sx={{ borderColor: 'white', color: 'grey' }}
+                  onClick={closeDialog}
+                >
+                  <CloseIcon />
+                </Button>
+              </Box>
+            </div>
+            <Divider />
+            <div className="p-5 mt-5">
+              <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
+                <div className="grid grid-cols-4 items-center gap-4 w-full">
+                  <label className="form-label text-sm">
+                    <span className="text-red-500">*</span>Group Name:
+                  </label>
+                  <input
+                    type="text"
+                    name="groupName"
+                    className="input w-full col-span-3"
+                    value={formData.groupName}
+                    onChange={handleChange}
+                  />
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4 w-full">
+                  <label className="form-label text-sm">
+                    <span className="text-red-500">*</span>Active Status:
+                  </label>
+                  <FormControl>
+                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
+                      <FormControlLabel
+                        value="Y"
+                        checked={formData.status === 'Y'}
+                        control={<Radio />}
+                        label="Yes"
+                      />
+                      <FormControlLabel
+                        value="N"
+                        checked={formData.status === 'N'}
+                        control={<Radio />}
+                        label="No"
+                      />
+                    </RadioGroup>
+                  </FormControl>
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4 w-full">
+                  <label className="form-label text-sm">
+                    <span className="text-red-500">*</span>Description:
+                  </label>
+                  <input
+                    type="text"
+                    name="description"
+                    className="input w-full col-span-3"
+                    value={formData.description}
+                    onChange={handleChange}
+                  />
+                </div>
+                <Button type="submit">Submit</Button>
+              </form>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </Container>
     </>
   );
 };

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

@@ -27,8 +27,8 @@ import {
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface SucosProps {
-  sucos_id: number;
-  sucos_name: string;
+  id: number;
+  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,6 +106,7 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -120,6 +122,7 @@ const EditDialog = () => {
         sucosId: 0
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -176,72 +179,87 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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 })}
-                    />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </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">
-                      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>
+                <p className="mt-4 text-gray-500">Loading Aldeia 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">
+                        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,23 +1,47 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    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">
         <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Aldeia"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                placeholder="Search"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>

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;
-      const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{
+      if (!showEditDialog) return;
+      const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
         ...formField
       });
 
@@ -83,24 +84,24 @@ const EditDialog = () => {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update Conversion');
-              const createActivity = {
-                module: 'Manage Conversion',
-                description: `Update Conversion => ${selectedConversion}`,
-                action: 'U'
-              };
-        
-              doSaveLogActivity(createActivity);
+        const createActivity = {
+          module: 'Manage Conversion',
+          description: `Update Conversion => ${selectedConversion}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(createActivity);
         reload();
       } else {
         toast.error('Error Create Conversion');
         setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' });
-      } 
+      }
     },
     [formField]
   );
 
   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,29 @@ const EditDialog = () => {
     }
   };
 
-   const doGetConversionById = useCallback(async (id: string) => {
-      const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
-      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);
-    }, []);
-  
-    useEffect(() => {
-      if (selectedConversion) {
-        doGetConversionById(selectedConversion);
-      }
-    }, [selectedConversion]);
-
-
+  const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
+    const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
+    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) {
@@ -156,8 +156,7 @@ const EditDialog = () => {
     if (showEditDialog) {
       doGetCurrency([{ id: 'name', desc: false }]);
     }
-  }, [showEditDialog]); 
-  
+  }, [showEditDialog]);
 
   useEffect(() => {
     if (showEditDialog === false) {
@@ -166,7 +165,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 +179,110 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={doUpdateConversion}>
-              <div className="card-body grid gap-5">
-                <div className="w-full">
-                  <label className="form-label">
-                    Currency Origin <span className="text-red-500">*</span>
-                  </label>
-                  <Select
-                    value={formField.id_currency_origin}
-                    onValueChange={(id_currency_origin) =>
-                      setFormField((prev) => ({ ...prev, id_currency_origin }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select Currency" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {currencies.map((currency, idx) => (
-                        <SelectItem value={currency.ID} key={currency.ID}>
-                          {currency.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
-                    Currency Destination <span className="text-red-500">*</span>
-                  </label>
-                  <Select
-                    value={formField.id_currency_destination}
-                    onValueChange={(id_currency_destination) =>
-                      setFormField((prev) => ({ ...prev, id_currency_destination }))
-                    }
-                  >
-                    <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">
-                  <label className="form-label">
-                    Buy<span className="text-red-500">*</span>
-                  </label>
-                  <NumericFormat
-                    className="input"
-                    value={formField.buy}
-                    thousandSeparator="."
-                    decimalSeparator=","
-                    allowNegative={false}
-                    onValueChange={(values) => {
-                      setFormField((prev) => ({
-                        ...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">
+                <p className="mt-4 text-gray-500">Loading Conversion Details...</p>
+              </div>
+            ) : (
+              <form onSubmit={doUpdateConversion}>
+                <div className="card-body grid gap-5">
+                  <div className="w-full">
+                    <label className="form-label">
+                      Currency Origin <span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.id_currency_origin}
+                      onValueChange={(id_currency_origin) =>
+                        setFormField((prev) => ({ ...prev, id_currency_origin }))
+                      }
+                    >
+                      <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">
+                    <label className="form-label">
+                      Currency Destination <span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={formField.id_currency_destination}
+                      onValueChange={(id_currency_destination) =>
+                        setFormField((prev) => ({ ...prev, id_currency_destination }))
+                      }
+                    >
+                      <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">
+                    <label className="form-label">
+                      Buy<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className="input"
+                      value={formField.buy}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...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 +300,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">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button variant="default">Save Changes</Button>
-                </div>
-              </div>
-            </form>
+              </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,7 +99,8 @@ const EditDialog = () => {
     [formField]
   );
 
-  const doGetCurrencyById = useCallback(async (id: string) => {
+  const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
     // console.log('Transaction Type: ', response?.data);
     if (response?.status) {
@@ -110,12 +112,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 +153,93 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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>
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
                 </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,6 +76,7 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -88,6 +90,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -141,27 +144,42 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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 })}
-                    />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
                   </div>
                 </div>
-
-                <div className="flex justify-end pt-2.5">
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
+                <p className="mt-4 text-gray-500">Loading Municipio 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">
+                        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,15 +9,18 @@ const ListToolbar = () => {
   const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
   const [searchName, setSearchName] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
-  const handleFilterData = useCallback(() => {
-    try {
-      table.getColumn('name')?.setFilterValue(searchName);
-    } catch (error) {
-      toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
-    }
-  }, [searchName, table]);
+  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">
@@ -28,9 +31,9 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Municipio"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                placeholder="Search"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>

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,6 +113,7 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -126,6 +128,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -184,71 +187,86 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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 })}
-                    />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </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">
-                      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>
+                <p className="mt-4 text-gray-500">Loading Postu Administrativo 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">
+                        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,43 +2,54 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 
 import { Button } from '@/components/ui/button';
 import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    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">
         <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Postu Administrativo"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                placeholder="Search"
+                value={searchValue}
+                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" />
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
+                <KeenIcon icon="magnifier" />
               </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

@@ -97,7 +97,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
         }
       },
       {
-        accessorFn: (row) => row.municipios_name,
+        accessorFn: (row) => row.Municipios_name,
         id: 'municipios_name',
         header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
         enableSorting: false,
@@ -131,7 +131,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
@@ -139,17 +139,28 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
     [handleEditDialog, handleDeleteDialog]
   );
 
-  const getPostoAdmsLists = async (page: number, limit: number, sorting: any, filter: any) => {
+  const getPostoAdmsLists = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filters: any[] = []
+  ) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+      // filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+
+      let filter = '';
+      if (filters.length > 0 && filters[0].value) {
+        filter = filters[0].value.toLowerCase();
+      }
+
       const response = await GetData(`${API_URL}/postoadms/list`, {
         limit,
         page: page + 1,
         with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc ? 'DESC' : 'ASC',
-        filter: JSON.stringify(filter)
+        filter
       });
       // console.log(response?.data);
       // const sortedList = response.data.data.list.sort((a: PostoAdmsProps, b: PostoAdmsProps) => {

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,6 +124,7 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
     // console.log(response);
 
@@ -144,6 +146,7 @@ const EditDialog = () => {
     } else {
       setFormField(initialState);
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -214,225 +217,242 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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 })}
-                    />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </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">
-                      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>
+                <p className="mt-4 text-gray-500">Loading Products 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={(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,36 +1,38 @@
 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">
       <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Products"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                placeholder="Search"
+                value={searchValue}
+                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,6 +73,7 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -82,6 +84,7 @@ const EditDialog = () => {
     } else {
       setFormField(initialState);
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -134,27 +137,42 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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 })}
-                    />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
                   </div>
                 </div>
-
-                <div className="flex justify-end">
-                  <Button className="btn btn-primary">Save Changes</Button>
-                </div>
+                <p className="mt-4 text-gray-500">Loading Profession 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={(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,38 +1,39 @@
 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">
       <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Profession"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
-                  table.getColumn('name')?.setFilterValue(event.target.value)
-                }
+                placeholder="Search"
+                value={searchValue}
+                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/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,6 +147,7 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
     // console.log(response);
     if (response?.status) {
@@ -159,6 +161,7 @@ const EditDialog = () => {
         agent: response?.data.agent?.id || null
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -206,7 +209,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 +225,192 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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>
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></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">
-                        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"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
-                  table.getColumn('name')?.setFilterValue(event.target.value)
-                }
+                placeholder="Search"
+                value={searchValue}
+                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/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,6 +94,7 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     // console.log('Ini datanya:', id);
     const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
     // console.log('API Response:', response);
@@ -106,6 +108,7 @@ const EditDialog = () => {
         status: response.data.status
       }));
     }
+    setIsLoading(false);
   }, []);
 
   // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -159,95 +162,112 @@ const EditDialog = () => {
           <div className="flex flex-col">
             {alert.show && <Alert variant="danger">{alert.message}</Alert>}
 
-            <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>
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
                   </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>
+                <p className="mt-4 text-gray-500">Loading Reward Details...</p>
               </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,23 +1,36 @@
 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">
       <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Reward"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                placeholder="Search"
+                value={searchValue}
+                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,6 +112,7 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
     // console.log('Data Sucos:', response?.data);
 
@@ -127,6 +128,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -183,72 +185,87 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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 })}
-                    />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </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">
-                      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>
+                <p className="mt-4 text-gray-500">Loading Sucos 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">
+                        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,45 +1,54 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageSucosContext } from '../hooks/useManageSucosContext';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManageSucosContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('sucos_name')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('sucos_name')?.setFilterValue(searchValue);
+    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">
         <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
                 placeholder="Search Sucos"
-                value={String(table.getColumn(`sucos_name`)?.getFilterValue() ?? '')}
-                onChange={(event) =>
-                  table.getColumn('sucos_name')?.setFilterValue(event.target.value)
-                }
+                value={searchValue}
+                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" />
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
+                <KeenIcon icon="magnifier" />
               </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;
-  sucos_name: string;
-  posto_name: string;
+  id: string;
+  name: string;
+  posto: {
+    id: string;
+    name: string;
+  };
 }
 
 interface ContextProps {
@@ -86,7 +89,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.sucos_name,
+        accessorFn: (row) => row.name,
         id: 'sucos_name',
         filterFn: (row, columnId, filterValue) => {
           const value = row.getValue<string>(columnId);
@@ -100,13 +103,15 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
         }
       },
       {
-        accessorKey: 'posto_name',
+        accessorKey: 'posto.name',
         id: 'posto_name',
         filterFn: (row, columnId, filterValue) => {
           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,8 +163,8 @@ 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 || []); // Pastikan default value adalah array kosong
+      console.log('Sucos List Response:', response?.data);
+      setSucos(response?.data.list || []);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fetching Sucos', 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,6 +116,7 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
       id
     });
@@ -132,6 +134,7 @@ const EditDialog = () => {
           : []
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const getCurrencyLists = async (sorting: any) => {
@@ -213,91 +216,110 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <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"
-                      />
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
                     </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>
+                <p className="mt-4 text-gray-500">Loading Wallet Details...</p>
               </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,36 +1,52 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageWalletContext } from '../hooks/useManageWalletContext';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageWalletContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('wallets.name')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('wallets.name')?.setFilterValue(searchValue);
+    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">
         <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
                 placeholder="Search Wallet"
-                value={(table.getColumn('wallets.name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
-                  table.getColumn('wallets.name')?.setFilterValue(event.target.value)
-                }
+                value={searchValue}
+                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" />
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
+                <KeenIcon icon="magnifier" />
               </Button>
             </DefaultTooltip> */}
           </div>

src/pages/master/wallet/hooks/ManageWalletContext.tsx

@@ -146,7 +146,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { name: { like: `%${filter[0].value?.toLowerCase()}%` } };
+      filter = filter.length == 0 ? {} : { 'wallets.name': { like: `%${filter[0].value?.toLowerCase()}%` } };
       const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
         limit,
         page: page + 1,

src/pages/members/kyc-delete-member/ManageKycDeletion.tsx

@@ -1,5 +1,5 @@
 import { Container, DataGridInner } from '@/components';
-import { ManageKycDeletionContextProvider } from './hooks/ManageKycDeletionContext';
+import { ManageKycDeletionContextProvider } from './hooks';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 

src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx

@@ -9,11 +9,12 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { useManageKycDeletionContext } from '../hooks';
 import { apiConfig } from '@/config/api.config';
-import axios from 'axios';
+import { useDataGrid } from '@/components';
 
 const API_URL = apiConfig.service_customer;
 const DetailDialog = () => {
 	const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
+	const { reload } = useDataGrid();
 
 	return (
 		<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@@ -38,8 +39,14 @@ const DetailDialog = () => {
 
 							<div className="flex justify-end gap-2 mt-3">
 								<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
-								<Button onClick={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
-								<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
+								<Button onClick={async() => {
+									await handleApproveReject(detailKyc.id, 'N')
+									reload()
+								}} variant="destructive" color="warning">Reject</Button>
+								<Button onClick={async() => {
+									await handleApproveReject(detailKyc.id, 'Y')
+									reload()
+								}} variant="default" color="primary">Approve</Button>
 							</div>
 						</div>
 					) : (<div></div>)}

src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx

@@ -37,7 +37,7 @@ interface ContextProps {
   selectedIdCustomer: string | null;
   detailKyc: any | null;
   setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
-  handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
+  handleApproveReject: (customerDeletionId: string, status_approve: string) => Promise<any>;
 }
 
 const initialProps: ContextProps = {
@@ -50,7 +50,7 @@ const initialProps: ContextProps = {
   setShowDetailDialog: () => { },
   detailKyc: async () => {},
   setDetailKyc: () => { },
-  handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
+  handleApproveReject: async () => ({customerDeletionId: '0', status_approve: 'Y'}),
 };
 
 const ManageKycDeletionContext = createContext<ContextProps>(initialProps);
@@ -271,7 +271,6 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
-      <DetailDialog />
 
       <DataGridProvider
         columns={columns}
@@ -285,6 +284,7 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
         }
       >
         {children}
+        <DetailDialog />
       </DataGridProvider>
     </ManageKycDeletionContext.Provider>
   );

src/pages/members/kyc/Kyc.tsx

@@ -212,41 +212,37 @@ const Kyc = () => {
         ) : (
           ''
         )}
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
-          KYC Upgrade Members
-        </h1>
-        <div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
-          <Breadcrumbs>
-            <Link underline="none" color="inherit" href="/">
-              <span className="text-sm hover:underline">Dashboard</span>
-            </Link>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">KYC Upgrade Members</h1>
+        <Breadcrumbs>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
 
-            <Link underline="none" color="inherit">
-              <span className="text-sm">Members</span>
-            </Link>
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Members</span>
+          </Link>
 
-            <Link underline="none" color="inherit">
-              <span className="text-sm">KYC Upgrade Members</span>
-            </Link>
-          </Breadcrumbs>
-        </div>
-        <div className="w-full overflow-x-auto px-4">
-          <div className="min-w-[800px]">
-            <DataGridProvider
-              data={members}
-              columns={getColumns(handleUpdate)}
-              pagination={{ size: 25 }}
-              toolbar={<ListToolBar />}
-              layout={{ card: true }}
-              sorting={[{ id: 'created_at', desc: true }]}
-              serverSide={false}
-              onRowSelectionChange={(selected, table: any) => {
-                const selectedRow = table.getSelectedRowModel().rows[0];
-                if (selectedRow) handleUpdate(selectedRow.original);
-              }}
-            ></DataGridProvider>
-          </div>
+          <Link underline="none" color="inherit">
+            <span className="text-sm">KYC Upgrade Members</span>
+          </Link>
+        </Breadcrumbs>
+        {/* <div className="w-full overflow-x-auto"> */}
+        <div className="grid gap-5 lg:gap-7.5 mt-5">
+          <DataGridProvider
+            data={members}
+            columns={getColumns(handleUpdate)}
+            pagination={{ size: 25 }}
+            toolbar={<ListToolBar />}
+            layout={{ card: true }}
+            sorting={[{ id: 'created_at', desc: true }]}
+            serverSide={false}
+            onRowSelectionChange={(selected, table: any) => {
+              const selectedRow = table.getSelectedRowModel().rows[0];
+              if (selectedRow) handleUpdate(selectedRow.original);
+            }}
+          ></DataGridProvider>
         </div>
+        {/* </div> */}
       </Container>
     </>
   );

src/pages/members/manage-members/ManageMembers.tsx

@@ -7,7 +7,7 @@ import axios from 'axios';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
-import { DataGridInner, LoaderTransparant } from '@/components';
+import { Container, DataGridInner, LoaderTransparant } from '@/components';
 import { DataGridProvider } from '@/components';
 import { toast } from 'sonner';
 import { Breadcrumbs, Link } from '@mui/material';
@@ -189,67 +189,59 @@ const ManageMembers = () => {
       <Helmet>
         <title>TPAY | Manage Members</title>
       </Helmet>
-      <div>
-        <div className="container mx-auto w-full">
-          <ConfirmDialog
-            open={dialogOpen}
-            onClose={() => setDialogOpen(false)}
-            title="Confirm Action"
-            content={`Are you sure you want to ${dialogType}?`}
-            onYes={handleYes}
-            onNo={() => setDialogOpen(false)}
+      <Container>
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={`Are you sure you want to ${dialogType}?`}
+          onYes={handleYes}
+          onNo={() => setDialogOpen(false)}
+        />
+        {member.id !== '' || dialogType === 'create' ? (
+          <DetailMember
+            showAddDialog={isDialogOpen}
+            setShowAddDialog={setShowAddDialog}
+            handleClose={closeDialog}
+            handleSubmit={handleSubmit}
+            initialData={member}
+            fetchCustomers={fetchCustomers}
+            profession={profession}
+            dialogType={dialogType}
           />
-          {member.id !== '' || dialogType === 'create' ? (
-            <DetailMember
-              showAddDialog={isDialogOpen}
-              setShowAddDialog={setShowAddDialog}
-              handleClose={closeDialog}
-              handleSubmit={handleSubmit}
-              initialData={member}
-              fetchCustomers={fetchCustomers}
-              profession={profession}
-              dialogType={dialogType}
-            />
-          ) : (
-            ''
-          )}
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
-            Manage Members
-          </h1>
-          <div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
-            <Breadcrumbs>
-              <Link underline="none" color="inherit" href="/">
-                <span className="text-sm hover:underline">Dashboard</span>
-              </Link>
-              <Link underline="none" color="inherit">
-                <span className="text-sm">Members</span>
-              </Link>
+        ) : (
+          ''
+        )}
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Members</h1>
+        <Breadcrumbs>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Members</span>
+          </Link>
 
-              <Link underline="none" color="inherit">
-                <span className="text-sm">Manage Members</span>
-              </Link>
-            </Breadcrumbs>
-          </div>
-          <div className="w-full overflow-x-auto px-4">
-            <div className="min-w-[800px]">
-              <DataGridProvider
-                data={members}
-                columns={getColumns(handleUpdate)}
-                layout={{ card: true }}
-                serverSide={false}
-                toolbar={
-                  <ListToolbar createMember={createMember} />
-                }
-                onRowSelectionChange={(selected, table: any) => {
-                  const selectedRow = table.getSelectedRowModel().rows[0];
-                  if (selectedRow) handleUpdate(selectedRow.original);
-                }}
-              >
-              </DataGridProvider>
-            </div>
-          </div>
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Members</span>
+          </Link>
+        </Breadcrumbs>
+        {/* <div className="w-full overflow-x-auto px-4"> */}
+        <div className="grid gap-5 lg:gap-7.5 mt-5">
+          <DataGridProvider
+            data={members}
+            pagination={{ size: 25 }}
+            columns={getColumns(handleUpdate)}
+            layout={{ card: true }}
+            serverSide={false}
+            toolbar={<ListToolbar createMember={createMember} />}
+            onRowSelectionChange={(selected, table: any) => {
+              const selectedRow = table.getSelectedRowModel().rows[0];
+              if (selectedRow) handleUpdate(selectedRow.original);
+            }}
+          ></DataGridProvider>
         </div>
-      </div>
+        {/* </div> */}
+      </Container>
     </>
   );
 };

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,37 +20,33 @@ 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">
         <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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
                 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/notification/blocks/ListToolbar.tsx

@@ -1,10 +1,22 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
 import { Button } from '@/components/ui/button';
+import React, { useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleKeydown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('content')?.setFilterValue(searchValue);
+  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,21 +28,20 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search users"
-                value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeydown}
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+            <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
+                onClick={handleSearch}
               >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-            {/* <KeenIcon icon="filter" /> */}
-            {/* </Button>
-            </DefaultTooltip> */}
+                <KeenIcon icon="magnifier" />
+              </Button>
+            </DefaultTooltip>
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/settings/user/manage-position/blocks/AddDialog.tsx

@@ -150,14 +150,16 @@ const AddDialog = () => {
               Close
             </Button>
           </div>
-        </DialogHeader>
-        <DialogBody className="scrollable-y py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}>
-          <div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5">
-            {alert.show && (
+          {alert.show && (
+            <div className="absolute top-5 left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
               <Alert variant="danger">
                 <h3>{alert.message}</h3>
               </Alert>
-            )}
+            </div>
+          )}
+        </DialogHeader>
+        <DialogBody className="scrollable-y py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}>
+          <div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5">
             <form action="" onSubmit={doCreatePosition}>
               <div className="card-body grid gap-5">
                 <div className="w-full">

src/pages/settings/user/manage-position/blocks/EditDialog.tsx

@@ -145,7 +145,7 @@ const EditDialog = () => {
         <DialogHeader className="p-0 border-0">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
-          <div className="flex items-center justify-between flex-wrap grow">
+          <div className="flex items-center justify-between flex-wrap grow relative">
             <div className="flex flex-col justify-center">
               <h1 className="text-xl font-semibold leading-none text-gray-900">Positions - Edit</h1>
             </div>
@@ -156,14 +156,16 @@ const EditDialog = () => {
               <KeenIcon icon="cross" className="text-1.5xl" />
             </div>
           </div>
+          {alert.show && (
+            <div className="absolute left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            </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-3">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
             <form action="" onSubmit={doEditPosition}>
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">

src/pages/settings/user/manage-position/blocks/ListToolBar.tsx

@@ -1,24 +1,48 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManagePositionContext } from '../hooks';
 import { Button } from '@/components/ui/button';
+import { useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManagePositionContext();
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearch = () => {
+    table.getColumn('name')?.setFilterValue(searchValue);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
 
   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">
-          <label className="input input-sm w-1/6">
-            <KeenIcon icon="magnifier" />
-            <input
-              type="text"
-              placeholder="Search roles"
-              value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-              onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-            />
-          </label>
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search roles"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeyDown}
+              />
+            </label>
+            <DefaultTooltip title={'Search'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleSearch}
+              >
+                <KeenIcon icon="magnifier" />
+              </Button>
+            </DefaultTooltip>
+          </div>
 
           <div className="flex gap-3 items-center">
             <Button

src/pages/settings/user/manage-position/hooks/ManagePositionContext.tsx

@@ -158,8 +158,8 @@ const ManagePositionContextProvider = ({ children }: { children: React.ReactNode
       page: 1,
       with_deleted: false,
       order_field: 'order_number',
-      order_direction: 'ASC',
-      filter: JSON.stringify({})
+      order_direction: 'ASC'
+      // filter: JSON.stringify({})
     };
     const response = await GetData(`${API_URL}/menus/list`, params);
     if (response?.status) {

src/pages/settings/user/manage-user/blocks/EditDialog.tsx

@@ -153,7 +153,7 @@ const EditDialog = () => {
         email: response.data.email,
         id_role: response.data.idRole,
         status: response.data.status,
-        customerid: response.data.customerid?.id || ''
+        customerid: response.data.customer?.id || ''
       }));
       // console.log('Customer ID from API:', response?.data.customerid);
     } else {

src/pages/settings/user/manage-user/blocks/ListToolBar.tsx

@@ -1,38 +1,47 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useUserContext } from '../hooks';
 import { Button } from '@/components/ui/button';
+import React, { useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useUserContext();
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearch = () => {
+    table.getColumn('username')?.setFilterValue(searchValue);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
 
   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">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Users"
-                value={(table.getColumn('username')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
-                  table.getColumn('username')?.setFilterValue(event.target.value)
-                }
+                placeholder="Search Username"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeyDown}
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+            <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
+                onClick={handleSearch}
               >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-            {/* <KeenIcon icon="filter" />
+                <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip> */}
+            </DefaultTooltip>
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -86,7 +86,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.customer?.username,
-        id: 'customer',
+        id: 'Users.customer',
         header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -98,7 +98,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         accessorFn: (row) => row.email,
         id: 'email',
         header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[350px]'
@@ -106,9 +106,9 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.name,
-        id: 'name',
+        id: 'Users.name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
@@ -116,7 +116,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.role.name,
-        id: 'role_name',
+        id: 'Users.role',
         header: ({ column }) => <DataGridColumnHeader title="Role Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -239,7 +239,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         pagination={{ size: 10 }}
         toolbar={<ListToolBar />}
         layout={{ card: true }}
-        sorting={[{ id: 'Users.username', desc: false }]}
+        sorting={[{ id: 'Users.created_at', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           doGetListData(pageIndex, pageSize, sorting, columnFilters)

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 />
@@ -193,4 +207,4 @@ const ApprovalDialog = () => {
     );
 };
 
-export default ApprovalDialog;
+export default ApprovalDialog;

src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx

@@ -0,0 +1,109 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+
+const TransactionDisbursement = () => {
+  const [form, setForm] = useState({
+    msisdn: '',
+    amount: '',
+    pin: ''
+  });
+  const { GetData, PostData } = useCallApi();
+  const API_URL = apiConfig.transaction;
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log('Submitted Data:', form);
+    if (form.amount == '' || form.msisdn == '' || form.pin == '') {
+      toast.warning('Please fill in all required fields.')
+      return
+    }
+    try {
+      let requestTopup = await PostData(`${API_URL}/transaction/topup-downline`, {
+        msisdn_destination: form.msisdn,
+        amount: form.amount,
+        pin: form.pin
+      })
+      if (requestTopup?.status == true) {
+        toast.success('Success Request Topup')
+      } else {
+        toast.warning(`${requestTopup?.message}`)
+      }
+    } catch (error) {
+      toast.warning('Failed')
+    }
+    // TODO: Kirim ke backend atau proses lainnya
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Transaction Disbursement Saldo</title>
+      </Helmet>
+      <TransactionDisbursementProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Transaction</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Disbursement Saldo</span>
+            </Link>
+          </Breadcrumbs>
+          <Container className="flex items-center justify-center">
+            <div className="card max-w-[750px] w-full">
+              <div className="card-body p-10">
+                {/* form */}
+                <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label htmlFor="msisdn">Destination MSISDN</label><span className="text-red-500">*</span>
+                  <Input
+                    id="msisdn"
+                    type="number"
+                    value={form.msisdn}
+                    onChange={(e) => setForm({ ...form, msisdn: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
+                  <Input
+                    id="amount"
+                    type="number"
+                    value={form.amount}
+                    onChange={(e) => setForm({ ...form, amount: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
+                  <Input
+                    id="pin"
+                    type="password"
+                    value={form.pin}
+                    onChange={(e) => setForm({ ...form, pin: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <Button type="submit">Submit</Button>
+                </div>
+              </form>
+              </div>
+            </div>
+          </Container>
+        </Container>
+      </TransactionDisbursementProvider>
+    </>
+  );
+};
+
+export default TransactionDisbursement;

src/pages/transaction/disbursement-saldo/blocks/ListToolbar.tsx

@@ -0,0 +1,61 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  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 gap-3 items-center ml-auto">
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/transaction/disbursement-saldo/hooks/TransactionDisbursementContext.tsx

@@ -0,0 +1,80 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { toast } from 'sonner';
+import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolbar';
+import { useCallApi } from '@/hooks';
+import moment from 'moment';
+
+interface TransactionDisbursementProps {
+  id: string;
+  customers_id: string;
+  group_id: string;
+  username: string;
+  fullname: string;
+  email: string;
+  status: string;
+  created_at: Date;
+}
+
+interface ContextProps {
+  
+}
+
+const initialProps: ContextProps = {
+
+};
+
+const TransactionDisbursementContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_customer;
+
+type StatusCode = 'W' | 'Y' | 'N' | 'T';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
+  N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
+  Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' },
+};
+
+export const renderStatusBadge = (statusRaw: string | null | undefined) => {
+	const status = statusRaw as StatusCode;
+	const { label, bg, text } = statusMap[status] ?? {
+		label: 'Unknown',
+		bg: 'bg-gray-100',
+		text: 'text-gray-600',
+	};
+
+	return (
+		<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
+			{label}
+		</span>
+	);
+};
+
+// const { reload } = useDataGrid();
+
+const TransactionDisbursementProvider = ({ children }: { children: React.ReactNode }) => {
+
+  return (
+    <TransactionDisbursementContext.Provider
+      value={{}}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <div>
+        {children}
+      </div>
+    </TransactionDisbursementContext.Provider>
+  );
+};
+
+export { TransactionDisbursementProvider, TransactionDisbursementContext };
+export type { TransactionDisbursementProps };

src/pages/transaction/disbursement-saldo/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './TransactionDisbursementContext';
+export * from './useTransactionDisbursementContext';

src/pages/transaction/disbursement-saldo/hooks/useTransactionDisbursementContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TransactionDisbursementContext } from './TransactionDisbursementContext';
+
+const useTransactionDisbursementContext = () => {
+  const context = useContext(TransactionDisbursementContext);
+
+  if (!context) throw new Error('useTransactionDisbursementContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useTransactionDisbursementContext };

src/pages/transaction/history-transaction/Transaction.tsx

@@ -2,6 +2,7 @@ import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
+import ResendTransaction from './blocks/ResendTransaction';
 
 const Transaction = () => {
   return (
@@ -28,6 +29,7 @@ const Transaction = () => {
           <div className="grid gap-5 lg:gap-7.5">
             <DataGridInner />
           </div>
+          <ResendTransaction />
         </Container>
       </TransactionProvider>
     </>

src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx

@@ -0,0 +1,205 @@
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useCallback, useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, useDataGrid } from '@/components';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { toast } from 'sonner';
+import { Input } from '@/components/ui/input';
+
+const API_URL = apiConfig.transaction;
+
+const ResendTransaction = () => {
+    const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
+    const { GetData, PostData } = useCallApi();
+    const { reload } = useDataGrid();
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+    const [alert, setAlert] = useState({
+        show: false,
+        message: ''
+    });
+    const initialStatePin = {
+        pin: ''
+    };
+    const [formField, setFormField] = useState(initialStatePin);
+
+    useEffect(() => {
+        if (showResendDialog) {
+            // Reset form fields when dialog opens
+            setFormField({
+                pin: ''
+            });
+            setAlert({ show: false, message: '' });
+            setTransactionDetails(null); // Optional reset
+        }
+    }, [showResendDialog]);
+
+    useEffect(() => {
+        const fetchTransactionDetails = async () => {
+            if (selectedTransactionForResend) {
+                try {
+                    const response = await GetData(
+                        `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
+                        {
+                            id: selectedTransactionForResend,
+                        }
+                    );
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
+
+        };
+
+        if (showResendDialog && selectedTransactionForResend) {
+            fetchTransactionDetails();
+        }
+    }, [showResendDialog, selectedTransactionForResend, GetData]);
+
+    const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {
+
+        if (pintransactiion.trim() === '') {
+            setAlert({ show: true, message: 'Please fill pin.' });
+            return;
+        }
+
+        if (pintransactiion.length < 6) {
+            setAlert({ show: true, message: 'Pin length must be 6 characters long.' });
+            return;
+        }
+
+        if (!data) {
+            toast.error('No Transaction selected');
+            return;
+        }
+
+        if (!data.type) {
+            toast.error('No Transaction Type selected');
+            return;
+        }
+
+        let apiEndpoint: string | null | undefined = null;
+        let apiJsonData: any | null | undefined = null;
+
+        switch (data.kind) {
+            case 'T':
+                apiEndpoint = `${API_URL}/transaction/transfer`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    msisdn_destination: data.transfer.destination_customer.msisdn,
+                    id_transaction_type: data.type.id,
+                    amount: String(data.transfer.amount),
+                    pin: pintransactiion,
+                    type: data.transfer.type
+                }
+                break;
+            case 'U':
+                apiEndpoint = `${API_URL}/transaction/topup`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    id_transaction_type: data.type.id,
+                    pin_p24: data.transfer.pin_p24,
+                    amount: String(data.transfer.amount),
+                    pin: pintransactiion
+                }
+                break;
+            case 'W':
+                apiEndpoint = `${API_URL}/transaction/withdraw`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    id_transaction_type: data.type.id,
+                    destination_iban: data.transfer.destination_iban,
+                    amount: String(data.transfer.amount),
+                    pin: pintransactiion
+                }
+                break;
+            case 'P':
+                apiEndpoint = `${API_URL}/transaction/purchase`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    code_product: "object purchase : masih null",
+                    wallet: "emoney or point",
+                    destination_number: "parameter number",
+                    destination_amount: "parameter amount",
+                    pin: pintransactiion
+                }
+                break;
+        }
+
+        if (!apiEndpoint || !apiJsonData) {
+            toast.error('Invalid transaction');
+            return;
+        }
+
+        const response = await PostData(apiEndpoint, apiJsonData);
+
+        if (response?.status) {
+            setAlert({ show: false, message: '' });
+            handleResendDialog(false, null);
+            toast.success('Success Retry Transaction');
+            reload();
+
+            const createActivity = {
+                module: 'History Transaction',
+                description: `Retry Transaction => ${selectedTransactionForResend}`,
+                action: 'U'
+            };
+
+            doSaveLogActivity(createActivity);
+        } else {
+            setAlert({ show: true, message: response?.message });
+            toast.error('Failed Retry Transaction');
+        }
+    }, [selectedTransactionForResend, PostData, handleResendDialog, reload]);
+
+    return (
+        <Dialog open={showResendDialog} onOpenChange={(open) => handleResendDialog(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 retry this transaction!</span>
+                    </Alert>
+                    {alert.show && (
+                        <Alert variant="danger">
+                            <h3>{alert.message}</h3>
+                        </Alert>
+                    )}
+                </DialogHeader>
+                <DialogBody>
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                        Pin<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                        className="input"
+                        type="password"
+                        value={formField.pin}
+                        onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
+                    /></DialogBody>
+                <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+                    <Button variant="outline" onClick={() => handleResendDialog(false, null)}>
+                        Cancel
+                    </Button>
+                    <Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}>
+                        Retry
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ResendTransaction;

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

@@ -9,6 +9,9 @@ import ListToolbar from '../blocks/ListToolbar';
 import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router';
 import DetailTransaction from '../blocks/DetailTransaction';
+import { log } from 'console';
+import ResendTransaction from '../blocks/ResendTransaction';
+import { comment } from 'stylis';
 
 interface TransactionProps {
   id: number;
@@ -28,6 +31,9 @@ interface ContextProps {
   setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
   selectedTransactionId: number | null;
   setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
+  showResendDialog: boolean;
+  handleResendDialog: (show: boolean, selected_transaction: string | null) => void;
+  selectedTransactionForResend: string | null;
 }
 
 const initialProps: ContextProps = {
@@ -35,7 +41,10 @@ const initialProps: ContextProps = {
   showDetailDialog: false,
   setShowDetailDialog: () => { },
   selectedTransactionId: null,
-  setSelectedTransactionId: () => { }
+  setSelectedTransactionId: () => { },
+  showResendDialog: false,
+  handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
+  selectedTransactionForResend: null
 };
 
 const ManageTransactionContext = createContext<ContextProps>(initialProps);
@@ -50,6 +59,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   const handleNavigate = (path: string) => {
     const url = navigate(`${API_URL}/transaction/history/${path}`);
   };
+  const [showResendDialog, setShowResendDialog] = useState(false);
+  const [selectedTransactionForResend, setSelectedTransactionForResend] = useState<string | null>(null);
+
+  const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => {
+    setSelectedTransactionForResend(show ? selected_transaction : null);
+    setShowResendDialog(show);
+  }, []);
+
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
@@ -162,7 +179,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             </span>
           );
         },
-      },      
+      },
       {
         accessorKey: 'description',
         header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
@@ -188,6 +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) && row.status_approve !== 'W' ? true : false;
           return (
             <div key={`actions-${row.id}`}>
               <button
@@ -199,6 +217,18 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
               >
                 <KeenIcon icon="eye" />
               </button>
+              {/* add new button for resend transaction failed */}
+              {isVisible &&
+                <button
+                  className="btn btn-sm btn-icon btn-clear btn-light"
+                  title="Retry Transaction"
+                  onClick={() => {
+                    handleResendDialog(true, row.id);
+                  }}
+                >
+                  <KeenIcon icon="abstract-37" />
+                </button>
+              }
             </div>
           );
         },
@@ -208,7 +238,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         }
       }
     ],
-    []);
+    [handleResendDialog]);
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
@@ -259,7 +289,10 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         showDetailDialog,
         setShowDetailDialog,
         selectedTransactionId,
-        setSelectedTransactionId
+        setSelectedTransactionId,
+        showResendDialog,
+        handleResendDialog,
+        selectedTransactionForResend
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />

src/pages/transaction/topup/TransactionTopup.tsx

@@ -0,0 +1,99 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+
+const TransactionTopup = () => {
+  const [form, setForm] = useState({
+    topupAmount: '',
+    pin: ''
+  });
+  const { GetData, PostData } = useCallApi();
+  const API_URL = apiConfig.transaction;
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log('Submitted Data:', form);
+
+    if (form.pin == '' || form.topupAmount) {
+      toast.warning('Please fill in all required fields.')
+      return
+    }
+    try {
+      let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
+        amount: form.topupAmount,
+        pin: form.pin
+      })
+      if (requestTopup?.status == true) {
+        toast.success('Success Request Topup')
+      } else {
+        toast.warning(`${requestTopup?.message}`)
+      }
+    } catch (error) {
+      toast.warning('Failed')
+    }
+    // TODO: Kirim ke backend atau proses lainnya
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Transaction Topup Request</title>
+      </Helmet>
+      <TransactionTopupProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Transaction</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Topup</span>
+            </Link>
+          </Breadcrumbs>
+          <Container className="flex items-center justify-center">
+            <div className="card max-w-[750px] w-full">
+              <div className="card-body p-10">
+                {/* form */}
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
+                    <Input
+                      id="topupAmount"
+                      type="number"
+                      value={form.topupAmount}
+                      onChange={(e) => setForm({ ...form, topupAmount: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
+                    <Input
+                      id="pin"
+                      type="password"
+                      value={form.pin}
+                      onChange={(e) => setForm({ ...form, pin: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <Button type="submit">Submit</Button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </Container>
+        </Container>
+      </TransactionTopupProvider>
+    </>
+  );
+};
+
+export default TransactionTopup;

src/pages/transaction/topup/blocks/ListToolbar.tsx

@@ -0,0 +1,61 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  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 gap-3 items-center ml-auto">
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/transaction/topup/hooks/TransactionTopupContext.tsx

@@ -0,0 +1,80 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { toast } from 'sonner';
+import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolbar';
+import { useCallApi } from '@/hooks';
+import moment from 'moment';
+
+interface TransactionTopupProps {
+  id: string;
+  customers_id: string;
+  group_id: string;
+  username: string;
+  fullname: string;
+  email: string;
+  status: string;
+  created_at: Date;
+}
+
+interface ContextProps {
+  
+}
+
+const initialProps: ContextProps = {
+
+};
+
+const TransactionTopupContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_customer;
+
+type StatusCode = 'W' | 'Y' | 'N' | 'T';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
+  N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
+  Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' },
+};
+
+export const renderStatusBadge = (statusRaw: string | null | undefined) => {
+	const status = statusRaw as StatusCode;
+	const { label, bg, text } = statusMap[status] ?? {
+		label: 'Unknown',
+		bg: 'bg-gray-100',
+		text: 'text-gray-600',
+	};
+
+	return (
+		<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
+			{label}
+		</span>
+	);
+};
+
+// const { reload } = useDataGrid();
+
+const TransactionTopupProvider = ({ children }: { children: React.ReactNode }) => {
+
+  return (
+    <TransactionTopupContext.Provider
+      value={{}}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <div>
+        {children}
+      </div>
+    </TransactionTopupContext.Provider>
+  );
+};
+
+export { TransactionTopupProvider, TransactionTopupContext };
+export type { TransactionTopupProps };

src/pages/transaction/topup/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './TransactionTopupContext';
+export * from './useTransactionTopupContext';

src/pages/transaction/topup/hooks/useTransactionTopupContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TransactionTopupContext } from './TransactionTopupContext';
+
+const useTransactionTopupContext = () => {
+  const context = useContext(TransactionTopupContext);
+
+  if (!context) throw new Error('useTransactionTopupContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useTransactionTopupContext };

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -467,6 +467,10 @@ const AddDialog = () => {
                           <SelectItem value="AM">Return Agent Merchant </SelectItem>
                           <SelectItem value="AE">Return Agent Emoney </SelectItem>
                           <SelectItem value="R">Reward Point </SelectItem>
+                          <SelectItem value="TE">Top Up Escrow </SelectItem>
+                          <SelectItem value="TM">Top Up Master Agent </SelectItem>
+                          <SelectItem value="TA">Top Up Agent </SelectItem>
+
                         </SelectContent>
                       </Select>
                     </div>

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -589,7 +589,7 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="D">Disbursement </SelectItem>
+                        <SelectItem value="D">Disbursement </SelectItem>
                           <SelectItem value="O">Other </SelectItem>
                           <SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem>
                           <SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem>
@@ -600,6 +600,9 @@ const EditDialog = () => {
                           <SelectItem value="AM">Return Agent Merchant </SelectItem>
                           <SelectItem value="AE">Return Agent Emoney </SelectItem>
                           <SelectItem value="R">Reward Point </SelectItem>
+                          <SelectItem value="TE">Top Up Escrow </SelectItem>
+                          <SelectItem value="TM">Top Up Master Agent </SelectItem>
+                          <SelectItem value="TA">Top Up Agent </SelectItem>
                         </SelectContent>
                       </Select>
                     </div>

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -1,10 +1,21 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
+  
+  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,8 +27,8 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Transaction Type"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
           </div>
@@ -41,4 +52,4 @@ const ListToolbar = () => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -6,6 +6,22 @@ import { ColumnDef } from '@tanstack/react-table';
 import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolBar';
 
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
 interface AccountProps {
   id: string;
   name: string;
@@ -33,6 +49,8 @@ interface ContextProps {
   selectedTransferType: string | null;
   transferType: string | null;
   accounts: AccountProps[];
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
 }
 
 const initialProps: ContextProps = {
@@ -44,7 +62,9 @@ const initialProps: ContextProps = {
   handleDeleteDialog: () => {},
   selectedTransferType: null,
   accounts: [],
-  transferType: null
+  transferType: null,
+  searchTerm: '',
+  setSearchTerm: () => {}
 };
 
 const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
@@ -59,6 +79,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
   const { GetData } = useCallApi();
   const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
   const [transferType, setTransferType] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  
+  const debouncedSearchTerm = useDebounce(searchTerm, 200);
 
   const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
     setSelectedTransferType(show ? selected_transfertype : null);
@@ -159,7 +182,10 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             AD: 'Return Agent Deposit',
             AM: 'Return Agent Merchant',
             AE: 'Return Agent Emoney',
-            R: 'Reward Point'
+            R: 'Reward Point',
+            TE:'Top Up Escrow',
+            TM:'Top Up Master Agent',
+            TA:'Top Up Agent'
           };
 
           return mapping[row.type] || 'Unknown';
@@ -228,7 +254,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 
     const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
 
-    filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
+    
+    filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
 
     const response = await GetData(`${API_URL}/transactiontype/list`, {
       limit: limit,
@@ -238,7 +266,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
       order_direction: orderDirection,
       filter: JSON.stringify(filter)
     });
-    // console.log(response?.data.list);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -254,7 +281,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
           handleDeleteDialog,
           selectedTransferType,
           accounts,
-          transferType
+          transferType,
+          searchTerm,
+          setSearchTerm
         }}
       >
         <Toaster expand visibleToasts={9} duration={3000} />
@@ -280,4 +309,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 };
 
 export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { TransferType };
+export type { TransferType };