Michael Chihlas
a3f8bb3427
- TicketDetailHeader: Display ticket info with status dropdown - TicketNotesFeed: Chronological list of ticket notes with internal flag - TicketAddNote: Form to add notes (requires linked session) - TicketConfigs: Display related configurations/devices - TicketRelated: List of related tickets as clickable buttons All components use type-safe imports from psaContext and integrations APIs. Styling follows design system (flat dark theme, electric blue accent, Tailwind v4). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import type { RelatedTicket } from '@/api/psaContext'
|
|
|
|
interface Props {
|
|
tickets: RelatedTicket[]
|
|
onSelectTicket: (ticketId: number) => void
|
|
}
|
|
|
|
export function TicketRelated({ tickets, onSelectTicket }: Props) {
|
|
if (tickets.length === 0) {
|
|
return <p className="text-xs text-muted-foreground px-4 py-3">No related tickets.</p>
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2 px-4 py-3">
|
|
{tickets.map(ticket => (
|
|
<button
|
|
key={ticket.id}
|
|
onClick={() => onSelectTicket(ticket.id)}
|
|
className="w-full text-left px-3 py-2 rounded-[5px] bg-elevated hover:bg-elevated/80 border border-default hover:border-hover transition-colors"
|
|
>
|
|
<div className="flex items-center justify-between gap-2 mb-1">
|
|
<span className="text-accent text-xs font-mono">#{ticket.id}</span>
|
|
{ticket.board && <span className="text-xs text-muted-foreground">{ticket.board}</span>}
|
|
</div>
|
|
<p className="text-sm text-primary line-clamp-2 mb-1.5">{ticket.summary}</p>
|
|
<div className="flex items-center gap-2">
|
|
{ticket.status && (
|
|
<span className="px-1.5 py-0.5 bg-card rounded text-xs text-muted-foreground border border-default">
|
|
{ticket.status}
|
|
</span>
|
|
)}
|
|
{ticket.priority && (
|
|
<span className="px-1.5 py-0.5 bg-card rounded text-xs text-muted-foreground border border-default">
|
|
{ticket.priority}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|