hyb-oa/client/src/router/index.tsx

import { Navigate, Route, Routes } from "react-router-dom";
import { AppShellLayout } from "../layouts/AppShellLayout";
import { AuthLayout } from "../layouts/AuthLayout";
import { AuditLogsPage } from "../pages/AuditLogsPage";
import { ApprovalRulesPage } from "../pages/ApprovalRulesPage";
import { FeatureFlagsPage } from "../pages/FeatureFlagsPage";
import { ChangePasswordPage } from "../pages/ChangePasswordPage";
import { BudgetsPage } from "../pages/BudgetsPage";
import { DashboardPage } from "../pages/DashboardPage";
import { DepartmentsPage } from "../pages/DepartmentsPage";
import { MasterDataPage } from "../pages/MasterDataPage";
import { DelegationsPage } from "../pages/DelegationsPage";
import { ForbiddenPage } from "../pages/ForbiddenPage";
import { MobileApprovalsPage } from "../pages/MobileApprovalsPage";
import { MobileCapturePage } from "../pages/MobileCapturePage";
import { InvoicePoolPage } from "../pages/InvoicePoolPage";
import { LoginPage } from "../pages/LoginPage";
import { LeaveRequestPage } from "../pages/LeaveRequestPage";
import { NotificationsPage } from "../pages/NotificationsPage";
import { NotificationChannelsPage } from "../pages/NotificationChannelsPage";
import { ErpIntegrationPage } from "../pages/ErpIntegrationPage";
import { PurchaseRequestsPage } from "../pages/PurchaseRequestsPage";
import { TravelRequestsPage } from "../pages/TravelRequestsPage";
import { AssetRegistryPage } from "../pages/AssetRegistryPage";
import { InventoryChecksPage } from "../pages/InventoryChecksPage";
import { NotFoundPage } from "../pages/NotFoundPage";
import { ProfilePage } from "../pages/ProfilePage";
import { ReimbursementDetailPage } from "../pages/ReimbursementDetailPage";
import { ReimbursementsPage } from "../pages/ReimbursementsPage";
import { UserManagementPage } from "../pages/UserManagementPage";
import { WorkflowTaskDetailPage } from "../pages/WorkflowTaskDetailPage";
import { WorkflowTasksPage } from "../pages/WorkflowTasksPage";
import { GuestOnly, RequireAuth, RequirePermission } from "./guards";

export function AppRouter() {
  return (
    <Routes>
      <Route
        path="/login"
        element={
          <GuestOnly>
            <AuthLayout />
          </GuestOnly>
        }
      >
        <Route index element={<LoginPage />} />
      </Route>

      <Route
        path="/change-password"
        element={
          <RequireAuth>
            <AuthLayout />
          </RequireAuth>
        }
      >
        <Route index element={<ChangePasswordPage />} />
      </Route>

      <Route
        path="/"
        element={
          <RequireAuth>
            <AppShellLayout />
          </RequireAuth>
        }
      >
        <Route index element={<Navigate to="/dashboard" replace />} />
        <Route path="dashboard" element={<DashboardPage />} />

        <Route
          path="budgets"
          element={
            <RequirePermission anyOf={["budget.view", "budget.manage"]}>
              <BudgetsPage />
            </RequirePermission>
          }
        />

        <Route
          path="reimbursements"
          element={
            <RequirePermission anyOf={["expense.view_own", "expense.view_all"]}>
              <ReimbursementsPage />
            </RequirePermission>
          }
        />

        <Route
          path="reimbursements/:reimbursementId"
          element={
            <RequirePermission anyOf={["expense.view_own", "expense.view_all"]}>
              <ReimbursementDetailPage />
            </RequirePermission>
          }
        />

        <Route
          path="leave-requests"
          element={
            <RequirePermission anyOf={["leave.view_own", "leave.view_all"]}>
              <LeaveRequestPage />
            </RequirePermission>
          }
        />

        <Route
          path="purchase-requests"
          element={
            <RequirePermission anyOf={["procurement.create", "procurement.view_own", "procurement.view_all", "procurement.manage"]}>
              <PurchaseRequestsPage />
            </RequirePermission>
          }
        />

        <Route
          path="travel-requests"
          element={
            <RequirePermission anyOf={["travel.create", "travel.view_own", "travel.view_all", "travel.manage"]}>
              <TravelRequestsPage />
            </RequirePermission>
          }
        />

        <Route
          path="assets"
          element={
            <RequirePermission anyOf={["asset.view_own", "asset.view_all", "asset.manage", "asset.transfer", "asset.inventory"]}>
              <AssetRegistryPage />
            </RequirePermission>
          }
        />

        <Route
          path="inventory-checks"
          element={
            <RequirePermission anyOf={["asset.inventory"]}>
              <InventoryChecksPage />
            </RequirePermission>
          }
        />

        <Route
          path="workflow/tasks"
          element={
            <RequirePermission anyOf={["expense.approve", "leave.approve", "procurement.approve", "travel.approve"]}>
              <WorkflowTasksPage />
            </RequirePermission>
          }
        />

        <Route
          path="workflow/tasks/:taskId"
          element={
            <RequirePermission anyOf={["expense.approve", "leave.approve", "procurement.approve", "travel.approve"]}>
              <WorkflowTaskDetailPage />
            </RequirePermission>
          }
        />

        <Route
          path="invoice-pool"
          element={
            <RequirePermission anyOf={["invoice.upload", "invoice.view_own", "invoice.manage"]}>
              <InvoicePoolPage />
            </RequirePermission>
          }
        />

        <Route
          path="mobile/capture"
          element={
            <RequirePermission anyOf={["invoice.upload", "invoice.manage"]}>
              <MobileCapturePage />
            </RequirePermission>
          }
        />

        <Route
          path="mobile/approvals"
          element={
            <RequirePermission anyOf={["expense.approve", "leave.approve", "procurement.approve", "travel.approve"]}>
              <MobileApprovalsPage />
            </RequirePermission>
          }
        />

        <Route path="notifications" element={<NotificationsPage />} />

        <Route
          path="audit-logs"
          element={
            <RequirePermission anyOf={["system.audit.view"]}>
              <AuditLogsPage />
            </RequirePermission>
          }
        />

        <Route
          path="delegations"
          element={
            <RequirePermission anyOf={["expense.proxy_manage"]}>
              <DelegationsPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/users"
          element={
            <RequirePermission anyOf={["system.users"]}>
              <UserManagementPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/departments"
          element={
            <RequirePermission anyOf={["system.users"]}>
              <DepartmentsPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/master-data"
          element={
            <RequirePermission anyOf={["masterdata.view", "masterdata.manage"]}>
              <MasterDataPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/notification-channels"
          element={
            <RequirePermission anyOf={["notification.channel.manage"]}>
              <NotificationChannelsPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/integrations/erp"
          element={
            <RequirePermission anyOf={["integration.manage"]}>
              <ErpIntegrationPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/approval-rules"
          element={
            <RequirePermission anyOf={["system.settings"]}>
              <ApprovalRulesPage />
            </RequirePermission>
          }
        />

        <Route
          path="system/feature-flags"
          element={
            <RequirePermission anyOf={["system.settings"]}>
              <FeatureFlagsPage />
            </RequirePermission>
          }
        />

        <Route path="settings/profile" element={<ProfilePage />} />
      </Route>

      <Route path="/403" element={<ForbiddenPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}