mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 14:51:13 -05:00
feat: Enhance moderation queue
This commit is contained in:
gpt-engineer-app[bot]
@@ -3,6 +3,7 @@ import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileT
|
||||
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';
|
||||
@@ -10,6 +11,7 @@ import { supabase } from '@/integrations/supabase/client';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { format } from 'date-fns';
|
||||
import { PhotoModal } from './PhotoModal';
|
||||
|
||||
interface ModerationItem {
|
||||
id: string;
|
||||
@@ -22,7 +24,10 @@ interface ModerationItem {
|
||||
user_profile?: {
|
||||
username: string;
|
||||
display_name?: string;
|
||||
avatar_url?: string;
|
||||
};
|
||||
entity_name?: string;
|
||||
park_name?: string;
|
||||
}
|
||||
|
||||
type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
|
||||
@@ -39,6 +44,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
const [notes, setNotes] = useState<Record<string, string>>({});
|
||||
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 { toast } = useToast();
|
||||
const { isAdmin, isSuperuser } = useUserRole();
|
||||
|
||||
@@ -83,7 +91,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
submissionStatuses = ['pending'];
|
||||
}
|
||||
|
||||
// Fetch reviews
|
||||
// Fetch reviews with entity data
|
||||
let reviews = [];
|
||||
if ((entityFilter === 'all' || entityFilter === 'reviews') && reviewStatuses.length > 0) {
|
||||
const { data: reviewsData, error: reviewsError } = await supabase
|
||||
@@ -96,7 +104,18 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
created_at,
|
||||
user_id,
|
||||
moderation_status,
|
||||
photos
|
||||
photos,
|
||||
park_id,
|
||||
ride_id,
|
||||
parks:park_id (
|
||||
name
|
||||
),
|
||||
rides:ride_id (
|
||||
name,
|
||||
parks:park_id (
|
||||
name
|
||||
)
|
||||
)
|
||||
`)
|
||||
.in('moderation_status', reviewStatuses)
|
||||
.order('created_at', { ascending: false });
|
||||
@@ -105,7 +124,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
reviews = reviewsData || [];
|
||||
}
|
||||
|
||||
// Fetch content submissions
|
||||
// Fetch content submissions with entity data
|
||||
let submissions = [];
|
||||
if ((entityFilter === 'all' || entityFilter === 'submissions' || entityFilter === 'photos') && submissionStatuses.length > 0) {
|
||||
let query = supabase
|
||||
@@ -131,7 +150,47 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (submissionsError) throw submissionsError;
|
||||
submissions = submissionsData || [];
|
||||
|
||||
// Get entity data for photo submissions
|
||||
let submissionsWithEntities = submissionsData || [];
|
||||
for (const submission of submissionsWithEntities) {
|
||||
if (submission.submission_type === 'photo' && submission.content && typeof submission.content === 'object') {
|
||||
const contentObj = submission.content as any;
|
||||
const context = contentObj.content?.context;
|
||||
const rideId = contentObj.content?.ride_id;
|
||||
const parkId = contentObj.content?.park_id;
|
||||
|
||||
if (context === 'ride' && rideId) {
|
||||
const { data: rideData } = await supabase
|
||||
.from('rides')
|
||||
.select(`
|
||||
name,
|
||||
parks:park_id (
|
||||
name
|
||||
)
|
||||
`)
|
||||
.eq('id', rideId)
|
||||
.single();
|
||||
|
||||
if (rideData) {
|
||||
(submission as any).entity_name = rideData.name;
|
||||
(submission as any).park_name = rideData.parks?.name;
|
||||
}
|
||||
} else if (context === 'park' && parkId) {
|
||||
const { data: parkData } = await supabase
|
||||
.from('parks')
|
||||
.select('name')
|
||||
.eq('id', parkId)
|
||||
.single();
|
||||
|
||||
if (parkData) {
|
||||
(submission as any).entity_name = parkData.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
submissions = submissionsWithEntities;
|
||||
}
|
||||
|
||||
// Get unique user IDs to fetch profiles
|
||||
@@ -140,25 +199,39 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
...submissions.map(s => s.user_id)
|
||||
];
|
||||
|
||||
// Fetch profiles for all users
|
||||
// Fetch profiles for all users with avatars
|
||||
const { data: profiles } = await supabase
|
||||
.from('profiles')
|
||||
.select('user_id, username, display_name')
|
||||
.select('user_id, username, display_name, avatar_url')
|
||||
.in('user_id', userIds);
|
||||
|
||||
const profileMap = new Map(profiles?.map(p => [p.user_id, p]) || []);
|
||||
|
||||
// Combine and format items
|
||||
const formattedItems: ModerationItem[] = [
|
||||
...reviews.map(review => ({
|
||||
id: review.id,
|
||||
type: 'review' as const,
|
||||
content: review,
|
||||
created_at: review.created_at,
|
||||
user_id: review.user_id,
|
||||
status: review.moderation_status,
|
||||
user_profile: profileMap.get(review.user_id),
|
||||
})),
|
||||
...reviews.map(review => {
|
||||
let entity_name = '';
|
||||
let park_name = '';
|
||||
|
||||
if ((review as any).rides) {
|
||||
entity_name = (review as any).rides.name;
|
||||
park_name = (review as any).rides.parks?.name;
|
||||
} else if ((review as any).parks) {
|
||||
entity_name = (review as any).parks.name;
|
||||
}
|
||||
|
||||
return {
|
||||
id: review.id,
|
||||
type: 'review' as const,
|
||||
content: review,
|
||||
created_at: review.created_at,
|
||||
user_id: review.user_id,
|
||||
status: review.moderation_status,
|
||||
user_profile: profileMap.get(review.user_id),
|
||||
entity_name,
|
||||
park_name,
|
||||
};
|
||||
}),
|
||||
...submissions.map(submission => ({
|
||||
id: submission.id,
|
||||
type: 'content_submission' as const,
|
||||
@@ -168,6 +241,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
status: submission.status,
|
||||
submission_type: submission.submission_type,
|
||||
user_profile: profileMap.get(submission.user_id),
|
||||
entity_name: (submission as any).entity_name,
|
||||
park_name: (submission as any).park_name,
|
||||
})),
|
||||
];
|
||||
|
||||
@@ -524,16 +599,23 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
</div>
|
||||
|
||||
{item.user_profile && (
|
||||
<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}
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={item.user_profile.avatar_url} />
|
||||
<AvatarFallback>
|
||||
{(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 text-xs">
|
||||
@{item.user_profile.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
@@ -556,19 +638,28 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
<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">
|
||||
<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"
|
||||
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';
|
||||
}}
|
||||
onLoad={() => console.log('Review photo loaded:', photo.url)}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-muted/80 text-xs text-muted-foreground opacity-0 hover:opacity-100 transition-opacity">
|
||||
Photo {index + 1}
|
||||
<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>
|
||||
))}
|
||||
@@ -604,11 +695,20 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
<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">
|
||||
<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"
|
||||
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;
|
||||
@@ -625,6 +725,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
}}
|
||||
onLoad={() => console.log('Photo submission loaded:', photo.url)}
|
||||
/>
|
||||
<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">
|
||||
@@ -666,16 +769,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
<span className="font-medium">Context:</span>
|
||||
<span className="capitalize">{item.content.content.context}</span>
|
||||
</div>
|
||||
{item.content.content.ride_id && (
|
||||
{item.entity_name && (
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">Ride ID:</span>
|
||||
<span className="font-mono">{item.content.content.ride_id}</span>
|
||||
<span className="font-medium">{item.content.content.context === 'ride' ? 'Ride:' : 'Park:'}</span>
|
||||
<span className="font-medium text-foreground">{item.entity_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{item.content.content.park_id && (
|
||||
{item.park_name && item.content.content.context === 'ride' && (
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">Park ID:</span>
|
||||
<span className="font-mono">{item.content.content.park_id}</span>
|
||||
<span className="font-medium">Park:</span>
|
||||
<span className="font-medium text-foreground">{item.park_name}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -865,6 +968,14 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
|
||||
{/* Queue Content */}
|
||||
<QueueContent />
|
||||
|
||||
{/* Photo Modal */}
|
||||
<PhotoModal
|
||||
photos={selectedPhotos}
|
||||
initialIndex={selectedPhotoIndex}
|
||||
isOpen={photoModalOpen}
|
||||
onClose={() => setPhotoModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
106
src/components/moderation/PhotoModal.tsx
Normal file
106
src/components/moderation/PhotoModal.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { useState } from 'react';
|
||||
import { X, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface PhotoModalProps {
|
||||
photos: Array<{
|
||||
id: string;
|
||||
url: string;
|
||||
filename?: string;
|
||||
caption?: string;
|
||||
}>;
|
||||
initialIndex: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||
const currentPhoto = photos[currentIndex];
|
||||
|
||||
const goToPrevious = () => {
|
||||
setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
|
||||
};
|
||||
|
||||
const goToNext = () => {
|
||||
setCurrentIndex((prev) => (prev < photos.length - 1 ? prev + 1 : 0));
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowLeft') goToPrevious();
|
||||
if (e.key === 'ArrowRight') goToNext();
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-7xl w-full max-h-[90vh] p-0">
|
||||
<div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}>
|
||||
{/* Header */}
|
||||
<div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4">
|
||||
<div className="flex items-center justify-between text-white">
|
||||
<div>
|
||||
<h3 className="font-medium">
|
||||
{currentPhoto?.filename || `Photo ${currentIndex + 1}`}
|
||||
</h3>
|
||||
{photos.length > 1 && (
|
||||
<p className="text-sm text-white/70">
|
||||
{currentIndex + 1} of {photos.length}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="text-white hover:bg-white/10"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div className="flex items-center justify-center min-h-[400px] max-h-[80vh]">
|
||||
<img
|
||||
src={currentPhoto?.url}
|
||||
alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
{photos.length > 1 && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={goToPrevious}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
|
||||
>
|
||||
<ChevronLeft className="h-6 w-6" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={goToNext}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
|
||||
>
|
||||
<ChevronRight className="h-6 w-6" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Caption */}
|
||||
{currentPhoto?.caption && (
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||
<p className="text-white text-sm">{currentPhoto.caption}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user