feat: Start implementing Phase 1

src/components/moderation/AuditTrailViewer.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight, History, Eye, Lock, Unlock, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Skeleton } from '@/components/ui/skeleton';
+import { format } from 'date-fns';
+import { supabase } from '@/lib/supabaseClient';
+import { handleError } from '@/lib/errorHandler';
+
+interface AuditLogEntry {
+  id: string;
+  action: string;
+  moderator_id: string;
+  submission_id: string | null;
+  previous_status: string | null;
+  new_status: string | null;
+  notes: string | null;
+  created_at: string;
+  is_test_data: boolean | null;
+}
+
+interface AuditTrailViewerProps {
+  submissionId: string;
+}
+
+export function AuditTrailViewer({ submissionId }: AuditTrailViewerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [auditLogs, setAuditLogs] = useState<AuditLogEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && auditLogs.length === 0) {
+      fetchAuditLogs();
+    }
+  }, [isOpen, submissionId]);
+
+  const fetchAuditLogs = async () => {
+    try {
+      setLoading(true);
+      
+      const { data, error } = await supabase
+        .from('moderation_audit_log')
+        .select('*')
+        .eq('submission_id', submissionId)
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      setAuditLogs(data || []);
+    } catch (error) {
+      handleError(error, {
+        action: 'Fetch Audit Trail',
+        metadata: { submissionId }
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getActionIcon = (action: string) => {
+    switch (action) {
+      case 'viewed':
+        return <Eye className="h-4 w-4" />;
+      case 'claimed':
+      case 'locked':
+        return <Lock className="h-4 w-4" />;
+      case 'released':
+      case 'unlocked':
+        return <Unlock className="h-4 w-4" />;
+      case 'approved':
+        return <CheckCircle className="h-4 w-4" />;
+      case 'rejected':
+        return <XCircle className="h-4 w-4" />;
+      case 'escalated':
+        return <AlertCircle className="h-4 w-4" />;
+      default:
+        return <History className="h-4 w-4" />;
+    }
+  };
+
+  const getActionColor = (action: string) => {
+    switch (action) {
+      case 'approved':
+        return 'text-green-600 dark:text-green-400';
+      case 'rejected':
+        return 'text-red-600 dark:text-red-400';
+      case 'escalated':
+        return 'text-orange-600 dark:text-orange-400';
+      case 'claimed':
+      case 'locked':
+        return 'text-blue-600 dark:text-blue-400';
+      default:
+        return 'text-muted-foreground';
+    }
+  };
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+        {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        <History className="h-4 w-4" />
+        <span>Audit Trail</span>
+        {auditLogs.length > 0 && (
+          <Badge variant="outline" className="ml-auto">
+            {auditLogs.length} action{auditLogs.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+      </CollapsibleTrigger>
+      
+      <CollapsibleContent className="mt-3">
+        <div className="bg-card rounded-lg border">
+          {loading ? (
+            <div className="p-4 space-y-3">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+            </div>
+          ) : auditLogs.length === 0 ? (
+            <div className="p-4 text-sm text-muted-foreground text-center">
+              No audit trail entries found
+            </div>
+          ) : (
+            <div className="divide-y">
+              {auditLogs.map((entry) => (
+                <div key={entry.id} className="p-3 hover:bg-muted/50 transition-colors">
+                  <div className="flex items-start gap-3">
+                    <div className={`mt-0.5 ${getActionColor(entry.action)}`}>
+                      {getActionIcon(entry.action)}
+                    </div>
+                    
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-sm font-medium capitalize">
+                          {entry.action.replace('_', ' ')}
+                        </span>
+                        <span className="text-xs text-muted-foreground font-mono">
+                          {format(new Date(entry.created_at), 'MMM d, HH:mm:ss')}
+                        </span>
+                      </div>
+                      
+                      {(entry.previous_status || entry.new_status) && (
+                        <div className="flex items-center gap-2 text-xs">
+                          {entry.previous_status && (
+                            <Badge variant="outline" className="capitalize">
+                              {entry.previous_status}
+                            </Badge>
+                          )}
+                          {entry.previous_status && entry.new_status && (
+                            <span className="text-muted-foreground">→</span>
+                          )}
+                          {entry.new_status && (
+                            <Badge variant="default" className="capitalize">
+                              {entry.new_status}
+                            </Badge>
+                          )}
+                        </div>
+                      )}
+                      
+                      {entry.notes && (
+                        <p className="text-xs text-muted-foreground bg-muted/50 p-2 rounded mt-2">
+                          {entry.notes}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

src/components/moderation/QueueItem.tsx

@@ -19,6 +19,8 @@ import { PhotoSubmissionDisplay } from './renderers/PhotoSubmissionDisplay';
 import { EntitySubmissionDisplay } from './renderers/EntitySubmissionDisplay';
 import { QueueItemContext } from './renderers/QueueItemContext';
 import { QueueItemActions } from './renderers/QueueItemActions';
+import { SubmissionMetadataPanel } from './SubmissionMetadataPanel';
+import { AuditTrailViewer } from './AuditTrailViewer';
 
 interface QueueItemProps {
   item: ModerationItem;
@@ -309,6 +311,14 @@ export const QueueItem = memo(({
           )}
         </div>
         
+        {/* Metadata and Audit Trail */}
+        {item.type === 'content_submission' && (
+          <div className="mt-6 space-y-4">
+            <SubmissionMetadataPanel item={item} />
+            <AuditTrailViewer submissionId={item.id} />
+          </div>
+        )}
+        
         <QueueItemActions
           item={item}
           isMobile={isMobile}

src/components/moderation/SubmissionItemsList.tsx

@@ -7,7 +7,9 @@ import { RichRideDisplay } from './displays/RichRideDisplay';
 import { RichCompanyDisplay } from './displays/RichCompanyDisplay';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
 import { AlertCircle, Loader2 } from 'lucide-react';
+import { format } from 'date-fns';
 import type { SubmissionItemData } from '@/types/submissions';
 import type { ParkSubmissionData, RideSubmissionData, CompanySubmissionData } from '@/types/submission-data';
 import { logger } from '@/lib/logger';
@@ -180,54 +182,102 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
     const entityData = item.item_data;
     const actionType = item.action_type || 'create';
     
+    // Show item metadata (order_index, depends_on, timestamps, test data flag)
+    const itemMetadata = (
+      <div className="flex flex-wrap items-center gap-2 mb-2 text-xs text-muted-foreground">
+        <Badge variant="outline" className="font-mono">
+          #{item.order_index ?? 0}
+        </Badge>
+        
+        {item.depends_on && (
+          <Badge variant="outline" className="text-xs">
+            Depends on: {item.depends_on.slice(0, 8)}...
+          </Badge>
+        )}
+        
+        {(item as any).is_test_data && (
+          <Badge variant="outline" className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
+            Test Data
+          </Badge>
+        )}
+        
+        {item.created_at && (
+          <span className="font-mono">
+            Created: {format(new Date(item.created_at), 'MMM d, HH:mm:ss')}
+          </span>
+        )}
+        
+        {item.updated_at && item.updated_at !== item.created_at && (
+          <span className="font-mono">
+            Updated: {format(new Date(item.updated_at), 'MMM d, HH:mm:ss')}
+          </span>
+        )}
+      </div>
+    );
+    
     // Use summary view for compact display
     if (view === 'summary') {
       return (
-        <SubmissionChangesDisplay 
+        <>
-          item={item}
+          {itemMetadata}
-          view={view}
+          <SubmissionChangesDisplay 
-          showImages={showImages}
+            item={item}
-          submissionId={submissionId}
+            view={view}
-        />
+            showImages={showImages}
+            submissionId={submissionId}
+          />
+        </>
       );
     }
     
     // Use rich displays for detailed view
     if (item.item_type === 'park' && entityData) {
       return (
-        <RichParkDisplay
+        <>
-          data={entityData as unknown as ParkSubmissionData}
+          {itemMetadata}
-          actionType={actionType}
+          <RichParkDisplay
-        />
+            data={entityData as unknown as ParkSubmissionData}
+            actionType={actionType}
+          />
+        </>
       );
     }
     
     if (item.item_type === 'ride' && entityData) {
       return (
-        <RichRideDisplay
+        <>
-          data={entityData as unknown as RideSubmissionData}
+          {itemMetadata}
-          actionType={actionType}
+          <RichRideDisplay
-        />
+            data={entityData as unknown as RideSubmissionData}
+            actionType={actionType}
+          />
+        </>
       );
     }
     
     if ((['manufacturer', 'operator', 'designer', 'property_owner'] as const).some(type => type === item.item_type) && entityData) {
       return (
-        <RichCompanyDisplay
+        <>
-          data={entityData as unknown as CompanySubmissionData}
+          {itemMetadata}
-          actionType={actionType}
+          <RichCompanyDisplay
-        />
+            data={entityData as unknown as CompanySubmissionData}
+            actionType={actionType}
+          />
+        </>
       );
     }
     
     // Fallback to SubmissionChangesDisplay
     return (
-      <SubmissionChangesDisplay 
+      <>
-        item={item}
+        {itemMetadata}
-        view={view}
+        <SubmissionChangesDisplay 
-        showImages={showImages}
+          item={item}
-        submissionId={submissionId}
+          view={view}
-      />
+          showImages={showImages}
+          submissionId={submissionId}
+        />
+      </>
     );
   };
 

src/components/moderation/SubmissionMetadataPanel.tsx

@@ -0,0 +1,214 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Flag, Clock, Edit2, Link2, TestTube } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { format } from 'date-fns';
+import type { ModerationItem } from '@/types/moderation';
+import { UserAvatar } from '@/components/ui/user-avatar';
+
+interface SubmissionMetadataPanelProps {
+  item: ModerationItem;
+}
+
+export function SubmissionMetadataPanel({ item }: SubmissionMetadataPanelProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Extract metadata from content_submissions
+  const metadata = {
+    // Workflow
+    approval_mode: (item as any).approval_mode || 'full',
+    escalated: item.escalated || false,
+    escalation_reason: (item as any).escalation_reason,
+    escalated_by: (item as any).escalated_by,
+    escalated_at: (item as any).escalated_at,
+    
+    // Review Tracking
+    first_reviewed_at: (item as any).first_reviewed_at,
+    review_count: (item as any).review_count || 0,
+    resolved_at: (item as any).resolved_at,
+    
+    // Modification Tracking
+    last_modified_at: (item as any).last_modified_at,
+    last_modified_by: (item as any).last_modified_by,
+    
+    // Relationships
+    original_submission_id: (item as any).original_submission_id,
+    
+    // Flags
+    is_test_data: (item as any).is_test_data || false,
+  };
+
+  const hasMetadata = metadata.escalated || 
+    metadata.review_count > 0 || 
+    metadata.last_modified_at || 
+    metadata.original_submission_id ||
+    metadata.is_test_data;
+
+  if (!hasMetadata) return null;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+        {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        <span>Submission Metadata</span>
+        <Badge variant="outline" className="ml-auto">
+          {metadata.review_count} review{metadata.review_count !== 1 ? 's' : ''}
+        </Badge>
+      </CollapsibleTrigger>
+      
+      <CollapsibleContent className="mt-3">
+        <div className="bg-card rounded-lg border divide-y">
+          {/* Workflow Section */}
+          {(metadata.escalated || metadata.approval_mode !== 'full') && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Flag className="h-4 w-4" />
+                Workflow
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Approval Mode:</span>
+                  <Badge variant={metadata.approval_mode === 'full' ? 'default' : 'outline'}>
+                    {metadata.approval_mode === 'full' ? 'Full Approval' : 'Partial Approval'}
+                  </Badge>
+                </div>
+                
+                {metadata.escalated && (
+                  <>
+                    <div className="flex justify-between items-start">
+                      <span className="text-muted-foreground">Escalated:</span>
+                      <Badge variant="destructive">Yes</Badge>
+                    </div>
+                    
+                    {metadata.escalation_reason && (
+                      <div className="flex flex-col gap-1">
+                        <span className="text-muted-foreground">Reason:</span>
+                        <p className="text-foreground bg-muted/50 p-2 rounded text-xs">
+                          {metadata.escalation_reason}
+                        </p>
+                      </div>
+                    )}
+                    
+                    {metadata.escalated_at && (
+                      <div className="flex justify-between items-start">
+                        <span className="text-muted-foreground">Escalated At:</span>
+                        <span className="font-mono text-xs">
+                          {format(new Date(metadata.escalated_at), 'MMM d, yyyy HH:mm:ss')}
+                        </span>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Review Tracking Section */}
+          {(metadata.first_reviewed_at || metadata.resolved_at || metadata.review_count > 0) && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Clock className="h-4 w-4" />
+                Review Tracking
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Review Count:</span>
+                  <Badge variant="outline">{metadata.review_count}</Badge>
+                </div>
+                
+                {metadata.first_reviewed_at && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">First Reviewed:</span>
+                    <span className="font-mono text-xs">
+                      {format(new Date(metadata.first_reviewed_at), 'MMM d, yyyy HH:mm:ss')}
+                    </span>
+                  </div>
+                )}
+                
+                {metadata.resolved_at && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">Resolved At:</span>
+                    <span className="font-mono text-xs">
+                      {format(new Date(metadata.resolved_at), 'MMM d, yyyy HH:mm:ss')}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Modification Tracking Section */}
+          {(metadata.last_modified_at || metadata.last_modified_by) && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Edit2 className="h-4 w-4" />
+                Modification Tracking
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                {metadata.last_modified_at && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">Last Modified:</span>
+                    <span className="font-mono text-xs">
+                      {format(new Date(metadata.last_modified_at), 'MMM d, yyyy HH:mm:ss')}
+                    </span>
+                  </div>
+                )}
+                
+                {metadata.last_modified_by && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">Modified By:</span>
+                    <Badge variant="secondary">Moderator</Badge>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Relationships Section */}
+          {metadata.original_submission_id && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Link2 className="h-4 w-4" />
+                Relationships
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Resubmission of:</span>
+                  <a 
+                    href={`#${metadata.original_submission_id}`}
+                    className="font-mono text-xs text-primary hover:underline"
+                  >
+                    {metadata.original_submission_id.slice(0, 8)}...
+                  </a>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Flags Section */}
+          {metadata.is_test_data && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <TestTube className="h-4 w-4" />
+                Flags
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Test Data:</span>
+                  <Badge variant="outline" className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
+                    Yes
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}