Skip to content

Admin

The Syntec One admin is the Angular 20 web client for the platform. It is metadata-driven on the front end too: it fetches resolved view and form specifications from the platform API and renders them with generic components, so screens are configured on the server rather than hand-coded here.

Stack

  • Angular 20, standalone components, signals for state (no NgRx).
  • @syntec/one-sdk — the generated TypeScript client for the platform API (consumed from the sibling platform repo).
  • Vitest for unit tests; Docker for the dev server.
  • OAuth2-style auth against the platform; light/dark theming.

How it fits together

Routes ─► Shell (menu, page chrome, theming)
            │
            ├─ View feature   ── ViewService ─┐
            │   (grid: filter/sort/search,    │
            │    variants, embedded grids)     ├─► @syntec/one-sdk ──HTTP──► platform API
            │                                  │
            └─ Form feature   ── FormService ─┘
                (renderer: fields → widgets,
                 validation, modals)

The platform returns a resolved spec (columns for a view, a component tree for a form); the admin's generic ViewGrid and form renderer turn that spec into UI and send edits back through the SDK.

Where things live (src/app)

Directory Responsibility
core Services and cross-cutting state: FormService, ViewService, the SDK client token, auth, locale
features The screens: view (the data grid) and form (the form renderer + modals)
framework Generic building blocks (page chrome, controller helpers, actions)
shell App shell — menu, layout, navigation
theming Light/dark theme service and tokens

Next