Jury inline doc preview, download fix, category tags, admin eval reset

- 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>

src/components/jury/multi-window-doc-viewer.tsx

@@ -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} />
 }

src/components/shared/file-viewer.tsx

@@ -252,75 +252,104 @@ function FileItem({ file }: { file: ProjectFile }) {
 
   return (
     <div className="space-y-2">
-      <div className="flex items-center gap-3 rounded-lg border p-3">
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
-          <Icon className="h-5 w-5 text-muted-foreground" />
-        </div>
+      <div className="rounded-lg border p-3">
+        <div className="flex items-start gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+            <Icon className="h-5 w-5 text-muted-foreground" />
+          </div>
 
-        <div className="flex-1 min-w-0">
-          {file.requirement && (
-            <p className="text-xs font-semibold text-primary/80 mb-0.5 uppercase tracking-wide">
-              {file.requirement.name}
-            </p>
-          )}
-          <div className="flex items-center gap-2">
-            <p className="font-medium truncate">{file.fileName}</p>
+          <div className="flex-1 min-w-0">
+            {file.requirement && (
+              <p className="text-xs font-semibold text-primary/80 mb-0.5 uppercase tracking-wide">
+                {file.requirement.name}
+              </p>
+            )}
+            <div className="flex items-center gap-2">
+              <p className="font-medium truncate">{file.fileName}</p>
+              {file.version != null && file.version > 1 && (
+                <Badge variant="outline" className="text-xs shrink-0">
+                  v{file.version}
+                </Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
+              <Badge variant="secondary" className="text-xs">
+                {getFileTypeLabel(file.fileType)}
+              </Badge>
+              {file.isLate && (
+                <Badge variant="destructive" className="text-xs">
+                  Late
+                </Badge>
+              )}
+              <span>{formatFileSize(file.size)}</span>
+              {file.pageCount != null && (
+                <Badge variant="outline" className="text-xs gap-1">
+                  <FileText className="h-3 w-3" />
+                  {file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
+                </Badge>
+              )}
+              {file.detectedLang && file.detectedLang !== 'und' && (
+                <Badge
+                  variant="outline"
+                  className={cn('text-xs font-mono uppercase', {
+                    'border-green-300 text-green-700 bg-green-50': file.langConfidence != null && file.langConfidence >= 0.8,
+                    'border-amber-300 text-amber-700 bg-amber-50': file.langConfidence != null && file.langConfidence >= 0.4 && file.langConfidence < 0.8,
+                    'border-red-300 text-red-700 bg-red-50': file.langConfidence != null && file.langConfidence < 0.4,
+                  })}
+                  title={`Language: ${file.detectedLang} (${Math.round((file.langConfidence ?? 0) * 100)}% confidence)`}
+                >
+                  {file.detectedLang.toUpperCase()}
+                </Badge>
+              )}
+            </div>
+          </div>
+
+          {/* Desktop action buttons — hidden on mobile */}
+          <div className="hidden md:flex items-center gap-1 shrink-0">
             {file.version != null && file.version > 1 && (
-              <Badge variant="outline" className="text-xs shrink-0">
-                v{file.version}
-              </Badge>
+              <VersionHistoryButton fileId={file.id} />
             )}
-          </div>
-          <div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
-            <Badge variant="secondary" className="text-xs">
-              {getFileTypeLabel(file.fileType)}
-            </Badge>
-            {file.isLate && (
-              <Badge variant="destructive" className="text-xs">
-                Late
-              </Badge>
-            )}
-            <span>{formatFileSize(file.size)}</span>
-            {file.pageCount != null && (
-              <Badge variant="outline" className="text-xs gap-1">
-                <FileText className="h-3 w-3" />
-                {file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
-              </Badge>
-            )}
-            {file.detectedLang && file.detectedLang !== 'und' && (
-              <Badge
+            {canPreview && (
+              <Button
                 variant="outline"
-                className={cn('text-xs font-mono uppercase', {
-                  'border-green-300 text-green-700 bg-green-50': file.langConfidence != null && file.langConfidence >= 0.8,
-                  'border-amber-300 text-amber-700 bg-amber-50': file.langConfidence != null && file.langConfidence >= 0.4 && file.langConfidence < 0.8,
-                  'border-red-300 text-red-700 bg-red-50': file.langConfidence != null && file.langConfidence < 0.4,
-                })}
-                title={`Language: ${file.detectedLang} (${Math.round((file.langConfidence ?? 0) * 100)}% confidence)`}
+                size="sm"
+                onClick={() => setShowPreview(!showPreview)}
               >
-                {file.detectedLang.toUpperCase()}
-              </Badge>
+                {showPreview ? (
+                  <>
+                    <X className="mr-2 h-4 w-4" />
+                    Close
+                  </>
+                ) : (
+                  <>
+                    <Play className="mr-2 h-4 w-4" />
+                    Preview
+                  </>
+                )}
+              </Button>
             )}
+            <FileOpenButton file={file} />
+            <FileDownloadButton file={file} />
           </div>
         </div>
 
-        <div className="flex items-center gap-1">
-          {file.version != null && file.version > 1 && (
-            <VersionHistoryButton fileId={file.id} />
-          )}
+        {/* Mobile action buttons — visible only on small screens */}
+        <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-2 h-4 w-4" />
+                  <X className="mr-1.5 h-4 w-4" />
                   Close
                 </>
               ) : (
                 <>
-                  <Play className="mr-2 h-4 w-4" />
+                  <Play className="mr-1.5 h-4 w-4" />
                   Preview
                 </>
               )}
@@ -481,21 +510,28 @@ function BulkDownloadButton({ projectId, fileIds }: { projectId: string; fileIds
     try {
       const result = await refetch()
       if (result.data && Array.isArray(result.data)) {
-        // Open each download URL with a small delay to avoid popup blocking
+        // Download each file via fetch+blob to handle cross-origin URLs
         for (let i = 0; i < result.data.length; i++) {
-          const item = result.data[i] as { downloadUrl: string }
+          const item = result.data[i] as { downloadUrl: string; fileName?: string }
           if (item.downloadUrl) {
-            // Use link element to trigger download without popup
-            const link = document.createElement('a')
-            link.href = item.downloadUrl
-            link.target = '_blank'
-            link.rel = 'noopener noreferrer'
-            document.body.appendChild(link)
-            link.click()
-            document.body.removeChild(link)
+            try {
+              const response = await fetch(item.downloadUrl)
+              const blob = await response.blob()
+              const blobUrl = URL.createObjectURL(blob)
+              const link = document.createElement('a')
+              link.href = blobUrl
+              link.download = item.fileName || `file-${i + 1}`
+              document.body.appendChild(link)
+              link.click()
+              document.body.removeChild(link)
+              URL.revokeObjectURL(blobUrl)
+            } catch {
+              // Fall back to opening in new tab if fetch fails
+              window.open(item.downloadUrl, '_blank')
+            }
             // Small delay between downloads
             if (i < result.data.length - 1) {
-              await new Promise((resolve) => setTimeout(resolve, 300))
+              await new Promise((resolve) => setTimeout(resolve, 500))
             }
           }
         }
@@ -577,17 +613,21 @@ function FileDownloadButton({ file }: { file: ProjectFile }) {
     try {
       const result = await refetch()
       if (result.data?.url) {
-        // Force browser download via <a download>
+        // 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 = result.data.url
+        link.href = blobUrl
         link.download = file.fileName
-        link.rel = 'noopener noreferrer'
         document.body.appendChild(link)
         link.click()
         document.body.removeChild(link)
+        URL.revokeObjectURL(blobUrl)
       }
     } catch (error) {
-      console.error('Failed to get download URL:', error)
+      console.error('Failed to download file:', error)
+      toast.error('Failed to download file')
     } finally {
       setDownloading(false)
     }