pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 21:11:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor moderation queue tabs

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 18:49:16 +00:00
parent 6e05ef886d
commit 3874805210
1 changed files with 271 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
src/components/moderation/ModerationQueue.tsx
View File

@@ -1,10 +1,11 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { CheckCircle, XCircle, Eye, Calendar, User } from 'lucide-react'; import { CheckCircle, XCircle, Eye, Calendar, User, Filter } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { supabase } from '@/integrations/supabase/client'; import { supabase } from '@/integrations/supabase/client';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { format } from 'date-fns'; import { format } from 'date-fns';
@@ -27,47 +28,88 @@ export function ModerationQueue() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [actionLoading, setActionLoading] = useState<string | null>(null); const [actionLoading, setActionLoading] = useState<string | null>(null);
const [notes, setNotes] = useState<Record<string, string>>({}); const [notes, setNotes] = useState<Record<string, string>>({});
const [activeFilter, setActiveFilter] = useState<string>('pending');
const { toast } = useToast(); const { toast } = useToast();
const fetchItems = async () => { const fetchItems = async (filter: string = 'pending') => {
try { try {
// Fetch pending reviews with profile data setLoading(true);
const { data: reviews, error: reviewsError } = await supabase
.from('reviews') let reviewStatuses: string[] = [];
.select(` let submissionStatuses: string[] = [];
id,
title, // Define status filters
content, switch (filter) {
rating, case 'all':
created_at, reviewStatuses = ['pending', 'flagged', 'approved', 'rejected'];
user_id, submissionStatuses = ['pending', 'approved', 'rejected'];
moderation_status break;
`) case 'pending':
.in('moderation_status', ['pending', 'flagged']) reviewStatuses = ['pending'];
.order('created_at', { ascending: true }); submissionStatuses = ['pending'];
break;
case 'flagged':
reviewStatuses = ['flagged'];
submissionStatuses = []; // Content submissions don't have flagged status
break;
case 'approved':
reviewStatuses = ['approved'];
submissionStatuses = ['approved'];
break;
case 'rejected':
reviewStatuses = ['rejected'];
submissionStatuses = ['rejected'];
break;
default:
reviewStatuses = ['pending', 'flagged'];
submissionStatuses = ['pending'];
}
if (reviewsError) throw reviewsError; // Fetch reviews
let reviews = [];
if (reviewStatuses.length > 0) {
const { data: reviewsData, error: reviewsError } = await supabase
.from('reviews')
.select(`
id,
title,
content,
rating,
created_at,
user_id,
moderation_status
`)
.in('moderation_status', reviewStatuses)
.order('created_at', { ascending: false });
// Fetch pending content submissions if (reviewsError) throw reviewsError;
const { data: submissions, error: submissionsError } = await supabase reviews = reviewsData || [];
.from('content_submissions') }
.select(`
id,
content,
submission_type,
created_at,
user_id,
status
`)
.eq('status', 'pending')
.order('created_at', { ascending: true });
if (submissionsError) throw submissionsError; // Fetch content submissions
let submissions = [];
if (submissionStatuses.length > 0) {
const { data: submissionsData, error: submissionsError } = await supabase
.from('content_submissions')
.select(`
id,
content,
submission_type,
created_at,
user_id,
status
`)
.in('status', submissionStatuses)
.order('created_at', { ascending: false });
if (submissionsError) throw submissionsError;
submissions = submissionsData || [];
}
// Get unique user IDs to fetch profiles // Get unique user IDs to fetch profiles
const userIds = [ const userIds = [
...(reviews || []).map(r => r.user_id), ...reviews.map(r => r.user_id),
...(submissions || []).map(s => s.user_id) ...submissions.map(s => s.user_id)
]; ];
// Fetch profiles for all users // Fetch profiles for all users
@@ -80,7 +122,7 @@ export function ModerationQueue() {
// Combine and format items // Combine and format items
const formattedItems: ModerationItem[] = [ const formattedItems: ModerationItem[] = [
...(reviews || []).map(review => ({ ...reviews.map(review => ({
id: review.id, id: review.id,
type: 'review' as const, type: 'review' as const,
content: review, content: review,
@@ -89,7 +131,7 @@ export function ModerationQueue() {
status: review.moderation_status, status: review.moderation_status,
user_profile: profileMap.get(review.user_id), user_profile: profileMap.get(review.user_id),
})), })),
...(submissions || []).map(submission => ({ ...submissions.map(submission => ({
id: submission.id, id: submission.id,
type: 'content_submission' as const, type: 'content_submission' as const,
content: submission, content: submission,
@@ -100,8 +142,8 @@ export function ModerationQueue() {
})), })),
]; ];
// Sort by creation date // Sort by creation date (newest first for better UX)
formattedItems.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()); formattedItems.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
setItems(formattedItems); setItems(formattedItems);
} catch (error) { } catch (error) {
@@ -117,8 +159,8 @@ export function ModerationQueue() {
}; };
useEffect(() => { useEffect(() => {
fetchItems(); fetchItems(activeFilter);
}, []); }, [activeFilter]);
const handleModerationAction = async ( const handleModerationAction = async (
item: ModerationItem, item: ModerationItem,
@@ -151,8 +193,13 @@ export function ModerationQueue() {
description: `The ${item.type} has been ${action}`, description: `The ${item.type} has been ${action}`,
}); });
// Remove item from queue // Remove item from queue if it's no longer in the active filter
setItems(prev => prev.filter(i => i.id !== item.id)); if (activeFilter === 'pending' || activeFilter === 'flagged') {
setItems(prev => prev.filter(i => i.id !== item.id));
} else {
// Refresh the queue to show updated status
fetchItems(activeFilter);
}
// Clear notes // Clear notes
setNotes(prev => { setNotes(prev => {
@@ -172,120 +219,194 @@ export function ModerationQueue() {
} }
}; };
if (loading) { const getStatusBadgeVariant = (status: string) => {
return ( switch (status) {
<div className="flex items-center justify-center p-8"> case 'pending':
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div> return 'secondary';
</div> case 'flagged':
); return 'destructive';
} case 'approved':
return 'default';
case 'rejected':
return 'outline';
default:
return 'secondary';
}
};
if (items.length === 0) { const getEmptyStateMessage = (filter: string) => {
return ( switch (filter) {
<div className="text-center py-8"> case 'pending':
<CheckCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" /> return 'No pending items require moderation at this time.';
<h3 className="text-lg font-semibold mb-2">Queue is empty</h3> case 'flagged':
<p className="text-muted-foreground"> return 'No flagged content found.';
No pending items require moderation at this time. case 'approved':
</p> return 'No approved content found.';
</div> case 'rejected':
); return 'No rejected content found.';
} case 'all':
return 'No moderation items found.';
default:
return 'No items found for the selected filter.';
}
};
return ( const QueueContent = () => {
<div className="space-y-6"> if (loading) {
{items.map((item) => ( return (
<Card key={item.id} className="border-l-4 border-l-amber-500"> <div className="flex items-center justify-center p-8">
<CardHeader className="pb-4"> <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
<div className="flex items-center justify-between"> </div>
<div className="flex items-center gap-3"> );
<Badge variant={item.status === 'flagged' ? 'destructive' : 'secondary'}> }
{item.type === 'review' ? 'Review' : 'Submission'}
</Badge> if (items.length === 0) {
{item.status === 'flagged' && ( return (
<Badge variant="destructive">Flagged</Badge> <div className="text-center py-8">
)} <CheckCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
</div> <h3 className="text-lg font-semibold mb-2">No items found</h3>
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <p className="text-muted-foreground">
<Calendar className="w-4 h-4" /> {getEmptyStateMessage(activeFilter)}
{format(new Date(item.created_at), 'MMM d, yyyy HH:mm')} </p>
</div> </div>
</div> );
}
{item.user_profile && (
<div className="flex items-center gap-2 text-sm"> return (
<User className="w-4 h-4 text-muted-foreground" /> <div className="space-y-6">
<span className="font-medium"> {items.map((item) => (
{item.user_profile.display_name || item.user_profile.username} <Card key={item.id} className={`border-l-4 ${
</span> item.status === 'flagged' ? 'border-l-red-500' :
{item.user_profile.display_name && ( item.status === 'approved' ? 'border-l-green-500' :
<span className="text-muted-foreground"> item.status === 'rejected' ? 'border-l-red-400' :
@{item.user_profile.username} 'border-l-amber-500'
</span> }`}>
)} <CardHeader className="pb-4">
</div> <div className="flex items-center justify-between">
)} <div className="flex items-center gap-3">
</CardHeader> <Badge variant={getStatusBadgeVariant(item.status)}>
{item.type === 'review' ? 'Review' : 'Submission'}
<CardContent className="space-y-4"> </Badge>
<div className="bg-muted/50 p-4 rounded-lg"> <Badge variant={getStatusBadgeVariant(item.status)}>
{item.type === 'review' ? ( {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
<div> </Badge>
{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">
<span>Rating: {item.content.rating}/5</span>
</div>
</div> </div>
) : ( <div className="flex items-center gap-2 text-sm text-muted-foreground">
<div> <Calendar className="w-4 h-4" />
<div className="text-sm text-muted-foreground mb-2"> {format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
Type: {item.content.submission_type} </div>
</div> </div>
<pre className="text-sm whitespace-pre-wrap">
{JSON.stringify(item.content.content, null, 2)} {item.user_profile && (
</pre> <div className="flex items-center gap-2 text-sm">
<User className="w-4 h-4 text-muted-foreground" />
<span className="font-medium">
{item.user_profile.display_name || item.user_profile.username}
</span>
{item.user_profile.display_name && (
<span className="text-muted-foreground">
@{item.user_profile.username}
</span>
)}
</div> </div>
)} )}
</div> </CardHeader>
<div className="space-y-2"> <CardContent className="space-y-4">
<Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label> <div className="bg-muted/50 p-4 rounded-lg">
<Textarea {item.type === 'review' ? (
id={`notes-${item.id}`} <div>
placeholder="Add notes about your moderation decision..." {item.content.title && (
value={notes[item.id] || ''} <h4 className="font-semibold mb-2">{item.content.title}</h4>
onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))} )}
rows={2} {item.content.content && (
/> <p className="text-sm mb-2">{item.content.content}</p>
</div> )}
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="flex gap-2 pt-2"> <span>Rating: {item.content.rating}/5</span>
<Button </div>
onClick={() => handleModerationAction(item, 'approved', notes[item.id])} </div>
disabled={actionLoading === item.id} ) : (
className="flex-1" <div>
> <div className="text-sm text-muted-foreground mb-2">
<CheckCircle className="w-4 h-4 mr-2" /> Type: {item.content.submission_type}
Approve </div>
</Button> <pre className="text-sm whitespace-pre-wrap">
<Button {JSON.stringify(item.content.content, null, 2)}
variant="destructive" </pre>
onClick={() => handleModerationAction(item, 'rejected', notes[item.id])} </div>
disabled={actionLoading === item.id} )}
className="flex-1" </div>
>
<XCircle className="w-4 h-4 mr-2" /> {(item.status === 'pending' || item.status === 'flagged') && (
Reject <>
</Button> <div className="space-y-2">
</div> <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
</CardContent> <Textarea
</Card> id={`notes-${item.id}`}
))} placeholder="Add notes about your moderation decision..."
</div> value={notes[item.id] || ''}
onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
rows={2}
/>
</div>
<div className="flex gap-2 pt-2">
<Button
onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
disabled={actionLoading === item.id}
className="flex-1"
>
<CheckCircle className="w-4 h-4 mr-2" />
Approve
</Button>
<Button
variant="destructive"
onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
disabled={actionLoading === item.id}
className="flex-1"
>
<XCircle className="w-4 h-4 mr-2" />
Reject
</Button>
</div>
</>
)}
</CardContent>
</Card>
))}
</div>
);
};
return (
<Tabs value={activeFilter} onValueChange={setActiveFilter} className="space-y-4">
<TabsList className="grid w-full grid-cols-5">
<TabsTrigger value="all" className="flex items-center gap-2">
<Filter className="w-4 h-4" />
All
</TabsTrigger>
<TabsTrigger value="pending" className="flex items-center gap-2">
<Eye className="w-4 h-4" />
Pending
</TabsTrigger>
<TabsTrigger value="flagged" className="flex items-center gap-2">
<XCircle className="w-4 h-4" />
Flagged
</TabsTrigger>
<TabsTrigger value="approved" className="flex items-center gap-2">
<CheckCircle className="w-4 h-4" />
Approved
</TabsTrigger>
<TabsTrigger value="rejected" className="flex items-center gap-2">
<XCircle className="w-4 h-4" />
Rejected
</TabsTrigger>
</TabsList>
<TabsContent value={activeFilter}>
<QueueContent />
</TabsContent>
</Tabs>
); );
} }