App.tsx

import { Route, Routes } from 'react-router-dom';
import { AuthProvider } from './lib/auth';
import { Layout } from './components/Layout';
import { RequireAuth, RequireRole } from './components/RouteGuards';
import { RESOURCE_ROUTES } from './pages/resourceRoutes';
import { ResourcePage } from './pages/ResourcePage';
import DashboardPage from './pages/DashboardPage';
import TreasuryPage from './pages/TreasuryPage';
import AuditLogsPage from './pages/AuditLogsPage';
import SettingsPage from './pages/SettingsPage';
import LoginPage from './pages/LoginPage';
import { NAV_ITEMS } from './lib/roles';

function rolesFor(path: string) {
  return NAV_ITEMS.find((n) => n.path === path)?.roles ?? [];
}

export default function App() {
  return (
    <AuthProvider>
      <Routes>
        <Route path="/login" element={<LoginPage />} />

        <Route
          element={
            <RequireAuth>
              <Layout />
            </RequireAuth>
          }
        >
          <Route index element={<DashboardPage />} />

          {RESOURCE_ROUTES.map((r) => (
            <Route
              key={r.path}
              path={r.path.slice(1)}
              element={
                <RequireRole roles={rolesFor(r.path)}>
                  <ResourcePage title={r.title} description={r.description} resource={r.resource} columns={r.columns} />
                </RequireRole>
              }
            />
          ))}

          <Route
            path="treasury"
            element={
              <RequireRole roles={rolesFor('/treasury')}>
                <TreasuryPage />
              </RequireRole>
            }
          />
          <Route
            path="audit"
            element={
              <RequireRole roles={rolesFor('/audit')}>
                <AuditLogsPage />
              </RequireRole>
            }
          />
          <Route path="settings" element={<SettingsPage />} />
        </Route>
      </Routes>
    </AuthProvider>
  );
}