@svgrid/enterprise 2.5.2 → 2.6.0

package/dist/studio/samples/insurance.js

@@ -0,0 +1,220 @@
+import { screen, formScreen, boardScreen, calendarScreen, detailScreen, project, dashScreen, statusPills, pad, ids, whenIs } from './shared.js';
+// SAP Fiori-style chrome: a dark shell bar across the top (the toolbar), a white
+// launchpad-style rail, and a blue left-bar on the active item (square corners).
+const FIORI_CSS = `.sv-app.theme-fiori .sv-app__toolbar { background: #354a5f; border-bottom: 0; }
+.sv-app.theme-fiori .sv-app__search { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
+.sv-app.theme-fiori .sv-app__search-in { color: #fff; }
+.sv-app.theme-fiori .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.72); }
+.sv-app.theme-fiori .sv-app__search-ic, .sv-app.theme-fiori .sv-app__kbd { color: #fff; }
+.sv-app.theme-fiori .sv-app__side { background: #fff; border-right: 1px solid #e5e5e5; }
+.sv-app.theme-fiori .sv-app__brandtext { color: #0a6ed1; font-weight: 700; }
+.sv-app.theme-fiori .sv-app__link { border-radius: 0; padding: 9px 12px; border-left: 3px solid transparent; color: #32363a; }
+.sv-app.theme-fiori .sv-app__link:hover { background: #f5f6f7; }
+.sv-app.theme-fiori .sv-app__link.is-active { background: #ebf5ff; color: #0a6ed1; border-left-color: #0a6ed1; font-weight: 600; }`;
+const policies = {
+    name: 'policies',
+    label: 'Policy',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'policyNumber', type: 'text', label: 'Policy #', required: true, input: { editorType: 'mask', mask: 'POL-######', help: 'Policy identifier' } },
+        { field: 'holder', type: 'text', label: 'Policy holder', required: true, minLength: 2 },
+        { field: 'email', type: 'text', label: 'Email', format: 'email', required: true, input: { placeholder: 'holder@example.com' } },
+        { field: 'type', type: 'enum', label: 'Line', required: true, options: [
+                { value: 'auto', label: 'Auto', color: '#6366f1' },
+                { value: 'home', label: 'Home', color: '#10b981' },
+                { value: 'life', label: 'Life', color: '#f59e0b' },
+                { value: 'health', label: 'Health', color: '#ef4444' },
+            ] },
+        { field: 'region', type: 'text', label: 'Region', input: { editorType: 'country', help: 'Underwriting region' } },
+        { field: 'premium', type: 'number', label: 'Premium ($)', min: 0, required: true },
+        { field: 'coverage', type: 'number', label: 'Coverage ($)', min: 0, required: true },
+        { field: 'riskScore', type: 'number', label: 'Risk', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1 (low) - 5 (high) underwriting risk' } },
+        { field: 'status', type: 'enum', label: 'Status', defaultValue: 'active', options: [
+                { value: 'active', label: 'Active', color: '#10b981' },
+                { value: 'lapsed', label: 'Lapsed', color: '#f59e0b' },
+                { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+            ] },
+        { field: 'startDate', type: 'date', label: 'Start date' },
+    ],
+};
+const adjusters = {
+    name: 'adjusters',
+    label: 'Adjuster',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'email', type: 'text', format: 'email', required: true },
+        { field: 'phone', type: 'text', input: { editorType: 'phone' } },
+        { field: 'region', type: 'text', label: 'Region', input: { editorType: 'country' } },
+        { field: 'specialty', type: 'enum', label: 'Specialty', options: [
+                { value: 'auto', label: 'Auto', color: '#6366f1' },
+                { value: 'property', label: 'Property', color: '#10b981' },
+                { value: 'medical', label: 'Medical', color: '#ef4444' },
+                { value: 'liability', label: 'Liability', color: '#f59e0b' },
+            ] },
+        { field: 'rating', type: 'number', label: 'Rating', min: 1, max: 5, defaultValue: 4, input: { editorType: 'rating', help: 'Resolution quality' } },
+        { field: 'color', type: 'text', label: 'Accent', defaultValue: '#0ea5e9', input: { editorType: 'color', help: 'Chart accent color' } },
+        { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+    ],
+};
+const claims = {
+    name: 'claims',
+    label: 'Claim',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'claimNumber', type: 'text', label: 'Claim #', required: true, input: { editorType: 'mask', mask: 'CLM-######', help: 'Claim reference' } },
+        { field: 'policyId', type: 'relation', label: 'Policy', required: true, relation: { entity: 'policies', foreignKey: 'policyId', labelField: 'policyNumber' } },
+        { field: 'adjusterId', type: 'relation', label: 'Adjuster', relation: { entity: 'adjusters', foreignKey: 'adjusterId', labelField: 'name' } },
+        { field: 'type', type: 'enum', label: 'Type', required: true, options: [
+                { value: 'collision', label: 'Collision', color: '#6366f1' },
+                { value: 'theft', label: 'Theft', color: '#8b5cf6' },
+                { value: 'fire', label: 'Fire', color: '#ef4444' },
+                { value: 'water', label: 'Water', color: '#0ea5e9' },
+                { value: 'medical', label: 'Medical', color: '#10b981' },
+            ] },
+        { field: 'status', type: 'enum', label: 'Status', required: true, defaultValue: 'filed', options: [
+                { value: 'filed', label: 'Filed', color: '#94a3b8' },
+                { value: 'review', label: 'In review', color: '#0ea5e9' },
+                { value: 'approved', label: 'Approved', color: '#6366f1' },
+                { value: 'paid', label: 'Paid', color: '#10b981' },
+                { value: 'denied', label: 'Denied', color: '#ef4444' },
+            ] },
+        // Money is frozen once the claim has been paid out - the figures stay on
+        // screen for reference, but they can no longer be edited.
+        { field: 'amount', type: 'number', label: 'Amount ($)', min: 0, required: true, when: { disabled: whenIs('status', 'paid') } },
+        { field: 'deductible', type: 'number', label: 'Deductible ($)', min: 0, defaultValue: 500, when: { disabled: whenIs('status', 'paid') } },
+        // A denial has to be justified, and only a denial asks for it.
+        { field: 'denialReason', type: 'text', label: 'Reason for denial', hidden: { grid: true },
+            input: { editorType: 'textarea', span: 2, help: 'Required to deny a claim' },
+            when: { visible: whenIs('status', 'denied'), required: whenIs('status', 'denied') } },
+        // Derived: net payout after the deductible (display-only, never stored).
+        { field: 'net', type: 'number', label: 'Net payout ($)', readonly: true, formula: 'amount - deductible' },
+        { field: 'severity', type: 'number', label: 'Severity', min: 0, max: 100, defaultValue: 40, input: { editorType: 'slider', suffix: '%', help: 'Loss severity 0-100' } },
+        { field: 'fraudRisk', type: 'number', label: 'Fraud risk', min: 1, max: 5, defaultValue: 1, input: { editorType: 'rating', help: 'Fraud indicators 1-5' } },
+        { field: 'tags', type: 'text', label: 'Tags', input: { editorType: 'chips', help: 'Triage keywords' } },
+        { field: 'incidentDate', type: 'date', label: 'Incident date' },
+        { field: 'filedAt', type: 'datetime', label: 'Filed at', input: { editorType: 'datetime', help: 'When the claim was filed' } },
+    ],
+};
+const seed = {
+    policies: [
+        { id: 'pl1', policyNumber: 'POL-100001', holder: 'Oliver Grant', email: 'oliver.grant@example.com', type: 'auto', region: 'United States', premium: 1200, coverage: 45000, riskScore: 2, status: 'active', startDate: '2024-03-01' },
+        { id: 'pl2', policyNumber: 'POL-100002', holder: 'Maya Fernandez', email: 'maya.fernandez@example.com', type: 'home', region: 'Spain', premium: 980, coverage: 320000, riskScore: 3, status: 'active', startDate: '2023-11-15' },
+        { id: 'pl3', policyNumber: 'POL-100003', holder: 'Noah Kim', email: 'noah.kim@example.com', type: 'health', region: 'South Korea', premium: 2100, coverage: 150000, riskScore: 4, status: 'active', startDate: '2025-01-08' },
+        { id: 'pl4', policyNumber: 'POL-100004', holder: 'Sophia Rossi', email: 'sophia.rossi@example.com', type: 'life', region: 'Italy', premium: 1650, coverage: 500000, riskScore: 2, status: 'lapsed', startDate: '2022-06-20' },
+        { id: 'pl5', policyNumber: 'POL-100005', holder: 'Ethan Walsh', email: 'ethan.walsh@example.com', type: 'auto', region: 'United States', premium: 1420, coverage: 52000, riskScore: 5, status: 'active', startDate: '2024-09-12' },
+        { id: 'pl6', policyNumber: 'POL-100006', holder: 'Amara Okafor', email: 'amara.okafor@example.com', type: 'home', region: 'Nigeria', premium: 760, coverage: 210000, riskScore: 3, status: 'cancelled', startDate: '2023-02-28' },
+        { id: 'pl7', policyNumber: 'POL-100007', holder: 'Liam Murphy', email: 'liam.murphy@example.com', type: 'health', region: 'Ireland', premium: 1890, coverage: 180000, riskScore: 4, status: 'active', startDate: '2024-12-01' },
+        { id: 'pl8', policyNumber: 'POL-100008', holder: 'Hana Sato', email: 'hana.sato@example.com', type: 'auto', region: 'Japan', premium: 1310, coverage: 48000, riskScore: 2, status: 'active', startDate: '2025-02-19' },
+    ],
+    adjusters: [
+        { id: 'ad1', name: 'Grace Okonkwo', email: 'grace.okonkwo@insureco.com', phone: '+1 (415) 555-0301', region: 'United States', specialty: 'auto', rating: 5, color: '#6366f1', active: true },
+        { id: 'ad2', name: 'Marcus Bauer', email: 'marcus.bauer@insureco.com', phone: '+49 30 5550302', region: 'Germany', specialty: 'property', rating: 4, color: '#10b981', active: true },
+        { id: 'ad3', name: 'Priya Nair', email: 'priya.nair@insureco.com', phone: '+91 22 5550 303', region: 'India', specialty: 'medical', rating: 5, color: '#ef4444', active: true },
+        { id: 'ad4', name: 'Diego Santos', email: 'diego.santos@insureco.com', phone: '+55 11 95555-0304', region: 'Brazil', specialty: 'liability', rating: 3, color: '#f59e0b', active: true },
+        { id: 'ad5', name: 'Elena Popova', email: 'elena.popova@insureco.com', phone: '+7 495 555 0305', region: 'Russia', specialty: 'property', rating: 4, color: '#8b5cf6', active: false },
+        { id: 'ad6', name: 'Thomas Becker', email: 'thomas.becker@insureco.com', phone: '+1 (206) 555-0306', region: 'United States', specialty: 'auto', rating: 4, color: '#0ea5e9', active: true },
+    ],
+    claims: [
+        { id: 'cl1', claimNumber: 'CLM-500001', policyId: 'pl1', adjusterId: 'ad1', type: 'collision', status: 'paid', amount: 8400, deductible: 500, severity: 55, fraudRisk: 1, tags: ['rear-end', 'no-injury'], incidentDate: '2026-01-04', filedAt: '2026-01-06T09:30:00.000Z' },
+        { id: 'cl2', claimNumber: 'CLM-500002', policyId: 'pl2', adjusterId: 'ad2', type: 'water', status: 'review', amount: 15200, deductible: 1000, severity: 70, fraudRisk: 2, tags: ['burst-pipe'], incidentDate: '2026-02-01', filedAt: '2026-02-03T14:15:00.000Z' },
+        { id: 'cl3', claimNumber: 'CLM-500003', policyId: 'pl3', adjusterId: 'ad3', type: 'medical', status: 'approved', amount: 6200, deductible: 750, severity: 40, fraudRisk: 1, tags: ['surgery'], incidentDate: '2026-02-10', filedAt: '2026-02-12T11:00:00.000Z' },
+        { id: 'cl4', claimNumber: 'CLM-500004', policyId: 'pl5', adjusterId: 'ad1', type: 'theft', status: 'denied', amount: 22000, deductible: 500, severity: 90, fraudRisk: 5, tags: ['suspicious', 'late-report'], incidentDate: '2026-01-20', filedAt: '2026-01-28T16:45:00.000Z', denialReason: 'Loss reported 8 days after the incident, outside the policy window.' },
+        { id: 'cl5', claimNumber: 'CLM-500005', policyId: 'pl6', adjusterId: 'ad4', type: 'fire', status: 'paid', amount: 41000, deductible: 2000, severity: 95, fraudRisk: 2, tags: ['kitchen', 'total-loss'], incidentDate: '2026-03-01', filedAt: '2026-03-02T08:20:00.000Z' },
+        { id: 'cl6', claimNumber: 'CLM-500006', policyId: 'pl7', adjusterId: 'ad3', type: 'medical', status: 'filed', amount: 3100, deductible: 750, severity: 25, fraudRisk: 1, tags: ['ER-visit'], incidentDate: '2026-03-11', filedAt: '2026-03-12T13:10:00.000Z' },
+        { id: 'cl7', claimNumber: 'CLM-500007', policyId: 'pl8', adjusterId: 'ad6', type: 'collision', status: 'review', amount: 9700, deductible: 500, severity: 60, fraudRisk: 3, tags: ['intersection'], incidentDate: '2026-03-15', filedAt: '2026-03-17T10:05:00.000Z' },
+        { id: 'cl8', claimNumber: 'CLM-500008', policyId: 'pl1', adjusterId: 'ad6', type: 'theft', status: 'approved', amount: 5400, deductible: 500, severity: 50, fraudRisk: 2, tags: ['catalytic-converter'], incidentDate: '2026-02-22', filedAt: '2026-02-24T15:30:00.000Z' },
+    ],
+};
+// Claim grid formatting: status pills + a red-bold high-fraud threshold and a
+// green highlight on large approved payouts - data-driven, not just pills.
+const claimFormats = [
+    ...statusPills(claims, 'status'),
+    { field: 'fraudRisk', op: 'gte', value: 4, color: '#dc2626', bold: true },
+    { field: 'amount', op: 'gte', value: 20000, color: '#b45309', bold: true },
+];
+export const insurance = {
+    id: 'insurance',
+    name: 'Insurance Claims',
+    description: 'Policies, adjusters and claims - a SAP Fiori-style claims desk behind a sign-in (adjuster and admin roles), with a claims pipeline board (Filed -> Paid), payout + approval dashboards (target KPIs, a filings sparkline, a severity gauge, type/status breakdowns, an adjuster x status pivot, tabbed views), a fraud-risk red grid, policy master/detail with a claims timeline, and rich edit forms (policy/claim number masks, region, adjuster phone, risk + fraud ratings, severity slider, triage chips, filing datetime).',
+    emoji: '\u{1F6E1}\u{FE0F}',
+    accent: '#0070f2',
+    build: () => {
+        const policyRows = pad(policies, seed.policies, 40);
+        const adjusterRows = pad(adjusters, seed.adjusters, 16);
+        const claimRows = pad(claims, seed.claims, 90, { policyId: ids(policyRows), adjusterId: ids(adjusterRows) });
+        return project({
+            title: 'Claims',
+            brand: 'Assurance',
+            accent: '#0070f2',
+            preset: 'sap',
+            footer: '',
+            // SAP Fiori-style enterprise shell: a dark shell bar + a launchpad rail.
+            appClass: 'theme-fiori',
+            customCss: FIORI_CSS,
+            // Sign-in with two roles. Adjusters work the claims queue but cannot delete;
+            // the policy portfolio and the adjuster roster are admin-only, so they drop
+            // out of an adjuster's nav.
+            auth: { enabled: true, protect: true },
+            access: {
+                enabled: true,
+                defaultRole: 'adjuster',
+                roles: [
+                    { role: 'admin', screens: '*', actions: '*' },
+                    { role: 'adjuster', screens: ['overview', 'pipeline', 'claim-detail', 'claims', 'calendar'], actions: ['create', 'update'] },
+                ],
+            },
+            entities: [policies, adjusters, claims],
+            seed: { policies: policyRows, adjusters: adjusterRows, claims: claimRows },
+            screens: [
+                // Claims dashboard: payout + approval KPIs (total payout carries a target,
+                // filings trend as a sparkline), a severity gauge, type/status breakdowns,
+                // an adjuster x status pivot, tabs, and a fraud-risk status-pill grid that
+                // drills into the claim detail.
+                dashScreen(claims, { id: 'overview', title: 'Claims', order: 0 }, [
+                    { kpi: 'Claims', reduce: 'count', span: 1 },
+                    { kpi: 'Total payout', measure: 'net', reduce: 'sum', format: 'currency', target: 200000, span: 1 },
+                    { kpi: 'Filings', measure: 'amount', reduce: 'count', trendField: 'filedAt', trendReduce: 'count', span: 1 },
+                    { gauge: 'Avg severity', measure: 'severity', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
+                    { chart: 'status', measure: 'amount', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'type', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'filedAt', measure: 'amount', reduce: 'sum', type: 'area', span: 3 },
+                    { pivot: { rows: ['adjusterId'], cols: ['status'], measure: 'amount', aggregate: 'sum' }, span: 3 },
+                    { tabs: [
+                            { label: 'Payout by status', tiles: [{ chart: 'status', measure: 'net', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Claims by type', tiles: [{ chart: 'type', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { grid: true, format: claimFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'claim-detail', sourceField: 'id', targetField: 'id' }, span: 3 },
+                ]),
+                // The signature view: the claims pipeline as draggable Kanban columns by
+                // status, each card the claim number + policy + payout; opens the detail.
+                boardScreen(claims, { id: 'pipeline', title: 'Pipeline', order: 1 }, { groupBy: 'status', titleField: 'claimNumber', subtitleField: 'policyId', badgeField: 'amount', filter: ['status', 'type', 'adjusterId'], openScreen: 'claim-detail' }),
+                // Claim detail: header (claim # + policy + status pill), payout metric
+                // tiles, and Overview sections.
+                detailScreen(claims, { id: 'claim-detail', title: 'Claim detail', order: 2 }, {
+                    titleField: 'claimNumber', subtitleField: 'policyId', statusField: 'status',
+                    metricFields: ['amount', 'net'],
+                    sections: [
+                        { label: 'Assessment', fields: ['type', 'severity', 'fraudRisk', 'tags'] },
+                        { label: 'Handling', fields: ['adjusterId', 'deductible', 'incidentDate', 'filedAt'] },
+                    ],
+                }),
+                // Policy 360: a full policy record with a timeline of its claims.
+                detailScreen(policies, { id: 'policy-360', title: 'Policy 360', order: 3 }, {
+                    titleField: 'policyNumber', subtitleField: 'holder', statusField: 'status',
+                    metricFields: ['premium', 'coverage'],
+                    sections: [{ label: 'Underwriting', fields: ['type', 'region', 'riskScore', 'startDate'] }],
+                    related: [{ entity: 'claims', foreignKey: 'policyId', label: 'Claims', titleField: 'claimNumber', subtitleField: 'amount', dateField: 'filedAt', statusField: 'status' }],
+                }),
+                screen(policies, 'master-detail', { id: 'policies', title: 'Policies', order: 4, child: claims, foreignKey: 'policyId', linkScreen: 'policy-360' }),
+                formScreen(claims, { id: 'claims', title: 'Claims list', order: 5 }, undefined, { format: claimFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'claim-detail', sourceField: 'id', targetField: 'id' } }, ['status', 'type', 'policyId']),
+                formScreen(adjusters, { id: 'adjusters', title: 'Adjusters', order: 6 }, undefined, {}, ['specialty', 'region', 'active']),
+                // Incident calendar: claims placed on a month calendar by incident date.
+                calendarScreen(claims, { id: 'calendar', title: 'Incidents', order: 7 }, { dateField: 'incidentDate', titleField: 'claimNumber', filter: ['status', 'type', 'adjusterId'] }),
+            ],
+        });
+    },
+};

package/dist/studio/samples/inventory.d.ts

@@ -0,0 +1,2 @@
+import { type SampleApp } from './shared.js';
+export declare const inventory: SampleApp;

package/dist/studio/samples/inventory.js

@@ -0,0 +1,204 @@
+import { screen, formScreen, boardScreen, detailScreen, project, dashScreen, statusPills, pad, ids } from './shared.js';
+// Excel-style chrome: a green header band over the brand, a green command bar
+// (the toolbar), square-cornered nav rows with a green left-marker on the active
+// sheet. Pairs with the square-cornered `excel` preset.
+const EXCEL_CSS = `.sv-app.theme-excel .sv-app__side { background: #f3f2f1; border-right: 1px solid #d0cfce; padding: 0 0 12px; }
+.sv-app.theme-excel .sv-app__sidehead { background: #107c41; margin: 0 0 6px; padding: 13px 14px; }
+.sv-app.theme-excel .sv-app__brandtext { color: #fff; font-weight: 700; }
+.sv-app.theme-excel .sv-app__collapse { color: rgba(255, 255, 255, 0.85); }
+.sv-app.theme-excel .sv-app__links { padding: 0 8px; }
+.sv-app.theme-excel .sv-app__link { border-radius: 0; padding: 7px 12px; border-left: 3px solid transparent; }
+.sv-app.theme-excel .sv-app__link.is-active { background: #e7f2ec; color: #0b5c31; border-left-color: #107c41; font-weight: 600; }
+.sv-app.theme-excel .sv-app__foot { padding-left: 12px; }
+.sv-app.theme-excel .sv-app__toolbar { background: #107c41; border-bottom: 1px solid #0b5c31; }
+.sv-app.theme-excel .sv-app__search { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
+.sv-app.theme-excel .sv-app__search-in { color: #fff; }
+.sv-app.theme-excel .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.78); }
+.sv-app.theme-excel .sv-app__search-ic, .sv-app.theme-excel .sv-app__kbd { color: #fff; }`;
+const suppliers = {
+    name: 'suppliers',
+    label: 'Supplier',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Country of dispatch' } },
+        { field: 'email', type: 'text', format: 'email', required: true, input: { placeholder: 'orders@supplier.com' } },
+        { field: 'phone', type: 'text', input: { editorType: 'phone' } },
+        { field: 'rating', type: 'number', label: 'Rating', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 quality score' } },
+        { field: 'leadDays', type: 'number', label: 'Lead time (days)', min: 0, defaultValue: 14, input: { help: 'Typical days from order to delivery' } },
+        { field: 'color', type: 'text', label: 'Accent', defaultValue: '#f59e0b', input: { editorType: 'color', help: 'Chart accent color' } },
+        { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+    ],
+};
+const products = {
+    name: 'products',
+    label: 'Product',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'sku', type: 'text', label: 'SKU', required: true, input: { editorType: 'mask', mask: 'AAA-####', help: 'Stock keeping unit' } },
+        { field: 'category', type: 'enum', required: true, options: [
+                { value: 'electronics', label: 'Electronics', color: '#6366f1' },
+                { value: 'office', label: 'Office', color: '#0ea5e9' },
+                { value: 'home', label: 'Home', color: '#10b981' },
+                { value: 'tools', label: 'Tools', color: '#f59e0b' },
+            ] },
+        { field: 'tags', type: 'text', label: 'Tags', input: { editorType: 'chips', help: 'Search and filter keywords' } },
+        { field: 'price', type: 'number', label: 'Price ($)', min: 0, required: true },
+        { field: 'discount', type: 'number', label: 'Discount (%)', min: 0, max: 100, defaultValue: 0, input: { editorType: 'slider', help: 'Current promotional discount' } },
+        { field: 'stock', type: 'number', label: 'In stock', min: 0, defaultValue: 0 },
+        { field: 'reorderLevel', type: 'number', label: 'Reorder level', min: 0, defaultValue: 20, input: { help: 'Restock when stock drops below this' } },
+        // Derived: value of stock on hand (display-only, never stored).
+        { field: 'stockValue', type: 'number', label: 'Stock value ($)', readonly: true, formula: 'price * stock' },
+        { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+    ],
+};
+const purchaseOrders = {
+    name: 'purchaseOrders',
+    label: 'Purchase order',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'ref', type: 'text', label: 'Ref', required: true, minLength: 2 },
+        { field: 'supplierId', type: 'relation', label: 'Supplier', relation: { entity: 'suppliers', foreignKey: 'supplierId', labelField: 'name' } },
+        { field: 'productId', type: 'relation', label: 'Product', relation: { entity: 'products', foreignKey: 'productId', labelField: 'name' } },
+        { field: 'status', type: 'enum', defaultValue: 'draft', options: [
+                { value: 'draft', label: 'Draft', color: '#94a3b8' },
+                { value: 'ordered', label: 'Ordered', color: '#0ea5e9' },
+                { value: 'received', label: 'Received', color: '#10b981' },
+                { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+            ] },
+        { field: 'qty', type: 'number', label: 'Quantity', min: 1, defaultValue: 1, required: true },
+        { field: 'unitCost', type: 'number', label: 'Unit cost ($)', min: 0, defaultValue: 0 },
+        // Derived: line total from quantity and unit cost (display-only, never stored).
+        { field: 'total', type: 'number', label: 'Total ($)', readonly: true, formula: 'qty * unitCost' },
+        { field: 'orderedAt', type: 'date', label: 'Ordered at', input: { editorType: 'datetime', help: 'When the order was placed' } },
+    ],
+};
+const seed = {
+    suppliers: [
+        { id: 'sp1', name: 'Shenzhen Components', country: 'China', email: 'sales@shenzhencomp.com', phone: '+86 755 5550 101', rating: 5, leadDays: 21, color: '#6366f1', active: true },
+        { id: 'sp2', name: 'Nordic Office Supply', country: 'Sweden', email: 'orders@nordicoffice.se', phone: '+46 8 5550 102', rating: 4, leadDays: 10, color: '#10b981', active: true },
+        { id: 'sp3', name: 'Bavaria Tools', country: 'Germany', email: 'info@bavariatools.de', phone: '+49 89 5550103', rating: 5, leadDays: 14, color: '#f59e0b', active: true },
+        { id: 'sp4', name: 'Pacific Home Goods', country: 'United States', email: 'hello@pacifichome.com', phone: '+1 (415) 555-0104', rating: 4, leadDays: 7, color: '#0ea5e9', active: true },
+        { id: 'sp5', name: 'Kyoto Electronics', country: 'Japan', email: 'sales@kyotoelec.jp', phone: '+81 75 5550 105', rating: 5, leadDays: 18, color: '#8b5cf6', active: true },
+        { id: 'sp6', name: 'Toronto Distributors', country: 'Canada', email: 'orders@torontodist.ca', phone: '+1 (416) 555-0106', rating: 4, leadDays: 12, color: '#ef4444', active: false },
+    ],
+    products: [
+        { id: 'pr1', name: 'USB-C Hub', sku: 'ELE-0001', category: 'electronics', tags: ['usb-c', 'hub', 'charging'], price: 39, discount: 10, stock: 420, reorderLevel: 100, active: true },
+        { id: 'pr2', name: 'Standing Desk', sku: 'OFF-0101', category: 'office', tags: ['adjustable', 'ergonomic'], price: 480, discount: 5, stock: 35, reorderLevel: 20, active: true },
+        { id: 'pr3', name: 'Ceramic Mug Set', sku: 'HOM-0210', category: 'home', tags: ['kitchen', 'ceramic'], price: 24, discount: 0, stock: 610, reorderLevel: 150, active: true },
+        { id: 'pr4', name: 'Cordless Drill', sku: 'TOO-0305', category: 'tools', tags: ['power', 'cordless', '18v'], price: 129, discount: 15, stock: 88, reorderLevel: 40, active: true },
+        { id: 'pr5', name: 'Mechanical Keyboard', sku: 'ELE-0002', category: 'electronics', tags: ['mechanical', 'rgb', 'usb'], price: 95, discount: 8, stock: 240, reorderLevel: 80, active: true },
+        { id: 'pr6', name: 'Ergonomic Chair', sku: 'OFF-0102', category: 'office', tags: ['ergonomic', 'mesh'], price: 320, discount: 12, stock: 52, reorderLevel: 25, active: true },
+        { id: 'pr7', name: 'LED Desk Lamp', sku: 'HOM-0211', category: 'home', tags: ['lighting', 'led', 'dimmable'], price: 45, discount: 0, stock: 175, reorderLevel: 60, active: true },
+    ],
+    purchaseOrders: [
+        { id: 'po1', ref: 'PO-4001', supplierId: 'sp1', productId: 'pr1', status: 'received', qty: 200, unitCost: 28, orderedAt: '2026-01-10T09:30:00.000Z' },
+        { id: 'po2', ref: 'PO-4002', supplierId: 'sp2', productId: 'pr2', status: 'ordered', qty: 30, unitCost: 360, orderedAt: '2026-02-04T14:15:00.000Z' },
+        { id: 'po3', ref: 'PO-4003', supplierId: 'sp3', productId: 'pr4', status: 'draft', qty: 25, unitCost: 92, orderedAt: '2026-02-18T11:00:00.000Z' },
+        { id: 'po4', ref: 'PO-4004', supplierId: 'sp4', productId: 'pr3', status: 'cancelled', qty: 100, unitCost: 15, orderedAt: '2026-01-22T16:45:00.000Z' },
+        { id: 'po5', ref: 'PO-4005', supplierId: 'sp5', productId: 'pr5', status: 'received', qty: 150, unitCost: 68, orderedAt: '2026-03-01T08:20:00.000Z' },
+        { id: 'po6', ref: 'PO-4006', supplierId: 'sp6', productId: 'pr7', status: 'ordered', qty: 120, unitCost: 30, orderedAt: '2026-03-12T13:10:00.000Z' },
+    ],
+};
+// Product grid formatting: category status pills, a LOW STOCK red-bold threshold
+// (stock under 10 units needs reordering now), and a green highlight on deep
+// promotional discounts - data-driven color, not just status pills.
+const productFormats = [
+    ...statusPills(products, 'category'),
+    { field: 'stock', op: 'lt', value: 10, color: '#dc2626', bold: true },
+    { field: 'discount', op: 'gte', value: 15, color: '#16a34a', bold: true },
+];
+export const inventory = {
+    id: 'inventory',
+    name: 'Inventory',
+    description: 'Products, suppliers and purchase orders - an Excel-style warehouse app behind a sign-in (clerk and manager roles), with stock and purchasing dashboards (target KPIs, an order-trend sparkline, a reorder gauge, a category pie, a supplier x status pivot, tabbed breakdowns), a low-stock red grid plus a status-pill order grid with row actions, suppliers master/detail, and rich edit forms (country, phone, supplier rating, SKU mask, tag chips, discount slider, order datetime).',
+    emoji: '\u{1F4E6}',
+    accent: '#107c41',
+    build: () => {
+        const supplierRows = pad(suppliers, seed.suppliers, 24);
+        const productRows = pad(products, seed.products, 60);
+        const poRows = pad(purchaseOrders, seed.purchaseOrders, 90, { supplierId: ids(supplierRows), productId: ids(productRows) });
+        return project({
+            title: 'Warehouse',
+            brand: 'Warehouse',
+            accent: '#107c41',
+            preset: 'excel',
+            footer: '',
+            // Excel/spreadsheet-style shell: green header + command bar, square sheets.
+            appClass: 'theme-excel',
+            customCss: EXCEL_CSS,
+            // Sign-in with two roles. Clerks manage stock but cannot delete; purchasing
+            // analytics and the supplier directory are manager-only.
+            auth: { enabled: true, protect: true },
+            access: {
+                enabled: true,
+                defaultRole: 'clerk',
+                roles: [
+                    { role: 'manager', screens: '*', actions: '*' },
+                    { role: 'clerk', screens: ['overview', 'product-detail', 'products', 'board'], actions: ['create', 'update'] },
+                ],
+            },
+            entities: [suppliers, products, purchaseOrders],
+            seed: { suppliers: supplierRows, products: productRows, purchaseOrders: poRows },
+            screens: [
+                // Stock dashboard: KPI cards (units-in-stock card carries a 5,000-unit
+                // target), a stock-level gauge, category breakdowns (bar + pie), a tabbed
+                // view, and a status-pill product grid where LOW STOCK rows turn red-bold.
+                dashScreen(products, { id: 'overview', title: 'Stock', order: 0 }, [
+                    { kpi: 'Products', reduce: 'count', span: 1 },
+                    { kpi: 'Units in stock', measure: 'stock', reduce: 'sum', target: 5000, span: 1 },
+                    { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Avg stock on hand', measure: 'stock', reduce: 'avg', min: 0, max: 500, span: 1 },
+                    { chart: 'category', measure: 'stock', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'category', reduce: 'count', type: 'pie', span: 1 },
+                    { tabs: [
+                            { label: 'Stock by category', tiles: [{ chart: 'category', measure: 'stock', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Avg price by category', tiles: [{ chart: 'category', measure: 'price', reduce: 'avg', type: 'bar' }] },
+                        ], span: 3 },
+                    { grid: true, format: productFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Purchasing dashboard: order-volume + cost KPIs (units-ordered card trends
+                // over the order date as a sparkline), an average-unit-cost gauge, status
+                // breakdowns, an order-quantity-over-time area trend, a supplier x status
+                // pivot, a tabbed view, and a status-pill purchase-order grid.
+                dashScreen(purchaseOrders, { id: 'purchasing', title: 'Purchasing', order: 1 }, [
+                    { kpi: 'Purchase orders', reduce: 'count', span: 1 },
+                    { kpi: 'Units ordered', measure: 'qty', reduce: 'sum', trendField: 'orderedAt', trendReduce: 'sum', span: 1 },
+                    { kpi: 'Avg unit cost', measure: 'unitCost', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Avg unit cost', measure: 'unitCost', reduce: 'avg', min: 0, max: 400, unit: '$', span: 1 },
+                    { chart: 'status', measure: 'qty', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'orderedAt', measure: 'qty', reduce: 'sum', type: 'area', span: 3 },
+                    { pivot: { rows: ['supplierId'], cols: ['status'], measure: 'qty', aggregate: 'sum' }, span: 3 },
+                    { tabs: [
+                            { label: 'Qty by status', tiles: [{ chart: 'status', measure: 'qty', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Orders by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { grid: true, format: statusPills(purchaseOrders, 'status'), summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Product detail: a full record page - header (name + SKU + category pill),
+                // stock / price metric tiles, an Overview of pricing and reorder fields, and a
+                // Purchase orders timeline of the orders placed for the product.
+                detailScreen(products, { id: 'product-detail', title: 'Product detail', order: 2 }, {
+                    titleField: 'name', subtitleField: 'sku', statusField: 'category',
+                    metricFields: ['stock', 'price'],
+                    sections: [
+                        { label: 'Pricing', fields: ['discount', 'tags'] },
+                        { label: 'Stock', fields: ['reorderLevel', 'active'] },
+                    ],
+                    related: [{ entity: 'purchaseOrders', foreignKey: 'productId', label: 'Purchase orders', titleField: 'ref', subtitleField: 'qty', dateField: 'orderedAt', statusField: 'status' }],
+                }),
+                screen(suppliers, 'master-detail', { id: 'suppliers', title: 'Suppliers', order: 3, child: purchaseOrders, foreignKey: 'supplierId' }),
+                formScreen(products, { id: 'products', title: 'Products', order: 4 }, undefined, { format: productFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'product-detail', sourceField: 'id', targetField: 'id' } }, ['category', 'active']),
+                formScreen(purchaseOrders, { id: 'purchaseOrders', title: 'Purchase orders', order: 5 }, undefined, { format: statusPills(purchaseOrders, 'status'), summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'supplierId']),
+                // Purchasing board: purchase orders as draggable Kanban lanes by status
+                // (Draft -> Ordered -> Received), card = ref + order total.
+                boardScreen(purchaseOrders, { id: 'board', title: 'Orders board', order: 6 }, { groupBy: 'status', titleField: 'ref', badgeField: 'qty', subtitleField: 'supplierId', filter: ['status', 'supplierId'] }),
+            ],
+        });
+    },
+};

package/dist/studio/samples/invoicing.d.ts

@@ -0,0 +1,2 @@
+import { type SampleApp } from './shared.js';
+export declare const invoicing: SampleApp;

package/dist/studio/samples/invoicing.js

@@ -0,0 +1,154 @@
+import { screen, formScreen, boardScreen, detailScreen, project, dashScreen, statusPills, pad, ids } from './shared.js';
+const clients = {
+    name: 'clients',
+    label: 'Client',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'email', type: 'text', format: 'email', required: true, input: { help: 'Billing contact email' } },
+        { field: 'phone', type: 'text', input: { editorType: 'phone', help: 'Primary contact number' } },
+        { field: 'company', type: 'text', label: 'Company' },
+        { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Billing country' } },
+        { field: 'website', type: 'text', format: 'url', input: { placeholder: 'https://…' } },
+        { field: 'taxId', type: 'text', label: 'Tax ID', input: { editorType: 'mask', mask: '##-#######', help: 'EIN / VAT number' } },
+        { field: 'satisfaction', type: 'number', label: 'Satisfaction', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 relationship score' } },
+        { field: 'segments', type: 'text', label: 'Segments', input: { editorType: 'chips', help: 'Account tags / segments' } },
+        { field: 'onboardedAt', type: 'datetime', label: 'Onboarded', input: { editorType: 'datetime', help: 'When the client signed on' } },
+        { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+    ],
+};
+const invoices = {
+    name: 'invoices',
+    label: 'Invoice',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'number', type: 'text', label: 'Number', required: true, input: { editorType: 'mask', mask: 'INV-####-###', help: 'Invoice reference' } },
+        { field: 'clientId', type: 'relation', label: 'Client', relation: { entity: 'clients', foreignKey: 'clientId', labelField: 'name' } },
+        { field: 'status', type: 'enum', required: true, options: [
+                { value: 'draft', label: 'Draft', color: '#94a3b8' },
+                { value: 'sent', label: 'Sent', color: '#0ea5e9' },
+                { value: 'paid', label: 'Paid', color: '#10b981' },
+                { value: 'overdue', label: 'Overdue', color: '#ef4444' },
+            ] },
+        { field: 'subtotal', type: 'number', label: 'Subtotal ($)', required: true, min: 0, input: { help: 'Amount before tax' } },
+        { field: 'taxRate', type: 'number', label: 'Tax rate (%)', min: 0, max: 30, defaultValue: 10, input: { editorType: 'slider', help: 'Applied sales tax' } },
+        // Derived: subtotal grossed up by the tax rate (display-only, never stored).
+        { field: 'total', type: 'number', label: 'Total ($)', readonly: true, formula: 'subtotal + subtotal * taxRate / 100' },
+        { field: 'color', type: 'text', label: 'Label color', input: { editorType: 'color', help: 'Swatch used in reports' } },
+        { field: 'issueDate', type: 'date', label: 'Issue date' },
+        { field: 'dueDate', type: 'date', label: 'Due date' },
+        { field: 'notes', type: 'text', label: 'Notes', input: { span: 2, help: 'Internal remarks' } },
+    ],
+};
+// Invoice grid formatting: status pills, plus numeric thresholds - big-ticket
+// invoices bold green, tiny invoices muted red - so the grid reads as a
+// data-driven ledger, not just colored statuses.
+const invoiceFormats = [
+    ...statusPills(invoices, 'status'),
+    { field: 'subtotal', op: 'gte', value: 10000, color: '#16a34a', bold: true },
+    { field: 'subtotal', op: 'lt', value: 1000, color: '#dc2626' },
+];
+// Client grid formatting: satisfaction thresholds (at-risk red, delighted green).
+const clientFormats = [
+    { field: 'satisfaction', op: 'lte', value: 2, color: '#dc2626', bold: true },
+    { field: 'satisfaction', op: 'gte', value: 5, color: '#16a34a', bold: true },
+];
+const seed = {
+    clients: [
+        { id: 'cl1', name: 'Ada Lovelace', email: 'ada@globex.com', phone: '+1 (415) 555-0101', company: 'Globex', country: 'United States', website: 'https://globex.com', taxId: '12-3456789', satisfaction: 5, segments: ['Enterprise', 'Retainer'], onboardedAt: '2025-09-12T09:30:00.000Z', active: true },
+        { id: 'cl2', name: 'Alan Turing', email: 'alan@initech.co', phone: '+44 20 7946 0102', company: 'Initech', country: 'United Kingdom', website: 'https://initech.co', taxId: '98-7654321', satisfaction: 4, segments: ['SMB'], onboardedAt: '2025-11-03T14:15:00.000Z', active: true },
+        { id: 'cl3', name: 'Grace Hopper', email: 'grace@umbrella.de', phone: '+49 30 5550103', company: 'Umbrella', country: 'Germany', website: 'https://umbrella.de', taxId: '44-2019876', satisfaction: 5, segments: ['Enterprise', 'Priority'], onboardedAt: '2025-06-21T08:00:00.000Z', active: true },
+        { id: 'cl4', name: 'Linus Torvalds', email: 'linus@hooli.com', phone: '+1 (650) 555-0104', company: 'Hooli', country: 'United States', website: 'https://hooli.com', taxId: '31-5558822', satisfaction: 2, segments: ['At risk'], onboardedAt: '2025-03-17T16:45:00.000Z', active: false },
+        { id: 'cl5', name: 'Barbara Liskov', email: 'barbara@soylent.ca', phone: '+1 (416) 555-0105', company: 'Soylent', country: 'Canada', website: 'https://soylent.ca', taxId: '77-1002003', satisfaction: 3, segments: ['SMB', 'Trial'], onboardedAt: '2026-01-08T11:20:00.000Z', active: true },
+        { id: 'cl6', name: 'Katherine Johnson', email: 'kj@stark.com', phone: '+1 (212) 555-0106', company: 'Stark Industries', country: 'United States', website: 'https://stark.com', taxId: '20-4455667', satisfaction: 5, segments: ['Enterprise'], onboardedAt: '2025-08-29T13:10:00.000Z', active: true },
+    ],
+    invoices: [
+        { id: 'in1', number: 'INV-2026-001', clientId: 'cl1', status: 'paid', subtotal: 4800, taxRate: 8, color: '#10b981', issueDate: '2026-01-12', dueDate: '2026-02-11', notes: 'Q1 platform license' },
+        { id: 'in2', number: 'INV-2026-002', clientId: 'cl2', status: 'sent', subtotal: 2600, taxRate: 20, color: '#0ea5e9', issueDate: '2026-02-03', dueDate: '2026-03-05', notes: 'Data pipeline setup' },
+        { id: 'in3', number: 'INV-2026-003', clientId: 'cl3', status: 'overdue', subtotal: 9100, taxRate: 19, color: '#ef4444', issueDate: '2026-01-20', dueDate: '2026-02-19', notes: 'Compliance suite - reminder sent' },
+        { id: 'in4', number: 'INV-2026-004', clientId: 'cl4', status: 'draft', subtotal: 1500, taxRate: 0, color: '#94a3b8', issueDate: '2026-03-01', dueDate: '2026-03-31', notes: 'Pending scope sign-off' },
+        { id: 'in5', number: 'INV-2026-005', clientId: 'cl5', status: 'paid', subtotal: 800, taxRate: 13, color: '#10b981', issueDate: '2026-02-14', dueDate: '2026-03-16', notes: 'Onboarding fee' },
+        { id: 'in6', number: 'INV-2026-006', clientId: 'cl6', status: 'sent', subtotal: 13200, taxRate: 8, color: '#0ea5e9', issueDate: '2026-03-08', dueDate: '2026-04-07', notes: 'Annual analytics contract' },
+        { id: 'in7', number: 'INV-2026-007', clientId: 'cl1', status: 'overdue', subtotal: 3400, taxRate: 8, color: '#ef4444', issueDate: '2026-01-05', dueDate: '2026-02-04', notes: 'Add-on seats - past due' },
+    ],
+};
+export const invoicing = {
+    id: 'invoicing',
+    name: 'Invoicing',
+    description: 'Clients and invoices - billing + collections + client dashboards (revenue KPI sparkline over issue dates + a target, a revenue gauge, area trend, status pivot, tabbed breakdown), status-pill invoice grids with overdue / big-ticket conditional formatting, drill-through, row actions, master/detail, and rich edit forms.',
+    emoji: '\u{1F9FE}',
+    accent: '#0ea5e9',
+    build: () => {
+        const clientRows = pad(clients, seed.clients, 12);
+        const pool = ids(clientRows);
+        const invoiceRows = pad(invoices, seed.invoices, 30, { clientId: pool });
+        return project({
+            title: 'Acme Invoicing',
+            brand: 'Acme Invoicing',
+            accent: '#0ea5e9',
+            preset: 'antd',
+            footer: '© Acme',
+            entities: [clients, invoices],
+            seed: { clients: clientRows, invoices: invoiceRows },
+            screens: [
+                // Billing dashboard: KPI cards (a billed-revenue card with a sparkline over
+                // issue dates + a $60k target), a revenue gauge, a status revenue bar, a
+                // status pie, a revenue-over-time area trend, a tabbed breakdown, and a
+                // status-pill invoice grid with big-ticket / tiny-invoice thresholds.
+                dashScreen(invoices, { id: 'overview', title: 'Billing', order: 0 }, [
+                    { kpi: 'Billed revenue', measure: 'subtotal', reduce: 'sum', format: 'currency', trendField: 'issueDate', trendReduce: 'sum', target: 60000, span: 1 },
+                    { kpi: 'Invoices', reduce: 'count', span: 1 },
+                    { kpi: 'Avg invoice', measure: 'subtotal', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Revenue vs $80k target', measure: 'subtotal', reduce: 'sum', min: 0, max: 80000, unit: '$', span: 1 },
+                    { chart: 'status', measure: 'subtotal', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'issueDate', measure: 'subtotal', reduce: 'sum', type: 'area', span: 3 },
+                    { tabs: [
+                            { label: 'Revenue by status', tiles: [{ chart: 'status', measure: 'subtotal', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Invoices by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { grid: true, format: invoiceFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Collections: outstanding + tax KPIs, a tax-rate gauge, a revenue-over-time
+                // area trend, a pivot of revenue by status (rows) x client (columns), and a
+                // status-pill grid with inline edit actions.
+                // Invoice board: invoices as cards in status columns (draft/sent/paid/overdue).
+                boardScreen(invoices, { id: 'board', title: 'Board', order: 1 }, { groupBy: 'status', titleField: 'number', badgeField: 'subtotal', filter: ['status', 'clientId'] }),
+                // Client 360: account header + satisfaction tile with a timeline of the
+                // client's invoices (by issue date, colored by payment status).
+                detailScreen(clients, { id: 'client-360', title: 'Client 360', order: 2 }, {
+                    titleField: 'name', subtitleField: 'company', metricFields: ['satisfaction'],
+                    related: [{ entity: 'invoices', foreignKey: 'clientId', label: 'Invoices', titleField: 'number', subtitleField: 'subtotal', dateField: 'issueDate', statusField: 'status' }],
+                }),
+                dashScreen(invoices, { id: 'collections', title: 'Collections', order: 3 }, [
+                    { kpi: 'Outstanding', measure: 'subtotal', reduce: 'sum', format: 'currency', span: 1 },
+                    { kpi: 'Largest invoice', measure: 'subtotal', reduce: 'max', format: 'currency', span: 1 },
+                    { kpi: 'Avg tax rate', measure: 'taxRate', reduce: 'avg', format: 'percent', span: 1 },
+                    { gauge: 'Avg tax rate', measure: 'taxRate', reduce: 'avg', min: 0, max: 30, unit: '%', span: 1 },
+                    { chart: 'issueDate', measure: 'subtotal', reduce: 'sum', type: 'area', span: 3 },
+                    { pivot: { rows: ['status'], cols: ['clientId'], measure: 'subtotal', aggregate: 'sum' }, span: 3 },
+                    { grid: true, format: statusPills(invoices, 'status'), summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Clients dashboard: portfolio KPIs, a satisfaction gauge, country + segment
+                // breakdowns, a country x active pivot, a faceted filter, and a client grid
+                // (satisfaction thresholds) that drills into that client's invoices.
+                dashScreen(clients, { id: 'clientsDash', title: 'Clients', order: 4 }, [
+                    { kpi: 'Clients', reduce: 'count', span: 1 },
+                    { kpi: 'Avg satisfaction', measure: 'satisfaction', reduce: 'avg', span: 1 },
+                    { kpi: 'Top satisfaction', measure: 'satisfaction', reduce: 'max', span: 1 },
+                    { gauge: 'Avg satisfaction', measure: 'satisfaction', reduce: 'avg', min: 0, max: 5, span: 1 },
+                    { chart: 'country', measure: 'satisfaction', reduce: 'avg', type: 'bar', span: 2 },
+                    { chart: 'active', reduce: 'count', type: 'pie', span: 1 },
+                    { pivot: { rows: ['country'], cols: ['active'], measure: 'satisfaction', aggregate: 'avg' }, span: 3 },
+                    { filter: ['country', 'company', 'active'], span: 3 },
+                    { grid: true, format: clientFormats, summaries: true, rowLink: { screen: 'invoices', sourceField: 'id', targetField: 'clientId' }, span: 3 },
+                ]),
+                screen(clients, 'master-detail', { id: 'clients', title: 'Clients book', order: 5, child: invoices, foreignKey: 'clientId', linkScreen: 'client-360' }),
+                formScreen(invoices, { id: 'invoices', title: 'Invoices', order: 6 }, undefined, { format: invoiceFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'clientId', 'issueDate']),
+                formScreen(clients, { id: 'clientsForm', title: 'Client details', order: 7 }, undefined, { format: clientFormats }, ['country', 'segments', 'active']),
+            ],
+        });
+    },
+};