testing changes with virtual file cleanup

src/components/moderation/DetailedViewCollapsible.tsx

@@ -0,0 +1,54 @@
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface DetailedViewCollapsibleProps {
+  isCollapsed: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Collapsible wrapper for detailed field-by-field view sections
+ * Provides expand/collapse functionality with visual indicators
+ */
+export function DetailedViewCollapsible({
+  isCollapsed,
+  onToggle,
+  children,
+  className
+}: DetailedViewCollapsibleProps) {
+  return (
+    <Collapsible open={!isCollapsed} onOpenChange={() => onToggle()}>
+      <div className={cn("mt-6 pt-6 border-t", className)}>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full flex items-center justify-between hover:bg-muted/50 p-2 h-auto"
+          >
+            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+              All Fields (Detailed View)
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground normal-case font-normal">
+                {isCollapsed ? 'Show' : 'Hide'}
+              </span>
+              {isCollapsed ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronUp className="h-4 w-4 text-muted-foreground" />
+              )}
+            </div>
+          </Button>
+        </CollapsibleTrigger>
+        
+        <CollapsibleContent className="mt-3">
+          {children}
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}