mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 20:51:13 -05:00
3e2ce53fa7
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
2214 lines
95 KiB
TypeScript
2214 lines
95 KiB
TypeScript
import { useState, useEffect, useImperativeHandle, forwardRef, useCallback, useRef } from 'react';
|
|
import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X, Trash2, ListTree, RefreshCw, AlertCircle, Clock, Lock, Unlock, AlertTriangle, UserCog, Zap } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { useUserRole } from '@/hooks/useUserRole';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { format, formatDistance } from 'date-fns';
|
|
import { PhotoModal } from './PhotoModal';
|
|
import { SubmissionReviewManager } from './SubmissionReviewManager';
|
|
import { useIsMobile } from '@/hooks/use-mobile';
|
|
import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
|
|
import { SubmissionItemsList } from './SubmissionItemsList';
|
|
import { MeasurementDisplay } from '@/components/ui/measurement-display';
|
|
import { useAdminSettings } from '@/hooks/useAdminSettings';
|
|
import { useModerationQueue } from '@/hooks/useModerationQueue';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { QueueStatsDashboard } from './QueueStatsDashboard';
|
|
import { EscalationDialog } from './EscalationDialog';
|
|
import { ReassignDialog } from './ReassignDialog';
|
|
import { smartMergeArray } from '@/lib/smartStateUpdate';
|
|
import { useDebounce } from '@/hooks/useDebounce';
|
|
|
|
interface ModerationItem {
|
|
id: string;
|
|
type: 'review' | 'content_submission';
|
|
content: any;
|
|
created_at: string;
|
|
user_id: string;
|
|
status: string;
|
|
submission_type?: string;
|
|
user_profile?: {
|
|
username: string;
|
|
display_name?: string;
|
|
avatar_url?: string;
|
|
};
|
|
entity_name?: string;
|
|
park_name?: string;
|
|
reviewed_at?: string;
|
|
reviewed_by?: string;
|
|
reviewer_notes?: string;
|
|
reviewer_profile?: {
|
|
username: string;
|
|
display_name?: string;
|
|
avatar_url?: string;
|
|
};
|
|
}
|
|
|
|
type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
|
|
type StatusFilter = 'all' | 'pending' | 'partially_approved' | 'flagged' | 'approved' | 'rejected';
|
|
type QueueTab = 'mainQueue' | 'archive';
|
|
|
|
export interface ModerationQueueRef {
|
|
refresh: () => void;
|
|
}
|
|
|
|
export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
|
const isMobile = useIsMobile();
|
|
const [items, setItems] = useState<ModerationItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
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);
|
|
const [selectedPhotos, setSelectedPhotos] = useState<any[]>([]);
|
|
const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0);
|
|
const [reviewManagerOpen, setReviewManagerOpen] = useState(false);
|
|
const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
|
|
const [lockedSubmissions, setLockedSubmissions] = useState<Set<string>>(new Set());
|
|
const [escalationDialogOpen, setEscalationDialogOpen] = useState(false);
|
|
const [reassignDialogOpen, setReassignDialogOpen] = useState(false);
|
|
const [selectedItemForAction, setSelectedItemForAction] = useState<ModerationItem | null>(null);
|
|
const [interactingWith, setInteractingWith] = useState<Set<string>>(new Set());
|
|
const [newItemsCount, setNewItemsCount] = useState(0);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [profileCache, setProfileCache] = useState<Map<string, any>>(new Map());
|
|
const [entityCache, setEntityCache] = useState<{
|
|
rides: Map<string, any>,
|
|
parks: Map<string, any>,
|
|
companies: Map<string, any>
|
|
}>({
|
|
rides: new Map(),
|
|
parks: new Map(),
|
|
companies: new Map()
|
|
});
|
|
const [submissionMemo, setSubmissionMemo] = useState<Map<string, ModerationItem>>(new Map());
|
|
const [pendingNewItems, setPendingNewItems] = useState<ModerationItem[]>([]);
|
|
const { toast } = useToast();
|
|
const { isAdmin, isSuperuser } = useUserRole();
|
|
const { user } = useAuth();
|
|
const queue = useModerationQueue();
|
|
const fetchInProgressRef = useRef(false);
|
|
const itemsRef = useRef<ModerationItem[]>([]);
|
|
const loadedIdsRef = useRef<Set<string>>(new Set());
|
|
|
|
// Get admin settings for polling configuration
|
|
const {
|
|
getAdminPanelRefreshMode,
|
|
getAdminPanelPollInterval,
|
|
getAutoRefreshStrategy,
|
|
getPreserveInteractionState
|
|
} = useAdminSettings();
|
|
const refreshMode = getAdminPanelRefreshMode();
|
|
const pollInterval = getAdminPanelPollInterval();
|
|
const refreshStrategy = getAutoRefreshStrategy();
|
|
const preserveInteraction = getPreserveInteractionState();
|
|
|
|
// Sync itemsRef and loadedIdsRef with items state
|
|
useEffect(() => {
|
|
itemsRef.current = items;
|
|
loadedIdsRef.current = new Set(items.map(item => item.id));
|
|
}, [items]);
|
|
|
|
const fetchItems = useCallback(async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending', silent = false, tab: QueueTab = 'mainQueue') => {
|
|
if (!user) {
|
|
return;
|
|
}
|
|
|
|
// Prevent concurrent calls - race condition guard
|
|
if (fetchInProgressRef.current) {
|
|
console.log('⚠️ Fetch already in progress, skipping duplicate call');
|
|
return;
|
|
}
|
|
|
|
fetchInProgressRef.current = true;
|
|
|
|
console.log('🔍 fetchItems called:', {
|
|
entityFilter,
|
|
statusFilter,
|
|
tab,
|
|
silent,
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
|
|
try {
|
|
// Set loading states
|
|
if (!silent) {
|
|
setLoading(true);
|
|
} else {
|
|
setIsRefreshing(true);
|
|
}
|
|
|
|
// Build base query for content submissions
|
|
let submissionsQuery = supabase
|
|
.from('content_submissions')
|
|
.select(`
|
|
id,
|
|
submission_type,
|
|
status,
|
|
content,
|
|
created_at,
|
|
user_id,
|
|
reviewed_at,
|
|
reviewer_id,
|
|
reviewer_notes,
|
|
escalated,
|
|
priority,
|
|
assigned_to,
|
|
locked_until
|
|
`)
|
|
.order('priority', { ascending: false })
|
|
.order('created_at', { ascending: true });
|
|
|
|
// 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 {
|
|
// Archive: approved or rejected submissions
|
|
if (statusFilter === 'all') {
|
|
submissionsQuery = submissionsQuery.in('status', ['approved', 'rejected']);
|
|
} else {
|
|
submissionsQuery = submissionsQuery.eq('status', statusFilter);
|
|
}
|
|
}
|
|
|
|
// Apply entity type filter
|
|
if (entityFilter === 'photos') {
|
|
submissionsQuery = submissionsQuery.eq('submission_type', 'photo');
|
|
} else if (entityFilter === 'submissions') {
|
|
submissionsQuery = submissionsQuery.neq('submission_type', 'photo');
|
|
}
|
|
|
|
// CRM-style claim filtering: moderators only see unclaimed OR self-assigned submissions
|
|
// Admins see all submissions
|
|
if (!isAdmin && !isSuperuser) {
|
|
const now = new Date().toISOString();
|
|
// Show submissions that are:
|
|
// 1. Unclaimed (assigned_to is null)
|
|
// 2. Have expired locks (locked_until < now)
|
|
// 3. Are assigned to current user
|
|
submissionsQuery = submissionsQuery.or(
|
|
`assigned_to.is.null,locked_until.lt.${now},assigned_to.eq.${user.id}`
|
|
);
|
|
}
|
|
|
|
const { data: submissions, error: submissionsError } = await submissionsQuery;
|
|
|
|
if (submissionsError) throw submissionsError;
|
|
|
|
// Get user IDs and fetch user profiles
|
|
const userIds = submissions?.map(s => s.user_id).filter(Boolean) || [];
|
|
const reviewerIds = submissions?.map(s => s.reviewer_id).filter((id): id is string => !!id) || [];
|
|
const allUserIds = [...new Set([...userIds, ...reviewerIds])];
|
|
|
|
let userProfiles: any[] = [];
|
|
if (allUserIds.length > 0) {
|
|
const { data: profiles } = await supabase
|
|
.from('profiles')
|
|
.select('user_id, username, display_name, avatar_url')
|
|
.in('user_id', allUserIds);
|
|
|
|
userProfiles = profiles || [];
|
|
}
|
|
|
|
const userProfileMap = new Map(userProfiles.map(p => [p.user_id, p]));
|
|
|
|
// Collect entity IDs for bulk fetching
|
|
const rideIds = new Set<string>();
|
|
const parkIds = new Set<string>();
|
|
const companyIds = new Set<string>();
|
|
const rideModelIds = new Set<string>();
|
|
|
|
submissions?.forEach(submission => {
|
|
const content = submission.content as any;
|
|
if (content && typeof content === 'object') {
|
|
if (content.ride_id) rideIds.add(content.ride_id);
|
|
if (content.park_id) parkIds.add(content.park_id);
|
|
if (content.company_id) companyIds.add(content.company_id);
|
|
if (content.entity_id) {
|
|
if (submission.submission_type === 'ride') rideIds.add(content.entity_id);
|
|
if (submission.submission_type === 'park') parkIds.add(content.entity_id);
|
|
if (['manufacturer', 'operator', 'designer', 'property_owner'].includes(submission.submission_type)) {
|
|
companyIds.add(content.entity_id);
|
|
}
|
|
}
|
|
if (content.manufacturer_id) companyIds.add(content.manufacturer_id);
|
|
if (content.designer_id) companyIds.add(content.designer_id);
|
|
if (content.operator_id) companyIds.add(content.operator_id);
|
|
if (content.property_owner_id) companyIds.add(content.property_owner_id);
|
|
if (content.ride_model_id) rideModelIds.add(content.ride_model_id);
|
|
}
|
|
});
|
|
|
|
// Fetch entities only if we don't have them cached or if they're new
|
|
const fetchPromises: Promise<{ type: string; data: any[] }>[] = [];
|
|
|
|
if (rideIds.size > 0) {
|
|
const uncachedRideIds = Array.from(rideIds).filter(id => !entityCache.rides.has(id));
|
|
if (uncachedRideIds.length > 0) {
|
|
fetchPromises.push(
|
|
Promise.resolve(
|
|
supabase
|
|
.from('rides')
|
|
.select('id, name, park_id')
|
|
.in('id', uncachedRideIds)
|
|
).then(({ data }) => ({ type: 'rides', data: data || [] }))
|
|
);
|
|
}
|
|
}
|
|
|
|
if (parkIds.size > 0) {
|
|
const uncachedParkIds = Array.from(parkIds).filter(id => !entityCache.parks.has(id));
|
|
if (uncachedParkIds.length > 0) {
|
|
fetchPromises.push(
|
|
Promise.resolve(
|
|
supabase
|
|
.from('parks')
|
|
.select('id, name')
|
|
.in('id', uncachedParkIds)
|
|
).then(({ data }) => ({ type: 'parks', data: data || [] }))
|
|
);
|
|
}
|
|
}
|
|
|
|
if (companyIds.size > 0) {
|
|
const uncachedCompanyIds = Array.from(companyIds).filter(id => !entityCache.companies.has(id));
|
|
if (uncachedCompanyIds.length > 0) {
|
|
fetchPromises.push(
|
|
Promise.resolve(
|
|
supabase
|
|
.from('companies')
|
|
.select('id, name')
|
|
.in('id', uncachedCompanyIds)
|
|
).then(({ data }) => ({ type: 'companies', data: data || [] }))
|
|
);
|
|
}
|
|
}
|
|
|
|
// Fetch all uncached entities
|
|
const entityResults = await Promise.all(fetchPromises);
|
|
|
|
// Update entity cache
|
|
entityResults.forEach(result => {
|
|
if (result.type === 'rides') {
|
|
result.data.forEach((ride: any) => {
|
|
entityCache.rides.set(ride.id, ride);
|
|
if (ride.park_id) parkIds.add(ride.park_id);
|
|
});
|
|
} else if (result.type === 'parks') {
|
|
result.data.forEach((park: any) => {
|
|
entityCache.parks.set(park.id, park);
|
|
});
|
|
} else if (result.type === 'companies') {
|
|
result.data.forEach((company: any) => {
|
|
entityCache.companies.set(company.id, company);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Helper function to create memo key
|
|
const createMemoKey = (submission: any): string => {
|
|
return JSON.stringify({
|
|
id: submission.id,
|
|
status: submission.status,
|
|
content: submission.content,
|
|
reviewed_at: submission.reviewed_at,
|
|
reviewer_notes: submission.reviewer_notes,
|
|
});
|
|
};
|
|
|
|
// Map submissions to moderation items with memoization
|
|
const moderationItems: ModerationItem[] = submissions?.map(submission => {
|
|
const memoKey = createMemoKey(submission);
|
|
const existingMemo = submissionMemo.get(submission.id);
|
|
|
|
// Check if we can reuse the memoized item
|
|
if (existingMemo && createMemoKey(existingMemo) === memoKey) {
|
|
return existingMemo as ModerationItem;
|
|
}
|
|
|
|
// Resolve entity name
|
|
const content = submission.content as any;
|
|
let entityName = content?.name || 'Unknown';
|
|
let parkName: string | undefined;
|
|
|
|
if (submission.submission_type === 'ride' && content?.entity_id) {
|
|
const ride = entityCache.rides.get(content.entity_id);
|
|
if (ride) {
|
|
entityName = ride.name;
|
|
if (ride.park_id) {
|
|
const park = entityCache.parks.get(ride.park_id);
|
|
if (park) parkName = park.name;
|
|
}
|
|
}
|
|
} else if (submission.submission_type === 'park' && content?.entity_id) {
|
|
const park = entityCache.parks.get(content.entity_id);
|
|
if (park) entityName = park.name;
|
|
} else if (['manufacturer', 'operator', 'designer', 'property_owner'].includes(submission.submission_type) && content?.entity_id) {
|
|
const company = entityCache.companies.get(content.entity_id);
|
|
if (company) entityName = company.name;
|
|
} else if (content?.ride_id) {
|
|
const ride = entityCache.rides.get(content.ride_id);
|
|
if (ride) {
|
|
entityName = ride.name;
|
|
if (ride.park_id) {
|
|
const park = entityCache.parks.get(ride.park_id);
|
|
if (park) parkName = park.name;
|
|
}
|
|
}
|
|
} else if (content?.park_id) {
|
|
const park = entityCache.parks.get(content.park_id);
|
|
if (park) parkName = park.name;
|
|
}
|
|
|
|
const userProfile = userProfileMap.get(submission.user_id);
|
|
const reviewerProfile = submission.reviewer_id ? userProfileMap.get(submission.reviewer_id) : undefined;
|
|
|
|
const item: ModerationItem = {
|
|
id: submission.id,
|
|
type: 'content_submission',
|
|
content: submission.content,
|
|
created_at: submission.created_at,
|
|
user_id: submission.user_id,
|
|
status: submission.status,
|
|
submission_type: submission.submission_type,
|
|
user_profile: userProfile ? {
|
|
username: userProfile.username,
|
|
display_name: userProfile.display_name,
|
|
avatar_url: userProfile.avatar_url,
|
|
} : undefined,
|
|
entity_name: entityName,
|
|
park_name: parkName,
|
|
reviewed_at: submission.reviewed_at,
|
|
reviewed_by: submission.reviewer_id,
|
|
reviewer_notes: submission.reviewer_notes,
|
|
reviewer_profile: reviewerProfile,
|
|
};
|
|
|
|
return item;
|
|
}) || [];
|
|
|
|
// Update memoization cache
|
|
const newMemoMap = new Map<string, ModerationItem>();
|
|
moderationItems.forEach(item => {
|
|
newMemoMap.set(item.id, item);
|
|
});
|
|
setSubmissionMemo(newMemoMap);
|
|
|
|
// CRM-style frozen queue logic
|
|
if (silent) {
|
|
// Background polling: ONLY detect NEW submissions, never update existing ones
|
|
const currentLoadedIds = loadedIdsRef.current;
|
|
const newSubmissions = moderationItems.filter(item => !currentLoadedIds.has(item.id));
|
|
|
|
if (newSubmissions.length > 0) {
|
|
console.log('🆕 Detected new submissions:', newSubmissions.length);
|
|
|
|
// Check against existing pendingNewItems to avoid double-counting
|
|
setPendingNewItems(prev => {
|
|
const existingIds = new Set(prev.map(p => p.id));
|
|
const uniqueNew = newSubmissions.filter(item => !existingIds.has(item.id));
|
|
|
|
// Track these IDs as loaded to prevent re-counting on next poll
|
|
if (uniqueNew.length > 0) {
|
|
const newIds = uniqueNew.map(item => item.id);
|
|
loadedIdsRef.current = new Set([...currentLoadedIds, ...newIds]);
|
|
setNewItemsCount(prev => prev + uniqueNew.length);
|
|
}
|
|
|
|
return [...prev, ...uniqueNew];
|
|
});
|
|
}
|
|
|
|
// DON'T update items array during background polling - queue stays frozen
|
|
console.log('✅ Queue frozen - existing submissions unchanged');
|
|
} else {
|
|
// Normal fetch: Load all items and reset pending
|
|
setItems(moderationItems);
|
|
setPendingNewItems([]);
|
|
setNewItemsCount(0);
|
|
console.log('📋 Queue loaded with', moderationItems.length, 'submissions');
|
|
}
|
|
|
|
} catch (error: any) {
|
|
console.error('Error fetching moderation items:', error);
|
|
toast({
|
|
title: 'Error',
|
|
description: error.message || 'Failed to fetch moderation queue',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
fetchInProgressRef.current = false;
|
|
setLoading(false);
|
|
setIsRefreshing(false);
|
|
setIsInitialLoad(false);
|
|
}
|
|
}, [
|
|
user,
|
|
refreshStrategy,
|
|
preserveInteraction,
|
|
toast
|
|
]);
|
|
|
|
// Debounced filters to prevent rapid-fire calls
|
|
const debouncedEntityFilter = useDebounce(activeEntityFilter, 500);
|
|
const debouncedStatusFilter = useDebounce(activeStatusFilter, 500);
|
|
|
|
// Store latest filter values in ref to avoid dependency issues
|
|
const filtersRef = useRef({ entityFilter: debouncedEntityFilter, statusFilter: debouncedStatusFilter });
|
|
useEffect(() => {
|
|
filtersRef.current = { entityFilter: debouncedEntityFilter, statusFilter: debouncedStatusFilter };
|
|
}, [debouncedEntityFilter, debouncedStatusFilter]);
|
|
|
|
// Expose refresh method via ref
|
|
useImperativeHandle(ref, () => ({
|
|
refresh: () => {
|
|
fetchItems(filtersRef.current.entityFilter, filtersRef.current.statusFilter, false); // Manual refresh shows loading
|
|
}
|
|
}), [fetchItems]);
|
|
|
|
// Initial fetch on mount and filter changes
|
|
useEffect(() => {
|
|
if (user) {
|
|
fetchItems(debouncedEntityFilter, debouncedStatusFilter, false); // Show loading
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [debouncedEntityFilter, debouncedStatusFilter, user]);
|
|
|
|
// Polling for auto-refresh
|
|
useEffect(() => {
|
|
if (!user || refreshMode !== 'auto' || isInitialLoad) return;
|
|
|
|
const interval = setInterval(() => {
|
|
fetchItems(filtersRef.current.entityFilter, filtersRef.current.statusFilter, true); // Silent refresh
|
|
}, pollInterval);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [user, refreshMode, pollInterval, isInitialLoad]);
|
|
|
|
// Real-time subscription for lock status
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
|
|
const channel = supabase
|
|
.channel('moderation-locks')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: 'UPDATE',
|
|
schema: 'public',
|
|
table: 'content_submissions',
|
|
},
|
|
(payload) => {
|
|
const newData = payload.new as any;
|
|
|
|
// Track submissions locked by others
|
|
if (newData.assigned_to && newData.assigned_to !== user.id && newData.locked_until) {
|
|
const lockExpiry = new Date(newData.locked_until);
|
|
if (lockExpiry > new Date()) {
|
|
setLockedSubmissions((prev) => new Set(prev).add(newData.id));
|
|
} else {
|
|
setLockedSubmissions((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(newData.id);
|
|
return next;
|
|
});
|
|
}
|
|
} else {
|
|
// Lock released
|
|
setLockedSubmissions((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(newData.id);
|
|
return next;
|
|
});
|
|
}
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
supabase.removeChannel(channel);
|
|
};
|
|
}, [user]);
|
|
|
|
const handleResetToPending = async (item: ModerationItem) => {
|
|
setActionLoading(item.id);
|
|
try {
|
|
const { resetRejectedItemsToPending } = await import('@/lib/submissionItemsService');
|
|
|
|
await resetRejectedItemsToPending(item.id);
|
|
|
|
toast({
|
|
title: "Reset Complete",
|
|
description: "Submission and all items have been reset to pending status",
|
|
});
|
|
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
} catch (error: any) {
|
|
console.error('Error resetting submission:', error);
|
|
toast({
|
|
title: "Reset Failed",
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleRetryFailedItems = async (item: ModerationItem) => {
|
|
setActionLoading(item.id);
|
|
try {
|
|
// Fetch failed/rejected submission items
|
|
const { data: failedItems, error: fetchError } = await supabase
|
|
.from('submission_items')
|
|
.select('id')
|
|
.eq('submission_id', item.id)
|
|
.eq('status', 'rejected');
|
|
|
|
if (fetchError) throw fetchError;
|
|
|
|
if (!failedItems || failedItems.length === 0) {
|
|
toast({
|
|
title: "No Failed Items",
|
|
description: "All items have been processed successfully",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Call edge function to retry failed items
|
|
const { data, error } = await supabase.functions.invoke(
|
|
'process-selective-approval',
|
|
{
|
|
body: {
|
|
itemIds: failedItems.map(i => i.id),
|
|
submissionId: item.id
|
|
}
|
|
}
|
|
);
|
|
|
|
if (error) throw error;
|
|
|
|
toast({
|
|
title: "Retry Complete",
|
|
description: `Processed ${failedItems.length} failed item(s)`,
|
|
});
|
|
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
} catch (error: any) {
|
|
console.error('Error retrying failed items:', error);
|
|
toast({
|
|
title: "Retry Failed",
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleModerationAction = async (
|
|
item: ModerationItem,
|
|
action: 'approved' | 'rejected',
|
|
moderatorNotes?: string
|
|
) => {
|
|
// Prevent multiple clicks on the same item
|
|
if (actionLoading === item.id) {
|
|
return;
|
|
}
|
|
|
|
setActionLoading(item.id);
|
|
|
|
// Release lock if this submission is claimed by current user
|
|
if (queue.currentLock?.submissionId === item.id) {
|
|
await queue.releaseLock(item.id);
|
|
}
|
|
try {
|
|
// Handle composite ride submissions with sequential entity creation
|
|
if (action === 'approved' && item.type === 'content_submission' &&
|
|
(item.submission_type === 'ride_with_manufacturer' ||
|
|
item.submission_type === 'ride_with_model' ||
|
|
item.submission_type === 'ride_with_manufacturer_and_model')) {
|
|
|
|
let manufacturerId = item.content.ride?.manufacturer_id;
|
|
let rideModelId = item.content.ride?.ride_model_id;
|
|
|
|
// STEP 1: Create manufacturer if needed
|
|
if (item.content.new_manufacturer) {
|
|
const { data: newManufacturer, error: mfrError } = await supabase
|
|
.from('companies')
|
|
.insert({
|
|
name: item.content.new_manufacturer.name,
|
|
slug: item.content.new_manufacturer.slug,
|
|
description: item.content.new_manufacturer.description,
|
|
company_type: 'manufacturer',
|
|
person_type: item.content.new_manufacturer.person_type || 'company',
|
|
website_url: item.content.new_manufacturer.website_url,
|
|
founded_year: item.content.new_manufacturer.founded_year,
|
|
headquarters_location: item.content.new_manufacturer.headquarters_location
|
|
})
|
|
.select()
|
|
.single();
|
|
|
|
if (mfrError) {
|
|
throw new Error(`Failed to create manufacturer: ${mfrError.message}`);
|
|
}
|
|
|
|
manufacturerId = newManufacturer.id;
|
|
|
|
toast({
|
|
title: "Manufacturer Created",
|
|
description: `Created ${newManufacturer.name}`,
|
|
});
|
|
}
|
|
|
|
// STEP 2: Create ride model if needed
|
|
if (item.content.new_ride_model) {
|
|
const modelManufacturerId = manufacturerId || item.content.new_ride_model.manufacturer_id;
|
|
|
|
if (!modelManufacturerId) {
|
|
throw new Error('Cannot create ride model: No manufacturer ID available');
|
|
}
|
|
|
|
const { data: newModel, error: modelError } = await supabase
|
|
.from('ride_models')
|
|
.insert({
|
|
name: item.content.new_ride_model.name,
|
|
slug: item.content.new_ride_model.slug,
|
|
manufacturer_id: modelManufacturerId,
|
|
category: item.content.new_ride_model.category,
|
|
ride_type: item.content.new_ride_model.ride_type,
|
|
description: item.content.new_ride_model.description
|
|
})
|
|
.select()
|
|
.single();
|
|
|
|
if (modelError) {
|
|
throw new Error(`Failed to create ride model: ${modelError.message}`);
|
|
}
|
|
|
|
rideModelId = newModel.id;
|
|
|
|
toast({
|
|
title: "Ride Model Created",
|
|
description: `Created ${newModel.name}`,
|
|
});
|
|
}
|
|
|
|
// STEP 3: Create the ride
|
|
const { error: rideError } = await supabase
|
|
.from('rides')
|
|
.insert({
|
|
...item.content.ride,
|
|
manufacturer_id: manufacturerId,
|
|
ride_model_id: rideModelId,
|
|
park_id: item.content.park_id
|
|
});
|
|
|
|
if (rideError) {
|
|
throw new Error(`Failed to create ride: ${rideError.message}`);
|
|
}
|
|
|
|
// STEP 4: Update submission status
|
|
const { error: updateError } = await supabase
|
|
.from('content_submissions')
|
|
.update({
|
|
status: 'approved',
|
|
reviewer_id: user?.id,
|
|
reviewed_at: new Date().toISOString(),
|
|
reviewer_notes: moderatorNotes
|
|
})
|
|
.eq('id', item.id);
|
|
|
|
if (updateError) throw updateError;
|
|
|
|
toast({
|
|
title: "Submission Approved",
|
|
description: "All entities created successfully",
|
|
});
|
|
|
|
// Refresh the queue
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
return;
|
|
}
|
|
|
|
// Handle photo submissions - create photos records when approved
|
|
if (action === 'approved' && item.type === 'content_submission' && item.submission_type === 'photo') {
|
|
try {
|
|
// Fetch photo submission from new relational tables
|
|
const { data: photoSubmission, error: fetchError } = await supabase
|
|
.from('photo_submissions')
|
|
.select(`
|
|
*,
|
|
items:photo_submission_items(*),
|
|
submission:content_submissions!inner(user_id, status)
|
|
`)
|
|
.eq('submission_id', item.id)
|
|
.single();
|
|
|
|
if (fetchError || !photoSubmission) {
|
|
console.error('Failed to fetch photo submission:', fetchError);
|
|
throw new Error('Failed to fetch photo submission data');
|
|
}
|
|
|
|
if (!photoSubmission.items || photoSubmission.items.length === 0) {
|
|
console.error('No photo items found in submission');
|
|
throw new Error('No photos found in submission');
|
|
}
|
|
|
|
// Check if photos already exist for this submission (in case of re-approval)
|
|
const { data: existingPhotos } = await supabase
|
|
.from('photos')
|
|
.select('id')
|
|
.eq('submission_id', item.id);
|
|
|
|
if (existingPhotos && existingPhotos.length > 0) {
|
|
|
|
// Just update submission status
|
|
const { error: updateError } = await supabase
|
|
.from('content_submissions')
|
|
.update({
|
|
status: 'approved',
|
|
reviewer_id: user?.id,
|
|
reviewed_at: new Date().toISOString(),
|
|
reviewer_notes: moderatorNotes
|
|
})
|
|
.eq('id', item.id);
|
|
|
|
} else {
|
|
// Create new photo records from photo_submission_items
|
|
const photoRecords = photoSubmission.items.map((item) => ({
|
|
entity_id: photoSubmission.entity_id,
|
|
entity_type: photoSubmission.entity_type,
|
|
cloudflare_image_id: item.cloudflare_image_id,
|
|
cloudflare_image_url: item.cloudflare_image_url,
|
|
title: item.title || null,
|
|
caption: item.caption || null,
|
|
date_taken: item.date_taken || null,
|
|
order_index: item.order_index,
|
|
submission_id: photoSubmission.submission_id,
|
|
submitted_by: photoSubmission.submission?.user_id,
|
|
approved_by: user?.id,
|
|
approved_at: new Date().toISOString(),
|
|
}));
|
|
|
|
const { data: createdPhotos, error: insertError } = await supabase
|
|
.from('photos')
|
|
.insert(photoRecords)
|
|
.select();
|
|
|
|
if (insertError) {
|
|
console.error('Failed to insert photos:', insertError);
|
|
throw insertError;
|
|
}
|
|
}
|
|
|
|
// Update submission status
|
|
const { error: updateError } = await supabase
|
|
.from('content_submissions')
|
|
.update({
|
|
status: 'approved',
|
|
reviewer_id: user?.id,
|
|
reviewed_at: new Date().toISOString(),
|
|
reviewer_notes: moderatorNotes
|
|
})
|
|
.eq('id', item.id);
|
|
|
|
if (updateError) {
|
|
console.error('Error updating submission:', updateError);
|
|
throw updateError;
|
|
}
|
|
|
|
toast({
|
|
title: "Photos Approved",
|
|
description: `Successfully approved and published ${photoSubmission.items.length} photo(s)`,
|
|
});
|
|
|
|
// Refresh the queue
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
return;
|
|
|
|
} catch (error: any) {
|
|
console.error('Photo approval error:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Check if this submission has submission_items that need processing
|
|
if (item.type === 'content_submission') {
|
|
const { data: submissionItems, error: itemsError } = await supabase
|
|
.from('submission_items')
|
|
.select('id, status')
|
|
.eq('submission_id', item.id)
|
|
.in('status', ['pending', 'rejected']);
|
|
|
|
if (!itemsError && submissionItems && submissionItems.length > 0) {
|
|
if (action === 'approved') {
|
|
// Call the edge function to process all items
|
|
const { data: approvalData, error: approvalError } = await supabase.functions.invoke(
|
|
'process-selective-approval',
|
|
{
|
|
body: {
|
|
itemIds: submissionItems.map(i => i.id),
|
|
submissionId: item.id
|
|
}
|
|
}
|
|
);
|
|
|
|
if (approvalError) {
|
|
throw new Error(`Failed to process submission items: ${approvalError.message}`);
|
|
}
|
|
|
|
toast({
|
|
title: "Submission Approved",
|
|
description: `Successfully processed ${submissionItems.length} item(s)`,
|
|
});
|
|
|
|
// Refresh and return early since edge function already updated parent
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
return;
|
|
} else if (action === 'rejected') {
|
|
// Cascade rejection to all pending items
|
|
const { error: rejectError } = await supabase
|
|
.from('submission_items')
|
|
.update({
|
|
status: 'rejected',
|
|
rejection_reason: moderatorNotes || 'Parent submission rejected',
|
|
updated_at: new Date().toISOString()
|
|
})
|
|
.eq('submission_id', item.id)
|
|
.eq('status', 'pending');
|
|
|
|
if (rejectError) {
|
|
console.error('Failed to cascade rejection:', rejectError);
|
|
// Don't fail the whole operation, just log it
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Standard moderation flow for other items
|
|
const table = item.type === 'review' ? 'reviews' : 'content_submissions';
|
|
const statusField = item.type === 'review' ? 'moderation_status' : 'status';
|
|
|
|
// Use correct timestamp column name based on table
|
|
const timestampField = item.type === 'review' ? 'moderated_at' : 'reviewed_at';
|
|
const reviewerField = item.type === 'review' ? 'moderated_by' : 'reviewer_id';
|
|
|
|
const updateData: any = {
|
|
[statusField]: action,
|
|
[timestampField]: new Date().toISOString(),
|
|
};
|
|
|
|
// Get current user ID for reviewer tracking
|
|
if (user) {
|
|
updateData[reviewerField] = user.id;
|
|
}
|
|
|
|
if (moderatorNotes) {
|
|
updateData.reviewer_notes = moderatorNotes;
|
|
}
|
|
|
|
const { error, data } = await supabase
|
|
.from(table)
|
|
.update(updateData)
|
|
.eq('id', item.id)
|
|
.select();
|
|
|
|
if (error) {
|
|
console.error('Database update error:', error);
|
|
throw error;
|
|
}
|
|
|
|
// Check if the update actually affected any rows
|
|
if (!data || data.length === 0) {
|
|
console.error('No rows were updated. This might be due to RLS policies or the item not existing.');
|
|
throw new Error('Failed to update item - no rows affected. You might not have permission to moderate this content.');
|
|
}
|
|
|
|
toast({
|
|
title: `Content ${action}`,
|
|
description: `The ${item.type} has been ${action}`,
|
|
});
|
|
|
|
// Only update local state if the database update was successful
|
|
setItems(prev => prev.map(i =>
|
|
i.id === item.id
|
|
? { ...i, status: action }
|
|
: i
|
|
));
|
|
|
|
// Clear notes only after successful update
|
|
setNotes(prev => {
|
|
const newNotes = { ...prev };
|
|
delete newNotes[item.id];
|
|
return newNotes;
|
|
});
|
|
|
|
// Refresh if needed based on filter
|
|
if ((activeStatusFilter === 'pending' && (action === 'approved' || action === 'rejected')) ||
|
|
(activeStatusFilter === 'flagged' && (action === 'approved' || action === 'rejected'))) {
|
|
// Item no longer matches filter
|
|
}
|
|
|
|
} catch (error: any) {
|
|
console.error('Error moderating content:', error);
|
|
|
|
// Revert any optimistic updates
|
|
setItems(prev => prev.map(i =>
|
|
i.id === item.id
|
|
? { ...i, status: item.status } // Revert to original status
|
|
: i
|
|
));
|
|
|
|
toast({
|
|
title: "Error",
|
|
description: error.message || `Failed to ${action} content`,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleDeleteSubmission = async (item: ModerationItem) => {
|
|
if (item.type !== 'content_submission') return;
|
|
|
|
// Prevent duplicate calls
|
|
if (actionLoading === item.id) {
|
|
return;
|
|
}
|
|
|
|
setActionLoading(item.id);
|
|
|
|
// Remove item from UI immediately to prevent flickering
|
|
setItems(prev => prev.filter(i => i.id !== item.id));
|
|
|
|
try {
|
|
// Step 1: Extract photo IDs from the submission content
|
|
const photoIds: string[] = [];
|
|
const validImageIds: string[] = [];
|
|
const skippedPhotos: string[] = [];
|
|
|
|
// Try both nested paths for photos array (handle different content structures)
|
|
const photosArray = item.content?.content?.photos || item.content?.photos;
|
|
|
|
if (photosArray && Array.isArray(photosArray)) {
|
|
for (const photo of photosArray) {
|
|
let imageId = '';
|
|
|
|
// First try to use the stored imageId directly
|
|
if (photo.imageId) {
|
|
imageId = photo.imageId;
|
|
} else if (photo.url) {
|
|
// Check if this looks like a Cloudflare image ID (not a blob URL)
|
|
if (photo.url.startsWith('blob:')) {
|
|
// This is a blob URL - we can't extract a valid Cloudflare image ID
|
|
console.warn('Skipping blob URL (cannot extract Cloudflare image ID):', photo.url);
|
|
skippedPhotos.push(photo.url);
|
|
continue;
|
|
}
|
|
|
|
// Fallback: Try to extract from URL for backward compatibility
|
|
const uuidRegex = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i;
|
|
|
|
if (uuidRegex.test(photo.url)) {
|
|
imageId = photo.url;
|
|
} else {
|
|
// Extract from Cloudflare image delivery URL format
|
|
const cloudflareMatch = photo.url.match(/imagedelivery\.net\/[^\/]+\/([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})/i);
|
|
if (cloudflareMatch) {
|
|
imageId = cloudflareMatch[1];
|
|
}
|
|
}
|
|
}
|
|
|
|
if (imageId) {
|
|
photoIds.push(imageId);
|
|
validImageIds.push(imageId);
|
|
} else {
|
|
console.warn('Could not get valid image ID from photo:', photo);
|
|
skippedPhotos.push(photo.url || 'unknown');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Step 2: Delete photos from Cloudflare Images (if any valid IDs)
|
|
if (validImageIds.length > 0) {
|
|
const deletePromises = validImageIds.map(async (imageId) => {
|
|
try {
|
|
// Use Supabase SDK - automatically includes session token
|
|
const { data, error } = await supabase.functions.invoke('upload-image', {
|
|
method: 'DELETE',
|
|
body: { imageId }
|
|
});
|
|
|
|
if (error) {
|
|
throw new Error(`Failed to delete image: ${error.message}`);
|
|
}
|
|
|
|
} catch (deleteError) {
|
|
console.error(`Failed to delete photo ${imageId} from Cloudflare:`, deleteError);
|
|
// Continue with other deletions - don't fail the entire operation
|
|
}
|
|
});
|
|
|
|
// Execute all photo deletions in parallel
|
|
await Promise.allSettled(deletePromises);
|
|
}
|
|
|
|
// Step 3: Delete the submission from the database
|
|
const { error } = await supabase
|
|
.from('content_submissions')
|
|
.delete()
|
|
.eq('id', item.id);
|
|
|
|
if (error) {
|
|
console.error('Database deletion error:', error);
|
|
throw error;
|
|
}
|
|
|
|
// Verify the deletion actually worked
|
|
const { data: checkData, error: checkError } = await supabase
|
|
.from('content_submissions')
|
|
.select('id')
|
|
.eq('id', item.id)
|
|
.single();
|
|
|
|
if (checkData && !checkError) {
|
|
console.error('DELETION FAILED: Item still exists in database after delete operation');
|
|
throw new Error('Deletion failed - item still exists in database');
|
|
}
|
|
|
|
const deletedCount = validImageIds.length;
|
|
const orphanedCount = skippedPhotos.length;
|
|
|
|
let description = 'The submission has been permanently deleted';
|
|
if (deletedCount > 0 && orphanedCount > 0) {
|
|
description = `The submission and ${deletedCount} photo(s) have been deleted. ${orphanedCount} photo(s) could not be deleted from storage (orphaned blob URLs)`;
|
|
} else if (deletedCount > 0) {
|
|
description = `The submission and ${deletedCount} associated photo(s) have been permanently deleted`;
|
|
} else if (orphanedCount > 0) {
|
|
description = `The submission has been deleted. ${orphanedCount} photo(s) could not be deleted from storage (orphaned blob URLs)`;
|
|
}
|
|
|
|
toast({
|
|
title: "Submission deleted",
|
|
description,
|
|
});
|
|
|
|
// Remove item from the current view
|
|
// Item was already removed at the start for immediate UI feedback
|
|
} catch (error) {
|
|
console.error('Error deleting submission:', error);
|
|
|
|
// Restore item to list on error since we removed it optimistically
|
|
setItems(prev => {
|
|
// Avoid duplicates
|
|
if (prev.some(i => i.id === item.id)) return prev;
|
|
return [...prev, item];
|
|
});
|
|
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to delete submission",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const getStatusBadgeVariant = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return 'secondary';
|
|
case 'partially_approved':
|
|
return 'secondary';
|
|
case 'flagged':
|
|
return 'destructive';
|
|
case 'approved':
|
|
return 'default';
|
|
case 'rejected':
|
|
return 'destructive';
|
|
default:
|
|
return 'secondary';
|
|
}
|
|
};
|
|
|
|
const getEmptyStateMessage = (entityFilter: EntityFilter, statusFilter: StatusFilter) => {
|
|
const entityLabel = entityFilter === 'all' ? 'items' :
|
|
entityFilter === 'reviews' ? 'reviews' :
|
|
entityFilter === 'photos' ? 'photos' : 'submissions';
|
|
|
|
switch (statusFilter) {
|
|
case 'pending':
|
|
return `No pending ${entityLabel} require moderation at this time.`;
|
|
case 'partially_approved':
|
|
return `No partially approved ${entityLabel} found.`;
|
|
case 'flagged':
|
|
return `No flagged ${entityLabel} found.`;
|
|
case 'approved':
|
|
return `No approved ${entityLabel} found.`;
|
|
case 'rejected':
|
|
return `No rejected ${entityLabel} found.`;
|
|
case 'all':
|
|
return `No ${entityLabel} found.`;
|
|
default:
|
|
return `No ${entityLabel} found for the selected filter.`;
|
|
}
|
|
};
|
|
|
|
const QueueContent = () => {
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center p-8">
|
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (items.length === 0) {
|
|
return (
|
|
<div className="text-center py-8">
|
|
<CheckCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-semibold mb-2">No items found</h3>
|
|
<p className="text-muted-foreground">
|
|
{getEmptyStateMessage(activeEntityFilter, activeStatusFilter)}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{items.map((item) => (
|
|
<Card key={item.id} className={`border-l-4 ${
|
|
item.status === 'flagged' ? 'border-l-red-500' :
|
|
item.status === 'approved' ? 'border-l-green-500' :
|
|
item.status === 'rejected' ? 'border-l-red-400' :
|
|
item.status === 'partially_approved' ? 'border-l-yellow-500' :
|
|
'border-l-amber-500'
|
|
}`}>
|
|
<CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
|
|
<div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
|
|
{item.type === 'review' ? (
|
|
<>
|
|
<MessageSquare className="w-3 h-3 mr-1" />
|
|
Review
|
|
</>
|
|
) : item.submission_type === 'photo' ? (
|
|
<>
|
|
<Image className="w-3 h-3 mr-1" />
|
|
Photo
|
|
</>
|
|
) : (
|
|
<>
|
|
<FileText className="w-3 h-3 mr-1" />
|
|
Submission
|
|
</>
|
|
)}
|
|
</Badge>
|
|
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
|
|
{item.status === 'partially_approved' ? 'Partially Approved' :
|
|
item.status.charAt(0).toUpperCase() + item.status.slice(1)}
|
|
</Badge>
|
|
{item.status === 'partially_approved' && (
|
|
<Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
|
|
<AlertCircle className="w-3 h-3 mr-1" />
|
|
Needs Retry
|
|
</Badge>
|
|
)}
|
|
{lockedSubmissions.has(item.id) && item.type === 'content_submission' && (
|
|
<Badge variant="outline" className="bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700">
|
|
<Lock className="w-3 h-3 mr-1" />
|
|
Locked by Another Moderator
|
|
</Badge>
|
|
)}
|
|
{queue.currentLock?.submissionId === item.id && item.type === 'content_submission' && (
|
|
<Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
|
|
<Lock className="w-3 h-3 mr-1" />
|
|
Claimed by You
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
|
|
<Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
|
|
{format(new Date(item.created_at), isMobile ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm')}
|
|
</div>
|
|
</div>
|
|
|
|
{item.user_profile && (
|
|
<div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
|
|
<Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
|
|
<AvatarImage src={item.user_profile.avatar_url} />
|
|
<AvatarFallback className={isMobile ? "text-xs" : ""}>
|
|
{(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<span className="font-medium">
|
|
{item.user_profile.display_name || item.user_profile.username}
|
|
</span>
|
|
{item.user_profile.display_name && (
|
|
<span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
|
|
@{item.user_profile.username}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
|
|
<CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
|
|
<div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
|
|
{item.type === 'review' ? (
|
|
<div>
|
|
{item.content.title && (
|
|
<h4 className="font-semibold mb-2">{item.content.title}</h4>
|
|
)}
|
|
{item.content.content && (
|
|
<p className="text-sm mb-2">{item.content.content}</p>
|
|
)}
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
|
|
<span>Rating: {item.content.rating}/5</span>
|
|
</div>
|
|
|
|
{/* Entity Names for Reviews */}
|
|
{(item.entity_name || item.park_name) && (
|
|
<div className="space-y-1 mb-2">
|
|
{item.entity_name && (
|
|
<div className="text-sm text-muted-foreground">
|
|
<span className="text-xs">{item.park_name ? 'Ride:' : 'Park:'} </span>
|
|
<span className="text-base font-medium text-foreground">{item.entity_name}</span>
|
|
</div>
|
|
)}
|
|
{item.park_name && (
|
|
<div className="text-sm text-muted-foreground">
|
|
<span className="text-xs">Park: </span>
|
|
<span className="text-base font-medium text-foreground">{item.park_name}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{item.content.photos && item.content.photos.length > 0 && (
|
|
<div className="mt-3">
|
|
<div className="text-sm font-medium mb-2">Attached Photos:</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
{item.content.photos.map((photo: any, index: number) => (
|
|
<div key={index} className="relative cursor-pointer" onClick={() => {
|
|
setSelectedPhotos(item.content.photos.map((p: any, i: number) => ({
|
|
id: `${item.id}-${i}`,
|
|
url: p.url,
|
|
filename: `Review photo ${i + 1}`,
|
|
caption: p.caption
|
|
})));
|
|
setSelectedPhotoIndex(index);
|
|
setPhotoModalOpen(true);
|
|
}}>
|
|
<img
|
|
src={photo.url}
|
|
alt={`Review photo ${index + 1}`}
|
|
className="w-full h-20 object-cover rounded border bg-muted/30 hover:opacity-80 transition-opacity"
|
|
onError={(e) => {
|
|
console.error('Failed to load review photo:', photo.url);
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-xs opacity-0 hover:opacity-100 transition-opacity rounded">
|
|
<Eye className="w-4 h-4" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : item.submission_type === 'photo' ? (
|
|
<div>
|
|
<div className="text-sm text-muted-foreground mb-3">
|
|
Photo Submission
|
|
</div>
|
|
|
|
{/* Submission Title */}
|
|
{item.content.title && (
|
|
<div className="mb-3">
|
|
<div className="text-sm font-medium mb-1">Title:</div>
|
|
<p className="text-sm">{item.content.title}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Submission Caption */}
|
|
{item.content.content?.caption && (
|
|
<div className="mb-3">
|
|
<div className="text-sm font-medium mb-1">Caption:</div>
|
|
<p className="text-sm">{item.content.content.caption}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Photos */}
|
|
{item.content.content?.photos && item.content.content.photos.length > 0 ? (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">Photos ({item.content.content.photos.length}):</div>
|
|
{item.content.content.photos.map((photo: any, index: number) => (
|
|
<div key={index} className="border rounded-lg p-3 space-y-2">
|
|
<div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden cursor-pointer" onClick={() => {
|
|
setSelectedPhotos(item.content.content.photos.map((p: any, i: number) => ({
|
|
id: `${item.id}-${i}`,
|
|
url: p.url,
|
|
filename: p.filename,
|
|
caption: p.caption
|
|
})));
|
|
setSelectedPhotoIndex(index);
|
|
setPhotoModalOpen(true);
|
|
}}>
|
|
<img
|
|
src={photo.url}
|
|
alt={`Photo ${index + 1}: ${photo.filename}`}
|
|
className="w-full max-h-64 object-contain rounded hover:opacity-80 transition-opacity"
|
|
onError={(e) => {
|
|
console.error('Failed to load photo submission:', photo);
|
|
const target = e.target as HTMLImageElement;
|
|
target.style.display = 'none';
|
|
const parent = target.parentElement;
|
|
if (parent) {
|
|
// Create elements safely using DOM API to prevent XSS
|
|
const errorContainer = document.createElement('div');
|
|
errorContainer.className = 'absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs';
|
|
|
|
const errorIcon = document.createElement('div');
|
|
errorIcon.textContent = '⚠️ Image failed to load';
|
|
|
|
const urlDisplay = document.createElement('div');
|
|
urlDisplay.className = 'mt-1 font-mono text-xs break-all px-2';
|
|
// Use textContent to prevent XSS - it escapes HTML automatically
|
|
urlDisplay.textContent = photo.url;
|
|
|
|
errorContainer.appendChild(errorIcon);
|
|
errorContainer.appendChild(urlDisplay);
|
|
parent.appendChild(errorContainer);
|
|
}
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity rounded">
|
|
<Eye className="w-5 h-5" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1 text-xs text-muted-foreground">
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">URL:</span>
|
|
<span className="font-mono text-xs break-all">{photo.url}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Filename:</span>
|
|
<span>{photo.filename || 'Unknown'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Size:</span>
|
|
<span>{photo.size ? `${Math.round(photo.size / 1024)} KB` : 'Unknown'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Type:</span>
|
|
<span>{photo.type || 'Unknown'}</span>
|
|
</div>
|
|
{photo.caption && (
|
|
<div className="pt-1">
|
|
<div className="font-medium">Caption:</div>
|
|
<div className="text-sm text-foreground mt-1">{photo.caption}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-muted-foreground">
|
|
No photos found in submission
|
|
</div>
|
|
)}
|
|
|
|
{/* Context Information */}
|
|
{item.content.content?.context && (
|
|
<div className="mt-3 pt-3 border-t text-xs text-muted-foreground">
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Context:</span>
|
|
<span className="capitalize">
|
|
{typeof item.content.content.context === 'object'
|
|
? (item.content.content.context.ride_id ? 'ride' :
|
|
item.content.content.context.park_id ? 'park' : 'unknown')
|
|
: item.content.content.context}
|
|
</span>
|
|
</div>
|
|
{item.entity_name && (
|
|
<div className="flex justify-between">
|
|
<span className="font-medium text-xs">
|
|
{(typeof item.content.content.context === 'object'
|
|
? (item.content.content.context.ride_id ? 'ride' : 'park')
|
|
: item.content.content.context) === 'ride' ? 'Ride:' : 'Park:'}
|
|
</span>
|
|
<span className="font-medium text-foreground text-base">{item.entity_name}</span>
|
|
</div>
|
|
)}
|
|
{item.park_name &&
|
|
(typeof item.content.content.context === 'object'
|
|
? !!item.content.content.context.ride_id
|
|
: item.content.content.context === 'ride') && (
|
|
<div className="flex justify-between">
|
|
<span className="font-medium text-xs">Park:</span>
|
|
<span className="font-medium text-foreground text-base">{item.park_name}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{/* Composite Submissions (Ride with Manufacturer/Model) */}
|
|
{(item.submission_type === 'ride_with_manufacturer' ||
|
|
item.submission_type === 'ride_with_model' ||
|
|
item.submission_type === 'ride_with_manufacturer_and_model') ? (
|
|
<div className="space-y-4">
|
|
{/* New Manufacturer Card */}
|
|
{item.content.new_manufacturer && (
|
|
<Card className="border-blue-300 dark:border-blue-700">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="bg-blue-100 dark:bg-blue-900">
|
|
New Manufacturer
|
|
</Badge>
|
|
<span className="font-semibold">{item.content.new_manufacturer.name}</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2 text-sm">
|
|
{item.content.new_manufacturer.description && (
|
|
<div>
|
|
<span className="font-medium">Description: </span>
|
|
<span className="text-muted-foreground">{item.content.new_manufacturer.description}</span>
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{item.content.new_manufacturer.person_type && (
|
|
<div>
|
|
<span className="font-medium">Type: </span>
|
|
<span className="text-muted-foreground capitalize">{item.content.new_manufacturer.person_type}</span>
|
|
</div>
|
|
)}
|
|
{item.content.new_manufacturer.founded_year && (
|
|
<div>
|
|
<span className="font-medium">Founded: </span>
|
|
<span className="text-muted-foreground">{item.content.new_manufacturer.founded_year}</span>
|
|
</div>
|
|
)}
|
|
{item.content.new_manufacturer.headquarters_location && (
|
|
<div>
|
|
<span className="font-medium">HQ: </span>
|
|
<span className="text-muted-foreground">{item.content.new_manufacturer.headquarters_location}</span>
|
|
</div>
|
|
)}
|
|
{item.content.new_manufacturer.website_url && (
|
|
<div>
|
|
<span className="font-medium">Website: </span>
|
|
<a href={item.content.new_manufacturer.website_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline text-xs">
|
|
{item.content.new_manufacturer.website_url}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* New Ride Model Card */}
|
|
{item.content.new_ride_model && (
|
|
<Card className="border-purple-300 dark:border-purple-700">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="bg-purple-100 dark:bg-purple-900">
|
|
New Ride Model
|
|
</Badge>
|
|
<span className="font-semibold">{item.content.new_ride_model.name}</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2 text-sm">
|
|
<div>
|
|
<span className="font-medium">Manufacturer: </span>
|
|
<span className="text-muted-foreground">
|
|
{item.content.new_manufacturer
|
|
? item.content.new_manufacturer.name
|
|
: 'Existing manufacturer'}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<span className="font-medium">Category: </span>
|
|
<span className="text-muted-foreground capitalize">{item.content.new_ride_model.category?.replace('_', ' ')}</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">Type: </span>
|
|
<span className="text-muted-foreground">{item.content.new_ride_model.ride_type}</span>
|
|
</div>
|
|
</div>
|
|
{item.content.new_ride_model.description && (
|
|
<div>
|
|
<span className="font-medium">Description: </span>
|
|
<span className="text-muted-foreground">{item.content.new_ride_model.description}</span>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Ride Details Card */}
|
|
<Card className="border-green-300 dark:border-green-700">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="bg-green-100 dark:bg-green-900">
|
|
Ride
|
|
</Badge>
|
|
<span className="font-semibold">{item.content.ride?.name}</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2 text-sm">
|
|
{item.content.ride?.description && (
|
|
<p className="text-muted-foreground">{item.content.ride.description}</p>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{item.content.ride?.category && (
|
|
<div>
|
|
<span className="font-medium">Category: </span>
|
|
<span className="text-muted-foreground capitalize">{item.content.ride.category.replace('_', ' ')}</span>
|
|
</div>
|
|
)}
|
|
{item.content.ride?.status && (
|
|
<div>
|
|
<span className="font-medium">Status: </span>
|
|
<span className="text-muted-foreground">{item.content.ride.status}</span>
|
|
</div>
|
|
)}
|
|
{item.content.ride?.max_speed_kmh && (
|
|
<div>
|
|
<span className="font-medium">Max Speed: </span>
|
|
<span className="text-muted-foreground">
|
|
<MeasurementDisplay value={item.content.ride.max_speed_kmh} type="speed" className="inline" />
|
|
</span>
|
|
</div>
|
|
)}
|
|
{item.content.ride?.max_height_meters && (
|
|
<div>
|
|
<span className="font-medium">Max Height: </span>
|
|
<span className="text-muted-foreground">
|
|
<MeasurementDisplay value={item.content.ride.max_height_meters} type="height" className="inline" />
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
) : (item.submission_type === 'manufacturer' ||
|
|
item.submission_type === 'designer' ||
|
|
item.submission_type === 'operator' ||
|
|
item.submission_type === 'property_owner' ||
|
|
item.submission_type === 'park' ||
|
|
item.submission_type === 'ride' ||
|
|
item.submission_type === 'ride_model' ||
|
|
item.submission_type === 'photo_delete' ||
|
|
item.submission_type === 'photo_edit') ? (
|
|
<SubmissionItemsList
|
|
submissionId={item.id}
|
|
view="detailed"
|
|
showImages={true}
|
|
/>
|
|
) : (
|
|
<div className="rounded-md border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950 p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<AlertTriangle className="h-4 w-4 text-amber-600" />
|
|
<span className="font-medium text-amber-900 dark:text-amber-100">
|
|
Unknown Submission Type
|
|
</span>
|
|
</div>
|
|
<div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
|
|
Type: <code className="bg-amber-100 dark:bg-amber-900 px-1 py-0.5 rounded">{item.submission_type}</code>
|
|
</div>
|
|
{item.content?.action && (
|
|
<div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
|
|
Action: <span className="font-medium capitalize">{item.content.action}</span>
|
|
</div>
|
|
)}
|
|
<details className="text-sm">
|
|
<summary className="cursor-pointer text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100">
|
|
View raw data (for developers)
|
|
</summary>
|
|
<pre className="mt-2 text-xs whitespace-pre-wrap bg-amber-100 dark:bg-amber-900 p-2 rounded overflow-x-auto">
|
|
{JSON.stringify(item.content, null, 2)}
|
|
</pre>
|
|
</details>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Action buttons based on status */}
|
|
{(item.status === 'pending' || item.status === 'flagged') && (
|
|
<>
|
|
{/* Claim button for unclaimed submissions */}
|
|
{!lockedSubmissions.has(item.id) && queue.currentLock?.submissionId !== item.id && (
|
|
<div className="mb-4">
|
|
<Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20">
|
|
<AlertCircle className="h-4 w-4 text-blue-600" />
|
|
<AlertTitle className="text-blue-900 dark:text-blue-100">Unclaimed Submission</AlertTitle>
|
|
<AlertDescription className="text-blue-800 dark:text-blue-200">
|
|
<div className="flex items-center justify-between mt-2">
|
|
<span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
|
|
<Button
|
|
onClick={async () => {
|
|
const success = await queue.claimSubmission(item.id);
|
|
if (success) {
|
|
// Refresh to update UI
|
|
fetchItems(activeEntityFilter, activeStatusFilter, false);
|
|
}
|
|
}}
|
|
disabled={queue.isLoading}
|
|
size="sm"
|
|
className="ml-4"
|
|
>
|
|
<Lock className="w-4 h-4 mr-2" />
|
|
Claim Submission
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
|
|
<Textarea
|
|
id={`notes-${item.id}`}
|
|
placeholder="Add notes about your moderation decision..."
|
|
value={notes[item.id] || ''}
|
|
onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
|
|
onFocus={() => setInteractingWith(prev => new Set(prev).add(item.id))}
|
|
onBlur={() => setInteractingWith(prev => {
|
|
const next = new Set(prev);
|
|
next.delete(item.id);
|
|
return next;
|
|
})}
|
|
rows={2}
|
|
disabled={lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
|
|
/>
|
|
</div>
|
|
|
|
<div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
|
|
{/* Show Review Items button for content submissions */}
|
|
{item.type === 'content_submission' && (
|
|
<Button
|
|
onClick={() => {
|
|
setSelectedSubmissionId(item.id);
|
|
setReviewManagerOpen(true);
|
|
}}
|
|
disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
|
|
variant="outline"
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Review Items
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
|
|
disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
|
|
disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Reset button for rejected items */}
|
|
{item.status === 'rejected' && item.type === 'content_submission' && (
|
|
<div className="space-y-3 pt-4 border-t bg-red-50 dark:bg-red-950/20 -mx-4 px-4 py-3 rounded-b-lg">
|
|
<div className="flex items-start gap-2 text-sm text-red-800 dark:text-red-300">
|
|
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-medium">This submission was rejected</p>
|
|
<p className="text-xs mt-1">You can reset it to pending to re-review and approve it.</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() => handleResetToPending(item)}
|
|
disabled={actionLoading === item.id}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reset to Pending
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Retry/Reset buttons for partially approved items */}
|
|
{item.status === 'partially_approved' && item.type === 'content_submission' && (
|
|
<div className="space-y-3 pt-4 border-t bg-yellow-50 dark:bg-yellow-950/20 -mx-4 px-4 py-3 rounded-b-lg">
|
|
<div className="flex items-start gap-2 text-sm text-yellow-800 dark:text-yellow-300">
|
|
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-medium">This submission was partially approved</p>
|
|
<p className="text-xs mt-1">Some items failed. You can retry them or reset everything to pending.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={() => {
|
|
setSelectedSubmissionId(item.id);
|
|
setReviewManagerOpen(true);
|
|
}}
|
|
disabled={actionLoading === item.id}
|
|
variant="outline"
|
|
className="flex-1"
|
|
>
|
|
<ListTree className="w-4 h-4 mr-2" />
|
|
Review Items
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleResetToPending(item)}
|
|
disabled={actionLoading === item.id}
|
|
variant="outline"
|
|
className="flex-1"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reset All
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleRetryFailedItems(item)}
|
|
disabled={actionLoading === item.id}
|
|
className="flex-1 bg-yellow-600 hover:bg-yellow-700"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Retry Failed
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reviewer Information for approved/rejected items */}
|
|
{(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes) && (
|
|
<div className="space-y-3 pt-4 border-t">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>Reviewed {item.reviewed_at ? format(new Date(item.reviewed_at), 'MMM d, yyyy HH:mm') : 'recently'}</span>
|
|
{item.reviewer_profile && (
|
|
<>
|
|
<span>by</span>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarImage src={item.reviewer_profile.avatar_url} />
|
|
<AvatarFallback className="text-xs">
|
|
{(item.reviewer_profile.display_name || item.reviewer_profile.username)?.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className="font-medium">
|
|
{item.reviewer_profile.display_name || item.reviewer_profile.username}
|
|
</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{item.reviewer_notes && (
|
|
<div className="bg-muted/30 p-3 rounded-lg">
|
|
<p className="text-sm font-medium mb-1">Reviewer Notes:</p>
|
|
<p className="text-sm text-muted-foreground">{item.reviewer_notes}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reverse Decision Buttons */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm">Reverse Decision</Label>
|
|
<Textarea
|
|
placeholder="Add notes about reversing this decision..."
|
|
value={notes[`reverse-${item.id}`] || ''}
|
|
onChange={(e) => setNotes(prev => ({ ...prev, [`reverse-${item.id}`]: e.target.value }))}
|
|
onFocus={() => setInteractingWith(prev => new Set(prev).add(item.id))}
|
|
onBlur={() => setInteractingWith(prev => {
|
|
const next = new Set(prev);
|
|
next.delete(item.id);
|
|
return next;
|
|
})}
|
|
rows={2}
|
|
/>
|
|
<div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
|
|
{item.status === 'approved' && (
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => handleModerationAction(item, 'rejected', notes[`reverse-${item.id}`])}
|
|
disabled={actionLoading === item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Change to Rejected
|
|
</Button>
|
|
)}
|
|
{item.status === 'rejected' && (
|
|
<Button
|
|
onClick={() => handleModerationAction(item, 'approved', notes[`reverse-${item.id}`])}
|
|
disabled={actionLoading === item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Change to Approved
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete button for rejected submissions (admin/superadmin only) */}
|
|
{item.status === 'rejected' && item.type === 'content_submission' && (isAdmin() || isSuperuser()) && (
|
|
<div className="pt-2">
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => handleDeleteSubmission(item)}
|
|
disabled={actionLoading === item.id}
|
|
className={`w-full ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Delete Submission
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
setActiveEntityFilter('all');
|
|
setActiveStatusFilter('pending');
|
|
};
|
|
|
|
const getEntityFilterIcon = (filter: EntityFilter) => {
|
|
switch (filter) {
|
|
case 'reviews': return <MessageSquare className="w-4 h-4" />;
|
|
case 'submissions': return <FileText className="w-4 h-4" />;
|
|
case 'photos': return <Image className="w-4 h-4" />;
|
|
default: return <Filter className="w-4 h-4" />;
|
|
}
|
|
};
|
|
|
|
// Helper to format lock timer
|
|
const formatLockTimer = (ms: number): string => {
|
|
const minutes = Math.floor(ms / 60000);
|
|
const seconds = Math.floor((ms % 60000) / 1000);
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
// Handle claim next action
|
|
const handleClaimNext = async () => {
|
|
const claimedId = await queue.claimNext();
|
|
if (claimedId) {
|
|
// Scroll to claimed submission or fetch to show it
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Queue Statistics & Claim Button */}
|
|
{queue.queueStats && (
|
|
<Card className="bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
|
|
<CardContent className="p-4">
|
|
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 flex-1">
|
|
<div className="text-center sm:text-left">
|
|
<div className="text-2xl font-bold text-primary">{queue.queueStats.pendingCount}</div>
|
|
<div className="text-xs text-muted-foreground">Pending</div>
|
|
</div>
|
|
<div className="text-center sm:text-left">
|
|
<div className="text-2xl font-bold text-amber-600 dark:text-amber-400">{queue.queueStats.highPriorityCount}</div>
|
|
<div className="text-xs text-muted-foreground">High Priority</div>
|
|
</div>
|
|
<div className="text-center sm:text-left">
|
|
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{queue.queueStats.assignedToMe}</div>
|
|
<div className="text-xs text-muted-foreground">Assigned to Me</div>
|
|
</div>
|
|
<div className="text-center sm:text-left">
|
|
<div className="text-2xl font-bold text-green-600 dark:text-green-400">
|
|
{queue.queueStats.avgWaitHours.toFixed(1)}h
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">Avg Wait</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Claim/Lock Status */}
|
|
<div className="flex flex-col gap-2 min-w-[200px]">
|
|
{queue.currentLock ? (
|
|
<>
|
|
{/* Lock Timer */}
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Lock className="w-4 h-4 text-amber-500" />
|
|
<span className="font-medium">
|
|
Lock: {formatLockTimer(queue.getTimeRemaining() || 0)}
|
|
</span>
|
|
</div>
|
|
<Progress
|
|
value={((queue.getTimeRemaining() || 0) / (15 * 60 * 1000)) * 100}
|
|
className="h-2"
|
|
/>
|
|
{/* Extend Lock Button (show when < 5 min left) */}
|
|
{(queue.getTimeRemaining() || 0) < 5 * 60 * 1000 && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => queue.extendLock(queue.currentLock!.submissionId)}
|
|
disabled={queue.isLoading}
|
|
className="w-full"
|
|
>
|
|
<Clock className="w-4 h-4 mr-2" />
|
|
Extend Lock
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => queue.releaseLock(queue.currentLock!.submissionId)}
|
|
disabled={queue.isLoading}
|
|
className="w-full"
|
|
>
|
|
<Unlock className="w-4 h-4 mr-2" />
|
|
Release Lock
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
size="lg"
|
|
onClick={handleClaimNext}
|
|
disabled={queue.isLoading || queue.queueStats.pendingCount === 0}
|
|
className="w-full"
|
|
>
|
|
<Lock className="w-4 h-4 mr-2" />
|
|
Claim Next Submission
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Filter Bar */}
|
|
<div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
|
|
<div className="flex items-center justify-between w-full mb-2 pb-2 border-b border-border">
|
|
<h3 className="text-sm font-medium text-muted-foreground">Moderation Queue</h3>
|
|
</div>
|
|
<div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
|
|
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
|
|
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
|
|
<Select value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
|
|
<SelectTrigger className={isMobile ? "h-10" : ""}>
|
|
<SelectValue>
|
|
<div className="flex items-center gap-2">
|
|
{getEntityFilterIcon(activeEntityFilter)}
|
|
<span className="capitalize">{activeEntityFilter === 'all' ? 'All Items' : activeEntityFilter}</span>
|
|
</div>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">
|
|
<div className="flex items-center gap-2">
|
|
<Filter className="w-4 h-4" />
|
|
All Items
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="reviews">
|
|
<div className="flex items-center gap-2">
|
|
<MessageSquare className="w-4 h-4" />
|
|
Reviews
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="submissions">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="w-4 h-4" />
|
|
Submissions
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="photos">
|
|
<div className="flex items-center gap-2">
|
|
<Image className="w-4 h-4" />
|
|
Photos
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[120px]'}`}>
|
|
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
|
|
<Select value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
|
|
<SelectTrigger className={isMobile ? "h-10" : ""}>
|
|
<SelectValue>
|
|
<span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Status</SelectItem>
|
|
<SelectItem value="pending">Pending</SelectItem>
|
|
<SelectItem value="partially_approved">Partially Approved</SelectItem>
|
|
{activeEntityFilter !== 'submissions' && activeEntityFilter !== 'photos' && (
|
|
<SelectItem value="flagged">Flagged</SelectItem>
|
|
)}
|
|
<SelectItem value="approved">Approved</SelectItem>
|
|
<SelectItem value="rejected">Rejected</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
|
|
<div className={isMobile ? "" : "flex items-end"}>
|
|
<Button
|
|
variant="outline"
|
|
size={isMobile ? "default" : "sm"}
|
|
onClick={clearFilters}
|
|
className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : ''}`}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
Clear Filters
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Active Filters Display */}
|
|
{(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span>Active filters:</span>
|
|
{activeEntityFilter !== 'all' && (
|
|
<Badge variant="secondary" className="flex items-center gap-1">
|
|
{getEntityFilterIcon(activeEntityFilter)}
|
|
{activeEntityFilter}
|
|
</Badge>
|
|
)}
|
|
{activeStatusFilter !== 'pending' && (
|
|
<Badge variant="secondary" className="capitalize">
|
|
{activeStatusFilter}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Auto-refresh Status Indicator */}
|
|
{refreshMode === 'auto' && (
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground px-1">
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
|
<span>Auto-refresh active</span>
|
|
</div>
|
|
<span>•</span>
|
|
<span>Checking every {Math.round(pollInterval / 1000)}s</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* New Items Notification - Enhanced */}
|
|
{newItemsCount > 0 && (
|
|
<div className="sticky top-0 z-10 animate-in fade-in-50">
|
|
<Alert className="border-primary/50 bg-primary/5">
|
|
<AlertCircle className="h-4 w-4 animate-pulse" />
|
|
<AlertTitle>New Items Available</AlertTitle>
|
|
<AlertDescription className="flex items-center justify-between">
|
|
<span>{newItemsCount} new {newItemsCount === 1 ? 'submission' : 'submissions'} pending review</span>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={() => {
|
|
// Merge pending new items into the main queue at the top
|
|
if (pendingNewItems.length > 0) {
|
|
setItems(prev => [...pendingNewItems, ...prev]);
|
|
setPendingNewItems([]);
|
|
}
|
|
setNewItemsCount(0);
|
|
console.log('✅ New items merged into queue');
|
|
}}
|
|
className="ml-4"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Show New Items
|
|
</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
|
|
{/* Queue Content */}
|
|
<QueueContent />
|
|
|
|
{/* Photo Modal */}
|
|
<PhotoModal
|
|
photos={selectedPhotos}
|
|
initialIndex={selectedPhotoIndex}
|
|
isOpen={photoModalOpen}
|
|
onClose={() => setPhotoModalOpen(false)}
|
|
/>
|
|
|
|
{/* Submission Review Manager for multi-entity submissions */}
|
|
{selectedSubmissionId && (
|
|
<SubmissionReviewManager
|
|
submissionId={selectedSubmissionId}
|
|
open={reviewManagerOpen}
|
|
onOpenChange={setReviewManagerOpen}
|
|
onComplete={() => {
|
|
fetchItems(activeEntityFilter, activeStatusFilter);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
ModerationQueue.displayName = 'ModerationQueue'; |