# Fallback Screens Frontend

The frontend module provides fallback UI for app-level error and recovery states.

Source: `apps/admin/src/core/FallbackScreens/`

## Directory Structure

```txt
FallbackScreens/
  config/        Routes, messages, and translations.
  pages/         Route-level fallback pages.
  view/
    layouts/     Shared fallback page layout.
```

## Routes

Frontend route config:

```txt
config/routing.tsx
```

Mounted route path:

```txt
/error/*
```

| Route        | Page           | Purpose                              |
| ------------ | -------------- | ------------------------------------ |
| `/error`     | `Error404Page` | Default fallback route.              |
| `/error/403` | `Error403Page` | Forbidden or permission denied page. |
| `/error/404` | `Error404Page` | Not found page.                      |
| `/error/500` | `Error500Page` | Internal server error page.          |

Unknown `/error/*` paths redirect to `/error/404`.

## App Integration

The app-level router mounts `fallbackScreensRoute` from:

```txt
apps/admin/src/app/routing/app_routing_setup.tsx
```

The app-level i18n config merges `fallbackScreensMessages` from:

```txt
apps/admin/src/app/i18n/config.ts
```

## Translations

Translations are module-local:

```txt
config/messages.ts
config/translation/en.json
config/translation/uk.json
```

Use only `FALLBACK_SCREENS.*` keys inside this module.

Do not put fallback page strings in app-level files such as:

```txt
apps/admin/src/app/i18n/messages/en.json
apps/admin/src/app/i18n/messages/uk.json
```

## Page Conventions

- Keep route-level fallback pages under `pages/*Page/index.tsx`.
- Keep shared wrapper layout under `view/layouts/`.
- Keep public URLs stable unless there is a migration plan.
- Prefer module-local translation keys for all visible text, including generic-looking actions like return-home links.
- Add a route only when the fallback is intended to be navigable. Inline-only reusable fallbacks can be exported without a route.