forge-admin 0.0.0

package/src/components/AdminSidebar.tsx

@@ -0,0 +1,102 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import { Database, LayoutDashboard, Users, FileText, Package, ShoppingCart, Settings, Code } from 'lucide-react';
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  Users,
+  FileText,
+  Package,
+  ShoppingCart,
+};
+
+export function AdminSidebar({models}) {
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+  const isModelActive = (name: string) => location.pathname.startsWith(`/models/${name}`);
+
+  return (
+    <aside className="w-64 min-h-screen bg-sidebar border-r border-sidebar-border flex flex-col">
+      {/* Logo */}
+      <div className="p-4 border-b border-sidebar-border">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <Database className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="font-semibold text-foreground">DataForge</h1>
+            <p className="text-xs text-muted-foreground">ORM Admin Panel</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-3 space-y-1 scrollbar-thin overflow-y-auto">
+        <NavLink
+          to="/"
+          className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
+            isActive('/') 
+              ? 'bg-sidebar-accent text-primary font-medium' 
+              : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
+          }`}
+        >
+          <LayoutDashboard className="w-4 h-4" />
+          Dashboard
+        </NavLink>
+
+        <NavLink
+          to="/schema"
+          className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
+            isActive('/schema') 
+              ? 'bg-sidebar-accent text-primary font-medium' 
+              : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
+          }`}
+        >
+          <Code className="w-4 h-4" />
+          Schema Editor
+        </NavLink>
+
+        <div className="pt-4 pb-2">
+          <span className="px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            Models
+          </span>
+        </div>
+
+        {models.map((model) => {
+          const Icon = iconMap[model.icon] || Database;
+          return (
+            <NavLink
+              key={model.name}
+              to={`/models/${model.name}`}
+              className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
+                isModelActive(model.name)
+                  ? 'bg-sidebar-accent text-primary font-medium'
+                  : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+              {model.displayName}
+              <span className="ml-auto text-xs text-muted-foreground font-mono">
+                {model.fields.length}
+              </span>
+            </NavLink>
+          );
+        })}
+      </nav>
+
+      {/* Footer */}
+      <div className="p-3 border-t border-sidebar-border">
+        <NavLink
+          to="/settings"
+          className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
+            isActive('/settings')
+              ? 'bg-sidebar-accent text-primary font-medium'
+              : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
+          }`}
+        >
+          <Settings className="w-4 h-4" />
+          Settings
+        </NavLink>
+      </div>
+    </aside>
+  );
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import { ModelDefinition } from '@/lib/models';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Edit2, Trash2, Search, Plus } from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { ModelType } from '@/admin/types';
+
+interface DataTableProps {
+  model: ModelType;
+  data: Record<string, unknown>[];
+  onEdit?: (record: Record<string, unknown>) => void;
+  onDelete?: (record: Record<string, unknown>) => void;
+  onAdd?: () => void;
+}
+
+export function DataTable({ model, data, onEdit, onDelete, onAdd }: DataTableProps) {
+  const [search, setSearch] = useState('');
+  const [sortField, setSortField] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+
+  const filteredData = data.filter(record => {
+    if (!search) return true;
+    return Object.values(record).some(val => 
+      String(val).toLowerCase().includes(search.toLowerCase())
+    );
+  });
+
+  const sortedData = sortField 
+    ? [...filteredData].sort((a, b) => {
+        const aVal = a[sortField];
+        const bVal = b[sortField];
+        if (aVal === bVal) return 0;
+        const comparison = aVal! < bVal! ? -1 : 1;
+        return sortDir === 'asc' ? comparison : -comparison;
+      })
+    : filteredData;
+
+  const handleSort = (field: string) => {
+    if (sortField === field) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortDir('asc');
+    }
+  };
+
+  const renderCellValue = (value: unknown, fieldType: string) => {
+    if (value === null || value === undefined) {
+      return <span className="text-muted-foreground">—</span>;
+    }
+
+    if (typeof value === 'boolean') {
+      return (
+        <Badge variant={value ? 'default' : 'secondary'} className={value ? 'bg-success text-success-foreground' : ''}>
+          {value ? 'Yes' : 'No'}
+        </Badge>
+      );
+    }
+
+    if (fieldType === 'select') {
+      return (
+        <Badge variant="outline" className="font-mono text-xs">
+          {String(value)}
+        </Badge>
+      );
+    }
+
+    return String(value);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search records..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9 bg-secondary border-border"
+          />
+        </div>
+        <Button onClick={onAdd} className="gap-2">
+          <Plus className="w-4 h-4" />
+          Add {model.displayName}
+        </Button>
+      </div>
+
+      <div className="admin-card p-0 overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="border-border hover:bg-transparent">
+              {model.fields.map((field) => (
+                <TableHead
+                  key={field.name}
+                  onClick={() => handleSort(field.name)}
+                  className="cursor-pointer hover:text-foreground transition-colors"
+                >
+                  <span className="flex items-center gap-1">
+                    {field.label}
+                    {sortField === field.name && (
+                      <span className="text-primary">
+                        {sortDir === 'asc' ? '↑' : '↓'}
+                      </span>
+                    )}
+                  </span>
+                </TableHead>
+              ))}
+              <TableHead className="w-24">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedData.map((record, idx) => (
+              <TableRow key={idx} className="border-border hover:bg-secondary/50">
+                {model.fields.map((field) => (
+                  <TableCell key={field.name} className="font-mono text-sm">
+                    {renderCellValue(record[field.name], field.type)}
+                  </TableCell>
+                ))}
+                <TableCell>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                      onClick={() => onEdit?.(record)}
+                    >
+                      <Edit2 className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                      onClick={() => onDelete?.(record)}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+
+        {sortedData.length === 0 && (
+          <div className="p-8 text-center text-muted-foreground">
+            No records found
+          </div>
+        )}
+      </div>
+
+      <div className="text-sm text-muted-foreground">
+        Showing {sortedData.length} of {data.length} records
+      </div>
+    </div>
+  );
+}

package/src/components/ModelForm.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Save, X } from 'lucide-react';
+import { FieldMeta, ModelType } from '@/admin/types';
+
+interface ModelFormProps {
+  model: ModelType;
+  initialData?: Record<string, unknown>;
+  open: boolean;
+  onClose: () => void;
+  onSave: (data: Record<string, unknown>) => void;
+}
+
+export function ModelForm({ model, initialData, open, onClose, onSave }: ModelFormProps) {
+  const [formData, setFormData] = useState<Record<string, unknown>>(
+    initialData || model.fields.reduce((acc, field) => {
+      acc[field.name] = field.default ?? (field.type === 'boolean' ? false : '');
+      return acc;
+    }, {} as Record<string, unknown>)
+  );
+
+  const handleChange = (field: string, value: unknown) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+    onClose();
+  };
+
+ useEffect(() => {
+  if (!open) return;
+  if (!model) return;
+
+  if (initialData) {
+    setFormData(initialData);
+    return;
+  }
+
+  const emptyData: Record<string, unknown> = {};
+  for (const field of model.fields) {
+    if (field.type === "primary") continue;
+
+    if (field.default !== undefined) {
+      emptyData[field.name] = field.default;
+    } else if (field.type === "boolean") {
+      emptyData[field.name] = false;
+    } else {
+      emptyData[field.name] = "";
+    }
+  }
+
+  setFormData(emptyData);
+}, [model, initialData, open]); // 🔑 open is REQUIRED
+
+
+  const renderField = (field: FieldMeta) => {
+    const value = formData[field.name];
+    switch (field.type) {
+      case 'boolean':
+        return (
+          <div className="flex items-center justify-between">
+            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
+              {field.label}
+            </Label>
+            <Switch
+              id={field.name}
+              checked={value as boolean}
+              onCheckedChange={(checked) => handleChange(field.name, checked)}
+            />
+          </div>
+        );
+
+      case 'text':
+        return (
+          <div className="space-y-2">
+            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
+              {field.label}
+              {field.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Textarea
+              id={field.name}
+              value={value as string}
+              onChange={(e) => handleChange(field.name, e.target.value)}
+              className="bg-secondary border-border min-h-[100px]"
+              required={field.required}
+            />
+          </div>
+        );
+
+      case 'select':
+        return (
+          <div className="space-y-2">
+            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
+              {field.label}
+              {field.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Select
+              value={value as string}
+              onValueChange={(val) => handleChange(field.name, val)}
+            >
+              <SelectTrigger className="bg-secondary border-border">
+                <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+              </SelectTrigger>
+              <SelectContent>
+                {field.options?.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case 'number':
+        return (
+          <div className="space-y-2">
+            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
+              {field.label}
+              {field.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              id={field.name}
+              type="number"
+              value={value as number}
+              onChange={(e) => handleChange(field.name, Number(e.target.value))}
+              className="bg-secondary border-border font-mono"
+              required={field.required}
+            />
+          </div>
+        );
+
+      case 'datetime':
+        return (
+          <div className="space-y-2">
+            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
+              {field.label}
+              {field.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              id={field.name}
+              type="date"
+              value={value as string}
+              onChange={(e) => handleChange(field.name, e.target.value)}
+              className="bg-secondary border-border font-mono"
+              required={field.required}
+            />
+          </div>
+        );
+
+      default:
+        return (
+          <div className="space-y-2">
+            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
+              {field.label}
+              {field.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              id={field.name}
+              type={field.type === 'email' ? 'email' : 'text'}
+              value={value as string}
+              onChange={(e) => handleChange(field.name, e.target.value)}
+              className="bg-secondary border-border"
+              required={field.required}
+              maxLength={field.maxLength}
+            />
+          </div>
+        );
+    }
+  };
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="bg-card border-border max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {initialData ? 'Edit' : 'Add'} {model.displayName}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {model.fields.filter(x=>x.options?.autoNowAdd !== true && !x.readonly).filter(x=>!x.primaryKey).map((field) => (
+            <div key={field.name}>
+              {renderField(field)}
+            </div>
+          ))}
+
+          <DialogFooter className="gap-2">
+            <Button type="button" variant="outline" onClick={onClose} className="gap-2">
+              <X className="w-4 h-4" />
+              Cancel
+            </Button>
+            <Button type="submit" className="gap-2">
+              <Save className="w-4 h-4" />
+              Save
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/NavLink.tsx

@@ -0,0 +1,28 @@
+import { NavLink as RouterNavLink, NavLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={to}
+        className={({ isActive, isPending }) =>
+          cn(className, isActive && activeClassName, isPending && pendingClassName)
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+NavLink.displayName = "NavLink";
+
+export { NavLink };

package/src/components/StatCard.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  icon: ReactNode;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+}
+
+export function StatCard({ title, value, icon, trend }: StatCardProps) {
+  return (
+    <div className="stat-card animate-fade-in">
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="text-sm text-muted-foreground">{title}</p>
+          <p className="text-2xl font-semibold mt-1">{value}</p>
+          {trend && (
+            <p className={`text-xs mt-2 ${trend.isPositive ? 'text-success' : 'text-destructive'}`}>
+              {trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}% from last week
+            </p>
+          )}
+        </div>
+        <div className="p-2 bg-primary/10 rounded-lg text-primary">
+          {icon}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };