@ramme-io/create-app 1.2.1 → 1.2.5

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/{blocks → features/datagrid}/SmartTable.tsx

@@ -9,9 +9,12 @@ import {
   type ColDef,
   type GridApi 
 } from '@ramme-io/ui';
-import { getResourceMeta, getMockData } from '../data/mockData';
-import { AutoForm } from '../components/AutoForm';
-import { useCrudLocalStorage } from '../hooks/useCrudLocalStorage';
+import { useJustInTimeSeeder } from '../../engine/runtime/useJustInTimeSeeder';
+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';
 
 interface SmartTableProps {
   dataId: string;
@@ -21,16 +24,40 @@ interface SmartTableProps {
 
 export const SmartTable: React.FC<SmartTableProps> = ({ 
   dataId, 
-  title,
-  initialFilter
-}) => {
+  title}) => {
   const { addToast } = useToast();
   
-  // 1. DATA KERNEL
-  const meta = getResourceMeta(dataId);
-  const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
+  const manifest = useManifest();
+
+  // ✅ FIX: Normalize 'meta' to always match 'ResourceDefinition'
+  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;
+    }
+
+    // 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
+  const seedData = useJustInTimeSeeder(dataId, meta);
   
-  // We use the CRUD hook to persist changes to localStorage
   const { 
     data: rowData, 
     createItem, 
@@ -38,14 +65,14 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     deleteItem 
   } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
 
-  // 2. UI STATE
+  // --- 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
+  // --- COLUMN DEFINITIONS ---
   const columns = useMemo<ColDef[]>(() => {
     if (!meta?.fields) return [];
 
@@ -59,7 +86,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
         flex: 1,
       };
 
-      // Smart Formatting based on type
       if (f.type === 'currency') {
         col.valueFormatter = (p: any) => p.value ? `$${Number(p.value).toLocaleString()}` : '';
       }
@@ -86,14 +112,12 @@ export const SmartTable: React.FC<SmartTableProps> = ({
       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",
@@ -111,7 +135,7 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     return generatedCols;
   }, [meta]);
 
-  // 4. HANDLERS
+  // --- HANDLERS ---
   const onGridReady = useCallback((params: any) => {
     setGridApi(params.api);
   }, []);
@@ -142,14 +166,10 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     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">
@@ -175,7 +195,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
           </div>
         )}
 
-        {/* Right: Actions & Filter */}
         <div className="flex items-center gap-2">
           <div className="w-64">
             <SearchInput 
@@ -183,8 +202,7 @@ export const SmartTable: React.FC<SmartTableProps> = ({
               value={quickFilterText}
               onChange={(e) => {
                 setQuickFilterText(e.target.value);
-                gridApi?.setQuickFilter(e.target.value);
-              }}
+                gridApi?.updateGridOptions({ quickFilterText: e.target.value });              }}
             />
           </div>
           <div className="h-6 w-px bg-border mx-1" />
@@ -194,7 +212,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
         </div>
       </div>
 
-      {/* AG GRID */}
       <div className="flex-1 w-full bg-card relative">
         <DataTable 
           rowData={rowData} 
@@ -210,7 +227,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
         />
       </div>
 
-      {/* EDIT DRAWER */}
       <AutoForm
         isOpen={isEditOpen}
         onClose={() => setIsEditOpen(false)}

package/template/src/features/developer/GhostOverlay.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { Icon, cn } from '@ramme-io/ui';
+
+interface GhostOverlayProps {
+  children: React.ReactNode;
+  componentId: string;
+  componentType: string;
+  signalId?: string;
+  isActive?: boolean;
+}
+
+export const GhostOverlay: React.FC<GhostOverlayProps> = ({
+  children,
+  componentId,
+  componentType,
+  signalId,
+  isActive = false,
+}) => {
+  const [isRemoteSelected, setIsRemoteSelected] = useState(false);
+
+  // --- 1. INBOUND BRIDGE: Listen for Builder Selections ---
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      // Security Check: In prod, you'd check event.origin
+      const { type, payload } = event.data || {};
+
+      if (type === 'RAMME_HIGHLIGHT_BLOCK') {
+        // If the Builder says "Highlight Block X", checking if it's us
+        setIsRemoteSelected(payload?.blockId === componentId);
+        
+        // Optional: Scroll into view if selected remotely
+        if (payload?.blockId === componentId) {
+          document.getElementById(`ghost-${componentId}`)?.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [isActive, componentId]);
+
+  if (!isActive) {
+    return <>{children}</>;
+  }
+
+  // --- 2. OUTBOUND BRIDGE: Signal the Builder ---
+  const handleClick = (e: React.MouseEvent) => {
+    // 🛑 Zero Jank: Stop the click from triggering links/buttons
+    e.preventDefault();
+    e.stopPropagation();
+
+    // 🚀 Signal the Parent
+    window.parent.postMessage({
+      type: 'RAMME_SELECT_BLOCK',
+      payload: { blockId: componentId, type: componentType }
+    }, '*');
+    
+    // Optimistic UI update (optional, usually we wait for parent to confirm)
+    setIsRemoteSelected(true);
+  };
+
+  return (
+    <div 
+      id={`ghost-${componentId}`}
+      className="relative group isolate" // isolate creates new stacking context
+      onClick={handleClick}
+    >
+      {/* --- THE GHOST LAYER --- */}
+      <div className={cn(
+        "absolute inset-0 z-50 rounded-lg transition-all duration-200 pointer-events-auto cursor-pointer",
+        // Default State (Hover)
+        "hover:ring-2 hover:ring-primary/50 hover:bg-primary/5",
+        // Selected State (Remote or Local)
+        isRemoteSelected ? "ring-2 ring-primary bg-primary/10 shadow-[0_0_0_4px_rgba(var(--app-primary-color),0.1)]" : "border-2 border-dashed border-transparent"
+      )} />
+
+      {/* --- INFO BADGE (Top Left) --- */}
+      <div className={cn(
+        "absolute top-0 left-0 z-50 p-2 transform -translate-y-1/2 transition-opacity duration-200",
+        isRemoteSelected || "group-hover:opacity-100 opacity-0"
+      )}>
+        <div className="flex items-center gap-2 bg-foreground text-background text-[10px] font-mono py-1 px-2 rounded shadow-sm border border-border">
+          <Icon name="box" size={10} />
+          <span className="font-bold">{componentType}</span>
+          <span className="opacity-50">#{componentId.slice(0, 4)}</span>
+        </div>
+      </div>
+
+      {/* --- DATA WIRE (Bottom Right) --- */}
+      {signalId && (
+        <div className={cn(
+          "absolute bottom-0 right-0 z-50 p-2 transform translate-y-1/2 transition-opacity duration-200",
+          isRemoteSelected || "group-hover:opacity-100 opacity-0"
+        )}>
+           <div className="flex items-center gap-1.5 bg-accent text-accent-foreground text-[10px] font-mono py-1 px-2 rounded shadow-sm border border-accent/20">
+             <Icon name="activity" size={10} />
+             <span>{signalId}</span>
+          </div>
+        </div>
+      )}
+
+      {/* --- CONTENT (Frozen) --- */}
+      {/* We disable pointer events on children so buttons don't fire while Ghost is active */}
+      <div className="pointer-events-none select-none">
+        {children}
+      </div>
+    </div>
+  );
+};

package/template/src/{pages → features/onboarding/pages}/Welcome.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { 
-  PageHeader, 
   Card, 
   Button, 
   Icon, 

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

@@ -0,0 +1 @@
+export { OverviewPage } from './pages/OverviewPage';

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

@@ -0,0 +1,127 @@
+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';
+
+// Mock Data for Chart
+const revenueData = [
+  { name: 'Mon', revenue: 4000, cost: 2400 },
+  { name: 'Tue', revenue: 3000, cost: 1398 },
+  { name: 'Wed', revenue: 2000, cost: 9800 },
+  { name: 'Thu', revenue: 2780, cost: 3908 },
+  { name: 'Fri', revenue: 1890, cost: 4800 },
+  { name: 'Sat', revenue: 2390, cost: 3800 },
+  { 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 || ''}`}
+    onClick={onClick}
+  >
+    <div>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
+      <h3 className="text-2xl font-bold mt-1">{value}</h3>
+      <div className={`flex items-center text-xs mt-1 ${trend > 0 ? 'text-green-500' : 'text-red-500'}`}>
+        <Icon name={trend > 0 ? 'trending-up' : 'trending-down'} className="h-3 w-3 mr-1" />
+        {Math.abs(trend)}% from last month
+      </div>
+    </div>
+    <div className="p-3 bg-muted/50 rounded-full">
+      <Icon name={icon} className="h-5 w-5 text-primary" />
+    </div>
+  </Card>
+);
+
+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>
+        <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>
+
+      {/* 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>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};

package/template/src/{pages → features/playground/pages}/AccountingLedgerPage.tsx

@@ -8,7 +8,7 @@ import {
   // 1. Import the specific event type for cell value changes
   type CellValueChangedEvent,
 } from '@ramme-io/ui';
-import { mockLedgerData, type LedgerEntry } from '../data/mockLedger';
+import { mockLedgerData, type LedgerEntry } from '../../../data/mockLedger';
 
 // --- Custom Renderer for Variance ---
 // 2. Correctly type the component and ensure it returns a ReactNode (JSX or null)

package/template/src/{pages/prototypes → features/playground/pages}/ItemSelectorPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, PageHeader } from '@ramme-io/ui';
-import { AddItemsModal } from '../../components/AddItemsModal';
+import { AddItemsModal } from '../../../components/AddItemsModal';
 
 
 

package/template/src/{pages/settings → features/settings/pages}/BillingPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 // --- 1. Import the new generic page ---
-import GenericContentPage from '../GenericContentPage'; 
+import GenericContentPage from '../../GenericContentPage'; 
 
 // A simple page component for settings
 const BillingPage: React.FC = () => {