esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: refine ticket creation and comments experience

Browse source 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
esdrasrenan 2025-10-05 03:12:53 -03:00
parent 9b16f3cd1e
commit c5864dbefd
5 changed files with 216 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

34
web/src/components/tickets/tickets-table.tsx
View file

@ -1,7 +1,7 @@
"use client"
import { useEffect, useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"
@ -36,7 +36,8 @@ const cellClass = "px-6 py-5 align-top text-sm text-neutral-700 first:pl-8 last:
const queueBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-neutral-700"
const channelBadgeClass = "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-neutral-700"
const categoryBadgeClass = "inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-2.5 py-0.5 text-[11px] font-semibold text-[#02414d]"
const tableRowClass = "group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
const tableRowClass =
"group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
function formatDuration(ms?: number) {
if (!ms || ms <= 0) return "—"
@ -88,6 +89,7 @@ export type TicketsTableProps = {
export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
const [now, setNow] = useState(() => Date.now())
const router = useRouter()
useEffect(() => {
const interval = setInterval(() => {
@ -142,15 +144,24 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
</TableHeader>
<TableBody>
{tickets.map((ticket) => (
<TableRow key={ticket.id} className={tableRowClass}>
<TableRow
key={ticket.id}
className={`${tableRowClass} cursor-pointer`}
role="link"
tabIndex={0}
onClick={() => router.push(`/tickets/${ticket.id}`)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault()
router.push(`/tickets/${ticket.id}`)
}
}}
>
<TableCell className={cellClass}>
<div className="flex flex-col gap-1">
<Link
href={`/tickets/${ticket.id}`}
className="font-semibold tracking-tight text-neutral-900 transition hover:text-neutral-700"
>
<span className="font-semibold tracking-tight text-neutral-900">
#{ticket.reference}
</Link>
</span>
<span className="text-xs text-neutral-500">
{ticket.queue ?? "Sem fila"}
</span>
@ -158,12 +169,9 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
</TableCell>
<TableCell className={cellClass}>
<div className="flex flex-col gap-1.5">
<Link
href={`/tickets/${ticket.id}`}
className="line-clamp-1 text-[15px] font-semibold text-neutral-900 transition hover:text-neutral-700"
>
<span className="line-clamp-1 text-[15px] font-semibold text-neutral-900">
{ticket.subject}
</Link>
</span>
<span className="line-clamp-1 text-sm text-neutral-600">
{ticket.summary ?? "Sem resumo"}
</span>