b5425e705e
All checks were successful
Build and Push Docker Image / build (push) Successful in 10m33s
122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Card } from '@/components/ui/card'
|
|
import { ArrowRight } from 'lucide-react'
|
|
|
|
type StageNode = {
|
|
id?: string
|
|
name: string
|
|
stageType: string
|
|
sortOrder: number
|
|
_count?: { projectStageStates: number }
|
|
}
|
|
|
|
type TrackLane = {
|
|
id?: string
|
|
name: string
|
|
kind: string
|
|
sortOrder: number
|
|
stages: StageNode[]
|
|
}
|
|
|
|
type PipelineVisualizationProps = {
|
|
tracks: TrackLane[]
|
|
className?: string
|
|
}
|
|
|
|
const stageColors: Record<string, string> = {
|
|
INTAKE: 'bg-blue-50 border-blue-300 text-blue-700',
|
|
FILTER: 'bg-amber-50 border-amber-300 text-amber-700',
|
|
EVALUATION: 'bg-purple-50 border-purple-300 text-purple-700',
|
|
SELECTION: 'bg-rose-50 border-rose-300 text-rose-700',
|
|
LIVE_FINAL: 'bg-emerald-50 border-emerald-300 text-emerald-700',
|
|
RESULTS: 'bg-cyan-50 border-cyan-300 text-cyan-700',
|
|
}
|
|
|
|
const trackKindBadge: Record<string, string> = {
|
|
MAIN: 'bg-blue-100 text-blue-700',
|
|
AWARD: 'bg-amber-100 text-amber-700',
|
|
SHOWCASE: 'bg-purple-100 text-purple-700',
|
|
}
|
|
|
|
export function PipelineVisualization({
|
|
tracks,
|
|
className,
|
|
}: PipelineVisualizationProps) {
|
|
const sortedTracks = [...tracks].sort((a, b) => a.sortOrder - b.sortOrder)
|
|
|
|
return (
|
|
<div className={cn('space-y-4', className)}>
|
|
{sortedTracks.map((track) => {
|
|
const sortedStages = [...track.stages].sort(
|
|
(a, b) => a.sortOrder - b.sortOrder
|
|
)
|
|
|
|
return (
|
|
<Card key={track.id ?? track.name} className="p-4">
|
|
{/* Track header */}
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="text-sm font-semibold">{track.name}</span>
|
|
<Badge
|
|
variant="secondary"
|
|
className={cn(
|
|
'text-[10px] h-5',
|
|
trackKindBadge[track.kind] ?? ''
|
|
)}
|
|
>
|
|
{track.kind}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Stage flow */}
|
|
<div className="flex items-center gap-1 overflow-x-auto pb-1">
|
|
{sortedStages.map((stage, index) => (
|
|
<div key={stage.id ?? index} className="flex items-center gap-1 shrink-0">
|
|
<div
|
|
className={cn(
|
|
'flex flex-col items-center rounded-lg border px-3 py-2 min-w-[100px]',
|
|
stageColors[stage.stageType] ?? 'bg-gray-50 border-gray-300'
|
|
)}
|
|
>
|
|
<span className="text-xs font-medium text-center leading-tight">
|
|
{stage.name}
|
|
</span>
|
|
<span className="text-[10px] opacity-70 mt-0.5">
|
|
{stage.stageType.replace('_', ' ')}
|
|
</span>
|
|
{stage._count?.projectStageStates !== undefined &&
|
|
stage._count.projectStageStates > 0 && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-[9px] h-4 px-1 mt-1"
|
|
>
|
|
{stage._count.projectStageStates}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{index < sortedStages.length - 1 && (
|
|
<ArrowRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
)}
|
|
</div>
|
|
))}
|
|
{sortedStages.length === 0 && (
|
|
<span className="text-xs text-muted-foreground italic">
|
|
No stages
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
|
|
{tracks.length === 0 && (
|
|
<p className="text-sm text-muted-foreground text-center py-4">
|
|
No tracks to visualize
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|