iamcoolvivek007/freightdesk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat[router]: add Shipper Dashboard route and nav link

Browse source
This commit is contained in:
Hermes Agent 2026-06-08 02:15:26 +00:00
parent 8e8e7a5ff2
commit c4343e6958
1 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/router.jsx
View file

@ -1,26 +1,35 @@
import React from 'react'; import React from 'react';
import { createRootRoute, RouterProvider, createBrowserRouter, Link } from '@tanstack/react-router'; import { createRootRoute, RouterProvider, createBrowserRouter } from '@tanstack/react-router';
import LoadsList from './components/LoadsList'; import LoadsList from './components/LoadsList';
import ShippersList from './components/ShippersList'; import ShippersList from './components/ShippersList';
import VehicleMap from './components/VehicleMap'; import ShipperDashboard from './components/ShipperDashboard';
// Root layout – can later include a navbar or sidebar // Root layout – can later include a navbar or sidebar
function RootLayout({ children }) { function RootLayout({ children }) {
return ( return (
<div> <div className="min-vh-100 bg-light">
{/* Simple header */} {/* Navigation Header */}
<header className="bg-primary text-white p-3"> <header className="bg-primary text-white p-3 shadow-sm">
<h1 className="mb-0" style={{ fontSize: '1.5rem' }}>FreightDesk Dashboard</h1> <div className="container d-flex justify-content-between align-items-center">
<h1 className="mb-0" style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>FreightDesk Dashboard</h1>
<nav>
<ul className="nav">
<li className="nav-item">
<a className="nav-link text-white" href="/loads">Loads</a>
</li>
<li className="nav-item">
<a className="nav-link text-white" href="/shippers">Shippers</a>
</li>
<li className="nav-item">
<a className="nav-link text-white" href="/shipper-dashboard">Shipper Dashboard</a>
</li>
</ul>
</nav>
</div>
</header> </header>
<main className="container py-4">
{/* Navigation */} {children}
<nav className="mb-4"> </main>
<Link href="/loads" className="nav-link">Loads</Link>
<Link href="/shippers" className="nav-link">Shippers</Link>
<Link href="/vehicles" className="nav-link">Vehicles</Link>
</nav>
<main>{children}</main>
</div> </div>
); );
} }
@ -42,17 +51,16 @@ const shippersRoute = rootRoute.createRoute({
component: ShippersList, component: ShippersList,
}); });
// Vehicle tracking page route // Shipper Dashboard route
const vehiclesRoute = rootRoute.createRoute({ const shipperDashboardRoute = rootRoute.createRoute({
path: '/vehicles', path: '/shipper-dashboard',
component: VehicleMap, component: ShipperDashboard,
}); });
// Default route – redirect to /loads // Default route – redirect to /loads
const indexRoute = rootRoute.createRoute({ const indexRoute = rootRoute.createRoute({
path: '/', path: '/',
component: () => { component: () => {
// Simple redirect component
React.useEffect(() => { React.useEffect(() => {
window.location.replace('/loads'); window.location.replace('/loads');
}, []); }, []);
@ -61,10 +69,10 @@ const indexRoute = rootRoute.createRoute({
}); });
// Build the router // Build the router
const routeTree = rootRoute.addChildren([loadsRoute, shippersRoute, vehiclesRoute, indexRoute]); const routeTree = rootRoute.addChildren([loadsRoute, shippersRoute, shipperDashboardRoute, indexRoute]);
export const router = createBrowserRouter({ routeTree }); export const router = createBrowserRouter({ routeTree });
export function AppRouter() { export function AppRouter() {
return <RouterProvider router={router} />; return <RouterProvider router={router} />;
} }