Madhura68
f79aef077d
- Nieuwe JobsColumn met Kind/Status filter-popover per kolom (Actief/Klaar) - Filterstate persistent in localStorage (whitelist-validatie tegen corrupte waardes) - Active-filter badges in kolomheader, klikbaar om te wissen - Aanmaakdatum + tijd rechtsonder op elke JobCard (nl-NL short formaat) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { JOB_STATUS_LABELS, JOB_STATUS_COLORS } from '@/components/shared/job-status'
|
|
import { jobStatusToApi } from '@/lib/job-status'
|
|
import type { ClaudeJobKind, ClaudeJobStatus } from '@prisma/client'
|
|
|
|
interface JobCardProps {
|
|
id: string
|
|
kind: ClaudeJobKind
|
|
status: ClaudeJobStatus
|
|
taskCode?: string | null
|
|
taskTitle?: string | null
|
|
ideaCode?: string | null
|
|
ideaTitle?: string | null
|
|
sprintGoal?: string | null
|
|
sprintCode?: string | null
|
|
productName: string
|
|
branch?: string | null
|
|
error?: string | null
|
|
summary?: string | null
|
|
createdAt: Date | string
|
|
isSelected?: boolean
|
|
onClick?: () => void
|
|
}
|
|
|
|
const KIND_LABELS: Record<ClaudeJobKind, string> = {
|
|
TASK_IMPLEMENTATION: 'TAAK',
|
|
SPRINT_IMPLEMENTATION: 'SPRINT',
|
|
IDEA_GRILL: 'GRILL',
|
|
IDEA_MAKE_PLAN: 'PLAN',
|
|
PLAN_CHAT: 'CHAT',
|
|
}
|
|
|
|
export default function JobCard({
|
|
kind, status, taskCode, taskTitle, ideaCode, ideaTitle,
|
|
sprintGoal, sprintCode, productName, branch, error, createdAt, isSelected, onClick,
|
|
}: JobCardProps) {
|
|
let titleText: string
|
|
if (kind === 'TASK_IMPLEMENTATION') {
|
|
titleText = taskCode && taskTitle ? `${taskCode} ${taskTitle}` : taskTitle || 'Taak'
|
|
} else if (kind === 'SPRINT_IMPLEMENTATION') {
|
|
if (sprintCode && sprintGoal) titleText = `${sprintCode} ${sprintGoal}`
|
|
else titleText = sprintGoal || sprintCode || 'Sprint'
|
|
} else if (kind === 'IDEA_GRILL' || kind === 'IDEA_MAKE_PLAN') {
|
|
titleText = ideaCode && ideaTitle ? `${ideaCode} ${ideaTitle}` : ideaTitle || 'Idee'
|
|
} else if (kind === 'PLAN_CHAT') {
|
|
titleText = ideaCode ? `Chat ${ideaCode}` : 'Chat'
|
|
} else {
|
|
titleText = 'Job'
|
|
}
|
|
|
|
const detailText = branch || (error ? error.slice(0, 80) : null) || productName
|
|
|
|
const apiStatus = jobStatusToApi(status)
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={cn(
|
|
'border rounded-lg p-3 cursor-pointer hover:bg-surface-container transition-colors text-sm',
|
|
isSelected && 'ring-2 ring-primary',
|
|
)}
|
|
>
|
|
<div className="flex justify-between items-center gap-2">
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground font-mono">
|
|
{KIND_LABELS[kind]}
|
|
</span>
|
|
<span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium', JOB_STATUS_COLORS[apiStatus])}>
|
|
{JOB_STATUS_LABELS[apiStatus]}
|
|
</span>
|
|
</div>
|
|
<p className="font-medium truncate mt-1">{titleText}</p>
|
|
<div className="flex items-end justify-between gap-2 mt-0.5">
|
|
<p className="text-xs text-muted-foreground truncate">{detailText}</p>
|
|
<span className="text-[10px] text-muted-foreground shrink-0 tabular-nums">
|
|
{new Date(createdAt).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|