auth working in webpage

frontend-web/src/components/auth/ProtectedRoute.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { Loader2 } from 'lucide-react';
+
+export default function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 text-[#0A39DF] animate-spin mx-auto mb-4" />
+          <p className="text-slate-600 font-medium">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}

frontend-web/src/components/auth/PublicRoute.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { Loader2 } from 'lucide-react';
+
+export default function PublicRoute({ children }) {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 text-[#0A39DF] animate-spin mx-auto mb-4" />
+          <p className="text-slate-600 font-medium">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (user) {
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+}

frontend-web/src/hooks/useAuth.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import { onAuthStateChanged } from 'firebase/auth';
+import { auth } from '@/firebase';
+
+export function useAuth() {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user);
+      setLoading(false);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  return { user, loading };
+}

frontend-web/src/pages/Login.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { auth } from "@/firebase";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!email || !password) {
+      setError("Email and password are required.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      navigate("/");
+    } catch (error) {
+      setError("Invalid credentials. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
+      <Card className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Login</CardTitle>
+          <CardDescription>Enter your credentials to access your account.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleLogin}>
+            <div className="grid w-full items-center gap-4">
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Enter your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              {error && <p className="text-red-500 text-sm">{error}</p>}
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex-col">
+          <Button onClick={handleLogin} disabled={loading} className="w-full">
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Login"}
+          </Button>
+          <p className="mt-4 text-sm text-slate-600">
+            Don't have an account?{" "}
+            <Link to="/register" className="text-blue-600 hover:underline">
+              Register
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

frontend-web/src/pages/Register.jsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { auth } from "@/firebase";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+
+export default function Register() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const validatePassword = (password) => {
+    if (password.length < 6) {
+      return "Password must be at least 6 characters long.";
+    }
+    return null;
+  };
+
+  const validateEmail = (email) => {
+    const re =
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if (!re.test(String(email).toLowerCase())) {
+      return "Invalid email address.";
+    }
+    return null;
+  };
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!email || !password) {
+      setError("Email and password are required.");
+      return;
+    }
+
+    const emailError = validateEmail(email);
+    if (emailError) {
+      setError(emailError);
+      return;
+    }
+
+    const passwordError = validatePassword(password);
+    if (passwordError) {
+      setError(passwordError);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+      navigate("/");
+    } catch (error) {
+      setError(error.message || "Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
+      <Card className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Register</CardTitle>
+          <CardDescription>Create a new account.</CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <form onSubmit={handleRegister}>
+            <div className="grid w-full items-center gap-4">
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Enter your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  autoComplete="email"
+                />
+              </div>
+
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  autoComplete="new-password"
+                />
+              </div>
+
+              {error && <p className="text-red-500 text-sm">{error}</p>}
+            </div>
+          </form>
+        </CardContent>
+
+        <CardFooter className="flex-col">
+          <Button onClick={handleRegister} disabled={loading} className="w-full">
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Register"}
+          </Button>
+
+          <p className="mt-4 text-sm text-slate-600">
+            Already have an account?{" "}
+            <Link to="/login" className="text-blue-600 hover:underline">
+              Login
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

frontend-web/src/pages/index.jsx

@@ -1,477 +1,267 @@
-import Layout from "./Layout.jsx";
-
-import Dashboard from "./Dashboard";
-
-import StaffDirectory from "./StaffDirectory";
-
-import AddStaff from "./AddStaff";
-
-import EditStaff from "./EditStaff";
-
-import Events from "./Events";
-
-import CreateEvent from "./CreateEvent";
-
-import EditEvent from "./EditEvent";
-
-import EventDetail from "./EventDetail";
-
-import Business from "./Business";
-
-import Invoices from "./Invoices";
-
-import Payroll from "./Payroll";
-
-import Certification from "./Certification";
-
-import Support from "./Support";
-
-import Reports from "./Reports";
-
-import Settings from "./Settings";
-
-import ActivityLog from "./ActivityLog";
-
-import AddBusiness from "./AddBusiness";
-
-import EditBusiness from "./EditBusiness";
-
-import ProcurementDashboard from "./ProcurementDashboard";
-
-import OperatorDashboard from "./OperatorDashboard";
-
-import VendorDashboard from "./VendorDashboard";
-
-import WorkforceDashboard from "./WorkforceDashboard";
-
-import Messages from "./Messages";
-
-import ClientDashboard from "./ClientDashboard";
-
-import Onboarding from "./Onboarding";
-
-import ClientOrders from "./ClientOrders";
-
-import ClientInvoices from "./ClientInvoices";
-
-import VendorOrders from "./VendorOrders";
-
-import VendorStaff from "./VendorStaff";
-
-import VendorInvoices from "./VendorInvoices";
-
-import VendorPerformance from "./VendorPerformance";
-
-import WorkforceShifts from "./WorkforceShifts";
-
-import WorkforceEarnings from "./WorkforceEarnings";
-
-import WorkforceProfile from "./WorkforceProfile";
-
-import UserManagement from "./UserManagement";
-
-import Home from "./Home";
-
-import VendorRateCard from "./VendorRateCard";
-
-import Permissions from "./Permissions";
-
-import WorkforceCompliance from "./WorkforceCompliance";
-
-import Teams from "./Teams";
-
-import CreateTeam from "./CreateTeam";
-
-import TeamDetails from "./TeamDetails";
-
-import VendorManagement from "./VendorManagement";
-
-import PartnerManagement from "./PartnerManagement";
-
-import EnterpriseManagement from "./EnterpriseManagement";
-
-import VendorOnboarding from "./VendorOnboarding";
-
-import SectorManagement from "./SectorManagement";
-
-import AddEnterprise from "./AddEnterprise";
-
-import AddSector from "./AddSector";
-
-import AddPartner from "./AddPartner";
-
-import EditVendor from "./EditVendor";
-
-import SmartVendorOnboarding from "./SmartVendorOnboarding";
-
-import InviteVendor from "./InviteVendor";
-
-import VendorCompliance from "./VendorCompliance";
-
-import EditPartner from "./EditPartner";
-
-import EditSector from "./EditSector";
-
-import EditEnterprise from "./EditEnterprise";
-
-import VendorRates from "./VendorRates";
-
-import VendorDocumentReview from "./VendorDocumentReview";
-
-import VendorMarketplace from "./VendorMarketplace";
-
-import RapidOrder from "./RapidOrder";
-
-import SmartScheduler from "./SmartScheduler";
-
-import StaffOnboarding from "./StaffOnboarding";
-
-import NotificationSettings from "./NotificationSettings";
-
-import TaskBoard from "./TaskBoard";
-
-import InvoiceDetail from "./InvoiceDetail";
-
-import InvoiceEditor from "./InvoiceEditor";
-
-//import api-docs-raw from "./api-docs-raw";
-
-import Tutorials from "./Tutorials";
-
-import Schedule from "./Schedule";
-
-import StaffAvailability from "./StaffAvailability";
-
-import WorkerShiftProposals from "./WorkerShiftProposals";
-
 import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
 
+// Auth components
+import ProtectedRoute from '@/components/auth/ProtectedRoute';
+import PublicRoute from '@/components/auth/PublicRoute';
+
+// Layout and pages
+import Layout from "./Layout.jsx";
+import Home from "./Home";
+import Login from "./Login";
+import Register from "./Register";
+import Dashboard from "./Dashboard";
+import StaffDirectory from "./StaffDirectory";
+import AddStaff from "./AddStaff";
+import EditStaff from "./EditStaff";
+import Events from "./Events";
+import CreateEvent from "./CreateEvent";
+import EditEvent from "./EditEvent";
+import EventDetail from "./EventDetail";
+import Business from "./Business";
+import Invoices from "./Invoices";
+import Payroll from "./Payroll";
+import Certification from "./Certification";
+import Support from "./Support";
+import Reports from "./Reports";
+import Settings from "./Settings";
+import ActivityLog from "./ActivityLog";
+import AddBusiness from "./AddBusiness";
+import EditBusiness from "./EditBusiness";
+import ProcurementDashboard from "./ProcurementDashboard";
+import OperatorDashboard from "./OperatorDashboard";
+import VendorDashboard from "./VendorDashboard";
+import WorkforceDashboard from "./WorkforceDashboard";
+import Messages from "./Messages";
+import ClientDashboard from "./ClientDashboard";
+import Onboarding from "./Onboarding";
+import ClientOrders from "./ClientOrders";
+import ClientInvoices from "./ClientInvoices";
+import VendorOrders from "./VendorOrders";
+import VendorStaff from "./VendorStaff";
+import VendorInvoices from "./VendorInvoices";
+import VendorPerformance from "./VendorPerformance";
+import WorkforceShifts from "./WorkforceShifts";
+import WorkforceEarnings from "./WorkforceEarnings";
+import WorkforceProfile from "./WorkforceProfile";
+import UserManagement from "./UserManagement";
+import VendorRateCard from "./VendorRateCard";
+import Permissions from "./Permissions";
+import WorkforceCompliance from "./WorkforceCompliance";
+import Teams from "./Teams";
+import CreateTeam from "./CreateTeam";
+import TeamDetails from "./TeamDetails";
+import VendorManagement from "./VendorManagement";
+import PartnerManagement from "./PartnerManagement";
+import EnterpriseManagement from "./EnterpriseManagement";
+import VendorOnboarding from "./VendorOnboarding";
+import SectorManagement from "./SectorManagement";
+import AddEnterprise from "./AddEnterprise";
+import AddSector from "./AddSector";
+import AddPartner from "./AddPartner";
+import EditVendor from "./EditVendor";
+import SmartVendorOnboarding from "./SmartVendorOnboarding";
+import InviteVendor from "./InviteVendor";
+import VendorCompliance from "./VendorCompliance";
+import EditPartner from "./EditPartner";
+import EditSector from "./EditSector";
+import EditEnterprise from "./EditEnterprise";
+import VendorRates from "./VendorRates";
+import VendorDocumentReview from "./VendorDocumentReview";
+import VendorMarketplace from "./VendorMarketplace";
+import RapidOrder from "./RapidOrder";
+import SmartScheduler from "./SmartScheduler";
+import StaffOnboarding from "./StaffOnboarding";
+import NotificationSettings from "./NotificationSettings";
+import TaskBoard from "./TaskBoard";
+import InvoiceDetail from "./InvoiceDetail";
+import InvoiceEditor from "./InvoiceEditor";
+import Tutorials from "./Tutorials";
+import Schedule from "./Schedule";
+import StaffAvailability from "./StaffAvailability";
+import WorkerShiftProposals from "./WorkerShiftProposals";
+
 const PAGES = {
-    
+    Dashboard,
-    Dashboard: Dashboard,
+    StaffDirectory,
-    
+    AddStaff,
-    StaffDirectory: StaffDirectory,
+    EditStaff,
-    
+    Events,
-    AddStaff: AddStaff,
+    CreateEvent,
-    
+    EditEvent,
-    EditStaff: EditStaff,
+    EventDetail,
-    
+    Business,
-    Events: Events,
+    Invoices,
-    
+    Payroll,
-    CreateEvent: CreateEvent,
+    Certification,
-    
+    Support,
-    EditEvent: EditEvent,
+    Reports,
-    
+    Settings,
-    EventDetail: EventDetail,
+    ActivityLog,
-    
+    AddBusiness,
-    Business: Business,
+    EditBusiness,
-    
+    ProcurementDashboard,
-    Invoices: Invoices,
+    OperatorDashboard,
-    
+    VendorDashboard,
-    Payroll: Payroll,
+    WorkforceDashboard,
-    
+    Messages,
-    Certification: Certification,
+    ClientDashboard,
-    
+    Onboarding,
-    Support: Support,
+    ClientOrders,
-    
+    ClientInvoices,
-    Reports: Reports,
+    VendorOrders,
-    
+    VendorStaff,
-    Settings: Settings,
+    VendorInvoices,
-    
+    VendorPerformance,
-    ActivityLog: ActivityLog,
+    WorkforceShifts,
-    
+    WorkforceEarnings,
-    AddBusiness: AddBusiness,
+    WorkforceProfile,
-    
+    UserManagement,
-    EditBusiness: EditBusiness,
+    Home,
-    
+    VendorRateCard,
-    ProcurementDashboard: ProcurementDashboard,
+    Permissions,
-    
+    WorkforceCompliance,
-    OperatorDashboard: OperatorDashboard,
+    Teams,
-    
+    CreateTeam,
-    VendorDashboard: VendorDashboard,
+    TeamDetails,
-    
+    VendorManagement,
-    WorkforceDashboard: WorkforceDashboard,
+    PartnerManagement,
-    
+    EnterpriseManagement,
-    Messages: Messages,
+    VendorOnboarding,
-    
+    SectorManagement,
-    ClientDashboard: ClientDashboard,
+    AddEnterprise,
-    
+    AddSector,
-    Onboarding: Onboarding,
+    AddPartner,
-    
+    EditVendor,
-    ClientOrders: ClientOrders,
+    SmartVendorOnboarding,
-    
+    InviteVendor,
-    ClientInvoices: ClientInvoices,
+    VendorCompliance,
-    
+    EditPartner,
-    VendorOrders: VendorOrders,
+    EditSector,
-    
+    EditEnterprise,
-    VendorStaff: VendorStaff,
+    VendorRates,
-    
+    VendorDocumentReview,
-    VendorInvoices: VendorInvoices,
+    VendorMarketplace,
-    
+    RapidOrder,
-    VendorPerformance: VendorPerformance,
+    SmartScheduler,
-    
+    StaffOnboarding,
-    WorkforceShifts: WorkforceShifts,
+    NotificationSettings,
-    
+    TaskBoard,
-    WorkforceEarnings: WorkforceEarnings,
+    InvoiceDetail,
-    
+    InvoiceEditor,
-    WorkforceProfile: WorkforceProfile,
+    Tutorials,
-    
+    Schedule,
-    UserManagement: UserManagement,
+    StaffAvailability,
-    
+    WorkerShiftProposals,
-    Home: Home,
+};
-    
-    VendorRateCard: VendorRateCard,
-    
-    Permissions: Permissions,
-    
-    WorkforceCompliance: WorkforceCompliance,
-    
-    Teams: Teams,
-    
-    CreateTeam: CreateTeam,
-    
-    TeamDetails: TeamDetails,
-    
-    VendorManagement: VendorManagement,
-    
-    PartnerManagement: PartnerManagement,
-    
-    EnterpriseManagement: EnterpriseManagement,
-    
-    VendorOnboarding: VendorOnboarding,
-    
-    SectorManagement: SectorManagement,
-    
-    AddEnterprise: AddEnterprise,
-    
-    AddSector: AddSector,
-    
-    AddPartner: AddPartner,
-    
-    EditVendor: EditVendor,
-    
-    SmartVendorOnboarding: SmartVendorOnboarding,
-    
-    InviteVendor: InviteVendor,
-    
-    VendorCompliance: VendorCompliance,
-    
-    EditPartner: EditPartner,
-    
-    EditSector: EditSector,
-    
-    EditEnterprise: EditEnterprise,
-    
-    VendorRates: VendorRates,
-    
-    VendorDocumentReview: VendorDocumentReview,
-    
-    VendorMarketplace: VendorMarketplace,
-    
-    RapidOrder: RapidOrder,
-    
-    SmartScheduler: SmartScheduler,
-    
-    StaffOnboarding: StaffOnboarding,
-    
-    NotificationSettings: NotificationSettings,
-    
-    TaskBoard: TaskBoard,
-    
-    InvoiceDetail: InvoiceDetail,
-    
-    InvoiceEditor: InvoiceEditor,
-    
-    //api-docs-raw: api-docs-raw,
-    
-    Tutorials: Tutorials,
-    
-    Schedule: Schedule,
-    
-    StaffAvailability: StaffAvailability,
-    
-    WorkerShiftProposals: WorkerShiftProposals,
-    
-}
 
 function _getCurrentPage(url) {
-    if (url.endsWith('/')) {
+    if (url.endsWith('/')) url = url.slice(0, -1);
-        url = url.slice(0, -1);
+    let last = url.split('/').pop();
-    }
+    if (last.includes('?')) last = last.split('?')[0];
-    let urlLastPart = url.split('/').pop();
+    const pageName = Object.keys(PAGES).find(p => p.toLowerCase() === last.toLowerCase());
-    if (urlLastPart.includes('?')) {
+    return pageName || 'Home'; // Default to Home
-        urlLastPart = urlLastPart.split('?')[0];
-    }
-
-    const pageName = Object.keys(PAGES).find(page => page.toLowerCase() === urlLastPart.toLowerCase());
-    return pageName || Object.keys(PAGES)[0];
 }
 
-// Create a wrapper component that uses useLocation inside the Router context
+
-function PagesContent() {
+function AppRoutes() {
     const location = useLocation();
     const currentPage = _getCurrentPage(location.pathname);
-    
+
     return (
-        <Layout currentPageName={currentPage}>
+        <Routes>
-            <Routes>            
+            {/* Public Routes */}
-                
+            <Route path="/login" element={<PublicRoute><Login /></PublicRoute>} />
-                    <Route path="/" element={<Dashboard />} />
+            <Route path="/register" element={<PublicRoute><Register /></PublicRoute>} />
-                
+
-                
+            {/* Private Routes */}
-                <Route path="/Dashboard" element={<Dashboard />} />
+            <Route path="/*" element={
-                
+                <ProtectedRoute>
-                <Route path="/StaffDirectory" element={<StaffDirectory />} />
+                    <Layout currentPageName={currentPage}>
-                
+                        <Routes>
-                <Route path="/AddStaff" element={<AddStaff />} />
+                            <Route path="/" element={<Home />} />
-                
+                            <Route path="/Dashboard" element={<Dashboard />} />
-                <Route path="/EditStaff" element={<EditStaff />} />
+                            <Route path="/StaffDirectory" element={<StaffDirectory />} />
-                
+                            <Route path="/AddStaff" element={<AddStaff />} />
-                <Route path="/Events" element={<Events />} />
+                            <Route path="/EditStaff" element={<EditStaff />} />
-                
+                            <Route path="/Events" element={<Events />} />
-                <Route path="/CreateEvent" element={<CreateEvent />} />
+                            <Route path="/CreateEvent" element={<CreateEvent />} />
-                
+                            <Route path="/EditEvent" element={<EditEvent />} />
-                <Route path="/EditEvent" element={<EditEvent />} />
+                            <Route path="/EventDetail" element={<EventDetail />} />
-                
+                            <Route path="/Business" element={<Business />} />
-                <Route path="/EventDetail" element={<EventDetail />} />
+                            <Route path="/Invoices" element={<Invoices />} />
-                
+                            <Route path="/Payroll" element={<Payroll />} />
-                <Route path="/Business" element={<Business />} />
+                            <Route path="/Certification" element={<Certification />} />
-                
+                            <Route path="/Support" element={<Support />} />
-                <Route path="/Invoices" element={<Invoices />} />
+                            <Route path="/Reports" element={<Reports />} />
-                
+                            <Route path="/Settings" element={<Settings />} />
-                <Route path="/Payroll" element={<Payroll />} />
+                            <Route path="/ActivityLog" element={<ActivityLog />} />
-                
+                            <Route path="/AddBusiness" element={<AddBusiness />} />
-                <Route path="/Certification" element={<Certification />} />
+                            <Route path="/EditBusiness" element={<EditBusiness />} />
-                
+                            <Route path="/ProcurementDashboard" element={<ProcurementDashboard />} />
-                <Route path="/Support" element={<Support />} />
+                            <Route path="/OperatorDashboard" element={<OperatorDashboard />} />
-                
+                            <Route path="/VendorDashboard" element={<VendorDashboard />} />
-                <Route path="/Reports" element={<Reports />} />
+                            <Route path="/WorkforceDashboard" element={<WorkforceDashboard />} />
-                
+                            <Route path="/Messages" element={<Messages />} />
-                <Route path="/Settings" element={<Settings />} />
+                            <Route path="/ClientDashboard" element={<ClientDashboard />} />
-                
+                            <Route path="/Onboarding" element={<Onboarding />} />
-                <Route path="/ActivityLog" element={<ActivityLog />} />
+                            <Route path="/ClientOrders" element={<ClientOrders />} />
-                
+                            <Route path="/ClientInvoices" element={<ClientInvoices />} />
-                <Route path="/AddBusiness" element={<AddBusiness />} />
+                            <Route path="/VendorOrders" element={<VendorOrders />} />
-                
+                            <Route path="/VendorStaff" element={<VendorStaff />} />
-                <Route path="/EditBusiness" element={<EditBusiness />} />
+                            <Route path="/VendorInvoices" element={<VendorInvoices />} />
-                
+                            <Route path="/VendorPerformance" element={<VendorPerformance />} />
-                <Route path="/ProcurementDashboard" element={<ProcurementDashboard />} />
+                            <Route path="/WorkforceShifts" element={<WorkforceShifts />} />
-                
+                            <Route path="/WorkforceEarnings" element={<WorkforceEarnings />} />
-                <Route path="/OperatorDashboard" element={<OperatorDashboard />} />
+                            <Route path="/WorkforceProfile" element={<WorkforceProfile />} />
-                
+                            <Route path="/UserManagement" element={<UserManagement />} />
-                <Route path="/VendorDashboard" element={<VendorDashboard />} />
+                            <Route path="/Home" element={<Home />} />
-                
+                            <Route path="/VendorRateCard" element={<VendorRateCard />} />
-                <Route path="/WorkforceDashboard" element={<WorkforceDashboard />} />
+                            <Route path="/Permissions" element={<Permissions />} />
-                
+                            <Route path="/WorkforceCompliance" element={<WorkforceCompliance />} />
-                <Route path="/Messages" element={<Messages />} />
+                            <Route path="/Teams" element={<Teams />} />
-                
+                            <Route path="/CreateTeam" element={<CreateTeam />} />
-                <Route path="/ClientDashboard" element={<ClientDashboard />} />
+                            <Route path="/TeamDetails" element={<TeamDetails />} />
-                
+                            <Route path="/VendorManagement" element={<VendorManagement />} />
-                <Route path="/Onboarding" element={<Onboarding />} />
+                            <Route path="/PartnerManagement" element={<PartnerManagement />} />
-                
+                            <Route path="/EnterpriseManagement" element={<EnterpriseManagement />} />
-                <Route path="/ClientOrders" element={<ClientOrders />} />
+                            <Route path="/VendorOnboarding" element={<VendorOnboarding />} />
-                
+                            <Route path="/SectorManagement" element={<SectorManagement />} />
-                <Route path="/ClientInvoices" element={<ClientInvoices />} />
+                            <Route path="/AddEnterprise" element={<AddEnterprise />} />
-                
+                            <Route path="/AddSector" element={<AddSector />} />
-                <Route path="/VendorOrders" element={<VendorOrders />} />
+                            <Route path="/AddPartner" element={<AddPartner />} />
-                
+                            <Route path="/EditVendor" element={<EditVendor />} />
-                <Route path="/VendorStaff" element={<VendorStaff />} />
+                            <Route path="/SmartVendorOnboarding" element={<SmartVendorOnboarding />} />
-                
+                            <Route path="/InviteVendor" element={<InviteVendor />} />
-                <Route path="/VendorInvoices" element={<VendorInvoices />} />
+                            <Route path="/VendorCompliance" element={<VendorCompliance />} />
-                
+                            <Route path="/EditPartner" element={<EditPartner />} />
-                <Route path="/VendorPerformance" element={<VendorPerformance />} />
+                            <Route path="/EditSector" element={<EditSector />} />
-                
+                            <Route path="/EditEnterprise" element={<EditEnterprise />} />
-                <Route path="/WorkforceShifts" element={<WorkforceShifts />} />
+                            <Route path="/VendorRates" element={<VendorRates />} />
-                
+                            <Route path="/VendorDocumentReview" element={<VendorDocumentReview />} />
-                <Route path="/WorkforceEarnings" element={<WorkforceEarnings />} />
+                            <Route path="/VendorMarketplace" element={<VendorMarketplace />} />
-                
+                            <Route path="/RapidOrder" element={<RapidOrder />} />
-                <Route path="/WorkforceProfile" element={<WorkforceProfile />} />
+                            <Route path="/SmartScheduler" element={<SmartScheduler />} />
-                
+                            <Route path="/StaffOnboarding" element={<StaffOnboarding />} />
-                <Route path="/UserManagement" element={<UserManagement />} />
+                            <Route path="/NotificationSettings" element={<NotificationSettings />} />
-                
+                            <Route path="/TaskBoard" element={<TaskBoard />} />
-                <Route path="/Home" element={<Home />} />
+                            <Route path="/InvoiceDetail" element={<InvoiceDetail />} />
-                
+                            <Route path="/InvoiceEditor" element={<InvoiceEditor />} />
-                <Route path="/VendorRateCard" element={<VendorRateCard />} />
+                            <Route path="/Tutorials" element={<Tutorials />} />
-                
+                            <Route path="/Schedule" element={<Schedule />} />
-                <Route path="/Permissions" element={<Permissions />} />
+                            <Route path="/StaffAvailability" element={<StaffAvailability />} />
-                
+                            <Route path="/WorkerShiftProposals" element={<WorkerShiftProposals />} />
-                <Route path="/WorkforceCompliance" element={<WorkforceCompliance />} />
+                        </Routes>
-                
+                    </Layout>
-                <Route path="/Teams" element={<Teams />} />
+                </ProtectedRoute>
-                
+            } />
-                <Route path="/CreateTeam" element={<CreateTeam />} />
+        </Routes>
-                
-                <Route path="/TeamDetails" element={<TeamDetails />} />
-                
-                <Route path="/VendorManagement" element={<VendorManagement />} />
-                
-                <Route path="/PartnerManagement" element={<PartnerManagement />} />
-                
-                <Route path="/EnterpriseManagement" element={<EnterpriseManagement />} />
-                
-                <Route path="/VendorOnboarding" element={<VendorOnboarding />} />
-                
-                <Route path="/SectorManagement" element={<SectorManagement />} />
-                
-                <Route path="/AddEnterprise" element={<AddEnterprise />} />
-                
-                <Route path="/AddSector" element={<AddSector />} />
-                
-                <Route path="/AddPartner" element={<AddPartner />} />
-                
-                <Route path="/EditVendor" element={<EditVendor />} />
-                
-                <Route path="/SmartVendorOnboarding" element={<SmartVendorOnboarding />} />
-                
-                <Route path="/InviteVendor" element={<InviteVendor />} />
-                
-                <Route path="/VendorCompliance" element={<VendorCompliance />} />
-                
-                <Route path="/EditPartner" element={<EditPartner />} />
-                
-                <Route path="/EditSector" element={<EditSector />} />
-                
-                <Route path="/EditEnterprise" element={<EditEnterprise />} />
-                
-                <Route path="/VendorRates" element={<VendorRates />} />
-                
-                <Route path="/VendorDocumentReview" element={<VendorDocumentReview />} />
-                
-                <Route path="/VendorMarketplace" element={<VendorMarketplace />} />
-                
-                <Route path="/RapidOrder" element={<RapidOrder />} />
-                
-                <Route path="/SmartScheduler" element={<SmartScheduler />} />
-                
-                <Route path="/StaffOnboarding" element={<StaffOnboarding />} />
-                
-                <Route path="/NotificationSettings" element={<NotificationSettings />} />
-                
-                <Route path="/TaskBoard" element={<TaskBoard />} />
-                
-                <Route path="/InvoiceDetail" element={<InvoiceDetail />} />
-                
-                <Route path="/InvoiceEditor" element={<InvoiceEditor />} />
-                
-                <Route path="/api-docs-raw" element={<api-docs-raw />} />
-                
-                <Route path="/Tutorials" element={<Tutorials />} />
-                
-                <Route path="/Schedule" element={<Schedule />} />
-                
-                <Route path="/StaffAvailability" element={<StaffAvailability />} />
-                
-                <Route path="/WorkerShiftProposals" element={<WorkerShiftProposals />} />
-                
-            </Routes>
-        </Layout>
     );
 }
 
 export default function Pages() {
     return (
         <Router>
-            <PagesContent />
+            <AppRoutes />
         </Router>
     );
 }