mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 11:31:13 -05:00
Fix TypeScript errors in moderation queue
This commit is contained in:
gpt-engineer-app[bot]
@@ -2,6 +2,8 @@ import { useState, useEffect, useImperativeHandle, forwardRef, useCallback, useR
|
||||
import { CheckCircle, XCircle, Filter, MessageSquare, FileText, Image, X, 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 } from '@/components/ui/card';
|
||||
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';
|
||||
@@ -1473,731 +1475,6 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
key={item.id}
|
||||
className={`border-l-4 transition-opacity duration-200 ${
|
||||
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'
|
||||
}`}
|
||||
style={{
|
||||
opacity: actionLoading === item.id ? 0.5 : 1,
|
||||
pointerEvents: actionLoading === item.id ? 'none' : 'auto'
|
||||
}}
|
||||
>
|
||||
<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 () => {
|
||||
await queue.claimSubmission(item.id);
|
||||
// No refresh needed - realtime handles it
|
||||
}}
|
||||
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');
|
||||
|
||||
Reference in New Issue
Block a user