feat(tickets): add TicketFilterBar and TicketListRow components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-16 03:08:15 +00:00
parent 9d88c8456c
commit d2689afa53
2 changed files with 222 additions and 0 deletions
--- a/frontend/src/components/tickets/TicketListRow.tsx
+++ b/frontend/src/components/tickets/TicketListRow.tsx
@@ -0,0 +1,72 @@
+// frontend/src/components/tickets/TicketListRow.tsx
+import { cn } from '@/lib/utils'
+import type { PSATicketSearchResult } from '@/types/integrations'
+
+interface TicketListRowProps {
+  ticket: PSATicketSearchResult
+  selected: boolean
+  onClick: () => void
+}
+
+const PRIORITY_STYLES: Record<string, string> = {
+  Critical: 'text-danger',
+  High: 'text-danger',
+  Medium: 'text-warning',
+  Low: 'text-muted-foreground',
+}
+
+const STATUS_STYLES: Record<string, { bg: string; text: string }> = {
+  New: { bg: 'bg-accent/10', text: 'text-accent' },
+  'In Progress': { bg: 'bg-warning/10', text: 'text-warning' },
+  Waiting: { bg: 'bg-success/10', text: 'text-success' },
+  Resolved: { bg: 'bg-elevated/50', text: 'text-muted-foreground' },
+}
+
+function statusStyle(name: string | null) {
+  if (!name) return { bg: 'bg-elevated', text: 'text-muted-foreground' }
+  return STATUS_STYLES[name] ?? { bg: 'bg-elevated', text: 'text-muted-foreground' }
+}
+
+export function TicketListRow({ ticket, selected, onClick }: TicketListRowProps) {
+  const { bg, text } = statusStyle(ticket.status_name)
+  const priorityClass = PRIORITY_STYLES[ticket.priority_name ?? ''] ?? 'text-muted-foreground'
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={e => e.key === 'Enter' && onClick()}
+      className={cn(
+        'flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors border-b border-default text-sm',
+        selected ? 'bg-accent/5' : 'hover:bg-elevated'
+      )}
+    >
+      {/* ID */}
+      <span className="w-12 shrink-0 text-accent text-xs font-mono">#{ticket.id}</span>
+
+      {/* Summary */}
+      <span className="flex-1 truncate text-primary font-medium">{ticket.summary}</span>
+
+      {/* Company */}
+      <span className="w-32 shrink-0 truncate text-muted-foreground text-xs hidden md:block">
+        {ticket.company_name ?? '—'}
+      </span>
+
+      {/* Board */}
+      <span className="w-28 shrink-0 truncate text-muted-foreground text-xs hidden lg:block">
+        {ticket.board_name ?? '—'}
+      </span>
+
+      {/* Status badge */}
+      <span className={cn('shrink-0 px-1.5 py-0.5 rounded text-[11px] font-medium', bg, text)}>
+        {ticket.status_name ?? '—'}
+      </span>
+
+      {/* Priority */}
+      <span className={cn('w-14 shrink-0 text-xs text-right', priorityClass)}>
+        {ticket.priority_name ?? '—'}
+      </span>
+    </div>
+  )
+}