@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/samples/clinic.ts

@@ -0,0 +1,177 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, calendarScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const doctors: EntitySchema = {
+  name: 'doctors',
+  label: 'Doctor',
+  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: 'specialty', type: 'enum', label: 'Specialty', required: true, options: [
+      { value: 'gp', label: 'General Practice', color: '#6366f1' },
+      { value: 'cardiology', label: 'Cardiology', color: '#ef4444' },
+      { value: 'dermatology', label: 'Dermatology', color: '#f59e0b' },
+      { value: 'pediatrics', label: 'Pediatrics', color: '#10b981' },
+    ] },
+    { field: 'rating', type: 'number', label: 'Patient rating', min: 1, max: 5, defaultValue: 4, input: { editorType: 'rating', help: '1-5 average patient rating' } },
+    { field: 'calendarColor', type: 'text', label: 'Calendar color', input: { editorType: 'color', help: 'Color used on the schedule' } },
+  ],
+}
+
+const patients: EntitySchema = {
+  name: 'patients',
+  label: 'Patient',
+  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: 'dob', type: 'date', label: 'Date of birth', required: true },
+    { field: 'bloodType', type: 'enum', label: 'Blood type', options: [
+      { value: 'O+', label: 'O+', color: '#ef4444' },
+      { value: 'O-', label: 'O-', color: '#f97316' },
+      { value: 'A+', label: 'A+', color: '#6366f1' },
+      { value: 'A-', label: 'A-', color: '#8b5cf6' },
+      { value: 'B+', label: 'B+', color: '#10b981' },
+      { value: 'B-', label: 'B-', color: '#14b8a6' },
+      { value: 'AB+', label: 'AB+', color: '#f59e0b' },
+      { value: 'AB-', label: 'AB-', color: '#eab308' },
+    ] },
+    { field: 'insuranceNumber', type: 'text', label: 'Insurance #', input: { editorType: 'mask', mask: 'AAA-######', placeholder: 'AAA-000000' } },
+    { field: 'allergies', type: 'text', label: 'Allergies', input: { editorType: 'chips', help: 'Known allergies' } },
+  ],
+}
+
+const appointments: EntitySchema = {
+  name: 'appointments',
+  label: 'Appointment',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'patientId', type: 'relation', label: 'Patient', required: true, relation: { entity: 'patients', foreignKey: 'patientId', labelField: 'name' } },
+    { field: 'doctorId', type: 'relation', label: 'Doctor', required: true, relation: { entity: 'doctors', foreignKey: 'doctorId', labelField: 'name' } },
+    { field: 'status', type: 'enum', label: 'Status', defaultValue: 'scheduled', options: [
+      { value: 'scheduled', label: 'Scheduled', color: '#6366f1' },
+      { value: 'completed', label: 'Completed', color: '#10b981' },
+      { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+      { value: 'no_show', label: 'No show', color: '#94a3b8' },
+    ] },
+    { field: 'scheduledAt', type: 'datetime', label: 'Scheduled at', required: true },
+    { field: 'durationMins', type: 'number', label: 'Duration (min)', min: 15, max: 120, defaultValue: 30, input: { editorType: 'slider', step: 15, help: 'Visit length in minutes' } },
+    { field: 'fee', type: 'number', label: 'Fee ($)', min: 0 },
+    // Derived: fee plus 8% tax (display-only, never seeded).
+    { field: 'total', type: 'number', label: 'Total w/ tax ($)', readonly: true, formula: 'fee * 1.08' },
+    { field: 'satisfaction', type: 'number', label: 'Satisfaction', min: 1, max: 5, input: { editorType: 'rating', help: '1-5 visit rating' } },
+  ],
+}
+
+// Appointment grid formatting: status pills plus numeric thresholds (low
+// satisfaction red, perfect scores green + bold, high-value fees bold) - data-driven
+// color, not just status pills.
+const apptFormats: FormatRule[] = [
+  ...statusPills(appointments, 'status'),
+  { field: 'satisfaction', op: 'lt', value: 3, color: '#dc2626' },
+  { field: 'satisfaction', op: 'gte', value: 5, color: '#16a34a', bold: true },
+  { field: 'fee', op: 'gte', value: 250, bold: true },
+]
+
+const seed = {
+  doctors: [
+    { id: 'dr1', name: 'Dr. Sarah Mendes', email: 'sarah.mendes@healthclinic.com', phone: '+1 (415) 555-0301', specialty: 'gp', rating: 5, calendarColor: '#6366f1' },
+    { id: 'dr2', name: 'Dr. James Whitfield', email: 'james.whitfield@healthclinic.com', phone: '+1 (415) 555-0302', specialty: 'cardiology', rating: 4, calendarColor: '#ef4444' },
+    { id: 'dr3', name: 'Dr. Aisha Rahman', email: 'aisha.rahman@healthclinic.com', phone: '+1 (650) 555-0303', specialty: 'dermatology', rating: 5, calendarColor: '#f59e0b' },
+    { id: 'dr4', name: 'Dr. Marcus Liang', email: 'marcus.liang@healthclinic.com', phone: '+1 (212) 555-0304', specialty: 'pediatrics', rating: 4, calendarColor: '#10b981' },
+    { id: 'dr5', name: 'Dr. Elena Popova', email: 'elena.popova@healthclinic.com', phone: '+1 (312) 555-0305', specialty: 'gp', rating: 3, calendarColor: '#3b82f6' },
+    { id: 'dr6', name: 'Dr. Thomas Becker', email: 'thomas.becker@healthclinic.com', phone: '+1 (206) 555-0306', specialty: 'cardiology', rating: 4, calendarColor: '#8b5cf6' },
+  ],
+  patients: [
+    { id: 'pt1', name: 'Oliver Grant', email: 'oliver.grant@example.com', phone: '+1 (415) 555-0201', dob: '1984-03-12', bloodType: 'O+', insuranceNumber: 'AET-100482', allergies: ['Penicillin'] },
+    { id: 'pt2', name: 'Maya Fernandez', email: 'maya.fernandez@example.com', phone: '+1 (415) 555-0202', dob: '1991-11-04', bloodType: 'A-', insuranceNumber: 'BCX-204817', allergies: ['Peanuts', 'Latex'] },
+    { id: 'pt3', name: 'Noah Kim', email: 'noah.kim@example.com', phone: '+1 (650) 555-0203', dob: '2015-06-22', bloodType: 'B+', insuranceNumber: 'CDN-330298', allergies: [] },
+    { id: 'pt4', name: 'Sophia Rossi', email: 'sophia.rossi@example.com', phone: '+1 (212) 555-0204', dob: '1978-09-30', bloodType: 'AB+', insuranceNumber: 'DEF-419926', allergies: ['Aspirin'] },
+    { id: 'pt5', name: 'Ethan Walsh', email: 'ethan.walsh@example.com', phone: '+1 (312) 555-0205', dob: '2001-01-18', bloodType: 'O-', insuranceNumber: 'EGH-528140', allergies: ['Pollen', 'Dust'] },
+    { id: 'pt6', name: 'Amara Okafor', email: 'amara.okafor@example.com', phone: '+1 (206) 555-0206', dob: '1996-07-08', bloodType: 'A+', insuranceNumber: 'FIJ-610355', allergies: ['Shellfish'] },
+  ],
+  appointments: [
+    { id: 'ap1', patientId: 'pt1', doctorId: 'dr1', status: 'completed', scheduledAt: '2026-06-02T09:30:00Z', durationMins: 30, fee: 120, satisfaction: 5 },
+    { id: 'ap2', patientId: 'pt2', doctorId: 'dr2', status: 'scheduled', scheduledAt: '2026-07-18T14:00:00Z', durationMins: 45, fee: 260, satisfaction: 4 },
+    { id: 'ap3', patientId: 'pt3', doctorId: 'dr4', status: 'completed', scheduledAt: '2026-06-14T10:15:00Z', durationMins: 20, fee: 90, satisfaction: 5 },
+    { id: 'ap4', patientId: 'pt4', doctorId: 'dr3', status: 'cancelled', scheduledAt: '2026-05-27T11:00:00Z', durationMins: 30, fee: 150, satisfaction: 3 },
+    { id: 'ap5', patientId: 'pt5', doctorId: 'dr1', status: 'no_show', scheduledAt: '2026-06-09T15:30:00Z', durationMins: 30, fee: 120, satisfaction: 2 },
+    { id: 'ap6', patientId: 'pt6', doctorId: 'dr6', status: 'scheduled', scheduledAt: '2026-07-21T08:45:00Z', durationMins: 60, fee: 280, satisfaction: 4 },
+    { id: 'ap7', patientId: 'pt1', doctorId: 'dr5', status: 'completed', scheduledAt: '2026-06-30T13:00:00Z', durationMins: 25, fee: 110, satisfaction: 5 },
+    { id: 'ap8', patientId: 'pt4', doctorId: 'dr2', status: 'completed', scheduledAt: '2026-07-03T16:20:00Z', durationMins: 45, fee: 260, satisfaction: 4 },
+  ],
+}
+
+export const clinic: SampleApp = {
+  id: 'clinic',
+  name: 'Clinic',
+  description: 'Patients, doctors and appointments - visits, revenue and satisfaction dashboards (KPI sparkline + target, satisfaction gauge, status/specialty charts, a scheduled-at revenue trend, a pivot, and a tabbed breakdown), filtered status-pill grids with row actions, patient master/detail, and rich edit forms (phone, blood-type, insurance mask, allergy chips, duration slider, ratings).',
+  emoji: '\u{1FA7A}',
+  accent: '#ef4444',
+  build: () => {
+    const doctorRows = pad(doctors, seed.doctors, 18)
+    const patientRows = pad(patients, seed.patients, 60)
+    const appointmentRows = pad(appointments, seed.appointments, 90, { patientId: ids(patientRows), doctorId: ids(doctorRows) })
+    return project({
+      title: 'HealthClinic',
+      brand: 'HealthClinic',
+      accent: '#ef4444',
+      preset: 'material',
+      footer: '',
+      entities: [doctors, patients, appointments],
+      seed: { doctors: doctorRows, patients: patientRows, appointments: appointmentRows },
+      screens: [
+        // Appointments dashboard: visit + revenue KPIs (a revenue card that trends
+        // over scheduledAt with a $2k target), a satisfaction gauge (0-5), status
+        // revenue/volume charts, a scheduled-at revenue area trend, a fee-by-status
+        // pivot, a tabbed breakdown, a status filter, and a status-pill grid.
+        dashScreen(appointments, { id: 'overview', title: 'Overview', order: 0 }, [
+          { kpi: 'Appointments', reduce: 'count', span: 1 },
+          { kpi: 'Total revenue', measure: 'fee', reduce: 'sum', format: 'currency', trendField: 'scheduledAt', trendReduce: 'sum', target: 2000, span: 1 },
+          { kpi: 'Avg fee', measure: 'fee', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Avg satisfaction', measure: 'satisfaction', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'status', measure: 'fee', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'scheduledAt', measure: 'fee', reduce: 'sum', type: 'area', span: 3 },
+          { pivot: { rows: ['status'], cols: [], measure: 'fee', aggregate: 'sum' }, span: 3 },
+          { tabs: [
+            { label: 'Revenue by status', tiles: [{ chart: 'status', measure: 'fee', reduce: 'sum', type: 'bar' }] },
+            { label: 'Visits by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { filter: ['status'], span: 3 },
+          { grid: true, format: statusPills(appointments, 'status'), summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Doctors dashboard: roster + rating KPIs, an average-rating gauge (0-5),
+        // specialty breakdowns (pie + avg-rating bar), a specialty filter, and a
+        // specialty-pill roster grid.
+        dashScreen(doctors, { id: 'specialties', title: 'Specialties', order: 1 }, [
+          { kpi: 'Doctors', reduce: 'count', span: 1 },
+          { kpi: 'Avg rating', measure: 'rating', reduce: 'avg', span: 1 },
+          { kpi: 'Top rating', measure: 'rating', reduce: 'max', span: 1 },
+          { gauge: 'Avg patient rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'specialty', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'specialty', measure: 'rating', reduce: 'avg', type: 'bar', span: 2 },
+          { filter: ['specialty'], span: 3 },
+          { grid: true, format: statusPills(doctors, 'specialty'), summaries: true, span: 3 },
+        ]),
+        calendarScreen(appointments, { id: 'schedule', title: 'Schedule', order: 2 }, { dateField: 'scheduledAt', titleField: 'patientId', colorField: 'status', filter: ['status', 'doctorId'] }),
+        // Patient 360: chart header (blood-type pill) with a visit-history timeline -
+        // each appointment titled by its doctor (relation resolved), colored by status.
+        detailScreen(patients, { id: 'patient-360', title: 'Patient 360', order: 3 }, {
+          titleField: 'name', subtitleField: 'email', statusField: 'bloodType',
+          related: [{ entity: 'appointments', foreignKey: 'patientId', label: 'Visits', titleField: 'doctorId', subtitleField: 'fee', dateField: 'scheduledAt', statusField: 'status' }],
+        }),
+        screen(patients, 'master-detail', { id: 'patients', title: 'Patients', order: 4, child: appointments, foreignKey: 'patientId', linkScreen: 'patient-360' }),
+        formScreen(appointments, { id: 'appointments', title: 'Appointments', order: 5 }, undefined, { format: apptFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status']),
+        formScreen(doctors, { id: 'doctors', title: 'Doctors', order: 6 }, undefined, {}, ['specialty']),
+      ],
+    })
+  },
+}

package/src/studio/samples/crm.ts

@@ -0,0 +1,250 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, boardScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+// A fixed sales-rep pool, shared by deals + activities so leaderboards, pivots
+// and owner pills stay clean (padded rows cycle these instead of random names).
+const OWNERS = [
+  { value: 'Sam Rivera', label: 'Sam Rivera', color: '#6366f1' },
+  { value: 'Jamie Chen', label: 'Jamie Chen', color: '#10b981' },
+  { value: 'Priya Patel', label: 'Priya Patel', color: '#f59e0b' },
+  { value: 'Dana Lee', label: 'Dana Lee', color: '#ec4899' },
+]
+
+const companies: EntitySchema = {
+  name: 'companies',
+  label: 'Company',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'industry', type: 'enum', required: true, options: [
+      { value: 'saas', label: 'SaaS', color: '#6366f1' },
+      { value: 'fintech', label: 'Fintech', color: '#10b981' },
+      { value: 'retail', label: 'Retail', color: '#f59e0b' },
+      { value: 'health', label: 'Health', color: '#ef4444' },
+    ] },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Headquarters country' } },
+    { field: 'website', type: 'text', format: 'url', input: { placeholder: 'https://…' } },
+    { field: 'employees', type: 'number', label: 'Employees', min: 0 },
+    { field: 'health', type: 'number', label: 'Account health', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 relationship score' } },
+    { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+  ],
+}
+
+const contacts: EntitySchema = {
+  name: 'contacts',
+  label: 'Contact',
+  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: 'title', type: 'text', label: 'Job title' },
+    { field: 'companyId', type: 'relation', label: 'Company', relation: { entity: 'companies', foreignKey: 'companyId', labelField: 'name' } },
+    { field: 'tags', type: 'text', label: 'Segments', input: { editorType: 'chips', help: 'Interests / segments' } },
+    { field: 'active', type: 'boolean', defaultValue: true },
+  ],
+}
+
+const deals: EntitySchema = {
+  name: 'deals',
+  label: 'Deal',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'title', type: 'text', required: true, minLength: 2 },
+    { field: 'companyId', type: 'relation', label: 'Company', relation: { entity: 'companies', foreignKey: 'companyId', labelField: 'name' } },
+    { field: 'stage', type: 'enum', required: true, options: [
+      { value: 'lead', label: 'Lead', color: '#94a3b8' },
+      { value: 'qualified', label: 'Qualified', color: '#6366f1' },
+      { value: 'proposal', label: 'Proposal', color: '#f59e0b' },
+      { value: 'won', label: 'Won', color: '#10b981' },
+      { value: 'lost', label: 'Lost', color: '#ef4444' },
+    ] },
+    { field: 'value', type: 'number', label: 'Value ($)', min: 0 },
+    { field: 'probability', type: 'number', label: 'Probability (%)', min: 0, max: 100, defaultValue: 50, input: { editorType: 'slider', help: 'Win likelihood' } },
+    // Derived: expected value weighted by win probability (display-only).
+    { field: 'weighted', type: 'number', label: 'Weighted ($)', readonly: true, formula: 'value * probability / 100' },
+    { field: 'owner', type: 'enum', label: 'Owner', options: OWNERS },
+    { field: 'closeDate', type: 'date', label: 'Close date' },
+  ],
+}
+
+const activities: EntitySchema = {
+  name: 'activities',
+  label: 'Activity',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'subject', type: 'text', required: true, minLength: 3 },
+    { field: 'type', type: 'enum', required: true, options: [
+      { value: 'call', label: 'Call', color: '#6366f1' },
+      { value: 'email', label: 'Email', color: '#10b981' },
+      { value: 'meeting', label: 'Meeting', color: '#f59e0b' },
+      { value: 'task', label: 'Task', color: '#8b5cf6' },
+    ] },
+    { field: 'dealId', type: 'relation', label: 'Deal', relation: { entity: 'deals', foreignKey: 'dealId', labelField: 'title' } },
+    { field: 'owner', type: 'enum', label: 'Owner', options: OWNERS },
+    { field: 'priority', type: 'enum', defaultValue: 'medium', options: [
+      { value: 'low', label: 'Low', color: '#94a3b8' },
+      { value: 'medium', label: 'Medium', color: '#6366f1' },
+      { value: 'high', label: 'High', color: '#ef4444' },
+    ] },
+    { field: 'dueDate', type: 'date', label: 'Due date' },
+    { field: 'durationMins', type: 'number', label: 'Duration (min)', min: 0 },
+    { field: 'completed', type: 'boolean', label: 'Done', defaultValue: false },
+    { field: 'notes', type: 'text', label: 'Notes' },
+  ],
+}
+
+// Deal grid formatting: stage + owner pills, plus numeric thresholds (weak deals
+// red, strong deals green + bold, big-ticket values bold) - data-driven color, not
+// just status pills.
+const dealFormats: FormatRule[] = [
+  ...statusPills(deals, 'stage'),
+  ...statusPills(deals, 'owner'),
+  { field: 'probability', op: 'lt', value: 30, color: '#dc2626' },
+  { field: 'probability', op: 'gte', value: 70, color: '#16a34a', bold: true },
+  { field: 'value', op: 'gte', value: 100000, bold: true },
+]
+
+const seed = {
+  companies: [
+    { id: 'co1', name: 'Globex', industry: 'saas', country: 'United States', website: 'https://globex.com', employees: 320, health: 4, active: true },
+    { id: 'co2', name: 'Initech', industry: 'fintech', country: 'United Kingdom', website: 'https://initech.co', employees: 140, health: 3, active: true },
+    { id: 'co3', name: 'Umbrella', industry: 'health', country: 'Germany', website: 'https://umbrella.de', employees: 900, health: 5, active: true },
+    { id: 'co4', name: 'Hooli', industry: 'saas', country: 'United States', website: 'https://hooli.com', employees: 2100, health: 2, active: false },
+    { id: 'co5', name: 'Soylent', industry: 'retail', country: 'Canada', website: 'https://soylent.ca', employees: 75, health: 3, active: true },
+    { id: 'co6', name: 'Stark Industries', industry: 'fintech', country: 'United States', website: 'https://stark.com', employees: 5400, health: 5, active: true },
+  ],
+  contacts: [
+    { id: 'ct1', name: 'Ada Lovelace', email: 'ada@globex.com', phone: '+1 (415) 555-0101', title: 'CTO', companyId: 'co1', tags: ['Champion', 'Technical'], active: true },
+    { id: 'ct2', name: 'Alan Turing', email: 'alan@initech.co', phone: '+44 20 7946 0102', title: 'Head of Data', companyId: 'co2', tags: ['Economic buyer'], active: true },
+    { id: 'ct3', name: 'Grace Hopper', email: 'grace@umbrella.de', phone: '+49 30 5550103', title: 'VP Engineering', companyId: 'co3', tags: ['Champion'], active: true },
+    { id: 'ct4', name: 'Linus Torvalds', email: 'linus@hooli.com', phone: '+1 (650) 555-0104', title: 'Architect', companyId: 'co4', tags: ['Technical', 'Blocker'], active: false },
+    { id: 'ct5', name: 'Barbara Liskov', email: 'barbara@soylent.ca', phone: '+1 (416) 555-0105', title: 'Founder', companyId: 'co5', tags: ['Decision maker'], active: true },
+    { id: 'ct6', name: 'Katherine Johnson', email: 'kj@stark.com', phone: '+1 (212) 555-0106', title: 'Analyst', companyId: 'co6', tags: ['Influencer'], active: true },
+    { id: 'ct7', name: 'Donald Knuth', email: 'don@globex.com', phone: '+1 (415) 555-0107', title: 'Advisor', companyId: 'co1', tags: ['Influencer', 'Technical'], active: true },
+    { id: 'ct8', name: 'Margaret Hamilton', email: 'mh@stark.com', phone: '+1 (212) 555-0108', title: 'Director', companyId: 'co6', tags: ['Decision maker'], active: true },
+  ],
+  deals: [
+    { id: 'dl1', title: 'Globex platform rollout', companyId: 'co1', stage: 'proposal', value: 48000, probability: 60, owner: 'Sam Rivera', closeDate: '2026-08-15' },
+    { id: 'dl2', title: 'Initech data pipeline', companyId: 'co2', stage: 'won', value: 26000, probability: 100, owner: 'Jamie Chen', closeDate: '2026-06-30' },
+    { id: 'dl3', title: 'Umbrella compliance suite', companyId: 'co3', stage: 'qualified', value: 91000, probability: 40, owner: 'Sam Rivera', closeDate: '2026-09-20' },
+    { id: 'dl4', title: 'Hooli migration', companyId: 'co4', stage: 'lost', value: 15000, probability: 0, owner: 'Priya Patel', closeDate: '2026-05-10' },
+    { id: 'dl5', title: 'Soylent storefront', companyId: 'co5', stage: 'lead', value: 8000, probability: 20, owner: 'Jamie Chen', closeDate: '2026-10-01' },
+    { id: 'dl6', title: 'Stark analytics', companyId: 'co6', stage: 'proposal', value: 132000, probability: 65, owner: 'Priya Patel', closeDate: '2026-08-28' },
+    { id: 'dl7', title: 'Globex add-on seats', companyId: 'co1', stage: 'won', value: 12000, probability: 100, owner: 'Sam Rivera', closeDate: '2026-07-05' },
+    { id: 'dl8', title: 'Stark expansion', companyId: 'co6', stage: 'qualified', value: 54000, probability: 45, owner: 'Jamie Chen', closeDate: '2026-09-12' },
+  ],
+  activities: [
+    { id: 'ac1', subject: 'Discovery call with Ada', type: 'call', dealId: 'dl1', owner: 'Sam Rivera', priority: 'high', dueDate: '2026-07-16', durationMins: 30, completed: true, notes: 'Mapped the rollout scope.' },
+    { id: 'ac2', subject: 'Send pricing proposal', type: 'email', dealId: 'dl1', owner: 'Sam Rivera', priority: 'high', dueDate: '2026-07-18', durationMins: 15, completed: false, notes: 'Awaiting legal sign-off.' },
+    { id: 'ac3', subject: 'Data pipeline demo', type: 'meeting', dealId: 'dl2', owner: 'Jamie Chen', priority: 'medium', dueDate: '2026-07-12', durationMins: 45, completed: true, notes: 'Great fit, moving to close.' },
+    { id: 'ac4', subject: 'Compliance review follow-up', type: 'task', dealId: 'dl3', owner: 'Sam Rivera', priority: 'medium', dueDate: '2026-07-20', durationMins: 20, completed: false, notes: 'Collect SOC2 docs.' },
+    { id: 'ac5', subject: 'Re-engage Hooli champion', type: 'call', dealId: 'dl4', owner: 'Priya Patel', priority: 'low', dueDate: '2026-07-22', durationMins: 25, completed: false, notes: 'Deal went cold - revisit Q4.' },
+    { id: 'ac6', subject: 'Storefront scoping', type: 'meeting', dealId: 'dl5', owner: 'Jamie Chen', priority: 'medium', dueDate: '2026-07-19', durationMins: 60, completed: false, notes: 'Needs design mockups.' },
+    { id: 'ac7', subject: 'Analytics exec briefing', type: 'meeting', dealId: 'dl6', owner: 'Priya Patel', priority: 'high', dueDate: '2026-07-24', durationMins: 40, completed: false, notes: 'CFO joining the call.' },
+    { id: 'ac8', subject: 'Renewal paperwork', type: 'task', dealId: 'dl7', owner: 'Sam Rivera', priority: 'low', dueDate: '2026-07-14', durationMins: 10, completed: true, notes: 'Signed and filed.' },
+    { id: 'ac9', subject: 'Expansion seats quote', type: 'email', dealId: 'dl8', owner: 'Jamie Chen', priority: 'medium', dueDate: '2026-07-21', durationMins: 15, completed: false, notes: 'Quote 40 extra seats.' },
+    { id: 'ac10', subject: 'Quarterly business review', type: 'meeting', dealId: 'dl6', owner: 'Priya Patel', priority: 'high', dueDate: '2026-07-28', durationMins: 90, completed: false, notes: 'Prep the QBR deck.' },
+  ],
+}
+
+export const crm: SampleApp = {
+  id: 'crm',
+  name: 'CRM',
+  description: 'Companies, contacts, deals and activities - sales + forecast + activity dashboards (KPI sparklines, target gauge, value-over-time trend, pivot, tabs), filtered status-pill grids with drill-through and row actions, master/detail, and rich edit forms.',
+  emoji: '\u{1F91D}',
+  accent: '#6366f1',
+  build: () => {
+    const companyRows = pad(companies, seed.companies, 12)
+    const pool = ids(companyRows)
+    const contactRows = pad(contacts, seed.contacts, 22, { companyId: pool })
+    const dealRows = pad(deals, seed.deals, 30, { companyId: pool })
+    const dealPool = ids(dealRows)
+    const activityRows = pad(activities, seed.activities, 24, { dealId: dealPool })
+    return project({
+      title: 'Acme CRM',
+      brand: 'Acme CRM',
+      accent: '#6366f1',
+      preset: 'salesforce',
+      footer: '© Acme Inc.',
+      entities: [companies, contacts, deals, activities],
+      seed: { companies: companyRows, contacts: contactRows, deals: dealRows, activities: activityRows },
+      screens: [
+        // Sales dashboard: KPI cards (a pipeline-value card with a sparkline over
+        // close dates + a $400k target), a target gauge, a stage funnel, a pie, an
+        // owner-leaderboard, a tabbed breakdown, and a status-pill deal grid.
+        dashScreen(deals, { id: 'overview', title: 'Overview', order: 0 }, [
+          { kpi: 'Pipeline value', measure: 'value', reduce: 'sum', format: 'currency', trendField: 'closeDate', trendReduce: 'sum', target: 400000, span: 1 },
+          { kpi: 'Open deals', reduce: 'count', span: 1 },
+          { kpi: 'Avg deal size', measure: 'value', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Pipeline vs $500k target', measure: 'value', reduce: 'sum', min: 0, max: 500000, unit: '$', span: 1 },
+          { chart: 'stage', measure: 'value', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'stage', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'owner', measure: 'value', reduce: 'sum', type: 'bar', span: 2 },
+          { tabs: [
+            { label: 'Value by stage', tiles: [{ chart: 'stage', measure: 'value', reduce: 'sum', type: 'bar' }] },
+            { label: 'Deals by owner', tiles: [{ chart: 'owner', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: dealFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Pipeline board: deals as draggable cards in stage columns (drag a card to
+        // change its stage). The signature "real app" view.
+        boardScreen(deals, { id: 'pipeline', title: 'Pipeline', order: 1 }, { groupBy: 'stage', titleField: 'title', badgeField: 'value', subtitleField: 'owner', filter: ['owner', 'companyId'], openScreen: 'deal-360' }),
+        // Deal 360: a full record page - header (title + company + stage pill), value /
+        // probability metric tiles, an Overview of deal + account fields, and an
+        // Activities timeline of the tasks logged against the deal.
+        detailScreen(deals, { id: 'deal-360', title: 'Deal 360', order: 2 }, {
+          titleField: 'title', subtitleField: 'companyId', statusField: 'stage',
+          metricFields: ['value', 'probability'],
+          sections: [
+            { label: 'Deal', fields: ['owner', 'closeDate'] },
+            { label: 'Account', fields: ['companyId'] },
+          ],
+          related: [{ entity: 'activities', foreignKey: 'dealId', label: 'Activities', titleField: 'subject', subtitleField: 'owner', dateField: 'dueDate', statusField: 'priority' }],
+        }),
+        // Forecast: value KPIs, a value-over-time area trend, and a pivot of value by
+        // owner (rows) x stage (columns).
+        dashScreen(deals, { id: 'forecast', title: 'Forecast', order: 3 }, [
+          { kpi: 'Pipeline value', measure: 'value', reduce: 'sum', format: 'currency', span: 1 },
+          { kpi: 'Avg deal size', measure: 'value', reduce: 'avg', format: 'currency', span: 1 },
+          { kpi: 'Largest deal', measure: 'value', reduce: 'max', format: 'currency', span: 1 },
+          { chart: 'closeDate', measure: 'value', reduce: 'sum', type: 'area', span: 3 },
+          { pivot: { rows: ['owner'], cols: ['stage'], measure: 'value', aggregate: 'sum' }, span: 3 },
+        ]),
+        // Accounts dashboard: headcount KPIs (compact-formatted), an account-health
+        // gauge (avg rating 0-5), industry breakdowns, and a company grid that drills
+        // into the account's deals.
+        dashScreen(companies, { id: 'accounts', title: 'Accounts', order: 4 }, [
+          { kpi: 'Companies', reduce: 'count', span: 1 },
+          { kpi: 'Total headcount', measure: 'employees', reduce: 'sum', format: 'compact', span: 1 },
+          { kpi: 'Avg headcount', measure: 'employees', reduce: 'avg', span: 1 },
+          { gauge: 'Avg account health', measure: 'health', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'industry', measure: 'employees', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'industry', reduce: 'count', type: 'pie', span: 1 },
+          { filter: ['industry', 'country', 'active'], span: 3 },
+          { grid: true, format: statusPills(companies, 'industry'), summaries: true, rowLink: { screen: 'deals', sourceField: 'id', targetField: 'companyId' }, span: 3 },
+        ]),
+        // Activity board: task KPIs, a duration gauge, type/owner breakdowns, a filter,
+        // and a grid with type + priority pills and inline edit actions.
+        dashScreen(activities, { id: 'activities', title: 'Activities', order: 5 }, [
+          { kpi: 'Activities', reduce: 'count', span: 1 },
+          { kpi: 'Logged minutes', measure: 'durationMins', reduce: 'sum', format: 'compact', span: 1 },
+          { kpi: 'Avg duration', measure: 'durationMins', reduce: 'avg', span: 1 },
+          { gauge: 'Avg duration (min)', measure: 'durationMins', reduce: 'avg', min: 0, max: 120, unit: 'm', span: 1 },
+          { chart: 'type', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'owner', reduce: 'count', type: 'bar', span: 2 },
+          { filter: ['type', 'priority', 'owner', 'completed'], span: 3 },
+          { grid: true, format: [...statusPills(activities, 'type'), ...statusPills(activities, 'priority'), ...statusPills(activities, 'owner')], summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        screen(companies, 'master-detail', { id: 'companies', title: 'Companies', order: 6, child: contacts, foreignKey: 'companyId' }),
+        formScreen(contacts, { id: 'contacts', title: 'Contacts', order: 7 }, undefined, {}, ['companyId', 'tags', 'active']),
+        formScreen(deals, { id: 'deals', title: 'Deals', order: 8 }, undefined, { format: dealFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'deal-360', sourceField: 'id', targetField: 'id' } }, ['stage', 'owner', 'companyId']),
+      ],
+    })
+  },
+}