Fix multiple UI bugs found in full audit

- Routes: deduplicate /employee, add /employeemenu for EmployeeMenu page
- Home Nav: replace dead href='#' links with react-router Links to
  /home/howitworks, /home/contactus, /home/about
- EmployeesPage: fix broken /invitation link to /invitationMobile
- BookingStepper: add default case to getStepContent switch
- GetSite/GetFloor/EmployeeList: add missing key props on mapped elements
- SideDrawer: wire nav items to navigate to correct routes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: kanwalnainsingh

code_base/web-ui/src/app/pages/EmployeeBooking/components/BookingStepper.js

@@ -108,6 +108,8 @@ function getStepContent(step) {
       return <GetDate />;
     case 3:
       return <GetDesk />;
+    default:
+      return null;
   }
 }
 

code_base/web-ui/src/app/pages/EmployeeBooking/components/GetFloor.js

@@ -67,7 +67,7 @@ export const GetFloor = () => {
             <Box className={classes.root}>
                 <ToggleButtonGroup className={classes.buttonGroup} exclusive value={floor} onChange={handleFloor} aria-label="floor number">
                     {mockFloors.map((mock) =>
-                        <NumberButton onClick={handleNext} value={mock} aria-label={mock}>{mock}</NumberButton>
+                        <NumberButton key={mock} onClick={handleNext} value={mock} aria-label={mock}>{mock}</NumberButton>
                     )}
                 </ToggleButtonGroup>
             </Box>

code_base/web-ui/src/app/pages/EmployeeBooking/components/GetSite.js

@@ -91,7 +91,7 @@ export function GetSite() {
             <GridList cellHeight={160} className={classes.gridList}>
                 <ToggleButtonGroup exclusive value={site} onChange={handleSite} aria-label="site" cols={3} className={classes.buttonGroup}>
                     {sites.map((mockSite, index) => (
-                        <ToggleButton value={mockSite} aria-label={mockSite} cols={2} onClick={handleNext}>
+                        <ToggleButton key={index} value={mockSite} aria-label={mockSite} cols={2} onClick={handleNext}>
                             {mockSite}
                         </ToggleButton>
                     ))}

code_base/web-ui/src/app/pages/EmployeeList/index.js

@@ -130,7 +130,7 @@ const EmployeeList = () => {
                     {listBig && (
                         <Grid className={classes.gridBigCard}>
                             {small.map(x => (
-                                <Grid className={classes.cardContainer}>
+                                <Grid key={x} className={classes.cardContainer}>
                                     <BigCard item xs={8} />
                                 </Grid>
                             ))}
@@ -139,7 +139,7 @@ const EmployeeList = () => {
                     {listSmall && (
                         <Grid>
                            {small.map(x => (
-                                <Grid className={classes.smallCardContainer}>
+                                <Grid key={x} className={classes.smallCardContainer}>
                                     <SmallCard item xs={8} />
                                 </Grid>
                            ))}

code_base/web-ui/src/app/pages/EmployeeMenu/components/SideDrawer.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import history from '../../../../history';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -93,6 +94,12 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
+const navRoutes = {
+  'View all bookings': '/employee',
+  'Calendar view': '/employee',
+  'Edit profile': '/employeemenu',
+};
+
 const navList = [
   {
     text: 'View all bookings',
@@ -236,6 +243,7 @@ export default function SideDrawer() {
             <ListItem
               button key={option.text}
               aria-label={option.text}
+              onClick={() => navRoutes[option.text] && history.push(navRoutes[option.text])}
               style={{ paddingLeft: 0,
                        paddingBottom: 10,
                        direction: "ltr" }}>

code_base/web-ui/src/app/pages/Home/components/Home/HomeDetails/Nav.js

@@ -1,21 +1,22 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { AppBar, Toolbar, Link } from "@material-ui/core";
+import { AppBar, Toolbar } from "@material-ui/core";
+import { Link } from "react-router-dom";
 import { toAbsoluteUrl } from "../../../../../utils/utils";
 
 const useStyles = makeStyles((theme) => ({
   navItem: {
     fontWeight: "bold",
     color: "#000",
     paddingLeft: theme.spacing(2),
+    textDecoration: "none",
+    cursor: "pointer",
   },
 }));
 
 export default function Nav() {
   const classes = useStyles();
 
-  const preventDefault = (event) => event.preventDefault();
-
   return (
     <AppBar
       position="static"
@@ -31,13 +32,13 @@ export default function Nav() {
           />
         </div>
         <div>
-          <Link className={classes.navItem} href="#" onClick={preventDefault}>
+          <Link className={classes.navItem} to="/home/howitworks">
             See How It Works
           </Link>
-          <Link className={classes.navItem} href="#" onClick={preventDefault}>
+          <Link className={classes.navItem} to="/home/contactus">
             Contact Us
           </Link>
-          <Link className={classes.navItem} href="#" onClick={preventDefault}>
+          <Link className={classes.navItem} to="/home/about">
             About Us
           </Link>
         </div>

code_base/web-ui/src/app/pages/OrganisationMenu/EmployeesPage.js

@@ -126,7 +126,7 @@ export default function EmployeesPage() {
                 1672 Employees Invited 
               </div>
               <div className={classes.labels}> 
-              <Link to ='/invitation' className={classes.link}>Invite Employees Check </Link>
+              <Link to='/invitationMobile' className={classes.link}>Invite Employees Check </Link>
                 <br/> Employees List 
               </div> 
             </div>

code_base/web-ui/src/router/Routes.js

@@ -6,7 +6,7 @@ import HomeRouter from "./HomeRouter"
 import WIPRouter from "./WIPRouter"
 import Sites from '../app/container/Sites/Sites'
 import EmployeeDevelopment from '../app/pages/EmployeeList';
-import Index from '../app/pages/EmployeeMenu/Index'
+import EmployeeMenu from '../app/pages/EmployeeMenu/Index'
 import EmployeesPage from "../app/pages/OrganisationMenu/EmployeesPage";
 import NewSite from '../app/pages/NewSite/NewSite'
 import EmployeesPageMobile from "../app/pages/OrganisationMenu/EmployeesPageMobile";
@@ -31,7 +31,7 @@ export const Routes = () => {
       <Route path="/newsite" component={NewSite}/>
       <Route path="/sites/:id" component={Sites}/>
       <Route path="/employee" component={EmployeeDevelopment} />
-      <Route exact path="/employee" component={Index} />
+      <Route path="/employeemenu" component={EmployeeMenu} />
       <Route exact path="/employeebooking" component={EmployeeBooking} />
     </Switch>
     </Router>