Redesign: Linear-inspired dark mode frontend
Complete rewrite of all pages: - layout.tsx: App shell with 240px sidebar (saved views, queue list, admin link) - app-shell.tsx: Client sidebar component with route highlighting + counts - page.tsx: Sleek ticket list with filter chips (All/Open/In progress/Resolved), search bar, status dots, assignee avatars, skeleton loading - tickets/[id]/page.tsx: Two-panel conversation layout — message thread (left) + properties sidebar (right) with status change, scrip preview, reply box - admin/page.tsx: Suspense-wrapped admin with tabs in sheet panels - command-palette.tsx: Cmd+K search with keyboard navigation Design tokens from Linear: - bg-[#08090a] canvas, bg-[#0f1011] panels, bg-[#191a1b] cards - text-[#f7f8f8] primary, text-[#d0d6e0] secondary, text-[#8a8f98] tertiary - borders: rgba(255,255,255,0.08) standard, rgba(255,255,255,0.05) subtle - accent: #5e6ad2 primary, #7170ff interactive - status colors: new=gray, open=indigo, in_progress=amber, resolved=green - Inter font, weights 400/510/590, no pure white Fixed: Suspense boundaries for useSearchParams in layout and admin pages Build: passes with zero errors
This commit is contained in:
Gjermund Høsøien Wiggen
@@ -1,39 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState, useEffect, use } from "react";
|
||||
import { useRouter } 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 { ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
|
||||
import {
|
||||
getTicket,
|
||||
getTicketTransactions,
|
||||
@@ -41,335 +12,657 @@ import {
|
||||
previewTicket,
|
||||
updateTicket,
|
||||
} from "@/lib/api";
|
||||
import type { Ticket, Transaction, Queue, PreviewResult, UpdateResult } from "@/lib/types";
|
||||
import type {
|
||||
Ticket,
|
||||
Transaction,
|
||||
Queue,
|
||||
PreviewResult,
|
||||
UpdateResult,
|
||||
} from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
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",
|
||||
new: "#8a8f98",
|
||||
open: "#7170ff",
|
||||
in_progress: "#f59e0b",
|
||||
resolved: "#22c55e",
|
||||
closed: "#6b7280",
|
||||
};
|
||||
|
||||
const TX_ICONS: Record<string, React.ElementType> = {
|
||||
Create: Plus,
|
||||
StatusChange: ArrowRightLeft,
|
||||
Comment: MessageSquare,
|
||||
CustomField: Pencil,
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
new: "New",
|
||||
open: "Open",
|
||||
in_progress: "In progress",
|
||||
resolved: "Resolved",
|
||||
closed: "Closed",
|
||||
};
|
||||
|
||||
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",
|
||||
};
|
||||
const ALL_STATUSES = ["new", "open", "in_progress", "resolved", "closed"];
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
function getInitial(name: string): string {
|
||||
if (!name) return "?";
|
||||
return name.charAt(0).toUpperCase();
|
||||
}
|
||||
|
||||
export default function TicketDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
function getInitialColor(name: string): string {
|
||||
const colors = ["#5e6ad2", "#7170ff", "#828fff", "#f59e0b", "#22c55e"];
|
||||
let hash = 0;
|
||||
for (let i = 0; i < name.length; i++) {
|
||||
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
return colors[Math.abs(hash) % colors.length];
|
||||
}
|
||||
|
||||
function TransactionBubble({
|
||||
tx,
|
||||
}: {
|
||||
tx: Transaction;
|
||||
}) {
|
||||
const isSystem =
|
||||
tx.transaction_type === "status_change" ||
|
||||
tx.transaction_type === "assignment" ||
|
||||
tx.transaction_type === "create";
|
||||
const isAgent = tx.transaction_type === "agent_reply" || tx.transaction_type === "internal_note";
|
||||
|
||||
if (isSystem) {
|
||||
const timeAgo = formatDistanceToNow(new Date(tx.created_at), {
|
||||
addSuffix: true,
|
||||
});
|
||||
let message = "";
|
||||
if (tx.transaction_type === "create") {
|
||||
message = `Ticket created`;
|
||||
} else if (tx.transaction_type === "status_change") {
|
||||
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 === "assignment") {
|
||||
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 className="flex justify-center py-2">
|
||||
<span className="text-xs text-[#8a8f98]">
|
||||
{message} · {timeAgo}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isInternal = tx.transaction_type === "internal_note";
|
||||
const timeAgo = formatDistanceToNow(new Date(tx.created_at), {
|
||||
addSuffix: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
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)
|
||||
: "#191a1b",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-[11px] font-semibold"
|
||||
style={{ color: isAgent ? "#f7f8f8" : "#8a8f98" }}
|
||||
>
|
||||
{getInitial(tx.creator_id)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"max-w-[75%] rounded-lg px-3 py-2",
|
||||
isAgent
|
||||
? "bg-[#5e6ad2]/15 text-[#f7f8f8]"
|
||||
: isInternal
|
||||
? "bg-[#191a1b] border border-[rgba(255,255,255,0.05)] text-[#f7f8f8]"
|
||||
: "bg-[#191a1b] text-[#f7f8f8]"
|
||||
)}
|
||||
>
|
||||
{isInternal && (
|
||||
<div className="text-[10px] font-semibold text-[#f59e0b] 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-[#8a8f98] mt-1">{timeAgo}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TicketDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const router = useRouter();
|
||||
|
||||
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [queues, setQueues] = useState<Queue[]>([]);
|
||||
const [queue, setQueue] = useState<Queue | null>(null);
|
||||
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 () => {
|
||||
// Reply
|
||||
const [replyText, setReplyText] = useState("");
|
||||
const [replyMode, setReplyMode] = useState<"public" | "internal">("public");
|
||||
|
||||
// Status change
|
||||
const [statusSelectOpen, setStatusSelectOpen] = useState(false);
|
||||
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 = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const [tRes, txRes, qRes] = await Promise.all([
|
||||
|
||||
const [ticketRes, txRes, queuesRes] = await Promise.all([
|
||||
getTicket(id),
|
||||
getTicketTransactions(id),
|
||||
getQueues(),
|
||||
]);
|
||||
if (tRes.error) setError(tRes.error);
|
||||
else {
|
||||
setTicket(tRes.data);
|
||||
setSelectedStatus(tRes.data?.status ?? "");
|
||||
|
||||
if (ticketRes.error) {
|
||||
setError(ticketRes.error);
|
||||
} else {
|
||||
setTicket(ticketRes.data);
|
||||
}
|
||||
if (txRes.error) setError(txRes.error);
|
||||
else setTransactions(txRes.data ?? []);
|
||||
if (qRes.error && !error) setError(qRes.error);
|
||||
else setQueues(qRes.data ?? []);
|
||||
|
||||
if (txRes.error) {
|
||||
setError((prev) => prev || txRes.error);
|
||||
} else {
|
||||
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);
|
||||
}, [id]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
}, [id]);
|
||||
|
||||
const handlePreview = async () => {
|
||||
if (!selectedStatus) return;
|
||||
setPreviewing(true);
|
||||
const handleStatusSelect = async (newStatus: string) => {
|
||||
setPendingStatus(newStatus);
|
||||
setStatusSelectOpen(false);
|
||||
setPreview(null);
|
||||
setPreviewError(null);
|
||||
const { data, error } = await previewTicket(id, { status: selectedStatus });
|
||||
setPreviewing(false);
|
||||
setScripResults(null);
|
||||
|
||||
if (newStatus === ticket?.status) return;
|
||||
|
||||
setPreviewLoading(true);
|
||||
const { data, error } = await previewTicket(id, { status: newStatus });
|
||||
setPreviewLoading(false);
|
||||
|
||||
if (error) {
|
||||
setPreviewError(error);
|
||||
setPendingStatus(null);
|
||||
} else {
|
||||
setPreviewResult(data);
|
||||
setPreview(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);
|
||||
const handleApplyStatus = async () => {
|
||||
if (!pendingStatus) return;
|
||||
setApplyLoading(true);
|
||||
setPreviewError(null);
|
||||
|
||||
const { data, error } = await updateTicket(id, { status: pendingStatus });
|
||||
|
||||
setApplyLoading(false);
|
||||
|
||||
if (error) {
|
||||
setApplyError(error);
|
||||
} else {
|
||||
setApplyResult(data);
|
||||
await fetchData();
|
||||
setPreviewError(error);
|
||||
} else if (data) {
|
||||
setTicket(data.ticket);
|
||||
setScripResults(data.scrip_results);
|
||||
setPreview(null);
|
||||
setPendingStatus(null);
|
||||
// Refresh transactions
|
||||
const txRes = await getTicketTransactions(id);
|
||||
if (txRes.data) setTransactions(txRes.data);
|
||||
}
|
||||
};
|
||||
|
||||
const queueName = queues.find((q) => q.id === ticket?.queue_id)?.name ?? ticket?.queue_id ?? "Unknown";
|
||||
const handleCancelStatus = () => {
|
||||
setPendingStatus(null);
|
||||
setPreview(null);
|
||||
setPreviewError(null);
|
||||
setScripResults(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-sm text-neutral-400 py-12 text-center">Loading ticket...</div>;
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div className="flex-1 p-4 space-y-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-[#191a1b] animate-pulse" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-3 bg-[#191a1b] rounded animate-pulse w-3/4" />
|
||||
<div className="h-3 bg-[#191a1b] rounded animate-pulse w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-80 bg-[#0f1011] border-l border-[rgba(255,255,255,0.05)] p-4 space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-6 bg-[#191a1b] rounded animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</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 className="flex flex-col items-center justify-center h-full">
|
||||
<p className="text-red-400 text-sm">{error}</p>
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="mt-2 text-sm text-[#7170ff] hover:text-[#828fff]"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</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 className="flex flex-col items-center justify-center h-full">
|
||||
<p className="text-[#8a8f98] text-sm">Ticket not found</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const currentStatusColor =
|
||||
STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
|
||||
const currentStatusLabel =
|
||||
STATUS_LABELS[ticket.status] || ticket.status;
|
||||
|
||||
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 className="flex h-full">
|
||||
{/* Left panel — conversation */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-4 py-2.5 border-b border-[rgba(255,255,255,0.05)]">
|
||||
<Link
|
||||
href="/"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-md hover:bg-[rgba(255,255,255,0.05)] text-[#8a8f98] hover:text-[#d0d6e0] transition-colors flex-shrink-0"
|
||||
>
|
||||
<ArrowLeftIcon className="w-4 h-4" />
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-sm font-semibold text-[#f7f8f8] truncate">
|
||||
{ticket.subject}
|
||||
</h1>
|
||||
<p className="text-xs text-[#8a8f98]">
|
||||
{ticket.id.slice(0, 8)} · {queue?.name || ticket.queue_id}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-sm text-neutral-400 mt-1">
|
||||
Owner: {ticket.owner_id ?? "Unassigned"}
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
))}
|
||||
{/* Conversation */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{transactions.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-sm text-[#8a8f98]">
|
||||
No activity yet
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{transactions.map((tx) => (
|
||||
<TransactionBubble key={tx.id} tx={tx} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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}
|
||||
{/* Reply box */}
|
||||
<div className="border-t border-[rgba(255,255,255,0.05)] bg-[#0f1011] p-3">
|
||||
{/* Toggle tabs */}
|
||||
<div className="flex gap-0.5 mb-2 p-0.5 rounded-lg bg-[#08090a] w-fit">
|
||||
<button
|
||||
onClick={() => setReplyMode("public")}
|
||||
className={cn(
|
||||
"px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
|
||||
replyMode === "public"
|
||||
? "bg-[#5e6ad2] text-[#f7f8f8]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
)}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setReplyMode("internal")}
|
||||
className={cn(
|
||||
"px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
|
||||
replyMode === "internal"
|
||||
? "bg-[#5e6ad2] text-[#f7f8f8]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
)}
|
||||
>
|
||||
Internal note
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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-[#08090a] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] resize-none"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
<button className="w-8 h-8 flex items-center justify-center rounded-lg text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.05)] transition-colors" 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-colors",
|
||||
replyText.trim()
|
||||
? "bg-[#5e6ad2] text-[#f7f8f8] hover:bg-[#7170ff]"
|
||||
: "bg-[#191a1b] text-[#8a8f98] cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<SendIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel — properties */}
|
||||
<div className="w-80 flex-shrink-0 bg-[#0f1011] border-l border-[rgba(255,255,255,0.05)] flex flex-col overflow-y-auto">
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Status */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
|
||||
Status
|
||||
</label>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setStatusSelectOpen(!statusSelectOpen)}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#08090a] text-sm hover:border-[rgba(255,255,255,0.15)] transition-colors"
|
||||
>
|
||||
<span
|
||||
className="w-2.5 h-2.5 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: currentStatusColor }}
|
||||
/>
|
||||
<span className="text-[#f7f8f8] font-medium flex-1 text-left">
|
||||
{currentStatusLabel}
|
||||
</span>
|
||||
<svg
|
||||
className="w-4 h-4 text-[#8a8f98]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{statusSelectOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 z-10 bg-[#191a1b] border border-[rgba(255,255,255,0.08)] rounded-lg shadow-xl overflow-hidden">
|
||||
{ALL_STATUSES.map((status) => {
|
||||
const color = STATUS_COLORS[status];
|
||||
const label = STATUS_LABELS[status];
|
||||
const isCurrent = status === ticket.status;
|
||||
return (
|
||||
<button
|
||||
key={status}
|
||||
onClick={() => handleStatusSelect(status)}
|
||||
disabled={isCurrent}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors",
|
||||
isCurrent
|
||||
? "bg-[rgba(255,255,255,0.03)] text-[#8a8f98] cursor-default"
|
||||
: "text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.05)]"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="w-2.5 h-2.5 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
{label}
|
||||
{isCurrent && (
|
||||
<span className="text-xs text-[#8a8f98] ml-auto">
|
||||
current
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{formatDistanceToNow(new Date(tx.created_at), { addSuffix: true })}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status change preview */}
|
||||
{preview && (
|
||||
<div className="p-3 rounded-lg bg-[#08090a] border border-[rgba(255,255,255,0.08)]">
|
||||
<p className="text-xs text-[#8a8f98] mb-2">
|
||||
Preview: changing to{" "}
|
||||
<span className="text-[#f7f8f8] 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-[#d0d6e0] flex items-center gap-1.5"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-[#f59e0b] flex-shrink-0" />
|
||||
{scrip.scripName}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-[#8a8f98] 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-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8] disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{applyLoading
|
||||
? "Applying..."
|
||||
: `Apply — ${preview.prepared_scrips.length} scrip${preview.prepared_scrips.length !== 1 ? "s" : ""} will fire`}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelStatus}
|
||||
disabled={applyLoading}
|
||||
className="px-2.5 py-1 rounded-md text-xs font-medium text-[#8a8f98] hover:text-[#d0d6e0] transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</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>
|
||||
))}
|
||||
{previewError && (
|
||||
<div className="p-2 rounded-lg bg-red-400/5 border border-red-400/10">
|
||||
<p className="text-xs text-red-400">{previewError}</p>
|
||||
</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>
|
||||
{scripResults && (
|
||||
<div className="p-3 rounded-lg bg-[#08090a] border border-[rgba(255,255,255,0.08)]">
|
||||
<p className="text-xs text-[#8a8f98] 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-red-400"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"w-2 h-2 rounded-full flex-shrink-0",
|
||||
result.success ? "bg-[#22c55e]" : "bg-red-400"
|
||||
)}
|
||||
/>
|
||||
{result.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setScripResults(null)}
|
||||
className="mt-2 text-xs text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Priority (placeholder) */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
|
||||
Priority
|
||||
</label>
|
||||
<div className="px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.05)] bg-[#08090a] text-sm text-[#8a8f98]">
|
||||
Not set
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Assignee */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
|
||||
Assignee
|
||||
</label>
|
||||
{ticket.owner_id ? (
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#08090a]">
|
||||
<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-[#f7f8f8]">
|
||||
{getInitial(ticket.owner_id)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm text-[#f7f8f8]">
|
||||
{ticket.owner_id}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.05)] bg-[#08090a] text-sm text-[#8a8f98]">
|
||||
Unassigned
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Queue */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
|
||||
Queue
|
||||
</label>
|
||||
<div className="px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#08090a]">
|
||||
<span className="text-sm text-[#f7f8f8]">
|
||||
{queue?.name || ticket.queue_id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom fields */}
|
||||
{ticket.custom_fields && ticket.custom_fields.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
|
||||
Custom fields
|
||||
</label>
|
||||
<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-[rgba(255,255,255,0.05)] bg-[#08090a]"
|
||||
>
|
||||
<span className="text-xs text-[#8a8f98]">
|
||||
{cf.custom_field?.name || cf.custom_field_id}
|
||||
</span>
|
||||
<span className="text-xs text-[#f7f8f8] font-medium">
|
||||
{cf.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dates */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
|
||||
Dates
|
||||
</label>
|
||||
<div className="space-y-1 text-xs">
|
||||
<div className="flex justify-between px-1">
|
||||
<span className="text-[#8a8f98]">Created</span>
|
||||
<span className="text-[#d0d6e0] tabular-nums">
|
||||
{formatDistanceToNow(new Date(ticket.created_at), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between px-1">
|
||||
<span className="text-[#8a8f98]">Updated</span>
|
||||
<span className="text-[#d0d6e0] tabular-nums">
|
||||
{formatDistanceToNow(new Date(ticket.updated_at), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{ticket.resolved_at && (
|
||||
<div className="flex justify-between px-1">
|
||||
<span className="text-[#8a8f98]">Resolved</span>
|
||||
<span className="text-[#d0d6e0] tabular-nums">
|
||||
{formatDistanceToNow(new Date(ticket.resolved_at), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user