From 8940ad1caf1d6442d74444cece2cd1df875b5739 Mon Sep 17 00:00:00 2001
From: lumijiez <59575049+lumijiez@users.noreply.github.com>
Date: Tue, 24 Jun 2025 01:39:33 +0300
Subject: [PATCH] Better app bar, mobile, and role based render
---
webui/src/app/components/ImprinkAppBar.js | 411 +++++++++++++++++++---
1 file changed, 364 insertions(+), 47 deletions(-)
diff --git a/webui/src/app/components/ImprinkAppBar.js b/webui/src/app/components/ImprinkAppBar.js
index 45587fd..5ab6649 100644
--- a/webui/src/app/components/ImprinkAppBar.js
+++ b/webui/src/app/components/ImprinkAppBar.js
@@ -1,66 +1,383 @@
'use client'
-import {AppBar, Button, Toolbar, Typography, Avatar, Box} from "@mui/material";
+import {
+ AppBar,
+ Button,
+ Toolbar,
+ Typography,
+ Avatar,
+ Box,
+ IconButton,
+ Menu,
+ MenuItem,
+ Divider,
+ useMediaQuery,
+ useTheme,
+ Paper
+} from "@mui/material";
+import { useState, useEffect } from "react";
import { useUser } from "@auth0/nextjs-auth0";
+import {
+ Menu as MenuIcon,
+ Home,
+ PhotoLibrary,
+ ShoppingBag,
+ Store,
+ Dashboard,
+ AdminPanelSettings,
+ Api,
+ BugReport
+} from "@mui/icons-material";
import ThemeToggleButton from "@/app/components/theme/ThemeToggleButton";
+import clientApi from "@/lib/clientApi";
export default function ImprinkAppBar() {
const { user, error, isLoading } = useUser();
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [userRoles, setUserRoles] = useState([]);
+ const [rolesLoading, setRolesLoading] = useState(false);
+ const theme = useTheme();
+ const { isDarkMode, toggleTheme } = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
- return (
-
-
-
- Modern App
-
-
+ useEffect(() => {
+ const fetchUserRoles = async () => {
+ if (!user) {
+ setUserRoles([]);
+ return;
+ }
- {isLoading ? (
-
- Loading...
-
- ) : user ? (
-
-
-
- {user.name}
-
+ setRolesLoading(true);
+ try {
+ const response = await clientApi.get('/users/me/roles');
+ const roles = response.data.map(role => role.roleName.toLowerCase());
+ setUserRoles(roles);
+ } catch (error) {
+ console.error('Failed to fetch user roles:', error);
+ setUserRoles([]);
+ } finally {
+ setRolesLoading(false);
+ }
+ };
+
+ fetchUserRoles();
+ }, [user]);
+
+ const isMerchant = userRoles.includes('merchant') || userRoles.includes('admin');
+ const isAdmin = userRoles.includes('admin');
+
+ const handleMenuOpen = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleMenuClose = () => {
+ setAnchorEl(null);
+ };
+
+ // Regular navigation links (excluding admin-specific ones)
+ const navigationLinks = [
+ { label: 'Home', href: '/', icon: , show: true },
+ { label: 'Gallery', href: '/gallery', icon: , show: true },
+ { label: 'Orders', href: '/orders', icon: , show: true },
+ { label: 'Merchant', href: '/merchant', icon: , show: isMerchant },
+ ];
+
+ // Admin-specific links for the separate bar
+ const adminLinks = [
+ { label: 'Dashboard', href: '/dashboard', icon: , show: isMerchant },
+ { label: 'Admin', href: '/admin', icon: , show: isAdmin },
+ { label: 'Swagger', href: '/swagger', icon: , show: isAdmin },
+ { label: 'SEQ', href: '/seq', icon: , show: isAdmin },
+ ];
+
+ const visibleLinks = navigationLinks.filter(link => link.show);
+ const visibleAdminLinks = adminLinks.filter(link => link.show);
+
+ const renderDesktopNavigation = () => (
+
+ {visibleLinks.map((link) => (
+
+ ))}
+
+ );
+
+ const renderAdminBar = () => {
+ if (!visibleAdminLinks.length || isMobile) return null;
+
+ return (
+
+
+
+ Admin Tools
+
+ {visibleAdminLinks.map((link) => (
-
- ) : (
-
-
-
-
+ ))}
+
+
+ );
+ };
+
+ const renderMobileMenu = () => (
+ <>
+
+
+
+
-
+
+
+ );
+
+ return (
+ <>
+
+
+ {isMobile && renderMobileMenu()}
+
+
+ Imprink
+
+
+ {!isMobile && (
+ <>
+
+ {renderDesktopNavigation()}
+
+
+
+
+ {isLoading ? (
+
+ Loading...
+
+ ) : user ? (
+
+
+
+ {user.name}
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+ )}
+
+
+
+ {/* Admin Bar - appears below main app bar */}
+ {renderAdminBar()}
+
)
}
\ No newline at end of file