@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

package/src/templates/admin/AdminDetailTemplate.tsx

@@ -0,0 +1,563 @@
+import React, { useState } from 'react';
+import { cn } from '../../atoms/utils/utils';
+import { SectionHeader } from '../../molecules/layout/SectionHeader';
+import { Card } from '../../atoms/ui/card';
+import { Button } from '../../atoms/ui/button';
+import { DataBadge } from '../../atoms/composed/DataBadge';
+import { UserAvatar } from '../../atoms/composed/UserAvatar';
+import { DataTable, type Column } from '../../atoms/composed/DataTable';
+import { 
+  ArrowLeft, 
+  Edit, 
+  Copy, 
+  ExternalLink,
+  History,
+  Activity,
+  FileText,
+  Save,
+  X
+} from 'lucide-react';
+
+export interface TabConfig {
+  /** Tab ID */
+  id: string;
+  /** Tab label */
+  label: string;
+  /** Tab icon */
+  icon?: React.ReactNode;
+  /** Tab content */
+  content: React.ReactNode;
+  /** Whether tab is disabled */
+  disabled?: boolean;
+  /** Badge text for tab */
+  badge?: string | number;
+}
+
+export interface ActionConfig {
+  /** Action ID */
+  id: string;
+  /** Action label */
+  label: string;
+  /** Action icon */
+  icon?: React.ReactNode;
+  /** Action variant */
+  variant?: 'default' | 'outline' | 'destructive' | 'secondary';
+  /** Action handler */
+  onClick: () => void;
+  /** Whether action is disabled */
+  disabled?: boolean;
+  /** Action permission required */
+  permission?: string;
+}
+
+export interface FieldSection {
+  /** Section title */
+  title: string;
+  /** Section description */
+  description?: string;
+  /** Section fields */
+  fields: DetailField[];
+  /** Section category for styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Whether section is collapsible */
+  collapsible?: boolean;
+  /** Whether section is initially collapsed */
+  defaultCollapsed?: boolean;
+}
+
+export interface DetailField {
+  /** Field key */
+  key: string;
+  /** Field label */
+  label: string;
+  /** Field type for rendering */
+  type?: 'text' | 'email' | 'phone' | 'url' | 'date' | 'datetime' | 'boolean' | 'badge' | 'avatar' | 'json' | 'custom';
+  /** Custom render function */
+  render?: (value: unknown, data: Record<string, unknown>) => React.ReactNode;
+  /** Whether field is editable inline */
+  editable?: boolean;
+  /** Field validation for editing */
+  validation?: Record<string, unknown>;
+  /** Copy to clipboard button */
+  copyable?: boolean;
+}
+
+export interface RelatedData {
+  /** Related data title */
+  title: string;
+  /** Related data description */
+  description?: string;
+  /** Related data items */
+  data: Record<string, unknown>[];
+  /** Columns for related data table */
+  columns: Column<Record<string, unknown>>[];
+  /** Actions for related data */
+  actions?: ActionConfig[];
+  /** Whether to show pagination */
+  showPagination?: boolean;
+  /** Category for styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export interface AuditEntry {
+  /** Entry ID */
+  id: string;
+  /** Action performed */
+  action: string;
+  /** User who performed action */
+  user: string;
+  /** Timestamp */
+  timestamp: Date;
+  /** Fields changed */
+  changes?: Array<{
+    field: string;
+    oldValue?: unknown;
+    newValue?: unknown;
+  }>;
+  /** Additional metadata */
+  metadata?: Record<string, unknown>;
+}
+
+export interface AdminDetailTemplateProps {
+  /** Resource title */
+  title: string;
+  /** Resource subtitle */
+  subtitle?: string;
+  /** Resource type */
+  resourceType: string;
+  /** Main resource data */
+  data: Record<string, unknown>;
+  /** Field sections to display */
+  sections: FieldSection[];
+  /** Tab configuration */
+  tabs?: TabConfig[];
+  /** Available actions */
+  actions?: ActionConfig[];
+  /** Related data sections */
+  relatedData?: RelatedData[];
+  /** Audit trail */
+  auditTrail?: AuditEntry[];
+  /** Back navigation handler */
+  onBack?: () => void;
+  /** Data update handler */
+  onUpdate?: (field: string, value: unknown) => Promise<void>;
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Category for styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Custom sidebar content */
+  sidebar?: React.ReactNode;
+  /** Whether to show audit trail */
+  showAuditTrail?: boolean;
+}
+
+export const AdminDetailTemplate: React.FC<AdminDetailTemplateProps> = ({
+  title,
+  subtitle,
+  resourceType,
+  data,
+  sections,
+  tabs = [],
+  actions = [],
+  relatedData = [],
+  auditTrail = [],
+  onBack,
+  onUpdate,
+  isLoading = false,
+  className,
+  category = 1,
+  sidebar,
+  showAuditTrail = true
+}) => {
+  const [activeTab, setActiveTab] = useState(tabs[0]?.id || 'overview');
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState<unknown>('');
+
+  const handleEdit = (field: DetailField, currentValue: unknown) => {
+    setEditingField(field.key);
+    setEditValue(currentValue);
+  };
+
+  const handleSaveEdit = async () => {
+    if (editingField && onUpdate) {
+      try {
+        await onUpdate(editingField, editValue);
+        setEditingField(null);
+        setEditValue('');
+      } catch (error) {
+        console.error('Update failed:', error);
+      }
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setEditingField(null);
+    setEditValue('');
+  };
+
+  const copyToClipboard = (value: string) => {
+    navigator.clipboard.writeText(value);
+    // You could show a toast notification here
+  };
+
+  const renderFieldValue = (field: DetailField, value: unknown) => {
+    // If currently editing this field
+    if (editingField === field.key) {
+      return (
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={String(editValue)}
+            onChange={(e) => setEditValue(e.target.value)}
+            className="flex-1 px-2 py-1 text-sm border border-input rounded"
+            autoFocus
+          />
+          <Button size="sm" onClick={handleSaveEdit}>
+            <Save className="w-3 h-3" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={handleCancelEdit}>
+            <X className="w-3 h-3" />
+          </Button>
+        </div>
+      );
+    }
+
+    // Custom render function
+    if (field.render) {
+      return field.render(value, data);
+    }
+
+    // Default rendering based on type
+    const stringValue = String(value || '');
+    let displayValue: React.ReactNode;
+    
+    switch (field.type) {
+      case 'email':
+        displayValue = value ? (
+          <a href={`mailto:${stringValue}`} className="text-category-1 hover:underline">
+            {stringValue}
+          </a>
+        ) : '';
+        break;
+      case 'phone':
+        displayValue = value ? (
+          <a href={`tel:${stringValue}`} className="text-category-2 hover:underline">
+            {stringValue}
+          </a>
+        ) : '';
+        break;
+      case 'url':
+        displayValue = value ? (
+          <a href={stringValue} target="_blank" rel="noopener noreferrer" className="text-category-3 hover:underline inline-flex items-center">
+            {stringValue} <ExternalLink className="w-3 h-3 ml-1" />
+          </a>
+        ) : '';
+        break;
+      case 'date':
+        displayValue = value ? new Date(stringValue).toLocaleDateString() : '';
+        break;
+      case 'datetime':
+        displayValue = value ? new Date(stringValue).toLocaleString() : '';
+        break;
+      case 'boolean':
+        displayValue = (
+          <DataBadge 
+            variant="status" 
+            status={value ? 'success' : 'neutral'}
+            size="sm"
+          >
+            {value ? 'Yes' : 'No'}
+          </DataBadge>
+        );
+        break;
+      case 'badge':
+        displayValue = <DataBadge variant="category" category={1} size="sm">{stringValue}</DataBadge>;
+        break;
+      case 'avatar':
+        displayValue = <UserAvatar />;
+        break;
+      case 'json':
+        displayValue = (
+          <pre className="text-xs bg-muted p-2 rounded-md overflow-auto max-w-md">
+            {JSON.stringify(value, null, 2)}
+          </pre>
+        );
+        break;
+      default:
+        displayValue = stringValue;
+        break;
+    }
+
+    return (
+      <div className="flex items-center gap-2">
+        <span>{displayValue as React.ReactNode}</span>
+        {field.copyable && value != null && (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => copyToClipboard(stringValue)}
+            className="h-6 w-6 p-0"
+          >
+            <Copy className="w-3 h-3" />
+          </Button>
+        )}
+        {field.editable && onUpdate && (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => handleEdit(field, value)}
+            className="h-6 w-6 p-0"
+          >
+            <Edit className="w-3 h-3" />
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  const renderSection = (section: FieldSection) => (
+    <Card key={section.title} className="p-6">
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold text-foreground">{section.title}</h3>
+        {section.description && (
+          <p className="text-sm text-muted-foreground mt-1">{section.description}</p>
+        )}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {section.fields.map((field) => (
+          <div key={field.key} className="space-y-1">
+            <label className="text-sm font-medium text-muted-foreground">
+              {field.label}
+            </label>
+            <div className="text-sm text-foreground">
+              {renderFieldValue(field, data[field.key])}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+
+  const renderAuditTrail = () => (
+    <Card className="p-6">
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold flex items-center">
+          <History className="w-5 h-5 mr-2" />
+          Audit Trail
+        </h3>
+      </div>
+      <div className="space-y-4">
+        {auditTrail.map((entry) => (
+          <div key={entry.id} className="flex items-start space-x-3 pb-4 border-b border-border last:border-b-0">
+            <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+              <Activity className="w-4 h-4 text-muted-foreground" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between">
+                <p className="text-sm font-medium text-foreground">
+                  {entry.action}
+                </p>
+                <span className="text-xs text-muted-foreground">
+                  {entry.timestamp.toLocaleString()}
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                by {entry.user}
+              </p>
+              {entry.changes && entry.changes.length > 0 && (
+                <div className="mt-2 space-y-1">
+                  {entry.changes.map((change, index) => (
+                    <div key={index} className="text-xs bg-muted p-2 rounded-md">
+                      <span className="font-medium">{change.field}:</span>{' '}
+                      <span className="text-category-8">{String(change.oldValue || 'null')}</span>{' '}
+                      →{' '}
+                      <span className="text-category-2">{String(change.newValue || 'null')}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+
+  const renderRelatedData = (related: RelatedData) => (
+    <Card key={related.title} className="p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">{related.title}</h3>
+          {related.description && (
+            <p className="text-sm text-muted-foreground mt-1">{related.description}</p>
+          )}
+        </div>
+        {related.actions && related.actions.length > 0 && (
+          <div className="flex gap-2">
+            {related.actions.map((action) => (
+              <Button
+                key={action.id}
+                variant={action.variant || 'outline'}
+                size="sm"
+                onClick={action.onClick}
+                disabled={action.disabled}
+              >
+                {action.icon}
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+      <DataTable
+        data={related.data}
+        columns={related.columns}
+        isLoading={isLoading}
+        hover
+      />
+    </Card>
+  );
+
+  // Build tabs
+  const allTabs = [
+    {
+      id: 'overview',
+      label: 'Overview',
+      icon: <FileText className="w-4 h-4" />,
+      content: (
+        <div className="space-y-6">
+          {sections.map(renderSection)}
+        </div>
+      ),
+    },
+    ...tabs,
+    ...(relatedData.length > 0 ? [{
+      id: 'related',
+      label: 'Related Data',
+      icon: <Activity className="w-4 h-4" />,
+      content: (
+        <div className="space-y-6">
+          {relatedData.map(renderRelatedData)}
+        </div>
+      ),
+    }] : []),
+    ...(showAuditTrail && auditTrail.length > 0 ? [{
+      id: 'audit',
+      label: 'Audit Trail',
+      icon: <History className="w-4 h-4" />,
+      badge: auditTrail.length,
+      content: renderAuditTrail(),
+    }] : []),
+  ];
+
+  return (
+    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
+      {/* Header Section */}
+      <div className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-6 py-6">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
+              {onBack && (
+                <Button
+                  variant="ghost"
+                  onClick={onBack}
+                  className="mb-4 -ml-3"
+                >
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to {resourceType}
+                </Button>
+              )}
+              <SectionHeader
+                title={title}
+                subtitle={subtitle}
+                size="lg"
+                className="text-left"
+              />
+            </div>
+            
+            {actions.length > 0 && (
+              <div className="ml-6 flex-shrink-0 flex items-center gap-2">
+                {actions.map((action) => (
+                  <Button
+                    key={action.id}
+                    variant={action.variant || 'outline'}
+                    onClick={action.onClick}
+                    disabled={action.disabled}
+                  >
+                    {action.icon}
+                    {action.label}
+                  </Button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 min-h-0 overflow-auto">
+        <div className="container mx-auto px-6 py-6">
+          <div className={cn(
+            'grid gap-6',
+            sidebar ? 'grid-cols-1 lg:grid-cols-4' : 'grid-cols-1'
+          )}>
+            
+            {/* Main Content */}
+            <div className={sidebar ? 'lg:col-span-3' : 'col-span-1'}>
+              {allTabs.length > 1 ? (
+                <div className="space-y-6">
+                  {/* Tab Navigation */}
+                  <div className="border-b border-border">
+                    <nav className="-mb-px flex space-x-8">
+                      {allTabs.map((tab) => (
+                        <button
+                          key={tab.id}
+                          onClick={() => setActiveTab(tab.id)}
+                          className={cn(
+                            'py-2 px-1 border-b-2 font-medium text-sm whitespace-nowrap',
+                            activeTab === tab.id
+                              ? `border-category-${category} text-category-${category}`
+                              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+                          )}
+                        >
+                          <div className="flex items-center gap-2">
+                            {tab.icon}
+                            {tab.label}
+                            {tab.badge && (
+                              <span className={cn(
+                                'ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
+                                `bg-category-${category}/20 text-category-${category}`
+                              )}>
+                                {tab.badge}
+                              </span>
+                            )}
+                          </div>
+                        </button>
+                      ))}
+                    </nav>
+                  </div>
+
+                  {/* Tab Content */}
+                  <div>
+                    {allTabs.find(tab => tab.id === activeTab)?.content}
+                  </div>
+                </div>
+              ) : (
+                allTabs[0]?.content
+              )}
+            </div>
+
+            {/* Sidebar */}
+            {sidebar && (
+              <div className="lg:col-span-1">
+                {sidebar}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/templates/admin/index.ts

@@ -0,0 +1,29 @@
+// Admin template exports
+export { 
+  AdminDashboardTemplate,
+  type AdminDashboardTemplateProps,
+  type MetricCard,
+  type ChartConfig,
+  type ActivityItem,
+  type AlertItem
+} from './AdminDashboardTemplate';
+
+export { 
+  AdminCRUDTemplate,
+  type AdminCRUDTemplateProps,
+  type ResourceSchema,
+  type ResourceField,
+  type CRUDPermissions,
+  type CRUDActions
+} from './AdminCRUDTemplate';
+
+export { 
+  AdminDetailTemplate,
+  type AdminDetailTemplateProps,
+  type TabConfig,
+  type ActionConfig,
+  type FieldSection,
+  type DetailField,
+  type RelatedData,
+  type AuditEntry
+} from './AdminDetailTemplate';