Admin Panel
Internal operations surface — content curation, user management, subscription oversight, system health, and audit logs. Used by the Workshopr team, not customers. Lower design-system priority, but still earns adoption.
App Identity
Phase
Internal (no phase)
Primary Color
--gray-700
(neutral)
Font Stack
Fraunces + Inter
Design Philosophy
Admin is a power-user tool, not a product surface. Prioritize information density, keyboard navigation, and scannable tables. Borrows from operational consoles (Stripe Dashboard, Linear admin, Supabase Studio) rather than consumer UI.
table_rows
Tables are primary
Users, subscriptions, exercises, logs — all tabular. Dense rows (36–40px), tight padding, sortable columns, inline actions. No "pretty cards" for operational data.
keyboard
Keyboard-navigable
Power users live in the keyboard. Focus rings visible, tab order logical, common actions bound (e.g., / for search). Never swallow keyboard events in modals.
shield_person
Destructive actions need friction
Delete user, revoke subscription, wipe cache — always behind a confirm modal with the target name typed back. Admin mistakes affect real customers.
palette
Neutral palette, phase accents
Backgrounds are warm gray. Accents come from status (green/amber/red for success/warn/error). Brand phase colors appear only when linking to phase-owned entities (a blue badge next to a saved plan).
Key Patterns
| Area | Pattern | Files |
|---|---|---|
| Admin shell | Sidebar nav + breadcrumbed main pane + consistent header with search. | /admin/ |
| Data tables | Sortable, filterable, paginated. Row-level actions in a kebab menu. | /admin/api/* + matching PHP views |
| Detail drawers | Click a row → side drawer opens with detail/edit. Preserves list context. | uses ws_modal variant=drawer |
| Audit logs | Chronological event feed with actor, action, target, diff. | /admin/audit/ (if present) |
| Content curation | Exercise/icebreaker/workshop CRUD with preview, validation, and publish state. | /admin/content/ |
Do / Don't
Do: Default to tables for any list of 10+
Admins need to scan, sort, filter. Cards add visual weight without helping.
Don't: Copy the planner's listing-card pattern into admin
Listing cards are for consumer browsing. Admin needs rows of 40+ items at once.
Do: Use phase colors as inline status badges
A "plan" entity shows a small blue dot. A "coach session" shows green. Instant wayfinding in long tables.
Don't: Theme the whole admin surface in a phase color
Admin spans every phase — picking one muddies the signal. Keep chrome neutral.
Do: Confirm destructive actions with typed confirmation
"Type DELETE to confirm" or "Type the user's email to confirm." Mistakes hurt real customers.
Don't: Ship one-click deletes on user/subscription/content tables
A misclick in a dense table is easy. Friction is safety here.
File Reference
| Path | Purpose |
|---|---|
/admin/ | Admin root |
/admin/api/ | Admin-specific API endpoints |
/css/admin/admin.css | Admin shell + table styles |