@lego-box/shell 1.0.5 → 1.0.6

package/src/pages/MigrationsPage.tsx

@@ -0,0 +1,1364 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import {
+  StatsCard,
+  StatusBadge,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  Button,
+  SearchInput,
+  FilterChip,
+  Pagination,
+  ConsoleLog,
+  CanDisable,
+} from '@lego-box/ui-kit';
+import { usePiralInstance } from '../context/PiralInstanceContext';
+import { useCan } from '../context/AbilityContext';
+import type { Migration, MigrationHistory } from '../migrations/types';
+
+/**
+ * Status filter options
+ */
+const STATUS_OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'applied', label: 'Applied' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'failed', label: 'Failed' },
+  { value: 'rolled_back', label: 'Rolled Back' },
+];
+
+/**
+ * Get icon color class based on status
+ */
+function getIconColorClass(status: Migration['status']) {
+  switch (status) {
+    case 'applied':
+      return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400';
+    case 'pending':
+      return 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400';
+    case 'failed':
+      return 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400';
+    case 'rolled_back':
+      return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
+    default:
+      return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
+  }
+}
+
+/**
+ * Get status type for StatusBadge component
+ */
+function getStatusType(status: Migration['status']): 'success' | 'warning' | 'error' | 'info' {
+  switch (status) {
+    case 'applied':
+      return 'success';
+    case 'pending':
+      return 'warning';
+    case 'failed':
+      return 'error';
+    case 'rolled_back':
+      return 'info';
+    default:
+      return 'info';
+  }
+}
+
+/**
+ * Format status for display
+ */
+function formatStatus(status: string): string {
+  return status.split('_').map(word => 
+    word.charAt(0).toUpperCase() + word.slice(1)
+  ).join(' ');
+}
+
+/**
+ * Get row background class based on status
+ */
+function getRowBgClass(status: Migration['status']) {
+  switch (status) {
+    case 'pending':
+      return 'bg-amber-50/30 dark:bg-amber-900/10 border-l-4 border-l-amber-400';
+    case 'failed':
+      return 'bg-red-50/30 dark:bg-red-900/10 border-l-4 border-l-red-400';
+    case 'rolled_back':
+      return 'bg-gray-50/30 dark:bg-gray-900/10 border-l-4 border-l-gray-400';
+    default:
+      return '';
+  }
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(dateString: string | null): string {
+  if (!dateString) return 'Not executed';
+  const date = new Date(dateString);
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+/**
+ * File Icon component
+ */
+const FileIcon = ({ status }: { status: Migration['status'] }) => (
+  <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${getIconColorClass(status)}`}>
+    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+    </svg>
+  </div>
+);
+
+/**
+ * Action buttons component based on status
+ */
+const MigrationActions = ({ 
+  status, 
+  onMigrate, 
+  onRollback, 
+  onRetry, 
+  onView,
+  isLoading 
+}: { 
+  status: Migration['status'];
+  onMigrate?: () => void;
+  onRollback?: () => void;
+  onRetry?: () => void;
+  onView?: () => void;
+  isLoading?: boolean;
+}) => {
+  const buttonClasses = "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+  
+  if (status === 'applied') {
+    return (
+      <div className="flex items-center justify-end gap-2">
+        <button 
+          onClick={onView}
+          className={`${buttonClasses} text-foreground bg-muted hover:bg-muted/80`}
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+          </svg>
+          View
+        </button>
+      </div>
+    );
+  }
+  
+  if (status === 'pending') {
+    return (
+      <div className="flex items-center justify-end gap-2">
+        <button 
+          onClick={onMigrate}
+          disabled={isLoading}
+          className={`${buttonClasses} text-white bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700`}
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          Migrate
+        </button>
+        <button 
+          onClick={onView}
+          className={`${buttonClasses} text-foreground bg-muted hover:bg-muted/80`}
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+          </svg>
+          View
+        </button>
+      </div>
+    );
+  }
+  
+  // Failed
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <button 
+        onClick={onRetry}
+        disabled={isLoading}
+        className={`${buttonClasses} text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700`}
+      >
+        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+        Retry
+      </button>
+      <button 
+        onClick={onView}
+        className={`${buttonClasses} text-foreground bg-muted hover:bg-muted/80`}
+      >
+        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+        </svg>
+        View
+      </button>
+    </div>
+  );
+};
+
+/**
+ * View Migration Dialog Component
+ */
+interface ViewMigrationDialogProps {
+  migration: Migration | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ViewMigrationDialog: React.FC<ViewMigrationDialogProps> = ({
+  migration,
+  isOpen,
+  onClose,
+}) => {
+  if (!migration) return null;
+
+  const modalContent = (
+    <div
+      className={`dialog-overlay flex items-center justify-center ${
+        isOpen ? 'visible' : 'invisible'
+      }`}
+    >
+      {/* Backdrop - fixed to cover full viewport */}
+      <div
+        className={`fixed inset-0 bg-black/50 transition-opacity ${
+          isOpen ? 'opacity-100' : 'opacity-0'
+        }`}
+        style={{ zIndex: -1 }}
+        onClick={onClose}
+      />
+
+      {/* Dialog */}
+      <div
+        className={`relative z-10 bg-white dark:bg-slate-800 rounded-xl shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-auto transition-all ${
+          isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
+        }`}
+      >
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-foreground">Migration Details</h2>
+            <button
+              onClick={onClose}
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-xs font-medium text-muted-foreground uppercase">
+                  Filename
+                </label>
+                <p className="text-sm font-mono text-foreground mt-1">{migration.filename}</p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-muted-foreground uppercase">
+                  Name
+                </label>
+                <p className="text-sm text-foreground mt-1">{migration.name}</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-xs font-medium text-muted-foreground uppercase">
+                  Status
+                </label>
+                <div className="mt-1">
+                  <StatusBadge status={getStatusType(migration.status)}>
+                    {formatStatus(migration.status)}
+                  </StatusBadge>
+                </div>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-muted-foreground uppercase">
+                  Timestamp
+                </label>
+                <p className="text-sm text-foreground mt-1">{migration.timestamp}</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-xs font-medium text-muted-foreground uppercase">
+                  Applied At
+                </label>
+                <p className="text-sm text-foreground mt-1">{formatDate(migration.appliedAt)}</p>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-muted-foreground uppercase">
+                  Batch
+                </label>
+                <p className="text-sm text-foreground mt-1">{migration.batch || 'N/A'}</p>
+              </div>
+            </div>
+
+            <div>
+              <label className="text-xs font-medium text-muted-foreground uppercase">
+                Checksum
+              </label>
+              <p className="text-sm font-mono text-foreground mt-1 break-all">{migration.checksum}</p>
+            </div>
+
+            {migration.errorMessage && (
+              <div>
+                <label className="text-xs font-medium text-red-500 uppercase">
+                  Error Message
+                </label>
+                <div className="mt-1 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                  <p className="text-sm text-red-600 dark:text-red-400">{migration.errorMessage}</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="mt-6 flex justify-end">
+            <Button onClick={onClose}>Close</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+};
+
+/**
+ * Rollback Confirmation Dialog Component
+ */
+interface RollbackDialogProps {
+  migration: Migration | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isLoading: boolean;
+}
+
+const RollbackDialog: React.FC<RollbackDialogProps> = ({
+  migration,
+  isOpen,
+  onClose,
+  onConfirm,
+  isLoading,
+}) => {
+  if (!migration) return null;
+
+  const modalContent = (
+    <div
+      className={`dialog-overlay flex items-center justify-center ${
+        isOpen ? 'visible' : 'invisible'
+      }`}
+    >
+      {/* Backdrop - fixed to cover full viewport */}
+      <div
+        className={`fixed inset-0 bg-black/50 transition-opacity ${
+          isOpen ? 'opacity-100' : 'opacity-0'
+        }`}
+        style={{ zIndex: -1 }}
+        onClick={onClose}
+      />
+
+      {/* Dialog */}
+      <div
+        className={`relative z-10 bg-white dark:bg-slate-800 rounded-xl shadow-xl max-w-md w-full mx-4 transition-all ${
+          isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
+        }`}
+      >
+        <div className="p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+              <svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <h2 className="text-xl font-semibold text-foreground">Confirm Rollback</h2>
+          </div>
+
+          <p className="text-muted-foreground mb-4">
+            Are you sure you want to rollback this migration? This action cannot be undone.
+          </p>
+
+          <div className="bg-muted dark:bg-slate-700/50 rounded-lg p-3 mb-6">
+            <p className="text-sm font-mono text-foreground">{migration.filename}</p>
+          </div>
+
+          <div className="flex gap-3 justify-end">
+            <Button variant="outline" onClick={onClose} disabled={isLoading}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={onConfirm} disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Rolling back...
+                </>
+              ) : (
+                'Rollback Migration'
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+};
+
+/**
+ * Virtual scroll list component for logs
+ */
+interface VirtualScrollListProps {
+  items: { text: string; type: 'command' | 'info' | 'success' | 'error' }[];
+  itemHeight: number;
+  containerHeight: number;
+  renderItem: (item: { text: string; type: 'command' | 'info' | 'success' | 'error' }, index: number) => React.ReactNode;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+}
+
+const VirtualScrollList: React.FC<VirtualScrollListProps> = ({
+  items,
+  itemHeight,
+  containerHeight,
+  renderItem,
+  onLoadMore,
+  hasMore = false,
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.floor(scrollTop / itemHeight);
+  const endIndex = Math.min(
+    items.length,
+    Math.ceil((scrollTop + containerHeight) / itemHeight)
+  );
+  const visibleItems = items.slice(startIndex, endIndex);
+  const offsetY = startIndex * itemHeight;
+
+  const handleScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const newScrollTop = e.currentTarget.scrollTop;
+    setScrollTop(newScrollTop);
+
+    // Load more when scrolling near the bottom
+    if (
+      onLoadMore &&
+      hasMore &&
+      !loadingMore &&
+      newScrollTop + containerHeight >= totalHeight - containerHeight
+    ) {
+      setLoadingMore(true);
+      onLoadMore();
+      setTimeout(() => setLoadingMore(false), 500);
+    }
+  }, [onLoadMore, hasMore, loadingMore, totalHeight, containerHeight]);
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={handleScroll}
+      style={{ height: containerHeight, overflow: 'auto' }}
+    >
+      <div style={{ height: totalHeight, position: 'relative' }}>
+        <div style={{ transform: `translateY(${offsetY}px)` }}>
+          {visibleItems.map((item, index) => renderItem(item, startIndex + index))}
+        </div>
+        {loadingMore && (
+          <div className="py-2 text-center text-muted-foreground text-sm">
+            Loading more...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Migrations Management Page
+ *
+ * Features:
+ * - Real-time migration data from PocketBase
+ * - Stats overview cards for migration counts
+ * - Tab navigation for Migrations, History, and Console Logs
+ * - Data table with migration files and status
+ * - Action buttons for each migration (Migrate, Rollback, Retry, View)
+ * - Migration history view
+ * - Console logs section at the bottom
+ */
+export function MigrationsPage() {
+  const instance = usePiralInstance();
+  const can = useCan();
+  const [activeTab, setActiveTab] = React.useState('migrations');
+  const [activeFilter, setActiveFilter] = React.useState('all');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [migrationsPage, setMigrationsPage] = React.useState(1);
+  const [migrationsPerPage, setMigrationsPerPage] = React.useState(10);
+  const [historySearchQuery, setHistorySearchQuery] = React.useState('');
+  const [historyPage, setHistoryPage] = React.useState(1);
+  const [historyPerPage, setHistoryPerPage] = React.useState(10);
+  const [migrations, setMigrations] = React.useState<Migration[]>([]);
+  const [history, setHistory] = React.useState<MigrationHistory[]>([]);
+  const [logs, setLogs] = React.useState<{text: string; type: 'command' | 'info' | 'success' | 'error'}[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [actionLoading, setActionLoading] = React.useState<string | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+  
+  // Dialog states
+  const [viewDialogOpen, setViewDialogOpen] = React.useState(false);
+  const [selectedMigration, setSelectedMigration] = React.useState<Migration | null>(null);
+  const [rollbackDialogOpen, setRollbackDialogOpen] = React.useState(false);
+  const [rollbackLoading, setRollbackLoading] = React.useState(false);
+  
+  // Log pagination state
+  const [logPage, setLogPage] = React.useState(1);
+  const [hasMoreLogs, setHasMoreLogs] = React.useState(true);
+  const LOGS_PER_PAGE = 50;
+  const sessionId = React.useMemo(() => `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, []);
+
+  // Get PocketBase instance from Piral context
+  const pb = React.useMemo(() => {
+    return (instance as any)?.root?.pocketbase;
+  }, [instance]);
+
+  // Check authentication status
+  React.useEffect(() => {
+    if (pb) {
+      setIsAuthenticated(pb.authStore.isValid);
+      
+      // Listen for auth changes
+      const unsubscribe = pb.authStore.onChange((token: string, model: any) => {
+        setIsAuthenticated(!!token);
+      });
+      
+      return () => unsubscribe();
+    }
+  }, [pb]);
+
+  // Add log entry and persist to database
+  const addLog = async (text: string, type: 'command' | 'info' | 'success' | 'error' = 'info') => {
+    const logEntry = { text, type };
+    setLogs(prev => [...prev, logEntry]);
+    
+    // Persist to database
+    if (pb && pb.authStore.isValid) {
+      try {
+        // Disable auto-cancellation for log persistence
+        await pb.collection('migration_logs').create({
+          message: text,
+          type: type,
+          timestamp: new Date().toISOString(),
+          sessionId: sessionId,
+        }, { $autoCancel: false });
+      } catch (error) {
+        console.error('Failed to persist log:', error);
+      }
+    }
+  };
+  
+  // Load logs from database with pagination
+  const loadLogsFromDatabase = React.useCallback(async (page: number = 1) => {
+    if (!pb) return;
+    
+    try {
+      const result = await pb.collection('migration_logs').getList(page, LOGS_PER_PAGE, {
+        sort: '-timestamp',
+        // Remove sessionId filter to show ALL logs from database
+      });
+      
+      const loadedLogs = result.items.map((record: any) => ({
+        text: record.message,
+        type: record.type,
+      }));
+      
+      // Show newest first (don't reverse)
+      if (page === 1) {
+        setLogs(loadedLogs);
+      } else {
+        setLogs(prev => [...prev, ...loadedLogs]);
+      }
+      
+      setHasMoreLogs(result.items.length === LOGS_PER_PAGE);
+      setLogPage(page);
+    } catch (error) {
+      console.error('Failed to load logs:', error);
+    }
+  }, [pb]);
+  
+  // Load more logs (for virtual scroll)
+  const handleLoadMoreLogs = React.useCallback(() => {
+    if (hasMoreLogs && !loading) {
+      loadLogsFromDatabase(logPage + 1);
+    }
+  }, [hasMoreLogs, loading, logPage, loadLogsFromDatabase]);
+
+  // Fetch migrations
+  const fetchMigrations = React.useCallback(async () => {
+    if (!pb) {
+      console.log('[Migrations] No PocketBase instance');
+      return;
+    }
+    
+    console.log('[Migrations] Fetching migrations...');
+    
+    try {
+      setLoading(true);
+      addLog('Fetching migrations...', 'info');
+      
+      const records = await pb.collection('migrations').getFullList({
+        sort: 'timestamp',
+      });
+      
+      console.log('[Migrations] Raw records:', records);
+      
+      const formattedMigrations: Migration[] = records.map((record: any) => ({
+        id: record.id,
+        filename: record.filename,
+        timestamp: record.timestamp.toString(),
+        name: record.name,
+        status: record.status,
+        appliedAt: record.appliedAt,
+        errorMessage: record.errorMessage,
+        checksum: record.checksum,
+        batch: record.batch,
+      }));
+      
+      console.log('[Migrations] Formatted migrations:', formattedMigrations);
+      
+      setMigrations(formattedMigrations);
+      addLog(`Found ${formattedMigrations.length} migrations`, 'success');
+    } catch (error: any) {
+      console.error('[Migrations] Error:', error);
+      addLog(`Error fetching migrations: ${error.message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  }, [pb]);
+
+  // Fetch migration history
+  const fetchHistory = React.useCallback(async () => {
+    if (!pb) return;
+    
+    try {
+      const records = await pb.collection('migrations_history').getFullList({
+        sort: '-executedAt',
+        expand: 'migrationId',
+      });
+      
+      const formattedHistory: MigrationHistory[] = records.map((record: any) => ({
+        id: record.id,
+        migrationId: record.migrationId,
+        action: record.action,
+        executedAt: record.executedAt,
+        executedBy: record.executedBy,
+        errorMessage: record.errorMessage,
+        duration: record.duration,
+      }));
+      
+      setHistory(formattedHistory);
+    } catch (error: any) {
+      addLog(`Error fetching history: ${error.message}`, 'error');
+    }
+  }, [pb]);
+
+  // Run all pending migrations
+  const handleMigrateAll = async () => {
+    if (!pb) {
+      addLog('PocketBase not available', 'error');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      addLog('> Running migrations...', 'command');
+      
+      const response = await fetch('/api/migrations/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      
+      if (response.ok) {
+        const result = await response.json();
+        addLog(`Migrations complete: ${result.applied} applied, ${result.failed} failed`, result.success ? 'success' : 'error');
+        await fetchMigrations();
+        await fetchHistory();
+      } else {
+        addLog('Failed to run migrations', 'error');
+      }
+    } catch (error: any) {
+      addLog(`Error: ${error.message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Run single migration
+  const handleMigrate = async (migrationId: string) => {
+    // For now, run all pending migrations
+    await handleMigrateAll();
+  };
+
+  // Open rollback confirmation dialog
+  const handleRollbackClick = (migration: Migration) => {
+    setSelectedMigration(migration);
+    setRollbackDialogOpen(true);
+  };
+
+  // Execute rollback
+  const handleRollbackConfirm = async () => {
+    if (!pb || !selectedMigration) return;
+
+    try {
+      setRollbackLoading(true);
+      addLog(`> Rolling back ${selectedMigration.filename}...`, 'command');
+
+      const response = await fetch('/api/migrations/rollback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ migrationId: selectedMigration.id }),
+      });
+
+      // Get response as text first to handle non-JSON responses
+      const responseText = await response.text();
+      
+      if (response.ok) {
+        try {
+          const result = JSON.parse(responseText);
+          addLog(`Rollback complete: ${result.message || 'Success'}`, 'success');
+          await fetchMigrations();
+          await fetchHistory();
+        } catch (parseError) {
+          // If JSON parsing fails but response was ok, still consider it success
+          addLog('Rollback completed successfully', 'success');
+          await fetchMigrations();
+          await fetchHistory();
+        }
+      } else {
+        // Handle error response
+        let errorMessage = 'Unknown error';
+        try {
+          const error = JSON.parse(responseText);
+          errorMessage = error.message || `HTTP ${response.status}`;
+        } catch {
+          // If not JSON, use status text or raw text
+          errorMessage = response.statusText || responseText || `HTTP ${response.status}`;
+        }
+        
+        if (response.status === 404) {
+          addLog('Rollback endpoint not found. Backend API not implemented yet.', 'error');
+        } else {
+          addLog(`Rollback failed: ${errorMessage}`, 'error');
+        }
+      }
+    } catch (error: any) {
+      addLog(`Rollback error: ${error.message}`, 'error');
+    } finally {
+      setRollbackLoading(false);
+      setRollbackDialogOpen(false);
+      setSelectedMigration(null);
+    }
+  };
+
+  // Retry failed migration
+  const handleRetry = async (migrationId: string) => {
+    await handleMigrateAll();
+  };
+
+  // Open view dialog
+  const handleViewClick = (migration: Migration) => {
+    setSelectedMigration(migration);
+    setViewDialogOpen(true);
+  };
+
+  // Clear logs
+  const handleClearLogs = () => {
+    setLogs([]);
+  };
+
+  // Copy logs
+  const handleCopyLogs = () => {
+    const logText = logs.map(log => log.text).join('\n');
+    navigator.clipboard.writeText(logText);
+    addLog('Logs copied to clipboard', 'success');
+  };
+
+  // Refresh data - only refresh the current tab
+  const handleRefresh = async () => {
+    switch (activeTab) {
+      case 'migrations':
+        await fetchMigrations();
+        break;
+      case 'history':
+        await fetchHistory();
+        break;
+      case 'logs':
+        await loadLogsFromDatabase(1);
+        break;
+    }
+    addLog('Refreshed', 'success');
+  };
+
+  // Debug: log when migrations change
+  React.useEffect(() => {
+    console.log('[Migrations] Current migrations state:', migrations);
+    console.log('[Migrations] Current history state:', history);
+    console.log('[Migrations] isAuthenticated:', isAuthenticated);
+  }, [migrations, history, isAuthenticated]);
+
+  // Track which tabs have been loaded to avoid unnecessary refetching
+  const loadedTabsRef = React.useRef<Set<string>>(new Set());
+
+  // Initial load - only fetch data for the active tab
+  React.useEffect(() => {
+    console.log('[Migrations] Initial load effect - pb:', !!pb, 'isAuthenticated:', isAuthenticated, 'activeTab:', activeTab);
+    if (!pb || !isAuthenticated) return;
+
+    // Only fetch data for the currently active tab
+    switch (activeTab) {
+      case 'migrations':
+        if (!loadedTabsRef.current.has('migrations')) {
+          fetchMigrations();
+          loadedTabsRef.current.add('migrations');
+        }
+        break;
+      case 'history':
+        if (!loadedTabsRef.current.has('history')) {
+          fetchHistory();
+          loadedTabsRef.current.add('history');
+        }
+        break;
+      case 'logs':
+        if (!loadedTabsRef.current.has('logs')) {
+          loadLogsFromDatabase(1);
+          loadedTabsRef.current.add('logs');
+        }
+        break;
+    }
+  }, [pb, isAuthenticated, activeTab, fetchMigrations, fetchHistory, loadLogsFromDatabase]);
+
+  // Stats calculations
+  const stats = React.useMemo(() => {
+    const total = migrations.length;
+    const applied = migrations.filter((m) => m.status === 'applied').length;
+    const pending = migrations.filter((m) => m.status === 'pending').length;
+    const failed = migrations.filter((m) => m.status === 'failed').length;
+    const rolledBack = migrations.filter((m) => m.status === 'rolled_back').length;
+    return { total, applied, pending, failed, rolledBack };
+  }, [migrations]);
+
+  // Filter migrations based on search and active filter
+  const filteredMigrations = React.useMemo(() => {
+    let filtered = migrations;
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (migration) =>
+          migration.filename.toLowerCase().includes(query) ||
+          migration.name.toLowerCase().includes(query)
+      );
+    }
+
+    if (activeFilter !== 'all') {
+      filtered = filtered.filter(
+        (migration) => migration.status === activeFilter
+      );
+    }
+
+    return filtered;
+  }, [migrations, searchQuery, activeFilter]);
+
+  // Client-side pagination for migrations
+  const paginatedMigrations = React.useMemo(() => {
+    const start = (migrationsPage - 1) * migrationsPerPage;
+    return filteredMigrations.slice(start, start + migrationsPerPage);
+  }, [filteredMigrations, migrationsPage, migrationsPerPage]);
+
+  const migrationsTotalPages = Math.max(1, Math.ceil(filteredMigrations.length / migrationsPerPage));
+
+  const filteredHistory = React.useMemo(() => {
+    if (!historySearchQuery.trim()) return history;
+    const q = historySearchQuery.toLowerCase();
+    return history.filter(
+      (h) =>
+        (h.executedBy || '').toLowerCase().includes(q) ||
+        (h.action || '').toLowerCase().includes(q)
+    );
+  }, [history, historySearchQuery]);
+
+  const paginatedHistory = React.useMemo(() => {
+    const start = (historyPage - 1) * historyPerPage;
+    return filteredHistory.slice(start, start + historyPerPage);
+  }, [filteredHistory, historyPage, historyPerPage]);
+
+  const historyTotalPages = Math.max(1, Math.ceil(filteredHistory.length / historyPerPage));
+
+  React.useEffect(() => {
+    setMigrationsPage(1);
+  }, [searchQuery, activeFilter]);
+
+  React.useEffect(() => {
+    setHistoryPage(1);
+  }, [historySearchQuery]);
+
+  if (!pb) {
+    return (
+      <div className="p-8 text-center">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="page-header">
+        <div className="page-header-left">
+          <h1 className="text-2xl font-bold text-foreground">Migrations</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage your PocketBase database migrations
+          </p>
+        </div>
+        <div className="page-header-right">
+          <Button 
+            variant="success" 
+            onClick={handleMigrateAll}
+            disabled={loading || stats.pending === 0}
+          >
+            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            Migrate All ({stats.pending})
+          </Button>
+          <Button variant="outline" onClick={handleRefresh} disabled={loading}>
+            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <CanDisable allowed={can('read', 'migrations')}>
+            <TabsTrigger value="migrations" badge={stats.total}>
+              <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+              </svg>
+              Migrations
+            </TabsTrigger>
+          </CanDisable>
+          <CanDisable allowed={can('read', 'migrations_history')}>
+            <TabsTrigger value="history" badge={history.length}>
+              <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              History
+            </TabsTrigger>
+          </CanDisable>
+          <CanDisable allowed={can('read', 'migration_logs')}>
+            <TabsTrigger value="logs">
+              <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              Console Logs
+            </TabsTrigger>
+          </CanDisable>
+        </TabsList>
+      </Tabs>
+
+      {/* Stats Cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem' }}>
+        <StatsCard
+          value={stats.total}
+          label="Total Migrations"
+          icon={
+            <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+            </svg>
+          }
+          className="border-l-4 border-l-blue-500"
+        />
+        <StatsCard
+          value={stats.applied}
+          label="Applied"
+          icon={
+            <svg className="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          }
+          className="border-l-4 border-l-emerald-500"
+        />
+        <StatsCard
+          value={stats.pending}
+          label="Pending"
+          icon={
+            <svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          }
+          className="border-l-4 border-l-amber-500"
+        />
+        <StatsCard
+          value={stats.failed}
+          label="Failed"
+          icon={
+            <svg className="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          }
+          className="border-l-4 border-l-red-500"
+        />
+      </div>
+
+      {/* Migrations Table Card */}
+      {activeTab === 'migrations' && (
+        <div className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+            <div className="flex-1 w-full min-w-0">
+              <SearchInput
+                placeholder="Search migrations..."
+                value={searchQuery}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                icon={
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                }
+              />
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  const headers = ['Filename', 'Name', 'Status', 'Applied At', 'Batch'];
+                  const rows = filteredMigrations.map((m) => [
+                    m.filename,
+                    m.name,
+                    m.status,
+                    m.appliedAt || 'Not executed',
+                    String(m.batch || ''),
+                  ]);
+                  const csv = [headers.join(','), ...rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(','))].join('\n');
+                  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+                  const link = document.createElement('a');
+                  link.href = URL.createObjectURL(blob);
+                  link.download = `migrations-export-${new Date().toISOString().slice(0, 10)}.csv`;
+                  link.click();
+                  URL.revokeObjectURL(link.href);
+                }}
+                className="gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                Export
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <FilterChip active={activeFilter === 'all'} count={stats.total} onClick={() => setActiveFilter('all')}>
+              All
+            </FilterChip>
+            <FilterChip active={activeFilter === 'applied'} count={stats.applied} onClick={() => setActiveFilter('applied')}>
+              Applied
+            </FilterChip>
+            <FilterChip active={activeFilter === 'pending'} count={stats.pending} onClick={() => setActiveFilter('pending')}>
+              Pending
+            </FilterChip>
+            <FilterChip active={activeFilter === 'failed'} count={stats.failed} onClick={() => setActiveFilter('failed')}>
+              Failed
+            </FilterChip>
+            <FilterChip active={activeFilter === 'rolled_back'} count={stats.rolledBack} onClick={() => setActiveFilter('rolled_back')}>
+              Rolled Back
+            </FilterChip>
+          </div>
+
+          <div className="bg-card dark:bg-slate-800/50 rounded-2xl border border-border dark:border-slate-700 overflow-hidden">
+          {/* Table */}
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-muted/50 dark:bg-slate-800">
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3">
+                    Migration File
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3 w-32">
+                    Status
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3 w-48">
+                    Last Executed
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3 w-48">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border dark:divide-slate-700">
+                {!isAuthenticated ? (
+                  <tr>
+                    <td colSpan={4} className="px-6 py-8 text-center">
+                      <div className="text-muted-foreground">
+                        <svg className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                        </svg>
+                        <p className="text-lg font-medium">Authentication Required</p>
+                        <p className="text-sm mt-1">Please log in to view migrations</p>
+                      </div>
+                    </td>
+                  </tr>
+                ) : loading && migrations.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="px-6 py-8 text-center text-muted-foreground">
+                      Loading migrations...
+                    </td>
+                  </tr>
+                ) : filteredMigrations.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="px-6 py-8 text-center text-muted-foreground">
+                      {loading ? 'Loading migrations...' : 'No migrations found'}
+                    </td>
+                  </tr>
+                ) : (
+                  paginatedMigrations.map((migration) => (
+                    <tr
+                      key={migration.id}
+                      className={`hover:bg-muted/30 dark:hover:bg-slate-800/50 transition-colors ${getRowBgClass(migration.status)}`}
+                    >
+                      <td className="px-6 py-4">
+                        <div className="flex items-center gap-3">
+                          <FileIcon status={migration.status} />
+                          <div className="flex flex-col">
+                            <span className="text-sm font-medium text-foreground dark:text-slate-200 font-mono">
+                              {migration.filename}
+                            </span>
+                            {migration.errorMessage ? (
+                              <span className="text-xs text-red-500 dark:text-red-400">
+                                {migration.errorMessage}
+                              </span>
+                            ) : (
+                              <span className="text-xs text-muted-foreground">
+                                {migration.name}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <StatusBadge status={getStatusType(migration.status)}>
+                          {formatStatus(migration.status)}
+                        </StatusBadge>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className={`text-sm ${migration.appliedAt ? 'text-muted-foreground' : 'text-muted-foreground italic'}`}>
+                          {formatDate(migration.appliedAt)}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4">
+                        <MigrationActions 
+                          status={migration.status}
+                          onMigrate={() => handleMigrate(migration.id)}
+                          onRollback={() => handleRollbackClick(migration)}
+                          onRetry={() => handleRetry(migration.id)}
+                          onView={() => handleViewClick(migration)}
+                          isLoading={actionLoading === migration.id}
+                        />
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          </div>
+
+          <Pagination
+            currentPage={migrationsPage}
+            totalPages={migrationsTotalPages}
+            totalItems={filteredMigrations.length}
+            perPage={migrationsPerPage}
+            onPageChange={setMigrationsPage}
+            onPerPageChange={(size) => { setMigrationsPerPage(size); setMigrationsPage(1); }}
+            showPageSizeSelector
+            itemsLabel="migrations"
+          />
+        </div>
+      )}
+
+      {/* History Tab */}
+      {activeTab === 'history' && (
+        <div className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+            <div className="flex-1 w-full min-w-0">
+              <SearchInput
+                placeholder="Search history..."
+                value={historySearchQuery}
+                onChange={(e) => setHistorySearchQuery(e.target.value)}
+                icon={
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                }
+              />
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  const headers = ['Action', 'Executed By', 'Timestamp', 'Duration', 'Status'];
+                  const rows = filteredHistory.map((h) => [
+                    h.action,
+                    h.executedBy || '',
+                    formatDate(h.executedAt),
+                    `${h.duration}ms`,
+                    h.errorMessage ? 'Failed' : 'Success',
+                  ]);
+                  const csv = [headers.join(','), ...rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(','))].join('\n');
+                  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+                  const link = document.createElement('a');
+                  link.href = URL.createObjectURL(blob);
+                  link.download = `migration-history-export-${new Date().toISOString().slice(0, 10)}.csv`;
+                  link.click();
+                  URL.revokeObjectURL(link.href);
+                }}
+                className="gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                Export
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <FilterChip active count={history.length} onClick={() => {}}>All History</FilterChip>
+          </div>
+          <div className="bg-card dark:bg-slate-800/50 rounded-2xl border border-border dark:border-slate-700 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-muted/50 dark:bg-slate-800">
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3">
+                    Action
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3">
+                    Executed By
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3">
+                    Timestamp
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3">
+                    Duration
+                  </th>
+                  <th className="text-left text-xs font-medium text-muted-foreground uppercase tracking-wider px-6 py-3">
+                    Status
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border dark:divide-slate-700">
+                {history.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="px-6 py-8 text-center text-muted-foreground">
+                      No history available
+                    </td>
+                  </tr>
+                ) : (
+                  paginatedHistory.map((record) => (
+                    <tr key={record.id} className="hover:bg-muted/30 dark:hover:bg-slate-800/50 transition-colors">
+                      <td className="px-6 py-4">
+                        <span className="text-sm font-medium capitalize">{record.action}</span>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className="text-sm text-muted-foreground">{record.executedBy}</span>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className="text-sm text-muted-foreground">{formatDate(record.executedAt)}</span>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className="text-sm text-muted-foreground">{record.duration}ms</span>
+                      </td>
+                      <td className="px-6 py-4">
+                        {record.errorMessage ? (
+                          <StatusBadge status="error">Failed</StatusBadge>
+                        ) : (
+                          <StatusBadge status="success">Success</StatusBadge>
+                        )}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          </div>
+          <Pagination
+            currentPage={historyPage}
+            totalPages={historyTotalPages}
+            totalItems={filteredHistory.length}
+            perPage={historyPerPage}
+            onPageChange={setHistoryPage}
+            onPerPageChange={(size) => { setHistoryPerPage(size); setHistoryPage(1); }}
+            showPageSizeSelector
+            itemsLabel="entries"
+          />
+        </div>
+      )}
+
+      {/* Console Logs Tab */}
+      {activeTab === 'logs' && (
+        <div className="bg-card dark:bg-slate-800/50 rounded-2xl border border-border dark:border-slate-700 overflow-hidden">
+          <ConsoleLog
+            logs={logs}
+            onClear={handleClearLogs}
+            onCopy={handleCopyLogs}
+          />
+        </div>
+      )}
+
+      {/* View Migration Dialog */}
+      <ViewMigrationDialog
+        migration={selectedMigration}
+        isOpen={viewDialogOpen}
+        onClose={() => {
+          setViewDialogOpen(false);
+          setSelectedMigration(null);
+        }}
+      />
+
+      {/* Rollback Confirmation Dialog */}
+      <RollbackDialog
+        migration={selectedMigration}
+        isOpen={rollbackDialogOpen}
+        onClose={() => {
+          setRollbackDialogOpen(false);
+          setSelectedMigration(null);
+        }}
+        onConfirm={handleRollbackConfirm}
+        isLoading={rollbackLoading}
+      />
+    </div>
+  );
+}