Routes and new pages

Create a React page

Create src/pages/ReportsPage.tsx:

import { Card } from '../components/Card';
import { PageHeader } from '../components/PageHeader';
export default function ReportsPage() {
  return <>
    <PageHeader title="Reports" description="Your latest results." />
    <Card title="Monthly report"><p>Add your report here.</p></Card>
  </>;
}

Register the route

In src/app/App.tsx, add a lazy import and place the route inside the existing DashboardLayout route. These lines extend the file rather than replace it:

const Reports = lazy(() => import('../pages/ReportsPage'));
// Inside <Route element={<DashboardLayout />}>:
<Route path="reports" element={<Reports />} />

The internal route /reports appears as /#/reports in the browser. Use React Router Link for internal navigation. legacyRoutes.ts retains old filename aliases.

Navigation entry

Library groups live in src/app/navigation.ts. Primary workspace links are assembled in src/features/business/ProLayout.tsx. Extend the appropriate inventory:

{ label: 'Reports', path: '/reports' }

Verify

• Refresh on the new URL.
• Check exactly one matching menu item is active.
• Test sidebar, icon rail, top navigation and mobile drawer.
• Check keyboard focus, selected theme and RTL.