Demo data and workflows

Business feature architecture

Chart colors are shared CSS variables in src/styles/theme.css: --chart-1 follows the active accent, --chart-2 through --chart-5 provide distinct theme-derived series, and --chart-soft / --chart-faint provide matching tints. src/components/chartColors.ts exposes these tokens for SVG and CSS chart components. Keep chart shapes, gradients and legends on the same token; do not replace them with fixed palette colors. Tokens also update in dark mode without resetting chart data or filters. Semantic success/error colors remain independent of the chosen brand palette.

src/features/business/ owns one connected domain:

• model.ts: entity types, action union, formatting, and persisted-data validation.
• seed.ts: fictional customers with .example addresses, related projects, products, orders, and activity. Dates are relative to the initial demo creation date.
• reducer.ts: immutable business transitions, inventory reservation/restoration, duplicate-email validation, and demonstration role checks.
• api.ts: asynchronous local demo service, including simulated failure and session expiry checks.
• BusinessProvider.tsx: serializes mutations, holds the current snapshot, and persists validated data. Storage failures are surfaced to users.
• context.ts / useMutation.ts: typed consumer hooks and save state.
• httpApi.ts: optional typed HTTP adapter example for a buyer-owned backend.
• ResourceTable.tsx: search, sorting, column filtering/visibility, page size, selection, CSV export, and empty states.
• Route pages compose these pieces; shared tokens are in src/styles/theme.css; responsive layouts are in src/styles/pro.css.

The original component demos remain available from the collapsible library navigation. The original main dashboard is retained at /#/classic. These older examples are separate from the connected business records and may use page-session state. The previous filename aliases remain supported.

Try a complete workflow

1. Add a customer in Customers. Open its profile and change the trial to Active with a plan. The SaaS dashboard's subscription figures update.
2. Create a project for that customer. Move it through the board by dragging or using the accessible status selector. The customer detail links back to its projects.
3. Create an order: select customer, select product/quantity, review, confirm. The unit price comes from the catalog and stock is reserved atomically.
4. Mark the order Packed, then Shipped; or cancel before shipping. Cancellation restores stock once. Shipped/cancelled orders are closed to further transitions.
5. Search or filter a table, choose visible columns, and export the filtered/sorted records. CSV cells neutralize leading formula characters.
6. Archive customers in bulk. Existing projects and orders remain linked. Archived customers cannot receive new orders.

Separate project examples

/work/projects is the connected business board. /projects is a legacy table with page-session records; it does not update workspace records.

Workspace content pages

/workspace summarizes current business records and provides appearance shortcuts, role previews, network-failure simulation, JSON export and administrator-only sample-data reset. Appearance controls use the same preferences as /settings. Counts are derived from current records. Export includes business data and activity; resetting records leaves appearance preferences unchanged.

Authentication previews use /login, /register, /login-v2, /register-v2 and /forgot-password. V2 recovery carries ?variant=v2 to retain its layout and return destination. Email is passed between related screens through navigation state; passwords are cleared after valid submission and are never persisted by these components. These routes validate sample form data only: no account, session or email is created. Sign-in completion links to /workspace-login for the existing demo role selector. Connect a real authentication service separately for production use.

/profile is the professional team profile with skills and project progress. /profile/2 uses a separate creator layout with a photo cover, bio, journal posts, gallery/lightbox and connection cards. Both accept ?contact=<id>. Creator follows, likes, saved posts and demo notes are temporary React state and reset when changing people or leaving the page. Counts reflect the displayed demo records. Photos come from the existing bundled collection; see IMAGE-ASSETS.md for provenance.

Timeline supports date/category/search filters and a compact view. Horizontal timeline presents six navigable project milestones. FAQ contains searchable topic groups. Blog and article routes share src/data/articles.ts, including covers, excerpts, sections and related stories; invalid article IDs show a recovery link.

Search keeps query, result type and page in URL parameters, including browser history navigation. Issue tracker supports combined filters and local issue creation/editing. Issue changes and article comments are temporary page-session demonstrations; connect an API for persistent data. Shared page styles live in src/styles/workspace-pages.css.

Storage

Browser demo records

Different browser origins keep separate records. Session-only page examples reset when leaving or reloading. Export wanted records before resetting browser data.