Fix image upload and moderation display

This commit is contained in:
gpt-engineer-app[bot]
2025-10-01 20:28:34 +00:00
parent db839ef957
commit 65c3e92c70
2 changed files with 149 additions and 4 deletions

View File

@@ -1210,13 +1210,137 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</CardContent>
</Card>
</div>
) : (item.submission_type === 'manufacturer' ||
item.submission_type === 'designer' ||
item.submission_type === 'operator' ||
item.submission_type === 'property_owner') ? (
<div>
<div className="text-sm text-muted-foreground mb-3 flex items-center gap-2">
<Badge variant="outline" className="capitalize">
{item.submission_type}
</Badge>
<Badge variant={item.content.action === 'create' ? 'default' : 'secondary'}>
{item.content.action === 'create' ? 'New' : 'Edit'}
</Badge>
</div>
<div className="space-y-3">
{/* Basic Information */}
<div className="space-y-2">
<div>
<span className="text-sm font-medium">Name: </span>
<span className="text-sm">{item.content.name}</span>
</div>
<div>
<span className="text-sm font-medium">Slug: </span>
<span className="text-sm font-mono text-muted-foreground">{item.content.slug}</span>
</div>
{item.content.person_type && (
<div>
<span className="text-sm font-medium">Type: </span>
<span className="text-sm capitalize">{item.content.person_type}</span>
</div>
)}
{item.content.description && (
<div>
<span className="text-sm font-medium">Description: </span>
<p className="text-sm text-muted-foreground mt-1">{item.content.description}</p>
</div>
)}
{item.content.website_url && (
<div>
<span className="text-sm font-medium">Website: </span>
<a href={item.content.website_url} target="_blank" rel="noopener noreferrer"
className="text-sm text-primary hover:underline">
{item.content.website_url}
</a>
</div>
)}
{item.content.founded_year && (
<div>
<span className="text-sm font-medium">Founded: </span>
<span className="text-sm">{item.content.founded_year}</span>
</div>
)}
{item.content.headquarters_location && (
<div>
<span className="text-sm font-medium">Headquarters: </span>
<span className="text-sm">{item.content.headquarters_location}</span>
</div>
)}
</div>
{/* Images */}
{item.content.images?.uploaded && item.content.images.uploaded.length > 0 && (
<div className="space-y-2">
<div className="text-sm font-medium">Images ({item.content.images.uploaded.length}):</div>
<div className="grid grid-cols-2 gap-2">
{item.content.images.uploaded.map((image: any, index: number) => (
<div key={index} className="space-y-1">
<div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden cursor-pointer"
onClick={() => {
setSelectedPhotos(item.content.images.uploaded.map((img: any, i: number) => ({
id: `${item.id}-${i}`,
url: img.url,
filename: `Image ${i + 1}`,
caption: img.caption
})));
setSelectedPhotoIndex(index);
setPhotoModalOpen(true);
}}>
<img
src={image.url}
alt={image.caption || `Image ${index + 1}`}
className="w-full h-32 object-cover rounded hover:opacity-80 transition-opacity"
onError={(e) => {
console.error('Failed to load company image:', image.url);
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
<div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity">
<Eye className="w-5 h-5" />
</div>
</div>
{image.caption && (
<p className="text-xs text-muted-foreground">{image.caption}</p>
)}
</div>
))}
</div>
{/* Image Role Assignments */}
{(item.content.images.banner || item.content.images.card) && (
<div className="mt-2 pt-2 border-t space-y-1">
<div className="text-xs font-medium text-muted-foreground">Image Assignments:</div>
{item.content.images.banner !== undefined && (
<div className="text-xs">
<span className="font-medium">Banner: </span>
<span className="text-muted-foreground">
{item.content.images.banner === null ? 'None' : `Image ${item.content.images.banner + 1}`}
</span>
</div>
)}
{item.content.images.card !== undefined && (
<div className="text-xs">
<span className="font-medium">Card: </span>
<span className="text-muted-foreground">
{item.content.images.card === null ? 'None' : `Image ${item.content.images.card + 1}`}
</span>
</div>
)}
</div>
)}
</div>
)}
</div>
</div>
) : (
<div>
<div className="text-sm text-muted-foreground mb-2">
Type: {item.content.submission_type}
Type: {item.submission_type}
</div>
<pre className="text-sm whitespace-pre-wrap">
{JSON.stringify(item.content.content, null, 2)}
{JSON.stringify(item.content, null, 2)}
</pre>
</div>
)}