Refactor code structure and remove redundant changes

src-old/components/moderation/ItemSelectorDialog.tsx

@@ -0,0 +1,115 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Edit, CheckCircle, XCircle, Clock } from 'lucide-react';
+import type { SubmissionItemWithDeps } from '@/lib/submissionItemsService';
+
+interface ItemSelectorDialogProps {
+  items: SubmissionItemWithDeps[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelectItem: (item: SubmissionItemWithDeps) => void;
+  onBulkEdit?: () => void;
+}
+
+export function ItemSelectorDialog({ 
+  items, 
+  open, 
+  onOpenChange, 
+  onSelectItem,
+  onBulkEdit 
+}: ItemSelectorDialogProps) {
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <CheckCircle className="h-4 w-4 text-green-600" />;
+      case 'rejected':
+        return <XCircle className="h-4 w-4 text-red-600" />;
+      default:
+        return <Clock className="h-4 w-4 text-yellow-600" />;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return 'bg-green-100 text-green-800 border-green-200';
+      case 'rejected':
+        return 'bg-red-100 text-red-800 border-red-200';
+      case 'pending':
+        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Edit className="w-5 h-5" />
+            Select Item to Edit
+          </DialogTitle>
+          <DialogDescription>
+            This submission contains {items.length} items. Choose which one to edit, or edit all at once.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-3 mt-4">
+          {/* Bulk Edit Option */}
+          {onBulkEdit && items.length > 1 && (
+            <Button
+              variant="outline"
+              className="w-full justify-start h-auto py-4 border-2 border-primary/20 hover:border-primary/40"
+              onClick={onBulkEdit}
+            >
+              <Edit className="mr-3 h-5 w-5 text-primary" />
+              <div className="flex flex-col items-start">
+                <span className="font-semibold">Edit All Items ({items.length})</span>
+                <span className="text-xs text-muted-foreground">Use tabbed interface to edit multiple items</span>
+              </div>
+            </Button>
+          )}
+          
+          {/* Individual Items */}
+          {items.map((item) => (
+            <Button
+              key={item.id}
+              variant="outline"
+              className="w-full justify-start h-auto py-4 hover:bg-accent"
+              onClick={() => onSelectItem(item)}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-3">
+                  <Edit className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                  <div className="flex flex-col items-start">
+                    <span className="font-medium capitalize">
+                      {item.item_type.replace('_', ' ')}
+                    </span>
+                    {typeof item.item_data === 'object' && item.item_data !== null && !Array.isArray(item.item_data) && 'name' in item.item_data && (
+                      <span className="text-sm text-muted-foreground">
+                        {String((item.item_data as Record<string, unknown>).name)}
+                      </span>
+                    )}
+                    {item.dependencies && item.dependencies.length > 0 && (
+                      <span className="text-xs text-muted-foreground mt-1">
+                        Depends on {item.dependencies.length} item(s)
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {getStatusIcon(item.status)}
+                  <Badge variant="outline" className={getStatusColor(item.status)}>
+                    {item.status}
+                  </Badge>
+                </div>
+              </div>
+            </Button>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}