@ramme-io/create-app 1.2.8 → 1.2.10

package/template/src/components/layout/StandardPageLayout.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PageHeader } from '@ramme-io/ui';
+
+interface StandardPageLayoutProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export const StandardPageLayout: React.FC<StandardPageLayoutProps> = ({
+  title,
+  description,
+  children,
+  actions,
+  className,
+}) => {
+  return (
+    <div className={`flex flex-col h-full min-h-[calc(100vh-64px)] animate-in fade-in duration-300 ${className || ''}`}>
+      
+      {/* 1. Standardized Header Area (Sticky) */}
+      <div className="px-4 py-4 md:px-8 border-b border-border bg-background/95 backdrop-blur-sm sticky top-0 z-10">
+        
+        {/* Breadcrumbs removed to prevent Router Context crash */}
+        
+        <PageHeader 
+          title={title} 
+          description={description} 
+          actions={actions}
+          className="p-0 border-none" 
+        />
+      </div>
+
+      {/* 2. Standardized Content Area */}
+      <div className="flex-1 p-4 md:p-8 w-full max-w-[1600px] mx-auto">
+        {children}
+      </div>
+    </div>
+  );
+};

package/template/src/engine/renderers/DynamicPage.tsx

@@ -1,23 +1,23 @@
-import React, { Component, type ErrorInfo, useMemo } from 'react';
-import { PageHeader, Alert, Badge } from '@ramme-io/ui';
+import React, { Component, useMemo } from 'react';
+import { Alert, Badge } from '@ramme-io/ui';
 import { useManifest, useBridgeStatus } from '../runtime/ManifestContext';
 import { getComponent } from '../../config/component-registry';
-import { getMockData } from '../../data/mockData'; // Keep as fallback
+import { getMockData } from '../../data/mockData';
 import { Wifi, WifiOff, AlertTriangle, Loader2, Database, Wand2 } from 'lucide-react';
+// ✅ Import Core Layout
+import { StandardPageLayout } from '../../components/layout/StandardPageLayout';
 
-// --- 🛠️ JIT DATA GENERATOR ---
-// This ensures the preview ALWAYS has data, even for new resources not yet in the DB.
+// ... (Keep existing generateJitData & BlockErrorBoundary logic unchanged) ...
+// (Re-pasting helper functions omitted for brevity, assume they are present)
 const generateJitData = (resourceDef: any, count = 10) => {
   if (!resourceDef) return [];
-  
   return Array.from({ length: count }).map((_, i) => {
     const row: any = { id: i + 1 };
     resourceDef.fields.forEach((f: any) => {
-      // Intelligent Mocking based on field type
       if (f.type === 'status') {
         row[f.key] = ['Active', 'Pending', 'Closed', 'Archived'][Math.floor(Math.random() * 4)];
       } else if (f.type === 'boolean') {
-        row[f.key] = Math.random() > 0.3; // 70% true
+        row[f.key] = Math.random() > 0.3; 
       } else if (f.type === 'number' || f.type === 'currency') {
         row[f.key] = Math.floor(Math.random() * 1000) + 100;
       } else if (f.type === 'date') {
@@ -32,7 +32,6 @@ const generateJitData = (resourceDef: any, count = 10) => {
   });
 };
 
-// --- ERROR BOUNDARY ---
 class BlockErrorBoundary extends Component<{ children: React.ReactNode }, { hasError: boolean, error: string }> {
   constructor(props: any) { super(props); this.state = { hasError: false, error: '' }; }
   static getDerivedStateFromError(error: any) { return { hasError: true, error: error.message }; }
@@ -48,7 +47,6 @@ class BlockErrorBoundary extends Component<{ children: React.ReactNode }, { hasE
   }
 }
 
-// --- MAIN RENDERER ---
 export const DynamicPage = ({ pageId }: { pageId: string }) => {
   const manifest = useManifest();
   const status = useBridgeStatus();
@@ -64,22 +62,21 @@ export const DynamicPage = ({ pageId }: { pageId: string }) => {
     );
   }
 
+  // Define the "Live Mode" badge as an action element for the header
+  const statusBadge = (
+    <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold border ${isLive ? 'bg-green-100 text-green-700 border-green-200' : 'bg-slate-100 text-slate-500'}`}>
+      {isLive ? <Wifi size={14} className="text-green-600 animate-pulse"/> : <WifiOff size={14} />}
+      {isLive ? 'LIVE PREVIEW' : 'STATIC MODE'}
+    </div>
+  );
+
   return (
-    <div className="space-y-8 animate-in fade-in duration-300 pb-20 p-6 md:p-8">
-      {/* Header */}
-      <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 border-b border-border pb-6">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight text-foreground">{page.title}</h1>
-          {page.description && <p className="text-muted-foreground text-lg">{page.description}</p>}
-        </div>
-        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold border ${isLive ? 'bg-green-100 text-green-700 border-green-200' : 'bg-slate-100 text-slate-500'}`}>
-          {isLive ? <Wifi size={14} className="text-green-600 animate-pulse"/> : <WifiOff size={14} />}
-          {isLive ? 'LIVE PREVIEW' : 'STATIC MODE'}
-        </div>
-      </div>
-      
-      {/* Grid Layout */}
-      <div className="grid gap-8">
+    <StandardPageLayout 
+      title={page.title} 
+      description={page.description}
+      actions={statusBadge}
+    >
+      <div className="grid gap-6 md:gap-8">
         {page.sections?.map((section: any) => (
           <section key={section.id} className="space-y-4">
             {section.title && (
@@ -87,30 +84,24 @@ export const DynamicPage = ({ pageId }: { pageId: string }) => {
                  <h3 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">{section.title}</h3>
               </div>
             )}
-            <div className="grid gap-6" style={{ gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` }}>
+            <div className="grid gap-4 md:gap-6" style={{ gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` }}>
               {section.blocks.map((block: any) => {
                 const Component = getComponent(block.type);
                 const safeDataId = block.props.dataId?.toLowerCase();
                 
-                // --- 🛡️ HYBRID DATA STRATEGY ---
                 let resolvedData: any[] = [];
                 let isGenerated = false;
                 let autoColumns = undefined;
 
                 if (safeDataId) {
-                  // 1. Try Local Storage first
                   resolvedData = getMockData(safeDataId); 
-                  
-                  // 2. If empty, Generate JIT Data from Manifest
                   if (!resolvedData || resolvedData.length === 0) {
                      const resourceDef = manifest.resources?.find((r: any) => r.id.toLowerCase() === safeDataId);
                      if (resourceDef) {
                         resolvedData = generateJitData(resourceDef);
-                        isGenerated = true; // Flag for debug overlay
+                        isGenerated = true;
                      }
                   }
-
-                  // 3. Auto-Generate Table Columns
                   const resourceDef = manifest.resources?.find((r: any) => r.id.toLowerCase() === safeDataId);
                   if (resourceDef && !block.props.columnDefs) {
                     autoColumns = resourceDef.fields.map((f: any) => ({
@@ -123,7 +114,6 @@ export const DynamicPage = ({ pageId }: { pageId: string }) => {
                 return (
                   <div key={block.id} style={{ gridColumn: `span ${block.layout?.colSpan || 1}`, gridRow: `span ${block.layout?.rowSpan || 1}` }} className="relative group">
                      <BlockErrorBoundary>
-                        {/* Debug Overlay */}
                         <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20 flex gap-1 pointer-events-none">
                            <div className={`text-white text-[10px] px-2 py-1 rounded backdrop-blur-md flex items-center gap-1 ${isGenerated ? 'bg-amber-600/90' : 'bg-black/80'}`}>
                               {block.type}
@@ -145,6 +135,6 @@ export const DynamicPage = ({ pageId }: { pageId: string }) => {
           </section>
         ))}
       </div>
-    </div>
+    </StandardPageLayout>
   );
 };

package/template/src/features/GenericContentPage.tsx

@@ -1,26 +1,31 @@
 import React from 'react';
-import { PageHeader } from '@ramme-io/ui'; // Assuming we have this
+// ✅ Import Core Layout
+import { StandardPageLayout } from '../components/layout/StandardPageLayout';
 
 interface GenericContentPageProps {
   pageTitle: string;
-  children?: React.ReactNode; // Allow for optional custom content later
+  children?: React.ReactNode; 
 }
 
 const GenericContentPage: React.FC<GenericContentPageProps> = ({ pageTitle, children }) => {
   return (
-    <div>
-      <PageHeader title={pageTitle} />
-      <div className="mt-6">
-        {children ? (
-          children
-        ) : (
-          <p className="text-muted-foreground">
-            This is a placeholder page for "{pageTitle}". Replace this content in{' '}
-            <code>src/pages/YourSpecificPage.tsx</code>.
+    <StandardPageLayout 
+      title={pageTitle}
+      description={`This is a placeholder page for "${pageTitle}".`}
+    >
+      {children ? (
+        children
+      ) : (
+        <div className="p-12 border-2 border-dashed border-border rounded-lg bg-muted/10 text-center flex flex-col items-center justify-center">
+          <p className="text-muted-foreground text-lg mb-2">
+            This page is ready for content.
           </p>
-        )}
-      </div>
-    </div>
+          <p className="text-sm text-muted-foreground">
+            Replace this file in <code>src/pages/YourSpecificPage.tsx</code>.
+          </p>
+        </div>
+      )}
+    </StandardPageLayout>
   );
 };
 

package/template/src/features/auth/pages/LoginPage.tsx

@@ -89,7 +89,7 @@ const LoginPage: React.FC = () => {
         {/* Footer */}
         <div className="mt-8 pt-6 border-t border-border text-center text-sm">
           <span className="text-muted-foreground">Don't have an account? </span>
-          [cite_start]{/* ✅ CRITICAL FIX: Updated path to /auth/signup [cite: 1937] */}
+
           <Link to="/auth/signup" className="font-semibold text-primary hover:text-primary/80 transition-colors">
             Create one
           </Link>

package/template/src/features/datagrid/SmartTable.tsx

@@ -4,6 +4,7 @@ import {
   Button, 
   Icon, 
   Card, 
+  Badge, 
   useToast, 
   SearchInput,
   type ColDef,
@@ -14,7 +15,8 @@ import { getResourceMeta } from '../../data/mockData';
 import { AutoForm } from '../../components/AutoForm';
 import { useCrudLocalStorage } from '../../engine/runtime/useCrudLocalStorage';
 import { useManifest } from '../../engine/runtime/ManifestContext';
-import type { ResourceDefinition } from '../../engine/validation/schema';
+// ✅ IMPORT FieldDefinition specifically
+import type { ResourceDefinition, FieldDefinition } from '../../engine/validation/schema';
 
 interface SmartTableProps {
   dataId: string;
@@ -24,38 +26,27 @@ interface SmartTableProps {
 
 export const SmartTable: React.FC<SmartTableProps> = ({ 
   dataId, 
-  title}) => {
+  title
+}) => {
   const { addToast } = useToast();
-  
   const manifest = useManifest();
 
-  // ✅ FIX: Normalize 'meta' to always match 'ResourceDefinition'
+  // --- 1. METADATA RESOLUTION ---
   const meta = useMemo<ResourceDefinition | null>(() => {
-    // 1. Try Dynamic Manifest (Preview Mode)
     const dynamicResource = manifest.resources?.find((r: ResourceDefinition) => r.id === dataId);
-    
-    if (dynamicResource) {
-      return dynamicResource;
-    }
+    if (dynamicResource) return dynamicResource;
 
-    // 2. Try Static Data (Deployed Mode)
     const staticMeta = getResourceMeta(dataId);
-    
     if (staticMeta) {
-      // ⚠️ Type Patch: Inject 'id' so it satisfies ResourceDefinition
-      // The static file uses the object key as the ID, but the type expects it inline.
       return {
         ...staticMeta,
         id: dataId,
-        // Ensure 'type' strings from mockData match the Zod enum if needed, 
-        // but typically 'text' | 'number' overlaps fine.
       } as unknown as ResourceDefinition; 
     }
-
     return null;
   }, [manifest, dataId]);
 
-  // ✅ JIT Seeder now receives a valid ResourceDefinition
+  // --- 2. DATA HYDRATION ---
   const seedData = useJustInTimeSeeder(dataId, meta);
   
   const { 
@@ -65,18 +56,18 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     deleteItem 
   } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
 
-  // --- UI STATE ---
+  // --- 3. UI STATE ---
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [currentRecord, setCurrentRecord] = useState<any>(null);
   const [gridApi, setGridApi] = useState<GridApi | null>(null);
   const [selectedRows, setSelectedRows] = useState<any[]>([]);
   const [quickFilterText, setQuickFilterText] = useState('');
 
-  // --- COLUMN DEFINITIONS ---
+  // --- 4. COLUMN DEFINITIONS (Desktop) ---
   const columns = useMemo<ColDef[]>(() => {
     if (!meta?.fields) return [];
 
-    const generatedCols: ColDef[] = meta.fields.map((f: any) => {
+    const generatedCols: ColDef[] = meta.fields.map((f: FieldDefinition) => {
       const col: ColDef = {
         field: f.key,
         headerName: f.label,
@@ -125,7 +116,8 @@ export const SmartTable: React.FC<SmartTableProps> = ({
       pinned: 'right',
       cellRenderer: (params: any) => (
         <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => { e.stopPropagation(); setCurrentRecord(params.data); setIsEditOpen(true); }}>
+          {/* ✅ FIXED: Explicit React.MouseEvent type */}
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e: React.MouseEvent) => { e.stopPropagation(); setCurrentRecord(params.data); setIsEditOpen(true); }}>
             <Icon name="edit-2" size={14} className="text-slate-500" />
           </Button>
         </div>
@@ -135,7 +127,12 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     return generatedCols;
   }, [meta]);
 
-  // --- HANDLERS ---
+  // --- 5. FIELD HELPERS (Mobile) ---
+  // ✅ FIXED: Explicit FieldDefinition type for 'f'
+  const titleField = useMemo(() => meta?.fields.find((f: FieldDefinition) => f.type === 'text' && f.key !== 'id') || meta?.fields[0], [meta]);
+  const statusField = useMemo(() => meta?.fields.find((f: FieldDefinition) => f.type === 'status'), [meta]);
+
+  // --- 6. HANDLERS ---
   const onGridReady = useCallback((params: any) => {
     setGridApi(params.api);
   }, []);
@@ -169,14 +166,15 @@ export const SmartTable: React.FC<SmartTableProps> = ({
   return (
     <Card className="flex flex-col h-[600px] border border-border shadow-sm overflow-hidden bg-card">
       
-      <div className="p-4 border-b border-border flex justify-between items-center gap-4 bg-muted/5">
+      {/* --- HEADER --- */}
+      <div className="p-4 border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-muted/5">
         {selectedRows.length > 0 ? (
           <div className="flex items-center gap-3 animate-in fade-in slide-in-from-left-2 duration-200">
             <span className="bg-primary text-primary-foreground text-xs font-bold px-2 py-1 rounded-md">
               {selectedRows.length} Selected
             </span>
             <Button size="sm" variant="danger" onClick={handleBulkDelete} iconLeft="trash-2">
-              Delete Selected
+              Delete
             </Button>
           </div>
         ) : (
@@ -195,36 +193,112 @@ export const SmartTable: React.FC<SmartTableProps> = ({
           </div>
         )}
 
-        <div className="flex items-center gap-2">
-          <div className="w-64">
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          <div className="w-full sm:w-64">
             <SearchInput 
               placeholder="Quick search..." 
               value={quickFilterText}
-              onChange={(e) => {
+              // ✅ FIXED: Explicit ChangeEvent type
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 setQuickFilterText(e.target.value);
-                gridApi?.updateGridOptions({ quickFilterText: e.target.value });              }}
+                gridApi?.updateGridOptions({ quickFilterText: e.target.value });
+              }}
             />
           </div>
-          <div className="h-6 w-px bg-border mx-1" />
+          <div className="h-6 w-px bg-border mx-1 hidden sm:block" />
           <Button size="sm" variant="primary" iconLeft="plus" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
-            Add New
+            Add
           </Button>
         </div>
       </div>
 
-      <div className="flex-1 w-full bg-card relative">
-        <DataTable 
-          rowData={rowData} 
-          columnDefs={columns} 
-          onGridReady={onGridReady}
-          onSelectionChanged={onSelectionChanged}
-          rowSelection="multiple"
-          pagination={true}
-          paginationPageSize={10}
-          headerHeight={48}
-          rowHeight={48}
-          enableCellTextSelection={true}
-        />
+      {/* --- CONTENT AREA --- */}
+      <div className="flex-1 w-full bg-card relative overflow-hidden">
+        
+        {/* 🖥️ DESKTOP VIEW: The Power Grid */}
+        <div className="hidden md:block h-full">
+          <DataTable 
+            rowData={rowData} 
+            columnDefs={columns} 
+            onGridReady={onGridReady}
+            onSelectionChanged={onSelectionChanged}
+            rowSelection="multiple"
+            pagination={true}
+            paginationPageSize={10}
+            headerHeight={48}
+            rowHeight={48}
+            enableCellTextSelection={true}
+          />
+        </div>
+
+        {/* 📱 MOBILE VIEW: The Card List */}
+        <div className="block md:hidden h-full overflow-y-auto p-4 space-y-3 bg-muted/5">
+          {rowData.map((row) => (
+            <div key={row.id} className="bg-background border border-border rounded-lg p-4 shadow-sm relative group">
+              
+              {/* Header: Title + Status */}
+              <div className="flex justify-between items-start mb-2">
+                <div>
+                  <h4 className="font-semibold text-foreground">
+                    {titleField ? row[titleField.key] : row.id}
+                  </h4>
+                  <p className="text-xs text-muted-foreground font-mono mt-0.5 opacity-70">{row.id}</p>
+                </div>
+                {statusField && (
+                  <Badge variant={
+                    ['active', 'paid'].includes(String(row[statusField.key]).toLowerCase()) ? 'success' : 
+                    ['pending'].includes(String(row[statusField.key]).toLowerCase()) ? 'warning' : 'secondary'
+                  }>
+                    {row[statusField.key]}
+                  </Badge>
+                )}
+              </div>
+
+              {/* Body: Detailed Fields */}
+              <div className="space-y-1 text-sm text-muted-foreground mb-4">
+                 {meta?.fields
+                   // ✅ FIXED: Explicit FieldDefinition type for 'f'
+                   .filter((f: FieldDefinition) => f.key !== titleField?.key && f.key !== statusField?.key && f.key !== 'id')
+                   .slice(0, 3)
+                   .map((f: FieldDefinition) => (
+                     <div key={f.key} className="flex justify-between border-b border-dashed border-border/50 pb-1 last:border-0">
+                       <span className="opacity-70">{f.label}:</span>
+                       <span className="font-medium text-foreground">
+                         {f.type === 'currency' ? `$${Number(row[f.key]).toLocaleString()}` : 
+                          f.type === 'date' ? new Date(row[f.key]).toLocaleDateString() : row[f.key]}
+                       </span>
+                     </div>
+                   ))}
+              </div>
+
+              {/* Footer: Actions */}
+              <div className="flex gap-2 pt-2 border-t border-border/50">
+                 <Button 
+                   size="sm" 
+                   variant="outline" 
+                   className="flex-1 h-8 text-xs" 
+                   onClick={() => { setCurrentRecord(row); setIsEditOpen(true); }}
+                 >
+                   <Icon name="edit-2" size={12} className="mr-2"/> Edit
+                 </Button>
+                 <Button 
+                   size="sm" 
+                   variant="ghost" 
+                   className="text-destructive hover:bg-destructive/10 px-3 h-8"
+                   onClick={() => { if(confirm('Delete?')) deleteItem(row.id); }}
+                 >
+                   <Icon name="trash-2" size={14} />
+                 </Button>
+              </div>
+
+            </div>
+          ))}
+          
+          {rowData.length === 0 && (
+             <div className="text-center p-8 text-muted-foreground">No records found.</div>
+          )}
+        </div>
+
       </div>
 
       <AutoForm

package/template/src/features/overview/pages/OverviewPage.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { 
-  PageHeader, 
   Card,
   BarChart, 
   Button,
   Icon,
   Badge
 } from '@ramme-io/ui';
-
-// 1. REMOVE: The Zombie Service Import
-// import { userService } from '../../users'; 
-
-// 2. ADD: The Engine Hook & Shared Data
-// (Adjust path '../../engine/...' if needed based on your folder structure)
 import { useCrudLocalStorage } from '../../../engine/runtime/useCrudLocalStorage';
 import { SEED_USERS, type User } from '../../../data/mockData';
+// ✅ Import Core Layout
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
 
 // Mock Data for Chart
 const revenueData = [
@@ -28,7 +23,6 @@ const revenueData = [
   { name: 'Sun', revenue: 3490, cost: 4300 },
 ];
 
-// Recreating the StatCard locally (since the old one was custom)
 const StatCard = ({ title, value, trend, icon, onClick, className }: any) => (
   <Card 
     className={`p-6 flex items-center justify-between space-x-4 transition-all hover:border-primary/50 ${className || ''}`}
@@ -50,78 +44,72 @@ const StatCard = ({ title, value, trend, icon, onClick, className }: any) => (
 
 export const OverviewPage: React.FC = () => {
   const navigate = useNavigate();
-
-  // 3. REPLACE: Manual fetching with the Reactive Engine
-  // This automatically connects to 'ramme_db_users' and keeps the count live
   const { data: users } = useCrudLocalStorage<User>('ramme_db_users', SEED_USERS);
-  
-  // Calculate count directly from the hook data
   const userCount = users.length;
 
   return (
-    <div className="space-y-8 pb-10">
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <PageHeader 
-             title="Dashboard" 
-             description="Overview of your application performance."
-          />
-        </div>
+    <StandardPageLayout
+      title="Dashboard"
+      description="Overview of your application performance."
+      actions={
         <div className="flex gap-2">
           <Button variant="outline" iconLeft="download">Export</Button>
           <Button iconLeft="plus">New Report</Button>
         </div>
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <StatCard 
-          title="Total Users" 
-          value={userCount} // ✅ Uses live data from Data Lake
-          trend={+12.5} 
-          icon="users" 
-          className="cursor-pointer bg-primary/5 border-primary/20"
-          onClick={() => navigate('/dashboard/users')}
-        />
-        <StatCard title="Total Revenue" value="$45,231" trend={+20.1} icon="dollar-sign" />
-        <StatCard title="Sales" value="+12,234" trend={+19} icon="credit-card" />
-        <StatCard title="Active Now" value="+573" trend={-4} icon="activity" />
-      </div>
+      }
+    >
+      <div className="space-y-8">
+        {/* Stat Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCard 
+            title="Total Users" 
+            value={userCount} 
+            trend={+12.5} 
+            icon="users" 
+            className="cursor-pointer bg-primary/5 border-primary/20"
+            onClick={() => navigate('/dashboard/users')}
+          />
+          <StatCard title="Total Revenue" value="$45,231" trend={+20.1} icon="dollar-sign" />
+          <StatCard title="Sales" value="+12,234" trend={+19} icon="credit-card" />
+          <StatCard title="Active Now" value="+573" trend={-4} icon="activity" />
+        </div>
 
-      {/* Main Content Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-7 gap-8">
-        <Card className="lg:col-span-4 p-6">
-          <div className="flex items-center justify-between mb-6">
-            <h3 className="font-semibold text-lg">Revenue Overview</h3>
-            <Badge variant="outline">Weekly</Badge>
-          </div>
-          <div className="h-[350px] w-full">
-            <BarChart 
-              data={revenueData} 
-              dataKeyX="name" 
-              barKeys={['revenue', 'cost']} 
-            />
-          </div>
-        </Card>
+        {/* Main Content Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-7 gap-8">
+          <Card className="lg:col-span-4 p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="font-semibold text-lg">Revenue Overview</h3>
+              <Badge variant="outline">Weekly</Badge>
+            </div>
+            <div className="h-[350px] w-full">
+              <BarChart 
+                data={revenueData} 
+                dataKeyX="name" 
+                barKeys={['revenue', 'cost']} 
+              />
+            </div>
+          </Card>
 
-        <Card className="lg:col-span-3 p-6 flex flex-col">
-          <h3 className="font-semibold text-lg mb-4">Recent Activity</h3>
-          <div className="space-y-6 overflow-y-auto pr-2">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="flex items-start gap-4">
-                <span className="relative flex h-2 w-2 mt-2">
-                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
-                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
-                </span>
-                <div className="space-y-1">
-                  <p className="text-sm font-medium leading-none">System Alert</p>
-                  <p className="text-xs text-muted-foreground">Database backup completed.</p>
-                  <p className="text-xs text-muted-foreground pt-1">Just now</p>
+          <Card className="lg:col-span-3 p-6 flex flex-col">
+            <h3 className="font-semibold text-lg mb-4">Recent Activity</h3>
+            <div className="space-y-6 overflow-y-auto pr-2">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex items-start gap-4">
+                  <span className="relative flex h-2 w-2 mt-2">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                    <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                  </span>
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium leading-none">System Alert</p>
+                    <p className="text-xs text-muted-foreground">Database backup completed.</p>
+                    <p className="text-xs text-muted-foreground pt-1">Just now</p>
+                  </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        </Card>
+              ))}
+            </div>
+          </Card>
+        </div>
       </div>
-    </div>
+    </StandardPageLayout>
   );
 };