DONE: first init

2026-07-20 16:10:22 +08:00
commit 3189e3a1e3
272 changed files with 48853 additions and 0 deletions
@@ -0,0 +1,62 @@
+import { useContext } from 'react';
+import { Button } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import { lastPathPart } from '../../utils/StringUtils.js';
+import profileImage from '../../../assets/profile-user.png'
+
+import './Header.css';
+import { UserContext } from '../../context/UserContext.jsx';
+
+export default function Header() {
+    const navigate = useNavigate();
+    const { user, setUser } = useContext(UserContext);
+
+    function handleLogout() {
+        localStorage.removeItem('userData');
+        localStorage.removeItem('token');
+        setUser(null);
+        navigate('/');
+    }
+
+    const path = window.location.pathname;
+    const showBackButton = !!user
+        && '/' !== path
+        && '/login' !== path
+        && 'home' !== lastPathPart(window.location.href);
+
+    const goHome = () => {
+        if (user?.tenantCode) {
+            navigate(`/${user.tenantCode}/home`);
+        } else {
+            navigate('/');
+        }
+    };
+
+    return (
+        <>
+            <header className="main-header">
+                <h2 className="header-logo" onClick={ goHome }>BBQMS</h2>
+
+                <div className="header-logout">
+                    { !!user && (
+                        <button className="header-logout-btn" onClick={ handleLogout }>
+                            Logout
+                        </button>
+                    ) }
+                </div>
+
+                <div className="header-profile" onClick={ () => navigate('/profile') }>
+                    <img src={ profileImage } className="header-profile-png" alt="Profile image" />
+                </div>
+            </header>
+            { showBackButton && (
+                <Button variant="secondary"
+                        className="mt-2 px-4"
+                        onClick={ goHome }>
+                    Back
+                </Button>
+            ) }
+        </>
+
+    );
+}