feat: Add submitter fields to entity forms

This commit is contained in:
gpt-engineer-app[bot]
2025-10-29 15:30:15 +00:00
parent 107191c125
commit 9aaff5a10b
10 changed files with 529 additions and 3 deletions

View File

@@ -1,5 +1,5 @@
import { memo, useState, useCallback } from 'react';
import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle, Edit } from 'lucide-react';
import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle, Edit, Info, ExternalLink, ChevronDown } from 'lucide-react';
import { usePhotoSubmissionItems } from '@/hooks/usePhotoSubmissionItems';
import { PhotoGrid } from '@/components/common/PhotoGrid';
import { normalizePhotoData } from '@/lib/photoHelpers';
@@ -14,6 +14,7 @@ import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { format } from 'date-fns';
import { SubmissionItemsList } from './SubmissionItemsList';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -505,6 +506,42 @@ export const QueueItem = memo(({
)}
<div className={isMobile ? 'space-y-4 mt-4' : 'grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start mt-4'}>
{/* Submitter Context - shown before moderator can add their notes */}
{(item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
<div className="space-y-3 mb-4 p-4 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg lg:col-span-2">
<div className="flex items-center gap-2 mb-2">
<Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
<h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100">
Submitter Context
</h4>
</div>
{item.submission_items?.[0]?.item_data?.source_url && (
<div className="text-sm">
<span className="font-medium text-blue-900 dark:text-blue-100">Source: </span>
<a
href={item.submission_items[0].item_data.source_url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline dark:text-blue-400 inline-flex items-center gap-1"
>
{item.submission_items[0].item_data.source_url}
<ExternalLink className="w-3 h-3" />
</a>
</div>
)}
{item.submission_items?.[0]?.item_data?.submission_notes && (
<div className="text-sm">
<span className="font-medium text-blue-900 dark:text-blue-100">Submitter Notes: </span>
<p className="mt-1 whitespace-pre-wrap text-blue-800 dark:text-blue-200">
{item.submission_items[0].item_data.submission_notes}
</p>
</div>
)}
</div>
)}
{/* Left: Notes textarea */}
<div className="space-y-2">
<Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
@@ -648,7 +685,7 @@ export const QueueItem = memo(({
)}
{/* Reviewer Information for approved/rejected items */}
{(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes) && (
{(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes || item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_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" />
@@ -672,9 +709,43 @@ export const QueueItem = memo(({
)}
</div>
{/* Submitter Context (shown in collapsed state after review) */}
{(item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
<Collapsible>
<CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:underline">
<ChevronDown className="w-4 h-4" />
View Submitter Context
</CollapsibleTrigger>
<CollapsibleContent className="mt-2 bg-muted/30 p-3 rounded-lg">
{item.submission_items?.[0]?.item_data?.source_url && (
<div className="text-sm mb-2">
<span className="font-medium">Source: </span>
<a
href={item.submission_items[0].item_data.source_url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline inline-flex items-center gap-1"
>
{item.submission_items[0].item_data.source_url}
<ExternalLink className="w-3 h-3" />
</a>
</div>
)}
{item.submission_items?.[0]?.item_data?.submission_notes && (
<div className="text-sm">
<span className="font-medium">Submitter Notes: </span>
<p className="mt-1 whitespace-pre-wrap text-muted-foreground">
{item.submission_items[0].item_data.submission_notes}
</p>
</div>
)}
</CollapsibleContent>
</Collapsible>
)}
{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 font-medium mb-1">Moderator Notes:</p>
<p className="text-sm text-muted-foreground">{item.reviewer_notes}</p>
</div>
)}