Frontend — Employee Management UI#
What you build. A React + Mantine admin console with list, detail, new, and edit screens for Departments and Employees. A foreign-key picker on the Employee form calls back into the Department API without any page-specific fetch code.
Audience. React developers familiar with Mantine and Vite. We skip basics (what JSX is, how useState works) and concentrate on the Palmyra wiring: store factory, endpoint config, grid and form templates, server-lookup.
Steps#
| # | Step | What you learn |
|---|---|---|
| 1 | Project setup | Vite + Mantine + the three Palmyra packages (palmyra-wire, rt-forms-mantine, template-tribble); routing shell |
| 2 | Store factory + endpoints | One factory for every network call; central endpoint config; shared error handler |
| 3 | Department screens | SummaryGrid, DialogNewForm / DialogEditForm, view page pattern |
| 4 | Employee screens | Dotted-attribute columns (FK projection), MantineServerLookup, status badges |
What’s Palmyra-specific, what isn’t#
| You still write | Palmyra handles |
|---|---|
| React router setup, layout chrome, navigation | HTTP plumbing (no axios / fetch in page components) |
| Column definitions and cell renderers | Query params, paging, sort, search |
Form field lists (Mantine inputs with attribute names) |
Form state, validation, dirty-check, submit |
| Component composition + any app-specific UX | Grid ↔ store ↔ form lifecycle; refresh after save; 401 / 403 error toasts |
Every page you write is small — grids are data, forms are field lists — because the heavy lifting is in the templates and the store factory.