@svgrid/enterprise 2.0.4 → 2.2.1

package/src/studio/sample-data.ts

@@ -97,7 +97,10 @@ function isoDate(offsetDays: number, withTime: boolean): string {
   const day = Math.max(1, Math.min(28, (((dayOfYear % 30) + 30) % 30) + 1))
   const mm = String(month + 1).padStart(2, '0')
   const dd = String(day).padStart(2, '0')
-  return withTime ? `${BASE_YEAR}-${mm}-${dd}T09:${String(10 + (offsetDays % 40)).padStart(2, '0')}:00Z` : `${BASE_YEAR}-${mm}-${dd}`
+  // Minutes must land in 00-59 even when offsetDays is negative (JS `%` keeps the
+  // sign, which would emit an invalid "T09:-2:00Z"). Normalise to a positive range.
+  const minute = 10 + ((((offsetDays % 40) + 40) % 40))
+  return withTime ? `${BASE_YEAR}-${mm}-${dd}T09:${String(minute).padStart(2, '0')}:00Z` : `${BASE_YEAR}-${mm}-${dd}`
 }
 
 // --- the generator ----------------------------------------------------------

package/src/studio/samples/ats.ts

@@ -1,6 +1,6 @@
 import type { EntitySchema } from '../../schema.js'
 import type { FormatRule } from '../project.js'
-import { screen, formScreen, boardScreen, calendarScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+import { screen, formScreen, boardScreen, schedulerScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
 
 const jobs: EntitySchema = {
   name: 'jobs',
@@ -195,7 +195,7 @@ export const ats: SampleApp = {
         formScreen(candidates, { id: 'candidates', title: 'Candidates', order: 6 }, undefined, { format: candidateFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['source']),
         // Interview schedule: applications placed on a month calendar by their
         // scheduled interview slot (card title resolves to the candidate name).
-        calendarScreen(applications, { id: 'interviews', title: 'Interviews', order: 7 }, { dateField: 'interviewAt', titleField: 'candidateId', filter: ['stage', 'jobId'] }),
+        schedulerScreen(applications, { id: 'interviews', title: 'Interviews', order: 7 }, { startField: 'interviewAt', titleField: 'candidateId', colorField: 'stage', initialView: 'week' }),
       ],
     })
   },

package/src/studio/samples/clinic.ts

@@ -1,6 +1,6 @@
 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'
+import { screen, formScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
 
 const doctors: EntitySchema = {
   name: 'doctors',
@@ -161,7 +161,9 @@ export const clinic: SampleApp = {
           { 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'] }),
+        // Resource scheduler: a column per doctor, appointments placed by time + tinted
+        // by status, drag-to-reschedule + a detail drawer (day view). Was a month calendar.
+        schedulerScreen(appointments, { id: 'schedule', title: 'Schedule', order: 2 }, { startField: 'scheduledAt', titleField: 'patientId', colorField: 'status', resourceField: 'doctorId', initialView: 'day' }),
         // 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 }, {

package/src/studio/samples/crm.ts

@@ -1,6 +1,6 @@
 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'
+import { screen, formScreen, boardScreen, schedulerScreen, workspaceScreen, 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).
@@ -195,10 +195,14 @@ export const crm: SampleApp = {
         // 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 desk: a docking-manager console (split panes) - filter deals on the
+        // left, the pipeline grid centre, and the selected deal's record on the right.
+        // Resize the panes; click a row to load it. Showcases screen layout: 'split'.
+        workspaceScreen(deals, { id: 'deal-desk', title: 'Deal desk', order: 2 }, { filter: ['stage', 'owner'], mode: 'split' }),
         // 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 }, {
+        detailScreen(deals, { id: 'deal-360', title: 'Deal 360', order: 3 }, {
           titleField: 'title', subtitleField: 'companyId', statusField: 'stage',
           metricFields: ['value', 'probability'],
           sections: [
@@ -209,7 +213,7 @@ export const crm: SampleApp = {
         }),
         // 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 }, [
+        dashScreen(deals, { id: 'forecast', title: 'Forecast', order: 4 }, [
           { 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 },
@@ -219,7 +223,7 @@ export const crm: SampleApp = {
         // 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 }, [
+        dashScreen(companies, { id: 'accounts', title: 'Accounts', order: 5 }, [
           { 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 },
@@ -231,7 +235,7 @@ export const crm: SampleApp = {
         ]),
         // 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 }, [
+        dashScreen(activities, { id: 'activities', title: 'Activities', order: 6 }, [
           { 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 },
@@ -241,9 +245,13 @@ export const crm: SampleApp = {
           { 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']),
+        // Activity schedule: the activities grid rendered as a resource scheduler -
+        // a column per owner (rep), tasks placed by due date and tinted by type, with
+        // drag-to-reschedule + a detail drawer. Showcases the grid's scheduler view.
+        schedulerScreen(activities, { id: 'activity-cal', title: 'Schedule', order: 7 }, { startField: 'dueDate', titleField: 'subject', colorField: 'type', resourceField: 'owner', initialView: 'week' }),
+        screen(companies, 'master-detail', { id: 'companies', title: 'Companies', order: 8, child: contacts, foreignKey: 'companyId' }),
+        formScreen(contacts, { id: 'contacts', title: 'Contacts', order: 9 }, undefined, {}, ['companyId', 'tags', 'active']),
+        formScreen(deals, { id: 'deals', title: 'Deals', order: 10 }, undefined, { format: dealFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'deal-360', sourceField: 'id', targetField: 'id' } }, ['stage', 'owner', 'companyId']),
       ],
     })
   },

package/src/studio/samples/events.ts

@@ -1,6 +1,6 @@
 import type { EntitySchema } from '../../schema.js'
 import type { FormatRule } from '../project.js'
-import { screen, formScreen, calendarScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+import { screen, formScreen, schedulerScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
 
 const eventsEntity: EntitySchema = {
   name: 'events',
@@ -183,7 +183,9 @@ export const events: SampleApp = {
         ]),
         // Schedule: a month calendar placing every event on its start date, tinted
         // by category. The signature "real app" scheduling view.
-        calendarScreen(eventsEntity, { id: 'schedule', title: 'Schedule', order: 2 }, { dateField: 'startAt', titleField: 'name', colorField: 'category', filter: ['category', 'status'] }),
+        // Scheduler: events laid out on a week/day timeline by start time + tinted by
+        // category, with drag-to-reschedule + a detail drawer. Was a month calendar.
+        schedulerScreen(eventsEntity, { id: 'schedule', title: 'Schedule', order: 2 }, { startField: 'startAt', titleField: 'name', colorField: 'category', initialView: 'week' }),
         // Event 360: a full record page for one event - header with status pill and
         // capacity / price tiles, a tabbed overview, and a registrations timeline.
         detailScreen(eventsEntity, { id: 'event-detail', title: 'Event detail', order: 3 }, {

package/src/studio/samples/fleet.ts

@@ -1,6 +1,6 @@
 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'
+import { screen, formScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
 
 const drivers: EntitySchema = {
   name: 'drivers',
@@ -168,7 +168,9 @@ export const fleet: SampleApp = {
           { filter: ['status', 'vehicleId', 'driverId'], span: 3 },
           { grid: true, format: tripFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
         ]),
-        calendarScreen(trips, { id: 'dispatch', title: 'Dispatch', order: 2 }, { dateField: 'startAt', titleField: 'driverId', colorField: 'status', filter: ['status', 'vehicleId'] }),
+        // Resource scheduler: a column per vehicle, trips placed by time + tinted by status,
+        // drag-to-reassign a vehicle + a detail drawer (week view). Was a month calendar.
+        schedulerScreen(trips, { id: 'dispatch', title: 'Dispatch', order: 2 }, { startField: 'startAt', titleField: 'driverId', colorField: 'status', resourceField: 'vehicleId', initialView: 'week' }),
         // Vehicle detail: asset header (status pill) + mileage / fuel tiles with a
         // trip-history timeline (each trip titled by its driver, colored by status).
         detailScreen(vehicles, { id: 'vehicle-detail', title: 'Vehicle detail', order: 3 }, {

package/src/studio/samples/gym.ts

@@ -1,6 +1,6 @@
 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'
+import { screen, formScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
 
 const classes: EntitySchema = {
   name: 'classes',
@@ -198,7 +198,9 @@ export const gym: SampleApp = {
           { filter: ['status'], span: 3 },
           { grid: true, format: bookingFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
         ]),
-        calendarScreen(bookings, { id: 'schedule-cal', title: 'Schedule', order: 3 }, { dateField: 'bookedAt', titleField: 'classId', colorField: 'status', filter: ['status', 'classId'] }),
+        // Resource scheduler: a column per class, bookings placed by time (who's in each
+        // class), tinted by status, with drag-to-reschedule (week view). Was a month calendar.
+        schedulerScreen(bookings, { id: 'schedule-cal', title: 'Schedule', order: 3 }, { startField: 'bookedAt', titleField: 'memberId', colorField: 'status', resourceField: 'classId', initialView: 'week' }),
         detailScreen(members, { id: 'member-360', title: 'Member 360', order: 4 }, {
           titleField: 'name', subtitleField: 'email', statusField: 'status',
           metricFields: ['monthlyFee'],

package/src/studio/samples/hr.ts

@@ -1,6 +1,6 @@
 import type { EntitySchema } from '../../schema.js'
 import type { FormatRule } from '../project.js'
-import { screen, formScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+import { screen, formScreen, schedulerScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
 
 const departments: EntitySchema = {
   name: 'departments',
@@ -187,6 +187,8 @@ export const hr: SampleApp = {
           { tree: { labelField: 'name', parentField: 'parentId' }, span: 3 },
           { grid: true, summaries: true, span: 3 },
         ]),
+        // Leave calendar: time-off as a per-employee resource scheduler (drag to reschedule).
+        schedulerScreen(timeOff, { id: 'leave-calendar', title: 'Leave calendar', order: 7 }, { startField: 'startDate', endField: 'endDate', titleField: 'type', colorField: 'status', resourceField: 'employeeId', initialView: 'week' }),
       ],
     })
   },