# UNACH Admin · UI kit

A high-fidelity recreation of the **administrative dashboard archetype** for UNACH systems, aligned with the DTI's Angular Material + Fuse Angular template stack. This kit is **not production code** — it's a cosmetic-fidelity prototype meant to be lifted into mocks, slides, and click-throughs.

## What's here

- `index.html` — full click-through prototype: Login → Dashboard → Students table → Detail drawer → 404
- `app.jsx` — root: routing-by-state, layout
- `components.jsx` — shared UI building blocks (Sidebar, TopBar, Breadcrumb, Card, Button, Input, Badge, Toast, Modal, EmptyState, DataTable, Footer)
- `screens.jsx` — screen-level views (LoginScreen, DashboardScreen, StudentsScreen, NotFoundScreen, ForbiddenScreen)

## Anatomy (per institutional doc §Navegación y Estructura de Pantalla)

```
┌────────────────────────────────────────────────────────────────┐
│  TopBar — search · notifications · user menu                   │
├──────────┬─────────────────────────────────────────────────────┤
│          │  Breadcrumb · Page title                            │
│ Sidebar  │ ────────────────────────────────────────────────── │
│ logo +   │                                                     │
│ system   │  Page content                                       │
│ name +   │                                                     │
│ nav      │                                                     │
│          │                                                     │
├──────────┴─────────────────────────────────────────────────────┤
│  Footer — institución · soporte · versión                      │
└────────────────────────────────────────────────────────────────┘
```

## Screens demoed

| Screen | Doc obligation |
|---|---|
| Login (SSO) | Obligatoria |
| Dashboard | Obligatoria — personalised welcome |
| Students table | Demonstrates DataTable + filters + actions |
| Student detail | Demonstrates drawer + form + action confirmation |
| Empty state | Obligatoria — when a filter yields no rows |
| 404 / 403 | Obligatorias |

## Notes

- **Sidebar** is the canonical navigation surface. Active item uses Solar `Bold` icon variant in `--color-primary`.
- **Buttons** use `min-height: 40px` per doc spec.
- **All copy is Spanish (es-CL)**, formal institutional voice.
