COI gate + admin review, mobile file viewer fixes for iOS
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m12s

- Integrate COI declaration dialog into jury evaluate page (blocks evaluation until declared)
- Add COI review section to admin round page with clear/reassign/note actions
- Fix mobile: remove inline preview (viewport too small), add labeled buttons
- Fix iOS: open-in-new-tab uses synchronous window.open to avoid popup blocker
- Fix iOS: download falls back to direct link if fetch+blob fails (CORS/Safari)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-18 14:34:27 +01:00
parent 0f6473c999
commit 8d28104d51
3 changed files with 298 additions and 44 deletions

View File

@@ -82,6 +82,8 @@ import {
ChevronsUpDown,
Search,
MoreHorizontal,
ShieldAlert,
Eye,
} from 'lucide-react'
import {
Command,
@@ -1755,6 +1757,9 @@ export default function RoundDetailPage() {
{/* Individual Assignments Table */}
<IndividualAssignmentsTable roundId={roundId} projectStates={projectStates} />
{/* Conflict of Interest Declarations */}
<COIReviewSection roundId={roundId} />
{/* Unassigned Queue */}
<RoundUnassignedQueue roundId={roundId} requiredReviews={(config.requiredReviewsPerProject as number) || 3} />
@@ -3264,3 +3269,148 @@ function EvaluationCriteriaEditor({ roundId }: { roundId: string }) {
</Card>
)
}
// ── COI Review Section ────────────────────────────────────────────────────
function COIReviewSection({ roundId }: { roundId: string }) {
const utils = trpc.useUtils()
const { data: declarations, isLoading } = trpc.evaluation.listCOIByStage.useQuery(
{ roundId },
{ refetchInterval: 15_000 },
)
const reviewMutation = trpc.evaluation.reviewCOI.useMutation({
onSuccess: () => {
utils.evaluation.listCOIByStage.invalidate({ roundId })
toast.success('COI review updated')
},
onError: (err) => toast.error(err.message),
})
// Don't show section if no declarations
if (!isLoading && (!declarations || declarations.length === 0)) {
return null
}
const conflictCount = declarations?.filter((d) => d.hasConflict).length ?? 0
const unreviewedCount = declarations?.filter((d) => d.hasConflict && !d.reviewedAt).length ?? 0
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle className="text-base flex items-center gap-2">
<ShieldAlert className="h-4 w-4" />
Conflict of Interest Declarations
</CardTitle>
<CardDescription>
{declarations?.length ?? 0} declaration{(declarations?.length ?? 0) !== 1 ? 's' : ''}
{conflictCount > 0 && (
<> &mdash; <span className="text-amber-600 font-medium">{conflictCount} conflict{conflictCount !== 1 ? 's' : ''}</span></>
)}
{unreviewedCount > 0 && (
<> ({unreviewedCount} pending review)</>
)}
</CardDescription>
</div>
</div>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="space-y-2">
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
</div>
) : (
<div className="space-y-1 max-h-[400px] overflow-y-auto">
<div className="grid grid-cols-[1fr_1fr_80px_100px_100px] gap-2 text-xs text-muted-foreground font-medium px-3 py-2 sticky top-0 bg-background border-b">
<span>Juror</span>
<span>Project</span>
<span>Conflict</span>
<span>Type</span>
<span>Action</span>
</div>
{declarations?.map((coi: any, idx: number) => (
<div
key={coi.id}
className={cn(
'grid grid-cols-[1fr_1fr_80px_100px_100px] gap-2 items-center px-3 py-2 rounded-md text-sm transition-colors',
idx % 2 === 1 ? 'bg-muted/20' : 'hover:bg-muted/20',
coi.hasConflict && !coi.reviewedAt && 'border-l-4 border-l-amber-500',
)}
>
<span className="truncate">{coi.user?.name || coi.user?.email || 'Unknown'}</span>
<span className="truncate text-muted-foreground">{coi.assignment?.project?.title || 'Unknown'}</span>
<Badge
variant="outline"
className={cn(
'text-[10px] justify-center',
coi.hasConflict
? 'bg-red-50 text-red-700 border-red-200'
: 'bg-emerald-50 text-emerald-700 border-emerald-200',
)}
>
{coi.hasConflict ? 'Yes' : 'No'}
</Badge>
<span className="text-xs text-muted-foreground truncate">
{coi.hasConflict ? (coi.conflictType || 'Unspecified') : '\u2014'}
</span>
{coi.hasConflict ? (
coi.reviewedAt ? (
<Badge
variant="outline"
className={cn(
'text-[10px] justify-center',
coi.reviewAction === 'cleared'
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
: coi.reviewAction === 'reassigned'
? 'bg-blue-50 text-blue-700 border-blue-200'
: 'bg-gray-50 text-gray-600 border-gray-200',
)}
>
{coi.reviewAction === 'cleared' ? 'Cleared' : coi.reviewAction === 'reassigned' ? 'Reassigned' : 'Noted'}
</Badge>
) : (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 text-xs">
<Eye className="h-3 w-3 mr-1" />
Review
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => reviewMutation.mutate({ id: coi.id, reviewAction: 'cleared' })}
disabled={reviewMutation.isPending}
>
<CheckCircle2 className="h-3.5 w-3.5 mr-2 text-emerald-600" />
Clear no real conflict
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => reviewMutation.mutate({ id: coi.id, reviewAction: 'reassigned' })}
disabled={reviewMutation.isPending}
>
<UserPlus className="h-3.5 w-3.5 mr-2 text-blue-600" />
Reassign to another juror
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => reviewMutation.mutate({ id: coi.id, reviewAction: 'noted' })}
disabled={reviewMutation.isPending}
>
<FileText className="h-3.5 w-3.5 mr-2 text-gray-600" />
Note keep as is
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
) : (
<span className="text-xs text-muted-foreground">&mdash;</span>
)}
</div>
))}
</div>
)}
</CardContent>
</Card>
)
}

View File

@@ -15,7 +15,8 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { cn } from '@/lib/utils'
import { MultiWindowDocViewer } from '@/components/jury/multi-window-doc-viewer'
import { Badge } from '@/components/ui/badge'
import { ArrowLeft, Save, Send, AlertCircle, ThumbsUp, ThumbsDown, Clock, CheckCircle2 } from 'lucide-react'
import { COIDeclarationDialog } from '@/components/forms/coi-declaration-dialog'
import { ArrowLeft, Save, Send, AlertCircle, ThumbsUp, ThumbsDown, Clock, CheckCircle2, ShieldAlert } from 'lucide-react'
import { toast } from 'sonner'
import type { EvaluationConfig } from '@/types/competition-configs'
@@ -68,6 +69,14 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
{ enabled: !!myAssignment?.id }
)
// COI (Conflict of Interest) check
const { data: coiStatus, isLoading: coiLoading } = trpc.evaluation.getCOIStatus.useQuery(
{ assignmentId: myAssignment?.id ?? '' },
{ enabled: !!myAssignment?.id }
)
const [coiCompleted, setCOICompleted] = useState(false)
const [coiHasConflict, setCOIHasConflict] = useState(false)
// Fetch the active evaluation form for this round
const { data: activeForm } = trpc.evaluation.getStageForm.useQuery(
{ roundId },
@@ -385,6 +394,13 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
)
}
// COI config
const coiRequired = evalConfig?.coiRequired ?? true
// Determine COI state: declared via server or just completed in this session
const coiDeclared = coiCompleted || coiStatus !== undefined
const coiConflict = coiHasConflict || (coiStatus?.hasConflict ?? false)
// Check if round is active
const isRoundActive = round.status === 'ROUND_ACTIVE'
@@ -421,6 +437,79 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
)
}
// COI gate: if COI is required, not yet declared, and we have an assignment
if (coiRequired && myAssignment && !coiLoading && !coiDeclared) {
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>
<Link href={`/jury/competitions/${roundId}/projects/${projectId}` as Route}>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Project
</Link>
</Button>
<div>
<h1 className="text-2xl font-bold tracking-tight text-brand-blue dark:text-foreground">
Evaluate Project
</h1>
<p className="text-muted-foreground mt-1">{project.title}</p>
</div>
</div>
<COIDeclarationDialog
open={true}
assignmentId={myAssignment.id}
projectTitle={project.title}
onComplete={(hasConflict) => {
setCOICompleted(true)
setCOIHasConflict(hasConflict)
}}
/>
</div>
)
}
// COI conflict declared — block evaluation
if (coiRequired && coiConflict) {
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>
<Link href={`/jury/competitions/${roundId}/projects/${projectId}` as Route}>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Project
</Link>
</Button>
<div>
<h1 className="text-2xl font-bold tracking-tight text-brand-blue dark:text-foreground">
Evaluate Project
</h1>
<p className="text-muted-foreground mt-1">{project.title}</p>
</div>
</div>
<Card className="border-l-4 border-l-amber-500">
<CardContent className="flex items-start gap-4 p-6">
<div className="rounded-xl bg-amber-50 dark:bg-amber-950/40 p-3">
<ShieldAlert className="h-6 w-6 text-amber-600" />
</div>
<div>
<h2 className="text-lg font-semibold">Conflict of Interest Declared</h2>
<p className="text-sm text-muted-foreground mt-1">
You declared a conflict of interest for this project. An administrator will
review your declaration. You cannot evaluate this project while the conflict
is under review.
</p>
<Button variant="outline" size="sm" className="mt-4" asChild>
<Link href={`/jury/competitions/${roundId}` as Route}>
Back to Round
</Link>
</Button>
</div>
</CardContent>
</Card>
</div>
)
}
return (
<div className="space-y-6">
<div className="flex items-center gap-4">

View File

@@ -333,36 +333,16 @@ function FileItem({ file }: { file: ProjectFile }) {
</div>
</div>
{/* Mobile action buttons — visible only on small screens */}
{/* Mobile action buttons — no inline preview on mobile, just open + download */}
<div className="flex md:hidden items-center gap-2 mt-3 pt-3 border-t">
{canPreview && (
<Button
variant="outline"
size="sm"
className="flex-1"
onClick={() => setShowPreview(!showPreview)}
>
{showPreview ? (
<>
<X className="mr-1.5 h-4 w-4" />
Close
</>
) : (
<>
<Play className="mr-1.5 h-4 w-4" />
Preview
</>
)}
</Button>
)}
<FileOpenButton file={file} />
<FileDownloadButton file={file} />
<FileOpenButton file={file} className="flex-1" label="Open in New Tab" />
<FileDownloadButton file={file} className="flex-1" label="Download" />
</div>
</div>
{/* Preview area */}
{/* Preview area — desktop only */}
{showPreview && (
<div className="rounded-lg border bg-muted/50 overflow-hidden">
<div className="hidden md:block rounded-lg border bg-muted/50 overflow-hidden">
{isLoadingUrl ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -561,7 +541,7 @@ function BulkDownloadButton({ projectId, fileIds }: { projectId: string; fileIds
)
}
function FileOpenButton({ file }: { file: ProjectFile }) {
function FileOpenButton({ file, className, label }: { file: ProjectFile; className?: string; label?: string }) {
const [loading, setLoading] = useState(false)
const { refetch } = trpc.file.getDownloadUrl.useQuery(
@@ -571,13 +551,25 @@ function FileOpenButton({ file }: { file: ProjectFile }) {
const handleOpen = async () => {
setLoading(true)
// Open the blank window immediately in the click handler (synchronous)
// so iOS Safari doesn't block it as a popup
const newWindow = window.open('about:blank', '_blank')
try {
const result = await refetch()
if (result.data?.url) {
window.open(result.data.url, '_blank')
if (newWindow) {
newWindow.location.href = result.data.url
} else {
// Fallback: if popup was still blocked, navigate current tab
window.location.href = result.data.url
}
} else {
newWindow?.close()
}
} catch (error) {
console.error('Failed to get URL:', error)
newWindow?.close()
toast.error('Failed to open file')
} finally {
setLoading(false)
}
@@ -590,17 +582,19 @@ function FileOpenButton({ file }: { file: ProjectFile }) {
onClick={handleOpen}
disabled={loading}
aria-label="Open file in new tab"
className={className}
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
<Loader2 className={cn('h-4 w-4 animate-spin', label && 'mr-1.5')} />
) : (
<ExternalLink className="h-4 w-4" />
<ExternalLink className={cn('h-4 w-4', label && 'mr-1.5')} />
)}
{label}
</Button>
)
}
function FileDownloadButton({ file }: { file: ProjectFile }) {
function FileDownloadButton({ file, className, label }: { file: ProjectFile; className?: string; label?: string }) {
const [downloading, setDownloading] = useState(false)
const { refetch } = trpc.file.getDownloadUrl.useQuery(
@@ -613,17 +607,36 @@ function FileDownloadButton({ file }: { file: ProjectFile }) {
try {
const result = await refetch()
if (result.data?.url) {
// Fetch as blob to force download (cross-origin URLs ignore <a download>)
const response = await fetch(result.data.url)
const blob = await response.blob()
const blobUrl = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = blobUrl
link.download = file.fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(blobUrl)
// Try fetch+blob first (works on desktop, some mobile browsers)
try {
const response = await fetch(result.data.url)
if (!response.ok) throw new Error('fetch failed')
const blob = await response.blob()
const blobUrl = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = blobUrl
link.download = file.fileName
// iOS Safari needs the link in the DOM
link.style.display = 'none'
document.body.appendChild(link)
link.click()
// Delay cleanup for iOS
setTimeout(() => {
document.body.removeChild(link)
URL.revokeObjectURL(blobUrl)
}, 100)
} catch {
// Fallback: open in new tab (iOS Safari often blocks blob downloads)
// Open synchronously via a link click to avoid popup blockers
const link = document.createElement('a')
link.href = result.data.url
link.target = '_blank'
link.rel = 'noopener noreferrer'
link.style.display = 'none'
document.body.appendChild(link)
link.click()
setTimeout(() => document.body.removeChild(link), 100)
}
}
} catch (error) {
console.error('Failed to download file:', error)
@@ -640,12 +653,14 @@ function FileDownloadButton({ file }: { file: ProjectFile }) {
onClick={handleDownload}
disabled={downloading}
aria-label="Download file"
className={className}
>
{downloading ? (
<Loader2 className="h-4 w-4 animate-spin" />
<Loader2 className={cn('h-4 w-4 animate-spin', label && 'mr-1.5')} />
) : (
<Download className="h-4 w-4" />
<Download className={cn('h-4 w-4', label && 'mr-1.5')} />
)}
{label}
</Button>
)
}