# Frontend application map (Next.js App Router)

High-level map of major route groups under `frontend/src/app`. Exact files change with development; regenerate this section when large IA moves occur.

## Top-level route groups

```mermaid
flowchart TB
  subgraph Auth["Auth"]
    LOGIN["/login"]
    REG["/register"]
  end

  subgraph Workspace["Staff workspace"]
    DASH["/dashboard"]
    GR["/grants"]
    PR["/procurement"]
    HR["/hr"]
    ME["/me"]
    ST["/settings"]
    TR["/travel"]
    AT["/attendance"]
    AP["/approvals"]
  end

  subgraph PublicSupplier["Supplier public"]
    VH["/vendor-hub/:orgUuid"]
  end

  subgraph Other["Other"]
    PF["/platform"]
    KI["/kiosk"]
  end

  LOGIN --> DASH
  REG --> DASH
```

## Vendor hub sub-routes

```mermaid
flowchart LR
  H["/vendor-hub/:orgUuid"] --> R["/register"]
  H --> L["/login"]
  H --> P["/portal"]
```

## Settings IA (representative)

```mermaid
mindmap
  root((/settings))
    General
    Currencies
    Branding
    Policy and modules
    Approvals
    HR and leave
    Roles
    RBAC
    Notifications
    Invitations
```

## Data fetching pattern

```mermaid
sequenceDiagram
  participant Page as React client page
  participant API as NEXT_PUBLIC_API_URL
  participant L as Laravel

  Page->>API: apiFetch / publicApiFetch / vendorPortalApiFetch
  API->>L: /api/...
  L-->>API: JSON
  API-->>Page: render
```

Staff pages typically use `apiFetch` with `auth_token` from `localStorage`. Vendor portal pages use `vendorPortalApiFetch` with `ngoerp_vendor_portal_token`.
