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

feat: timeline 'Comentário adicionado' com autor; skeletons na página de detalhe; skeleton nas filas; alias de Convex já padronizado; mutation addComment inclui authorName/avatar

Browse source
This commit is contained in:
esdrasrenan 2025-10-04 01:45:57 -03:00
parent da1633a30e
commit 9b0c0bd80a
5 changed files with 128 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/src/components/tickets/ticket-detail-view.tsx
View file

@ -7,6 +7,9 @@ import { api } from "@/convex/_generated/api";
import { DEFAULT_TENANT_ID } from "@/lib/constants";
import { mapTicketWithDetailsFromServer } from "@/lib/mappers/ticket";
import { getTicketById } from "@/lib/mocks/tickets";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { TicketComments } from "@/components/tickets/ticket-comments";
import { TicketDetailsPanel } from "@/components/tickets/ticket-details-panel";
import { TicketSummaryHeader } from "@/components/tickets/ticket-summary-header";
@ -21,7 +24,34 @@ export function TicketDetailView({ id }: { id: string }) {
} else if (isMockId) {
ticket = getTicketById(id) ?? null;
}
if (!ticket) return <div className="px-4 py-8 text-sm text-muted-foreground">Carregando ticket...</div>;
if (!ticket) return (
<div className="flex flex-col gap-6 px-4 lg:px-6">
<Card className="rounded-xl border bg-card shadow-sm">
<CardContent className="space-y-3 p-6">
<div className="flex items-center gap-2"><Skeleton className="h-5 w-24" /><Skeleton className="h-5 w-20" /></div>
<Skeleton className="h-7 w-2/3" />
<Skeleton className="h-4 w-1/2" />
</CardContent>
</Card>
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
<Card className="rounded-xl border bg-card shadow-sm">
<CardContent className="space-y-4 p-6">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="space-y-2">
<div className="flex items-center gap-2"><Skeleton className="h-4 w-28" /><Skeleton className="h-3 w-24" /></div>
<Skeleton className="h-16 w-full" />
</div>
))}
</CardContent>
</Card>
<Card className="rounded-xl border bg-card shadow-sm">
<CardContent className="space-y-3 p-6">
{Array.from({ length: 5 }).map((_, i) => (<Skeleton key={i} className="h-3 w-full" />))}
</CardContent>
</Card>
</div>
</div>
);
return (
<div className="flex flex-col gap-6 px-4 lg:px-6">
<TicketSummaryHeader ticket={ticket as any} />

16
web/src/components/tickets/ticket-queue-summary.tsx
View file

@ -14,8 +14,20 @@ interface TicketQueueSummaryProps {
}
export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
const fromServer = useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID }) ?? []
const data: TicketQueueSummary[] = (queues ?? fromServer) as any
const fromServer = useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID })
const data: TicketQueueSummary[] = (queues ?? fromServer ?? []) as any
if (!queues && fromServer === undefined) {
return (
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="rounded-xl border bg-card p-4">
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
<div className="mt-4 h-3 w-full animate-pulse rounded bg-muted" />
</div>
))}
</div>
)
}
return (
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{data.map((queue) => {

1
web/src/components/tickets/ticket-timeline.tsx
View file

@ -75,6 +75,7 @@ export function TicketTimeline({ ticket }: TicketTimelineProps) {
if (entry.type === "ASSIGNEE_CHANGED" && (p.assigneeName || p.assigneeId)) message = `Responsável alterado${p.assigneeName ? ` para ${p.assigneeName}` : ""}`
if (entry.type === "QUEUE_CHANGED" && (p.queueName || p.queueId)) message = `Fila alterada${p.queueName ? ` para ${p.queueName}` : ""}`
if (entry.type === "CREATED" && (p.requesterName)) message = `Criado por ${p.requesterName}`
if (entry.type === "COMMENT_ADDED" && (p.authorName || p.authorId)) message = `Comentário adicionado${p.authorName ? ` por ${p.authorName}` : ""}`
if (!message) return null
return (
<div className="rounded-lg border border-dashed bg-card px-3 py-2 text-sm text-muted-foreground">