@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

package/src/templates/admin/AdminCRUDTemplate.tsx

@@ -1,630 +0,0 @@
-import React, { useState } from 'react';
-import { cn } from '../../atoms/utils/utils';
-import { IconBadge } from '../../atoms/composed';
-import { DataTable, type Column } from '../../atoms/composed/DataTable';
-import { DataBadge } from '../../atoms/composed/DataBadge';
-import { Card } from '../../atoms/ui/card';
-import { Button } from '../../atoms/ui/button';
-import { Modal } from '../../atoms/composed/Modal';
-import { FormField } from '../../atoms/composed/FormField';
-import { EmptyState } from '../../atoms/composed/EmptyState';
-import { 
-  Plus, 
-  Download, 
-  Filter, 
-  Edit, 
-  Trash2, 
-  Eye, 
-  Upload,
-  RefreshCw
-} from 'lucide-react';
-
-export interface ResourceSchema {
-  /** Field definitions for the resource */
-  fields: ResourceField[];
-  /** Primary key field name */
-  primaryKey: string;
-  /** Display name for single resource */
-  displayName: string;
-  /** Display name for multiple resources */
-  displayNamePlural: string;
-}
-
-export interface ResourceField {
-  /** Field name/key */
-  name: string;
-  /** Display label */
-  label: string;
-  /** Field type */
-  type: 'text' | 'email' | 'number' | 'boolean' | 'date' | 'select' | 'textarea' | 'file';
-  /** Whether field is required */
-  required?: boolean;
-  /** Field validation rules */
-  validation?: Record<string, unknown>;
-  /** Options for select fields */
-  options?: Array<{ value: string; label: string }>;
-  /** Whether field is searchable */
-  searchable?: boolean;
-  /** Whether field should be shown in table */
-  showInTable?: boolean;
-  /** Column width for table display */
-  width?: number;
-  /** Custom render function for table cells */
-  render?: (value: unknown, item: Record<string, unknown>) => React.ReactNode;
-}
-
-export interface CRUDPermissions {
-  /** Can view resources */
-  view: boolean;
-  /** Can create new resources */
-  create: boolean;
-  /** Can edit existing resources */
-  edit: boolean;
-  /** Can delete resources */
-  delete: boolean;
-  /** Can export data */
-  export: boolean;
-  /** Can import data */
-  import: boolean;
-  /** Can bulk edit */
-  bulkEdit: boolean;
-}
-
-export interface CRUDActions {
-  /** Create new resource */
-  onCreate?: (data: Record<string, unknown>) => Promise<void>;
-  /** Update existing resource */
-  onUpdate?: (id: string, data: Record<string, unknown>) => Promise<void>;
-  /** Delete resource */
-  onDelete?: (id: string) => Promise<void>;
-  /** Bulk delete resources */
-  onBulkDelete?: (ids: string[]) => Promise<void>;
-  /** Export data */
-  onExport?: (format: 'csv' | 'xlsx' | 'json') => Promise<void>;
-  /** Import data */
-  onImport?: (file: File) => Promise<void>;
-  /** Refresh data */
-  onRefresh?: () => Promise<void>;
-}
-
-export interface AdminCRUDTemplateProps {
-  /** Resource schema definition */
-  schema: ResourceSchema;
-  /** Current data */
-  data: Record<string, unknown>[];
-  /** User permissions */
-  permissions: CRUDPermissions;
-  /** CRUD action handlers */
-  actions: CRUDActions;
-  /** Whether data is loading */
-  isLoading?: boolean;
-  /** Filter configuration */
-  filterConfig?: {
-    activeFilters?: Array<{ key: string; label: string; value: string }>;
-    onFilter?: () => void;
-    onClearFilters?: () => void;
-  };
-  /** Additional custom actions */
-  customActions?: Array<{
-    label: string;
-    icon?: React.ReactNode;
-    onClick: () => void;
-    variant?: 'default' | 'outline' | 'destructive';
-  }>;
-  /** Additional CSS classes */
-  className?: string;
-  /** Category for styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Custom empty state */
-  emptyState?: React.ReactNode;
-}
-
-export const AdminCRUDTemplate: React.FC<AdminCRUDTemplateProps> = ({
-  schema,
-  data,
-  permissions,
-  actions,
-  isLoading = false,
-  filterConfig,
-  customActions = [],
-  className,
-  category = 1,
-  emptyState
-}) => {
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [editingItem, setEditingItem] = useState<Record<string, unknown> | null>(null);
-  const [formData, setFormData] = useState<Record<string, unknown>>({});
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-
-  const hasData = data && data.length > 0;
-  const hasSelection = selectedItems.length > 0;
-  const activeFilterCount = filterConfig?.activeFilters?.length || 0;
-
-  // Generate table columns from schema
-  const columns: Column<Record<string, unknown>>[] = [
-    // Selection column
-    {
-      key: 'select',
-      header: (
-        <input
-          type="checkbox"
-          checked={selectedItems.length > 0 && selectedItems.length === data.length}
-          onChange={(e) => {
-            if (e.target.checked) {
-              setSelectedItems(data.map(item => String(item[schema.primaryKey])));
-            } else {
-              setSelectedItems([]);
-            }
-          }}
-          className="rounded border-input"
-        />
-      ),
-      cell: (item) => (
-        <input
-          type="checkbox"
-          checked={selectedItems.includes(String(item[schema.primaryKey]))}
-          onChange={(e) => {
-            const id = String(item[schema.primaryKey]);
-            if (e.target.checked) {
-              setSelectedItems(prev => [...prev, id]);
-            } else {
-              setSelectedItems(prev => prev.filter(existingId => existingId !== id));
-            }
-          }}
-          className="rounded border-input"
-        />
-      ),
-      sortable: false,
-      width: '50px',
-    },
-    // Data columns
-    ...schema.fields
-      .filter(field => field.showInTable !== false)
-      .map(field => {
-        // Determine column type for automatic badge rendering
-        let columnType: 'status' | 'category' | 'default' = 'default';
-        if (field.type === 'boolean' || field.name.toLowerCase().includes('status')) {
-          columnType = 'status';
-        } else if (field.name.toLowerCase().includes('category')) {
-          columnType = 'category';
-        }
-
-        return {
-          key: field.name,
-          header: field.label,
-          type: columnType,
-          cell: field.render ? (item: Record<string, unknown>) => field.render!(item[field.name], item) : undefined,
-          sortable: true,
-          width: field.width ? `${field.width}px` : undefined,
-        };
-      }),
-    // Actions column
-    {
-      key: 'actions',
-      header: 'Actions',
-      cell: (item) => (
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleView(item);
-            }}
-            tooltip="View details"
-          >
-            <Eye className="w-4 h-4" />
-          </Button>
-          {permissions.edit && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleEdit(item);
-              }}
-              tooltip="Edit"
-            >
-              <Edit className="w-4 h-4" />
-            </Button>
-          )}
-          {permissions.delete && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleDelete(String(item[schema.primaryKey]));
-              }}
-              tooltip="Delete"
-            >
-              <Trash2 className="w-4 h-4" />
-            </Button>
-          )}
-        </div>
-      ),
-      sortable: false,
-      width: '120px',
-    },
-  ];
-
-  const handleCreate = () => {
-    setFormData({});
-    setShowCreateModal(true);
-  };
-
-  const handleEdit = (item: Record<string, unknown>) => {
-    setEditingItem(item);
-    setFormData(item);
-    setShowEditModal(true);
-  };
-
-  const handleView = (item: Record<string, unknown>) => {
-    // Navigate to detail view - this would be handled by the parent component
-    console.log('View item:', item);
-  };
-
-  const handleDelete = (id: string) => {
-    setDeletingId(id);
-    setShowDeleteConfirm(true);
-  };
-
-  const handleBulkDelete = () => {
-    if (actions.onBulkDelete) {
-      actions.onBulkDelete(selectedItems);
-      setSelectedItems([]);
-    }
-  };
-
-  const confirmDelete = async () => {
-    if (deletingId && actions.onDelete) {
-      await actions.onDelete(deletingId);
-      setShowDeleteConfirm(false);
-      setDeletingId(null);
-    }
-  };
-
-  const handleSubmit = async (isEdit: boolean) => {
-    try {
-      if (isEdit && editingItem && actions.onUpdate) {
-        await actions.onUpdate(String(editingItem[schema.primaryKey]), formData);
-        setShowEditModal(false);
-      } else if (!isEdit && actions.onCreate) {
-        await actions.onCreate(formData);
-        setShowCreateModal(false);
-      }
-      setFormData({});
-      setEditingItem(null);
-    } catch (error) {
-      console.error('Form submission error:', error);
-    }
-  };
-
-  const renderFormField = (field: ResourceField) => {
-    const value = formData[field.name];
-    
-    return (
-      <FormField
-        key={field.name}
-        label={field.label}
-        required={field.required}
-        error={undefined} // Add validation error handling here
-      >
-        {field.type === 'select' ? (
-          <select
-            value={String(value || '')}
-            onChange={(e) => setFormData(prev => ({ ...prev, [field.name]: e.target.value }))}
-            className="w-full px-3 py-2 border border-input rounded-md"
-          >
-            <option value="">Select {field.label}</option>
-            {field.options?.map(option => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        ) : field.type === 'textarea' ? (
-          <textarea
-            value={String(value || '')}
-            onChange={(e) => setFormData(prev => ({ ...prev, [field.name]: e.target.value }))}
-            className="w-full px-3 py-2 border border-input rounded-md"
-            rows={3}
-          />
-        ) : field.type === 'boolean' ? (
-          <input
-            type="checkbox"
-            checked={Boolean(value)}
-            onChange={(e) => setFormData(prev => ({ ...prev, [field.name]: e.target.checked }))}
-            className="rounded border-input"
-          />
-        ) : (
-          <input
-            type={field.type === 'email' ? 'email' : field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
-            value={String(value || '')}
-            onChange={(e) => setFormData(prev => ({ ...prev, [field.name]: e.target.value }))}
-            className="w-full px-3 py-2 border border-input rounded-md"
-          />
-        )}
-      </FormField>
-    );
-  };
-
-  return (
-    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
-      {/* Header Section */}
-      <div className="bg-gradient-to-br from-muted/50 via-muted/30 to-background border-b border-border/50">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <IconBadge 
-                variant="category" 
-                category={category} 
-                size="lg" 
-                icon={<Plus className="w-5 h-5" />}
-              />
-              <div>
-                <h1 className="text-4xl font-bold text-foreground">{schema.displayNamePlural}</h1>
-                <p className="text-lg text-muted-foreground mt-2">
-                  Manage {schema.displayNamePlural.toLowerCase()} with comprehensive CRUD operations
-                </p>
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-2">
-              {actions.onRefresh && (
-                <Button
-                  variant="outline"
-                  onClick={actions.onRefresh}
-                  disabled={isLoading}
-                >
-                  <RefreshCw className={cn("w-4 h-4 mr-2", isLoading && "animate-spin")} />
-                  Refresh
-                </Button>
-              )}
-              
-              {permissions.create && (
-                <Button
-                  onClick={handleCreate}
-                  variant="default"
-                >
-                  <Plus className="w-4 h-4 mr-2" />
-                  Create {schema.displayName}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Controls Section */}
-      <div className="flex-shrink-0 border-b border-border bg-muted/30">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4">
-          <div className="flex items-center justify-between">
-            {/* Left side - Filters */}
-            <div className="flex items-center gap-4">
-              {filterConfig && (
-                <Button
-                  variant="outline"
-                  onClick={filterConfig.onFilter}
-                  className="relative"
-                >
-                  <Filter className="w-4 h-4 mr-2" />
-                  Filters
-                  {activeFilterCount > 0 && (
-                    <span className="absolute -top-2 -right-2 min-w-5 h-5 rounded-full text-xs bg-destructive text-destructive-foreground flex items-center justify-center">
-                      {activeFilterCount}
-                    </span>
-                  )}
-                </Button>
-              )}
-
-              {/* Active Filters */}
-              {filterConfig?.activeFilters && filterConfig.activeFilters.length > 0 && (
-                <div className="flex items-center gap-2">
-                  {filterConfig.activeFilters.map((filter, index) => (
-                    <DataBadge key={index} variant="category" category={category} size="sm">
-                      {filter.label}: {filter.value}
-                    </DataBadge>
-                  ))}
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={filterConfig.onClearFilters}
-                  >
-                    Clear all
-                  </Button>
-                </div>
-              )}
-            </div>
-
-            {/* Right side - Actions */}
-            <div className="flex items-center gap-2">
-              {/* Bulk actions */}
-              {hasSelection && (
-                <div className="flex items-center gap-2 mr-4">
-                  <span className="text-sm text-muted-foreground">
-                    {selectedItems.length} selected
-                  </span>
-                  {permissions.delete && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={handleBulkDelete}
-                    >
-                      <Trash2 className="w-4 h-4 mr-2" />
-                      Delete
-                    </Button>
-                  )}
-                </div>
-              )}
-
-              {/* Export/Import */}
-              {permissions.export && (
-                <Button
-                  variant="outline"
-                  onClick={() => actions.onExport?.('csv')}
-                >
-                  <Download className="w-4 h-4 mr-2" />
-                  Export
-                </Button>
-              )}
-
-              {permissions.import && (
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    const input = document.createElement('input');
-                    input.type = 'file';
-                    input.accept = '.csv,.xlsx,.json';
-                    input.onchange = (e) => {
-                      const file = (e.target as HTMLInputElement).files?.[0];
-                      if (file && actions.onImport) {
-                        actions.onImport(file);
-                      }
-                    };
-                    input.click();
-                  }}
-                >
-                  <Upload className="w-4 h-4 mr-2" />
-                  Import
-                </Button>
-              )}
-
-              {/* Custom Actions */}
-              {customActions.map((action, index) => (
-                <Button
-                  key={index}
-                  variant={action.variant || 'outline'}
-                  onClick={action.onClick}
-                >
-                  {action.icon}
-                  {action.label}
-                </Button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 min-h-0 overflow-auto">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
-          {hasData ? (
-            <Card className="p-6" category={category}>
-              <DataTable
-                data={data}
-                columns={columns}
-                searchPlaceholder={`Search ${schema.displayNamePlural.toLowerCase()}...`}
-                isLoading={isLoading}
-                hover={true}
-                showSearch={true}
-                showPagination={true}
-                pageSize={10}
-                onRowClick={permissions.view ? handleView : undefined}
-              />
-            </Card>
-          ) : (
-            <div className="flex items-center justify-center min-h-96">
-              {emptyState || (
-                <EmptyState
-                  title={`No ${schema.displayNamePlural.toLowerCase()} found`}
-                  description={`Get started by creating your first ${schema.displayName.toLowerCase()}.`}
-                  action={
-                    permissions.create ? {
-                      label: `Create ${schema.displayName}`,
-                      onClick: handleCreate
-                    } : undefined
-                  }
-                />
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Create Modal */}
-      <Modal
-        isOpen={showCreateModal}
-        onClose={() => setShowCreateModal(false)}
-        title={`Create ${schema.displayName}`}
-        size="lg"
-      >
-        <div className="space-y-4">
-          {schema.fields.map(renderFormField)}
-          
-          <div className="flex justify-end gap-2 pt-4">
-            <Button
-              variant="outline"
-              onClick={() => setShowCreateModal(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={() => handleSubmit(false)}
-              variant="default"
-            >
-              Create
-            </Button>
-          </div>
-        </div>
-      </Modal>
-
-      {/* Edit Modal */}
-      <Modal
-        isOpen={showEditModal}
-        onClose={() => setShowEditModal(false)}
-        title={`Edit ${schema.displayName}`}
-        size="lg"
-      >
-        <div className="space-y-4">
-          {schema.fields.map(renderFormField)}
-          
-          <div className="flex justify-end gap-2 pt-4">
-            <Button
-              variant="outline"
-              onClick={() => setShowEditModal(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={() => handleSubmit(true)}
-              variant="default"
-            >
-              Update
-            </Button>
-          </div>
-        </div>
-      </Modal>
-
-      {/* Delete Confirmation Modal */}
-      <Modal
-        isOpen={showDeleteConfirm}
-        onClose={() => setShowDeleteConfirm(false)}
-        title="Confirm Delete"
-        size="sm"
-      >
-        <div className="space-y-4">
-          <p>Are you sure you want to delete this {schema.displayName.toLowerCase()}? This action cannot be undone.</p>
-          
-          <div className="flex justify-end gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setShowDeleteConfirm(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={confirmDelete}
-            >
-              Delete
-            </Button>
-          </div>
-        </div>
-      </Modal>
-    </div>
-  );
-};