feat: Implement enhanced moderation system

2025-12-22 22:51:13 -05:00 · 2025-09-30 13:41:19 +00:00
parent 04c5ef58ff
commit 083a4af08c
8 changed files with 1140 additions and 2 deletions
--- a/src/components/moderation/ItemReviewCard.tsx
+++ b/src/components/moderation/ItemReviewCard.tsx
@@ -0,0 +1,171 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Edit, MapPin, Zap, Building2, Image, Package } from 'lucide-react';
+import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
+
+interface ItemReviewCardProps {
+  item: SubmissionItemWithDeps;
+  onEdit: () => void;
+  onStatusChange: (status: 'approved' | 'rejected') => void;
+}
+
+export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) {
+  const getItemIcon = () => {
+    switch (item.item_type) {
+      case 'park': return <MapPin className="w-4 h-4" />;
+      case 'ride': return <Zap className="w-4 h-4" />;
+      case 'manufacturer':
+      case 'operator':
+      case 'property_owner':
+      case 'designer': return <Building2 className="w-4 h-4" />;
+      case 'ride_model': return <Package className="w-4 h-4" />;
+      case 'photo': return <Image className="w-4 h-4" />;
+      default: return null;
+    }
+  };
+
+  const getStatusColor = () => {
+    switch (item.status) {
+      case 'approved': return 'default';
+      case 'rejected': return 'destructive';
+      case 'pending': return 'secondary';
+      default: return 'outline';
+    }
+  };
+
+  const renderItemPreview = () => {
+    const data = item.item_data;
+
+    switch (item.item_type) {
+      case 'park':
+        return (
+          <div className="space-y-2">
+            <h4 className="font-semibold">{data.name}</h4>
+            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
+            <div className="flex gap-2 flex-wrap">
+              {data.park_type && <Badge variant="outline">{data.park_type}</Badge>}
+              {data.status && <Badge variant="outline">{data.status}</Badge>}
+            </div>
+          </div>
+        );
+
+      case 'ride':
+        return (
+          <div className="space-y-2">
+            <h4 className="font-semibold">{data.name}</h4>
+            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
+            <div className="flex gap-2 flex-wrap">
+              {data.category && <Badge variant="outline">{data.category}</Badge>}
+              {data.status && <Badge variant="outline">{data.status}</Badge>}
+            </div>
+          </div>
+        );
+
+      case 'manufacturer':
+      case 'operator':
+      case 'property_owner':
+      case 'designer':
+        return (
+          <div className="space-y-2">
+            <h4 className="font-semibold">{data.name}</h4>
+            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
+            {data.founded_year && (
+              <Badge variant="outline">Founded {data.founded_year}</Badge>
+            )}
+          </div>
+        );
+
+      case 'ride_model':
+        return (
+          <div className="space-y-2">
+            <h4 className="font-semibold">{data.name}</h4>
+            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
+            <div className="flex gap-2 flex-wrap">
+              {data.category && <Badge variant="outline">{data.category}</Badge>}
+              {data.ride_type && <Badge variant="outline">{data.ride_type}</Badge>}
+            </div>
+          </div>
+        );
+
+      case 'photo':
+        return (
+          <div className="space-y-2">
+            <div className="grid grid-cols-3 gap-2">
+              {data.photos?.slice(0, 3).map((photo: any, idx: number) => (
+                <img
+                  key={idx}
+                  src={photo.url}
+                  alt={photo.caption || 'Submission photo'}
+                  className="w-full h-20 object-cover rounded"
+                />
+              ))}
+            </div>
+            {data.photos?.length > 3 && (
+              <p className="text-sm text-muted-foreground">
+                +{data.photos.length - 3} more photo(s)
+              </p>
+            )}
+          </div>
+        );
+
+      default:
+        return (
+          <div className="text-sm text-muted-foreground">
+            No preview available
+          </div>
+        );
+    }
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2">
+            {getItemIcon()}
+            <CardTitle className="text-base">
+              {item.item_type.replace('_', ' ').toUpperCase()}
+            </CardTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant={getStatusColor()}>
+              {item.status}
+            </Badge>
+            {item.status === 'pending' && (
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={onEdit}
+              >
+                <Edit className="w-3 h-3" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {renderItemPreview()}
+        
+        {item.depends_on && (
+          <div className="mt-3 pt-3 border-t">
+            <p className="text-xs text-muted-foreground">
+              Depends on another item in this submission
+            </p>
+          </div>
+        )}
+
+        {item.rejection_reason && (
+          <div className="mt-3 pt-3 border-t">
+            <p className="text-xs font-medium text-destructive">
+              Rejection Reason:
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              {item.rejection_reason}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}