forge-admin 0.0.0

package/src/pages/Dashboard.tsx

@@ -0,0 +1,127 @@
+import { AdminLayout } from '@/components/AdminLayout';
+import { StatCard } from '@/components/StatCard';
+import { models, generateMockData } from '@/lib/models';
+import { Users, FileText, Package, ShoppingCart, Database, Activity } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  Users,
+  FileText,
+  Package,
+  ShoppingCart,
+};
+
+export default function Dashboard({models}) {
+  const totalRecords = models.reduce((sum, m) => sum + 10, 0); // Mock count
+  const totalFields = models.reduce((sum, m) => sum + m.fields.length, 0);
+
+  return (
+    <AdminLayout models={models}>
+      <div className="p-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-semibold">Dashboard</h1>
+          <p className="text-muted-foreground mt-1">
+            Overview of your data models and records
+          </p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+          <StatCard
+            title="Total Models"
+            value={models.length}
+            icon={<Database className="w-5 h-5" />}
+          />
+          <StatCard
+            title="Total Fields"
+            value={totalFields}
+            icon={<Activity className="w-5 h-5" />}
+          />
+          {/* <StatCard
+            title="Total Records"
+            value={totalRecords}
+            icon={<FileText className="w-5 h-5" />}
+            trend={{ value: 12, isPositive: true }}
+          />
+          <StatCard
+            title="Active Users"
+            value={7}
+            icon={<Users className="w-5 h-5" />}
+            trend={{ value: 3, isPositive: true }}
+          /> */}
+        </div>
+
+        {/* Models Grid */}
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold mb-4">Models</h2>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {models.map((model, index) => {
+            const Icon = iconMap[model.icon] || Database;
+            const mockData = generateMockData(model, 3);
+            
+            return (
+              <Link
+                key={model.name}
+                to={`/models/${model.name}`}
+                className="admin-card hover:glow-effect transition-all duration-300 group"
+                style={{ animationDelay: `${index * 100}ms` }}
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className="p-2 bg-primary/10 rounded-lg text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
+                    <Icon className="w-5 h-5" />
+                  </div>
+                  <span className="text-xs font-mono text-muted-foreground bg-secondary px-2 py-1 rounded">
+                    {model.fields.length} fields
+                  </span>
+                </div>
+
+                <h3 className="text-lg font-semibold mb-1">{model.displayName}</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  {model.name} model with {model.fields.length} defined fields
+                </p>
+
+                {/* Field Types Preview */}
+                <div className="flex flex-wrap gap-1.5">
+                  {model.fields.slice(0, 4).map((field) => (
+                    <span
+                      key={field.name}
+                      className={`model-badge field-type-${
+                        field.type === 'string' || field.type === 'text' || field.type === 'email' ? 'string' :
+                        field.type === 'number' ? 'number' :
+                        field.type === 'boolean' ? 'boolean' : 'date'
+                      }`}
+                    >
+                      {field.name}
+                    </span>
+                  ))}
+                  {model.fields.length > 4 && (
+                    <span className="model-badge bg-muted text-muted-foreground">
+                      +{model.fields.length - 4}
+                    </span>
+                  )}
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+
+        {/* Quick Actions */}
+        <div className="mt-8 p-6 admin-card bg-gradient-to-r from-primary/5 to-transparent border-primary/20">
+          <h3 className="font-semibold mb-2">Quick Start</h3>
+          <p className="text-sm text-muted-foreground mb-4">
+            Define your models in <code className="font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">src/lib/models.ts</code> to auto-generate forms and CRUD interfaces.
+          </p>
+          <Link
+            to="/schema"
+            className="inline-flex items-center text-sm text-primary hover:underline"
+          >
+            View Schema Editor →
+          </Link>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

package/src/pages/Index.tsx

@@ -0,0 +1,18 @@
+import Dashboard from './Dashboard';
+import { useEffect, useState } from 'react';
+import { ModelType } from '@/admin/types';
+
+const Index = () => {
+  const [models, setModels] = useState<ModelType[]>([]);
+  useEffect(() => {
+    fetch("/admin/schema")
+      .then(r => r.json())
+      .then(setModels)
+      .catch(err => {
+        console.error("Failed to load admin schema", err);
+      });
+  }, []);
+  return <Dashboard models={models} />;
+};
+
+export default Index;

package/src/pages/ModelPage.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { AdminLayout } from '@/components/AdminLayout';
+import { DataTable } from '@/components/DataTable';
+import { ModelForm } from '@/components/ModelForm';
+import { toast } from '@/hooks/use-toast';
+import { Database } from 'lucide-react';
+import { ModelType } from '@/admin/types';
+import { ModelDefinition } from '@/lib/models';
+
+
+export default function ModelPage() {
+  const { modelName } = useParams<{ modelName: string }>();
+  
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingRecord, setEditingRecord] = useState<Record<string, unknown> | undefined>();
+  const [models, setModels] = useState<ModelType[]>([]);
+  const [data, setData] = useState<Record<string, unknown>[]>([]);
+
+  
+  const model: ModelType = useMemo(() => {
+    if (!modelName) return null;
+    return models.find(
+      m => m.name.toLowerCase() === modelName.toLowerCase()
+    ) ?? null;
+  }, [models, modelName]);
+
+  useEffect(() => {
+    fetch("/admin/schema")
+      .then(r => r.json())
+      .then(setModels)
+      .catch(err => {
+        console.error("Failed to load admin schema", err);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!modelName) return;
+
+    fetch(`/admin/${modelName}`)
+      .then(r => r.json())
+      .then(setData)
+      .catch(console.error);
+  }, [modelName]);
+
+
+  if (!model) {
+    return (
+      <AdminLayout models={models}>
+        <div className="p-8 flex flex-col items-center justify-center min-h-[60vh]">
+          <Database className="w-16 h-16 text-muted-foreground mb-4" />
+          <h2 className="text-xl font-semibold mb-2">Model Not Found</h2>
+          <p className="text-muted-foreground">
+            The model "{modelName}" doesn't exist.
+          </p>
+        </div>
+      </AdminLayout>
+    );
+  }
+
+  const handleAdd = () => {
+    setEditingRecord(undefined);
+    setFormOpen(true);
+  };
+
+  const handleEdit = (record: Record<string, unknown>) => {
+    setEditingRecord(record);
+    setFormOpen(true);
+  };
+
+  const handleDelete = (record: Record<string, unknown>) => {
+    setData(prev => prev.filter(r => r.id !== record.id));
+    fetch(`/admin/${modelName}/${record.id}`, {
+      method: "DELETE"
+    })
+    toast({
+      title: "Record deleted",
+      description: `${model.displayName.slice(0, -1)} #${record.id} has been removed.`,
+    });
+  };
+
+  const handleSave = (formData: Record<string, unknown>) => {
+    delete formData["createdAt"]
+    if (editingRecord) {
+      setData(prev => prev.map(r => r.id === editingRecord.id ? formData : r));
+      fetch(`/admin/${modelName}/${editingRecord.id}`,{
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({...formData}),
+      })
+      toast({
+        title: "Record updated",
+        description: `${model.displayName} #${formData.id} has been updated.`,
+      });
+      
+    } else {
+      const newId = Math.max(...data.map(r => r.id as number), 0) + 1;
+      const newRecord = { ...formData, id: newId };
+      setData(prev => [newRecord, ...prev]);
+      fetch(`/admin/${modelName}`,{
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({...newRecord}),
+      })
+      toast({
+        title: "Record created",
+        description: `New ${model.displayName.toLowerCase()} has been added.`,
+      });
+    }
+  };
+
+  return (
+    <AdminLayout models={models}>
+      <div className="p-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+            <span>Models</span>
+            <span>/</span>
+            <span className="text-foreground">{model.displayName}</span>
+          </div>
+          <h1 className="text-3xl font-semibold">{model.displayName}</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage {model.displayName.toLowerCase()} records
+          </p>
+        </div>
+
+        {/* Schema Preview */}
+        <div className="admin-card mb-6 p-4">
+          <h3 className="text-sm font-medium text-muted-foreground mb-3">Model Schema</h3>
+          <div className="flex flex-wrap gap-2">
+            {model.fields.map((field) => (
+              <div
+                key={field.name}
+                className="flex items-center gap-2 bg-secondary rounded-md px-3 py-1.5"
+              >
+                <span className="font-mono text-sm">{field.name}</span>
+                <span className={`model-badge field-type-${
+                  field.type === 'string' || field.type === 'text' || field.type === 'email' ? 'string' :
+                  field.type === 'number' ? 'number' :
+                  field.type === 'boolean' ? 'boolean' : 'date'
+                }`}>
+                  {field.type}
+                </span>
+                {field.required && (
+                  <span className="text-destructive text-xs">*</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Data Table */}
+        <DataTable
+          model={model}
+          data={data}
+          onAdd={handleAdd}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
+        {/* Form Dialog */}
+        <ModelForm
+          key={modelName}
+          model={model}
+          initialData={editingRecord}
+          open={formOpen}
+          onClose={() => setFormOpen(false)}
+          onSave={handleSave}
+        />
+      </div>
+    </AdminLayout>
+  );
+}

package/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
+        <a href="/" className="text-primary underline hover:text-primary/90">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/src/pages/SchemaEditor.tsx

@@ -0,0 +1,170 @@
+import { AdminLayout } from '@/components/AdminLayout';
+import { Code, Copy, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { toast } from '@/hooks/use-toast';
+import { useEffect } from 'react';
+import { ModelType } from '@/admin/types';
+
+export default function SchemaEditor() {
+  const [copied, setCopied] = useState(false);
+  const [models, setModels] = useState<ModelType[]>([]);
+    useEffect(() => {
+      fetch("/admin/schema")
+        .then(r => r.json())
+        .then(setModels)
+        .catch(err => {
+          console.error("Failed to load admin schema", err);
+        });
+    }, []);
+
+
+  const schemaCode = `// src/lib/models.ts - Define your models here
+
+import type { FieldType, ModelDefinition } from './models';
+
+export const models: ModelDefinition[] = [
+${models.map(model => `  {
+    name: '${model.name}',
+    displayName: '${model.displayName}',
+    icon: '${model.icon}',
+    fields: [
+${model.fields.map(field => `      { name: '${field.name}', type: '${field.type}', ${field.primaryKey ? 'primaryKey: true': 'primaryKey: false'}, label: '${field.label}'${field.required ? ', required: true' : ''}${field.options ? `, options: [${field.options.map(o => `'${o}'`).join(', ')}]` : ''}${field.default !== undefined ? `, default: ${typeof field.default === 'string' ? `'${field.default}'` : field.default}` : ''} },`).join('\n')}
+    ],
+  },`).join('\n')}
+];`;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(schemaCode);
+    setCopied(true);
+    toast({
+      title: "Copied to clipboard",
+      description: "Schema code has been copied.",
+    });
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  
+
+  return (
+    <AdminLayout models={models}>
+      <div className="p-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-semibold flex items-center gap-3">
+            <Code className="w-8 h-8 text-primary" />
+            Schema Editor
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            View and edit your model definitions
+          </p>
+        </div>
+
+        {/* Info Card */}
+        <div className="admin-card mb-6 bg-gradient-to-r from-info/10 to-transparent border-info/20">
+          <h3 className="font-semibold text-info mb-2">How it works</h3>
+          <p className="text-sm text-muted-foreground">
+            Models are defined in <code className="font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">src/lib/models.ts</code>. 
+            Each model automatically generates:
+          </p>
+          <ul className="text-sm text-muted-foreground mt-2 space-y-1 list-disc list-inside">
+            <li>CRUD forms with proper field types</li>
+            <li>Data tables with sorting and filtering</li>
+            <li>Sidebar navigation entries</li>
+            <li>Validation based on field definitions</li>
+          </ul>
+        </div>
+
+        {/* Code Preview */}
+        <div className="admin-card p-0 overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-secondary/50">
+            <div className="flex items-center gap-2">
+              <div className="flex gap-1.5">
+                <span className="w-3 h-3 rounded-full bg-destructive/60" />
+                <span className="w-3 h-3 rounded-full bg-warning/60" />
+                <span className="w-3 h-3 rounded-full bg-success/60" />
+              </div>
+              <span className="text-sm text-muted-foreground font-mono ml-2">
+                models.ts
+              </span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleCopy}
+              className="gap-2 text-muted-foreground hover:text-foreground"
+            >
+              {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+              {copied ? 'Copied' : 'Copy'}
+            </Button>
+          </div>
+          <pre className="p-4 overflow-x-auto text-sm font-mono leading-relaxed scrollbar-thin">
+            <code className="text-muted-foreground">
+              {schemaCode.split('\n').map((line, i) => (
+                <div key={i} className="flex">
+                  <span className="w-8 text-right pr-4 text-muted-foreground/50 select-none">
+                    {i + 1}
+                  </span>
+                  <span className="flex-1">
+                    {line
+                      .replace(/(\/\/.*)/g, '<comment>$1</comment>')
+                      .replace(/('.*?')/g, '<string>$1</string>')
+                      .replace(/\b(true|false)\b/g, '<boolean>$1</boolean>')
+                      .replace(/\b(const|export|type)\b/g, '<keyword>$1</keyword>')
+                      .split(/<(comment|string|boolean|keyword)>(.*?)<\/\1>/g)
+                      .map((part, j) => {
+                        if (j % 3 === 1) return null;
+                        if (j % 3 === 2) {
+                          const type = line.match(/<(comment|string|boolean|keyword)>/)?.[1];
+                          const colorClass = 
+                            type === 'comment' ? 'text-muted-foreground/70 italic' :
+                            type === 'string' ? 'text-success' :
+                            type === 'boolean' ? 'text-info' :
+                            type === 'keyword' ? 'text-primary' : '';
+                          return <span key={j} className={colorClass}>{part}</span>;
+                        }
+                        return <span key={j}>{part}</span>;
+                      })
+                    }
+                  </span>
+                </div>
+              ))}
+            </code>
+          </pre>
+        </div>
+
+        {/* Field Types Reference */}
+        <div className="mt-8">
+          <h2 className="text-xl font-semibold mb-4">Field Types</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[
+              { type: 'string', desc: 'Text input field', example: 'username, title' },
+              { type: 'number', desc: 'Numeric input', example: 'price, quantity' },
+              { type: 'boolean', desc: 'Toggle switch', example: 'is_active, published' },
+              { type: 'date', desc: 'Date picker', example: 'created_at, due_date' },
+              { type: 'text', desc: 'Multiline textarea', example: 'description, content' },
+              { type: 'email', desc: 'Email input with validation', example: 'email, contact' },
+              { type: 'select', desc: 'Dropdown with options', example: 'status, role' },
+            ].map((item) => (
+              <div key={item.type} className="admin-card">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className={`model-badge field-type-${
+                    item.type === 'string' || item.type === 'text' || item.type === 'email' ? 'string' :
+                    item.type === 'number' ? 'number' :
+                    item.type === 'boolean' ? 'boolean' : 'date'
+                  }`}>
+                    {item.type}
+                  </span>
+                </div>
+                <p className="text-sm text-muted-foreground">{item.desc}</p>
+                <p className="text-xs text-muted-foreground/70 mt-1 font-mono">
+                  e.g. {item.example}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

package/src/pages/Settings.tsx

@@ -0,0 +1,166 @@
+import { AdminLayout } from '@/components/AdminLayout';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Settings as SettingsIcon, Database, Bell, Shield, Palette } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { ModelType } from '@/admin/types';
+
+export default function Settings() {
+  const [models, setModels] = useState<ModelType[]>([]);
+      useEffect(() => {
+        fetch("/admin/schema")
+          .then(r => r.json())
+          .then(setModels)
+          .catch(err => {
+            console.error("Failed to load admin schema", err);
+          });
+      }, []);
+
+  return (
+    <AdminLayout models={models}>
+      <div className="p-8 max-w-3xl">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-semibold flex items-center gap-3">
+            <SettingsIcon className="w-8 h-8 text-primary" />
+            Settings
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Configure your admin panel preferences
+          </p>
+        </div>
+
+        {/* Settings Sections */}
+        <div className="space-y-6">
+          {/* Database */}
+          <div className="admin-card">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-2 bg-primary/10 rounded-lg">
+                <Database className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <h2 className="font-semibold">Database Connection</h2>
+                <p className="text-sm text-muted-foreground">Configure your database settings</p>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="db-url">Database URL</Label>
+                <Input
+                  id="db-url"
+                  type="password"
+                  placeholder="postgresql://..."
+                  className="bg-secondary border-border font-mono"
+                  defaultValue="••••••••••••••••"
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Auto-sync Schema</Label>
+                  <p className="text-sm text-muted-foreground">Automatically sync model changes</p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </div>
+          </div>
+
+          {/* Notifications */}
+          <div className="admin-card">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-2 bg-info/10 rounded-lg">
+                <Bell className="w-5 h-5 text-info" />
+              </div>
+              <div>
+                <h2 className="font-semibold">Notifications</h2>
+                <p className="text-sm text-muted-foreground">Manage notification preferences</p>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Email Notifications</Label>
+                  <p className="text-sm text-muted-foreground">Receive updates via email</p>
+                </div>
+                <Switch />
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Record Changes</Label>
+                  <p className="text-sm text-muted-foreground">Notify on CRUD operations</p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </div>
+          </div>
+
+          {/* Security */}
+          <div className="admin-card">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-2 bg-warning/10 rounded-lg">
+                <Shield className="w-5 h-5 text-warning" />
+              </div>
+              <div>
+                <h2 className="font-semibold">Security</h2>
+                <p className="text-sm text-muted-foreground">Security and access settings</p>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Two-Factor Auth</Label>
+                  <p className="text-sm text-muted-foreground">Add extra security layer</p>
+                </div>
+                <Switch />
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Audit Logging</Label>
+                  <p className="text-sm text-muted-foreground">Track all admin actions</p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </div>
+          </div>
+
+          {/* Appearance */}
+          <div className="admin-card">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-2 bg-success/10 rounded-lg">
+                <Palette className="w-5 h-5 text-success" />
+              </div>
+              <div>
+                <h2 className="font-semibold">Appearance</h2>
+                <p className="text-sm text-muted-foreground">Customize the look and feel</p>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Compact Mode</Label>
+                  <p className="text-sm text-muted-foreground">Use smaller spacing</p>
+                </div>
+                <Switch />
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Show Record Count</Label>
+                  <p className="text-sm text-muted-foreground">Display counts in sidebar</p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+            </div>
+          </div>
+
+          {/* Save Button */}
+          <div className="flex justify-end">
+            <Button className="px-6">
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}