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

.env

@@ -1,7 +0,0 @@
-VITE_APP_NAME=tpay-dashboard-tl
-VITE_APP_VERSION=1=9.1.1
-GENERATE_SOURCEMAP=false
-
-VITE_APP_API_URL=https://tpay.shiblysolution.id/api
-# VITE_APP_API_URL=http://0.0.0.0:4001/api
-VITE_ENV=default

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.env
 node_modules
 dist
 dist-ssr

src/auth/pages/jwt/Login.tsx

@@ -69,6 +69,12 @@ const Login = () => {
     setShowPassword(!showPassword);
   };
 
+  const handleKeyPress = (e: { key: string }) => {
+    if (e.key === 'Enter') {
+      formik.handleSubmit();
+    }
+  };
+
   return (
     <div className="card max-w-[390px] w-full">
       <form
@@ -90,6 +96,7 @@ const Login = () => {
               className={clsx('form-control', {
                 'is-invalid': formik.touched.username && formik.errors.username
               })}
+              onKeyPress={handleKeyPress}
             />
           </label>
           {formik.touched.username && formik.errors.username && (
@@ -112,6 +119,7 @@ const Login = () => {
               className={clsx('form-control', {
                 'is-invalid': formik.touched.password && formik.errors.password
               })}
+              onKeyPress={handleKeyPress}
             />
             <button className="btn btn-icon" onClick={togglePassword}>
               <KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />

src/pages/account/home/user-profile/blocks/BasicSettings.tsx

@@ -14,7 +14,7 @@ const BasicSettings = () => {
   // const user = localStorage.getItem('user');
   // const parsedUser = user ? JSON.parse(user) : null;
   const parsedUser = getAuth()?.user;
-  console.log('parsedUser :', parsedUser);
+  // console.log('parsedUser :', parsedUser);
   const [newUsername, setNewUsername] = useState<string>(parsedUser?.username || '');
   const [newEmail, setNewEmail] = useState<string>(parsedUser?.email || '');
   const [newName, setNewName] = useState<string>(parsedUser?.name || '');

src/pages/account/manage-account/ManageAccount.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { getData } from '@/utils';
 import { useCallApi } from '@/hooks';
 import { DataTable } from '@/components/ui/DataTable';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -75,7 +76,20 @@ const ManageAccount = () => {
   return (
     <div>
       <div className="container mx-auto p-5">
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Account</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Account</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">Accounts</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Account</span>
+          </Link>
+        </Breadcrumbs>
         <DataTable
           columns={columns}
           data={dataAccount}

src/pages/account/manage-currency/ManageCurrency.tsx

@@ -1,11 +1,26 @@
 import { Container, DataGridInner } from '@/components';
 import { ManageCurrencyContextProvider } from './hooks/ManageCurrencyContext';
 import AddDialog from './blocks/AddDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const ManageCurrency = () => {
   return (
     <ManageCurrencyContextProvider>
       <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Currency</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">Accounts</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Currency</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx

@@ -220,9 +220,6 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
   console.log(currencies);
   return (
     <div>
-      <div className="container mx-auto py-5">
-        <h1>Manage Currency</h1>
-      </div>
       <ManageCurrencyContext.Provider
         value={{
           showEditDialog,

src/pages/groups/ManageGroups.tsx

@@ -2,8 +2,21 @@ import { DataTable } from '@/components/ui/DataTable';
 import { columns, Group } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
-import { DialogContent, MenuItem, Radio, RadioGroup, FormControlLabel, FormControl,
+import {
-  Dialog, DialogTitle, Typography, Button, Box } from '@mui/material';
+  DialogContent,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  FormControl,
+  Dialog,
+  DialogTitle,
+  Typography,
+  Button,
+  Box,
+  Breadcrumbs,
+  Link
+} from '@mui/material';
 import { useState, useEffect } from 'react';
 // import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
@@ -21,7 +34,7 @@ let initGroup = {
   pin_length: '',
   max_pin_attempts: '',
   default_notification: ''
-}
+};
 
 const ManageGroups = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -33,7 +46,7 @@ const ManageGroups = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   useEffect(() => {
-    fetchGroups()
+    fetchGroups();
   }, []);
 
   async function fetchGroups() {
@@ -47,29 +60,29 @@ const ManageGroups = () => {
           order_direction: 'ASC'
         }
       });
-      let temp = 1
+      let temp = 1;
       let resGroups = groups.data.data.list.map((el: any) => {
-        el.no = temp++
+        el.no = temp++;
-        return el
+        return el;
-      })
+      });
-      setDataGroup(resGroups)
+      setDataGroup(resGroups);
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
       console.log(error);
     }
   }
 
   const openDialog = () => setIsDialogOpen(true);
   const closeDialog = () => {
-    setIsDialogOpen(false)
+    setIsDialogOpen(false);
-    setFormData(initGroup)
+    setFormData(initGroup);
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value
-    })
+    });
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -89,9 +102,9 @@ const ManageGroups = () => {
       groupName: group.name,
       status: group.status,
       description: group.description
-    })
+    });
     setDialogType('update');
-    setIsDialogOpen(true)
+    setIsDialogOpen(true);
   };
 
   const handleDelete = (group: any) => {
@@ -101,27 +114,27 @@ const ManageGroups = () => {
       groupName: group.name,
       status: group.status,
       description: group.description
-    })
+    });
     setDialogType('delete');
-    setDialogOpen(true)
+    setDialogOpen(true);
   };
 
   const handleYes = async () => {
     try {
       if (dialogType === 'create') {
         await axios.post(`${BASE_URL}/groups/create`, {
-          "name": formData.groupName,
+          name: formData.groupName,
-          "status": formData.status,
+          status: formData.status,
-          "created_at": new Date()
+          created_at: new Date()
-        })
+        });
       } else if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
-          "name": formData.groupName,
+          name: formData.groupName,
-          "status": formData.status,
+          status: formData.status,
-          "updated_at": new Date()
+          updated_at: new Date()
-        })
+        });
       } else if (dialogType === 'delete') {
-        await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`)
+        await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
       }
       await fetchGroups();
       closeDialog();
@@ -136,25 +149,53 @@ const ManageGroups = () => {
   return (
     <div>
       <div className="container mx-auto pt-2">
-      <ConfirmDialog
+        <ConfirmDialog
-        open={dialogOpen}
+          open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
+          onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
+          title="Confirm Action"
-        content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
+          content={
-        onYes={handleYes}
+            `Are you sure you want to ` +
-        onNo={() => setDialogOpen(false)}
+            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
-      />
+          }
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
+          onYes={handleYes}
-        <DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
+          onNo={() => setDialogOpen(false)}
+        />
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Groups</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">Groups</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Groups</span>
+          </Link>
+        </Breadcrumbs>
+        <DataTable
+          data={dataGroup}
+          columns={columns}
+          createData={createGroup}
+          onUpdate={handleUpdate}
+          onDelete={handleDelete}
+        />
         <Dialog open={isDialogOpen} onClose={closeDialog}>
           <DialogContent className="w-[600px]">
             <div className="flex justify-between">
               <DialogTitle>Create New Group</DialogTitle>
               <Box display="flex" justifyContent="flex-end">
-                <Button variant="outlined" sx={{ borderColor: "white", color: 'grey' }} onClick={closeDialog}><CloseIcon/></Button>
+                <Button
+                  variant="outlined"
+                  sx={{ borderColor: 'white', color: 'grey' }}
+                  onClick={closeDialog}
+                >
+                  <CloseIcon />
+                </Button>
               </Box>
             </div>
-            <Divider/>
+            <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">
@@ -174,9 +215,19 @@ const ManageGroups = () => {
                     <span className="text-red-500">*</span>Active Status:
                   </label>
                   <FormControl>
-                    <RadioGroup name='status' row value={formData.status} onChange={handleChange}>
+                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
-                      <FormControlLabel value="Y" checked={formData.status === 'Y'} control={<Radio />} label="Yes" />
+                      <FormControlLabel
-                      <FormControlLabel value="N" checked={formData.status === 'N'} control={<Radio />} label="No" />
+                        value="Y"
+                        checked={formData.status === 'Y'}
+                        control={<Radio />}
+                        label="Yes"
+                      />
+                      <FormControlLabel
+                        value="N"
+                        checked={formData.status === 'N'}
+                        control={<Radio />}
+                        label="No"
+                      />
                     </RadioGroup>
                   </FormControl>
                 </div>

src/pages/master/aldeias/AldeiasMaster.tsx

@@ -3,12 +3,27 @@ import { ManageAldeiasContextProvider } from './hooks/ManageAldeiasContext';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const AldeiasMaster = () => {
   return (
     <ManageAldeiasContextProvider>
       <Container>
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Aldeias</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Aldeias</span>
+          </Link>
+        </Breadcrumbs>
+
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -78,6 +78,24 @@ const AddDialog = () => {
     [formField]
   );
 
+  const doFetchSucos = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/sucos/list`, {
+        limit: 1000,
+        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);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -102,25 +120,7 @@ const AddDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    const fetchSucos = async (sorting: any) => {
+    doFetchSucos([{ id: 'name', desc: false }]);
-      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 }]);
   }, []);
 
   useEffect(() => {

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

@@ -77,6 +77,42 @@ const EditDialog = () => {
     [selectedAldeias, formField]
   );
 
+  const doFetchSucos = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/sucos/list`, {
+        limit: 1000,
+        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);
+    }
+  };
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        sucos_id: response.data.sucos.id
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: '',
+        sucos_id: 0
+      }));
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -90,6 +126,18 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (selectedAldeias) {
+      doFetchData(selectedAldeias);
+    }
+  }, [selectedAldeias]);
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
   useEffect(() => {
     if (showEditDialog) {
       setFormField({
@@ -101,25 +149,7 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    const fetchSucos = async (sorting: any) => {
+    doFetchSucos([{ id: 'name', desc: false }]);
-      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 (

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

@@ -152,7 +152,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) {
@@ -179,7 +179,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
       <Toaster expand visibleToasts={9} duration={3000} />
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/master/municipios/Municipios.tsx

@@ -4,12 +4,26 @@ 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';
 
 const Municipios = () => {
   return (
     <ManageMunicipiosProvider>
       <Container className="mb-7">
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MUNICIPIOS</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIOS</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Municipios</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -25,7 +25,7 @@ const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedMunicipios, municipios } =
     useManageMunicipiosContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [alert, setAlert] = useState({
     show: false,
@@ -44,6 +44,7 @@ const EditDialog = () => {
 
   const resetForm = () => {
     setFormField(initialState);
+    setAlert({ show: false, message: '' });
   };
 
   const doUpdateMunicipios = useCallback(
@@ -74,6 +75,22 @@ const EditDialog = () => {
     [selectedMunicipios, formField]
   );
 
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: ''
+      }));
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -82,20 +99,22 @@ const EditDialog = () => {
       return;
     }
 
-    // setFormField({
-    //   name: formField.name,
-    //   created_by: parsedUser.email,
-    //   created_at: formattedTime
-    // });
-
     doUpdateMunicipios(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
-  // const doFetchMunicipios = useCallback(async (id: string) => {
+  useEffect(() => {
-  //   const response = await axios.get(`${API_URL}/municipios/${id}`);
+    if (selectedMunicipios) {
-  // }, []);
+      doFetchData(selectedMunicipios);
+    }
+  }, [selectedMunicipios]);
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
 
   useEffect(() => {
     if (selectedMunicipios) {
@@ -127,7 +146,9 @@ const EditDialog = () => {
               <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</label>
+                    <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"

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

@@ -120,7 +120,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
         enableSorting: true,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[1000px]'
+          headerClassName: 'w-[250px]'
         }
       },
       {
@@ -201,7 +201,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/master/postoadms/PostoAdmsMaster.tsx

@@ -4,14 +4,28 @@ 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';
 
 const PostoAdmsMaster = () => {
   return (
     <ManagePostoAdmsContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
           Postu Administrativo
         </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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Postu Administrativo</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -80,6 +80,24 @@ const AddDialog = () => {
     [formField]
   );
 
+  const doFetchMunicipios = 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);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -110,25 +128,7 @@ const AddDialog = () => {
   }, [showAddDialog]);
 
   useEffect(() => {
-    const fetchMunicipios = async (sorting: any) => {
+    doFetchMunicipios([{ id: 'name', desc: false }]);
-      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 (

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

@@ -80,6 +80,41 @@ const EditDialog = () => {
     [selectedPostoAdms, formField]
   );
 
+  const doFetchMunicipios = useCallback(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('MUNICIPIOS: ', response?.data);
+      setMunicipios(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching municipios', error);
+    }
+  }, []);
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        municipio_id: response.data.municipios.id
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: ''
+      }));
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -93,6 +128,18 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedPostoAdms) {
+      doFetchData(selectedPostoAdms);
+    }
+  }, [selectedPostoAdms]);
+
   useEffect(() => {
     if (selectedPostoAdms) {
       setFormField({
@@ -104,25 +151,7 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    try {
+    doFetchMunicipios([{ id: 'name', desc: false }]);
-      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);

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

@@ -17,9 +17,9 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Postu"
-                value={(table.getColumn('PostoAdms_name')?.getFilterValue() as string) ?? ''}
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) =>
-                  table.getColumn('PostoAdms_name')?.setFilterValue(event.target.value)
+                  table.getColumn('name')?.setFilterValue(event.target.value)
                 }
               />
             </label>

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

@@ -84,9 +84,9 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        // accessorFn: (row) => row.PostoAdms_id,
+        accessorFn: (row) => row.PostoAdms_id,
-        // id: 'PostoAdms_id',
+        id: 'id',
-        accessorKey: 'PostoAdms_id',
+        // accessorKey: 'PostoAdms_id',
         header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -95,26 +95,26 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
         }
       },
       {
-        // accessorFn: (row) => row.posto_adms_name,
+        accessorFn: (row) => row.PostoAdms_name,
-        // id: 'posto_adms_name',
+        id: 'name',
-        accessorKey: 'PostoAdms_name',
+        // accessorKey: 'PostoAdms_name',
         header: ({ column }) => (
           <DataGridColumnHeader title="Posto Administrativo Name" column={column} />
         ),
         enableSorting: true,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[1000px]'
+          headerClassName: 'w-[250px]'
         }
       },
       {
         accessorFn: (row) => row.municipios_name,
         id: 'municipios_name',
         header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[1000px]'
+          headerClassName: 'w-[250px]'
         }
       },
       {
@@ -162,7 +162,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
         order_direction: sorting[0].desc ? 'DESC' : 'ASC',
         filter: JSON.stringify(filter)
       });
-      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;
@@ -195,7 +195,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/master/products/ProductsMaster.tsx

@@ -3,12 +3,26 @@ import { ManageProductsContextProvider } from './hooks/ManageProductsContext';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const ProductsMaster = () => {
   return (
     <ManageProductsContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Products</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Products</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Products</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -20,7 +20,7 @@ const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedProducts } = useManageProductsContext();
   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', ' ');
@@ -66,6 +66,25 @@ const EditDialog = () => {
     [selectedProducts, formField]
   );
 
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/product/getdata/${selectedProducts}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        price_point: response.data.price_point,
+        price_cash: response.data.price_cash,
+        cashback_point: response.data.cashback_point,
+        cashback_cash: response.data.cashback_cash,
+        status: response.data.status
+      }));
+    } else {
+      setFormField(initialState);
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -89,6 +108,18 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedProducts) {
+      doFetchData(selectedProducts);
+    }
+  }, [selectedProducts]);
+
   useEffect(() => {
     if (showEditDialog) {
       setFormField({

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

@@ -167,7 +167,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setProducts(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -193,7 +193,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/master/profession/ProfessionMaster.tsx

@@ -3,12 +3,26 @@ import { ManageProfessionContextProvider } from './hooks/ManageProfessionContext
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const ProfessionMaster = () => {
   return (
     <ManageProfessionContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Profession</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Profession</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Profession</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -132,7 +132,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setProfession(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
@@ -158,7 +158,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/master/provider/ProviderMaster.tsx

@@ -3,12 +3,26 @@ import { ManageProviderContextProvider } from './hooks/ManageProviderContext';
 import AddDialog from './blocks/AddDialog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const ProviderMaster = () => {
   return (
     <ManageProviderContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Provider</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Provider</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Provider</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -194,7 +194,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

src/pages/master/sucos/SucosMaster.tsx

@@ -3,18 +3,36 @@ 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';
 
 const SucosMaster = () => {
   return (
     <ManageSucosContextProvider>
       <Container>
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Sucos</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Sucos</span>
+          </Link>
+        </Breadcrumbs>
+
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>
+
         <AddDialog />
         <EditDialog />
         <DeleteDialog />
+        <SearchDialog />
       </Container>
     </ManageSucosContextProvider>
   );

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

@@ -15,15 +15,30 @@ 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 PostoAdmsProps {
+  PostoAdms_id: number;
+  PostoAdms_name: string;
+}
 const API_URL = apiConfig.service_master_data;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog } = useManageSucosContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [posto_adms, setPostoadms] = useState<PostoAdmsProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -44,20 +59,23 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const doCreateSucos = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+  const doCreateSucos = useCallback(
-    e.preventDefault();
+    async (e: React.FormEvent<HTMLFormElement>) => {
-    const response = await PostData(`${API_URL}/sucos/create`, formField);
+      e.preventDefault();
+      const response = await PostData(`${API_URL}/sucos/create`, formField);
 
-    if (response?.status) {
+      if (response?.status) {
-      resetForm();
+        resetForm();
-      handleAddDialog(false);
+        handleAddDialog(false);
-      reload();
+        reload();
-      toast.success('Success Create Sucos');
+        toast.success('Sucos created successfully!');
-    } else {
+      } else {
-      toast.error('Failed Create Sucos');
+        toast.error('Failed to create Sucos Please try again.');
-      setAlert({ show: true, message: response?.message });
+        setAlert({ show: true, message: 'Failed to create Sucos Please try again.' });
-    }
+      }
-  }, []);
+    },
+    [formField]
+  );
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -76,7 +94,7 @@ const AddDialog = () => {
     if (showAddDialog) {
       setFormField({
         ...formField,
-        created_by: parsedUser.username,
+        created_by: parsedUser?.username,
         created_at: formattedTime
       });
     }
@@ -88,9 +106,30 @@ const AddDialog = () => {
     }
   }, [showAddDialog]);
 
+  useEffect(() => {
+    const fetchPostoAdms = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/postoadms/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+        console.log('ini data posto :', response?.data);
+        setPostoadms(response?.data.list || []);
+      } catch (error) {
+        console.log('Error fetching posto', error);
+      }
+    };
+
+    fetchPostoAdms([{ 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">
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5">
         <DialogHeader>
           <DialogTitle>Sucos - Create</DialogTitle>
           <DialogDescription></DialogDescription>
@@ -124,7 +163,40 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Posto Adm ID<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {posto_adms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                            ?.PostoAdms_name || 'Select Posto Administrativo'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Posto Adms..." />
+                          <CommandList>
+                            <CommandEmpty>No Posto Adms Found.</CommandEmpty>
+                            <CommandGroup>
+                              {posto_adms.map((posto) => (
+                                <CommandItem
+                                  key={posto.PostoAdms_id}
+                                  value={posto.PostoAdms_name}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      posto_adm_id: posto.PostoAdms_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {posto.PostoAdms_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                    {/* <Input
                       className="input"
                       type="number"
                       min={0}
@@ -133,7 +205,7 @@ const AddDialog = () => {
                         const value = parseInt(e.target.value, 10);
                         setFormField({ ...formField, posto_adm_id: isNaN(value) ? 0 : value });
                       }}
-                    />
+                    /> */}
                   </div>
                 </div>
 

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

@@ -2,7 +2,7 @@ import { Alert, useDataGrid } from '@/components';
 import { useManageSucosContext } from '../hooks/useManageSucosContext';
 import { useCallApi } from '@/hooks';
 import { getAuth } from '@/auth';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import {
@@ -15,21 +15,40 @@ 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 PostoAdmsProps {
+  PostoAdms_id: number; // Ubah ke PostoAdms_id
+  PostoAdms_name: string; // Ubah ke PostoAdms_name
+}
 
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedSucos } = useManageSucosContext();
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedSucos, sucos } = useManageSucosContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [open, setOpen] = useState(false);
+  const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
+
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
+
   const initialState = {
     name: '',
-    posto_adm_id: 0,
+    posto_adm_id: 0, // Pastikan ini sesuai dengan PostoAdms_id
     updated_by: '',
     updated_at: ''
   };
@@ -65,6 +84,42 @@ const EditDialog = () => {
     [selectedSucos, formField]
   );
 
+  const doFetchPostoAdms = useCallback(async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/postoadms/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      setPostoadms(response?.data.list);
+      console.log('Data Posto Adms:', response?.data.list); // Log data postoadms
+    } catch (error) {
+      console.log('Error fetching postoadms', error);
+    }
+  }, []);
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
+    console.log('Data Sucos:', response?.data); // Log data sucos
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        posto_adm_id: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: ''
+      }));
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -73,21 +128,41 @@ const EditDialog = () => {
       return;
     }
 
+    console.log('Form Field before update:', formField); // Log formField sebelum update
     doUpdateSucos(e);
-    console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
     if (showEditDialog) {
+      resetForm();
+      console.log('Edit Dialog Opened'); // Log ketika dialog dibuka
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedSucos) {
+      doFetchData(selectedSucos);
+      console.log('Selected Sucos ID:', selectedSucos); // Log selectedSucos ID
+    }
+  }, [selectedSucos]);
+
+  useEffect(() => {
+    if (selectedSucos) {
       setFormField({
         ...formField,
-        updated_by: parsedUser.username,
+        updated_by: parsedUser?.username,
         updated_at: formattedTime
       });
+      console.log('Form Field after update:', formField); // Log formField setelah update
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    doFetchPostoAdms([{ id: 'name', desc: false }]);
+  }, []);
+
+  console.log(selectedSucos);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -122,23 +197,49 @@ 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">
-                      Posto Adm ID
+                      Posto Administrativo 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}
+                          {postoadms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
-                      value={formField.posto_adm_id === 0 ? '' : formField.posto_adm_id}
+                            ?.PostoAdms_name || 'Select Posto Adms'}
-                      onChange={(e) => {
+                        </button>
-                        const value = parseInt(e.target.value, 10);
+                      </PopoverTrigger>
-                        setFormField({ ...formField, posto_adm_id: isNaN(value) ? 0 : value });
+                      <PopoverContent className="w-[400px] p-0">
-                      }}
+                        <Command>
-                    />
+                          <CommandInput placeholder="Search Posto Adms..." />
+                          <CommandList>
+                            <CommandEmpty>No Posto Adms Found.</CommandEmpty>
+                            <CommandGroup>
+                              {postoadms.map((posto) => (
+                                <CommandItem
+                                  key={posto.PostoAdms_id}
+                                  value={posto.PostoAdms_name}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      posto_adm_id: posto.PostoAdms_id // Gunakan PostoAdms_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {posto.PostoAdms_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/sucos/blocks/ListToolbar.tsx

@@ -1,6 +1,6 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
-import { useManageSucosContext } from '../hooks/useManageSucosContext';
 import { Button } from '@/components/ui/button';
+import { useManageSucosContext } from '../hooks/useManageSucosContext';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
@@ -16,7 +16,7 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Sucos"
-                value={(table.getColumn('sucos_name')?.getFilterValue() as string) ?? ''}
+                value={table.getColumn(`id`)?.getFilterValue() as string}
                 onChange={(event) =>
                   table.getColumn('sucos_name')?.setFilterValue(event.target.value)
                 }
@@ -38,7 +38,7 @@ const ListToolbar = () => {
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
-              Search Sucos
+              Search Aldeias
             </Button> */}
           </div>
           <div className="flex gap-3 items-center">

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

@@ -0,0 +1,177 @@
+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

@@ -5,10 +5,13 @@ import { useCallApi } from '@/hooks';
 import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
+import { useNavigate } from 'react-router';
+import axios from 'axios';
 
 interface SucosProps {
-  id: number;
+  sucos_id: number;
-  name: string;
+  sucos_name: string;
+  posto_name: string;
 }
 
 interface ContextProps {
@@ -34,15 +37,15 @@ interface ContextProps {
 const initialProps: ContextProps = {
   sucos: [],
   showSearchDialog: false,
-  handleSearchDialog: () => {},
+  handleSearchDialog: (show: boolean) => {},
   showEditDialog: false,
-  handleEditDialog: () => {},
+  handleEditDialog: (show: boolean, selected_sucos: string | null) => {},
   showAddDialog: false,
-  handleAddDialog: () => {},
+  handleAddDialog: (show: boolean) => {},
   showDeleteDialog: false,
-  handleDeleteDialog: () => {},
+  handleDeleteDialog: (show: boolean, selected_sucos: string | null) => {},
   selectedSucos: null,
-  getSucosLists: async () => undefined
+  getSucosLists: async () => ({ data: [], totalCount: 0 })
 };
 
 const ManageSucosContext = createContext<ContextProps>(initialProps);
@@ -56,6 +59,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [selectedSucos, setSelectedSucos] = useState<string | null>(null);
   const { GetData } = useCallApi();
+  const navigate = useNavigate();
 
   const handleSearchDialog = useCallback((show: boolean) => {
     setShowSearchDialog(show);
@@ -75,10 +79,14 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
     setShowDeleteDialog(show);
   }, []);
 
+  const handleNavigate = (path: string) => {
+    const url = navigate(`${API_URL}/sucos/aldeias/${path}`);
+  };
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.sucos_id,
+        accessorKey: 'sucos_id',
         id: 'id',
         header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
         enableSorting: true,
@@ -118,13 +126,13 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
+                onClick={() => handleEditDialog(true, row.sucos_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.sucos_id)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -145,16 +153,15 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
       filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL}/sucos/list`, {
-        limit,
+        limit: limit,
         page: page + 1,
         with_deleted: true,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log('Sucos List Response:', response?.data);
-      setSucos(response?.data.list);
+      setSucos(response?.data.list || []); // Pastikan default value adalah array kosong
-      // console.log(sucos);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fetching Sucos', error);
@@ -181,7 +188,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
 
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 25 }}
+        pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}

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

@@ -4,7 +4,8 @@ import { ManageSucosContext } from './ManageSucosContext';
 const useManageSucosContext = () => {
   const context = useContext(ManageSucosContext);
 
-  if (!context) throw new Error('useManageSucosContext must be used within AuthProvider');
+  if (!context)
+    throw new Error('useManageSucosContext must be used within ManageSucosContextProvider');
 
   return context;
 };

src/pages/members/kyc/Kyc.tsx

@@ -11,6 +11,7 @@ import axios from 'axios';
 import { toast } from 'sonner';
 const BASE_URL = apiConfig.service_customer;
 import CustomerDialog from '../manage-members/CustomerDetailModal';
+import { Breadcrumbs, Link } from '@mui/material';
 
 export interface IDataGridContextProps<TData extends object> {
   props: TDataGridProps<TData>;
@@ -42,7 +43,7 @@ const Kyc = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
-    fetchGroups()
+    fetchGroups();
   }, []);
 
   async function fetchGroups() {
@@ -54,37 +55,37 @@ const Kyc = () => {
           with_deleted: false,
           order_field: 'fullname',
           order_direction: 'ASC',
-          type: "kyc"
+          type: 'kyc'
         }
       });
-      let temp = 1
+      let temp = 1;
       let resMembers = groups.data.data.list.map((el: any) => {
-        el.no = temp++
+        el.no = temp++;
-        el.name = el.fullname
+        el.name = el.fullname;
-        return el
+        return el;
-      })
+      });
-      setMembers(resMembers)
+      setMembers(resMembers);
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
       console.log(error);
     }
   }
 
   const handleUpdate = (data: any) => {
-    setMember(data)
+    setMember(data);
-    setIsDialogOpen(true)
+    setIsDialogOpen(true);
-  }
+  };
 
   async function handleSubmit(data: any) {
-    setDialogType('update')
+    setDialogType('update');
-    setMember(data)
+    setMember(data);
-    setDialogOpen(true)
+    setDialogOpen(true);
   }
 
   function handleReject(data: any) {
-    setDialogType('reject')
+    setDialogType('reject');
-    setMember(data)
+    setMember(data);
-    setDialogOpen(true)
+    setDialogOpen(true);
   }
 
   const handleYes = async () => {
@@ -92,7 +93,7 @@ const Kyc = () => {
     const updateData: any = member;
     const customerId = member.id;
     const description = member.description;
-    updateData.updated_by = userLogin.data ? userLogin.data.id : ''
+    updateData.updated_by = userLogin.data ? userLogin.data.id : '';
     let today = new Date();
     updateData.updated_at = today.toString();
     delete updateData.id;
@@ -117,30 +118,31 @@ const Kyc = () => {
     delete updateData.group_deleted_at;
     try {
       if (dialogType === 'reject') {
-        await axios.post(`${BASE_URL}/customer/reject`, {customerid: customerId})
+        await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId });
       }
       if (dialogType === 'update') {
-        await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+        await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData);
-        if (updateData.isneedapproval == 1) await axios.post(`${BASE_URL}/customer/approve`, {
+        if (updateData.isneedapproval == 1)
-          customerid: customerId,
+          await axios.post(`${BASE_URL}/customer/approve`, {
-          description: description
+            customerid: customerId,
-        })
+            description: description
+          });
       }
       await fetchGroups();
-      setDialogOpen(false)
+      setDialogOpen(false);
-      setIsDialogOpen(false)
+      setIsDialogOpen(false);
       toast.success('Success Update Kyc Member');
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
-      setDialogOpen(false)
+      setDialogOpen(false);
-      setIsDialogOpen(false)
+      setIsDialogOpen(false);
-      toast.error(error.message)
+      toast.error(error.message);
     }
-  }
+  };
 
   return (
     <div>
-      <div className="container mx-auto py-5">
+      <div className="container mx-auto">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -149,10 +151,30 @@ const Kyc = () => {
           onYes={handleYes}
           onNo={() => setDialogOpen(false)}
         />
-        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleReject={handleReject}
+        <CustomerDialog
-        handleSubmit={handleSubmit} initialData={member} viewStats={true} page={"kyc"}/>
+          open={isDialogOpen}
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-7">Manage Member KYC</h1>
+          handleClose={closeDialog}
-        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+          handleReject={handleReject}
+          handleSubmit={handleSubmit}
+          initialData={member}
+          viewStats={true}
+          page={'kyc'}
+        />
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Member KYC</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 Member KYC</span>
+          </Link>
+        </Breadcrumbs>
+        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null} />
       </div>
     </div>
   );

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

@@ -8,6 +8,7 @@ import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
 import { ScreenLoader } from '@/components';
 import { toast } from 'sonner';
+import { Breadcrumbs, Link } from '@mui/material';
 const BASE_URL = apiConfig.service_customer;
 
 const ManageMembers = () => {
@@ -21,9 +22,9 @@ const ManageMembers = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
-    setLoading(true)
+    setLoading(true);
-    fetchGroups()
+    fetchGroups();
-    setLoading(false)
+    setLoading(false);
   }, []);
 
   async function fetchGroups() {
@@ -34,27 +35,27 @@ const ManageMembers = () => {
           page: 1,
           with_deleted: false,
           order_field: 'fullname',
-          order_direction: 'ASC',
+          order_direction: 'ASC'
         }
       });
-      let temp = 1
+      let temp = 1;
       let resMembers = groups.data.data.list.map((el: any) => {
-        el.no = temp++
+        el.no = temp++;
-        el.name = el.fullname
+        el.name = el.fullname;
-        return el
+        return el;
-      })
+      });
-      setMembers(resMembers)
+      setMembers(resMembers);
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
       console.log(error);
     }
   }
 
   const handleUpdate = (data: any) => {
     setDialogType('update');
-    setMember(data)
+    setMember(data);
-    setIsDialogOpen(true)
+    setIsDialogOpen(true);
-  }
+  };
 
   function createMember() {
     setDialogType('create');
@@ -63,15 +64,15 @@ const ManageMembers = () => {
   }
 
   async function handleSubmit(data: any) {
-    setMember(data)
+    setMember(data);
-    setDialogOpen(true)
+    setDialogOpen(true);
   }
 
   const handleYes = async () => {
     const userLogin: any = await getUser();
     const updateData: any = member;
     const customerId = member.id;
-    updateData.updated_by = userLogin.data ? userLogin.data.id : ''
+    updateData.updated_by = userLogin.data ? userLogin.data.id : '';
     let today = new Date();
     updateData.updated_at = today.toString();
     delete updateData.id;
@@ -95,36 +96,61 @@ const ManageMembers = () => {
     delete updateData.group_deleted_by;
     delete updateData.group_deleted_at;
     try {
-      if (dialogType === 'update') await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData)
+      if (dialogType === 'update')
+        await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData);
       // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
       await fetchGroups();
-      setDialogOpen(false)
+      setDialogOpen(false);
-      setIsDialogOpen(false)
+      setIsDialogOpen(false);
       toast.success('Success Update Member');
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
-      setDialogOpen(false)
+      setDialogOpen(false);
-      setIsDialogOpen(false)
+      setIsDialogOpen(false);
-      toast.error(error.message)
+      toast.error(error.message);
     }
-  }
+  };
 
-  if (loading) return (<ScreenLoader/>)
+  if (loading) return <ScreenLoader />;
 
   return (
     <div>
       <div className="container mx-auto p-5">
-      <ConfirmDialog
+        <ConfirmDialog
-        open={dialogOpen}
+          open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
+          onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
+          title="Confirm Action"
-        content={`Are you sure you want to ${dialogType}?`}
+          content={`Are you sure you want to ${dialogType}?`}
-        onYes={handleYes}
+          onYes={handleYes}
-        onNo={() => setDialogOpen(false)}
+          onNo={() => setDialogOpen(false)}
-      />
+        />
-        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member}/>
+        <CustomerDialog
-        <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
+          open={isDialogOpen}
-        <DataTable data={members} createData={createMember} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+          handleClose={closeDialog}
+          handleSubmit={handleSubmit}
+          initialData={member}
+        />
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">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>
+        <DataTable
+          data={members}
+          createData={createMember}
+          columns={columns}
+          onUpdate={handleUpdate}
+          onDelete={null}
+        />
       </div>
     </div>
   );

src/pages/menu/manage-menu/ManageMenu.tsx

@@ -3,12 +3,26 @@ import { ManageMenusContextProvider } from './hooks/ManageMenusContext';
 import AddDialog from './blocks/AddDIalog';
 import EditDialog from './blocks/EditDialog';
 import DeleteDialog from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const ManageMenu = () => {
   return (
     <ManageMenusContextProvider>
       <Container>
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Menus</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">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Menus</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx

@@ -175,7 +175,8 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
 
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
     if (parent.link === '/') {
-      if (!parents.find((el: any) => el.id === parent.id)) setParents((el: any) => [...el, { id: parent.id, name: parent.name }]) // GET PARENTS
+      if (!parents.find((el: any) => el.id === parent.id))
+        setParents((el: any) => [...el, { id: parent.id, name: parent.name }]); // GET PARENTS
     }
     if (!parent.children || parent.children.length === 0) {
       return []; // Jika tidak ada children, kembalikan array kosong
@@ -220,8 +221,9 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
 
       const total_count = transformedData.length;
 
+      console.log(response.data);
       setMenus(transformedData);
-      return { data: transformedData, totalCount: total_count };
+      return { data: transformedData, totalCount: response.data.total_count };
     } catch (error) {
       console.error('Error fetching Menus', error);
       return { data: [], totalCount: 0 };

src/pages/notification/ManageNotification.tsx

@@ -1,11 +1,28 @@
 import { Container, DataGridInner } from '@/components';
 import { ManageNotifContextProvider } from './hooks/ManageNotificationContext';
 import AddDialog from './blocks/AddDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const ManageNotification = () => {
   return (
     <ManageNotifContextProvider>
       <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
+          Manage Notifications
+        </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">Notification</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Notification</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

src/pages/notification/hooks/ManageNotificationContext.tsx

@@ -108,9 +108,6 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
 
   return (
     <div>
-      <div className="container mx-auto py-5">
-        <h1>Manage Notifications</h1>
-      </div>
       <ManageNotifContext.Provider
         value={{
           handleAddDialog,

src/pages/settings/user/log-activity/LogActivityPage.tsx

@@ -1,10 +1,29 @@
 import { Container, DataGridInner } from '@/components';
 import { LogActivityContextProvider } from './hooks';
+import { Breadcrumbs, Link } from '@mui/material';
 
 export default function LogActivityPage() {
   return (
     <LogActivityContextProvider>
       <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Log Activity</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">Settings</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">User Management</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Log Activity</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

src/pages/settings/user/manage-position/ManagePositionPage.tsx

@@ -3,11 +3,30 @@ import { EditDialog } from './blocks';
 import { ManagePositionContextProvider } from './hooks';
 import { AddDialog } from './blocks/AddDialog';
 import { DeleteDialog } from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 export default function ManagePositionPage() {
   return (
     <ManagePositionContextProvider>
       <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Positions</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">Settings</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">User Management</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Position</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -85,11 +85,16 @@ const ManagePositionContextProvider = ({ children }: { children: React.ReactNode
         enableSorting: false,
         enableHiding: false,
         cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
           return (
-            <EnforceSwitch
+            <span
-              enforce={row.original.status == 'Y' ? true : false}
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
-              onChange={() => {}}
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
-            />
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
           );
         },
         meta: {

src/pages/settings/user/manage-user/ManageUserPage.tsx

@@ -3,11 +3,30 @@ import { EditDialog } from './blocks';
 import { ManageUserContextProvider } from './hooks';
 import { AddDialog } from './blocks/AddDialog';
 import { DeleteDialog } from './blocks/DeleteDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 export default function ManageUserPage() {
   return (
     <ManageUserContextProvider>
       <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</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">Settings</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">User Management</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage User</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

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

@@ -127,11 +127,16 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         enableSorting: false,
         enableHiding: false,
         cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
           return (
-            <EnforceSwitch
+            <span
-              enforce={row.original.status == 'Y' ? true : false}
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
-              onChange={() => {}}
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
-            />
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
           );
         },
         meta: {

src/pages/transfer/TransferType.tsx

@@ -4,11 +4,26 @@ import {
   ManageTransferTypeContextProvider
 } from './hooks/ManageTransferTypeContext';
 import AddDialog from './blocks/AddDialog';
+import { Breadcrumbs, Link } from '@mui/material';
 
 const TransferType = () => {
   return (
     <ManageTransferTypeContextProvider>
       <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Access Type</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">Transfer Type</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Access Type</span>
+          </Link>
+        </Breadcrumbs>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>

src/pages/transfer/hooks/ManageTransferTypeContext.tsx

@@ -145,9 +145,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 
   return (
     <div>
-      <div className="container mx-auto py-5">
-        <h1>Manage Access Type</h1>
-      </div>
       <ManageTransferTypeContext.Provider
         value={{
           showEditDialog,