refactor: enhance user tables and machine ticket views
This commit is contained in:
codex-bot
parent
bd2f22d046
commit
28796bf105
7 changed files with 416 additions and 201 deletions
|
|
@ -5,6 +5,7 @@ import Link from "next/link"
|
|||
import { formatDistanceStrict } from "date-fns"
|
||||
import { ptBR } from "date-fns/locale"
|
||||
import { LayoutGrid } from "lucide-react"
|
||||
import { IconBuildingOff, IconCategory, IconUserOff } from "@tabler/icons-react"
|
||||
|
||||
import type { Ticket } from "@/lib/schemas/ticket"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
|
@ -12,6 +13,7 @@ import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "
|
|||
import { cn } from "@/lib/utils"
|
||||
import { PrioritySelect } from "@/components/tickets/priority-select"
|
||||
import { getTicketStatusChipClass, getTicketStatusLabel } from "@/lib/ticket-status-style"
|
||||
import { EmptyIndicator } from "@/components/ui/empty-indicator"
|
||||
|
||||
type TicketsBoardProps = {
|
||||
tickets: Ticket[]
|
||||
|
|
@ -185,7 +187,13 @@ export function TicketsBoard({ tickets, enteringIds }: TicketsBoardProps) {
|
|||
Empresa
|
||||
</dt>
|
||||
<dd className="text-neutral-700">
|
||||
{ticket.company?.name ?? "Sem empresa"}
|
||||
{ticket.company?.name ?? (
|
||||
<EmptyIndicator
|
||||
icon={IconBuildingOff}
|
||||
label="Nenhuma empresa vinculada"
|
||||
className="h-7 w-7 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
@ -193,7 +201,13 @@ export function TicketsBoard({ tickets, enteringIds }: TicketsBoardProps) {
|
|||
Responsável
|
||||
</dt>
|
||||
<dd className="text-neutral-700">
|
||||
{ticket.assignee?.name ?? "Sem responsável"}
|
||||
{ticket.assignee?.name ?? (
|
||||
<EmptyIndicator
|
||||
icon={IconUserOff}
|
||||
label="Sem responsável"
|
||||
className="h-7 w-7 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
@ -222,7 +236,15 @@ export function TicketsBoard({ tickets, enteringIds }: TicketsBoardProps) {
|
|||
<div className="mt-auto flex items-center justify-center border-t border-slate-200 pt-4 text-sm text-neutral-600 text-center">
|
||||
<span className="text-neutral-700">
|
||||
Categoria:{" "}
|
||||
<span className="font-semibold text-neutral-900">{ticket.category?.name ?? "Sem categoria"}</span>
|
||||
{ticket.category?.name ? (
|
||||
<span className="font-semibold text-neutral-900">{ticket.category.name}</span>
|
||||
) : (
|
||||
<EmptyIndicator
|
||||
icon={IconCategory}
|
||||
label="Sem categoria"
|
||||
className="ml-2 h-7 w-7 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"
|
|||
import { useRouter } from "next/navigation"
|
||||
import { format, formatDistanceToNowStrict } from "date-fns"
|
||||
import { ptBR } from "date-fns/locale"
|
||||
import { IconBuildingOff, IconCategory, IconHierarchyOff, IconUserOff } from "@tabler/icons-react"
|
||||
|
||||
import type { Ticket } from "@/lib/schemas/ticket"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
|
|
@ -23,6 +24,7 @@ import { PrioritySelect } from "@/components/tickets/priority-select"
|
|||
import { cn } from "@/lib/utils"
|
||||
import { deriveServerOffset, toServerTimestamp } from "@/components/tickets/ticket-timer.utils"
|
||||
import { getTicketStatusLabel, getTicketStatusTextClass } from "@/lib/ticket-status-style"
|
||||
import { EmptyIndicator } from "@/components/ui/empty-indicator"
|
||||
|
||||
const cellClass =
|
||||
"px-3 py-4 sm:px-4 xl:px-3 xl:py-3 align-middle text-sm text-neutral-700 whitespace-normal " +
|
||||
|
|
@ -60,7 +62,15 @@ function formatQueueLabel(queue?: string | null) {
|
|||
|
||||
function AssigneeCell({ ticket }: { ticket: Ticket }) {
|
||||
if (!ticket.assignee) {
|
||||
return <span className="text-sm text-neutral-600">Sem responsável</span>
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<EmptyIndicator
|
||||
icon={IconUserOff}
|
||||
label="Sem responsável"
|
||||
className="h-10 w-10 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const initials = ticket.assignee.name
|
||||
|
|
@ -188,13 +198,19 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
|
|||
}}
|
||||
>
|
||||
<TableCell className={`${cellClass} overflow-hidden`}>
|
||||
<div className="flex min-w-0 flex-col gap-1">
|
||||
<span className="font-semibold tracking-tight text-neutral-900">
|
||||
#{ticket.reference}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{ticket.queue ?? "Sem fila"}
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-col items-start gap-1">
|
||||
<span className="font-semibold tracking-tight text-neutral-900">#{ticket.reference}</span>
|
||||
<div className="flex items-center gap-1 text-xs text-neutral-500">
|
||||
{ticket.queue ? (
|
||||
<span className="truncate">{ticket.queue}</span>
|
||||
) : (
|
||||
<EmptyIndicator
|
||||
icon={IconHierarchyOff}
|
||||
label="Sem fila"
|
||||
className="h-6 w-6 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={cellClass}>
|
||||
|
|
@ -220,7 +236,11 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
|
|||
) : null}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-neutral-400">Sem categoria</span>
|
||||
<EmptyIndicator
|
||||
icon={IconCategory}
|
||||
label="Sem categoria"
|
||||
className="h-6 w-6 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -230,12 +250,17 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
|
|||
<span className="font-semibold text-neutral-800" title={ticket.requester.name}>
|
||||
{ticket.requester.name}
|
||||
</span>
|
||||
<span
|
||||
className="truncate text-sm text-neutral-600"
|
||||
title={((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
|
||||
>
|
||||
{((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
|
||||
</span>
|
||||
{ticket.company?.name ? (
|
||||
<span className="truncate text-sm text-neutral-600" title={ticket.company.name}>
|
||||
{ticket.company.name}
|
||||
</span>
|
||||
) : (
|
||||
<EmptyIndicator
|
||||
icon={IconBuildingOff}
|
||||
label="Nenhuma empresa vinculada"
|
||||
className="h-7 w-7 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} hidden md:table-cell text-center`}>
|
||||
|
|
@ -252,12 +277,22 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
|
|||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} hidden lg:table-cell overflow-hidden text-center`}>
|
||||
<span
|
||||
className="mx-auto truncate text-sm font-semibold text-neutral-800"
|
||||
title={queueDisplay.title}
|
||||
>
|
||||
{queueDisplay.label}
|
||||
</span>
|
||||
{ticket.queue ? (
|
||||
<span
|
||||
className="mx-auto truncate text-sm font-semibold text-neutral-800"
|
||||
title={queueDisplay.title}
|
||||
>
|
||||
{queueDisplay.label}
|
||||
</span>
|
||||
) : (
|
||||
<div className="flex justify-center">
|
||||
<EmptyIndicator
|
||||
icon={IconHierarchyOff}
|
||||
label="Sem fila"
|
||||
className="h-7 w-7 border-neutral-200 bg-transparent text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} overflow-hidden`}>
|
||||
<div className="flex min-w-0 flex-col items-center gap-1 text-center">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue