Shared Design System & Layout Reuse
Goal
Central and Tenant applications share one visual and structural foundation. Users moving between platform admin and workspace surfaces should recognize the same shell immediately.
Business functionality will differentiate the apps later; the shell must not require another layout refactor when that happens.
Design system
| Concern | Shared source |
|---|---|
| Colors, typography, spacing | Global CSS / Tailwind theme tokens |
| Primitives | EloSync-Frontend/src/components/ui |
| Page helpers | components/common (headers, empty/loading/error states) |
| App chrome | layouts/app-layout.tsx + components/layout |
| Motion / density | Compact admin density: Inter, sidebar w-60 / collapsed w-14, topbar h-14, content px-4–px-6, control h-9 |
| Keyboard shortcuts | Global: GlobalShortcuts (mod+b); pages: mod+k command palette; modules: useModuleShortcuts (n create, mod+f search) |
| Kanban board | components/crm/kanban-board.tsx inside ModuleListSurface — per-column vertical scroll (titles fixed), contained horizontal scroll (data-kanban-board), document auto-scroll disabled during drag |
Central-specific dashboard widgets (tenant analytics, platform health, marketplace shortcuts) stay in components/dashboard and are not reused on the Tenant dashboard.
Tenant dashboard reuses shell + WidgetContainer patterns and renders widgets from GET /api/tenant/v1/dashboard (module + permission + assignee scoped).
Layout reuse strategy
- One
AppLayoutwraps both protected route trees.ScrollToTop(inside the router) resets window scroll on pathname changes so the persistent shell does not keep the previous page’s scroll. - Navigation is data, not duplicated components — swap groups by
AuthContext. - Route helpers resolve dashboard / profile / settings / login per context.
- Business pages own their content; they must not fork the shell.
- Modules ship real pages (mirror Leads); placeholders are only transitional.
Evolution
| Phase | Central | Tenant |
|---|---|---|
| Now | Platform metrics dashboard | Widget registry dashboard (Leads/Tasks/Calendar scoped) |
| Later | Platform-focused metrics stay | More module-driven widgets (Invoices, …) |
| Shell | Remains shared | Remains shared |
Installed module subscriptions and Spatie permissions drive Tenant sidebar visibility. Sidebar groups follow catalog categories and collapse except for the current-route section.