Jury inline doc preview, download fix, category tags, admin eval reset
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m55s

- Replace MultiWindowDocViewer with FileViewer for inline previews (PDF/image/video/Office)
- Fix cross-origin download using fetch+blob instead of <a download>
- Show Startup/Business Concept badge on jury project detail + evaluate pages
- Add admin resetEvaluation procedure with audit logging
- Add dropdown menu on admin assignment rows with Reset Evaluation + Delete
- Make file action buttons responsive on mobile (separate row below file info)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-18 14:03:38 +01:00
parent 9ce56f13fd
commit 0f6473c999
6 changed files with 318 additions and 248 deletions

View File

@@ -1,137 +1,16 @@
'use client'
import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { FileText, Download, ExternalLink, Loader2 } from 'lucide-react'
import { toast } from 'sonner'
import { FileText } from 'lucide-react'
import { FileViewer } from '@/components/shared/file-viewer'
interface MultiWindowDocViewerProps {
roundId: string
projectId: string
}
function formatFileSize(bytes: number): string {
if (bytes === 0) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
function getFileIcon(mimeType: string) {
if (mimeType.startsWith('image/')) return '🖼️'
if (mimeType.startsWith('video/')) return '🎥'
if (mimeType.includes('pdf')) return '📄'
if (mimeType.includes('word') || mimeType.includes('document')) return '📝'
if (mimeType.includes('sheet') || mimeType.includes('excel')) return '📊'
if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return '📊'
return '📎'
}
function canPreviewInBrowser(mimeType: string): boolean {
return (
mimeType === 'application/pdf' ||
mimeType.startsWith('image/') ||
mimeType.startsWith('video/') ||
mimeType.startsWith('text/')
)
}
function FileCard({ file }: { file: { id: string; fileName: string; mimeType: string; size: number; bucket: string; objectKey: string } }) {
const [loadingAction, setLoadingAction] = useState<'download' | 'preview' | null>(null)
const downloadUrlQuery = trpc.file.getDownloadUrl.useQuery(
{ bucket: file.bucket, objectKey: file.objectKey },
{ enabled: false } // manual trigger
)
const handleAction = async (action: 'download' | 'preview') => {
setLoadingAction(action)
try {
const result = await downloadUrlQuery.refetch()
if (result.data?.url) {
if (action === 'preview' && canPreviewInBrowser(file.mimeType)) {
window.open(result.data.url, '_blank')
} else {
// Download: create temp link and click
const a = document.createElement('a')
a.href = result.data.url
a.download = file.fileName
a.target = '_blank'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
}
} catch {
toast.error('Failed to get file URL')
} finally {
setLoadingAction(null)
}
}
return (
<Card className="overflow-hidden">
<CardContent className="p-4">
<div className="flex items-start gap-3">
<div className="text-2xl">{getFileIcon(file.mimeType || '')}</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm truncate" title={file.fileName}>
{file.fileName}
</p>
<div className="flex items-center gap-2 mt-1">
<Badge variant="outline" className="text-xs">
{file.mimeType?.split('/')[1]?.toUpperCase() || 'FILE'}
</Badge>
{file.size > 0 && (
<span className="text-xs text-muted-foreground">
{formatFileSize(file.size)}
</span>
)}
</div>
<div className="flex gap-2 mt-3">
<Button
size="sm"
variant="outline"
className="h-7 text-xs"
onClick={() => handleAction('download')}
disabled={loadingAction !== null}
>
{loadingAction === 'download' ? (
<Loader2 className="mr-1 h-3 w-3 animate-spin" />
) : (
<Download className="mr-1 h-3 w-3" />
)}
Download
</Button>
{canPreviewInBrowser(file.mimeType) && (
<Button
size="sm"
variant="ghost"
className="h-7 text-xs"
onClick={() => handleAction('preview')}
disabled={loadingAction !== null}
>
{loadingAction === 'preview' ? (
<Loader2 className="mr-1 h-3 w-3 animate-spin" />
) : (
<ExternalLink className="mr-1 h-3 w-3" />
)}
Preview
</Button>
)}
</div>
</div>
</div>
</CardContent>
</Card>
)
}
export function MultiWindowDocViewer({ roundId, projectId }: MultiWindowDocViewerProps) {
const { data: files, isLoading } = trpc.file.listByProject.useQuery(
{ projectId },
@@ -166,53 +45,82 @@ export function MultiWindowDocViewer({ roundId, projectId }: MultiWindowDocViewe
)
}
// Group files by round name or "General"
const grouped: Record<string, typeof files> = {}
// Group files by round name for the grouped view
const groupMap: Record<string, {
roundId: string | null
roundName: string
sortOrder: number
files: typeof files
}> = {}
for (const file of files) {
const groupName = file.requirement?.round?.name ?? 'General'
if (!grouped[groupName]) grouped[groupName] = []
grouped[groupName].push(file)
const roundName = file.requirement?.round?.name ?? 'General'
const rId = file.requirement?.round?.id ?? null
const sortOrder = file.requirement?.round?.sortOrder ?? 999
if (!groupMap[roundName]) {
groupMap[roundName] = { roundId: rId, roundName, sortOrder, files: [] }
}
groupMap[roundName].files.push(file)
}
const groupNames = Object.keys(grouped)
const groupedFiles = Object.values(groupMap)
return (
<Card>
<CardHeader>
<CardTitle>Documents</CardTitle>
<CardDescription>
{files.length} file{files.length !== 1 ? 's' : ''} submitted
</CardDescription>
</CardHeader>
<CardContent>
{groupNames.length === 1 ? (
// Single group — no need for headers
<div className="grid gap-3 sm:grid-cols-2">
{grouped[groupNames[0]].map((file) => (
<FileCard key={file.id} file={file} />
))}
</div>
) : (
// Multiple groups — show headers
<div className="space-y-6">
{groupNames.map((groupName) => (
<div key={groupName}>
<h4 className="font-medium text-sm text-muted-foreground mb-3">
{groupName}
<Badge variant="secondary" className="ml-2 text-xs">
{grouped[groupName].length}
</Badge>
</h4>
<div className="grid gap-3 sm:grid-cols-2">
{grouped[groupName].map((file) => (
<FileCard key={file.id} file={file} />
))}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
)
// If only one group, use flat view
if (groupedFiles.length === 1) {
const mappedFiles = files.map((f) => ({
id: f.id,
fileType: (f.fileType ?? 'OTHER') as 'EXEC_SUMMARY' | 'PRESENTATION' | 'VIDEO' | 'OTHER' | 'BUSINESS_PLAN' | 'VIDEO_PITCH' | 'SUPPORTING_DOC',
fileName: f.fileName,
mimeType: f.mimeType,
size: f.size,
bucket: f.bucket,
objectKey: f.objectKey,
version: f.version ?? undefined,
requirementId: f.requirementId,
requirement: f.requirement ? {
id: f.requirement.id,
name: f.requirement.name,
description: f.requirement.description,
isRequired: f.requirement.isRequired,
} : undefined,
pageCount: (f as any).pageCount ?? undefined,
textPreview: (f as any).textPreview ?? undefined,
detectedLang: (f as any).detectedLang ?? undefined,
langConfidence: (f as any).langConfidence ?? undefined,
analyzedAt: (f as any).analyzedAt ?? undefined,
}))
return <FileViewer files={mappedFiles} />
}
// Multiple groups — use grouped view
const mappedGroups = groupedFiles.map((g) => ({
roundId: g.roundId,
roundName: g.roundName,
sortOrder: g.sortOrder,
files: g.files.map((f) => ({
id: f.id,
fileType: (f.fileType ?? 'OTHER') as 'EXEC_SUMMARY' | 'PRESENTATION' | 'VIDEO' | 'OTHER' | 'BUSINESS_PLAN' | 'VIDEO_PITCH' | 'SUPPORTING_DOC',
fileName: f.fileName,
mimeType: f.mimeType,
size: f.size,
bucket: f.bucket,
objectKey: f.objectKey,
version: f.version ?? undefined,
requirementId: f.requirementId,
requirement: f.requirement ? {
id: f.requirement.id,
name: f.requirement.name,
description: f.requirement.description,
isRequired: f.requirement.isRequired,
} : undefined,
pageCount: (f as any).pageCount ?? undefined,
textPreview: (f as any).textPreview ?? undefined,
detectedLang: (f as any).detectedLang ?? undefined,
langConfidence: (f as any).langConfidence ?? undefined,
analyzedAt: (f as any).analyzedAt ?? undefined,
})),
}))
return <FileViewer groupedFiles={mappedGroups} />
}