@pattern-stack/frontend-patterns 1.0.0

package/src/templates/admin/AdminCRUDTemplate.tsx

@@ -0,0 +1,630 @@
+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>
+  );
+};