Fix: Implement sorting functionality

src/hooks/moderation/useModerationQueueManager.ts

@@ -12,7 +12,7 @@ import {
 } from "./index";
 import { useModerationQueue } from "@/hooks/useModerationQueue";
 import { smartMergeArray } from "@/lib/smartStateUpdate";
-import type { ModerationItem, EntityFilter, StatusFilter, LoadingState, SortConfig } from "@/types/moderation";
+import type { ModerationItem, EntityFilter, StatusFilter, LoadingState, SortConfig, SortField } from "@/types/moderation";
 
 /**
  * Configuration for useModerationQueueManager
@@ -100,11 +100,29 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
   });
 
   const sort = useModerationSort({
-    initialConfig: { field: "created_at", direction: "asc" },
+    initialConfig: { field: "created_at", direction: "desc" },
     persist: true,
     storageKey: "moderationQueue_sortConfig",
   });
 
+  /**
+   * Map UI sort field to actual database column
+   */
+  const getSortColumn = (field: SortField): string => {
+    switch (field) {
+      case 'created_at':
+        return 'created_at';
+      case 'submission_type':
+        return 'submission_type';
+      case 'status':
+        return 'status';
+      case 'escalated':
+        return 'escalated';
+      default:
+        return 'created_at';
+    }
+  };
+
   const queue = useModerationQueue();
   const entityCache = useEntityCache();
   const profileCache = useProfileCache();
@@ -222,8 +240,23 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
           )
         `,
           )
-          .order("escalated", { ascending: false })
-          .order("created_at", { ascending: true });
+          // Apply user-selected sort configuration
+          const sortColumn = getSortColumn(sort.field);
+          const sortAscending = sort.direction === 'asc';
+
+          console.log('[Query] Applying sort:', {
+            uiField: sort.field,
+            dbColumn: sortColumn,
+            direction: sort.direction,
+            ascending: sortAscending
+          });
+
+          submissionsQuery = submissionsQuery.order(sortColumn, { ascending: sortAscending });
+
+          // Secondary sort by created_at for consistency when primary sort has ties
+          if (sortColumn !== 'created_at') {
+            submissionsQuery = submissionsQuery.order('created_at', { ascending: true });
+          }
 
         // Apply tab-based status filtering
         const tab = filters.activeTab;
@@ -875,6 +908,33 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     };
   }, [settings.refreshOnTabVisible]);
 
+  // Refetch when sort configuration changes
+  useEffect(() => {
+    console.log('🔄 [Sort Changed]', {
+      field: sort.config.field,
+      direction: sort.config.direction,
+      timestamp: new Date().toISOString()
+    });
+
+    // Skip if initial fetch hasn't completed yet
+    if (!initialFetchCompleteRef.current) {
+      console.log('⏭️ Skipping sort refetch (initial fetch not complete)');
+      return;
+    }
+
+    // Skip if mounting
+    if (isMountingRef.current) {
+      console.log('⏭️ Skipping sort refetch (mounting)');
+      return;
+    }
+
+    // Trigger refetch with new sort
+    if (fetchItemsRef.current) {
+      console.log('✅ Triggering refetch due to sort change');
+      fetchItemsRef.current(false);
+    }
+  }, [sort.config.field, sort.config.direction]);
+
   // Initialize realtime subscriptions
   useRealtimeSubscriptions({
     enabled: settings.useRealtimeQueue && !!user,