Expand description
Admin UI generator for Gize (ADR-006).
gize make admin generates a separate Vite + React + TypeScript SPA under admin/,
driven by the manifest. The app is data-driven: resources_ts emits one descriptor
(fields + a Zod schema) per resource from gize.toml, and a single generic Resource
component renders List/Create/Edit/Delete for any of them. It talks to the backend through
a Vite dev proxy (/api → the API), so no CORS or backend changes are needed.
Templates are Rust functions returning file contents (like gize-templates); the
generator (gize-generator) assembles them into a Plan.
Functions§
- api_ts
admin/src/api.ts— a tiny typed fetch client that attaches the JWT and hits/api.- app_tsx
admin/src/App.tsx— the shell: auth gate, a sidebar of resources, and the active screen.- auth_
tsx admin/src/auth.tsx— token storage hook and a login screen.- env_
example admin/.env.example.- gitignore
admin/.gitignore.- index_
html admin/index.html.- main_
tsx admin/src/main.tsx.- package_
json admin/package.json— the SPA’s dependencies and scripts.- resource_
tsx admin/src/Resource.tsx— the generic CRUD screen (list + search + pagination + a form for create/edit + delete), driven by a resource descriptor.- resources_
ts admin/src/resources.ts— the descriptors generated from the manifest (ADR-006): one entry per resource with its editable fields and a Zod schema mirroring the backend validation.- styles_
css admin/src/styles.css— Tailwind v4 entry.- tsconfig
admin/tsconfig.json.- vite_
config admin/vite.config.ts— React + Tailwind, and a dev proxy so/api/*reaches the backend (avoids CORS in development; ADR-006).