Simplify project detail: back button, cleaner files, fix round inference
Some checks failed
Build and Push Docker Image / build (push) Has been cancelled
Some checks failed
Build and Push Docker Image / build (push) Has been cancelled
- Replace breadcrumb with "Back to Projects" button on observer detail - Remove submission links from observer project info - Simplify files tab: remove redundant requirements checklist, show only FileViewer (observer + admin) - Fix round history: infer earlier rounds as PASSED when later round is active (e.g. R2 shows Passed when project is active in R3) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -43,9 +43,6 @@ import {
|
||||
Users,
|
||||
FileText,
|
||||
Calendar,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Circle,
|
||||
Clock,
|
||||
BarChart3,
|
||||
ThumbsUp,
|
||||
@@ -562,105 +559,9 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Requirements organized by round */}
|
||||
{competitionRounds.length > 0 && allRequirements.length > 0 ? (
|
||||
<>
|
||||
{competitionRounds.map((round: { id: string; name: string }) => {
|
||||
const roundRequirements = allRequirements.filter((req: any) => req.roundId === round.id)
|
||||
if (roundRequirements.length === 0) return null
|
||||
|
||||
return (
|
||||
<div key={round.id} className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-semibold">{round.name}</h3>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{roundRequirements.length} requirement{roundRequirements.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
{roundRequirements.map((req: any) => {
|
||||
// Find file that fulfills this requirement
|
||||
const fulfilledFile = files?.find((f: any) => f.requirementId === req.id)
|
||||
const isFulfilled = !!fulfilledFile
|
||||
|
||||
return (
|
||||
<div
|
||||
key={req.id}
|
||||
className={`flex items-center justify-between rounded-lg border p-3 ${
|
||||
isFulfilled
|
||||
? 'border-green-200 bg-green-50/50 dark:border-green-900 dark:bg-green-950/20'
|
||||
: 'border-muted'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{isFulfilled ? (
|
||||
<CheckCircle2 className="h-5 w-5 shrink-0 text-green-600" />
|
||||
) : (
|
||||
<Circle className="h-5 w-5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium truncate">{req.name}</p>
|
||||
{req.isRequired && (
|
||||
<Badge variant="destructive" className="text-xs shrink-0">
|
||||
Required
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{req.description && (
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{req.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
|
||||
{req.acceptedMimeTypes?.length > 0 && (
|
||||
<span>
|
||||
{req.acceptedMimeTypes.map((mime: string) => {
|
||||
if (mime === 'application/pdf') return 'PDF'
|
||||
if (mime === 'image/*') return 'Images'
|
||||
if (mime === 'video/*') return 'Video'
|
||||
if (mime.includes('wordprocessing')) return 'Word'
|
||||
if (mime.includes('spreadsheet')) return 'Excel'
|
||||
if (mime.includes('presentation')) return 'PowerPoint'
|
||||
return mime.split('/')[1] || mime
|
||||
}).join(', ')}
|
||||
</span>
|
||||
)}
|
||||
{req.maxSizeMB && (
|
||||
<span className="shrink-0">• Max {req.maxSizeMB}MB</span>
|
||||
)}
|
||||
</div>
|
||||
{isFulfilled && fulfilledFile && (
|
||||
<p className="text-xs text-green-700 dark:text-green-400 mt-1 font-medium">
|
||||
✓ {fulfilledFile.fileName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!isFulfilled && (
|
||||
<span className="text-xs text-amber-600 dark:text-amber-400 shrink-0 ml-2 font-medium">
|
||||
Missing
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<Separator />
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{/* General file upload section */}
|
||||
{/* File upload */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold mb-3">
|
||||
{allRequirements.length > 0 ? 'Additional Documents' : 'Upload Files'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">
|
||||
Upload files not tied to specific requirements
|
||||
</p>
|
||||
<p className="text-sm font-semibold mb-3">Upload Files</p>
|
||||
<FileUpload
|
||||
projectId={projectId}
|
||||
availableRounds={competitionRounds?.map((r: any) => ({ id: r.id, name: r.name }))}
|
||||
@@ -674,8 +575,6 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
{files && files.length > 0 && (
|
||||
<>
|
||||
<Separator />
|
||||
<div>
|
||||
<p className="text-sm font-semibold mb-3">All Uploaded Files</p>
|
||||
<FileViewer
|
||||
projectId={projectId}
|
||||
files={files.map((f) => ({
|
||||
@@ -700,7 +599,6 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
} : null,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
@@ -38,6 +38,7 @@ import {
|
||||
Heart,
|
||||
Clock,
|
||||
MessageSquare,
|
||||
ArrowLeft,
|
||||
} from 'lucide-react'
|
||||
import { cn, formatDate, formatDateOnly } from '@/lib/utils'
|
||||
|
||||
@@ -85,7 +86,7 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
)
|
||||
}
|
||||
|
||||
const { project, assignments, stats, competitionRounds, projectRoundStates, allRequirements, filteringResult } =
|
||||
const { project, assignments, stats, competitionRounds, projectRoundStates, filteringResult } =
|
||||
data
|
||||
|
||||
const roundStateMap = new Map(
|
||||
@@ -149,23 +150,13 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<Link href={'/observer' as Route} className="hover:text-foreground">
|
||||
Observer
|
||||
{/* Back button */}
|
||||
<Button variant="ghost" size="sm" className="gap-1.5 -ml-2 text-muted-foreground" asChild>
|
||||
<Link href={'/observer/projects' as Route}>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Back to Projects
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<Link
|
||||
href={'/observer/projects' as Route}
|
||||
className="hover:text-foreground"
|
||||
>
|
||||
Projects
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="max-w-[200px] truncate font-medium text-foreground">
|
||||
{project.title}
|
||||
</span>
|
||||
</nav>
|
||||
</Button>
|
||||
|
||||
{/* Project Header */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
@@ -416,29 +407,6 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submission URLs */}
|
||||
{(project.phase1SubmissionUrl || project.phase2SubmissionUrl) && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-muted-foreground">Submission Links</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.phase1SubmissionUrl && (
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={project.phase1SubmissionUrl} target="_blank" rel="noopener noreferrer">
|
||||
Phase 1 Submission
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
{project.phase2SubmissionUrl && (
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={project.phase2SubmissionUrl} target="_blank" rel="noopener noreferrer">
|
||||
Phase 2 Submission
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI-Assigned Expertise Tags */}
|
||||
{project.projectTags && project.projectTags.length > 0 && (
|
||||
<div>
|
||||
@@ -518,10 +486,16 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
|
||||
{/* Round History */}
|
||||
{competitionRounds.length > 0 && (() => {
|
||||
const passedCount = competitionRounds.filter((r) => {
|
||||
const s = roundStateMap.get(r.id)
|
||||
return s && (s.state === 'PASSED' || s.state === 'COMPLETED')
|
||||
}).length
|
||||
// Find the furthest round index where the project is active or beyond
|
||||
// Any round before this must have been passed
|
||||
let furthestActiveIdx = -1
|
||||
for (let i = competitionRounds.length - 1; i >= 0; i--) {
|
||||
const s = roundStateMap.get(competitionRounds[i].id)
|
||||
if (s && (s.state === 'IN_PROGRESS' || s.state === 'PASSED' || s.state === 'COMPLETED')) {
|
||||
furthestActiveIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Find the rejection round — either explicit REJECTED state or inferred
|
||||
const isProjectRejected = project.status === 'REJECTED'
|
||||
@@ -534,17 +508,14 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
// infer the rejection round as the furthest round the project reached
|
||||
let inferredRejectionRoundId: string | null = null
|
||||
if (isProjectRejected && !explicitRejectedRound) {
|
||||
// Find the last round that has any state record (furthest the project got)
|
||||
for (let i = competitionRounds.length - 1; i >= 0; i--) {
|
||||
const s = roundStateMap.get(competitionRounds[i].id)
|
||||
if (s) {
|
||||
// If it's PASSED/COMPLETED, rejection happened at the next round
|
||||
if (s.state === 'PASSED' || s.state === 'COMPLETED') {
|
||||
if (i + 1 < competitionRounds.length) {
|
||||
inferredRejectionRoundId = competitionRounds[i + 1].id
|
||||
}
|
||||
} else {
|
||||
// PENDING/IN_PROGRESS in this round means rejected here
|
||||
inferredRejectionRoundId = competitionRounds[i].id
|
||||
}
|
||||
break
|
||||
@@ -557,11 +528,28 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
? competitionRounds.find((r) => r.id === inferredRejectionRoundId)
|
||||
: null)
|
||||
|
||||
// Determine which rounds are "not reached" (after rejection point)
|
||||
const rejectedRoundIdx = rejectedRound
|
||||
? competitionRounds.findIndex((r) => r.id === rejectedRound.id)
|
||||
: -1
|
||||
|
||||
// Compute effective states for all rounds
|
||||
const effectiveStates = competitionRounds.map((round, idx) => {
|
||||
const rawState = roundStateMap.get(round.id)?.state
|
||||
const isRejectionRound = round.id === rejectedRound?.id
|
||||
const isNotReached = rejectedRoundIdx >= 0 && idx > rejectedRoundIdx
|
||||
|
||||
if (isRejectionRound && !explicitRejectedRound) return 'REJECTED'
|
||||
if (isNotReached) return 'NOT_REACHED'
|
||||
// If this round is before the furthest active round and not already PASSED/COMPLETED,
|
||||
// the project must have passed it to reach the later round
|
||||
if (furthestActiveIdx > idx && (!rawState || rawState === 'PENDING')) return 'PASSED'
|
||||
return rawState
|
||||
})
|
||||
|
||||
const passedCount = effectiveStates.filter(
|
||||
(s) => s === 'PASSED' || s === 'COMPLETED',
|
||||
).length
|
||||
|
||||
return (
|
||||
<AnimatedCard index={3}>
|
||||
<Card>
|
||||
@@ -581,17 +569,7 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
<CardContent>
|
||||
<ol className="space-y-4">
|
||||
{competitionRounds.map((round, idx) => {
|
||||
const roundState = roundStateMap.get(round.id)
|
||||
const rawState = roundState?.state
|
||||
|
||||
// Override state for inferred rejection
|
||||
const isRejectionRound = round.id === rejectedRound?.id
|
||||
const isNotReached = rejectedRoundIdx >= 0 && idx > rejectedRoundIdx
|
||||
const effectiveState = isRejectionRound && !explicitRejectedRound
|
||||
? 'REJECTED'
|
||||
: isNotReached
|
||||
? 'NOT_REACHED'
|
||||
: rawState
|
||||
const effectiveState = effectiveStates[idx]
|
||||
|
||||
const roundAssignments = assignments.filter(
|
||||
(a) => a.roundId === round.id,
|
||||
@@ -884,135 +862,11 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
<div className="rounded-lg bg-rose-500/10 p-1.5">
|
||||
<FileText className="h-4 w-4 text-rose-500" />
|
||||
</div>
|
||||
Files
|
||||
Project Files
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Project documents organized by competition round
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{competitionRounds.length > 0 && allRequirements.length > 0 ? (
|
||||
<>
|
||||
{competitionRounds.map((round) => {
|
||||
const roundRequirements = allRequirements.filter(
|
||||
(req) => req.roundId === round.id,
|
||||
)
|
||||
if (roundRequirements.length === 0) return null
|
||||
|
||||
return (
|
||||
<div key={round.id} className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-semibold">
|
||||
{round.name}
|
||||
</h3>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{roundRequirements.length} requirement
|
||||
{roundRequirements.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
{roundRequirements.map((req) => {
|
||||
const fulfilledFile = project.files?.find(
|
||||
(f) => f.requirementId === req.id,
|
||||
)
|
||||
const isFulfilled = !!fulfilledFile
|
||||
|
||||
return (
|
||||
<div
|
||||
key={req.id}
|
||||
className={`flex items-center justify-between rounded-lg border p-3 ${
|
||||
isFulfilled
|
||||
? 'border-green-200 bg-green-50/50 dark:border-green-900 dark:bg-green-950/20'
|
||||
: 'border-muted'
|
||||
}`}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{isFulfilled ? (
|
||||
<CheckCircle2 className="h-5 w-5 shrink-0 text-green-600" />
|
||||
) : (
|
||||
<Circle className="h-5 w-5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{req.name}
|
||||
</p>
|
||||
{req.isRequired && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="shrink-0 text-xs"
|
||||
>
|
||||
Required
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{req.description && (
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
{req.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
{req.acceptedMimeTypes?.length > 0 && (
|
||||
<span>
|
||||
{req.acceptedMimeTypes
|
||||
.map((mime) => {
|
||||
if (mime === 'application/pdf')
|
||||
return 'PDF'
|
||||
if (mime === 'image/*')
|
||||
return 'Images'
|
||||
if (mime === 'video/*')
|
||||
return 'Video'
|
||||
if (
|
||||
mime.includes('wordprocessing')
|
||||
)
|
||||
return 'Word'
|
||||
if (mime.includes('spreadsheet'))
|
||||
return 'Excel'
|
||||
if (
|
||||
mime.includes('presentation')
|
||||
)
|
||||
return 'PowerPoint'
|
||||
return mime.split('/')[1] || mime
|
||||
})
|
||||
.join(', ')}
|
||||
</span>
|
||||
)}
|
||||
{req.maxSizeMB && (
|
||||
<span className="shrink-0">
|
||||
Max {req.maxSizeMB}MB
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isFulfilled && fulfilledFile && (
|
||||
<p className="mt-1 text-xs font-medium text-green-700 dark:text-green-400">
|
||||
{fulfilledFile.fileName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!isFulfilled && (
|
||||
<span className="ml-2 shrink-0 text-xs font-medium text-amber-600 dark:text-amber-400">
|
||||
Missing
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<Separator />
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<CardContent>
|
||||
{project.files && project.files.length > 0 ? (
|
||||
<div>
|
||||
<p className="mb-3 text-sm font-semibold">
|
||||
{allRequirements.length > 0
|
||||
? 'All Uploaded Files'
|
||||
: 'Uploaded Files'}
|
||||
</p>
|
||||
<FileViewer
|
||||
projectId={projectId}
|
||||
files={project.files.map((f) => ({
|
||||
@@ -1046,7 +900,6 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
|
||||
: null,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<FileText className="h-12 w-12 text-muted-foreground/50" />
|
||||
|
||||
Reference in New Issue
Block a user