From 760e4eafce87b8954d6939c8588727495b4c16b7 Mon Sep 17 00:00:00 2001
From: Lixian Zhou <charlie32690@gmail.com>
Date: Tue, 10 Mar 2026 15:21:00 -0400
Subject: [PATCH] commit

---
 client/src/App.js                             |   2 +
 client/src/components/admin/Permission.js     | 102 ++++++++++++++++++
 .../components/customers/UpdateCustomer.js    |   2 +-
 .../src/components/customers/ViewCustomer.js  |   2 +-
 .../components/events/EventsMultipleList.js   |   3 +-
 client/src/components/home/menu.js            |  20 ++++
 6 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/admin/Permission.js

diff --git a/client/src/App.js b/client/src/App.js
index 3b5cb73..3255440 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -25,6 +25,7 @@ import ViewEmployee from "./components/employees/ViewEmployee";
 import CreateRoute from "./components/trans-routes/CreateRoute";
 import Admin from './components/admin/Admin';
 import CustomerReport from "./components/admin/CustomerReport";
+import Permission from "./components/admin/Permission";
 import Login from "./components/login/Login";
 import RoutesHistory from "./components/trans-routes/RoutesHistory";
 import RouteTemplatesList from "./components/trans-routes/RouteTemplatesList";
@@ -225,6 +226,7 @@ function App() {
               <Route path="/admin" element={<Admin />}>
                 <Route path="" element={<Navigate replace to="customer-report" />} />
                 <Route path="customer-report" element={<CustomerReport/>} />
+                <Route path="permission" element={<Permission/>} />
               </Route>
 
               <Route path="/dashboard/dashboard" element={<Dashboard/>} />
diff --git a/client/src/components/admin/Permission.js b/client/src/components/admin/Permission.js
new file mode 100644
index 0000000..ee514a8
--- /dev/null
+++ b/client/src/components/admin/Permission.js
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Breadcrumb } from "react-bootstrap";
+import { AuthService, EmployeeService } from "../../services";
+
+const Permission = () => {
+  const navigate = useNavigate();
+  const [employees, setEmployees] = useState([]);
+  const [keyword, setKeyword] = useState("");
+  const [showInactive, setShowInactive] = useState(true);
+
+  useEffect(() => {
+    if (!AuthService.canViewEmployees() && !AuthService.canAddOrEditEmployees()) {
+      window.alert("You haven't login yet OR this user does not have access to this page. Please change an admin account to login.");
+      AuthService.logout();
+      navigate("/login");
+      return;
+    }
+
+    EmployeeService.getAllEmployees().then((data) => {
+      setEmployees(data?.data || []);
+    });
+  }, []);
+
+  const goToEdit = (id) => {
+    navigate(`/employees/edit/${id}`);
+  };
+
+  const displayedEmployees = (employees || [])
+    .filter((item) => (showInactive ? true : item?.status === "active"))
+    .filter((item) => (item?.name || "").toLowerCase().includes(keyword.toLowerCase()));
+
+  return (
+    <>
+      <div className="list row mb-4">
+        <Breadcrumb>
+          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+          <Breadcrumb.Item active>Permission</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className="col-md-12 text-primary">
+          <h4>Permission</h4>
+        </div>
+      </div>
+
+      <div className="app-main-content-list-container list-page">
+        <div className="app-main-content-list-func-container">
+          <div className="list row mb-4">
+            <div className="col-md-12">
+              <div className="mb-3">
+                Filter By Name:{" "}
+                <input type="text" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} />
+              </div>
+              <div className="mb-3">
+                <input
+                  className="me-2"
+                  type="checkbox"
+                  checked={showInactive === true}
+                  onChange={() => setShowInactive(!showInactive)}
+                />
+                Show Inactive Employees
+              </div>
+              <table className="personnel-info-table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Preferred Name</th>
+                    <th>Username</th>
+                    <th>Status</th>
+                    <th>Roles</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {displayedEmployees.map((employee) => (
+                    <tr key={employee?.id}>
+                      <td>{employee?.name}</td>
+                      <td>{employee?.name_cn}</td>
+                      <td>{employee?.username}</td>
+                      <td>{employee?.status}</td>
+                      <td>{employee?.roles?.join(", ")}</td>
+                      <td>
+                        <button
+                          className="btn btn-primary btn-sm me-2"
+                          onClick={() => goToEdit(employee?.id)}
+                          disabled={!AuthService.canAddOrEditEmployees()}
+                        >
+                          Edit
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Permission;
diff --git a/client/src/components/customers/UpdateCustomer.js b/client/src/components/customers/UpdateCustomer.js
index 9c1f59b..1d3bce7 100644
--- a/client/src/components/customers/UpdateCustomer.js
+++ b/client/src/components/customers/UpdateCustomer.js
@@ -1326,7 +1326,7 @@ const UpdateCustomer = () => {
               )}
 
               <h6 className="text-primary">Additional Information</h6>
-              <div className="app-main-content-fields-section base-line">
+              <div className="app-main-content-fields-section base-line" style={{ marginBottom: '24px' }}>
                 <div className="me-4">
                   <div className="field-label">Profile Picture</div>
                   <label className="custom-file-upload">
diff --git a/client/src/components/customers/ViewCustomer.js b/client/src/components/customers/ViewCustomer.js
index 234250c..324b120 100644
--- a/client/src/components/customers/ViewCustomer.js
+++ b/client/src/components/customers/ViewCustomer.js
@@ -532,7 +532,7 @@ const ViewCustomer = () => {
               )}
 
               <h6 className="text-primary">Additional Information</h6>
-              <div className="app-main-content-fields-section base-line">
+              <div className="app-main-content-fields-section base-line" style={{ marginBottom: '24px' }}>
                 <div className="field-body">
                   <div className="field-label">Profile Picture</div>
                   {currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
diff --git a/client/src/components/events/EventsMultipleList.js b/client/src/components/events/EventsMultipleList.js
index 4321adb..4201a18 100644
--- a/client/src/components/events/EventsMultipleList.js
+++ b/client/src/components/events/EventsMultipleList.js
@@ -520,7 +520,8 @@ const EventsMultipleList = () => {
               id="filter-event-multi-list"
               className="me-2"
               show={showFilterDropdown}
-              onToggle={() => setShowFilterDropdown(!showFilterDropdown)}
+              onToggle={(isOpen) => setShowFilterDropdown(isOpen)}
+              autoClose={false}
             > 
               <Dropdown.Toggle variant="primary">
                 <Filter size={16} className="me-2"></Filter>Filter
diff --git a/client/src/components/home/menu.js b/client/src/components/home/menu.js
index 6dd4733..b16a050 100644
--- a/client/src/components/home/menu.js
+++ b/client/src/components/home/menu.js
@@ -198,6 +198,26 @@ const SideMenu = () => {
 				}
 			]
 		},
+		{
+			name: 'Admin',
+			icon: <Tools color="#777" size={14}/>,
+			collapsed: false,
+			roleFunc: () => AuthService.canViewEmployees() || AuthService.canAddOrEditEmployees(),
+			subNavs: [
+				{
+					name: 'Employees',
+					link: '/employees/list',
+					category: '/employees',
+					roleFunc: () => AuthService.canViewEmployees() || AuthService.canAddOrEditEmployees()
+				},
+				{
+					name: 'Permission',
+					link: '/admin/permission',
+					category: '/admin/permission',
+					roleFunc: () => AuthService.canViewEmployees() || AuthService.canAddOrEditEmployees()
+				}
+			]
+		},
 		{
 			name: 'Lobby',
 			icon: <Tools color="#777" size={14}/>,