enter login & navigate all menu

2025-03-19 13:04:16 +07:00
parent 621cae6694
commit 16029e10cd
19 changed files with 348 additions and 131 deletions
--- 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 })} />
--- 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;

@ -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}
--- a/src/pages/account/manage-currency/ManageCurrency.tsx
+++ b/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>
--- a/src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx
+++ b/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,
--- a/src/pages/groups/ManageGroups.tsx
+++ b/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,
-  Dialog, DialogTitle, Typography, Button, Box } from '@mui/material';
+import {
+  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);
@ -31,9 +44,9 @@ const ManageGroups = () => {
  const [pageSize, setPageSize] = useState(10);
  const [dialogType, setDialogType] = useState('');
  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++
-        return el
-      })
-      setDataGroup(resGroups)
+        el.no = temp++;
+        return el;
+      });
+      setDataGroup(resGroups);
    } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
      console.log(error);
    }
  }

  const openDialog = () => setIsDialogOpen(true);
  const closeDialog = () => {
-    setIsDialogOpen(false)
-    setFormData(initGroup)
+    setIsDialogOpen(false);
+    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,
-          "status": formData.status,
-          "created_at": new Date()
-        })
+          name: formData.groupName,
+          status: formData.status,
+          created_at: new Date()
+        });
      } else if (dialogType === 'update') {
        await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
-          "name": formData.groupName,
-          "status": formData.status,
-          "updated_at": new Date()
-        })
+          name: formData.groupName,
+          status: formData.status,
+          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
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
-        content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
-        onYes={handleYes}
-        onNo={() => setDialogOpen(false)}
-      />
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
-        <DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
+        <ConfirmDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          title="Confirm Action"
+          content={
+            `Are you sure you want to ` +
+            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
+          }
+          onYes={handleYes}
+          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}>
-                      <FormControlLabel value="Y" checked={formData.status === 'Y'} control={<Radio />} label="Yes" />
-                      <FormControlLabel value="N" checked={formData.status === 'N'} control={<Radio />} label="No" />
+                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
+                      <FormControlLabel
+                        value="Y"
+                        checked={formData.status === 'Y'}
+                        control={<Radio />}
+                        label="Yes"
+                      />
+                      <FormControlLabel
+                        value="N"
+                        checked={formData.status === 'N'}
+                        control={<Radio />}
+                        label="No"
+                      />
                    </RadioGroup>
                  </FormControl>
                </div>
--- 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>
--- 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 }}>
--- 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>
--- 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>
--- 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>
--- 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 mb-7">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>
  );
--- 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 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">Manage Members</h1>
-        <DataTable data={members} createData={createMember} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
+        <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>
  );
--- 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>
--- 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,
--- 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>
--- 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>
--- 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>
--- 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>
--- 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,