@ramme-io/create-app 1.0.5 → 1.1.2

package/template/src/pages/Dashboard.tsx

@@ -7,14 +7,23 @@ import {
   StatCard,
   DataTable,
   useDataFetch,
+  DeviceCard, // <-- NEW: Import DeviceCard
   type ColDef,
   type ValueFormatterParams,
 } from '@ramme-io/ui';
+import { useSignal } from '../hooks/useSignal'; // <-- NEW: Import the Engine
 import { mockTableData, mockChartData } from '../data/mockData';
 
 const Dashboard: React.FC = () => {
+  // 1. Existing Logic (SaaS Data)
   const { data: fetchedTableData } = useDataFetch(null, mockTableData);
 
+  // 2. New Logic (IoT Engine)
+  const temp = useSignal('living_room_ac', { initialValue: 72, min: 68, max: 76, unit: '°F' });
+  const hum = useSignal('living_room_hum', { initialValue: 45, min: 40, max: 60, unit: '%' });
+  const cpu = useSignal('server_01', { initialValue: 42, min: 10, max: 95, unit: '%' });
+
+  // 3. Table Config
   const columnDefs: ColDef[] = [
     { field: 'make', headerName: 'Make', sortable: true, filter: true },
     { field: 'model', headerName: 'Model', sortable: true, filter: true },
@@ -33,43 +42,79 @@ const Dashboard: React.FC = () => {
   return (
     <div className="space-y-8">
       <PageHeader
-        title="Dashboard Overview"
-        description="A summary of key metrics and recent activity."
+        title="Command Center"
+        description="Real-time device monitoring and business analytics."
       />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <StatCard
-          title="Total Users"
-          value="1,234"
-          icon="users"
-          changeText="+10% from last month"
-          changeDirection="positive"
-        />
-        <StatCard
-          title="Sales Today"
-          value="$5,678"
-          icon="dollar-sign"
-          changeText="+5% from yesterday"
-          changeDirection="positive"
-        />
-        <StatCard
-          title="New Orders"
-          value="89"
-          icon="shopping-cart"
-          changeText="-2 since last hour"
-          changeDirection="negative"
-        />
-        <StatCard
-          title="Active Projects"
-          value="12"
-          icon="briefcase"
-          footerText="3 nearing completion"
-        />
+      {/* --- SECTION 1: LIVE IOT STATUS (The New Stuff) --- */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-foreground">Live Device Status</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <DeviceCard
+            title="Living Room AC"
+            description="Zone A • Floor 1"
+            icon="thermometer"
+            status="online"
+            value={`${temp.value}${temp.unit}`}
+            trend="Cooling to 70°"
+          />
+          <DeviceCard
+            title="Air Quality"
+            description="Sensor ID: #8842"
+            icon="droplets"
+            status="active"
+            value={`${hum.value}${hum.unit}`}
+            trend="Stable"
+          />
+          <DeviceCard
+            title="Main Server"
+            description="192.168.1.42"
+            icon="server"
+            status={cpu.value > 90 ? 'error' : 'online'}
+            value={`${cpu.value}${cpu.unit}`}
+            trend="CPU Load"
+          />
+        </div>
+      </div>
+
+      {/* --- SECTION 2: BUSINESS METRICS (The Old Stuff) --- */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-foreground">Business Overview</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <StatCard
+            title="Total Users"
+            value="1,234"
+            icon="users"
+            changeText="+10% from last month"
+            changeDirection="positive"
+          />
+          <StatCard
+            title="Sales Today"
+            value="$5,678"
+            icon="dollar-sign"
+            changeText="+5% from yesterday"
+            changeDirection="positive"
+          />
+          <StatCard
+            title="New Orders"
+            value="89"
+            icon="shopping-cart"
+            changeText="-2 since last hour"
+            changeDirection="negative"
+          />
+          <StatCard
+            title="Active Projects"
+            value="12"
+            icon="briefcase"
+            footerText="3 nearing completion"
+          />
+        </div>
       </div>
 
+      {/* --- SECTION 3: ANALYTICS CHARTS --- */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 text-text-foreground">Monthly Revenue</h3>
+          <h3 className="text-lg font-semibold mb-4 text-foreground">Monthly Revenue</h3>
           <div className="h-[350px] w-full">
             <BarChart
               data={mockChartData}
@@ -79,7 +124,7 @@ const Dashboard: React.FC = () => {
           </div>
         </Card>
         <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 text-text-foreground">User Growth</h3>
+          <h3 className="text-lg font-semibold mb-4 text-foreground">User Growth</h3>
           <div className="h-[350px] w-full">
             <LineChart
               data={mockChartData}
@@ -90,8 +135,9 @@ const Dashboard: React.FC = () => {
         </Card>
       </div>
 
+      {/* --- SECTION 4: DATA TABLE --- */}
       <Card className="p-6">
-        <h3 className="text-2xl font-semibold mb-4 text-text">Recent Vehicle Data</h3>
+        <h3 className="text-2xl font-semibold mb-4 text-foreground">Recent Vehicle Data</h3>
         {fetchedTableData && (
           <DataTable
             rowData={fetchedTableData}

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

@@ -1,5 +1,4 @@
-// ramme-app-starter/template/src/templates/dashboard/DashboardLayout.tsx
-import React from 'react';
+import React, { useState } from 'react'; // <-- Added useState
 import { Outlet, NavLink } from 'react-router-dom';
 import {
   Sidebar,
@@ -12,11 +11,13 @@ import {
   useSidebar,
   Button,
   Icon,
+  ChatFAB, // <-- NEW: Import FAB
 } from '@ramme-io/ui';
 import { dashboardSitemap } from './dashboard.sitemap';
 import { SitemapProvider } from '../../contexts/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
 import AppHeader from '../../components/AppHeader';
+import { AIChatWidget } from '../../components/AIChatWidget'; // <-- NEW: Import Widget
 
 // NavLink wrapper - Correct
 const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
@@ -51,8 +52,6 @@ const AppSidebarContent: React.FC = () => {
               <SidebarMenuItem
                 as={SidebarNavLink}
                 href={item.path ? `/dashboard/${item.path}` : '/dashboard'}
-                // --- THIS IS THE FIX ---
-                // Force exact match for all parent links
                 end
                 icon={item.icon ? <Icon name={item.icon} /> : undefined}
                 tooltip={item.title}
@@ -66,12 +65,10 @@ const AppSidebarContent: React.FC = () => {
                     key={child.id}
                     as={SidebarNavLink}
                     href={`/dashboard/${item.path}/${child.path}`}
-                    // --- THIS IS THE FIX ---
-                    // 'end' was already here, which is correct
                     end
                     icon={child.icon ? <Icon name={child.icon} /> : undefined}
                     tooltip={child.title}
-                    className="pl-10" // Indent child items
+                    className="pl-10" 
                   >
                     {child.title}
                   </SidebarMenuItem>
@@ -88,11 +85,14 @@ const AppSidebarContent: React.FC = () => {
 
 // Main Layout Component
 const DashboardLayout: React.FC = () => {
+  // 1. STATE: Track if the chat window is open
+  const [isChatOpen, setIsChatOpen] = useState(false);
+
   return (
     <SitemapProvider value={dashboardSitemap}>
       <PageTitleUpdater />
       <SidebarProvider>
-        <div className="flex h-screen bg-background text-foreground">
+        <div className="flex h-screen bg-background text-foreground relative">
           <Sidebar>
             <AppSidebarContent />
           </Sidebar>
@@ -102,6 +102,22 @@ const DashboardLayout: React.FC = () => {
               <Outlet />
             </main>
           </div>
+
+          {/* --- AI COPILOT SECTION --- */}
+          
+          {/* 2. The Widget: Only renders when open */}
+          {isChatOpen && (
+            <AIChatWidget onClose={() => setIsChatOpen(false)} />
+          )}
+
+          {/* 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>
+
         </div>
       </SidebarProvider>
     </SitemapProvider>

package/template/src/templates/settings/SettingsLayout.tsx

@@ -29,7 +29,7 @@ import {
 import { settingsSitemap } from './settings.sitemap';
 import rammeLogo from '../../assets/orange.png';
 import { useAuth } from '../../contexts/AuthContext';
-import { appManifest } from '../../config/app.manifest';
+import { appManifest } from '../../config/navigation';
 import type { ManifestLink } from '../../core/manifest-types';
 import { SitemapProvider } from '../../contexts/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';

package/template/src/types/schema.ts

@@ -0,0 +1,88 @@
+import { z } from 'zod';
+
+// ------------------------------------------------------------------
+// 1. Signal Schema (The "Nerve")
+// Defines a single data point (e.g., "Living Room Temp", "Light Switch")
+// ------------------------------------------------------------------
+export const SignalSchema = z.object({
+  id: z.string().min(1, "Signal ID is required"),
+  label: z.string(),
+  description: z.string().optional(),
+  
+  // Classification
+  kind: z.enum(['sensor', 'actuator', 'setpoint', 'metric', 'status']),
+  
+  // Data Source Configuration (CRITICAL for the Adapter Factory)
+  source: z.enum(['mock', 'mqtt', 'http', 'derived', 'local']),
+  
+  // Source-Specific Config 
+  topic: z.string().optional(),      // For MQTT (e.g., "home/living/temp")
+  endpoint: z.string().optional(),   // For HTTP (e.g., "/api/v1/weather")
+  refreshRate: z.number().default(1000), 
+  
+  // Value Configuration
+  defaultValue: z.any().optional(),
+  unit: z.string().optional(),       
+  
+  // Validation
+  min: z.number().optional(),
+  max: z.number().optional(),
+});
+
+export type SignalDefinition = z.infer<typeof SignalSchema>;
+
+
+// ------------------------------------------------------------------
+// 2. Entity Schema (The "Atom")
+// Defines a grouping of signals into a logical object (e.g., "Smart Thermostat")
+// ------------------------------------------------------------------
+export const EntitySchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  description: z.string().optional(),
+  
+  // Taxonomy
+  type: z.string(), // e.g., 'device', 'room', 'service'
+  category: z.enum(['hardware', 'software', 'logical']).default('logical'),
+
+  // The Signals that belong to this entity (References Signal IDs)
+  signals: z.array(z.string()), 
+  
+  // UI Hints (How should this entity look?)
+  ui: z.object({
+    icon: z.string().optional(), // IconName
+    color: z.string().optional(),
+    dashboardComponent: z.string().optional(), // e.g., 'DeviceCard'
+  }).optional(),
+});
+
+export type EntityDefinition = z.infer<typeof EntitySchema>;
+
+
+// ------------------------------------------------------------------
+// 3. App Specification (The "Master Plan")
+// This is the JSON structure the App Builder will generate.
+// ------------------------------------------------------------------
+export const AppSpecificationSchema = z.object({
+  meta: z.object({
+    name: z.string(),
+    version: z.string(),
+    description: z.string().optional(),
+    author: z.string().optional(),
+    createdAt: z.string().optional(),
+  }),
+  
+  // The Data Layer
+  domain: z.object({
+    signals: z.array(SignalSchema),
+    entities: z.array(EntitySchema),
+  }),
+
+  // Global Config
+  config: z.object({
+    theme: z.enum(['light', 'dark', 'system']).default('system'),
+    mockMode: z.boolean().default(true), 
+  }),
+});
+
+export type AppSpecification = z.infer<typeof AppSpecificationSchema>;

package/template/src/types/signal.ts

@@ -0,0 +1,22 @@
+// src/types/signal.ts
+/**
+ * @file signal.d.ts
+ * @description Defines the universal contract for "Live Data" in the Ramme ecosystem.
+ *
+ * A "Signal" is a single data point that changes over time.
+ * unlike a "Record" (which is static database row), a Signal is ephemeral.
+ */
+
+export type SignalStatus = 'fresh' | 'stale' | 'disconnected' | 'error';
+
+export interface Signal<T = any> {
+  id: string;          // The unique ID (e.g., "temp_01")
+  value: T;            // The actual data (e.g., 24.5)
+  unit?: string;       // Optional unit (e.g., "°C")
+  timestamp: number;   // Unix timestamp of last update
+  status: SignalStatus;
+  meta?: Record<string, any>; // Extra metadata (e.g., limits)
+}
+
+// A simple map for looking up signals by ID
+export type SignalMap = Record<string, Signal>;