@rippling/rippling-sdk 0.2.0-alpha.34 → 0.2.0-alpha.36

package/examples/sdui/sdui-tab-multi-view/sdui-tab-multi-view.ts

@@ -0,0 +1,924 @@
+/**
+ * **Bark & Train — Field HQ** (demo): roster, schedule, today's snapshot, trainer reference.
+ * Tabs: Home, Dogs, Schedule, Today, Resources — mock data only.
+ *
+ * Run:
+ *   npx ts-node --transpile-only -r tsconfig-paths/register examples/sdui/sdui-tab-multi-view/sdui-tab-multi-view.ts
+ *
+ * Pair: rippling-function.ts uses `@rippling/sdui-builder` for paste-into-Function-editor preview.
+ */
+import SDUI from '../../../src/lib/sdui';
+
+const MOCK_DOGS = [
+  {
+    id: 'dog_1',
+    _key: 'dog_1',
+    dog_name__c: 'Rex',
+    breed__c: 'Labrador',
+    age__c: 3,
+    total_training_time__c: 120,
+  },
+  {
+    id: 'dog_2',
+    _key: 'dog_2',
+    dog_name__c: 'Luna',
+    breed__c: 'Border Collie',
+    age__c: 5,
+    total_training_time__c: 340,
+  },
+];
+
+const MOCK_SESSIONS = [
+  {
+    id: 'sess_1',
+    _key: 'sess_1',
+    dog_id__c: 'dog_1',
+    session_date__c: '2026-04-01',
+    duration__c: 45,
+    training_type__c: 'Obedience',
+    notes__c: 'Recall work',
+  },
+  {
+    id: 'sess_2',
+    _key: 'sess_2',
+    dog_id__c: 'dog_2',
+    session_date__c: '2026-04-02',
+    duration__c: 60,
+    training_type__c: 'Agility',
+    notes__c: 'Weaves',
+  },
+];
+
+const SESSION_TOTAL_MIN = MOCK_SESSIONS.reduce((a, row) => a + Number(row.duration__c || 0), 0);
+
+const PCT_TIME_OBEDIENCE = 43;
+const PCT_TIME_AGILITY = 57;
+
+const SESSION_TIME_SEGMENTS = [
+  { value: PCT_TIME_OBEDIENCE, segmentColor: '#7C3AED' },
+  { value: PCT_TIME_AGILITY, segmentColor: '#F97316' },
+];
+
+function renderSpec(functionId: string) {
+  const s = SDUI.createState({
+    dogs: MOCK_DOGS,
+    sessions: MOCK_SESSIONS,
+    stats: {
+      dogCount: MOCK_DOGS.length,
+      sessionCount: MOCK_SESSIONS.length,
+      totalMinutes: SESSION_TOTAL_MIN,
+    },
+    selectedDog: null as unknown,
+    selectedSession: null as unknown,
+    showCreateDogModal: false,
+    showEditDogModal: false,
+    showCreateSessionModal: false,
+    showEditSessionModal: false,
+    dogForm: { dog_name: '', breed: '', age: '' },
+    sessionForm: {
+      dog_id: '',
+      session_date: '',
+      duration: '',
+      training_type: '',
+      notes: '',
+    },
+    activeTab: 'overview',
+  });
+
+  // ============================================================
+  // HOME — redesigned: dashboard layout with hero stats on left,
+  // chart + recent activity stacked on right. Single content
+  // band, no purple hero background. Cleaner and more useful.
+  // ============================================================
+  const overviewPanel = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 40, bottom: 56, left: 28, right: 28 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space600',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space200',
+            align: 'flex-start',
+            children: [
+              SDUI.components.Text({
+                typestyle: 'bodyMdEmphasis',
+                color: 'secondary',
+                text: 'BARK & TRAIN · FIELD HQ',
+              }),
+              SDUI.components.Heading({
+                level: '1',
+                text: 'Good morning, trainer 👋',
+              }),
+              SDUI.components.Text({
+                typestyle: 'bodyLg',
+                color: 'secondary',
+                text: 'Here is what is happening across your roster and schedule.',
+              }),
+            ],
+          }),
+          SDUI.components.HStack({
+            gap: 'space400',
+            wrap: false,
+            align: 'stretch',
+            justify: 'space-between',
+            children: [
+              SDUI.components.Layout({
+                width: '32%',
+                minWidth: '260px',
+                children: [
+                  SDUI.components.Card({
+                    padding: '32',
+                    children: [
+                      SDUI.components.Layout({
+                        padding: { top: 24, bottom: 24, left: 24, right: 24 },
+                        backgroundColor: '#EEF2FF',
+                        radius: 12,
+                        children: [
+                          SDUI.components.VStack({
+                            gap: 'space300',
+                            align: 'flex-start',
+                            children: [
+                              SDUI.components.Text({
+                                text: 'DOGS ON ROSTER',
+                                typestyle: 'bodyXsEmphasis',
+                                color: '#4F46E5',
+                              }),
+                              SDUI.components.Heading({
+                                level: '1',
+                                text: SDUI.template`${s.stats.dogCount}`,
+                              }),
+                              SDUI.components.Text({
+                                text: 'Active clients',
+                                color: 'secondary',
+                                typestyle: 'bodySm',
+                              }),
+                            ],
+                          }),
+                        ],
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+              SDUI.components.Layout({
+                width: '32%',
+                minWidth: '260px',
+                children: [
+                  SDUI.components.Card({
+                    padding: '32',
+                    children: [
+                      SDUI.components.Layout({
+                        padding: { top: 24, bottom: 24, left: 24, right: 24 },
+                        backgroundColor: '#ECFDF5',
+                        radius: 12,
+                        children: [
+                          SDUI.components.VStack({
+                            gap: 'space300',
+                            align: 'flex-start',
+                            children: [
+                              SDUI.components.Text({
+                                text: 'SESSIONS BOOKED',
+                                typestyle: 'bodyXsEmphasis',
+                                color: '#059669',
+                              }),
+                              SDUI.components.Heading({
+                                level: '1',
+                                text: SDUI.template`${s.stats.sessionCount}`,
+                              }),
+                              SDUI.components.Text({
+                                text: 'On the calendar',
+                                color: 'secondary',
+                                typestyle: 'bodySm',
+                              }),
+                            ],
+                          }),
+                        ],
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+              SDUI.components.Layout({
+                width: '32%',
+                minWidth: '260px',
+                children: [
+                  SDUI.components.Card({
+                    padding: '32',
+                    children: [
+                      SDUI.components.Layout({
+                        padding: { top: 24, bottom: 24, left: 24, right: 24 },
+                        backgroundColor: '#FFF7ED',
+                        radius: 12,
+                        children: [
+                          SDUI.components.VStack({
+                            gap: 'space300',
+                            align: 'flex-start',
+                            children: [
+                              SDUI.components.Text({
+                                text: 'PRACTICE MINUTES',
+                                typestyle: 'bodyXsEmphasis',
+                                color: '#EA580C',
+                              }),
+                              SDUI.components.Heading({
+                                level: '1',
+                                text: SDUI.template`${s.stats.totalMinutes}`,
+                              }),
+                              SDUI.components.Text({
+                                text: 'Ring & field time',
+                                color: 'secondary',
+                                typestyle: 'bodySm',
+                              }),
+                            ],
+                          }),
+                        ],
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+          // Chart + Quick actions row — 66% / 32%
+          SDUI.components.HStack({
+            gap: 'space400',
+            wrap: true,
+            align: 'stretch',
+            justify: 'space-between',
+            children: [
+              SDUI.components.Layout({
+                width: '66%',
+                minWidth: '420px',
+                children: [
+                  SDUI.components.Card({
+                    title: 'Where practice time goes',
+                    padding: '32',
+                    children: [
+                      SDUI.components.VStack({
+                        gap: 'space400',
+                        align: 'stretch',
+                        children: [
+                          SDUI.components.Text({
+                            typestyle: 'bodyMd',
+                            color: 'secondary',
+                            text: 'Split across lesson types from your scheduled sessions.',
+                          }),
+                          // DistributionBar with no wrapping Layout — direct child of VStack
+                          SDUI.components.DistributionBar({
+                            segments: SESSION_TIME_SEGMENTS,
+                            totalValue: 100,
+                            size: 'standard',
+                          }),
+                          SDUI.components.HStack({
+                            gap: 'space300',
+                            wrap: true,
+                            justify: 'flex-start',
+                            children: [
+                              SDUI.components.Badge({
+                                text: SDUI.template`Obedience · ${PCT_TIME_OBEDIENCE}%`,
+                                appearance: 'PRIMARY_LIGHT',
+                              }),
+                              SDUI.components.Badge({
+                                text: SDUI.template`Agility · ${PCT_TIME_AGILITY}%`,
+                                appearance: 'WARNING_LIGHT',
+                              }),
+                            ],
+                          }),
+                          SDUI.components.Divider({}),
+                          SDUI.components.HStack({
+                            justify: 'space-between',
+                            align: 'center',
+                            children: [
+                              SDUI.components.Text({
+                                typestyle: 'bodySm',
+                                color: 'secondary',
+                                text: 'Want to dig in?',
+                              }),
+                              SDUI.components.Button({
+                                label: 'Open Schedule',
+                                appearance: 'OUTLINE',
+                                size: 'S',
+                                onPress: SDUI.actions.set(s.activeTab, 'sessions'),
+                              }),
+                            ],
+                          }),
+                        ],
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+              SDUI.components.Layout({
+                width: '32%',
+                minWidth: '280px',
+                children: [
+                  SDUI.components.Card({
+                    title: 'Quick actions',
+                    padding: '32',
+                    children: [
+                      SDUI.components.VStack({
+                        gap: 'space300',
+                        align: 'stretch',
+                        children: [
+                          SDUI.components.Button({
+                            label: 'Add new dog',
+                            appearance: 'PRIMARY',
+                            size: 'M',
+                            isFluid: true,
+                            onPress: [
+                              SDUI.actions.set(s.dogForm, { dog_name: '', breed: '', age: '' }),
+                              SDUI.actions.set(s.showCreateDogModal, true),
+                            ],
+                          }),
+                          SDUI.components.Button({
+                            label: 'Schedule a session',
+                            appearance: 'OUTLINE',
+                            size: 'M',
+                            isFluid: true,
+                            onPress: [
+                              SDUI.actions.set(s.sessionForm, {
+                                dog_id: '',
+                                session_date: '',
+                                duration: '',
+                                training_type: '',
+                                notes: '',
+                              }),
+                              SDUI.actions.set(s.showCreateSessionModal, true),
+                            ],
+                          }),
+                          SDUI.components.Divider({}),
+                          // Use Link components instead of Button GHOST — they
+                          // naturally left-align as text and look cleaner here.
+                          SDUI.components.Text({
+                            typestyle: 'bodyXsEmphasis',
+                            color: 'secondary',
+                            text: 'JUMP TO',
+                          }),
+                          SDUI.components.Link({
+                            text: '→ View all dogs',
+                            href: '#',
+                            onPress: SDUI.actions.set(s.activeTab, 'dogs'),
+                          }),
+                          SDUI.components.Link({
+                            text: '→ View today',
+                            href: '#',
+                            onPress: SDUI.actions.set(s.activeTab, 'today'),
+                          }),
+                        ],
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+  const dogsGrid = SDUI.components.Grid({
+    data: s.dogs,
+    width: '100%',
+    height: 520,
+    columns: [
+      { id: 'dog_name__c', header: 'Name', data: 'dog_name__c', width: 220 },
+      { id: 'breed__c', header: 'Breed', data: 'breed__c', width: 280 },
+      { id: 'age__c', header: 'Age', data: 'age__c', width: 100 },
+      { id: 'total_training_time__c', header: 'Training time', data: 'total_training_time__c', width: 160 },
+    ],
+    selectedRow: s.selectedDog.$bind,
+    headerActions: [{ id: 'new_dog', label: 'Add Dog', icon: 'ADD', appearance: 'primary' }],
+    onHeaderAction: [
+      SDUI.actions.set(s.dogForm, { dog_name: '', breed: '', age: '' }),
+      SDUI.actions.set(s.showCreateDogModal, true),
+    ],
+    rowActions: [
+      { id: 'edit_dog', label: 'Edit', icon: 'EDIT_OUTLINE', placement: 'menu' },
+      { id: 'delete_dog', label: 'Delete', icon: 'TRASH_OUTLINE', placement: 'menu' },
+    ],
+    onRowAction: [
+      SDUI.actions.set(s.dogForm, {
+        dog_name: s.selectedDog['dog_name__c'],
+        breed: s.selectedDog['breed__c'],
+        age: s.selectedDog['age__c'],
+      }),
+      SDUI.actions.set(s.showEditDogModal, true),
+    ],
+  });
+
+  const sessionsGrid = SDUI.components.Grid({
+    data: s.sessions,
+    width: '100%',
+    height: 520,
+    columns: [
+      { id: 'session_date__c', header: 'Date', data: 'session_date__c', width: 160 },
+      { id: 'duration__c', header: 'Duration (min)', data: 'duration__c', width: 140 },
+      { id: 'training_type__c', header: 'Type', data: 'training_type__c', type: 'text', width: 180 },
+      { id: 'notes__c', header: 'Notes', data: 'notes__c', width: 320 },
+    ],
+    selectedRow: s.selectedSession.$bind,
+    headerActions: [{ id: 'new_session', label: 'Add Session', icon: 'ADD', appearance: 'primary' }],
+    onHeaderAction: [
+      SDUI.actions.set(s.sessionForm, {
+        dog_id: '',
+        session_date: '',
+        duration: '',
+        training_type: '',
+        notes: '',
+      }),
+      SDUI.actions.set(s.showCreateSessionModal, true),
+    ],
+    rowActions: [
+      { id: 'edit_session', label: 'Edit', icon: 'EDIT_OUTLINE', placement: 'menu' },
+      { id: 'delete_session', label: 'Delete', icon: 'TRASH_OUTLINE', placement: 'menu' },
+    ],
+    onRowAction: [
+      SDUI.actions.set(s.sessionForm, {
+        dog_id: s.selectedSession['dog_id__c'],
+        session_date: s.selectedSession['session_date__c'],
+        duration: s.selectedSession['duration__c'],
+        training_type: s.selectedSession['training_type__c'],
+        notes: s.selectedSession['notes__c'],
+      }),
+      SDUI.actions.set(s.showEditSessionModal, true),
+    ],
+  });
+
+  const dogsPanel = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 32, bottom: 48, left: 28, right: 28 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space500',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space200',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                text: 'Your dogs',
+              }),
+              SDUI.components.Text({
+                typestyle: 'bodyLg',
+                color: 'secondary',
+                text: 'Add Dog or use ⋯ on a row to edit or delete.',
+              }),
+            ],
+          }),
+          dogsGrid,
+        ],
+      }),
+    ],
+  });
+
+  const sessionsPanel = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 32, bottom: 48, left: 28, right: 28 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space500',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space200',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                text: 'Session schedule',
+              }),
+              SDUI.components.Text({
+                typestyle: 'bodyLg',
+                color: 'secondary',
+                text: 'Add Session or use ⋯ on a row. Dog ID must match a roster id (e.g. dog_1).',
+              }),
+            ],
+          }),
+          sessionsGrid,
+        ],
+      }),
+    ],
+  });
+
+  const todayPanel = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 32, bottom: 48, left: 28, right: 28 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space600',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space200',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                text: 'Today & coming up',
+              }),
+              SDUI.components.Text({
+                typestyle: 'bodyLg',
+                color: 'secondary',
+                text: 'Snapshot of upcoming lessons — production would filter by “today” from your sessions.',
+              }),
+            ],
+          }),
+          SDUI.components.TableBasic({
+            title: 'Who’s on deck',
+            width: 1100,
+            columns: [
+              { header: 'When', key: 'when', width: '22%' },
+              { header: 'Dog', key: 'dog', width: '22%' },
+              { header: 'Type', key: 'type', width: '18%' },
+              { header: 'Focus', key: 'focus', width: '38%' },
+            ],
+            rows: [
+              { when: 'Apr 1 · AM', dog: 'Rex', type: 'Obedience', focus: 'Recall · ring A' },
+              { when: 'Apr 2 · PM', dog: 'Luna', type: 'Agility', focus: 'Weaves & contacts' },
+            ],
+          }),
+          SDUI.components.ActionCard({
+            title: 'Need to change something?',
+            caption: 'Full calendar editing lives on Schedule; roster edits live under Dogs.',
+            icon: 'CALENDAR',
+            alignment: 'CENTER',
+            primaryActionTitle: 'Open Schedule',
+            onPressPrimary: SDUI.actions.set(s.activeTab, 'sessions'),
+            secondaryActionTitle: 'Open Dogs',
+            onPressSecondary: SDUI.actions.set(s.activeTab, 'dogs'),
+          }),
+        ],
+      }),
+    ],
+  });
+
+  const resourcesPanel = SDUI.components.Layout({
+    width: '100%',
+    maxWidth: '1200px',
+    margin: { left: 'auto', right: 'auto' },
+    padding: { top: 32, bottom: 48, left: 28, right: 28 },
+    children: [
+      SDUI.components.VStack({
+        gap: 'space600',
+        align: 'stretch',
+        children: [
+          SDUI.components.VStack({
+            gap: 'space200',
+            children: [
+              SDUI.components.Heading({
+                level: '1',
+                text: 'Resources & safety',
+              }),
+              SDUI.components.Text({
+                typestyle: 'bodyLg',
+                color: 'secondary',
+                text: 'Replace these with real PDFs and links — structure stays the same for handlers.',
+              }),
+            ],
+          }),
+          SDUI.components.Tip({
+            variant: 'warning',
+            title: 'Reactive dogs at the gate',
+            description:
+              'Stagger arrivals so reactive pups aren’t face-to-face in the lobby; post your muzzle policy here.',
+          }),
+          SDUI.components.Tip({
+            variant: 'info',
+            title: 'Emergency vet & after hours',
+            description:
+              'Pin clinic phone, poison control, and directions — trainers shouldn’t hunt for them mid-class.',
+          }),
+          SDUI.components.Card({
+            title: 'Files you’ll attach later',
+            padding: '32',
+            children: [
+              SDUI.components.VStack({
+                gap: 'space400',
+                align: 'stretch',
+                children: [
+                  SDUI.components.Text({
+                    typestyle: 'bodyLg',
+                    color: 'secondary',
+                    text: 'Typical uploads: liability waiver, vaccine proof, venue rules, incident report template.',
+                  }),
+                  SDUI.components.HStack({
+                    gap: 'space300',
+                    wrap: true,
+                    children: [
+                      SDUI.components.Badge({ text: 'Waivers', appearance: 'PRIMARY_LIGHT' }),
+                      SDUI.components.Badge({ text: 'Vaccination records', appearance: 'SUCCESS_LIGHT' }),
+                      SDUI.components.Badge({ text: 'Venue map', appearance: 'WARNING_LIGHT' }),
+                      SDUI.components.Badge({ text: 'Incident log', appearance: 'INFO_LIGHT' }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  const root = SDUI.components.Layout({
+    width: '100%',
+    minHeight: 920,
+    children: [
+      SDUI.components.VStack({
+        align: 'stretch',
+        gap: 'space500',
+        children: [
+          SDUI.components.Tab({
+            value: s.activeTab.$bind,
+            items: [
+              { label: 'Home', value: 'overview' },
+              { label: 'Dogs', value: 'dogs' },
+              { label: 'Schedule', value: 'sessions' },
+              { label: 'Today', value: 'today' },
+              { label: 'Resources', value: 'resources' },
+            ],
+          }),
+          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'overview'), overviewPanel),
+          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'dogs'), dogsPanel),
+          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'sessions'), sessionsPanel),
+          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'today'), todayPanel),
+          SDUI.visible(SDUI.conditions.eq(s.activeTab, 'resources'), resourcesPanel),
+
+          SDUI.components.Modal({
+            title: 'Add Dog',
+            isOpen: s.showCreateDogModal.$bind,
+            onClose: SDUI.actions.set(s.showCreateDogModal, false),
+            children: [
+              SDUI.components.VStack({
+                gap: 'space300',
+                children: [
+                  SDUI.components.TextInput({
+                    label: 'Dog Name',
+                    name: 'dog_name',
+                    value: s.dogForm.dog_name.$bind,
+                    isRequired: true,
+                  }),
+                  SDUI.components.TextInput({
+                    label: 'Breed',
+                    name: 'breed',
+                    value: s.dogForm.breed.$bind,
+                  }),
+                  SDUI.components.Number({
+                    label: 'Age (years)',
+                    name: 'age',
+                    value: s.dogForm.age.$bind,
+                  }),
+                ],
+              }),
+              SDUI.components.HStack({
+                gap: 'space200',
+                justify: 'flex-end',
+                children: [
+                  SDUI.components.Button({
+                    label: 'Cancel',
+                    appearance: 'OUTLINE',
+                    onPress: SDUI.actions.set(s.showCreateDogModal, false),
+                  }),
+                  SDUI.components.Button({
+                    label: 'Create',
+                    appearance: 'PRIMARY',
+                    onPress: SDUI.actions.callFunction(functionId, 'create_dog', {
+                      dog_name: s.dogForm.dog_name,
+                      breed: s.dogForm.breed,
+                      age: s.dogForm.age,
+                      responsePath: '/dogs',
+                      onSuccess: { set: { '/showCreateDogModal': false } },
+                    }),
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Modal({
+            title: 'Edit Dog',
+            isOpen: s.showEditDogModal.$bind,
+            onClose: SDUI.actions.set(s.showEditDogModal, false),
+            children: [
+              SDUI.components.VStack({
+                gap: 'space300',
+                children: [
+                  SDUI.components.TextInput({
+                    label: 'Dog Name',
+                    name: 'edit_dog_name',
+                    value: s.dogForm.dog_name.$bind,
+                    isRequired: true,
+                  }),
+                  SDUI.components.TextInput({
+                    label: 'Breed',
+                    name: 'edit_breed',
+                    value: s.dogForm.breed.$bind,
+                  }),
+                  SDUI.components.Number({
+                    label: 'Age (years)',
+                    name: 'edit_age',
+                    value: s.dogForm.age.$bind,
+                  }),
+                ],
+              }),
+              SDUI.components.HStack({
+                gap: 'space200',
+                justify: 'flex-end',
+                children: [
+                  SDUI.components.Button({
+                    label: 'Delete',
+                    appearance: 'DESTRUCTIVE',
+                    onPress: SDUI.actions.callFunction(functionId, 'delete_dog', {
+                      id: s.selectedDog['id'],
+                      responsePath: '/dogs',
+                      onSuccess: { set: { '/showEditDogModal': false } },
+                    }),
+                  }),
+                  SDUI.components.Button({
+                    label: 'Cancel',
+                    appearance: 'OUTLINE',
+                    onPress: SDUI.actions.set(s.showEditDogModal, false),
+                  }),
+                  SDUI.components.Button({
+                    label: 'Save',
+                    appearance: 'PRIMARY',
+                    onPress: SDUI.actions.callFunction(functionId, 'update_dog', {
+                      id: s.selectedDog['id'],
+                      dog_name: s.dogForm.dog_name,
+                      breed: s.dogForm.breed,
+                      age: s.dogForm.age,
+                      responsePath: '/dogs',
+                      onSuccess: { set: { '/showEditDogModal': false } },
+                    }),
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Modal({
+            title: 'Add Training Session',
+            isOpen: s.showCreateSessionModal.$bind,
+            onClose: SDUI.actions.set(s.showCreateSessionModal, false),
+            children: [
+              SDUI.components.VStack({
+                gap: 'space300',
+                children: [
+                  SDUI.components.TextInput({
+                    label: 'Dog ID',
+                    name: 'dog_id',
+                    value: s.sessionForm.dog_id.$bind,
+                    isRequired: true,
+                  }),
+                  SDUI.components.TextInput({
+                    label: 'Session Date',
+                    name: 'session_date',
+                    value: s.sessionForm.session_date.$bind,
+                    isRequired: true,
+                  }),
+                  SDUI.components.Number({
+                    label: 'Duration (min)',
+                    name: 'duration',
+                    value: s.sessionForm.duration.$bind,
+                  }),
+                  SDUI.components.Select({
+                    label: 'Training Type',
+                    name: 'training_type',
+                    value: s.sessionForm.training_type.$bind,
+                    options: [
+                      { label: 'Obedience', value: 'Obedience' },
+                      { label: 'Agility', value: 'Agility' },
+                      { label: 'Socialization', value: 'Socialization' },
+                      { label: 'Behavior', value: 'Behavior' },
+                    ],
+                  }),
+                  SDUI.components.Textarea({
+                    label: 'Notes',
+                    name: 'notes',
+                    value: s.sessionForm.notes.$bind,
+                  }),
+                ],
+              }),
+              SDUI.components.HStack({
+                gap: 'space200',
+                justify: 'flex-end',
+                children: [
+                  SDUI.components.Button({
+                    label: 'Cancel',
+                    appearance: 'OUTLINE',
+                    onPress: SDUI.actions.set(s.showCreateSessionModal, false),
+                  }),
+                  SDUI.components.Button({
+                    label: 'Create',
+                    appearance: 'PRIMARY',
+                    onPress: SDUI.actions.callFunction(functionId, 'create_session', {
+                      dog_id: s.sessionForm.dog_id,
+                      session_date: s.sessionForm.session_date,
+                      duration: s.sessionForm.duration,
+                      training_type: s.sessionForm.training_type,
+                      notes: s.sessionForm.notes,
+                      responsePath: '/sessions',
+                      onSuccess: { set: { '/showCreateSessionModal': false } },
+                    }),
+                  }),
+                ],
+              }),
+            ],
+          }),
+
+          SDUI.components.Modal({
+            title: 'Edit Training Session',
+            isOpen: s.showEditSessionModal.$bind,
+            onClose: SDUI.actions.set(s.showEditSessionModal, false),
+            children: [
+              SDUI.components.VStack({
+                gap: 'space300',
+                children: [
+                  SDUI.components.TextInput({
+                    label: 'Dog ID',
+                    name: 'edit_dog_id',
+                    value: s.sessionForm.dog_id.$bind,
+                    isRequired: true,
+                  }),
+                  SDUI.components.TextInput({
+                    label: 'Session Date',
+                    name: 'edit_session_date',
+                    value: s.sessionForm.session_date.$bind,
+                    isRequired: true,
+                  }),
+                  SDUI.components.Number({
+                    label: 'Duration (min)',
+                    name: 'edit_duration',
+                    value: s.sessionForm.duration.$bind,
+                  }),
+                  SDUI.components.Select({
+                    label: 'Training Type',
+                    name: 'edit_training_type',
+                    value: s.sessionForm.training_type.$bind,
+                    options: [
+                      { label: 'Obedience', value: 'Obedience' },
+                      { label: 'Agility', value: 'Agility' },
+                      { label: 'Socialization', value: 'Socialization' },
+                      { label: 'Behavior', value: 'Behavior' },
+                    ],
+                  }),
+                  SDUI.components.Textarea({
+                    label: 'Notes',
+                    name: 'edit_notes',
+                    value: s.sessionForm.notes.$bind,
+                  }),
+                ],
+              }),
+              SDUI.components.HStack({
+                gap: 'space200',
+                justify: 'flex-end',
+                children: [
+                  SDUI.components.Button({
+                    label: 'Delete',
+                    appearance: 'DESTRUCTIVE',
+                    onPress: SDUI.actions.callFunction(functionId, 'delete_session', {
+                      id: s.selectedSession['id'],
+                      responsePath: '/sessions',
+                      onSuccess: { set: { '/showEditSessionModal': false } },
+                    }),
+                  }),
+                  SDUI.components.Button({
+                    label: 'Cancel',
+                    appearance: 'OUTLINE',
+                    onPress: SDUI.actions.set(s.showEditSessionModal, false),
+                  }),
+                  SDUI.components.Button({
+                    label: 'Save',
+                    appearance: 'PRIMARY',
+                    onPress: SDUI.actions.callFunction(functionId, 'update_session', {
+                      id: s.selectedSession['id'],
+                      dog_id: s.sessionForm.dog_id,
+                      session_date: s.sessionForm.session_date,
+                      duration: s.sessionForm.duration,
+                      training_type: s.sessionForm.training_type,
+                      notes: s.sessionForm.notes,
+                      responsePath: '/sessions',
+                      onSuccess: { set: { '/showEditSessionModal': false } },
+                    }),
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  });
+
+  return SDUI.render(s, root);
+}
+
+console.log(JSON.stringify(renderSpec('demo-fn'), null, 2));