feat: Implement enhanced moderation system

2025-12-24 14:31:22 -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/DependencyVisualizer.tsx
+++ b/src/components/moderation/DependencyVisualizer.tsx
@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowDown, AlertCircle } from 'lucide-react';
+import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+interface DependencyVisualizerProps {
+  items: SubmissionItemWithDeps[];
+  selectedIds: Set<string>;
+}
+
+export function DependencyVisualizer({ items, selectedIds }: DependencyVisualizerProps) {
+  const dependencyLevels = useMemo(() => {
+    const levels: SubmissionItemWithDeps[][] = [];
+    const visited = new Set<string>();
+
+    const getRootItems = () => items.filter(item => !item.depends_on);
+    
+    const addLevel = (currentItems: SubmissionItemWithDeps[]) => {
+      if (currentItems.length === 0) return;
+      
+      const nextLevel: SubmissionItemWithDeps[] = [];
+      currentItems.forEach(item => {
+        if (!visited.has(item.id)) {
+          visited.add(item.id);
+          if (item.dependents) {
+            nextLevel.push(...item.dependents);
+          }
+        }
+      });
+
+      levels.push(currentItems);
+      addLevel(nextLevel);
+    };
+
+    addLevel(getRootItems());
+    return levels;
+  }, [items]);
+
+  const hasCircularDependency = items.length > 0 && dependencyLevels.flat().length !== items.length;
+
+  return (
+    <div className="space-y-6">
+      {hasCircularDependency && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            Circular dependency detected! This submission needs admin review.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {dependencyLevels.length === 0 && (
+        <Alert>
+          <AlertDescription>
+            No dependencies found in this submission
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {dependencyLevels.map((level, levelIdx) => (
+        <div key={levelIdx} className="space-y-3">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium text-muted-foreground">
+              Level {levelIdx + 1}
+            </h4>
+            <div className="flex-1 h-px bg-border" />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {level.map((item) => (
+              <Card 
+                key={item.id}
+                className={`${
+                  selectedIds.has(item.id) 
+                    ? 'ring-2 ring-primary' 
+                    : ''
+                }`}
+              >
+                <CardHeader className="pb-2">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-sm">
+                      {item.item_type.replace('_', ' ').toUpperCase()}
+                    </CardTitle>
+                    <Badge variant={
+                      item.status === 'approved' ? 'default' :
+                      item.status === 'rejected' ? 'destructive' :
+                      'secondary'
+                    }>
+                      {item.status}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm font-medium">
+                    {item.item_data.name || 'Unnamed'}
+                  </p>
+                  {item.dependents && item.dependents.length > 0 && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Has {item.dependents.length} dependent(s)
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {levelIdx < dependencyLevels.length - 1 && (
+            <div className="flex justify-center py-2">
+              <ArrowDown className="w-5 h-5 text-muted-foreground" />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}