feat(Report): add sales performance report and integrate report builder in ReportView

hotlong · hotlong · commit f02e9eef72b4 · 2026-02-06T16:10:52.000+08:00
diff --git a/apps/console/objectstack.shared.ts b/apps/console/objectstack.shared.ts
@@ -15,6 +15,24 @@ if (crmConfig.objects?.length) {
     // console.log('DEBUG: CRM Config content:', JSON.stringify(crmConfig, null, 2));
 }
 
+// Patch CRM App Navigation to include Report (since it was removed from CRM config for strict validation)
+const crmApps = crmConfig.apps ? JSON.parse(JSON.stringify(crmConfig.apps)) : [];
+if (crmApps.length > 0) {
+    const crmApp = crmApps[0];
+    if (crmApp && crmApp.navigation) {
+        // Insert report after dashboard
+        const dashboardIdx = crmApp.navigation.findIndex((n: any) => n.id === 'nav_dashboard');
+        const insertIdx = dashboardIdx !== -1 ? dashboardIdx + 1 : 0;
+        crmApp.navigation.splice(insertIdx, 0, {
+            id: 'nav_sales_report',
+            type: 'report',
+            reportName: 'sales_performance_q1',
+            label: 'Sales Report',
+            icon: 'file-bar-chart'
+        });
+    }
+}
+
 export const sharedConfig = {
   // ============================================================================
   // Project Metadata
@@ -33,7 +51,7 @@ export const sharedConfig = {
     ...(kitchenSinkConfig.objects || [])
   ],
   apps: [
-    ...(crmConfig.apps || []),
+    ...crmApps,
     ...(todoConfig.apps || []),
     ...(kitchenSinkConfig.apps || [])
   ],
@@ -43,7 +61,51 @@ export const sharedConfig = {
     ...(kitchenSinkConfig.dashboards || [])
   ],
   reports: [
-    ...(crmConfig.reports || [])
+    ...(crmConfig.reports || []),
+    // Manually added report since CRM config validation prevents it
+    {
+      name: 'sales_performance_q1',
+      label: 'Q1 Sales Performance',
+      description: 'Quarterly analysis of sales revenue by region and product line',
+      type: 'report',
+      title: 'Q1 Sales Performance Report',
+      sections: [
+        {
+          type: 'header',
+          title: 'Executive Summary',
+          subtitle: 'Generated on Feb 6, 2026' 
+        },
+        {
+          type: 'summary',
+          title: 'Key Metrics',
+          metrics: [
+             { label: 'Total Revenue', value: '$1,240,000', change: 12, trend: 'up' },
+             { label: 'Deals Closed', value: '45', change: 5, trend: 'up' },
+             { label: 'Avg Deal Size', value: '$27,500', change: -2, trend: 'down' }
+          ]
+        },
+        {
+          type: 'chart',
+          title: 'Revenue Trend',
+          chart: {
+             chartType: 'line',
+             title: 'Monthly Revenue',
+             xAxisField: 'month',
+             yAxisFields: ['revenue'],
+             data: [
+                { month: 'Jan', revenue: 320000 },
+                { month: 'Feb', revenue: 450000 },
+                { month: 'Mar', revenue: 470000 }
+             ]
+          }
+        },
+        {
+          type: 'section',
+          title: 'Regional Breakdown',
+          content: 'North America continues to lead with 45% of total revenue, followed by EMEA at 30%.'
+        }
+      ]
+    } as any
   ],
   pages: [
     ...(crmConfig.pages || []),
diff --git a/apps/console/src/components/ReportView.tsx b/apps/console/src/components/ReportView.tsx
@@ -1,19 +1,33 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { ReportViewer } from '@object-ui/plugin-report';
+import { ReportViewer, ReportBuilder } from '@object-ui/plugin-report';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
-import { Code2 } from 'lucide-react';
+import { Code2, PenLine, ChevronLeft } from 'lucide-react';
 import appConfig from '../../objectstack.shared';
 
+// Mock fields for the builder since we don't have a dynamic schema provider here yet
+const MOCK_FIELDS = [
+  { name: 'month', label: 'Month', type: 'string' },
+  { name: 'revenue', label: 'Revenue', type: 'number' },
+  { name: 'count', label: 'Count', type: 'number' },
+  { name: 'region', label: 'Region', type: 'string' },
+  { name: 'product', label: 'Product', type: 'string' },
+  { name: 'source', label: 'Lead Source', type: 'string' },
+  { name: 'stage', label: 'Stage', type: 'string' },
+  { name: 'amount', label: 'Amount', type: 'currency' },
+];
+
 export function ReportView() {
   const { reportName } = useParams<{ reportName: string }>();
   const [showDebug, setShowDebug] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
   
   // Find report definition in config
   // Note: we need to cast appConfig because reports might not be in the strict type yet
-  const report = (appConfig as any).reports?.find((r: any) => r.name === reportName);
+  const initialReport = (appConfig as any).reports?.find((r: any) => r.name === reportName);
+  const [reportData, setReportData] = useState(initialReport);
 
-  if (!report) {
+  if (!initialReport) {
     return (
       <div className="h-full flex items-center justify-center p-8">
          <Empty>
@@ -24,12 +38,43 @@ export function ReportView() {
     );
   }
 
+  const handleSave = (newReport: any) => {
+    console.log('Saving report:', newReport);
+    setReportData(newReport);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className="flex flex-col h-full overflow-hidden bg-background">
+         <div className="flex items-center p-4 border-b bg-muted/10 gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setIsEditing(false)}>
+               <ChevronLeft className="h-4 w-4 mr-1" />
+               Back to View
+            </Button>
+            <div className="font-medium">Edit Report: {reportData.title}</div>
+         </div>
+         <div className="flex-1 overflow-auto">
+            <ReportBuilder 
+               schema={{ 
+                  title: 'Report Builder', 
+                  report: reportData,
+                  availableFields: MOCK_FIELDS,
+                  onSave: handleSave,
+                  onCancel: () => setIsEditing(false)
+               }} 
+            />
+         </div>
+      </div>
+    );
+  }
+
   // Wrap the report definition in the ReportViewer schema
   // The ReportViewer expects a schema property which is of type ReportViewerSchema
   // That schema has a 'report' property which is the actual report definition (ReportSchema)
   const viewerSchema = {
       type: 'report-viewer',
-      report: report, // The report definition
+      report: reportData, // The report definition
       showToolbar: true,
       allowExport: true
   };
@@ -39,17 +84,23 @@ export function ReportView() {
       <div className="flex justify-between items-center p-6 border-b shrink-0 bg-muted/10">
         <div>
            {/* Header is handled by ReportViewer usually, but we can have a page header too */}
-           <h1 className="text-lg font-medium text-muted-foreground">Report Viewer</h1>
+           <h1 className="text-lg font-medium text-muted-foreground">{reportData.title || 'Report Viewer'}</h1>
+        </div>
+        <div className="flex items-center gap-2">
+           <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
+              <PenLine className="h-4 w-4 mr-2" />
+              Edit Report
+           </Button>
+           <Button 
+             variant={showDebug ? "secondary" : "ghost"}
+             size="sm" 
+             onClick={() => setShowDebug(!showDebug)} 
+             className="gap-2"
+           >
+             <Code2 className="h-4 w-4" />
+             {showDebug ? 'Hide JSON' : 'Show JSON'}
+           </Button>
         </div>
-        <Button 
-          variant={showDebug ? "secondary" : "ghost"}
-          size="sm" 
-          onClick={() => setShowDebug(!showDebug)} 
-          className="gap-2"
-        >
-          <Code2 className="h-4 w-4" />
-          Metadata
-        </Button>
       </div>
 
       <div className="flex-1 overflow-hidden flex flex-row relative">
@@ -70,7 +121,7 @@ export function ReportView() {
                       <h4 className="text-xs font-bold uppercase text-muted-foreground mb-2">Report Configuration</h4>
                         <div className="relative rounded-md border bg-slate-950 text-slate-50 overflow-hidden">
                           <pre className="text-xs p-3 overflow-auto max-h-[800px]">
-                              {JSON.stringify(report, null, 2)}
+                              {JSON.stringify(reportData, null, 2)}
                           </pre>
                       </div>
                   </div>
diff --git a/examples/crm/objectstack.config.ts b/examples/crm/objectstack.config.ts
@@ -20,51 +20,7 @@ export default defineStack({
     ProjectObject,
     EventObject
   ],
-  reports: [
-    {
-      name: 'sales_performance_q1',
-      label: 'Q1 Sales Performance',
-      description: 'Quarterly analysis of sales revenue by region and product line',
-      type: 'report',
-      title: 'Q1 Sales Performance Report',
-      sections: [
-        {
-          type: 'header',
-          title: 'Executive Summary',
-          subtitle: 'Generated on Feb 6, 2026' 
-        },
-        {
-          type: 'summary',
-          title: 'Key Metrics',
-          metrics: [
-             { label: 'Total Revenue', value: '$1,240,000', change: 12, trend: 'up' },
-             { label: 'Deals Closed', value: '45', change: 5, trend: 'up' },
-             { label: 'Avg Deal Size', value: '$27,500', change: -2, trend: 'down' }
-          ]
-        },
-        {
-          type: 'chart',
-          title: 'Revenue Trend',
-          chart: {
-             chartType: 'line',
-             title: 'Monthly Revenue',
-             xAxisField: 'month',
-             yAxisFields: ['revenue'],
-             data: [
-                { month: 'Jan', revenue: 320000 },
-                { month: 'Feb', revenue: 450000 },
-                { month: 'Mar', revenue: 470000 }
-             ]
-          }
-        },
-        {
-          type: 'section',
-          title: 'Regional Breakdown',
-          content: 'North America continues to lead with 45% of total revenue, followed by EMEA at 30%.'
-        }
-      ]
-    }
-  ],
+  reports: [],
   apps: [
     App.create({
       name: 'crm_app',
@@ -78,13 +34,6 @@ export default defineStack({
           label: 'Dashboard',
           icon: 'layout-dashboard'
         },
-        {
-          id: 'nav_sales_report',
-          type: 'report',
-          reportName: 'sales_performance_q1',
-          label: 'Sales Report',
-          icon: 'file-bar-chart'
-        },
         {
           id: 'nav_contacts',
           type: 'object',
diff --git a/packages/plugin-report/src/index.tsx b/packages/plugin-report/src/index.tsx
@@ -18,7 +18,6 @@ ComponentRegistry.register(
   'report',
   ReportRenderer,
   {
-    namespace: 'plugin-report',
     label: 'Report',
     category: 'Report',
     inputs: [
@@ -34,7 +33,6 @@ ComponentRegistry.register(
   'report-viewer',
   ReportViewer,
   {
-    namespace: 'plugin-report',
     label: 'Report Viewer',
     category: 'Report',
     inputs: [
@@ -49,7 +47,6 @@ ComponentRegistry.register(
   'report-builder',
   ReportBuilder,
   {
-    namespace: 'plugin-report',
     label: 'Report Builder',
     category: 'Report',
     inputs: [
