feat: integrate API for system pages, collaboration, reports, and view designer

- Issue 1 (P0): System admin pages now use useAdapter() + dataSource.find() for real CRUD
- Issue 2 (P1): Replace hardcoded mock data in AppHeader and RecordDetailView with API calls
- Issue 3 (P2): ReportBuilder fields now derived from object schema via useMetadata()
- Issue 4 (P3): ViewDesigner save now persists view config via dataSource.create/update

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/components/AppHeader.tsx

@@ -26,13 +26,15 @@ import {
 } from '@object-ui/components';
 import { Search, HelpCircle, ChevronDown } from 'lucide-react';
 
+import { useState, useEffect, useCallback } from 'react';
 import { useOffline } from '@object-ui/react';
 import { PresenceAvatars, type PresenceUser } from '@object-ui/collaboration';
 import { ModeToggle } from './mode-toggle';
 import { LocaleSwitcher } from './LocaleSwitcher';
 import { ConnectionStatus } from './ConnectionStatus';
 import { ActivityFeed, type ActivityItem } from './ActivityFeed';
 import type { ConnectionState } from '../dataSource';
+import { useAdapter } from '../context/AdapterProvider';
 
 /** Convert a slug like "crm_dashboard" or "audit-log" to "Crm Dashboard" / "Audit Log" */
 function humanizeSlug(slug: string): string {
@@ -41,27 +43,40 @@ function humanizeSlug(slug: string): string {
     .replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
-// Demo presence users for local/mock mode
-const MOCK_PRESENCE_USERS: PresenceUser[] = [
+// Fallback presence users when API is unavailable
+const FALLBACK_PRESENCE_USERS: PresenceUser[] = [
   { userId: 'u1', userName: 'Alice Chen', color: '#3498db', status: 'active', lastActivity: new Date().toISOString() },
   { userId: 'u2', userName: 'Bob Smith', color: '#2ecc71', status: 'idle', lastActivity: new Date().toISOString() },
   { userId: 'u3', userName: 'Carol Li', color: '#e74c3c', status: 'active', lastActivity: new Date().toISOString() },
 ];
 
-// Demo activity items for local/mock mode
-const DEMO_ACTIVITIES: ActivityItem[] = [
-  { id: 'a1', type: 'create', objectName: 'Contact', recordId: 'c-101', user: 'Alice Chen', description: 'Created new contact "Acme Corp"', timestamp: new Date(Date.now() - 2 * 60 * 1000).toISOString() },
-  { id: 'a2', type: 'update', objectName: 'Deal', recordId: 'd-42', user: 'Bob Smith', description: 'Updated deal stage to "Negotiation"', timestamp: new Date(Date.now() - 15 * 60 * 1000).toISOString() },
-  { id: 'a3', type: 'comment', objectName: 'Task', recordId: 't-88', user: 'Carol Li', description: 'Commented on task "Q4 Review"', timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString() },
-  { id: 'a4', type: 'delete', objectName: 'Lead', recordId: 'l-7', user: 'Alice Chen', description: 'Deleted duplicate lead "Test Lead"', timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString() },
-  { id: 'a5', type: 'update', objectName: 'Contact', recordId: 'c-55', user: 'Bob Smith', description: 'Updated email for "Jane Doe"', timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString() },
-];
-
-export function AppHeader({ appName, objects, connectionState, presenceUsers }: { appName: string, objects: any[], connectionState?: ConnectionState, presenceUsers?: PresenceUser[] }) {
+export function AppHeader({ appName, objects, connectionState, presenceUsers, activities }: { appName: string, objects: any[], connectionState?: ConnectionState, presenceUsers?: PresenceUser[], activities?: ActivityItem[] }) {
     const location = useLocation();
     const params = useParams();
     const { isOnline } = useOffline();
-    const activeUsers = presenceUsers ?? MOCK_PRESENCE_USERS;
+    const dataSource = useAdapter();
+
+    const [apiPresenceUsers, setApiPresenceUsers] = useState<PresenceUser[] | null>(null);
+    const [apiActivities, setApiActivities] = useState<ActivityItem[] | null>(null);
+
+    const fetchPresenceAndActivities = useCallback(async () => {
+      if (!dataSource) return;
+      try {
+        const [presenceResult, activityResult] = await Promise.all([
+          dataSource.find('sys_presence').catch(() => ({ data: [] })),
+          dataSource.find('sys_activity', { $orderby: 'timestamp desc', $top: 20 }).catch(() => ({ data: [] })),
+        ]);
+        if (presenceResult.data?.length) setApiPresenceUsers(presenceResult.data);
+        if (activityResult.data?.length) setApiActivities(activityResult.data);
+      } catch {
+        // Fallback to defaults handled below
+      }
+    }, [dataSource]);
+
+    useEffect(() => { fetchPresenceAndActivities(); }, [fetchPresenceAndActivities]);
+
+    const activeUsers = presenceUsers ?? apiPresenceUsers ?? FALLBACK_PRESENCE_USERS;
+    const activeActivities = activities ?? apiActivities ?? [];
 
     // Parse the current route to build breadcrumbs
     const pathParts = location.pathname.split('/').filter(Boolean);
@@ -227,7 +242,7 @@ export function AppHeader({ appName, objects, connectionState, presenceUsers }:
 
                 {/* Activity Feed */}
                 <div className="hidden sm:flex shrink-0 relative">
-                  <ActivityFeed activities={DEMO_ACTIVITIES} />
+                  <ActivityFeed activities={activeActivities} />
                 </div>
 
                 {/* Help */}

apps/console/src/components/RecordDetailView.tsx

@@ -22,13 +22,7 @@ interface RecordDetailViewProps {
   onEdit: (record: any) => void;
 }
 
-const MOCK_USER = { id: 'current-user', name: 'Demo User' };
-
-// Demo presence users viewing the current record
-const MOCK_RECORD_VIEWERS: PresenceUser[] = [
-  { userId: 'u1', userName: 'Alice Chen', color: '#3498db', status: 'active', lastActivity: new Date().toISOString() },
-  { userId: 'u3', userName: 'Carol Li', color: '#e74c3c', status: 'active', lastActivity: new Date().toISOString() },
-];
+const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 
 export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps) {
   const { objectName, recordId } = useParams();
@@ -37,14 +31,31 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
   const [isLoading, setIsLoading] = useState(true);
   const [comments, setComments] = useState<Comment[]>([]);
   const [threadResolved, setThreadResolved] = useState(false);
+  const [recordViewers, setRecordViewers] = useState<PresenceUser[]>([]);
   const objectDef = objects.find((o: any) => o.name === objectName);
 
   const currentUser = user
     ? { id: user.id, name: user.name, avatar: user.image }
-    : MOCK_USER;
+    : FALLBACK_USER;
+
+  // Fetch presence and comments from API
+  useEffect(() => {
+    if (!dataSource || !objectName || !recordId) return;
+    const threadId = `${objectName}:${recordId}`;
+
+    // Fetch record viewers
+    dataSource.find('sys_presence', { $filter: `recordId eq '${recordId}'` })
+      .then((res: any) => { if (res.data?.length) setRecordViewers(res.data); })
+      .catch(() => {});
+
+    // Fetch persisted comments
+    dataSource.find('sys_comment', { $filter: `threadId eq '${threadId}'`, $orderby: 'createdAt asc' })
+      .then((res: any) => { if (res.data?.length) setComments(res.data); })
+      .catch(() => {});
+  }, [dataSource, objectName, recordId]);
 
   const handleAddComment = useCallback(
-    (content: string, mentions: string[], parentId?: string) => {
+    async (content: string, mentions: string[], parentId?: string) => {
       const newComment: Comment = {
         id: crypto.randomUUID(),
         author: currentUser,
@@ -54,15 +65,23 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
         parentId,
       };
       setComments(prev => [...prev, newComment]);
+      // Persist to backend
+      if (dataSource) {
+        const threadId = `${objectName}:${recordId}`;
+        dataSource.create('sys_comment', { ...newComment, threadId }).catch(() => {});
+      }
     },
-    [currentUser],
+    [currentUser, dataSource, objectName, recordId],
   );
 
   const handleDeleteComment = useCallback(
-    (commentId: string) => {
+    async (commentId: string) => {
       setComments(prev => prev.filter(c => c.id !== commentId));
+      if (dataSource) {
+        dataSource.delete('sys_comment', commentId).catch(() => {});
+      }
     },
-    [],
+    [dataSource],
   );
 
   const handleReaction = useCallback(
@@ -77,10 +96,15 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
         } else {
           reactions[emoji] = [...userIds, currentUser.id];
         }
-        return { ...c, reactions };
+        const updated = { ...c, reactions };
+        // Persist reaction update to backend
+        if (dataSource) {
+          dataSource.update('sys_comment', commentId, { reactions }).catch(() => {});
+        }
+        return updated;
       }));
     },
-    [currentUser.id],
+    [currentUser.id, dataSource],
   );
 
   useEffect(() => {
@@ -135,10 +159,10 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
     <div className="h-full bg-background overflow-hidden flex flex-col relative">
       <div className="absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2">
         {/* Presence: who else is viewing this record */}
-        {MOCK_RECORD_VIEWERS.length > 0 && (
+        {recordViewers.length > 0 && (
           <div className="flex items-center gap-1.5" title="Users viewing this record">
             <Users className="h-3.5 w-3.5 text-muted-foreground" />
-            <PresenceAvatars users={MOCK_RECORD_VIEWERS} size="sm" maxVisible={4} showStatus />
+            <PresenceAvatars users={recordViewers} size="sm" maxVisible={4} showStatus />
           </div>
         )}
         <MetadataToggle open={showDebug} onToggle={toggleDebug} />

apps/console/src/components/ReportView.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { ReportViewer, ReportBuilder } from '@object-ui/plugin-report';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
@@ -7,8 +7,8 @@ import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataI
 import { useMetadata } from '../context/MetadataProvider';
 import type { DataSource } from '@object-ui/types';
 
-// Mock fields for the builder since we don't have a dynamic schema provider here yet
-const MOCK_FIELDS = [
+// Fallback fields when no schema is available
+const FALLBACK_FIELDS = [
   { name: 'month', label: 'Month', type: 'string' },
   { name: 'revenue', label: 'Revenue', type: 'number' },
   { name: 'count', label: 'Count', type: 'number' },
@@ -25,14 +25,38 @@ export function ReportView({ dataSource }: { dataSource?: DataSource }) {
   const [isEditing, setIsEditing] = useState(false);
 
   // Find report definition from API-driven metadata
-  const { reports, loading } = useMetadata();
+  const { reports, objects, loading } = useMetadata();
   const initialReport = reports?.find((r: any) => r.name === reportName);
   const [reportData, setReportData] = useState(initialReport);
 
   // State for report runtime data
   const [reportRuntimeData, setReportRuntimeData] = useState<any[]>([]);
   const [dataLoading, setDataLoading] = useState(false);
 
+  // Derive available fields from object schema when report has objectName/dataSource
+  const availableFields = useMemo(() => {
+    const objName = reportData?.objectName || reportData?.dataSource?.object || reportData?.dataSource?.resource;
+    if (objName && objects?.length) {
+      const objDef = objects.find((o: any) => o.name === objName);
+      if (objDef?.fields) {
+        const fields = objDef.fields;
+        if (Array.isArray(fields)) {
+          return fields.map((f: any) =>
+            typeof f === 'string'
+              ? { name: f, label: f, type: 'text' }
+              : { name: f.name, label: f.label || f.name, type: f.type || 'text' },
+          );
+        }
+        return Object.entries(fields).map(([name, def]: [string, any]) => ({
+          name,
+          label: def.label || name,
+          type: def.type || 'text',
+        }));
+      }
+    }
+    return FALLBACK_FIELDS;
+  }, [reportData, objects]);
+
   // Sync reportData when metadata finishes loading or reportName changes
   useEffect(() => {
     setReportData(initialReport);
@@ -165,7 +189,7 @@ export function ReportView({ dataSource }: { dataSource?: DataSource }) {
                schema={{ 
                   title: 'Report Builder', 
                   report: reportData,
-                  availableFields: MOCK_FIELDS,
+                  availableFields: availableFields,
                   onSave: handleSave,
                   onCancel: () => setIsEditing(false)
                }} 

apps/console/src/components/ViewDesignerPage.tsx

@@ -14,10 +14,12 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { ViewDesigner } from '@object-ui/plugin-designer';
 import type { ViewDesignerConfig } from '@object-ui/plugin-designer';
 import { toast } from 'sonner';
+import { useAdapter } from '../context/AdapterProvider';
 
 export function ViewDesignerPage({ objects }: { objects: any[] }) {
   const navigate = useNavigate();
   const { objectName, viewId } = useParams();
+  const dataSource = useAdapter();
 
   const objectDef = objects.find((o: any) => o.name === objectName);
 
@@ -48,18 +50,27 @@ export function ViewDesignerPage({ objects }: { objects: any[] }) {
   }, [viewId, objectDef]);
 
   const handleSave = useCallback(
-    (config: ViewDesignerConfig) => {
-      // In a real implementation this would persist the view config.
-      // For now, log and show toast.
-      console.log('[ViewDesigner] Save view config:', config);
-      toast.success(
-        existingView
-          ? `View "${config.viewLabel}" updated`
-          : `View "${config.viewLabel}" created`,
-      );
+    async (config: ViewDesignerConfig) => {
+      try {
+        if (dataSource) {
+          const payload = { objectName: objectDef?.name, viewId: viewId === 'new' ? undefined : viewId, ...config };
+          if (existingView) {
+            await dataSource.update('sys_view', viewId!, payload);
+          } else {
+            await dataSource.create('sys_view', payload);
+          }
+        }
+        toast.success(
+          existingView
+            ? `View "${config.viewLabel}" updated`
+            : `View "${config.viewLabel}" created`,
+        );
+      } catch {
+        toast.error('Failed to save view configuration');
+      }
       navigate(-1);
     },
-    [existingView, navigate],
+    [existingView, navigate, dataSource, objectDef, viewId],
   );
 
   const handleCancel = useCallback(() => {

apps/console/src/pages/system/AuditLogPage.tsx

@@ -2,16 +2,40 @@
  * Audit Log Page
  *
  * Read-only grid displaying system audit logs.
- * Shows user actions, resources, timestamps, and details.
+ * Fetches data via dataSource.find('sys_audit_log').
  */
 
+import { useState, useEffect, useCallback } from 'react';
 import { Card, CardContent, Badge } from '@object-ui/components';
-import { ScrollText } from 'lucide-react';
+import { ScrollText, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAdapter } from '../../context/AdapterProvider';
 import { systemObjects } from './systemObjects';
 
 const auditObject = systemObjects.find((o) => o.name === 'sys_audit_log')!;
+const columns = auditObject.views[0].columns;
 
 export function AuditLogPage() {
+  const dataSource = useAdapter();
+
+  const [records, setRecords] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = useCallback(async () => {
+    if (!dataSource) return;
+    setLoading(true);
+    try {
+      const result = await dataSource.find('sys_audit_log', { $orderby: 'createdAt desc' });
+      setRecords(result.data || []);
+    } catch {
+      toast.error('Failed to load audit logs');
+    } finally {
+      setLoading(false);
+    }
+  }, [dataSource]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
   return (
     <div className="flex flex-col gap-4 sm:gap-6 p-4 sm:p-6">
       <div className="flex items-center gap-3 min-w-0">
@@ -30,7 +54,7 @@ export function AuditLogPage() {
             <table className="w-full text-sm">
               <thead>
                 <tr className="border-b bg-muted/50">
-                  {auditObject.views[0].columns.map((col) => {
+                  {columns.map((col) => {
                     const field = auditObject.fields.find((f) => f.name === col);
                     return (
                       <th key={col} className="h-10 px-3 sm:px-4 text-left font-medium text-muted-foreground whitespace-nowrap">
@@ -41,15 +65,33 @@ export function AuditLogPage() {
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <td className="p-4 sm:p-6 text-center text-sm text-muted-foreground" colSpan={auditObject.views[0].columns.length}>
-                    <div className="flex flex-col items-center gap-2 py-4">
-                      <ScrollText className="h-8 w-8 text-muted-foreground/50" />
-                      <p>Connect to ObjectStack server to load audit logs.</p>
-                      <Badge variant="secondary" className="text-xs">Read-only</Badge>
-                    </div>
-                  </td>
-                </tr>
+                {loading ? (
+                  <tr>
+                    <td className="p-6 text-center" colSpan={columns.length}>
+                      <Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
+                    </td>
+                  </tr>
+                ) : records.length === 0 ? (
+                  <tr>
+                    <td className="p-4 sm:p-6 text-center text-sm text-muted-foreground" colSpan={columns.length}>
+                      <div className="flex flex-col items-center gap-2 py-4">
+                        <ScrollText className="h-8 w-8 text-muted-foreground/50" />
+                        <p>No audit logs found.</p>
+                        <Badge variant="secondary" className="text-xs">Read-only</Badge>
+                      </div>
+                    </td>
+                  </tr>
+                ) : (
+                  records.map((record) => (
+                    <tr key={record.id || record._id} className="border-b hover:bg-muted/50 transition-colors">
+                      {columns.map((col) => (
+                        <td key={col} className="h-10 px-3 sm:px-4 whitespace-nowrap">
+                          {String(record[col] ?? '')}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                )}
               </tbody>
             </table>
           </div>