Refactor code structure and remove redundant changes

src-old/components/moderation/renderers/PhotoSubmissionDisplay.tsx

@@ -0,0 +1,87 @@
+import { memo } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { PhotoGrid } from '@/components/common/PhotoGrid';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import type { PhotoSubmissionItem } from '@/types/photos';
+import type { PhotoForDisplay, ModerationItem } from '@/types/moderation';
+
+interface PhotoSubmissionDisplayProps {
+  item: ModerationItem;
+  photoItems: PhotoSubmissionItem[];
+  loading: boolean;
+  onOpenPhotos: (photos: PhotoForDisplay[], index: number) => void;
+}
+
+export const PhotoSubmissionDisplay = memo(({ 
+  item, 
+  photoItems, 
+  loading, 
+  onOpenPhotos 
+}: PhotoSubmissionDisplayProps) => {
+  return (
+    <div>
+      <div className="text-sm text-muted-foreground mb-3">
+        Photo Submission
+      </div>
+      
+      {/* Submission Title */}
+      {item.content.title && (
+        <div className="mb-3">
+          <div className="text-sm font-medium mb-1">Title:</div>
+          <p className="text-sm">{item.content.title}</p>
+        </div>
+      )}
+      
+      {/* Photos from relational table */}
+      {loading ? (
+        <div className="text-sm text-muted-foreground">Loading photos...</div>
+      ) : photoItems.length > 0 ? (
+        <div className="space-y-2">
+          <div className="text-sm font-medium flex items-center justify-between">
+            <span>Photos ({photoItems.length}):</span>
+            {import.meta.env.DEV && photoItems[0] && (
+              <span className="text-xs text-muted-foreground">
+                URL: {photoItems[0].cloudflare_image_url?.slice(0, 30)}...
+              </span>
+            )}
+          </div>
+          <PhotoGrid
+            photos={photoItems.map(photo => ({
+              id: photo.id,
+              url: photo.cloudflare_image_url,
+              filename: photo.filename || `Photo ${photo.order_index + 1}`,
+              caption: photo.caption,
+              title: photo.title,
+              date_taken: photo.date_taken,
+            }))}
+            onPhotoClick={(photos, index) => onOpenPhotos(photos as any, index)}
+          />
+        </div>
+      ) : (
+        <Alert variant="destructive" className="mt-4">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>No Photos Found</AlertTitle>
+          <AlertDescription>
+            This photo submission has no photos attached. This may be a data integrity issue.
+          </AlertDescription>
+        </Alert>
+      )}
+      
+      {/* Context Information */}
+      {item.entity_name && (
+        <div className="mt-3 pt-3 border-t text-sm">
+          <span className="text-muted-foreground">For: </span>
+          <span className="font-medium">{item.entity_name}</span>
+          {item.park_name && (
+            <>
+              <span className="text-muted-foreground"> at </span>
+              <span className="font-medium">{item.park_name}</span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+PhotoSubmissionDisplay.displayName = 'PhotoSubmissionDisplay';