feat(app-showcase): Account 360 record page + Delivery Operations dashboard (#2059)

Two flagship composed enterprise surfaces — moving the showcase beyond
atomic "one-of-everything" fixtures toward realistic, multi-capability
pages a developer would actually build.

Account 360 (showcase_account_detail, the account object's first record
page) — exercises the related-data + collaboration blocks nothing in the
showcase used before:
  • record:related_list — Projects and Invoices as live child lists
  • record:history — the audit-trail tab
  • the synthesized discussion slot — activity + comment feed (@mentions)
  • record:highlights + record:details (Company / Billing sections)
Highlights and details deliberately use *disjoint* fields: record:details
dedupes highlight fields and hide-empties the rest, so reusing the same
fields (as a first draft did) collapses every section to empty. Account
seed enriched with tax_id + billing_email so the Billing section renders.

Delivery Operations (showcase_ops_dashboard) — a believable ops landing
page vs the one-of-every-chart Chart Gallery:
  • KPI hero row of metric tiles, each scoped by a per-widget filter
    (active projects / at-risk / awaiting-review) — one dataset sliced
    different ways
  • health column + status bar + priority donut + throughput line + spend
    table
  • global dateRange (created_at) + global status filter
showcase_project_metrics gains status + health dimensions to power it.

Both wired into nav (Analytics → Delivery Operations) and registered in
objectstack.config. Verified in the browser (:5181): KPI filters resolve,
charts render, the Account tabs (Details / Projects / Invoices) and
discussion feed all populate. typecheck + 20 showcase tests pass.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/objectstack.config.ts

@@ -14,11 +14,11 @@ import {
 import * as objects from './src/objects/index.js';
 import { TaskViews, ProjectViews } from './src/views/index.js';
 import { ShowcaseApp } from './src/apps/index.js';
-import { ChartGalleryDashboard } from './src/dashboards/index.js';
+import { ChartGalleryDashboard, OpsDashboard } from './src/dashboards/index.js';
 import { ShowcaseTaskDataset, ShowcaseProjectDataset } from './src/datasets/index.js';
 import { allReports } from './src/reports/index.js';
 import { allActions } from './src/actions/index.js';
-import { ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage } from './src/pages/index.js';
+import { ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage, AccountDetailPage } from './src/pages/index.js';
 import { allFlows } from './src/flows/index.js';
 import { allWebhooks } from './src/webhooks/index.js';
 import { allHooks } from './src/hooks/index.js';
@@ -143,8 +143,8 @@ export default defineStack({
   apps: [ShowcaseApp],
   portals: allPortals,
   views: [TaskViews, ProjectViews],
-  pages: [ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage],
-  dashboards: [ChartGalleryDashboard],
+  pages: [ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage, AccountDetailPage],
+  dashboards: [ChartGalleryDashboard, OpsDashboard],
   books: allBooks,
   datasets: [ShowcaseTaskDataset, ShowcaseProjectDataset],
   reports: allReports,

examples/app-showcase/src/apps/index.ts

@@ -36,6 +36,7 @@ export const ShowcaseApp = App.create({
       label: 'Analytics',
       icon: 'chart-bar',
       children: [
+        { id: 'nav_ops', type: 'dashboard', dashboardName: 'showcase_ops_dashboard', label: 'Delivery Operations', icon: 'gauge' },
         { id: 'nav_charts', type: 'dashboard', dashboardName: 'showcase_chart_gallery', label: 'Chart Gallery', icon: 'layout-dashboard' },
         { id: 'nav_report_tabular', type: 'object', objectName: 'showcase_task', viewName: 'tabular', label: 'Task List', icon: 'table' },
         { id: 'nav_report_summary', type: 'report', reportName: 'showcase_hours_by_status', label: 'Hours by Status', icon: 'sigma' },

examples/app-showcase/src/dashboards/index.ts

@@ -1,3 +1,4 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 export { ChartGalleryDashboard } from './chart-gallery.dashboard.js';
+export { OpsDashboard } from './ops-dashboard.dashboard.js';

examples/app-showcase/src/dashboards/ops-dashboard.dashboard.ts

@@ -0,0 +1,67 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import type { ChartConfig, ChartType, Dashboard } from '@objectstack/spec/ui';
+
+const taskDs = 'showcase_task_metrics';
+const projectDs = 'showcase_project_metrics';
+
+const cfg = (type: ChartType, dimension: string, measure: string): ChartConfig => ({
+  type,
+  xAxis: { field: dimension, showGridLines: true, logarithmic: false },
+  yAxis: [{ field: measure, showGridLines: true, logarithmic: false }],
+  showLegend: true,
+  showDataLabels: false,
+});
+
+/**
+ * Delivery Operations — a *believable business* dashboard (vs the Chart Gallery,
+ * which is one-of-every-chart). It composes the patterns a real ops landing page
+ * needs:
+ *   • a KPI hero row of `metric` tiles, each scoped by a per-widget `filter`
+ *     (active projects, at-risk projects, awaiting-review tasks) — the same
+ *     dataset, sliced different ways;
+ *   • comparison / distribution / trend charts underneath;
+ *   • a global `dateRange` (created_at) and a global status filter so the whole
+ *     board re-scopes from the header.
+ *
+ * Everything binds the semantic datasets by name (ADR-0021), so a metric is
+ * defined once and reused.
+ */
+export const OpsDashboard: Dashboard = {
+  name: 'showcase_ops_dashboard',
+  label: 'Delivery Operations',
+  description: 'Operations landing page — KPI hero row, project health, and task throughput.',
+  columns: 12,
+  dateRange: { field: 'created_at', defaultRange: 'last_90_days', allowCustomRange: true },
+  globalFilters: [
+    {
+      field: 'status',
+      label: 'Task Status',
+      type: 'select',
+      options: [
+        { value: 'backlog', label: 'Backlog' },
+        { value: 'todo', label: 'To Do' },
+        { value: 'in_progress', label: 'In Progress' },
+        { value: 'in_review', label: 'In Review' },
+        { value: 'done', label: 'Done' },
+      ],
+      scope: 'dashboard',
+    },
+  ],
+  widgets: [
+    // ── KPI hero row — same project dataset, sliced by per-widget filter ──
+    { id: 'kpi_active_projects', type: 'metric', title: 'Active Projects', dataset: projectDs, values: ['project_count'], filter: { status: 'active' }, colorVariant: 'blue', layout: { x: 0, y: 0, w: 3, h: 2 } },
+    { id: 'kpi_at_risk', type: 'metric', title: 'At-Risk (Red)', dataset: projectDs, values: ['project_count'], filter: { health: 'red' }, colorVariant: 'danger', layout: { x: 3, y: 0, w: 3, h: 2 } },
+    { id: 'kpi_awaiting_review', type: 'metric', title: 'Awaiting Review', dataset: taskDs, values: ['task_count'], filter: { status: 'in_review' }, colorVariant: 'warning', layout: { x: 6, y: 0, w: 3, h: 2 } },
+    { id: 'kpi_total_budget', type: 'metric', title: 'Total Budget', dataset: projectDs, values: ['budget_sum'], colorVariant: 'success', layout: { x: 9, y: 0, w: 3, h: 2 } },
+
+    // ── Health + throughput ──────────────────────────────────────────────
+    { id: 'col_health', type: 'column', title: 'Projects by Health', dataset: projectDs, dimensions: ['health'], values: ['project_count'], chartConfig: cfg('column', 'health', 'project_count'), layout: { x: 0, y: 2, w: 4, h: 4 } },
+    { id: 'bar_status', type: 'bar', title: 'Tasks by Status', dataset: taskDs, dimensions: ['status'], values: ['task_count'], chartConfig: cfg('bar', 'status', 'task_count'), layout: { x: 4, y: 2, w: 4, h: 4 } },
+    { id: 'donut_priority', type: 'donut', title: 'Priority Mix', dataset: taskDs, dimensions: ['priority'], values: ['task_count'], chartConfig: cfg('donut', 'priority', 'task_count'), layout: { x: 8, y: 2, w: 4, h: 4 } },
+
+    // ── Trend + account spend ────────────────────────────────────────────
+    { id: 'line_created', type: 'line', title: 'Task Throughput (monthly)', dataset: taskDs, dimensions: ['created_at'], values: ['task_count'], chartConfig: cfg('line', 'created_at', 'task_count'), layout: { x: 0, y: 6, w: 6, h: 4 } },
+    { id: 'table_spend', type: 'table', title: 'Budget vs Spent by Account', dataset: projectDs, dimensions: ['account'], values: ['project_count', 'budget_sum', 'spent_sum'], layout: { x: 6, y: 6, w: 6, h: 4 } },
+  ],
+};

examples/app-showcase/src/data/index.ts

@@ -23,9 +23,9 @@ const accounts = defineSeed(Account, {
     // `status` is required and no default is applied at seed-insert time, so it
     // must be set explicitly or the row is rejected (this is why Accounts was
     // empty). `hq` also exercises the location field.
-    { name: 'Northwind', industry: 'retail', annual_revenue: 8_000_000, website: 'https://northwind.example', status: 'active', hq: { lat: 47.6062, lng: -122.3321 } },
-    { name: 'Contoso', industry: 'technology', annual_revenue: 25_000_000, website: 'https://contoso.example', status: 'active', hq: { lat: 37.7749, lng: -122.4194 } },
-    { name: 'Fabrikam', industry: 'healthcare', annual_revenue: 12_000_000, website: 'https://fabrikam.example', status: 'prospect', hq: { lat: 40.7128, lng: -74.0060 } },
+    { name: 'Northwind', industry: 'retail', annual_revenue: 8_000_000, website: 'https://northwind.example', status: 'active', hq: { lat: 47.6062, lng: -122.3321 }, tax_id: '91-1144442', billing_email: 'ap@northwind.example' },
+    { name: 'Contoso', industry: 'technology', annual_revenue: 25_000_000, website: 'https://contoso.example', status: 'active', hq: { lat: 37.7749, lng: -122.4194 }, tax_id: '20-3399881', billing_email: 'billing@contoso.example' },
+    { name: 'Fabrikam', industry: 'healthcare', annual_revenue: 12_000_000, website: 'https://fabrikam.example', status: 'prospect', hq: { lat: 40.7128, lng: -74.0060 }, tax_id: '46-7782013', billing_email: 'accounts@fabrikam.example' },
   ],
 });
 

examples/app-showcase/src/datasets/chart-gallery.dataset.ts

@@ -34,6 +34,10 @@ export const ShowcaseProjectDataset = defineDataset({
   object: 'showcase_project',
   dimensions: [
     { name: 'account', label: 'Account', field: 'account', type: 'lookup' },
+    // status / health added for the Operations dashboard — power the
+    // "by health" chart and the filtered KPI tiles (active / at-risk).
+    { name: 'status', label: 'Status', field: 'status', type: 'string' },
+    { name: 'health', label: 'Health', field: 'health', type: 'string' },
   ],
   measures: [
     { name: 'project_count', label: 'Projects', aggregate: 'count' },

examples/app-showcase/src/pages/account-detail.page.ts

@@ -0,0 +1,106 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import type { Page } from '@objectstack/spec/ui';
+
+/**
+ * Account 360 — the flagship "object 360" record page every enterprise app has,
+ * and the first showcase page to exercise the related-data + collaboration
+ * blocks that nothing else used before:
+ *   • `record:related_list` — the account's Projects and Invoices, each a live
+ *                             child list (relationshipField = the `account`
+ *                             lookup on the child object).
+ *   • `record:history`      — the field-level audit trail.
+ *   • the synthesized `discussion` slot — a unified activity + comment feed
+ *     (@mentions, reactions): the human collaboration surface, for free.
+ *   • `record:highlights` + `record:details` — the summary strip + sections.
+ *
+ * `kind: 'slotted'` — overrides only `highlights` + `tabs`; the synthesizer
+ * fills the header and the discussion feed. (Tabs-with-children render under the
+ * slotted path; the same shape inside a full-page region does not — mirror the
+ * working Project Detail page.)
+ */
+export const AccountDetailPage: Page = {
+  name: 'showcase_account_detail',
+  label: 'Account',
+  type: 'record',
+  object: 'showcase_account',
+  kind: 'slotted',
+  template: 'default',
+  isDefault: true,
+  regions: [],
+  slots: {
+    highlights: {
+      type: 'record:highlights',
+      properties: { fields: ['status', 'industry', 'annual_revenue'] },
+    },
+    tabs: {
+      type: 'page:tabs',
+      properties: {
+        type: 'line',
+        items: [
+          {
+            key: 'details',
+            label: 'Details',
+            children: [
+              {
+                type: 'record:details',
+                properties: {
+                  sections: [
+                    { label: 'Company', columns: 2, fields: ['website', 'hq'] },
+                    { label: 'Billing', columns: 2, fields: ['tax_id', 'billing_email'] },
+                  ],
+                },
+              },
+            ],
+          },
+          {
+            key: 'projects',
+            label: 'Projects',
+            children: [
+              {
+                type: 'record:related_list',
+                properties: {
+                  objectName: 'showcase_project',
+                  relationshipField: 'account',
+                  title: 'Projects',
+                  columns: ['name', 'status', 'health', 'budget', 'end_date'],
+                  sort: [{ field: 'budget', order: 'desc' }],
+                  limit: 10,
+                  showViewAll: true,
+                },
+              },
+            ],
+          },
+          {
+            key: 'invoices',
+            label: 'Invoices',
+            children: [
+              {
+                type: 'record:related_list',
+                properties: {
+                  objectName: 'showcase_invoice',
+                  relationshipField: 'account',
+                  title: 'Invoices',
+                  columns: ['name', 'status', 'total', 'issued_on'],
+                  sort: [{ field: 'issued_on', order: 'desc' }],
+                  limit: 10,
+                  showViewAll: true,
+                },
+              },
+            ],
+          },
+          {
+            key: 'history',
+            label: 'History',
+            children: [
+              {
+                type: 'record:history',
+                properties: { limit: 50, showUser: true, showTimestamp: true },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+};

examples/app-showcase/src/pages/index.ts

@@ -8,6 +8,7 @@ export { TaskWorkbenchPage } from './task-workbench.page.js';
 export { TaskTriagePage } from './task-triage.page.js';
 export { ActiveProjectsPage } from './active-projects.page.js';
 export { TaskDetailPage } from './task-detail.page.js';
+export { AccountDetailPage } from './account-detail.page.js';
 export {
   TaskBoardPage,
   TaskCalendarPage,