Add ticket detail page with transaction timeline and status change
This commit is contained in:
Gjermund Høsøien Wiggen
375
web/src/app/tickets/[id]/page.tsx
Normal file
375
web/src/app/tickets/[id]/page.tsx
Normal file
@@ -0,0 +1,375 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { formatDistanceToNow } from "date-fns";
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Plus,
|
||||||
|
ArrowRightLeft,
|
||||||
|
MessageSquare,
|
||||||
|
Pencil,
|
||||||
|
RefreshCw,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardContent,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
getTicket,
|
||||||
|
getTicketTransactions,
|
||||||
|
getQueues,
|
||||||
|
previewTicket,
|
||||||
|
updateTicket,
|
||||||
|
} from "@/lib/api";
|
||||||
|
import type { Ticket, Transaction, Queue, PreviewResult, UpdateResult } from "@/lib/types";
|
||||||
|
|
||||||
|
const STATUS_COLORS: Record<string, string> = {
|
||||||
|
new: "bg-blue-500/10 text-blue-400 border-blue-500/30",
|
||||||
|
open: "bg-sky-500/10 text-sky-400 border-sky-500/30",
|
||||||
|
in_progress: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
|
||||||
|
resolved: "bg-green-500/10 text-green-400 border-green-500/30",
|
||||||
|
closed: "bg-neutral-500/10 text-neutral-400 border-neutral-500/30",
|
||||||
|
};
|
||||||
|
|
||||||
|
const TX_ICONS: Record<string, React.ElementType> = {
|
||||||
|
Create: Plus,
|
||||||
|
StatusChange: ArrowRightLeft,
|
||||||
|
Comment: MessageSquare,
|
||||||
|
CustomField: Pencil,
|
||||||
|
};
|
||||||
|
|
||||||
|
const TX_COLORS: Record<string, string> = {
|
||||||
|
Create: "bg-green-500/10 text-green-400 border-green-500/30",
|
||||||
|
StatusChange: "bg-blue-500/10 text-blue-400 border-blue-500/30",
|
||||||
|
Comment: "bg-neutral-500/10 text-neutral-400 border-neutral-500/30",
|
||||||
|
CustomField: "bg-purple-500/10 text-purple-400 border-purple-500/30",
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatDate(iso: string) {
|
||||||
|
return new Date(iso).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TicketDetailPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||||
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||||
|
const [queues, setQueues] = useState<Queue[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [selectedStatus, setSelectedStatus] = useState<string>("");
|
||||||
|
const [previewing, setPreviewing] = useState(false);
|
||||||
|
const [applying, setApplying] = useState(false);
|
||||||
|
const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
|
||||||
|
const [previewResult, setPreviewResult] = useState<PreviewResult | null>(null);
|
||||||
|
const [previewError, setPreviewError] = useState<string | null>(null);
|
||||||
|
const [applyResult, setApplyResult] = useState<UpdateResult | null>(null);
|
||||||
|
const [applyError, setApplyError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const [tRes, txRes, qRes] = await Promise.all([
|
||||||
|
getTicket(id),
|
||||||
|
getTicketTransactions(id),
|
||||||
|
getQueues(),
|
||||||
|
]);
|
||||||
|
if (tRes.error) setError(tRes.error);
|
||||||
|
else {
|
||||||
|
setTicket(tRes.data);
|
||||||
|
setSelectedStatus(tRes.data?.status ?? "");
|
||||||
|
}
|
||||||
|
if (txRes.error) setError(txRes.error);
|
||||||
|
else setTransactions(txRes.data ?? []);
|
||||||
|
if (qRes.error && !error) setError(qRes.error);
|
||||||
|
else setQueues(qRes.data ?? []);
|
||||||
|
setLoading(false);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
const handlePreview = async () => {
|
||||||
|
if (!selectedStatus) return;
|
||||||
|
setPreviewing(true);
|
||||||
|
setPreviewError(null);
|
||||||
|
const { data, error } = await previewTicket(id, { status: selectedStatus });
|
||||||
|
setPreviewing(false);
|
||||||
|
if (error) {
|
||||||
|
setPreviewError(error);
|
||||||
|
} else {
|
||||||
|
setPreviewResult(data);
|
||||||
|
}
|
||||||
|
setPreviewDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApply = async () => {
|
||||||
|
if (!selectedStatus) return;
|
||||||
|
setApplying(true);
|
||||||
|
setApplyError(null);
|
||||||
|
setApplyResult(null);
|
||||||
|
const { data, error } = await updateTicket(id, { status: selectedStatus });
|
||||||
|
setApplying(false);
|
||||||
|
if (error) {
|
||||||
|
setApplyError(error);
|
||||||
|
} else {
|
||||||
|
setApplyResult(data);
|
||||||
|
await fetchData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const queueName = queues.find((q) => q.id === ticket?.queue_id)?.name ?? ticket?.queue_id ?? "Unknown";
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="text-sm text-neutral-400 py-12 text-center">Loading ticket...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error && !ticket) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center gap-4 py-12">
|
||||||
|
<div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-400">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
<Link href="/" className="text-sm text-blue-400 hover:underline">
|
||||||
|
Back to tickets
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!ticket) {
|
||||||
|
return (
|
||||||
|
<div className="text-sm text-neutral-400 py-12 text-center">
|
||||||
|
Ticket not found.{" "}
|
||||||
|
<Link href="/" className="text-blue-400 hover:underline">
|
||||||
|
Back to tickets
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-1.5 text-sm text-neutral-400 hover:text-neutral-200 transition-colors w-fit"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="size-4" />
|
||||||
|
All tickets
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex flex-col gap-1.5">
|
||||||
|
<CardTitle className="text-xl font-semibold">{ticket.subject}</CardTitle>
|
||||||
|
<div className="flex items-center gap-3 text-sm text-neutral-400">
|
||||||
|
<span>{queueName}</span>
|
||||||
|
<span>Created {formatDate(ticket.created_at)}</span>
|
||||||
|
<span>Updated {formatDate(ticket.updated_at)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge className={`border ${STATUS_COLORS[ticket.status] ?? "bg-neutral-500/10 text-neutral-400 border-neutral-500/30"}`}>
|
||||||
|
{ticket.status.replace("_", " ")}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-neutral-400 mt-1">
|
||||||
|
Owner: {ticket.owner_id ?? "Unassigned"}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Change Status</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex items-center gap-3 flex-wrap">
|
||||||
|
<Select value={selectedStatus} onValueChange={(v) => setSelectedStatus(!v || v === "_none" ? "" : v)}>
|
||||||
|
<SelectTrigger className="w-44">
|
||||||
|
<SelectValue placeholder="Select status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{["new", "open", "in_progress", "resolved", "closed"].map((s) => (
|
||||||
|
<SelectItem key={s} value={s}>
|
||||||
|
{s.replace("_", " ")}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button variant="outline" onClick={handlePreview} disabled={!selectedStatus || selectedStatus === ticket.status || previewing}>
|
||||||
|
{previewing ? (
|
||||||
|
<>
|
||||||
|
<RefreshCw className="size-4 animate-spin" />
|
||||||
|
Previewing...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"Preview"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleApply} disabled={!selectedStatus || selectedStatus === ticket.status || applying}>
|
||||||
|
{applying ? (
|
||||||
|
<>
|
||||||
|
<RefreshCw className="size-4 animate-spin" />
|
||||||
|
Applying...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"Apply"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
{applyError && <span className="text-sm text-red-400">{applyError}</span>}
|
||||||
|
{applyResult && (
|
||||||
|
<div className="flex flex-col gap-1 w-full mt-2">
|
||||||
|
<span className="text-sm text-green-400">Status updated successfully.</span>
|
||||||
|
{applyResult.scrip_results.map((r) => (
|
||||||
|
<div
|
||||||
|
key={r.scripId}
|
||||||
|
className={`text-xs rounded-md px-2 py-1 ${
|
||||||
|
r.success
|
||||||
|
? "bg-green-500/10 text-green-400"
|
||||||
|
: "bg-red-500/10 text-red-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{r.scripId}: {r.message}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Transaction Timeline</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{transactions.length === 0 ? (
|
||||||
|
<div className="text-sm text-neutral-400 py-4">No transactions yet.</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
{transactions.map((tx) => {
|
||||||
|
const Icon = TX_ICONS[tx.transaction_type] ?? MessageSquare;
|
||||||
|
return (
|
||||||
|
<div key={tx.id} className="flex gap-3">
|
||||||
|
<div className="mt-0.5 flex-shrink-0">
|
||||||
|
<Icon className="size-4 text-neutral-500" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-0.5 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<Badge
|
||||||
|
className={`border text-[10px] px-1.5 ${TX_COLORS[tx.transaction_type] ?? "bg-neutral-500/10 text-neutral-400 border-neutral-500/30"}`}
|
||||||
|
>
|
||||||
|
{tx.transaction_type}
|
||||||
|
</Badge>
|
||||||
|
{tx.field && (
|
||||||
|
<span className="text-xs text-neutral-300">
|
||||||
|
{tx.field}
|
||||||
|
{tx.old_value && tx.new_value ? (
|
||||||
|
<>
|
||||||
|
{" "}
|
||||||
|
<span className="text-neutral-500">{tx.old_value}</span> →{" "}
|
||||||
|
<span className="text-neutral-200">{tx.new_value}</span>
|
||||||
|
</>
|
||||||
|
) : tx.new_value ? (
|
||||||
|
<>
|
||||||
|
{" "}
|
||||||
|
set to <span className="text-neutral-200">{tx.new_value}</span>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-neutral-500">
|
||||||
|
{formatDistanceToNow(new Date(tx.created_at), { addSuffix: true })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{ticket.custom_fields && ticket.custom_fields.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Custom Fields</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{ticket.custom_fields.map((cf) => (
|
||||||
|
<div key={cf.id} className="flex gap-2 text-sm">
|
||||||
|
<span className="text-neutral-400">
|
||||||
|
{cf.custom_field?.name ?? cf.custom_field_id}:
|
||||||
|
</span>
|
||||||
|
<span className="text-neutral-200">{cf.value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
|
||||||
|
<DialogContent showCloseButton={true}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Preview Status Change</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
The following scrips would execute when changing status to{" "}
|
||||||
|
<span className="text-neutral-200 font-medium">
|
||||||
|
{selectedStatus.replace("_", " ")}
|
||||||
|
</span>
|
||||||
|
.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{previewError && (
|
||||||
|
<div className="text-sm text-red-400">{previewError}</div>
|
||||||
|
)}
|
||||||
|
{previewResult && previewResult.prepared_scrips.length === 0 && (
|
||||||
|
<div className="text-sm text-neutral-400">No scrips would be triggered.</div>
|
||||||
|
)}
|
||||||
|
{previewResult?.prepared_scrips.map((ps) => (
|
||||||
|
<div
|
||||||
|
key={ps.scripId}
|
||||||
|
className="rounded-lg border border-neutral-800 bg-neutral-900 p-3 text-sm"
|
||||||
|
>
|
||||||
|
<div className="font-medium text-neutral-200">{ps.scripName}</div>
|
||||||
|
<div className="text-neutral-400 text-xs mt-0.5">
|
||||||
|
Action: {ps.actionType}
|
||||||
|
{ps.dryRun ? " (dry run)" : " (would execute)"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user