@ramme-io/create-app 1.2.1 → 1.2.5

package/template/src/features/visualizations/SmartChart.tsx

@@ -0,0 +1,178 @@
+import React, { useMemo } from 'react';
+import { 
+  BarChart, Bar, LineChart, Line, AreaChart, Area, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend 
+} from 'recharts';
+import { Card } from '@ramme-io/ui';
+import { BarChart3, Bug } from 'lucide-react';
+
+interface SmartChartProps {
+  rowData?: any[];
+  chartType?: 'bar' | 'line' | 'area' | 'pie';
+  xAxis?: string;        
+  yAxis?: string;        
+  aggregation?: string;
+  title?: string;
+  className?: string;
+}
+
+const COLORS = ['#0ea5e9', '#22c55e', '#eab308', '#ef4444', '#8b5cf6'];
+
+export const SmartChart: React.FC<SmartChartProps> = ({ 
+  rowData = [], chartType = 'bar', xAxis, yAxis, aggregation = 'none', title, className 
+}) => {
+  
+  // 1. DATA PROCESSING ENGINE
+  const processedData = useMemo(() => {
+    if (!rowData || rowData.length === 0) return [];
+
+    // Fallback: If no xAxis provided, try to find a string key, else use 'id'
+    const activeX = xAxis || Object.keys(rowData[0]).find(k => typeof rowData[0][k] === 'string') || 'id';
+    
+    // Normalize mode
+    const mode = aggregation?.toLowerCase() || 'none';
+
+    // SCENARIO A: COUNT
+    if (mode === 'count') {
+      const counts: Record<string, number> = {};
+      rowData.forEach(row => {
+        const rawVal = row[activeX];
+        // Handle Booleans (true/false) explicitly
+        const key = String(rawVal !== undefined && rawVal !== null ? rawVal : 'Unknown');
+        counts[key] = (counts[key] || 0) + 1;
+      });
+      return Object.entries(counts).map(([name, value]) => ({ name, value }));
+    }
+
+    // SCENARIO B: SUM
+    if (mode === 'sum' && yAxis) {
+      const sums: Record<string, number> = {};
+      rowData.forEach(row => {
+        const key = String(row[activeX] ?? 'Unknown');
+        const val = Number(row[yAxis]) || 0;
+        sums[key] = (sums[key] || 0) + val;
+      });
+      return Object.entries(sums).map(([name, value]) => ({ name, value }));
+    }
+
+    // SCENARIO C: RAW
+    return rowData.map(row => ({
+      name: String(row[activeX] ?? ''),
+      value: yAxis ? Number(row[yAxis]) : 0
+    }));
+
+  }, [rowData, xAxis, yAxis, aggregation]);
+
+  // 2. RENDERERS
+  const renderChart = () => {
+    // If no data to render, show placeholder
+    if (processedData.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full text-muted-foreground opacity-50">
+                <BarChart3 size={32} />
+                <span className="text-xs mt-2">No Data Available</span>
+            </div>
+        );
+    }
+
+    const type = chartType?.toLowerCase() || 'bar';
+    switch (type) {
+      case 'pie':
+        return (
+          <PieChart>
+            <Pie data={processedData} cx="50%" cy="50%" innerRadius={60} outerRadius={80} paddingAngle={5} dataKey="value">
+              {processedData.map((_, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)}
+            </Pie>
+            <Tooltip />
+            <Legend verticalAlign="bottom" height={36}/>
+          </PieChart>
+        );
+      case 'line':
+        return (
+          <LineChart data={processedData}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+            <XAxis dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
+            <YAxis fontSize={12} tickLine={false} axisLine={false} />
+            <Tooltip />
+            <Line type="monotone" dataKey="value" stroke="#0ea5e9" strokeWidth={3} dot={{r:4}} />
+          </LineChart>
+        );
+      case 'area':
+        return (
+           <AreaChart data={processedData}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+            <XAxis dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
+            <YAxis fontSize={12} tickLine={false} axisLine={false} />
+            <Tooltip />
+            <Area type="monotone" dataKey="value" stroke="#0ea5e9" fill="#0ea5e9" fillOpacity={0.2} />
+          </AreaChart>
+        );
+      case 'bar': default:
+        return (
+          <BarChart data={processedData}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+            <XAxis dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
+            <YAxis fontSize={12} tickLine={false} axisLine={false} />
+            <Tooltip cursor={{ fill: '#f1f5f9' }} />
+            <Bar dataKey="value" fill="#0ea5e9" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        );
+    }
+  };
+
+  return (
+    <Card className={`p-4 flex flex-col h-full bg-white border border-border shadow-sm ${className}`}>
+      {/* Title Header */}
+      <div className="flex items-center justify-between mb-4">
+         <div className="flex flex-col">
+            {title && <h3 className="text-sm font-bold text-foreground uppercase tracking-wider">{title}</h3>}
+            {/* Subtitle with Aggregation info */}
+            {aggregation && aggregation !== 'none' && (
+                <span className="text-[10px] text-muted-foreground font-mono">
+                    BY {aggregation.toUpperCase()} ({xAxis})
+                </span>
+            )}
+         </div>
+      </div>
+
+      {/* Chart Canvas */}
+      <div className="flex-1 w-full min-h-[200px]">
+        <ResponsiveContainer width="100%" height="100%">{renderChart()}</ResponsiveContainer>
+      </div>
+
+      {/* ✅ DEBUG CONSOLE (Collapsible) */}
+      <div className="mt-4 border-t border-border pt-2">
+         <details className="text-[10px] text-muted-foreground group">
+            <summary className="cursor-pointer hover:text-primary flex items-center gap-2 select-none font-mono">
+               <Bug size={12} />
+               <span>Debug Configuration</span>
+               <span className="ml-auto opacity-50">{rowData?.length || 0} Rows</span>
+            </summary>
+            <div className="mt-2 p-3 bg-slate-950 text-green-400 rounded-md font-mono overflow-x-auto text-[10px] leading-relaxed shadow-inner">
+               <div className="mb-2 pb-2 border-b border-white/10">
+                  <span className="text-white font-bold block mb-1">INCOMING PROPS:</span>
+                  <div>chartType: <span className="text-yellow-300">"{chartType}"</span></div>
+                  <div>aggregation: <span className="text-yellow-300">"{aggregation}"</span></div>
+                  <div>xAxis (Key): <span className="text-yellow-300">"{xAxis}"</span></div>
+                  <div>yAxis (Val): <span className="text-yellow-300">"{yAxis}"</span></div>
+               </div>
+               
+               <div className="mb-2 pb-2 border-b border-white/10">
+                  <span className="text-white font-bold block mb-1">DATA SNAPSHOT (Row 0):</span>
+                  {rowData && rowData.length > 0 ? (
+                      <pre>{JSON.stringify(rowData[0], null, 2)}</pre>
+                  ) : (
+                      <span className="text-red-400">No Data Rows Received</span>
+                  )}
+               </div>
+
+               <div>
+                  <span className="text-white font-bold block mb-1">PROCESSED OUTPUT (Top 3):</span>
+                  <pre>{JSON.stringify(processedData.slice(0, 3), null, 2)}</pre>
+               </div>
+            </div>
+         </details>
+      </div>
+    </Card>
+  );
+};

package/template/src/index.css

@@ -1,4 +1,4 @@
-@import '@ramme-io/ui/style.css';
+
 
 @tailwind base;
 @tailwind components;

package/template/src/main.tsx

@@ -3,26 +3,38 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App.tsx';
 import { ThemeProvider, ToastProvider } from '@ramme-io/ui';
-import { AuthProvider } from './contexts/AuthContext'; 
-import { MqttProvider } from './contexts/MqttContext';
-import '@ramme-io/ui/style.css';
+import { AuthProvider } from './features/auth/AuthContext.tsx'; 
+import { MqttProvider } from './engine/runtime/MqttContext';
+import "@ramme-io/ui/index.css"; 
 import './index.css';
 
-// This import activates all AG Grid Enterprise features
+// 1. Data Seeder (Critical for Auth)
+import { initializeDataLake } from './engine/runtime/data-seeder';
+
+// 2. Manifest Provider (Critical for Builder Preview)
+import { ManifestProvider } from './engine/runtime/ManifestContext';
+
+// 3. AG Grid Enterprise
 import 'ag-grid-enterprise';
 
+// Initialize mock data immediately on boot
+initializeDataLake();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <ThemeProvider>
-        <ToastProvider>
-          <AuthProvider>
-            <MqttProvider>
-              <App />
-            </MqttProvider>
-          </AuthProvider>
-        </ToastProvider>
-      </ThemeProvider>
-    </BrowserRouter>
+    {/* 🛡️ KEEPS THE BRIDGE ALIVE: Wraps the entire app */}
+    <ManifestProvider>
+      <BrowserRouter>
+        <ThemeProvider>
+          <ToastProvider>
+            <AuthProvider>
+              <MqttProvider>
+                <App />
+              </MqttProvider>
+            </AuthProvider>
+          </ToastProvider>
+        </ThemeProvider>
+      </BrowserRouter>
+    </ManifestProvider>
   </React.StrictMode>,
 );

package/template/src/templates/dashboard/DashboardLayout.tsx

@@ -1,127 +1,97 @@
-import React, { useState } from 'react'; // <-- Added useState
-import { Outlet, NavLink } from 'react-router-dom';
+import React, { useState, useMemo } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import {
   Sidebar,
-  SidebarProvider,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarMenu,
-  SidebarMenuItem,
-  useSidebar,
-  Button,
-  Icon,
-  ChatFAB, // <-- NEW: Import FAB
-} from '@ramme-io/ui';
+  type SidebarItem,
+  ChatFAB,
+  type IconName, 
+} from '@ramme-io/ui'; 
+
 import { dashboardSitemap } from './dashboard.sitemap';
-import { SitemapProvider } from '../../contexts/SitemapContext';
+import { SitemapProvider } from '../../engine/runtime/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
 import AppHeader from '../../components/AppHeader';
-import { AIChatWidget } from '../../components/AIChatWidget'; // <-- NEW: Import Widget
-import { useWorkflowEngine } from '../../hooks/useWorkflowEngine';
-
-// NavLink wrapper - Correct
-const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
-  ({ end, href, ...props }, ref) => {
-    return <NavLink ref={ref} to={href || ''} {...props} end={end} />;
-  },
-);
-SidebarNavLink.displayName = 'SidebarNavLink';
+import { AIChatWidget } from '../../components/AIChatWidget';
+import { useWorkflowEngine } from '../../engine/runtime/useWorkflowEngine';
 
-// Sidebar Content Component
-const AppSidebarContent: React.FC = () => {
-  const { isOpen, toggle } = useSidebar();
-  return (
-    <>
-      <SidebarHeader>
-        <div className="flex items-center justify-end w-full h-full">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={toggle}
-            className="hidden md:flex mr-1"
-          >
-            <Icon name={isOpen ? 'panel-left-close' : 'panel-left-open'} />
-          </Button>
-        </div>
-      </SidebarHeader>
+// ✅ 1. IMPORT THE HOOK
+import { useDynamicSitemap } from '../../engine/runtime/useDynamicSitemap';
 
-      <SidebarContent>
-        <SidebarMenu>
-          {dashboardSitemap.map((item) => (
-            <React.Fragment key={item.id}>
-              <SidebarMenuItem
-                as={SidebarNavLink}
-                href={item.path ? `/dashboard/${item.path}` : '/dashboard'}
-                end
-                icon={item.icon ? <Icon name={item.icon} /> : undefined}
-                tooltip={item.title}
-              >
-                {item.title}
-              </SidebarMenuItem>
-              {item.children &&
-                isOpen &&
-                item.children.map((child) => (
-                  <SidebarMenuItem
-                    key={child.id}
-                    as={SidebarNavLink}
-                    href={`/dashboard/${item.path}/${child.path}`}
-                    end
-                    icon={child.icon ? <Icon name={child.icon} /> : undefined}
-                    tooltip={child.title}
-                    className="pl-10" 
-                  >
-                    {child.title}
-                  </SidebarMenuItem>
-                ))}
-            </React.Fragment>
-          ))}
-        </SidebarMenu>
-      </SidebarContent>
-
-      <SidebarFooter />
-    </>
-  );
-};
-
-// Main Layout Component
 const DashboardLayout: React.FC = () => {
-  // 1. STATE: Track if the chat window is open
+  const navigate = useNavigate();
+  const location = useLocation();
   const [isChatOpen, setIsChatOpen] = useState(false);
+  
   useWorkflowEngine();
 
+  // ✅ 2. GET LIVE DATA (Merges Static + Builder Data)
+  const liveSitemap = useDynamicSitemap(dashboardSitemap);
+
+  // ✅ 3. BUILD SIDEBAR FROM LIVE DATA
+  const sidebarItems: SidebarItem[] = useMemo(() => {
+    // We map over 'liveSitemap' instead of 'dashboardSitemap'
+    return liveSitemap.map((route) => ({
+      id: route.id,
+      label: route.title,
+      icon: route.icon as IconName, 
+      // Handle the path logic safely
+      href: route.path.startsWith('/') ? route.path : `/dashboard/${route.path}`,
+    }));
+  }, [liveSitemap]); // Re-run whenever the Builder sends an update
+
+  // 4. Determine Active Item
+  const activeItemId = useMemo(() => {
+    const active = sidebarItems.find(item => 
+      item.href !== '/dashboard' && location.pathname.startsWith(item.href!)
+    );
+    return active?.id || sidebarItems[0]?.id;
+  }, [location.pathname, sidebarItems]);
+
   return (
-    <SitemapProvider value={dashboardSitemap}>
+    // ✅ 5. PASS LIVE SITEMAP TO CONTEXT (For Breadcrumbs/Titles)
+    <SitemapProvider value={liveSitemap}>
       <PageTitleUpdater />
-      <SidebarProvider>
-        <div className="flex h-screen bg-background text-foreground relative">
-          <Sidebar>
-            <AppSidebarContent />
-          </Sidebar>
-          <div className="flex flex-col flex-1 overflow-hidden">
-            <AppHeader />
-            <main className="flex-1 overflow-y-auto p-8">
-              <Outlet />
-            </main>
-          </div>
+      
+      <div className="flex h-screen bg-background text-foreground relative">
+        
+        <Sidebar
+          className="relative border-border"
+          items={sidebarItems} // Now contains your new page!
+          activeItemId={activeItemId}
+          onNavigate={(item) => {
+            if (item.href) navigate(item.href);
+          }}
+          user={{
+            name: "Demo User",
+            email: "user@example.com",
+            avatarUrl: "https://i.pravatar.cc/150?u=ramme"
+          }}
+          logo={
+            <div className="flex items-center gap-2 px-2 font-bold text-xl tracking-tight">
+              <span className="text-primary">Ramme</span>App
+            </div>
+          }
+        />
 
-          {/* --- AI COPILOT SECTION --- */}
-          
-          {/* 2. The Widget: Only renders when open */}
-          {isChatOpen && (
-            <AIChatWidget onClose={() => setIsChatOpen(false)} />
-          )}
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <AppHeader />
+          <main className="flex-1 overflow-y-auto p-8 bg-muted/20">
+            <Outlet />
+          </main>
+        </div>
 
-          {/* 3. The Button: Fixed to bottom-right */}
-          <div className="fixed bottom-6 right-6 z-50">
-            <ChatFAB 
-              onClick={() => setIsChatOpen(!isChatOpen)} 
-              tooltipContent={isChatOpen ? "Close Assistant" : "Open Bodewell AI"}
-            />
-          </div>
+        {isChatOpen && (
+          <AIChatWidget onClose={() => setIsChatOpen(false)} />
+        )}
 
+        <div className="fixed bottom-6 right-6 z-50">
+          <ChatFAB 
+            onClick={() => setIsChatOpen(!isChatOpen)} 
+            tooltipContent={isChatOpen ? "Close Assistant" : "Open Bodewell AI"}
+          />
         </div>
-      </SidebarProvider>
+
+      </div>
     </SitemapProvider>
   );
 };

package/template/src/templates/dashboard/dashboard.sitemap.ts

@@ -1,11 +1,16 @@
-import { type SitemapEntry } from '../../core/sitemap-entry';
+import { type SitemapEntry } from '../../engine/types/sitemap-entry';
 import { appManifest } from '../../config/app.manifest';
-import Dashboard from '../../pages/Dashboard';
-import AiChat from '../../pages/AiChat';
-import Welcome from '../../pages/Welcome'; // ✅ Import the new page
+
+// Existing pages (Legacy location)
+import Welcome from '../../features/onboarding/pages/Welcome'; 
+import { OverviewPage } from '../../features/overview'; 
+import AiChat from '../../features/ai/pages/AiChat'; 
+
+// ✅ NEW: Import from the Feature Domain (Clean API)
+import { UsersPage } from '../../features/users'; 
 
 export const dashboardSitemap: SitemapEntry[] = [
-  // ✅ 1. The New Landing Page
+  // 1. The New Landing Page
   {
     id: 'welcome',
     path: 'welcome',
@@ -13,24 +18,16 @@ export const dashboardSitemap: SitemapEntry[] = [
     icon: 'rocket',
     component: Welcome,
   },
-];
 
-// A. Dynamic Pages from Manifest
-if (appManifest.pages) {
-  appManifest.pages.forEach(page => {
-    const isDashboard = page.slug === 'dashboard';
-    
-    dashboardSitemap.push({
-      id: page.id,
-      title: page.title,
-      // ✅ FIX: Map the main dashboard to 'app' instead of root ''
-      // This prevents conflict with the layout root
-      path: isDashboard ? 'app' : page.slug,
-      icon: isDashboard ? 'layout-dashboard' : 'file-text',
-      component: Dashboard,
-    });
-  });
-}
+  // 3. ✅ The User Management Module
+  {
+    id: 'users',
+    path: 'users',
+    title: 'Users',
+    icon: 'users',
+    component: UsersPage,
+  }
+];
 
 // B. Dynamic Modules
 if (appManifest.modules?.includes('ai-chat')) {

package/template/src/templates/docs/DocsLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Outlet, NavLink } from 'react-router-dom';
 import { docsSitemap } from './docs.sitemap';
-import { SitemapProvider } from '../../contexts/SitemapContext';
+import { SitemapProvider } from '../../engine/runtime/SitemapContext';
 import AppHeader from '../../components/AppHeader';
 import AppFooter from '../../components/AppFooter';
 import { Icon } from '@ramme-io/ui';
@@ -9,44 +9,55 @@ import PageTitleUpdater from '../../components/PageTitleUpdater';
 
 const DocsLayout: React.FC = () => {
   return (
-    // Add a wrapper div with the correct theme classes
-    <div className="bg-background text-foreground">
-      <div className="flex flex-col min-h-screen">
-        <AppHeader />
-        <main className="flex-grow">
-          <div className="bg-background border-b border-border sticky top-16 z-30">
-            <nav className="container mx-auto px-4">
-              <ul className="flex items-center gap-4 h-12">
-                {docsSitemap.map((item) => (
-                  <li key={item.id}>
-                    <NavLink
-                      to={item.path || ''}
-                      end={!item.children || item.children.length === 0}
-                      className={({ isActive }) =>
-                        `flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
-                          isActive
-                            ? 'bg-primary text-primary-foreground'
-                            : 'text-muted-foreground hover:bg-muted'
-                        }`
-                      }
-                    >
-                      {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-                      <span>{item.title}</span>
-                    </NavLink>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          </div>
-          <div className="container mx-auto p-4 md:p-8">
-            <SitemapProvider value={docsSitemap}>
-              <PageTitleUpdater />
+    <div className="bg-background text-foreground min-h-screen flex flex-col font-sans">
+      <AppHeader />
+      
+      <main className="flex-grow flex flex-col">
+        {/* --- TOP NAVIGATION BAR --- */}
+        <div className="bg-card border-b border-border sticky top-16 z-30 w-full">
+          <nav className="w-full px-6">
+            <ul className="flex items-center gap-6 h-12">
+              {docsSitemap.map((item) => (
+                <li key={item.id}>
+                  <NavLink
+                    to={item.path || ''}
+                    end={!item.children || item.children.length === 0}
+                    className={({ isActive }) =>
+                      `flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                        isActive
+                          ? 'bg-primary/10 text-primary'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                      }`
+                    }
+                  >
+                    {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
+                    <span>{item.title}</span>
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+
+        {/* --- MAIN CONTENT WRAPPER --- */}
+        <div className="w-full flex-1 flex flex-col">
+          <SitemapProvider value={docsSitemap}>
+            <PageTitleUpdater />
+            
+            {/* Page Content */}
+            <div className="flex-1">
               <Outlet />
-            </SitemapProvider>
-          </div>
-        </main>
-        <AppFooter />
-      </div>
+            </div>
+
+            {/* Footer - Now part of the content flow */}
+            <div className="border-t border-border mt-auto w-full bg-background">
+              <div className="max-w-7xl mx-auto px-6">
+                 <AppFooter />
+              </div>
+            </div>
+          </SitemapProvider>
+        </div>
+      </main>
     </div>
   );
 };