auth working in webpage
This commit is contained in:
José Salazar
25
frontend-web/src/components/auth/ProtectedRoute.jsx
Normal file
25
frontend-web/src/components/auth/ProtectedRoute.jsx
Normal file
@@ -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;
|
||||
}
|
||||
25
frontend-web/src/components/auth/PublicRoute.jsx
Normal file
25
frontend-web/src/components/auth/PublicRoute.jsx
Normal file
@@ -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;
|
||||
}
|
||||
19
frontend-web/src/hooks/useAuth.js
Normal file
19
frontend-web/src/hooks/useAuth.js
Normal file
@@ -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 };
|
||||
}
|
||||
86
frontend-web/src/pages/Login.jsx
Normal file
86
frontend-web/src/pages/Login.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
128
frontend-web/src/pages/Register.jsx
Normal file
128
frontend-web/src/pages/Register.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
|
||||
StaffDirectory: StaffDirectory,
|
||||
|
||||
AddStaff: AddStaff,
|
||||
|
||||
EditStaff: EditStaff,
|
||||
|
||||
Events: Events,
|
||||
|
||||
CreateEvent: CreateEvent,
|
||||
|
||||
EditEvent: EditEvent,
|
||||
|
||||
EventDetail: EventDetail,
|
||||
|
||||
Business: Business,
|
||||
|
||||
Invoices: Invoices,
|
||||
|
||||
Payroll: Payroll,
|
||||
|
||||
Certification: Certification,
|
||||
|
||||
Support: Support,
|
||||
|
||||
Reports: Reports,
|
||||
|
||||
Settings: Settings,
|
||||
|
||||
ActivityLog: ActivityLog,
|
||||
|
||||
AddBusiness: AddBusiness,
|
||||
|
||||
EditBusiness: EditBusiness,
|
||||
|
||||
ProcurementDashboard: ProcurementDashboard,
|
||||
|
||||
OperatorDashboard: OperatorDashboard,
|
||||
|
||||
VendorDashboard: VendorDashboard,
|
||||
|
||||
WorkforceDashboard: WorkforceDashboard,
|
||||
|
||||
Messages: Messages,
|
||||
|
||||
ClientDashboard: ClientDashboard,
|
||||
|
||||
Onboarding: Onboarding,
|
||||
|
||||
ClientOrders: ClientOrders,
|
||||
|
||||
ClientInvoices: ClientInvoices,
|
||||
|
||||
VendorOrders: VendorOrders,
|
||||
|
||||
VendorStaff: VendorStaff,
|
||||
|
||||
VendorInvoices: VendorInvoices,
|
||||
|
||||
VendorPerformance: VendorPerformance,
|
||||
|
||||
WorkforceShifts: WorkforceShifts,
|
||||
|
||||
WorkforceEarnings: WorkforceEarnings,
|
||||
|
||||
WorkforceProfile: WorkforceProfile,
|
||||
|
||||
UserManagement: UserManagement,
|
||||
|
||||
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,
|
||||
|
||||
}
|
||||
Dashboard,
|
||||
StaffDirectory,
|
||||
AddStaff,
|
||||
EditStaff,
|
||||
Events,
|
||||
CreateEvent,
|
||||
EditEvent,
|
||||
EventDetail,
|
||||
Business,
|
||||
Invoices,
|
||||
Payroll,
|
||||
Certification,
|
||||
Support,
|
||||
Reports,
|
||||
Settings,
|
||||
ActivityLog,
|
||||
AddBusiness,
|
||||
EditBusiness,
|
||||
ProcurementDashboard,
|
||||
OperatorDashboard,
|
||||
VendorDashboard,
|
||||
WorkforceDashboard,
|
||||
Messages,
|
||||
ClientDashboard,
|
||||
Onboarding,
|
||||
ClientOrders,
|
||||
ClientInvoices,
|
||||
VendorOrders,
|
||||
VendorStaff,
|
||||
VendorInvoices,
|
||||
VendorPerformance,
|
||||
WorkforceShifts,
|
||||
WorkforceEarnings,
|
||||
WorkforceProfile,
|
||||
UserManagement,
|
||||
Home,
|
||||
VendorRateCard,
|
||||
Permissions,
|
||||
WorkforceCompliance,
|
||||
Teams,
|
||||
CreateTeam,
|
||||
TeamDetails,
|
||||
VendorManagement,
|
||||
PartnerManagement,
|
||||
EnterpriseManagement,
|
||||
VendorOnboarding,
|
||||
SectorManagement,
|
||||
AddEnterprise,
|
||||
AddSector,
|
||||
AddPartner,
|
||||
EditVendor,
|
||||
SmartVendorOnboarding,
|
||||
InviteVendor,
|
||||
VendorCompliance,
|
||||
EditPartner,
|
||||
EditSector,
|
||||
EditEnterprise,
|
||||
VendorRates,
|
||||
VendorDocumentReview,
|
||||
VendorMarketplace,
|
||||
RapidOrder,
|
||||
SmartScheduler,
|
||||
StaffOnboarding,
|
||||
NotificationSettings,
|
||||
TaskBoard,
|
||||
InvoiceDetail,
|
||||
InvoiceEditor,
|
||||
Tutorials,
|
||||
Schedule,
|
||||
StaffAvailability,
|
||||
WorkerShiftProposals,
|
||||
};
|
||||
|
||||
function _getCurrentPage(url) {
|
||||
if (url.endsWith('/')) {
|
||||
url = url.slice(0, -1);
|
||||
}
|
||||
let urlLastPart = url.split('/').pop();
|
||||
if (urlLastPart.includes('?')) {
|
||||
urlLastPart = urlLastPart.split('?')[0];
|
||||
if (url.endsWith('/')) url = url.slice(0, -1);
|
||||
let last = url.split('/').pop();
|
||||
if (last.includes('?')) last = last.split('?')[0];
|
||||
const pageName = Object.keys(PAGES).find(p => p.toLowerCase() === last.toLowerCase());
|
||||
return pageName || 'Home'; // Default to Home
|
||||
}
|
||||
|
||||
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 (
|
||||
<Routes>
|
||||
{/* Public Routes */}
|
||||
<Route path="/login" element={<PublicRoute><Login /></PublicRoute>} />
|
||||
<Route path="/register" element={<PublicRoute><Register /></PublicRoute>} />
|
||||
|
||||
{/* Private Routes */}
|
||||
<Route path="/*" element={
|
||||
<ProtectedRoute>
|
||||
<Layout currentPageName={currentPage}>
|
||||
<Routes>
|
||||
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
|
||||
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/Dashboard" element={<Dashboard />} />
|
||||
|
||||
<Route path="/StaffDirectory" element={<StaffDirectory />} />
|
||||
|
||||
<Route path="/AddStaff" element={<AddStaff />} />
|
||||
|
||||
<Route path="/EditStaff" element={<EditStaff />} />
|
||||
|
||||
<Route path="/Events" element={<Events />} />
|
||||
|
||||
<Route path="/CreateEvent" element={<CreateEvent />} />
|
||||
|
||||
<Route path="/EditEvent" element={<EditEvent />} />
|
||||
|
||||
<Route path="/EventDetail" element={<EventDetail />} />
|
||||
|
||||
<Route path="/Business" element={<Business />} />
|
||||
|
||||
<Route path="/Invoices" element={<Invoices />} />
|
||||
|
||||
<Route path="/Payroll" element={<Payroll />} />
|
||||
|
||||
<Route path="/Certification" element={<Certification />} />
|
||||
|
||||
<Route path="/Support" element={<Support />} />
|
||||
|
||||
<Route path="/Reports" element={<Reports />} />
|
||||
|
||||
<Route path="/Settings" element={<Settings />} />
|
||||
|
||||
<Route path="/ActivityLog" element={<ActivityLog />} />
|
||||
|
||||
<Route path="/AddBusiness" element={<AddBusiness />} />
|
||||
|
||||
<Route path="/EditBusiness" element={<EditBusiness />} />
|
||||
|
||||
<Route path="/ProcurementDashboard" element={<ProcurementDashboard />} />
|
||||
|
||||
<Route path="/OperatorDashboard" element={<OperatorDashboard />} />
|
||||
|
||||
<Route path="/VendorDashboard" element={<VendorDashboard />} />
|
||||
|
||||
<Route path="/WorkforceDashboard" element={<WorkforceDashboard />} />
|
||||
|
||||
<Route path="/Messages" element={<Messages />} />
|
||||
|
||||
<Route path="/ClientDashboard" element={<ClientDashboard />} />
|
||||
|
||||
<Route path="/Onboarding" element={<Onboarding />} />
|
||||
|
||||
<Route path="/ClientOrders" element={<ClientOrders />} />
|
||||
|
||||
<Route path="/ClientInvoices" element={<ClientInvoices />} />
|
||||
|
||||
<Route path="/VendorOrders" element={<VendorOrders />} />
|
||||
|
||||
<Route path="/VendorStaff" element={<VendorStaff />} />
|
||||
|
||||
<Route path="/VendorInvoices" element={<VendorInvoices />} />
|
||||
|
||||
<Route path="/VendorPerformance" element={<VendorPerformance />} />
|
||||
|
||||
<Route path="/WorkforceShifts" element={<WorkforceShifts />} />
|
||||
|
||||
<Route path="/WorkforceEarnings" element={<WorkforceEarnings />} />
|
||||
|
||||
<Route path="/WorkforceProfile" element={<WorkforceProfile />} />
|
||||
|
||||
<Route path="/UserManagement" element={<UserManagement />} />
|
||||
|
||||
<Route path="/Home" element={<Home />} />
|
||||
|
||||
<Route path="/VendorRateCard" element={<VendorRateCard />} />
|
||||
|
||||
<Route path="/Permissions" element={<Permissions />} />
|
||||
|
||||
<Route path="/WorkforceCompliance" element={<WorkforceCompliance />} />
|
||||
|
||||
<Route path="/Teams" element={<Teams />} />
|
||||
|
||||
<Route path="/CreateTeam" element={<CreateTeam />} />
|
||||
|
||||
<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>
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Pages() {
|
||||
return (
|
||||
<Router>
|
||||
<PagesContent />
|
||||
<AppRoutes />
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user