Merge branch 'alwi'

src/config/api.config.ts

@@ -2,6 +2,7 @@ interface apiConfigProps {
   service_dashboard: string;
   service_customer: string;
   service_master_data: string;
+  service_transaction: string;
 }
 
 const API_URL = import.meta.env.VITE_APP_API_URL;
@@ -10,7 +11,8 @@ const apiConfig: apiConfigProps = {
   service_dashboard: `${API_URL}/d`,
   service_customer: `${API_URL}/c`,
   // service_master_data: `${API_URL}/m`
-  service_master_data: `${API_URL}/t`
+  service_master_data: `${API_URL}/t`,
+  service_transaction: `${API_URL}/tt`
 };
 
 export { apiConfig };

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

@@ -15,6 +15,20 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+interface SucosProps {
+  sucos_id: number;
+  sucos_name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
@@ -22,15 +36,17 @@ const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog } = useManageAldeiasContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [sucos, setSucos] = useState<SucosProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
   const initialState = {
     name: '',
-    sucos: 0,
+    sucos_id: 0,
     created_by: '',
     created_at: ''
   };
@@ -65,12 +81,12 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos === 0) {
+    if (formField.name === '' || formField.sucos_id === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    // doCreateAldeias(e);
+    doCreateAldeias(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -85,6 +101,28 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const fetchSucos = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/sucos/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log('SUCOS', response?.data);
+        setSucos(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching municipios', error);
+      }
+    };
+
+    fetchSucos([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -121,16 +159,39 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Sucos ID<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
-                      className="input"
+                      <PopoverTrigger asChild>
-                      type="number"
+                        <button type="button" className="input col-span-5 text-left">
-                      min={0}
+                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
-                      value={formField.sucos === 0 ? '' : formField.sucos}
+                            'Select Sucos'}
-                      onChange={(e) => {
+                        </button>
-                        const value = parseInt(e.target.value, 10);
+                      </PopoverTrigger>
-                        setFormField({ ...formField, sucos: isNaN(value) ? 0 : value });
+                      <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,
+                                      sucos_id: suco.sucos_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {suco.sucos_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 

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

@@ -15,21 +15,37 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+interface SucosProps {
+  sucos_id: number;
+  sucos_name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedAldeias } = useManageAldeiasContext();
+  const { showEditDialog, handleEditDialog, selectedAldeias, aldeias } = useManageAldeiasContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [sucos, setSucos] = useState<SucosProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
   const initialState = {
     name: '',
-    sucos: 0,
+    sucos_id: 0,
     updated_by: '',
     updated_at: ''
   };
@@ -64,12 +80,12 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos === 0) {
+    if (formField.name === '' || formField.sucos_id === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    // doUpdateAldeias(e);
+    doUpdateAldeias(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -84,6 +100,28 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const fetchSucos = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/sucos/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log('SUCOS', response?.data);
+        setSucos(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching municipios', error);
+      }
+    };
+
+    fetchSucos([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -120,16 +158,39 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Sucos ID<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
-                      className="input"
+                      <PopoverTrigger asChild>
-                      type="number"
+                        <button type="button" className="input col-span-5 text-left">
-                      min={0}
+                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
-                      value={formField.sucos === 0 ? '' : formField.sucos}
+                            'Select Sucos'}
-                      onChange={(e) => {
+                        </button>
-                        const value = parseInt(e.target.value, 10);
+                      </PopoverTrigger>
-                        setFormField({ ...formField, sucos: isNaN(value) ? 0 : value });
+                      <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,
+                                      sucos_id: suco.sucos_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {suco.sucos_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 

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

@@ -31,13 +31,13 @@ const ListToolbar = () => {
                 <KeenIcon icon="filter" />
               </Button>
             </DefaultTooltip>
-            <Button
+            {/* <Button
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
               Search Sucos
-            </Button>
+            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

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

@@ -150,7 +150,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setAldeias(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {

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

@@ -77,12 +77,6 @@ const AddDialog = () => {
       return;
     }
 
-    // setFormField({
-    //   name: formField.name,
-    //   created_by: parsedUser.email,
-    //   created_at: formattedTime
-    // });
-
     doCreateMunicipio(e);
     console.log(parsedUser.email);
     console.log(formField);

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

@@ -1,10 +1,23 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
 import { Button } from '@/components/ui/button';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
+  const [searchName, setSearchName] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('name')?.setFilterValue(searchName);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [searchName, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,8 +29,8 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Municipios"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchName}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) => setSearchName(event.target.value)}
               />
             </label>
             <DefaultTooltip title={'Filter'} placement={'top'}>
@@ -25,19 +38,19 @@ const ListToolbar = () => {
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
                 // disabled={isLoading}
-                // onClick={handleFilterData}
+                onClick={handleFilterData}
               >
                 {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
                 <KeenIcon icon="filter" />
               </Button>
             </DefaultTooltip>
-            <Button
+            {/* <Button
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
               Search Postu Administrativo
-            </Button>
+            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

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

@@ -168,7 +168,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
           order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
         }
       });
-      console.log(response.data);
+      // console.log(response.data);
       // const sortedList = response.data.data.list.sort((a: MunicipiosProps, b: MunicipiosProps) => {
       //   if (a.name < b.name) return -1;
       //   if (a.name > b.name) return 1;

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

@@ -15,6 +15,20 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+interface MunicipioProps {
+  id: number;
+  name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
@@ -22,9 +36,10 @@ const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog } = useManagePostoAdmsContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
-
+  const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -88,6 +103,28 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const fetchMunicipios = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/municipios/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log(response?.data);
+        setMunicipios(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching municipios', error);
+      }
+    };
+
+    fetchMunicipios([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -122,18 +159,41 @@ const AddDialog = () => {
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">
-                      Municipio ID<span className="text-red-500">*</span>
+                      Municipio Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
-                      className="input"
+                      <PopoverTrigger asChild>
-                      type="number"
+                        <button type="button" className="input col-span-5 text-left">
-                      min={0}
+                          {municipios.find((municipio) => municipio.id === formField.municipio_id)
-                      value={formField.municipio_id === 0 ? '' : formField.municipio_id}
+                            ?.name || 'Select Municipios'}
-                      onChange={(e) => {
+                        </button>
-                        const value = parseInt(e.target.value, 10);
+                      </PopoverTrigger>
-                        setFormField({ ...formField, municipio_id: isNaN(value) ? 0 : value });
+                      <PopoverContent className="w-[400px] p-0">
-                      }}
+                        <Command>
-                    />
+                          <CommandInput placeholder="Search Municipios..." />
+                          <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>
 

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

@@ -15,15 +15,32 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+interface MunicipioProps {
+  id: number;
+  name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, handleEditDialog, selectedPostoAdms } = useManagePostoAdmsContext();
+  const { showEditDialog, handleEditDialog, selectedPostoAdms, postoAdms } =
+    useManagePostoAdmsContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [open, setOpen] = useState(false);
+  const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
 
   const [alert, setAlert] = useState({
     show: false,
@@ -35,7 +52,6 @@ const EditDialog = () => {
     updated_by: '',
     updated_at: ''
   };
-
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -72,7 +88,7 @@ const EditDialog = () => {
       return;
     }
 
-    doUpdatePostoAdm(e);
+    // doUpdatePostoAdm(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -87,6 +103,30 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    try {
+      const fetchMunicipios = async (sorting: any) => {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/municipios/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log(response?.data);
+        setMunicipios(response?.data.list);
+      };
+
+      fetchMunicipios([{ id: 'name', desc: false }]);
+    } catch (error) {
+      console.error('Error fetching municipios', error);
+    }
+  }, []);
+
+  // console.log(selectedPostoAdms);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -121,22 +161,48 @@ const EditDialog = () => {
                 <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 ID<span className="text-red-500">*</span>
+                      Municipio Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
-                      className="input"
+                      <PopoverTrigger asChild>
-                      type="number"
+                        <button type="button" className="input col-span-5 text-left">
-                      min={0}
+                          {municipios.find((municipio) => municipio.id === formField.municipio_id)
-                      value={formField.municipio_id === 0 ? '' : formField.municipio_id}
+                            ?.name || 'Select Municipios'}
-                      onChange={(e) => {
+                        </button>
-                        const value = parseInt(e.target.value, 10);
+                      </PopoverTrigger>
-                        setFormField({ ...formField, municipio_id: isNaN(value) ? 0 : value });
+                      <PopoverContent className="w-[400px] p-0">
-                      }}
+                        <Command>
-                    />
+                          <CommandInput placeholder="Search Municipios..." />
+                          <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">
+                <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>

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

@@ -16,7 +16,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Postu Administrativo"
+                placeholder="Search Postu"
                 value={(table.getColumn('posto_adms_name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) =>
                   table.getColumn('posto_adms_name')?.setFilterValue(event.target.value)
@@ -34,13 +34,13 @@ const ListToolbar = () => {
                 <KeenIcon icon="filter" />
               </Button>
             </DefaultTooltip>
-            <Button
+            {/* <Button
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
               Search Sucos
-            </Button>
+            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

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

@@ -11,14 +11,16 @@ import { Alert, KeenIcon } from '@/components';
 import { Button } from '@/components/ui/button';
 import { apiConfig } from '@/config/api.config';
 import axios from 'axios';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
 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;
@@ -29,6 +31,7 @@ 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,
@@ -60,6 +63,7 @@ const SearchDialog = () => {
 
       if (response.data.status) {
         setSucos(response.data.data);
+        console.log(sucos);
         setIsFound(true);
         console.log('Found postoadms: ', response.data.data);
       } else {
@@ -79,25 +83,22 @@ const SearchDialog = () => {
     setIsFound(false);
     setSucos([]);
   };
-  // console.log(municipios);
+  
   return (
-    <Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
+    <Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
       <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">
+          <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">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Search Sucos</h1>
-                Search Sucos
-              </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();
+                handleReset();
               }}
             >
               <KeenIcon icon="cross" className="text-1.5xl" />
@@ -105,68 +106,68 @@ const SearchDialog = () => {
           </div>
         </DialogHeader>
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
+          <form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
-            {alert.show && (
+            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
-              <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">
-                  PostoAdms Name<span className="text-red-500">*</span>
-                  </label>
 
-                  <Select
+            <div className="grid grid-cols-8 gap-1 w-full items-center">
-                    value={formField.id.toString()}
+              <label className="form-label flex items-center col-span-3">
-                    onValueChange={(target) => {
+                Postu Administrativo Name<span className="text-red-500">*</span>
-                      const selectedPostoadms = postoAdms.find((m) => m.posto_adms_id.toString() === target);
+              </label>
-                      if (selectedPostoadms) {
-                        setFormField({
-                          ...formField,
-                          id: selectedPostoadms.posto_adms_id,
-                          name: selectedPostoadms.posto_adms_name
-                        });
-                      }
-                    }}
-                  >
-                    <SelectTrigger className="col-span-6">
-                      <SelectValue placeholder="Select Municipios" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {postoAdms.map((postoAdm) => (
-                        <SelectItem key={postoAdm.posto_adms_id} value={postoAdm.posto_adms_id.toString()}>
-                          {postoAdm.posto_adms_name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
 
-                {isFound && sucos.length > 0 && (
+              <Popover open={open} onOpenChange={setOpen}>
-                  <div className="mt-4 border-t pt-4">
+                <PopoverTrigger asChild>
-                    <h2 className="text-md font-semibold">Sucos: </h2>
+                  <button type="button" className="input col-span-5 text-left">
-                    <br />
+                    {formField.name || 'Select PostoAdms'}
-                    <div className="flex flex-col">
+                  </button>
-                      <span className="text-sm form-hint">
+                </PopoverTrigger>
-                        {sucos.map((suco) => suco.name).join(', ')}
+                <PopoverContent className="w-[400px] p-0">
-                      </span>
+                  <Command>
-                    </div>
+                    <CommandInput placeholder="Search PostoAdms..." />
-                  </div>
+                    <CommandList>
-                )}
+                      <CommandEmpty>No PostoAdms found.</CommandEmpty>
+                      <CommandGroup>
+                        {postoAdms.map((postoAdm) => (
+                          <CommandItem
+                            key={postoAdm.posto_adms_id}
+                            value={postoAdm.posto_adms_name}
+                            onSelect={() => {
+                              setFormField({
+                                id: postoAdm.posto_adms_id,
+                                name: postoAdm.posto_adms_name
+                              });
+                              setOpen(false);
+                            }}
+                          >
+                            {postoAdm.posto_adms_name}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
 
-                <div className="flex justify-end pt-2.5 gap-5 col-span-6">
+            {isFound && sucos.length > 0 && (
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+              <div className="mt-4 border-t pt-4">
-                    Reset
+                <h2 className="text-md font-semibold">Sucos: </h2>
-                  </Button>
+                <div className="flex flex-col">
-                  <Button variant={'default'} type="submit">
+                  <span className="text-sm form-hint">
-                    Search
+                    {sucos.map((suco) => suco.name).join(', ')}
-                  </Button>
+                  </span>
                 </div>
               </div>
-            </form>
+            )}
-          </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>

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

@@ -125,13 +125,13 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
+                onClick={() => handleEditDialog(true, row.posto_adms_id)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.id)}
+                onClick={() => handleDeleteDialog(true, row.posto_adms_id)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -160,7 +160,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         }
       });
-      console.log(response.data);
+      // console.log(response.data);
       // const sortedList = response.data.data.list.sort((a: PostoAdmsProps, b: PostoAdmsProps) => {
       //   if (a.name < b.name) return -1;
       //   if (a.name > b.name) return 1;

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

@@ -15,14 +15,46 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+export interface CustomerProps {
+  msisdn: string;
+  email: string;
+  fullname: string;
+  username: string;
+}
+
+export interface TransactionProps {
+  id: string;
+  name: string;
+}
+
+const API_URL_CUSTOMER = apiConfig.service_customer;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_TRANSACTION = apiConfig.service_transaction;
 
-const API_URL = apiConfig.service_master_data;
 const AddDialog = () => {
   const { showAddDialog, handleAddDialog } = useManageProviderContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parentRef = useRef<any | null>(null);
   const parsedUser = getAuth()?.user;
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -38,6 +70,8 @@ const AddDialog = () => {
     created_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
@@ -49,7 +83,7 @@ const AddDialog = () => {
   const doCreateProvider = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const response = await PostData(`${API_URL}/provider/create`, formField);
+    const response = await PostData(`${API_URL_MASTERDATA}/provider/create`, formField);
 
     if (response?.status) {
       resetForm();
@@ -77,7 +111,7 @@ const AddDialog = () => {
       return;
     }
 
-    doCreateProvider(e);
+    // doCreateProvider(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -92,6 +126,46 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        console.log('CUSTOMER: ', response?.data);
+        setCustomers(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    const getTransactionTypeList = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        console.log('TRANSACTION TYPE: ', response?.data);
+        setTransactions(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching transaction type', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getTransactionTypeList([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -142,12 +216,18 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Type<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.type}
-                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                      onValueChange={(value) => setFormField({ ...formField, type: value })}
-                    />
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="agent">Agent</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -156,12 +236,18 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
+                      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>
 
@@ -170,28 +256,64 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.transactionTypeId}
-                      onChange={(e) =>
+                      onValueChange={(value) =>
-                        setFormField({ ...formField, transactionTypeId: e.target.value })
+                        setFormField({ ...formField, transactionTypeId: 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>
 
                 <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 Id<span className="text-red-500">*</span>
+                      Agent Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
-                      className="input"
+                      <PopoverTrigger asChild>
-                      type="text"
+                        <button type="button" className="input col-span-5 text-left">
-                      value={formField.agentId}
+                          {customers.find((customer) => customer.msisdn === formField.agentId)
-                      onChange={(e) => setFormField({ ...formField, agentId: e.target.value })}
+                            ?.fullname || 'Select Agent'}
-                    />
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Agent..." />
+                          <CommandList>
+                            <CommandEmpty>No Agent found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.msisdn}
+                                  value={customer.fullname}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      agentId: customer.msisdn
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.fullname}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 

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

@@ -15,15 +15,37 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { CustomerProps, TransactionProps } from './AddDialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+const API_URL_CUSTOMER = apiConfig.service_customer;
+const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_TRANSACTION = apiConfig.service_transaction;
 
-const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedProvider } = useManageProviderContext();
+  const { showEditDialog, handleEditDialog, selectedProvider, provider } =
+    useManageProviderContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -39,6 +61,8 @@ const EditDialog = () => {
     updated_at: ''
   };
   const [formField, setFormField] = useState(initialState);
+  const [transactions, setTransactions] = useState<TransactionProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -49,7 +73,10 @@ const EditDialog = () => {
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      const response = await PutData(`${API_URL}/provider/update/${selectedProvider}`, formField);
+      const response = await PutData(
+        `${API_URL_MASTERDATA}/provider/update/${selectedProvider}`,
+        formField
+      );
 
       if (response?.status) {
         resetForm();
@@ -64,6 +91,25 @@ const EditDialog = () => {
     [selectedProvider, formField]
   );
 
+  const doFetchData = useCallback(async () => {
+    if (selectedProvider) {
+      const data = provider.find((item) => item.id === selectedProvider);
+      if (data) {
+        setFormField((prev) => ({
+          ...prev,
+          name: data.name,
+          description: data.description,
+          type: data.type,
+          status: data.status,
+          transactionTypeId: data.transactionTypeId,
+          agentId: data.agentId
+        }));
+      }
+    } else {
+      resetForm();
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -79,11 +125,17 @@ const EditDialog = () => {
       return;
     }
 
-    doUpdateProvider(e);
+    // doUpdateProvider(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (selectedProvider) {
+      doFetchData();
+    }
+  }, [selectedProvider]);
+
   useEffect(() => {
     if (showEditDialog) {
       setFormField({
@@ -94,6 +146,46 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        console.log('CUSTOMER: ', response?.data);
+        setCustomers(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching customer', error);
+      }
+    };
+
+    const getTransactionTypeList = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        console.log('TRANSACTION TYPE: ', response?.data);
+        setTransactions(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching transaction type', error);
+      }
+    };
+
+    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getTransactionTypeList([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -120,7 +212,9 @@ const EditDialog = () => {
                       className="input"
                       type="text"
                       value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
                     />
                   </div>
                 </div>
@@ -144,12 +238,18 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Type<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.type}
-                      onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                      onValueChange={(value) => setFormField({ ...formField, type: value })}
-                    />
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="h2h">H2H</SelectItem>
+                        <SelectItem value="agent">Agent</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
 
@@ -158,12 +258,18 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
+                      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>
 
@@ -172,28 +278,64 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Transaction Type Id<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Select
-                      className="input"
-                      type="text"
                       value={formField.transactionTypeId}
-                      onChange={(e) =>
+                      onValueChange={(value) =>
-                        setFormField({ ...formField, transactionTypeId: e.target.value })
+                        setFormField({ ...formField, transactionTypeId: 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>
 
                 <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 Id<span className="text-red-500">*</span>
+                      Agent Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
-                      className="input"
+                      <PopoverTrigger asChild>
-                      type="text"
+                        <button type="button" className="input col-span-5 text-left">
-                      value={formField.agentId}
+                          {customers.find((customer) => customer.msisdn === formField.agentId)
-                      onChange={(e) => setFormField({ ...formField, agentId: e.target.value })}
+                            ?.fullname || 'Select Agent'}
-                    />
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Agent..." />
+                          <CommandList>
+                            <CommandEmpty>No Agent found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.msisdn}
+                                  value={customer.fullname}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      agentId: customer.msisdn
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.fullname}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 

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

@@ -7,6 +7,7 @@ import { Toaster } from 'sonner';
 import ListToolbar from '../blocks/ListToolbar';
 
 interface ProviderProps {
+  id: string;
   name: string;
   description: string;
   type: string;

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

@@ -33,13 +33,13 @@ const ListToolbar = () => {
                 <KeenIcon icon="filter" />
               </Button>
             </DefaultTooltip>
-            <Button
+            {/* <Button
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
               Search Sucos
-            </Button>
+            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button