From 86e00b076a96c7568dccf46bb2b393b3c1ffff62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?= Date: Sun, 7 Jun 2026 23:13:00 +0200 Subject: [PATCH] Add properties sidebar to inline ticket detail panel - Two-column layout inside TicketDetailPanel: conversation (left) + sidebar (right) - Status section: Select dropdown with all statuses, previewTicket + updateTicket flow with Apply/Cancel - Assignment section: read-only assignee display with avatar initial - Details section: queue name, created/updated/resolved dates - Custom fields section: name:value pairs when present - Sidebar skeleton during loading - Fetches queue info alongside ticket data for display --- web/src/app/page.tsx | 673 ++++++++++++++++++++++++++++++++----------- 1 file changed, 507 insertions(+), 166 deletions(-) diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index c6ce2cd..0d3d5b8 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -4,8 +4,8 @@ import { useState, useEffect, useCallback } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react"; import { formatDistanceToNow } from "date-fns"; -import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket } from "@/lib/api"; -import type { Ticket, Queue, Transaction } from "@/lib/types"; +import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket, updateTicket, previewTicket } from "@/lib/api"; +import type { Ticket, Queue, Transaction, PreviewResult, UpdateResult } from "@/lib/types"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { @@ -16,6 +16,14 @@ import { DialogDescription, DialogFooter, } from "@/components/ui/dialog"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; @@ -35,6 +43,8 @@ const STATUS_LABELS: Record = { closed: "Closed", }; +const ALL_STATUSES = ["new", "open", "in_progress", "resolved", "closed"]; + const FILTERS = [ { key: null, label: "All" }, { key: "open", label: "Open" }, @@ -128,32 +138,98 @@ function TicketDetailPanel({ }) { const [ticket, setTicket] = useState(null); const [transactions, setTransactions] = useState([]); + const [queue, setQueue] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [replyText, setReplyText] = useState(""); - useEffect(() => { + // Status change + const [pendingStatus, setPendingStatus] = useState(null); + const [preview, setPreview] = useState(null); + const [previewLoading, setPreviewLoading] = useState(false); + const [previewError, setPreviewError] = useState(null); + const [applyLoading, setApplyLoading] = useState(false); + const [scripResults, setScripResults] = useState(null); + + const fetchData = useCallback(async () => { setLoading(true); setError(null); setTicket(null); setTransactions([]); setReplyText(""); - Promise.all([ + + const [ticketRes, txRes, queuesRes] = await Promise.all([ getTicket(ticketId), getTicketTransactions(ticketId), - ]).then(([ticketRes, txRes]) => { - if (ticketRes.error) { - setError(ticketRes.error); - } else { - setTicket(ticketRes.data); - } - if (txRes.data) { - setTransactions(txRes.data); - } - setLoading(false); - }); + getQueues(), + ]); + + if (ticketRes.error) { + setError(ticketRes.error); + } else { + setTicket(ticketRes.data); + } + if (txRes.data) { + setTransactions(txRes.data); + } + if (queuesRes.data && ticketRes.data) { + const q = queuesRes.data.find((q) => q.id === ticketRes.data!.queue_id); + if (q) setQueue(q); + } + setLoading(false); }, [ticketId]); + useEffect(() => { + fetchData(); + }, [fetchData]); + + const handleStatusSelect = (value: string | null) => { + if (!value || value === ticket?.status) return; + setPendingStatus(value); + setPreview(null); + setPreviewError(null); + setScripResults(null); + setPreviewLoading(true); + + previewTicket(ticketId, { status: value }).then(({ data, error }) => { + setPreviewLoading(false); + if (error) { + setPreviewError(error); + setPendingStatus(null); + } else { + setPreview(data); + } + }); + }; + + const handleApplyStatus = async () => { + if (!pendingStatus) return; + setApplyLoading(true); + setPreviewError(null); + + const { data, error } = await updateTicket(ticketId, { status: pendingStatus }); + + setApplyLoading(false); + + if (error) { + setPreviewError(error); + } else if (data) { + setTicket(data.ticket); + setScripResults(data.scrip_results); + setPreview(null); + setPendingStatus(null); + const txRes = await getTicketTransactions(ticketId); + if (txRes.data) setTransactions(txRes.data); + } + }; + + const handleCancelStatus = () => { + setPendingStatus(null); + setPreview(null); + setPreviewError(null); + setScripResults(null); + }; + return (
{/* Header */} @@ -168,16 +244,23 @@ function TicketDetailPanel({
{loading && ( -
- {Array.from({ length: 6 }).map((_, i) => ( -
-
-
-
-
+
+
+ {Array.from({ length: 6 }).map((_, i) => ( +
+
+
+
+
+
-
- ))} + ))} +
+
+ {Array.from({ length: 5 }).map((_, i) => ( +
+ ))} +
)} @@ -188,169 +271,427 @@ function TicketDetailPanel({ )} {!loading && !error && ticket && ( - <> - {/* Title */} -
-

- {ticket.subject} -

-

- {ticket.id.slice(0, 8)} -

-
+
+ {/* Left: conversation */} +
+ {/* Title */} +
+

+ {ticket.subject} +

+

+ {ticket.id.slice(0, 8)} +

+
- {/* Conversation */} -
- {transactions.length === 0 && ( -
-

- No activity yet -

-
- )} - {transactions.map((tx) => { - const isSystem = - tx.transaction_type === "StatusChange" || - tx.transaction_type === "SetOwner" || - tx.transaction_type === "Create"; - const isAgent = - tx.transaction_type === "Correspond" || - tx.transaction_type === "Comment"; + {/* Conversation */} +
+ {transactions.length === 0 && ( +
+

+ No activity yet +

+
+ )} + {transactions.map((tx) => { + const isSystem = + tx.transaction_type === "StatusChange" || + tx.transaction_type === "SetOwner" || + tx.transaction_type === "Create"; + const isAgent = + tx.transaction_type === "Correspond" || + tx.transaction_type === "Comment"; - if (isSystem) { + if (isSystem) { + const txTimeAgo = formatDistanceToNow( + new Date(tx.created_at), + { addSuffix: true } + ); + let message = ""; + if (tx.transaction_type === "Create") { + message = "Ticket created"; + } else if (tx.transaction_type === "StatusChange") { + const oldLabel = tx.old_value + ? STATUS_LABELS[tx.old_value] || tx.old_value + : "?"; + const newLabel = tx.new_value + ? STATUS_LABELS[tx.new_value] || tx.new_value + : "?"; + message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`; + } else if (tx.transaction_type === "SetOwner") { + message = tx.new_value + ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}` + : `${getInitial(tx.creator_id)} unassigned`; + } else { + message = tx.transaction_type; + } + return ( +
+ + {message} · {txTimeAgo} + +
+ ); + } + + const isInternal = + tx.transaction_type === "Comment"; const txTimeAgo = formatDistanceToNow( new Date(tx.created_at), { addSuffix: true } ); - let message = ""; - if (tx.transaction_type === "Create") { - message = "Ticket created"; - } else if (tx.transaction_type === "StatusChange") { - const oldLabel = tx.old_value - ? STATUS_LABELS[tx.old_value] || tx.old_value - : "?"; - const newLabel = tx.new_value - ? STATUS_LABELS[tx.new_value] || tx.new_value - : "?"; - message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`; - } else if (tx.transaction_type === "SetOwner") { - message = tx.new_value - ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}` - : `${getInitial(tx.creator_id)} unassigned`; - } else { - message = tx.transaction_type; - } + return (
- - {message} · {txTimeAgo} - -
- ); - } - - const isInternal = - tx.transaction_type === "Comment"; - const txTimeAgo = formatDistanceToNow( - new Date(tx.created_at), - { addSuffix: true } - ); - - return ( -
-
- - {getInitial(tx.creator_id)} - + + {getInitial(tx.creator_id)} + +
+
+ {isInternal && ( +
+ Internal note +
+ )} +

+ {typeof tx.data === "object" && + tx.data !== null && + "body" in (tx.data as Record) + ? String( + (tx.data as Record).body + ) + : tx.transaction_type} +

+

+ {txTimeAgo} +

+
-
+ + {/* Reply box */} +
+
+