126 lines
4.5 KiB
TypeScript
126 lines
4.5 KiB
TypeScript
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { apiRequest, getQueryFn } from "@/lib/queryClient";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { toast } from "@/hooks/use-toast";
|
|
|
|
type Ticket = {
|
|
ticket_id: string;
|
|
name: string;
|
|
email: string;
|
|
subject: string;
|
|
message: string;
|
|
status: string;
|
|
created_at?: string | null;
|
|
updated_at?: string | null;
|
|
};
|
|
|
|
type TicketsResponse = {
|
|
page: number;
|
|
page_size: number;
|
|
total: number;
|
|
tickets: Ticket[];
|
|
};
|
|
|
|
export default function AdminSupportTickets() {
|
|
const queryClient = useQueryClient();
|
|
const { data, isLoading } = useQuery<TicketsResponse>({
|
|
queryKey: ["admin/support-tickets"],
|
|
queryFn: getQueryFn<TicketsResponse>({ on401: "throw" }),
|
|
});
|
|
|
|
const handleDelete = async (ticketId: string) => {
|
|
const confirmed = window.confirm("Delete this ticket? This cannot be undone.");
|
|
if (!confirmed) return;
|
|
try {
|
|
await apiRequest("DELETE", `admin/support-tickets/${ticketId}`);
|
|
toast({ title: "Ticket deleted" });
|
|
queryClient.invalidateQueries({ queryKey: ["admin/support-tickets"] });
|
|
} catch (err: any) {
|
|
toast({ title: "Delete failed", description: err?.message || "Try again." });
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div className="text-muted-foreground">Loading tickets...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Support Tickets</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
All customer support requests.
|
|
</p>
|
|
</div>
|
|
<Badge variant="outline">{data?.total ?? 0} total</Badge>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-border/60 bg-card/70 p-4">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Ticket ID</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Email</TableHead>
|
|
<TableHead>Details</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Created</TableHead>
|
|
<TableHead className="text-right">Action</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data?.tickets?.length ? (
|
|
data.tickets.map((ticket) => (
|
|
<TableRow key={ticket.ticket_id} className="align-top">
|
|
<TableCell className="font-mono text-xs break-all max-w-[140px]">
|
|
{ticket.ticket_id}
|
|
</TableCell>
|
|
<TableCell className="font-medium">{ticket.name}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground break-all">
|
|
{ticket.email}
|
|
</TableCell>
|
|
<TableCell className="max-w-[360px]">
|
|
<div className="text-sm font-semibold break-words">
|
|
{ticket.subject}
|
|
</div>
|
|
<details className="mt-2 text-xs text-muted-foreground">
|
|
<summary className="cursor-pointer select-none">View message</summary>
|
|
<div className="mt-2 whitespace-pre-wrap break-words">
|
|
{ticket.message}
|
|
</div>
|
|
</details>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="secondary">{ticket.status}</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground">
|
|
{ticket.created_at ? new Date(ticket.created_at).toLocaleString() : "-"}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => handleDelete(ticket.ticket_id)}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center text-muted-foreground">
|
|
No tickets yet.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|