Menu re-work almost done

frontend/src/components/layout/BackstoryLayout.tsx

@@ -12,7 +12,7 @@ import { Snack, SetSnackType } from 'components/Snack';
 import { User } from 'types/types';
 import { LoadingComponent } from "components/LoadingComponent";
 import { AuthProvider, useAuth, ProtectedRoute } from 'hooks/AuthContext';
-import { useSelectedCandidate } from 'hooks/GlobalContext';
+import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
 import {
   getMainNavigationItems,
   getAllRoutes,
@@ -76,29 +76,28 @@ const BackstoryPageContainer = (props: BackstoryPageContainerProps) => {
 interface BackstoryLayoutProps {
   page: string;
   chatRef: React.Ref<any>;
-  snackRef: React.Ref<any>;
-  submitQuery: any;
 }
 
 const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutProps) => {
-  const { page, chatRef, snackRef, submitQuery } = props;
+  const { page, chatRef, } = props;
+  const { setSnack } = useAppState();
   const navigate = useNavigate();
   const location = useLocation();
   const { guest, user } = useAuth();
-  const { selectedCandidate } = useSelectedCandidate();
   const [navigationItems, setNavigationItems] = useState<NavigationItem[]>([]);
 
   useEffect(() => {
     const userType = user?.userType || null;
-    setNavigationItems(getMainNavigationItems(userType));
+    setNavigationItems(getMainNavigationItems(userType, user?.isAdmin ? true : false));
   }, [user]);
 
   // Generate dynamic routes from navigation config
   const generateRoutes = () => {
-    if (!guest) return null;
+    if (!guest && !user) return null;
 
     const userType = user?.userType || null;
-    const routes = getAllRoutes(userType);
+    const isAdmin = user?.isAdmin ? true : false;
+    const routes = getAllRoutes(userType, isAdmin);
 
     return routes.map((route, index) => {
       if (!route.path || !route.component) return null;
@@ -158,7 +157,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
           }}
         >
           <BackstoryPageContainer>
-            {!guest && (
+            {!guest && !user && (
               <Box>
                 <LoadingComponent
                   loadingText="Creating session..."
@@ -168,7 +167,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
                 />
               </Box>
             )}
-            {guest && (
+            {(guest || user) && (
               <>
                 <Outlet />
                 <Routes>
@@ -179,7 +178,6 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
             {location.pathname === "/" && <Footer />}
           </BackstoryPageContainer>
         </Scrollable>
-        <Snack ref={snackRef} />
       </Box>
     </Box>
   );

frontend/src/components/layout/BackstoryRoutes.tsx

@@ -20,7 +20,7 @@ const getBackstoryDynamicRoutes = (props: BackstoryDynamicRoutesProps): ReactNod
   const isAdmin = user?.isAdmin ? true : false;
 
   // Get all routes from navigation config
-  const routes = getAllRoutes(userType);
+  const routes = getAllRoutes(userType, isAdmin);
 
   return routes.map((route: NavigationItem, index: number) => {
     if (!route.path || !route.component) return null;

frontend/src/components/layout/Header.tsx

@@ -26,6 +26,7 @@ import {
   List,
   ListItem,
   ListItemButton,
+  SxProps,
 } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
 import {
@@ -38,7 +39,7 @@ import {
   ExpandLess,
   KeyboardArrowDown,
 } from '@mui/icons-material';
-
+import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
 import { getUserMenuItemsByGroup } from 'config/navigationConfig';
 import { NavigationItem } from 'types/navigation';
 import { Beta } from 'components/ui/Beta';
@@ -125,8 +126,6 @@ interface HeaderProps {
 const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { user, logout } = useAuth();
   const { setSnack } = useAppState();
-  const candidate: Candidate | null = (user && user.userType === "candidate") ? user as Candidate : null;
-  const employer: Employer | null = (user && user.userType === "employer") ? user as Employer : null;
   const {
     transparent = false,
     className,
@@ -254,7 +253,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   // Helper function to check if any child is current path
   const hasActiveChild = (item: NavigationItem): boolean => {
     if (!item.children) return false;
-    return item.children.some((child: any) => isCurrentPath(child) || hasActiveChild(child));
+    return item.children.some(child => isCurrentPath(child) || hasActiveChild(child));
   };
 
   // Desktop dropdown handlers
@@ -328,7 +327,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
                   transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                   TransitionComponent={Fade}
                 >
-                  {item.children?.map((child: any) => (
+                  {item.children?.map(child => (
                     <MenuItem
                       key={child.id}
                       onClick={() => child.path && handleNavigate(child.path)}
@@ -416,7 +415,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
           {hasChildren && (
             <Collapse in={isExpanded} timeout="auto" unmountOnExit>
               <List disablePadding>
-                {item.children?.map((child: any) => renderNavigationItem(child, depth + 1))}
+                {item.children?.map(child => renderNavigationItem(child, depth + 1))}
               </List>
             </Collapse>
           )}

frontend/src/config/navigationConfig.tsx

@@ -14,6 +14,9 @@ import {
   History as HistoryIcon,
   QuestionAnswer as QuestionAnswerIcon,
   AttachMoney as AttachMoneyIcon,
+  Quiz as QuizIcon,
+  Analytics as AnalyticsIcon,
+  BubbleChart,
 } from '@mui/icons-material';
 
 import { BackstoryLogo } from 'components/ui/BackstoryLogo';
@@ -28,9 +31,15 @@ import { JobAnalysisPage } from 'pages/JobAnalysisPage';
 import { GenerateCandidate } from 'pages/GenerateCandidate';
 import { LoginPage } from 'pages/LoginPage';
 import { EmailVerificationPage } from 'components/EmailVerificationComponents';
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { CandidateDashboard } from 'pages/candidate/Dashboard';
 import { NavigationConfig, NavigationItem } from 'types/navigation';
+import { HowItWorks } from 'pages/HowItWorks';
+import SchoolIcon from '@mui/icons-material/School';
+import { CandidateProfile } from 'pages/candidate/Profile';
+import { Settings } from 'pages/candidate/Settings';
+import { VectorVisualizer } from 'components/VectorVisualizer';
+import { DocumentManager } from 'components/DocumentManager';
 
 // Beta page components for placeholder routes
 const BackstoryPage = () => (<BetaPage><Typography variant="h4">Backstory</Typography></BetaPage>);
@@ -46,8 +55,8 @@ const SettingsPage = () => (<BetaPage><Typography variant="h4">Settings</Typogra
 
 export const navigationConfig: NavigationConfig = {
   items: [
-    { id: 'home', label: <BackstoryLogo />, path: '/', component: <HomePage />, userTypes: ['guest', 'candidate', 'employer'], exact: true, },
+    { id: 'home', label: <BackstoryLogo />, path: '/', component: <HowItWorks />, userTypes: ['guest', 'candidate', 'employer'], exact: true, },
-    { id: 'how-it-works', label: 'How It Works', path: '/how-it-works', icon: <SchoolIcon />, component: <HowItWorks />, userTypes: ['guest', 'candidate', 'employer',], },
+    // { id: 'how-it-works', label: 'How It Works', path: '/how-it-works', icon: <SchoolIcon />, component: <HowItWorks />, userTypes: ['guest', 'candidate', 'employer',], },
     { id: 'job-analysis', label: 'Job Analysis', path: '/job-analysis', icon: <WorkIcon />, component: <JobAnalysisPage />, userTypes: ['guest', 'candidate', 'employer',], },
     { id: 'chat', label: 'Candidate Chat', path: '/chat', icon: <ChatIcon />, component: <CandidateChatPage />, userTypes: ['guest', 'candidate', 'employer',], },        {
             id: 'candidate-menu', label: 'Tools', icon: <PersonIcon />, userTypes: ['candidate'], children: [
@@ -73,9 +82,7 @@ export const navigationConfig: NavigationConfig = {
                 { id: 'employer-company', label: 'Company', path: '/employer/company', icon: <BusinessIcon />, component: <CompanyPage />, userTypes: ['employer'], },
                 { id: 'employer-analytics', label: 'Analytics', path: '/employer/analytics', icon: <BarChartIcon />, component: <AnalyticsPage />, userTypes: ['employer'], },
                 { id: 'employer-settings', label: 'Settings', path: '/employer/settings', icon: <SettingsIcon />, component: <SettingsPage />, userTypes: ['employer'], },
-            ],
+          ],
-        },
-      ],
     },
     {
       id: 'global-tools',
@@ -218,12 +225,12 @@ export const navigationConfig: NavigationConfig = {
 };
 
 // Utility functions for working with navigation config
-export const getNavigationItemsForUser = (userType: 'guest' | 'candidate' | 'employer' | null): NavigationItem[] => {
+export const getNavigationItemsForUser = (userType: 'guest' | 'candidate' | 'employer' | null, isAdmin: boolean = false): NavigationItem[] => {
   const currentUserType = userType || 'guest';
 
   const filterItems = (items: NavigationItem[]): NavigationItem[] => {
     return items
-      .filter(item => !item.userTypes || item.userTypes.includes(currentUserType))
+      .filter(item => !item.userTypes || item.userTypes.includes(currentUserType) || (item.userTypes.includes('admin') && isAdmin))
       .filter(item => item.showInNavigation !== false) // Default to true if not specified
       .map(item => ({
         ...item,
@@ -235,14 +242,14 @@ export const getNavigationItemsForUser = (userType: 'guest' | 'candidate' | 'emp
   return filterItems(navigationConfig.items);
 };
 
-export const getAllRoutes = (userType: 'guest' | 'candidate' | 'employer' | null): NavigationItem[] => {
+export const getAllRoutes = (userType: 'guest' | 'candidate' | 'employer' | null, isAdmin: boolean = false): NavigationItem[] => {
   const currentUserType = userType || 'guest';
   
   const extractRoutes = (items: NavigationItem[]): NavigationItem[] => {
     const routes: NavigationItem[] = [];
     
     items.forEach(item => {
-      if (!item.userTypes || item.userTypes.includes(currentUserType)) {
+      if (!item.userTypes || item.userTypes.includes(currentUserType) || (item.userTypes.includes('admin') && isAdmin)) {
         if (item.path && item.component) {
           routes.push(item);
         }
@@ -258,8 +265,8 @@ export const getAllRoutes = (userType: 'guest' | 'candidate' | 'employer' | null
   return extractRoutes(navigationConfig.items);
 };
 
-export const getMainNavigationItems = (userType: 'guest' | 'candidate' | 'employer' | null): NavigationItem[] => {
+export const getMainNavigationItems = (userType: 'guest' | 'candidate' | 'employer' | null, isAdmin: boolean = false): NavigationItem[] => {
-  return getNavigationItemsForUser(userType)
+  return getNavigationItemsForUser(userType, isAdmin)
     .filter(item => 
       item.id !== 'auth' && 
       item.id !== 'catch-all' &&

frontend/src/types/navigation.ts

@@ -7,7 +7,7 @@ export interface NavigationItem {
   icon?: ReactElement;
   children?: NavigationItem[];
   component?: ReactElement;
-  userTypes?: ('candidate' | 'employer' | 'guest')[];
+  userTypes?: ('candidate' | 'employer' | 'guest' | 'admin')[];
   exact?: boolean;
   divider?: boolean;
   showInNavigation?: boolean;  // Controls if item appears in main navigation