50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1e7d,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function IconDanger(props: IconProps) { return ( ); } function IconTime(props: IconProps) { return ( ); } type Priority = 'urgent' | 'high' | 'normal'; type Status = 'open' | 'pending' | 'solved'; interface Ticket { id: string; subject: string; requester: string; requesterAvatar: string; priority: Priority; sla: string; breaching: boolean; assignee: string; assigneeAvatar: string; status: Status; } const TICKETS: Ticket[] = [ { id: '#3128', subject: 'SSO login loops back to the sign-in page', requester: 'Jonas Keller', requesterAvatar: '/avatars/people/09.jpg', priority: 'urgent', sla: '38m left', breaching: true, assignee: 'Freya', assigneeAvatar: '/avatars/people/01.jpg', status: 'open', }, { id: '#3127', subject: 'Webhooks delayed by ~10 minutes', requester: 'Zara Osei', requesterAvatar: '/avatars/people/12.jpg', priority: 'high', sla: '3h left', breaching: false, assignee: 'Mateo', assigneeAvatar: '/avatars/people/03.jpg', status: 'open', }, { id: '#3126', subject: 'Cannot download August invoice PDF', requester: 'Nils Bakker', requesterAvatar: '/avatars/people/13.jpg', priority: 'normal', sla: '8h left', breaching: false, assignee: 'Aiko', assigneeAvatar: '/avatars/people/06.jpg', status: 'pending', }, { id: '#3125', subject: 'Add seats mid-cycle proration question', requester: 'Leila Haddad', requesterAvatar: '/avatars/people/05.jpg', priority: 'normal', sla: '1d left', breaching: false, assignee: 'Freya', assigneeAvatar: '/avatars/people/01.jpg', status: 'pending', }, { id: '#3124', subject: 'API returns 429 on burst traffic', requester: 'Tomas Vega', requesterAvatar: '/avatars/people/08.jpg', priority: 'high', sla: 'Met', breaching: false, assignee: 'Mateo', assigneeAvatar: '/avatars/people/03.jpg', status: 'solved', }, { id: '#3123', subject: 'Dark mode logo renders on light emails', requester: 'Freya Lindgren', requesterAvatar: '/avatars/people/01.jpg', priority: 'normal', sla: 'Met', breaching: false, assignee: 'Aiko', assigneeAvatar: '/avatars/people/06.jpg', status: 'solved', }, ]; const PRIORITY_RANK: Record = { urgent: 0, high: 1, normal: 2 }; const PRIORITY_STYLE: Record = { urgent: 'text-rose-700 dark:text-rose-300', high: 'text-amber-700 dark:text-amber-300', normal: 'text-neutral-500 dark:text-neutral-400', }; const STATUS_STYLE: Record = { open: 'bg-amber-50 text-amber-800 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25', pending: 'bg-neutral-100 text-neutral-600 ring-neutral-500/20 dark:bg-neutral-100/10 dark:text-neutral-300 dark:ring-white/15', solved: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-300/25', }; const columns: DataTableColumn[] = [ { id: 'subject', header: 'Ticket', sortable: true, value: (row) => row.subject, cell: (row) => ( {row.subject} {row.id} · {row.requester} ), }, { id: 'priority', header: 'Priority', sortable: true, value: (row) => PRIORITY_RANK[row.priority], cell: (row) => ( {row.priority === 'normal' ? ( ), }, { id: 'sla', header: 'SLA', hideBelow: 'sm', value: (row) => row.sla, cell: (row) => ( {row.sla} ), }, { id: 'assignee', header: 'Assignee', sortable: true, hideBelow: 'md', value: (row) => row.assignee, cell: (row) => ( {/* eslint-disable-next-line @next/next/no-img-element */}

{row.assignee} ), }, { id: 'status', header: 'Status', sortable: true, value: (row) => row.status, cell: (row) => ( ), }, ]; export function TicketsTable({ variant = 'Comfortable' }: { variant?: 'Comfortable' | 'Striped' }) { return (

row.id} rowLabel={(row) => `ticket ${row.id}`} caption="Open support tickets with priority, SLA countdown and assignee." variant={variant === 'Striped' ? 'striped' : 'default'} title="Tickets" quickFilter={{ columnId: 'status', label: 'Filter by status' }} defaultSort={{ columnId: 'priority', direction: 'asc' }} />

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/tables/tickets-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/tickets-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]