Add versioning system tables

src/components/versioning/VersionComparisonDialog.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { ArrowRight, Plus, Minus, Edit } from 'lucide-react';
+import { useEntityVersions } from '@/hooks/useEntityVersions';
+
+interface VersionComparisonDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  entityType: string;
+  entityId: string;
+  fromVersionId: string;
+  toVersionId: string;
+}
+
+export function VersionComparisonDialog({
+  open,
+  onOpenChange,
+  entityType,
+  entityId,
+  fromVersionId,
+  toVersionId,
+}: VersionComparisonDialogProps) {
+  const { versions, compareVersions } = useEntityVersions(entityType, entityId);
+  const [diff, setDiff] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fromVersion = versions.find(v => v.id === fromVersionId);
+  const toVersion = versions.find(v => v.id === toVersionId);
+
+  useEffect(() => {
+    const loadDiff = async () => {
+      if (open && fromVersionId && toVersionId) {
+        setLoading(true);
+        const result = await compareVersions(fromVersionId, toVersionId);
+        setDiff(result);
+        setLoading(false);
+      }
+    };
+
+    loadDiff();
+  }, [open, fromVersionId, toVersionId]);
+
+  const formatValue = (value: any): string => {
+    if (value === null || value === undefined) return 'null';
+    if (typeof value === 'boolean') return value ? 'true' : 'false';
+    if (typeof value === 'object') return JSON.stringify(value, null, 2);
+    return String(value);
+  };
+
+  const formatFieldName = (fieldName: string): string => {
+    return fieldName
+      .split('_')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>Compare Versions</DialogTitle>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground mt-2">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">Version {fromVersion?.version_number}</Badge>
+              <span>{new Date(fromVersion?.changed_at || '').toLocaleString()}</span>
+            </div>
+            <ArrowRight className="h-4 w-4" />
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">Version {toVersion?.version_number}</Badge>
+              <span>{new Date(toVersion?.changed_at || '').toLocaleString()}</span>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <ScrollArea className="h-[500px] pr-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+            </div>
+          ) : diff && Object.keys(diff).length > 0 ? (
+            <div className="space-y-4">
+              {Object.entries(diff).map(([fieldName, changes]: [string, any]) => {
+                const isAdded = changes.from === null;
+                const isRemoved = changes.to === null;
+                const isModified = changes.from !== null && changes.to !== null;
+
+                return (
+                  <div key={fieldName} className="border rounded-lg p-4 space-y-2">
+                    <div className="flex items-center gap-2">
+                      {isAdded && <Plus className="h-4 w-4 text-green-500" />}
+                      {isRemoved && <Minus className="h-4 w-4 text-red-500" />}
+                      {isModified && <Edit className="h-4 w-4 text-blue-500" />}
+                      <span className="font-medium">{formatFieldName(fieldName)}</span>
+                      <Badge
+                        variant="outline"
+                        className={
+                          isAdded
+                            ? 'bg-green-500/10 text-green-700 dark:text-green-400'
+                            : isRemoved
+                            ? 'bg-red-500/10 text-red-700 dark:text-red-400'
+                            : 'bg-blue-500/10 text-blue-700 dark:text-blue-400'
+                        }
+                      >
+                        {isAdded ? 'Added' : isRemoved ? 'Removed' : 'Modified'}
+                      </Badge>
+                    </div>
+
+                    <Separator />
+
+                    <div className="grid grid-cols-2 gap-4">
+                      {/* From value */}
+                      <div className="space-y-1">
+                        <div className="text-xs text-muted-foreground font-medium">Before</div>
+                        <div
+                          className={`p-3 rounded-md font-mono text-xs whitespace-pre-wrap ${
+                            isRemoved
+                              ? 'bg-red-500/10 text-red-700 dark:text-red-400 line-through'
+                              : 'bg-muted'
+                          }`}
+                        >
+                          {formatValue(changes.from)}
+                        </div>
+                      </div>
+
+                      {/* To value */}
+                      <div className="space-y-1">
+                        <div className="text-xs text-muted-foreground font-medium">After</div>
+                        <div
+                          className={`p-3 rounded-md font-mono text-xs whitespace-pre-wrap ${
+                            isAdded
+                              ? 'bg-green-500/10 text-green-700 dark:text-green-400 font-semibold'
+                              : isModified
+                              ? 'bg-blue-500/10 text-blue-700 dark:text-blue-400 font-semibold'
+                              : 'bg-muted'
+                          }`}
+                        >
+                          {formatValue(changes.to)}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-muted-foreground">
+              <p>No differences found between these versions</p>
+            </div>
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}