Files
MOPC-Portal/src/components/admin/rounds/config/config-section-header.tsx
Matt f26ee3f076
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m43s
Admin dashboard & round management UX overhaul
- Extract round detail monolith (2900→600 lines) into 13 standalone components
- Add shared round/status config (round-config.ts) replacing 4 local copies
- Delete 12 legacy competition-scoped pages, merge project pool into projects page
- Add round-type-specific dashboard stat panels (submission, mentoring, live final, deliberation, summary)
- Add contextual header quick actions based on active round type
- Improve pipeline visualization: progress bars, checkmarks, chevron connectors, overflow fix
- Add config tab completion dots (green/amber/red) and inline validation warnings
- Enhance juries page with round assignments, member avatars, and cap mode badges
- Add context-aware project list (recent submissions vs active evaluations)
- Move competition settings into Manage Editions page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-22 17:14:00 +01:00

52 lines
1.2 KiB
TypeScript

'use client'
import { cn } from '@/lib/utils'
type CompletionStatus = 'complete' | 'warning' | 'error'
type ConfigSectionHeaderProps = {
title: string
description?: string
status: CompletionStatus
summary?: string
}
const statusDot: Record<CompletionStatus, string> = {
complete: 'bg-emerald-500',
warning: 'bg-amber-500',
error: 'bg-red-500',
}
export function ConfigSectionHeader({
title,
description,
status,
summary,
}: ConfigSectionHeaderProps) {
return (
<div className="flex items-start gap-3">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span
className={cn(
'mt-1 h-2.5 w-2.5 rounded-full shrink-0',
statusDot[status],
)}
/>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<h3 className="text-base font-semibold">{title}</h3>
{summary && (
<span className="text-xs text-muted-foreground truncate">
{summary}
</span>
)}
</div>
{description && (
<p className="text-sm text-muted-foreground mt-0.5">{description}</p>
)}
</div>
</div>
</div>
)
}