enter login & navigate all menu

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/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,27 @@
 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 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">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/municipios/Municipios.tsx

@@ -10,7 +10,7 @@ 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>

src/pages/master/postoadms/PostoAdmsMaster.tsx

@@ -10,7 +10,7 @@ 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 }}>

src/pages/master/products/ProductsMaster.tsx

@@ -9,7 +9,7 @@ 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>

src/pages/master/profession/ProfessionMaster.tsx

@@ -9,7 +9,7 @@ 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>

src/pages/master/provider/ProviderMaster.tsx

@@ -9,7 +9,7 @@ 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>

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,26 +118,27 @@ 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>
@@ -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/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-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/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,