Dev/v1.0 (#1)

Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Co-authored-by: ISMAIL MASSERAN <topaz@ISMAILs-Macbook.local>
Reviewed-on: #1

fe/web/teller-app/src/components/AuthGuard/AuthGuard.jsx

@@ -0,0 +1,37 @@
+import { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { UserContext } from '../../context/UserContext.jsx';
+import { getUserData } from '../../utils/session.js';
+import { ROLES } from '../../constants.js';
+
+const TELLER_ROLES = [
+    ROLES.ROLE_USER,
+    ROLES.ROLE_SUPER_ADMIN,
+    ROLES.ROLE_BRANCH_ADMIN,
+];
+
+export default function AuthGuard({ children }) {
+    const navigate = useNavigate();
+    const { user: contextUser } = useContext(UserContext);
+    const [allowed, setAllowed] = useState(false);
+
+    useEffect(() => {
+        const user = contextUser ?? getUserData();
+        const roles = Array.isArray(user?.roles) ? user.roles : [];
+        const hasAccess = roles.some((role) => TELLER_ROLES.includes(role));
+
+        if (!user || !hasAccess) {
+            setAllowed(false);
+            navigate('/login', { replace: true });
+            return;
+        }
+
+        setAllowed(true);
+    }, [contextUser, navigate]);
+
+    if (!allowed) {
+        return null;
+    }
+
+    return <>{children}</>;
+}

fe/web/teller-app/src/components/Header/Header.css

@@ -15,4 +15,25 @@ header.main-header {
     margin-top: 7px;
     margin-right: auto;
     margin-left: 2%;
+}
+
+.header-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-right: 2%;
+}
+
+.header-email {
+    font-size: 14px;
+    color: #334257;
+}
+
+.header-logout-btn {
+    border: 1px solid #334257;
+    background: white;
+    color: #334257;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
 }

fe/web/teller-app/src/components/Header/Header.jsx

@@ -1,13 +1,34 @@
 import './Header.css';
+import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { UserContext } from '../../context/UserContext.jsx';
+import { clearSession } from '../../utils/session.js';
+import { clearActiveStation } from '../../utils/activeStation.js';
 
 export default function Header() {
     const navigate = useNavigate();
+    const { user, setUser } = useContext(UserContext);
+
+    function handleLogout() {
+        clearSession();
+        clearActiveStation();
+        setUser(null);
+        navigate('/login', { replace: true });
+    }
 
     return (
         <header className="main-header">
-            <h2 className="header-logo" onClick={() => navigate(`/`)}>BBQMS</h2>
+            <h2 className="header-logo" onClick={() => navigate(user ? '/' : '/login')}>
+                MyKOPKB QMS-Teller
+            </h2>
+            {user ? (
+                <div className="header-user">
+                    <span className="header-email">{user.email}</span>
+                    <button type="button" className="header-logout-btn" onClick={handleLogout}>
+                        Logout
+                    </button>
+                </div>
+            ) : null}
         </header>
     );
-}
+}