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
This commit is contained in:
Gjermund Høsøien Wiggen
@@ -4,8 +4,8 @@ import { useState, useEffect, useCallback } from "react";
|
|||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
|
import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
|
||||||
import { formatDistanceToNow } from "date-fns";
|
import { formatDistanceToNow } from "date-fns";
|
||||||
import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket } from "@/lib/api";
|
import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket, updateTicket, previewTicket } from "@/lib/api";
|
||||||
import type { Ticket, Queue, Transaction } from "@/lib/types";
|
import type { Ticket, Queue, Transaction, PreviewResult, UpdateResult } from "@/lib/types";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import {
|
import {
|
||||||
@@ -16,6 +16,14 @@ import {
|
|||||||
DialogDescription,
|
DialogDescription,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
} from "@/components/ui/dialog";
|
} 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 { Textarea } from "@/components/ui/textarea";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
@@ -35,6 +43,8 @@ const STATUS_LABELS: Record<string, string> = {
|
|||||||
closed: "Closed",
|
closed: "Closed",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ALL_STATUSES = ["new", "open", "in_progress", "resolved", "closed"];
|
||||||
|
|
||||||
const FILTERS = [
|
const FILTERS = [
|
||||||
{ key: null, label: "All" },
|
{ key: null, label: "All" },
|
||||||
{ key: "open", label: "Open" },
|
{ key: "open", label: "Open" },
|
||||||
@@ -128,32 +138,98 @@ function TicketDetailPanel({
|
|||||||
}) {
|
}) {
|
||||||
const [ticket, setTicket] = useState<Ticket | null>(null);
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||||
|
const [queue, setQueue] = useState<Queue | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [replyText, setReplyText] = useState("");
|
const [replyText, setReplyText] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
// Status change
|
||||||
|
const [pendingStatus, setPendingStatus] = useState<string | null>(null);
|
||||||
|
const [preview, setPreview] = useState<PreviewResult | null>(null);
|
||||||
|
const [previewLoading, setPreviewLoading] = useState(false);
|
||||||
|
const [previewError, setPreviewError] = useState<string | null>(null);
|
||||||
|
const [applyLoading, setApplyLoading] = useState(false);
|
||||||
|
const [scripResults, setScripResults] = useState<UpdateResult["scrip_results"] | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
setTicket(null);
|
setTicket(null);
|
||||||
setTransactions([]);
|
setTransactions([]);
|
||||||
setReplyText("");
|
setReplyText("");
|
||||||
Promise.all([
|
|
||||||
|
const [ticketRes, txRes, queuesRes] = await Promise.all([
|
||||||
getTicket(ticketId),
|
getTicket(ticketId),
|
||||||
getTicketTransactions(ticketId),
|
getTicketTransactions(ticketId),
|
||||||
]).then(([ticketRes, txRes]) => {
|
getQueues(),
|
||||||
if (ticketRes.error) {
|
]);
|
||||||
setError(ticketRes.error);
|
|
||||||
} else {
|
if (ticketRes.error) {
|
||||||
setTicket(ticketRes.data);
|
setError(ticketRes.error);
|
||||||
}
|
} else {
|
||||||
if (txRes.data) {
|
setTicket(ticketRes.data);
|
||||||
setTransactions(txRes.data);
|
}
|
||||||
}
|
if (txRes.data) {
|
||||||
setLoading(false);
|
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]);
|
}, [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 (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -168,16 +244,23 @@ function TicketDetailPanel({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{loading && (
|
{loading && (
|
||||||
<div className="flex-1 p-4 space-y-4 overflow-y-auto">
|
<div className="flex h-full">
|
||||||
{Array.from({ length: 6 }).map((_, i) => (
|
<div className="flex-1 p-4 space-y-4 overflow-y-auto">
|
||||||
<div key={i} className="flex gap-3">
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
<div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
|
<div key={i} className="flex gap-3">
|
||||||
<div className="flex-1 space-y-2">
|
<div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
|
||||||
<div className="h-3 bg-muted rounded animate-pulse w-3/4" />
|
<div className="flex-1 space-y-2">
|
||||||
<div className="h-3 bg-muted rounded animate-pulse w-1/2" />
|
<div className="h-3 bg-muted rounded animate-pulse w-3/4" />
|
||||||
|
<div className="h-3 bg-muted rounded animate-pulse w-1/2" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
|
<div className="w-72 flex-shrink-0 border-l bg-muted/30 p-4 space-y-4">
|
||||||
|
{Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<div key={i} className="h-6 bg-muted rounded animate-pulse" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -188,169 +271,427 @@ function TicketDetailPanel({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{!loading && !error && ticket && (
|
{!loading && !error && ticket && (
|
||||||
<>
|
<div className="flex flex-1 min-h-0">
|
||||||
{/* Title */}
|
{/* Left: conversation */}
|
||||||
<div className="px-4 py-3 border-b border-border shrink-0">
|
<div className="flex-1 flex flex-col min-w-0">
|
||||||
<h2 className="text-sm font-semibold truncate">
|
{/* Title */}
|
||||||
{ticket.subject}
|
<div className="px-4 py-3 border-b border-border shrink-0">
|
||||||
</h2>
|
<h2 className="text-sm font-semibold truncate">
|
||||||
<p className="text-xs text-muted-foreground mt-0.5">
|
{ticket.subject}
|
||||||
<span className="font-mono">{ticket.id.slice(0, 8)}</span>
|
</h2>
|
||||||
</p>
|
<p className="text-xs text-muted-foreground mt-0.5">
|
||||||
</div>
|
<span className="font-mono">{ticket.id.slice(0, 8)}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Conversation */}
|
{/* Conversation */}
|
||||||
<div className="flex-1 overflow-y-auto">
|
<div className="flex-1 overflow-y-auto">
|
||||||
{transactions.length === 0 && (
|
{transactions.length === 0 && (
|
||||||
<div className="flex flex-col items-center justify-center py-20">
|
<div className="flex flex-col items-center justify-center py-20">
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
No activity yet
|
No activity yet
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{transactions.map((tx) => {
|
{transactions.map((tx) => {
|
||||||
const isSystem =
|
const isSystem =
|
||||||
tx.transaction_type === "StatusChange" ||
|
tx.transaction_type === "StatusChange" ||
|
||||||
tx.transaction_type === "SetOwner" ||
|
tx.transaction_type === "SetOwner" ||
|
||||||
tx.transaction_type === "Create";
|
tx.transaction_type === "Create";
|
||||||
const isAgent =
|
const isAgent =
|
||||||
tx.transaction_type === "Correspond" ||
|
tx.transaction_type === "Correspond" ||
|
||||||
tx.transaction_type === "Comment";
|
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 (
|
||||||
|
<div
|
||||||
|
key={tx.id}
|
||||||
|
className="flex justify-center py-2"
|
||||||
|
>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{message} · {txTimeAgo}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const isInternal =
|
||||||
|
tx.transaction_type === "Comment";
|
||||||
const txTimeAgo = formatDistanceToNow(
|
const txTimeAgo = formatDistanceToNow(
|
||||||
new Date(tx.created_at),
|
new Date(tx.created_at),
|
||||||
{ addSuffix: true }
|
{ 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 (
|
return (
|
||||||
<div
|
<div
|
||||||
key={tx.id}
|
key={tx.id}
|
||||||
className="flex justify-center py-2"
|
className={cn(
|
||||||
|
"flex gap-3 py-3 px-4",
|
||||||
|
isAgent ? "flex-row-reverse" : ""
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<span className="text-xs text-muted-foreground">
|
<div
|
||||||
{message} · {txTimeAgo}
|
className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const isInternal =
|
|
||||||
tx.transaction_type === "Comment";
|
|
||||||
const txTimeAgo = formatDistanceToNow(
|
|
||||||
new Date(tx.created_at),
|
|
||||||
{ addSuffix: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={tx.id}
|
|
||||||
className={cn(
|
|
||||||
"flex gap-3 py-3 px-4",
|
|
||||||
isAgent ? "flex-row-reverse" : ""
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
style={{
|
|
||||||
backgroundColor: isAgent
|
|
||||||
? getInitialColor(tx.creator_id)
|
|
||||||
: "var(--muted)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="text-[11px] font-semibold"
|
|
||||||
style={{
|
style={{
|
||||||
color: isAgent
|
backgroundColor: isAgent
|
||||||
? "#f7f8f8"
|
? getInitialColor(tx.creator_id)
|
||||||
: "var(--muted-foreground)",
|
: "var(--muted)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{getInitial(tx.creator_id)}
|
<span
|
||||||
</span>
|
className="text-[11px] font-semibold"
|
||||||
|
style={{
|
||||||
|
color: isAgent
|
||||||
|
? "#f7f8f8"
|
||||||
|
: "var(--muted-foreground)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getInitial(tx.creator_id)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"max-w-[75%] rounded-lg px-3 py-2",
|
||||||
|
isAgent
|
||||||
|
? "bg-primary/15 text-foreground"
|
||||||
|
: isInternal
|
||||||
|
? "bg-muted border border-border text-foreground"
|
||||||
|
: "bg-muted text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isInternal && (
|
||||||
|
<div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
|
||||||
|
Internal note
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="text-sm whitespace-pre-wrap">
|
||||||
|
{typeof tx.data === "object" &&
|
||||||
|
tx.data !== null &&
|
||||||
|
"body" in (tx.data as Record<string, unknown>)
|
||||||
|
? String(
|
||||||
|
(tx.data as Record<string, unknown>).body
|
||||||
|
)
|
||||||
|
: tx.transaction_type}
|
||||||
|
</p>
|
||||||
|
<p className="text-[10px] text-muted-foreground mt-1">
|
||||||
|
{txTimeAgo}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reply box */}
|
||||||
|
<div className="border-t border-border bg-sidebar p-3 shrink-0">
|
||||||
|
<div className="flex items-end gap-2">
|
||||||
|
<textarea
|
||||||
|
value={replyText}
|
||||||
|
onChange={(e) => setReplyText(e.target.value)}
|
||||||
|
placeholder="Reply to this ticket..."
|
||||||
|
rows={2}
|
||||||
|
className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
|
||||||
|
title="Attach file (coming soon)"
|
||||||
|
>
|
||||||
|
<PaperclipIcon className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
disabled={!replyText.trim()}
|
||||||
className={cn(
|
className={cn(
|
||||||
"max-w-[75%] rounded-lg px-3 py-2",
|
"w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
|
||||||
isAgent
|
replyText.trim()
|
||||||
? "bg-primary/15 text-foreground"
|
? "bg-primary text-primary-foreground hover:bg-primary/80"
|
||||||
: isInternal
|
: "bg-muted text-muted-foreground cursor-not-allowed"
|
||||||
? "bg-muted border border-border text-foreground"
|
|
||||||
: "bg-muted text-foreground"
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{isInternal && (
|
<SendIcon className="w-4 h-4" />
|
||||||
<div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
|
</button>
|
||||||
Internal note
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<p className="text-sm whitespace-pre-wrap">
|
|
||||||
{typeof tx.data === "object" &&
|
|
||||||
tx.data !== null &&
|
|
||||||
"body" in (tx.data as Record<string, unknown>)
|
|
||||||
? String(
|
|
||||||
(tx.data as Record<string, unknown>).body
|
|
||||||
)
|
|
||||||
: tx.transaction_type}
|
|
||||||
</p>
|
|
||||||
<p className="text-[10px] text-muted-foreground mt-1">
|
|
||||||
{txTimeAgo}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Reply box */}
|
|
||||||
<div className="border-t border-border bg-sidebar p-3 shrink-0">
|
|
||||||
<div className="flex items-end gap-2">
|
|
||||||
<textarea
|
|
||||||
value={replyText}
|
|
||||||
onChange={(e) => setReplyText(e.target.value)}
|
|
||||||
placeholder="Reply to this ticket..."
|
|
||||||
rows={2}
|
|
||||||
className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
|
|
||||||
/>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
|
|
||||||
title="Attach file (coming soon)"
|
|
||||||
>
|
|
||||||
<PaperclipIcon className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
disabled={!replyText.trim()}
|
|
||||||
className={cn(
|
|
||||||
"w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
|
|
||||||
replyText.trim()
|
|
||||||
? "bg-primary text-primary-foreground hover:bg-primary/80"
|
|
||||||
: "bg-muted text-muted-foreground cursor-not-allowed"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<SendIcon className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
|
{/* Right: properties sidebar */}
|
||||||
|
<div className="w-72 flex-shrink-0 border-l bg-muted/30 overflow-y-auto">
|
||||||
|
<div className="p-4 space-y-5">
|
||||||
|
{/* Status */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
||||||
|
Status
|
||||||
|
</h3>
|
||||||
|
<Select
|
||||||
|
value={ticket.status}
|
||||||
|
onValueChange={handleStatusSelect}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
backgroundColor:
|
||||||
|
STATUS_COLORS[ticket.status] || STATUS_COLORS.new,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{STATUS_LABELS[ticket.status] || ticket.status}
|
||||||
|
</span>
|
||||||
|
</SelectValue>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{ALL_STATUSES.map((status) => {
|
||||||
|
const color = STATUS_COLORS[status];
|
||||||
|
const label = STATUS_LABELS[status];
|
||||||
|
return (
|
||||||
|
<SelectItem
|
||||||
|
key={status}
|
||||||
|
value={status}
|
||||||
|
disabled={status === ticket.status}
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
/>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
</SelectItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{/* Status preview */}
|
||||||
|
{previewLoading && (
|
||||||
|
<div className="mt-3 p-3 rounded-lg bg-background border border-border">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Loading preview...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{preview && (
|
||||||
|
<div className="mt-3 p-3 rounded-lg bg-background border border-border">
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">
|
||||||
|
Preview: changing to{" "}
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
{STATUS_LABELS[pendingStatus || ""]}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{preview.prepared_scrips.length > 0 ? (
|
||||||
|
<div className="space-y-1 mb-3">
|
||||||
|
{preview.prepared_scrips.map((scrip) => (
|
||||||
|
<div
|
||||||
|
key={scrip.scripId}
|
||||||
|
className="text-xs text-foreground flex items-center gap-1.5"
|
||||||
|
>
|
||||||
|
<span className="w-2 h-2 rounded-full bg-chart-3 flex-shrink-0" />
|
||||||
|
{scrip.scripName}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-muted-foreground mb-3">
|
||||||
|
No scrips will fire
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleApplyStatus}
|
||||||
|
disabled={applyLoading}
|
||||||
|
className="px-2.5 py-1 rounded-md text-xs font-medium bg-primary hover:bg-primary/80 text-primary-foreground disabled:opacity-50 transition-all duration-150"
|
||||||
|
>
|
||||||
|
{applyLoading
|
||||||
|
? "Applying..."
|
||||||
|
: `Apply`}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCancelStatus}
|
||||||
|
disabled={applyLoading}
|
||||||
|
className="px-2.5 py-1 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground transition-all duration-150"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{previewError && (
|
||||||
|
<div className="mt-3 p-2 rounded-lg bg-destructive/5 border border-destructive/10">
|
||||||
|
<p className="text-xs text-destructive">{previewError}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{scripResults && (
|
||||||
|
<div className="mt-3 p-3 rounded-lg bg-background border border-border">
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">
|
||||||
|
Scrip results:
|
||||||
|
</p>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{scripResults.map((result) => (
|
||||||
|
<div
|
||||||
|
key={result.scripId}
|
||||||
|
className={cn(
|
||||||
|
"text-xs flex items-center gap-1.5",
|
||||||
|
result.success
|
||||||
|
? "text-[#22c55e]"
|
||||||
|
: "text-destructive"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"w-2 h-2 rounded-full flex-shrink-0",
|
||||||
|
result.success
|
||||||
|
? "bg-[#22c55e]"
|
||||||
|
: "bg-destructive"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{result.message}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setScripResults(null)}
|
||||||
|
className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-all duration-150"
|
||||||
|
>
|
||||||
|
Dismiss
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Assignment */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
||||||
|
Assignment
|
||||||
|
</h3>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="block text-[11px] font-medium text-muted-foreground mb-1">
|
||||||
|
Assignee
|
||||||
|
</label>
|
||||||
|
{ticket.owner_id ? (
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background">
|
||||||
|
<div
|
||||||
|
className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
backgroundColor: getInitialColor(ticket.owner_id),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="text-[10px] font-semibold text-primary-foreground">
|
||||||
|
{getInitial(ticket.owner_id)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-foreground">
|
||||||
|
{ticket.owner_id}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="px-3 py-2 rounded-lg border border-border bg-background text-sm text-muted-foreground">
|
||||||
|
Unassigned
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
||||||
|
Details
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-1.5 text-xs">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">Queue</span>
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
{queue?.name || ticket.queue_id}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">Created</span>
|
||||||
|
<span className="text-foreground tabular-nums">
|
||||||
|
{formatDistanceToNow(new Date(ticket.created_at), {
|
||||||
|
addSuffix: true,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">Updated</span>
|
||||||
|
<span className="text-foreground tabular-nums">
|
||||||
|
{formatDistanceToNow(new Date(ticket.updated_at), {
|
||||||
|
addSuffix: true,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{ticket.resolved_at && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">Resolved</span>
|
||||||
|
<span className="text-foreground tabular-nums">
|
||||||
|
{formatDistanceToNow(new Date(ticket.resolved_at), {
|
||||||
|
addSuffix: true,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom fields */}
|
||||||
|
{ticket.custom_fields && ticket.custom_fields.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
||||||
|
Custom fields
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
{ticket.custom_fields.map((cf) => (
|
||||||
|
<div
|
||||||
|
key={cf.id}
|
||||||
|
className="flex justify-between items-center px-3 py-1.5 rounded-lg border border-border bg-background"
|
||||||
|
>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{cf.custom_field?.name || cf.custom_field_id}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-foreground font-medium">
|
||||||
|
{cf.value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user