@ramme-io/create-app 1.2.0 → 1.2.2

package/template/src/features/users/components/UserDrawer.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import { Drawer, Button, Input, Select, type SelectOption } from '@ramme-io/ui';
+import type { User } from '../../../data/mockData';
+
+interface UserDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: User | null;
+  onSave: (id: string, data: Partial<User>) => void;
+}
+
+const UserDrawer: React.FC<UserDrawerProps> = ({ isOpen, onClose, user, onSave }) => {
+  const [formData, setFormData] = useState<Partial<User>>({
+    name: '',
+    email: '',
+    role: 'viewer',
+    status: 'active',
+  });
+
+  useEffect(() => {
+    if (user) {
+      setFormData(user);
+    } else {
+      setFormData({
+        name: '',
+        email: '',
+        role: 'viewer',
+        status: 'active',
+      });
+    }
+  }, [user, isOpen]);
+
+  // Options Configurations
+  const roleOptions: SelectOption[] = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'editor', label: 'Editor' },
+    { value: 'viewer', label: 'Viewer' },
+  ];
+
+  const statusOptions: SelectOption[] = [
+    { value: 'active', label: 'Active' },
+    { value: 'pending', label: 'Pending' },
+    { value: 'banned', label: 'Banned' },
+  ];
+
+  // ✅ HELPER: Find the full object based on the string value
+  // This satisfies the TypeScript requirement: value={SelectOption}
+  const getOption = (options: SelectOption[], value: string | undefined) => {
+    return options.find((opt) => opt.value === value) || null;
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  // ✅ HELPER: Handle change for both Native Events and Custom Selects
+  const handleSelectChange = (name: keyof User, newValue: any) => {
+    // If the component returns a SelectOption object (Custom Select)
+    if (newValue && typeof newValue === 'object' && 'value' in newValue) {
+        setFormData({ ...formData, [name]: newValue.value });
+    } 
+    // If the component returns a standard Event (Native Select)
+    else if (newValue?.target) {
+        setFormData({ ...formData, [name]: newValue.target.value });
+    }
+    // Fallback
+    else {
+        setFormData({ ...formData, [name]: newValue });
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const idToSave = user?.id || '';
+    onSave(idToSave, formData);
+  };
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={user ? 'Edit User' : 'Add New User'}
+      size="md"
+    >
+      <form onSubmit={handleSubmit} className="flex flex-col h-full">
+        <div className="flex-1 space-y-6 p-1">
+          <Input
+            label="Full Name"
+            name="name"
+            placeholder="Jane Doe"
+            value={formData.name || ''}
+            onChange={handleChange}
+            required
+          />
+
+          <Input
+            label="Email Address"
+            name="email"
+            type="email"
+            placeholder="jane@example.com"
+            value={formData.email || ''}
+            onChange={handleChange}
+            required
+          />
+
+          <Select
+            label="Role"
+            options={roleOptions}
+            // ✅ FIX: Pass the object, not the string
+            value={getOption(roleOptions, formData.role)}
+            // ✅ FIX: Handle the update safely
+            onChange={(val) => handleSelectChange('role', val)}
+          />
+
+          <Select
+            label="Status"
+            options={statusOptions}
+            // ✅ FIX: Pass the object, not the string
+            value={getOption(statusOptions, formData.status)}
+            // ✅ FIX: Handle the update safely
+            onChange={(val) => handleSelectChange('status', val)}
+          />
+        </div>
+
+        <div className="flex justify-end gap-3 mt-8 pt-4 border-t border-border">
+          <Button variant="ghost" onClick={onClose} type="button">
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit">
+            {user ? 'Save Changes' : 'Create User'}
+          </Button>
+        </div>
+      </form>
+    </Drawer>
+  );
+};
+
+export default UserDrawer;

package/template/src/features/users/index.ts

@@ -0,0 +1,2 @@
+// ✅ Export Page for Routing
+export { default as UsersPage } from './pages/UsersPage';

package/template/src/features/users/pages/UsersPage.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useMemo } from 'react';
+import {
+  PageHeader,
+  DataTable,
+  Button,
+  useToast,
+  Badge,
+  Input,
+  type ColDef,
+  type ICellRendererParams,
+} from '@ramme-io/ui';
+
+// 1. REMOVE: userService and old User types
+// import { userService } from '../api/user.service';
+// import type { User } from '../api/user.types';
+
+// 2. ADD: The Engine Hook & Shared Data
+import { useCrudLocalStorage } from '../../../engine/runtime/useCrudLocalStorage';
+import { SEED_USERS, type User } from '../../../data/mockData';
+
+import UserDrawer from '../components/UserDrawer';
+
+const UsersPage: React.FC = () => {
+  const { addToast } = useToast();
+  
+  // 3. REPLACE: Manual state fetching with the Reactive Engine
+  // This automatically loads 'ramme_db_users' and keeps it in sync.
+  const { 
+    data: users, 
+    createItem, 
+    updateItem, 
+    deleteItem 
+  } = useCrudLocalStorage<User>('ramme_db_users', SEED_USERS);
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // (Removed refreshData & useEffect - the hook handles this automatically)
+
+  const handleOpenDrawer = (user: User | null = null) => {
+    setEditingUser(user);
+    setIsDrawerOpen(true);
+  };
+
+  const handleDelete = (user: User) => {
+    if (confirm(`Delete ${user.name}?`)) {
+      deleteItem(user.id);
+      addToast('User deleted', 'success');
+    }
+  };
+
+  const handleSave = (_id: string, data: Partial<User>) => {
+    try {
+      if (editingUser) {
+        // Update existing user
+        updateItem({ ...editingUser, ...data } as User);
+        addToast('User updated', 'success');
+      } else {
+        // Create new user (Engine handles ID generation)
+        createItem({
+          ...data,
+          role: data.role || 'viewer', // Ensure defaults
+          status: data.status || 'active',
+          joinedAt: new Date().toISOString()
+        } as User);
+        addToast('User created', 'success');
+      }
+      // Close drawer
+      setIsDrawerOpen(false);
+    } catch (error) {
+      addToast('Error saving user', 'error');
+    }
+  };
+
+  const columnDefs = useMemo<ColDef[]>(() => [
+    { field: 'name', headerName: 'Name', flex: 1, filter: true },
+    { field: 'email', headerName: 'Email', flex: 1, filter: true },
+    { 
+      field: 'role', 
+      headerName: 'Role', 
+      width: 120,
+      cellRenderer: (params: any) => (
+        <Badge variant={params.value === 'admin' ? 'primary' : 'secondary'}>
+          {params.value}
+        </Badge>
+      )
+    },
+    { 
+      field: 'status', 
+      width: 120,
+      cellRenderer: (params: any) => (
+        <Badge variant={params.value === 'active' ? 'success' : 'danger'}>
+          {params.value}
+        </Badge>
+      )
+    },
+    {
+      headerName: 'Actions',
+      width: 120,
+      pinned: 'right',
+      cellRenderer: (params: ICellRendererParams) => (
+        <div className="flex gap-2">
+          <Button size="sm" variant="ghost" iconLeft="edit" onClick={() => handleOpenDrawer(params.data)} />
+          <Button size="sm" variant="ghost" className="text-red-500 hover:text-red-600" iconLeft="trash-2" onClick={() => handleDelete(params.data)} />
+        </div>
+      ),
+    },
+  ], [deleteItem]); // Added dependency
+
+  return (
+    <div className="space-y-6 h-[calc(100vh-140px)] flex flex-col">
+      <PageHeader
+        title="User Management"
+        description="Manage system access and permissions."
+        actions={
+          <Button variant="primary" iconLeft="plus" onClick={() => handleOpenDrawer()}>
+            Add User
+          </Button>
+        }
+      />
+      
+      <div className="w-full max-w-sm">
+         <Input 
+            placeholder="Search users..." 
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+         />
+      </div>
+      
+      <DataTable
+        rowData={users}
+        columnDefs={columnDefs}
+        height="100%"
+        quickFilterText={searchTerm} 
+        pagination
+        paginationPageSize={10}
+        paginationPageSizeSelector={[10, 25, 50]}
+      />
+
+      <UserDrawer 
+        isOpen={isDrawerOpen} 
+        onClose={() => setIsDrawerOpen(false)} 
+        user={editingUser}
+        onSave={handleSave}
+      />
+    </div>
+  );
+};
+
+export default UsersPage;

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,9 +3,9 @@ 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

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

@@ -1,127 +1,96 @@
-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, // Type for safety
+} from '@ramme-io/ui'; // ✅ Import only what exists in v1.2.0
+
 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';
-
-// 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>
-
-      <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 />
-    </>
-  );
-};
+import { AIChatWidget } from '../../components/AIChatWidget';
+import { useWorkflowEngine } from '../../engine/runtime/useWorkflowEngine';
 
 // 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();
 
+  // 1. Transform Sitemap to Sidebar Items
+  // The new Sidebar expects a simple array of items.
+  const sidebarItems: SidebarItem[] = useMemo(() => {
+    return dashboardSitemap.map((route) => ({
+      id: route.id,
+      label: route.title,
+      icon: route.icon as IconName, // Ensure your sitemap strings match valid icon names
+      href: route.path ? `/dashboard/${route.path}` : '/dashboard',
+      // Note: v1.2.0 Sidebar currently handles top-level items. 
+      // If you need nested items, we would flatten them here or update Sidebar.tsx later.
+    }));
+  }, []);
+
+  // 2. Determine Active Item based on URL
+  const activeItemId = useMemo(() => {
+    // Find the item whose href matches the start of the current path
+    const active = sidebarItems.find(item => 
+      item.href !== '/dashboard' && location.pathname.startsWith(item.href!)
+    );
+    // Default to dashboard (first item) if no specific match
+    return active?.id || sidebarItems[0]?.id;
+  }, [location.pathname, sidebarItems]);
+
   return (
     <SitemapProvider value={dashboardSitemap}>
       <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>
+      
+      {/* 3. New Layout Structure (No Provider needed) */}
+      <div className="flex h-screen bg-background text-foreground relative">
+        
+        <Sidebar
+          className="relative border-border"
+          items={sidebarItems}
+          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>
+        {/* --- AI COPILOT SECTION --- */}
+        {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,25 +1,40 @@
-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';
 
-export const dashboardSitemap: SitemapEntry[] = [];
+// Existing pages (Legacy location)
+import Welcome from '../../features/onboarding/pages/Welcome'; 
+import { OverviewPage } from '../../features/overview'; 
+import AiChat from '../../features/ai/pages/AiChat'; 
 
-// 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,
-      // Map root to Dashboard, others to their slug
-      path: isDashboard ? '' : page.slug,
-      icon: isDashboard ? 'layout-dashboard' : 'file-text',
-      component: Dashboard, // Map everything to the Universal Renderer
-    });
-  });
-}
+// ✅ NEW: Import from the Feature Domain (Clean API)
+import { UsersPage } from '../../features/users'; 
+
+export const dashboardSitemap: SitemapEntry[] = [
+  // 1. The New Landing Page
+  {
+    id: 'welcome',
+    path: 'welcome',
+    title: 'Start Here',
+    icon: 'rocket',
+    component: Welcome,
+  },
+  // 2. The "Mission Control" Charts Page
+  {
+  id: 'overview',
+  path: 'overview',
+  title: 'Overview',
+  icon: 'layout-dashboard',
+  component: OverviewPage, 
+},
+  // 3. ✅ The User Management Module
+  {
+    id: 'users',
+    path: 'users',
+    title: 'Users',
+    icon: 'users',
+    component: UsersPage,
+  }
+];
 
 // B. Dynamic Modules
 if (appManifest.modules?.includes('ai-chat')) {