From 5e8109cceab3bb62b76ed06bb79d24186b969da4 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Wed, 19 Mar 2025 13:04:16 +0700
Subject: [PATCH] enter login & navigate all menu

---
 src/auth/pages/jwt/Login.tsx                  |   8 ++
 .../account/manage-account/ManageAccount.tsx  |  18 +++-
 .../manage-currency/ManageCurrency.tsx        |   4 +-
 src/pages/groups/ManageGroups.tsx             |  21 +++-
 src/pages/master/municipios/Municipios.tsx    |   2 +-
 .../master/postoadms/PostoAdmsMaster.tsx      |   2 +-
 src/pages/master/products/ProductsMaster.tsx  |   2 +-
 .../master/profession/ProfessionMaster.tsx    |   2 +-
 src/pages/master/provider/ProviderMaster.tsx  |   2 +-
 src/pages/members/kyc/Kyc.tsx                 |  96 ++++++++++-------
 .../members/manage-members/ManageMembers.tsx  | 102 +++++++++++-------
 src/pages/notification/ManageNotification.tsx |  17 +++
 .../hooks/ManageNotificationContext.tsx       |   3 -
 .../user/log-activity/LogActivityPage.tsx     |  19 ++++
 .../manage-position/ManagePositionPage.tsx    |  19 ++++
 .../user/manage-user/ManageUserPage.tsx       |  19 ++++
 src/pages/transfer/TransferType.tsx           |  15 +++
 .../hooks/ManageTransferTypeContext.tsx       |   3 -
 18 files changed, 261 insertions(+), 93 deletions(-)

diff --git a/src/auth/pages/jwt/Login.tsx b/src/auth/pages/jwt/Login.tsx
index a7824cc..bea522e 100644
--- a/src/auth/pages/jwt/Login.tsx
+++ b/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 })} />
diff --git a/src/pages/account/manage-account/ManageAccount.tsx b/src/pages/account/manage-account/ManageAccount.tsx
index 20dcf35..f6398dc 100644
--- a/src/pages/account/manage-account/ManageAccount.tsx
+++ b/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;
 
@@ -74,8 +75,21 @@ const ManageAccount = () => {
 
   return (
     <div>
-      <div className="container mx-auto">
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Account</h1>
+      <div className="container mx-auto p-5">
+        <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}
diff --git a/src/pages/account/manage-currency/ManageCurrency.tsx b/src/pages/account/manage-currency/ManageCurrency.tsx
index 30cbf70..77b5b0d 100644
--- a/src/pages/account/manage-currency/ManageCurrency.tsx
+++ b/src/pages/account/manage-currency/ManageCurrency.tsx
@@ -1,12 +1,12 @@
 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>
-      <div className="container mx-auto">
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Currency</h1>
+      <Container>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>
diff --git a/src/pages/groups/ManageGroups.tsx b/src/pages/groups/ManageGroups.tsx
index ef73fd8..3b5a832 100644
--- a/src/pages/groups/ManageGroups.tsx
+++ b/src/pages/groups/ManageGroups.tsx
@@ -13,7 +13,9 @@ import {
   DialogTitle,
   Typography,
   Button,
-  Box
+  Box,
+  Breadcrumbs,
+  Link
 } from '@mui/material';
 import { useState, useEffect } from 'react';
 // import IconButton from '@mui/material/IconButton';
@@ -146,7 +148,7 @@ const ManageGroups = () => {
 
   return (
     <div>
-      <div className="container mx-auto">
+      <div className="container mx-auto pt-2">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -158,7 +160,20 @@ const ManageGroups = () => {
           onYes={handleYes}
           onNo={() => setDialogOpen(false)}
         />
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Groups</h1>
+        <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}
diff --git a/src/pages/master/municipios/Municipios.tsx b/src/pages/master/municipios/Municipios.tsx
index fd0f24c..388b269 100644
--- a/src/pages/master/municipios/Municipios.tsx
+++ b/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>
diff --git a/src/pages/master/postoadms/PostoAdmsMaster.tsx b/src/pages/master/postoadms/PostoAdmsMaster.tsx
index 886c856..163b97f 100644
--- a/src/pages/master/postoadms/PostoAdmsMaster.tsx
+++ b/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 }}>
diff --git a/src/pages/master/products/ProductsMaster.tsx b/src/pages/master/products/ProductsMaster.tsx
index a75f02c..b0b9792 100644
--- a/src/pages/master/products/ProductsMaster.tsx
+++ b/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>
diff --git a/src/pages/master/profession/ProfessionMaster.tsx b/src/pages/master/profession/ProfessionMaster.tsx
index 2507d2d..07583f5 100644
--- a/src/pages/master/profession/ProfessionMaster.tsx
+++ b/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>
diff --git a/src/pages/master/provider/ProviderMaster.tsx b/src/pages/master/provider/ProviderMaster.tsx
index 03ed47c..dce73d1 100644
--- a/src/pages/master/provider/ProviderMaster.tsx
+++ b/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>
diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx
index a458350..e2cf0a7 100644
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/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.name = el.fullname
-        return el
-      })
-      setMembers(resMembers)
+        el.no = temp++;
+        el.name = el.fullname;
+        return el;
+      });
+      setMembers(resMembers);
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
       console.log(error);
     }
   }
-  
+
   const handleUpdate = (data: any) => {
-    setMember(data)
-    setIsDialogOpen(true)
-  }
+    setMember(data);
+    setIsDialogOpen(true);
+  };
 
   async function handleSubmit(data: any) {
-    setDialogType('update')
-    setMember(data)
-    setDialogOpen(true)
+    setDialogType('update');
+    setMember(data);
+    setDialogOpen(true);
   }
 
   function handleReject(data: any) {
-    setDialogType('reject')
-    setMember(data)
-    setDialogOpen(true)
+    setDialogType('reject');
+    setMember(data);
+    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)
-        if (updateData.isneedapproval == 1) await axios.post(`${BASE_URL}/customer/approve`, {
-          customerid: customerId,
-          description: description
-        })
+        await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData);
+        if (updateData.isneedapproval == 1)
+          await axios.post(`${BASE_URL}/customer/approve`, {
+            customerid: customerId,
+            description: description
+          });
       }
       await fetchGroups();
-      setDialogOpen(false)
-      setIsDialogOpen(false)
+      setDialogOpen(false);
+      setIsDialogOpen(false);
       toast.success('Success Update Kyc Member');
     } catch (error: any) {
-      alert(error.message)
-      setDialogOpen(false)
-      setIsDialogOpen(false)
-      toast.error(error.message)
+      alert(error.message);
+      setDialogOpen(false);
+      setIsDialogOpen(false);
+      toast.error(error.message);
     }
-  }
+  };
 
   return (
     <div>
@@ -149,10 +151,30 @@ const Kyc = () => {
           onYes={handleYes}
           onNo={() => setDialogOpen(false)}
         />
-        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleReject={handleReject}
-        handleSubmit={handleSubmit} initialData={member} viewStats={true} page={"kyc"}/>
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Member KYC</h1>
-        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+        <CustomerDialog
+          open={isDialogOpen}
+          handleClose={closeDialog}
+          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>
   );
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 7370a19..e3ede28 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/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)
-    fetchGroups()
-    setLoading(false)
+    setLoading(true);
+    fetchGroups();
+    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.name = el.fullname
-        return el
-      })
-      setMembers(resMembers)
+        el.no = temp++;
+        el.name = el.fullname;
+        return el;
+      });
+      setMembers(resMembers);
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
       console.log(error);
     }
   }
 
   const handleUpdate = (data: any) => {
     setDialogType('update');
-    setMember(data)
-    setIsDialogOpen(true)
-  }
+    setMember(data);
+    setIsDialogOpen(true);
+  };
 
   function createMember() {
     setDialogType('create');
@@ -63,15 +64,15 @@ const ManageMembers = () => {
   }
 
   async function handleSubmit(data: any) {
-    setMember(data)
-    setDialogOpen(true)
+    setMember(data);
+    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)
-      setIsDialogOpen(false)
+      setDialogOpen(false);
+      setIsDialogOpen(false);
       toast.success('Success Update Member');
     } catch (error: any) {
-      alert(error.message)
-      setDialogOpen(false)
-      setIsDialogOpen(false)
-      toast.error(error.message)
+      alert(error.message);
+      setDialogOpen(false);
+      setIsDialogOpen(false);
+      toast.error(error.message);
     }
-  }
+  };
 
-  if (loading) return (<ScreenLoader/>)
+  if (loading) return <ScreenLoader />;
 
   return (
     <div>
-      <div className="container mx-auto">
-      <ConfirmDialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
-        content={`Are you sure you want to ${dialogType}?`}
-        onYes={handleYes}
-        onNo={() => setDialogOpen(false)}
-      />
-        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member}/>
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Members</h1>
-        <DataTable data={members} createData={createMember} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+      <div className="container mx-auto p-5">
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={`Are you sure you want to ${dialogType}?`}
+          onYes={handleYes}
+          onNo={() => setDialogOpen(false)}
+        />
+        <CustomerDialog
+          open={isDialogOpen}
+          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>
   );
diff --git a/src/pages/notification/ManageNotification.tsx b/src/pages/notification/ManageNotification.tsx
index 3f26388..088627b 100644
--- a/src/pages/notification/ManageNotification.tsx
+++ b/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>
diff --git a/src/pages/notification/hooks/ManageNotificationContext.tsx b/src/pages/notification/hooks/ManageNotificationContext.tsx
index 238922f..f0ece52 100644
--- a/src/pages/notification/hooks/ManageNotificationContext.tsx
+++ b/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,
diff --git a/src/pages/settings/user/log-activity/LogActivityPage.tsx b/src/pages/settings/user/log-activity/LogActivityPage.tsx
index 98d6831..c9a9525 100644
--- a/src/pages/settings/user/log-activity/LogActivityPage.tsx
+++ b/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>
diff --git a/src/pages/settings/user/manage-position/ManagePositionPage.tsx b/src/pages/settings/user/manage-position/ManagePositionPage.tsx
index d151f44..6ddcd6d 100644
--- a/src/pages/settings/user/manage-position/ManagePositionPage.tsx
+++ b/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>
diff --git a/src/pages/settings/user/manage-user/ManageUserPage.tsx b/src/pages/settings/user/manage-user/ManageUserPage.tsx
index 1d9703e..5f318b0 100644
--- a/src/pages/settings/user/manage-user/ManageUserPage.tsx
+++ b/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>
diff --git a/src/pages/transfer/TransferType.tsx b/src/pages/transfer/TransferType.tsx
index 2e5d03e..031c462 100644
--- a/src/pages/transfer/TransferType.tsx
+++ b/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>
diff --git a/src/pages/transfer/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/hooks/ManageTransferTypeContext.tsx
index 5a3d5d3..f41c7fd 100644
--- a/src/pages/transfer/hooks/ManageTransferTypeContext.tsx
+++ b/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,