102 lines
4 KiB
TypeScript
102 lines
4 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "convex/react";
|
|
import { api } from "@/convex/_generated/api";
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants";
|
|
import { mapTicketWithDetailsFromServer } from "@/lib/mappers/ticket";
|
|
import type { Id } from "@/convex/_generated/dataModel";
|
|
import type { TicketWithDetails } from "@/lib/schemas/ticket";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { TicketComments } from "@/components/tickets/ticket-comments.rich";
|
|
import { TicketDetailsPanel } from "@/components/tickets/ticket-details-panel";
|
|
import { TicketSummaryHeader } from "@/components/tickets/ticket-summary-header";
|
|
import { TicketTimeline } from "@/components/tickets/ticket-timeline";
|
|
import { useAuth } from "@/lib/auth-client";
|
|
|
|
export function TicketDetailView({ id }: { id: string }) {
|
|
const { convexUserId } = useAuth();
|
|
const shouldSkip = !convexUserId;
|
|
const t = useQuery(
|
|
api.tickets.getById,
|
|
shouldSkip
|
|
? "skip"
|
|
: {
|
|
tenantId: DEFAULT_TENANT_ID,
|
|
id: id as Id<"tickets">,
|
|
viewerId: convexUserId as Id<"users">,
|
|
}
|
|
);
|
|
const isLoading = shouldSkip || t === undefined;
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex flex-col gap-6 px-4 lg:px-6">
|
|
<Card className="rounded-2xl border border-slate-200 bg-white 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-2xl border border-slate-200 bg-white 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-2xl border border-slate-200 bg-white 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>
|
|
);
|
|
}
|
|
|
|
if (!t) {
|
|
return (
|
|
<div className="flex flex-col gap-6 px-4 lg:px-6">
|
|
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
|
<CardContent className="space-y-3 p-6">
|
|
<p className="text-base font-semibold text-neutral-900">Ticket não encontrado</p>
|
|
<p className="text-sm text-neutral-600">O ticket solicitado não existe ou você não tem permissão para visualizá-lo.</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const ticket = mapTicketWithDetailsFromServer(t as unknown) as TicketWithDetails | null;
|
|
|
|
if (!ticket) {
|
|
return (
|
|
<div className="flex flex-col gap-6 px-4 lg:px-6">
|
|
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
|
<CardContent className="space-y-3 p-6">
|
|
<p className="text-base font-semibold text-neutral-900">Ticket não encontrado</p>
|
|
<p className="text-sm text-neutral-600">O ticket solicitado não existe ou você não tem permissão para visualizá-lo.</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="flex flex-col gap-6 px-4 lg:px-6">
|
|
<TicketSummaryHeader ticket={ticket} />
|
|
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
|
|
<div className="space-y-6">
|
|
<TicketComments ticket={ticket} />
|
|
<TicketTimeline ticket={ticket} />
|
|
</div>
|
|
<TicketDetailsPanel ticket={ticket} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|