update refresh, add data, navigasi all master

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>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">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/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>
+        <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/postoadms/PostoAdmsMaster.tsx

@@ -4,6 +4,7 @@ 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 (
@@ -12,6 +13,19 @@ const PostoAdmsMaster = () => {
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
           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/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>
+        <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/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>
+        <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/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>
+        <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/sucos/SucosMaster.tsx

@@ -4,15 +4,31 @@ 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>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">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 />

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,40 @@ 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 }]);
+  }, []);
+
   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 +196,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/hooks/ManageSucosContext.tsx

@@ -86,7 +86,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.sucos_id,
+        accessorKey: 'sucos_id',
         id: 'id',
         header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
         enableSorting: true,
@@ -168,52 +168,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
     }
   };
 
-  const getAldeiasBySucos = async (name: string) => {
-    try {
-      const response = await axios.get(`${API_URL}/sucos/aldeias/${name}`);
-      const data = response.data;
-      console.log(data);
-    } catch (error) {
-      console.log(`Error fetching sucos by ${name}`, error);
-    }
-  };
-
-  const createSucos = async (data: Partial<SucosProps>) => {
-    try {
-      await axios.post(`${API_URL}/sucos/create`, data);
-      // getMunicipiosLists(10, 1, false, 'name', 'ASC');
-    } catch (error) {
-      console.error('Error creating municipios', error);
-    }
-  };
-
-  const updateSucos = async (id: number, data: Partial<SucosProps>) => {
-    try {
-      await axios.put(`${API_URL}/sucos/update/${id}`, data);
-      // getSucosLists(10, 1, false, 'name', 'ASC');
-    } catch (error) {
-      console.error('Error updating sucos', error);
-    }
-  };
-
-  const deleteSucos = async (id: number, hardDelete?: boolean) => {
-    try {
-      await axios.delete(`${API_URL}/sucos/delete/${id}/${hardDelete}`);
-      // getSucosLists(10, 1, false, 'name', 'ASC');
-    } catch (error) {
-      console.error('Error deleting sucos', error);
-    }
-  };
-
-  const restoreSucos = async (id: number) => {
-    try {
-      await axios.put(`${API_URL}/sucos/restore/${id}`);
-      // getSucosLists(10, 1, false, 'name', 'ASC');
-    } catch (error) {
-      console.error('Error restoring sucos', error);
-    }
-  };
-
   return (
     <ManageSucosContext.Provider
       value={{
@@ -234,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/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>