feat: Start implementing Phase 1

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}
-          view={view}
-          showImages={showImages}
-          submissionId={submissionId}
-        />
+        <>
+          {itemMetadata}
+          <SubmissionChangesDisplay 
+            item={item}
+            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}
-          actionType={actionType}
-        />
+        <>
+          {itemMetadata}
+          <RichParkDisplay
+            data={entityData as unknown as ParkSubmissionData}
+            actionType={actionType}
+          />
+        </>
       );
     }
     
     if (item.item_type === 'ride' && entityData) {
       return (
-        <RichRideDisplay
-          data={entityData as unknown as RideSubmissionData}
-          actionType={actionType}
-        />
+        <>
+          {itemMetadata}
+          <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}
-          actionType={actionType}
-        />
+        <>
+          {itemMetadata}
+          <RichCompanyDisplay
+            data={entityData as unknown as CompanySubmissionData}
+            actionType={actionType}
+          />
+        </>
       );
     }
     
     // Fallback to SubmissionChangesDisplay
     return (
-      <SubmissionChangesDisplay 
-        item={item}
-        view={view}
-        showImages={showImages}
-        submissionId={submissionId}
-      />
+      <>
+        {itemMetadata}
+        <SubmissionChangesDisplay 
+          item={item}
+          view={view}
+          showImages={showImages}
+          submissionId={submissionId}
+        />
+      </>
     );
   };