# Frontend architecture

This project is the Lendwise admin workspace UI in `apps/web`. The borrower-facing marketplace is intentionally not included in this frontend scope.

## App structure

```text
apps/web/src/
  app/                    App entry, route guards, Redux store, navigation
  components/             Shared UI, dashboard, record table and modal components
  layouts/                Admin layout entry point
  pages/                  Route-level screen exports
  routes/                 MainRouter and route declarations
  hooks/                  Typed Redux hooks
  schemas/                Shared Yup form schemas
  types/                  Domain and auth type exports
  ts/                     Shared TypeScript utility types
  features/                Feature-owned pages, models and state
    account/pages/         Profile and settings
    applications/          Application page and application.model.ts
    auth/                  Login/forgot pages, authSlice and auth types
    customers/              Customer page and customer.model.ts
    dashboard/pages/       Overview dashboard
    lenders/                Lender page and lender.model.ts
    products/               Loan product page and loanProduct.model.ts
    records/                Shared configurable CRUD page and recordsSlice
    reports/pages/          Reports page
  services/api.ts           Axios client, interceptors and API methods
  shared/toast.ts           SweetAlert2 toast/confirmation helpers
  styles/                   Global admin styles
```

## Routes and navigation

All route declarations live in `apps/web/src/routes/MainRouter.tsx`. `GuestRoute` keeps signed-in admins out of login/recovery screens. `ProtectedRoute` preserves the requested URL and sends signed-out users to login; after sign-in they return to that URL. Protected routes render inside `AdminLayout`:

| Route | Page | Domain model | CRUD tab resource |
| --- | --- | --- | --- |
| `/` | DashboardPage | summary metrics | — |
| `/applications` | ApplicationsPage | `ApplicationModel` | applications |
| `/customers` | CustomersPage | `CustomerModel` | customers |
| `/lenders` | LendersPage | `LenderModel` | lenders |
| `/products` | LoanProductsPage | `LoanProductModel` | products |
| `/reports` | ReportsPage | report summaries | — |
| `/profile` | ProfilePage | admin profile | — |
| `/settings` | SettingsPage | workspace settings | — |

Each entity page delegates its searchable, filterable CRUD table and view/create/edit modal to `features/records`, configured through `features/records/config.ts`. This keeps each feature's route/page/model separate while reusing the same CRUD UI.

## Redux Toolkit

`apps/web/src/app/store.ts` combines two independently maintained slices:

- `features/auth/store/authSlice.ts` owns signed-in state and the administrator's name/email. Auth UI and reducer remain separate from domain record state.
- `features/records/store/recordsSlice.ts` owns the demo records used by applications, customers, lenders and products.

Use typed `RootState` and `AppDispatch` from `app/store.ts` for selectors and dispatches.

## API layer

`apps/web/src/services/api.ts` provides a shared Axios instance with request/response interceptors and `apiGet`, `apiPost`, `apiPatch`, and `apiDelete` methods. The local demo adapter supplies seed data when `VITE_API_URL` is not configured; set `VITE_API_URL` to route requests to a backend. Resource pages use the same API methods for list/create/update/delete operations.

## Forms and feedback

Login, forgot password, record create/edit/view, profile, and workspace details use Formik with Yup validation. Shared validation schemas live in `apps/web/src/schemas`. SweetAlert2 helpers in `apps/web/src/shared/toast.ts` handle success/error notifications and destructive-action confirmation.

## Run locally

From `Frontend/`, run `npm run dev`. `npm run build` delegates to `apps/web` for TypeScript compilation and the Vite production build.