feat(ui): add ticket attention badges and sharpen border radius
This commit is contained in:
@@ -2,11 +2,48 @@
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { CalendarClock, ClipboardCheck } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { TicketListItem } from '@/types';
|
||||
|
||||
import { formatDate } from '@/utils/date';
|
||||
|
||||
function TicketAttention({ ticket }: { ticket: TicketListItem }) {
|
||||
const summary = ticket.attention_summary;
|
||||
const reviewCount = summary?.pending_repair_review_count ?? 0;
|
||||
const extensionCount = summary?.pending_extension_request_count ?? 0;
|
||||
const showReview = reviewCount > 0;
|
||||
const showExtension = extensionCount > 0;
|
||||
|
||||
if (!showReview && !showExtension) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{showReview ? (
|
||||
<Badge
|
||||
className="gap-1.5 border-0 bg-orange-100 text-orange-700 shadow-none dark:bg-orange-950/60 dark:text-orange-300"
|
||||
title={`${reviewCount} pending repair ${reviewCount === 1 ? 'review' : 'reviews'}`}
|
||||
>
|
||||
<ClipboardCheck aria-hidden="true" />
|
||||
Review
|
||||
<span className="font-semibold tabular-nums">{reviewCount}</span>
|
||||
</Badge>
|
||||
) : null}
|
||||
{showExtension ? (
|
||||
<Badge
|
||||
className="gap-1.5 border-0 bg-blue-100 text-blue-700 shadow-none dark:bg-blue-950/60 dark:text-blue-300"
|
||||
title={`${extensionCount} pending extension ${extensionCount === 1 ? 'request' : 'requests'}`}
|
||||
>
|
||||
<CalendarClock aria-hidden="true" />
|
||||
Extension
|
||||
<span className="font-semibold tabular-nums">+{extensionCount}</span>
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTicketColumns(): ColumnDef<TicketListItem>[] {
|
||||
return useMemo(
|
||||
() => [
|
||||
@@ -29,6 +66,13 @@ export function useTicketColumns(): ColumnDef<TicketListItem>[] {
|
||||
header: 'Detections',
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
id: 'attention',
|
||||
header: 'Attention',
|
||||
size: 210,
|
||||
meta: { disableTruncate: true },
|
||||
cell: ({ row }) => <TicketAttention ticket={row.original} />,
|
||||
},
|
||||
{
|
||||
id: 'created_by',
|
||||
header: 'Uploaded By',
|
||||
|
||||
Reference in New Issue
Block a user