UI/UX audit fixes: clickable pipelines, broken links, isActive locking
- Make pipeline cards clickable on list page (navigate to detail view) - Fix broken nav link: applicant /messages → /mentor - Fix broken nav link: mentor /messages → /projects - Add isActive field locking to all 7 wizard sections (intake, main-track, filtering, assignment, awards, live-finals, notifications) - Add minLoad ≤ maxLoad cross-field validation in assignment section - Add duplicate stage slug detection in main track section - Add active pipeline warning banners in intake and main track sections Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -133,71 +133,78 @@ export default function PipelineListPage() {
|
||||
{pipelines && pipelines.length > 0 && (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{pipelines.map((pipeline) => (
|
||||
<Card key={pipeline.id} className="group hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="text-base truncate">
|
||||
{pipeline.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-mono text-xs">
|
||||
{pipeline.slug}
|
||||
</CardDescription>
|
||||
<Link
|
||||
key={pipeline.id}
|
||||
href={`/admin/rounds/pipeline/${pipeline.id}` as Route}
|
||||
className="block"
|
||||
>
|
||||
<Card className="group hover:shadow-md transition-shadow cursor-pointer">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="text-base truncate">
|
||||
{pipeline.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-mono text-xs">
|
||||
{pipeline.slug}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
'text-[10px] shrink-0',
|
||||
statusColors[pipeline.status] ?? ''
|
||||
)}
|
||||
>
|
||||
{pipeline.status}
|
||||
</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/admin/rounds/pipeline/${pipeline.id}` as Route}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
View
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/admin/rounds/pipeline/${pipeline.id}/edit` as Route}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
'text-[10px] shrink-0',
|
||||
statusColors[pipeline.status] ?? ''
|
||||
)}
|
||||
>
|
||||
{pipeline.status}
|
||||
</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/admin/rounds/pipeline/${pipeline.id}` as Route}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
View
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/admin/rounds/pipeline/${pipeline.id}/edit` as Route}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Layers className="h-3.5 w-3.5" />
|
||||
<span>{pipeline._count.tracks} tracks</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<GitBranch className="h-3.5 w-3.5" />
|
||||
<span>{pipeline._count.routingRules} rules</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Layers className="h-3.5 w-3.5" />
|
||||
<span>{pipeline._count.tracks} tracks</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<GitBranch className="h-3.5 w-3.5" />
|
||||
<span>{pipeline._count.routingRules} rules</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Created {format(new Date(pipeline.createdAt), 'MMM d, yyyy')}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Created {format(new Date(pipeline.createdAt), 'MMM d, yyyy')}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user