@ramme-io/create-app 1.2.0 → 1.2.2

package/template/src/features/auth/AuthContext.tsx

@@ -0,0 +1,118 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+// Import the User type from your mock data to ensure shape consistency
+import type { User } from '../../data/mockData'; 
+
+/**
+ * @file AuthContext.tsx
+ * @description The Central Identity Manager.
+ * * ARCHITECTURAL ROLE:
+ * This context provides global access to the current user's state (Identity).
+ * It decouples the UI components from the specific authentication implementation.
+ * * KEY FEATURES:
+ * 1. **Session Persistence:** Checks localStorage on boot.
+ * 2. **Data Lake Connection:** Reads from 'ramme_db_users' to validate real accounts.
+ * 3. **Simulation:** Adds artificial latency to test loading states.
+ */
+
+// ✅ CRITICAL FIX: Match the key used by useCrudLocalStorage and data-seeder
+const USER_DB_KEY = 'ramme_db_users'; 
+const SESSION_KEY = 'ramme_session';
+
+interface AuthContextType {
+  user: User | null;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Check for existing session on mount
+  useEffect(() => {
+    const storedUser = localStorage.getItem(SESSION_KEY);
+    if (storedUser) {
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch (e) {
+        console.error("Failed to parse session", e);
+        localStorage.removeItem(SESSION_KEY);
+      }
+    }
+    setIsLoading(false);
+  }, []);
+
+  const login = async (email: string, password: string) => {
+    setIsLoading(true);
+    
+    // ✅ FIX: We now use the 'password' variable to satisfy TypeScript (ts(6133))
+    // This also adds a layer of realism to the mock validation.
+    if (!password || password.length < 3) {
+      setIsLoading(false);
+      throw new Error("Password must be at least 3 characters");
+    }
+
+    console.log(`🔐 Attempting login for: ${email}`);
+
+    // Simulate API Delay
+    await new Promise(resolve => setTimeout(resolve, 600));
+
+    // ✅ READ FROM THE CORRECT DATA LAKE
+    const storedUsers = localStorage.getItem(USER_DB_KEY);
+    
+    // Debugging: See what is actually in storage
+    if (!storedUsers) {
+      console.warn(`⚠️ Data Lake '${USER_DB_KEY}' is empty! Did you run the seeder or signup?`);
+    } else {
+      // Optional: Log count for debugging (remove in production)
+      // console.log(`✅ Data Lake found. Users in DB:`, JSON.parse(storedUsers).length);
+    }
+
+    const users: User[] = storedUsers ? JSON.parse(storedUsers) : [];
+    
+    // Case-insensitive email check
+    const foundUser = users.find(u => u.email.toLowerCase() === email.toLowerCase());
+
+    if (foundUser) {
+      console.log("🎉 User found:", foundUser);
+      setUser(foundUser);
+      localStorage.setItem(SESSION_KEY, JSON.stringify(foundUser));
+      setIsLoading(false);
+    } else {
+      console.error("❌ User NOT found. Available emails:", users.map(u => u.email));
+      setIsLoading(false);
+      throw new Error("Invalid email or password");
+    }
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem(SESSION_KEY);
+  };
+
+  return (
+    <AuthContext.Provider 
+      value={{ 
+        user, 
+        login, 
+        logout, 
+        isAuthenticated: !!user, 
+        isLoading 
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { useTheme, Button, availableThemes, type ThemeConfig } from '@ramme-io/ui';
+
+// --- Temporary Theme Switcher (Unchanged) ---
+const MiniThemeSwitcher = () => {
+  const { setTheme, customTheme, setCustomTheme } = useTheme();
+  
+  const cyberTheme: ThemeConfig = {
+    name: 'Cyberpunk',
+    colors: {
+      primary: '255 238 88', primaryForeground: '0 0 0',
+      secondary: '30 30 35', secondaryForeground: '255 255 255',
+      accent: '0 255 255', accentForeground: '0 0 0',
+      danger: '255 0 85', dangerForeground: '255 255 255',
+      background: '5 5 10', card: '20 20 25', text: '240 240 240',
+      border: '255 238 88', muted: '40 40 50', mutedForeground: '150 150 160',
+      input: '30 30 35', inputBorder: '80 80 90', ring: '255 238 88'
+    },
+    borderRadius: '0px',
+  };
+
+  return (
+    <div className="absolute top-4 right-4 flex gap-2 z-50">
+       {availableThemes.slice(0, 3).map(t => (
+         <Button key={t} size="sm" variant="ghost" onClick={() => setTheme(t)} className="opacity-50 hover:opacity-100">
+           {t}
+         </Button>
+       ))}
+       <Button size="sm" variant="ghost" onClick={() => setCustomTheme(customTheme ? null : cyberTheme)} className="opacity-50 hover:opacity-100">
+         AI
+       </Button>
+    </div>
+  );
+};
+
+export const AuthLayout: React.FC = () => {
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center bg-background text-foreground relative transition-colors duration-300">
+      
+      {/* Background Pattern */}
+      <div className="absolute inset-0 z-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#888_1px,transparent_1px)] [background-size:16px_16px]" />
+
+      <MiniThemeSwitcher />
+
+      {/* ✅ FIX: Removed the outer <Card>, Header, and Footer.
+         This is now a "Passthrough" layout. It centers the content 
+         but lets the Page (LoginPage/SignupPage) own the UI completely.
+      */}
+      <div className="z-10 relative w-full flex justify-center p-4">
+        <Outlet />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../AuthContext';
+// 1. Remove 'Card' from imports
+import { Button, Alert, Icon, Input } from '@ramme-io/ui';
+
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+  
+  const [formData, setFormData] = useState({ email: '', password: '' });
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
+    if (error) setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      await login(formData.email, formData.password);
+      navigate('/dashboard');
+    } catch (err: any) {
+      setError(err.message || 'Invalid email or password.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4 transition-colors duration-300">
+      
+      {/* 2. REPLACED <Card> with a native <div> 
+        - Removes conflicting library styles (border-border vs border-t-primary).
+        - Adds 'sm:w-[400px]' for better mobile responsiveness.
+        - Adds 'bg-card' explicitly for theme support.
+      */}
+      <div className="w-full sm:w-[400px] p-8 rounded-xl shadow-2xl border-t-4 border-t-primary bg-card ring-1 ring-black/5 dark:ring-white/10">
+        
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="mx-auto w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4 text-primary transition-transform hover:scale-110">
+            <Icon name="layout-template" size={24} />
+          </div>
+          <h1 className="text-2xl font-bold text-foreground tracking-tight">Welcome Back</h1>
+          <p className="text-sm text-muted-foreground mt-2">Enter your credentials to access your account</p>
+        </div>
+        
+        {/* Error State */}
+        {error && (
+          <Alert variant="danger" title="Access Denied" className="mb-6 animate-in fade-in slide-in-from-top-2">
+            {error}
+          </Alert>
+        )}
+        
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <Input 
+            name="email"
+            label="Email Address" 
+            type="email" 
+            placeholder="alex@example.com" 
+            required 
+            autoComplete="email"
+            value={formData.email}
+            onChange={handleChange}
+            // Explicit background to prevent transparency issues
+            className="bg-background"
+          />
+          
+          <div className="space-y-1">
+            <Input 
+              name="password"
+              label="Password" 
+              type="password" 
+              placeholder="••••••••" 
+              required 
+              autoComplete="current-password"
+              value={formData.password}
+              onChange={handleChange}
+              className="bg-background"
+            />
+          </div>
+
+          <Button type="submit" loading={isLoading} className="w-full mt-2 font-medium" size="lg">
+            Sign In
+          </Button>
+        </form>
+
+        {/* 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>
+          <Link to="/signup" className="font-semibold text-primary hover:text-primary/80 transition-colors">
+            Create one
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

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

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../AuthContext';
+import { useCrudLocalStorage } from '../../../engine/runtime/useCrudLocalStorage';
+import { Button, Card, FormTemplate, Alert, Icon, type FormField } from '@ramme-io/ui';
+// Import SEED_USERS to safe-guard initialization if the DB is empty
+import { SEED_USERS, type User } from '../../../data/mockData';
+
+const SignupPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+  
+  // ✅ DATA HOOK: Direct access to the User Data Lake
+  // This ensures new users are saved to 'ramme_db_users' alongside seed data
+  const { data: users, createItem } = useCrudLocalStorage<User>('ramme_db_users', SEED_USERS);
+  
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignup = async (formData: Record<string, any>) => {
+    setIsLoading(true);
+    setError(null);
+
+    // 1. Validation: Check for duplicates
+    if (users.some(u => u.email.toLowerCase() === formData.email.toLowerCase())) {
+      setError('An account with this email already exists.');
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      // 2. Create the User Record in the Data Lake
+      // We cast to 'User' because we handle the 'id' generation in createItem
+      const newUser = {
+        name: formData.name,
+        email: formData.email,
+        role: 'viewer', // Default role for new signups
+        status: 'active',
+        joinedAt: new Date().toISOString().split('T')[0],
+        // In a real app, you'd hash the password here.
+        // For this prototype, the presence of the record implies access.
+      } as User;
+
+      createItem(newUser);
+
+      // 3. Auto-Login immediately after creation
+      await login(formData.email, formData.password);
+      navigate('/dashboard');
+
+    } catch (err: any) {
+      setError(err.message || 'Failed to create account.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const formFields: FormField[] = [
+    { name: 'name', label: 'Full Name', type: 'text', placeholder: 'Jane Doe', required: true },
+    { name: 'email', label: 'Email Address', type: 'email', placeholder: 'jane@example.com', required: true },
+    { name: 'password', label: 'Password', type: 'password', placeholder: 'Min. 3 characters', required: true },
+  ];
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md p-8 shadow-xl border-t-4 border-t-secondary">
+        <div className="text-center mb-8">
+          <div className="mx-auto w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mb-4 text-secondary">
+            <Icon name="user-plus" size={24} />
+          </div>
+          <h1 className="text-3xl font-bold text-foreground">Create Account</h1>
+          <p className="text-muted-foreground mt-2">Join the platform to get started</p>
+        </div>
+        
+        {error && <Alert variant="danger" title="Registration Failed" className="mb-4">{error}</Alert>}
+        
+        <FormTemplate
+          fields={formFields}
+          onSubmit={handleSignup}
+        >
+          <Button type="submit" loading={isLoading} className="w-full mt-4" size="lg" variant="secondary">
+            Create Account
+          </Button>
+        </FormTemplate>
+
+        <div className="mt-6 text-center text-sm">
+          <span className="text-muted-foreground">Already have an account? </span>
+          <Link to="/login" className="font-semibold text-primary hover:underline">
+            Sign In
+          </Link>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default SignupPage;

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

@@ -0,0 +1,222 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { 
+  DataTable, 
+  Button, 
+  Icon, 
+  Card, 
+  useToast, 
+  SearchInput,
+  type ColDef,
+  type GridApi 
+} from '@ramme-io/ui';
+import { getResourceMeta, getMockData } from '../../data/mockData';
+import { AutoForm } from '../../components/AutoForm';
+import { useCrudLocalStorage } from '../../engine/runtime/useCrudLocalStorage';
+
+interface SmartTableProps {
+  dataId: string;
+  title?: string;
+  initialFilter?: Record<string, any>; 
+}
+
+export const SmartTable: React.FC<SmartTableProps> = ({ 
+  dataId, 
+  title}) => {
+  const { addToast } = useToast();
+  
+  // 1. DATA KERNEL
+  const meta = getResourceMeta(dataId);
+  const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
+  
+  // We use the CRUD hook to persist changes to localStorage
+  const { 
+    data: rowData, 
+    createItem, 
+    updateItem, 
+    deleteItem 
+  } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
+
+  // 2. 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('');
+
+  // 3. COLUMN DEFINITIONS
+  const columns = useMemo<ColDef[]>(() => {
+    if (!meta?.fields) return [];
+
+    const generatedCols: ColDef[] = meta.fields.map((f: any) => {
+      const col: ColDef = {
+        field: f.key,
+        headerName: f.label,
+        filter: true,
+        sortable: true,
+        resizable: true,
+        flex: 1,
+      };
+
+      // Smart Formatting based on type
+      if (f.type === 'currency') {
+        col.valueFormatter = (p: any) => p.value ? `$${Number(p.value).toLocaleString()}` : '';
+      }
+      if (f.type === 'date') {
+        col.valueFormatter = (p: any) => p.value ? new Date(p.value).toLocaleDateString() : '';
+      }
+      if (f.type === 'status') {
+        col.cellRenderer = (p: any) => {
+          const statusColors: any = {
+            active: 'bg-green-100 text-green-800',
+            paid: 'bg-green-100 text-green-800',
+            pending: 'bg-yellow-100 text-yellow-800',
+            inactive: 'bg-slate-100 text-slate-600',
+            overdue: 'bg-red-100 text-red-800'
+          };
+          const colorClass = statusColors[String(p.value).toLowerCase()] || 'bg-slate-100 text-slate-800';
+          return (
+            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+              {p.value}
+            </span>
+          );
+        };
+      }
+      return col;
+    });
+
+    // Add Checkbox Selection to the first column
+    if (generatedCols.length > 0) {
+      generatedCols[0].headerCheckboxSelection = true;
+      generatedCols[0].checkboxSelection = true;
+      generatedCols[0].minWidth = 180;
+    }
+
+    // Add Actions Column
+    generatedCols.push({
+      headerName: "Actions",
+      field: "id",
+      width: 100,
+      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); }}>
+            <Icon name="edit-2" size={14} className="text-slate-500" />
+          </Button>
+        </div>
+      )
+    });
+
+    return generatedCols;
+  }, [meta]);
+
+  // 4. HANDLERS
+  const onGridReady = useCallback((params: any) => {
+    setGridApi(params.api);
+  }, []);
+
+  const onSelectionChanged = useCallback(() => {
+    if (gridApi) {
+      setSelectedRows(gridApi.getSelectedRows());
+    }
+  }, [gridApi]);
+
+  const handleBulkDelete = () => {
+    if (confirm(`Delete ${selectedRows.length} items?`)) {
+      selectedRows.forEach(row => deleteItem(row.id));
+      setSelectedRows([]);
+      addToast(`${selectedRows.length} items deleted`, 'success');
+    }
+  };
+
+  const handleSave = (record: any) => {
+    if (record.id && currentRecord?.id) {
+      updateItem(record);
+      addToast('Item updated', 'success');
+    } else {
+      const { id, ...newItem } = record;
+      createItem(newItem);
+      addToast('Item created', 'success');
+    }
+    setIsEditOpen(false);
+  };
+
+  // --- RENDER ---
+  return (
+    <Card className="flex flex-col h-[600px] border border-border shadow-sm overflow-hidden bg-card">
+      
+      {/* HEADER TOOLBAR */}
+      <div className="p-4 border-b border-border flex justify-between items-center gap-4 bg-muted/5">
+        
+        {/* Left: Title or Bulk Actions */}
+        {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
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <div className="p-2 bg-primary/10 rounded-md text-primary">
+              <Icon name="table" size={18} />
+            </div>
+            <div>
+              <h3 className="text-base font-bold text-foreground leading-tight">
+                {title || meta?.name || dataId}
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                {rowData.length} records found
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Right: Actions & Filter */}
+        <div className="flex items-center gap-2">
+          <div className="w-64">
+            <SearchInput 
+              placeholder="Quick search..." 
+              value={quickFilterText}
+              onChange={(e) => {
+                setQuickFilterText(e.target.value);
+                gridApi?.setQuickFilter(e.target.value);
+              }}
+            />
+          </div>
+          <div className="h-6 w-px bg-border mx-1" />
+          <Button size="sm" variant="primary" iconLeft="plus" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
+            Add New
+          </Button>
+        </div>
+      </div>
+
+      {/* AG GRID */}
+      <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}
+        />
+      </div>
+
+      {/* EDIT DRAWER */}
+      <AutoForm
+        isOpen={isEditOpen}
+        onClose={() => setIsEditOpen(false)}
+        onSubmit={handleSave}
+        title={meta?.name || 'Item'}
+        fields={meta?.fields || []}
+        initialData={currentRecord}
+      />
+    </Card>
+  );
+};