From 3e2ce53fa77293f5f4b08d97eef619aa0e3b283a Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Wed, 8 Oct 2025 14:50:34 +0000
Subject: [PATCH] Add tabs to organize moderation items and their statuses

Introduces a `QueueTab` type and state for 'mainQueue' and 'archive', updating `fetchItems` to accept the tab parameter. Modifies query logic to apply status filters based on the selected tab in `ModerationQueue.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e14c2292-b0e5-43fe-b301-a4ad668949e9
Replit-Commit-Checkpoint-Type: full_checkpoint
---
 src/components/moderation/ModerationQueue.tsx | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 7e3248fb..0fdda434 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -55,6 +55,7 @@ interface ModerationItem {
 
 type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
 type StatusFilter = 'all' | 'pending' | 'partially_approved' | 'flagged' | 'approved' | 'rejected';
+type QueueTab = 'mainQueue' | 'archive';
 
 export interface ModerationQueueRef {
   refresh: () => void;
@@ -67,6 +68,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [notes, setNotes] = useState<Record<string, string>>({});
+  const [activeTab, setActiveTab] = useState<QueueTab>('mainQueue');
   const [activeEntityFilter, setActiveEntityFilter] = useState<EntityFilter>('all');
   const [activeStatusFilter, setActiveStatusFilter] = useState<StatusFilter>('pending');
   const [photoModalOpen, setPhotoModalOpen] = useState(false);
@@ -119,7 +121,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     loadedIdsRef.current = new Set(items.map(item => item.id));
   }, [items]);
 
-  const fetchItems = useCallback(async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending', silent = false) => {
+  const fetchItems = useCallback(async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending', silent = false, tab: QueueTab = 'mainQueue') => {
     if (!user) {
       return;
     }
@@ -135,6 +137,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     console.log('🔍 fetchItems called:', {
       entityFilter,
       statusFilter,
+      tab,
       silent,
       timestamp: new Date().toISOString()
     });
@@ -168,13 +171,23 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
         .order('priority', { ascending: false })
         .order('created_at', { ascending: true });
 
-      // Apply status filter
-      if (statusFilter === 'all') {
-        submissionsQuery = submissionsQuery.in('status', ['pending', 'approved', 'rejected', 'partially_approved']);
-      } else if (statusFilter === 'pending') {
-        submissionsQuery = submissionsQuery.in('status', ['pending', 'partially_approved']);
+      // Apply tab-based status filtering
+      if (tab === 'mainQueue') {
+        // Main queue: pending, flagged, partially_approved submissions
+        if (statusFilter === 'all') {
+          submissionsQuery = submissionsQuery.in('status', ['pending', 'flagged', 'partially_approved']);
+        } else if (statusFilter === 'pending') {
+          submissionsQuery = submissionsQuery.in('status', ['pending', 'partially_approved']);
+        } else {
+          submissionsQuery = submissionsQuery.eq('status', statusFilter);
+        }
       } else {
-        submissionsQuery = submissionsQuery.eq('status', statusFilter);
+        // Archive: approved or rejected submissions
+        if (statusFilter === 'all') {
+          submissionsQuery = submissionsQuery.in('status', ['approved', 'rejected']);
+        } else {
+          submissionsQuery = submissionsQuery.eq('status', statusFilter);
+        }
       }
 
       // Apply entity type filter