Changes

- Show a dynamic field-count badge next to All Fields (Detailed View) in the moderation queue
- Animate collapsible sections with smooth transitions for expand/collapse
- Pass fieldCount to DetailedViewCollapsible and render count alongside header; add animation utility in DetailedViewCollapsible.tsx
- Ensure SubmissionItemsList passes item data to calculate field counts and display badges accordingly

X-Lovable-Edit-ID: edt-ffd226b0-af99-491b-b6b8-3fe0063e0082

src/components/moderation/DetailedViewCollapsible.tsx

@@ -1,12 +1,14 @@
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
 
 interface DetailedViewCollapsibleProps {
   isCollapsed: boolean;
   onToggle: () => void;
   children: React.ReactNode;
+  fieldCount?: number;
   className?: string;
 }
 
@@ -18,6 +20,7 @@ export function DetailedViewCollapsible({
   isCollapsed,
   onToggle,
   children,
+  fieldCount,
   className
 }: DetailedViewCollapsibleProps) {
   return (
@@ -27,25 +30,35 @@ export function DetailedViewCollapsible({
           <Button
             variant="ghost"
             size="sm"
-            className="w-full flex items-center justify-between hover:bg-muted/50 p-2 h-auto"
+            className="w-full flex items-center justify-between hover:bg-muted/50 p-2 h-auto transition-colors"
           >
-            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            <div className="flex items-center gap-2">
-              All Fields (Detailed View)
+              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                All Fields (Detailed View)
+              </span>
+              {fieldCount !== undefined && fieldCount > 0 && (
+                <Badge 
+                  variant="secondary" 
+                  className="h-5 px-1.5 text-xs font-normal transition-transform duration-200 hover:scale-105"
+                >
+                  {fieldCount}
+                </Badge>
+              )}
             </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" />
+                <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
               ) : (
-                <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                <ChevronUp className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
               )}
             </div>
           </Button>
         </CollapsibleTrigger>
         
-        <CollapsibleContent className="mt-3">
+        <CollapsibleContent className="mt-3 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
           {children}
         </CollapsibleContent>
       </div>

src/components/moderation/QueueFilters.tsx

@@ -1,4 +1,4 @@
-import { Filter, MessageSquare, FileText, Image, X, ChevronDown, Calendar } from 'lucide-react';
+import { Filter, MessageSquare, FileText, Image, X, ChevronDown, Calendar, Maximize2, Minimize2 } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
@@ -7,6 +7,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { RefreshButton } from '@/components/ui/refresh-button';
 import { QueueSortControls } from './QueueSortControls';
 import { useFilterPanelState } from '@/hooks/useFilterPanelState';
+import { useDetailedViewState } from '@/hooks/useDetailedViewState';
 import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
 import type { EntityFilter, StatusFilter, SortConfig, QueueTab, ApprovalDateRangeFilter } from '@/types/moderation';
 
@@ -55,6 +56,7 @@ export const QueueFilters = ({
   isRefreshing = false
 }: QueueFiltersProps) => {
   const { isCollapsed, toggle } = useFilterPanelState();
+  const { isCollapsed: detailsCollapsed, toggle: toggleDetails } = useDetailedViewState();
 
   // Count active filters
   const activeFilterCount = [
@@ -76,14 +78,36 @@ export const QueueFilters = ({
               </Badge>
             )}
           </div>
-          {isMobile && (
+          <div className="flex items-center gap-2">
-            <CollapsibleTrigger asChild>
+            {/* Global toggle for detailed views */}
-              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <Button
-                <ChevronDown className={`h-4 w-4 transition-transform duration-250 ${isCollapsed ? '' : 'rotate-180'}`} />
+              variant="ghost"
-                <span className="sr-only">{isCollapsed ? 'Expand filters' : 'Collapse filters'}</span>
+              size="sm"
-              </Button>
+              onClick={toggleDetails}
-            </CollapsibleTrigger>
+              className="h-8 gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
-          )}
+              title={detailsCollapsed ? "Expand all detailed views" : "Collapse all detailed views"}
+            >
+              {detailsCollapsed ? (
+                <>
+                  <Maximize2 className="h-3.5 w-3.5" />
+                  {!isMobile && <span>Expand All</span>}
+                </>
+              ) : (
+                <>
+                  <Minimize2 className="h-3.5 w-3.5" />
+                  {!isMobile && <span>Collapse All</span>}
+                </>
+              )}
+            </Button>
+            {isMobile && (
+              <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <ChevronDown className={`h-4 w-4 transition-transform duration-250 ${isCollapsed ? '' : 'rotate-180'}`} />
+                  <span className="sr-only">{isCollapsed ? 'Expand filters' : 'Collapse filters'}</span>
+                </Button>
+              </CollapsibleTrigger>
+            )}
+          </div>
         </div>
 
         <CollapsibleContent className="space-y-4">

src/components/moderation/SubmissionItemsList.tsx

@@ -42,6 +42,12 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
     fetchSubmissionItems();
   }, [submissionId]);
 
+  // Helper function to count non-null fields in entity data
+  const countFields = (data: any): number => {
+    if (!data || typeof data !== 'object') return 0;
+    return Object.values(data).filter(value => value !== null && value !== undefined).length;
+  };
+
   const fetchSubmissionItems = async () => {
     try {
       // Only show skeleton on initial load, show refreshing indicator on refresh
@@ -191,7 +197,11 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             data={entityData as unknown as ParkSubmissionData}
             actionType={actionType}
           />
-          <DetailedViewCollapsible isCollapsed={isCollapsed} onToggle={toggle}>
+          <DetailedViewCollapsible 
+            isCollapsed={isCollapsed} 
+            onToggle={toggle}
+            fieldCount={countFields(entityData)}
+          >
             <SubmissionChangesDisplay 
               item={item}
               view="detailed"
@@ -211,7 +221,11 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             data={entityData as unknown as RideSubmissionData}
             actionType={actionType}
           />
-          <DetailedViewCollapsible isCollapsed={isCollapsed} onToggle={toggle}>
+          <DetailedViewCollapsible 
+            isCollapsed={isCollapsed} 
+            onToggle={toggle}
+            fieldCount={countFields(entityData)}
+          >
             <SubmissionChangesDisplay 
               item={item}
               view="detailed"
@@ -231,7 +245,11 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             data={entityData as unknown as CompanySubmissionData}
             actionType={actionType}
           />
-          <DetailedViewCollapsible isCollapsed={isCollapsed} onToggle={toggle}>
+          <DetailedViewCollapsible 
+            isCollapsed={isCollapsed} 
+            onToggle={toggle}
+            fieldCount={countFields(entityData)}
+          >
             <SubmissionChangesDisplay 
               item={item}
               view="detailed"
@@ -251,7 +269,11 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             data={entityData as unknown as RideModelSubmissionData}
             actionType={actionType}
           />
-          <DetailedViewCollapsible isCollapsed={isCollapsed} onToggle={toggle}>
+          <DetailedViewCollapsible 
+            isCollapsed={isCollapsed} 
+            onToggle={toggle}
+            fieldCount={countFields(entityData)}
+          >
             <SubmissionChangesDisplay 
               item={item}
               view="detailed"
@@ -271,7 +293,11 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
             data={entityData as unknown as TimelineSubmissionData}
             actionType={actionType}
           />
-          <DetailedViewCollapsible isCollapsed={isCollapsed} onToggle={toggle}>
+          <DetailedViewCollapsible 
+            isCollapsed={isCollapsed} 
+            onToggle={toggle}
+            fieldCount={countFields(entityData)}
+          >
             <SubmissionChangesDisplay 
               item={item}
               view="detailed"