Full-page ticket layout: two-column with sticky sidebar
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,6 +6,7 @@ import remarkGfm from 'remark-gfm'
|
|||||||
import {
|
import {
|
||||||
Pencil, Trash2, Send, X, Check,
|
Pencil, Trash2, Send, X, Check,
|
||||||
MessageSquare, ClipboardList, FileText,
|
MessageSquare, ClipboardList, FileText,
|
||||||
|
ArrowLeft,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import api from '../api/client'
|
import api from '../api/client'
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout'
|
||||||
@@ -25,16 +26,24 @@ const STATUS_OPTIONS: { value: TicketStatus; label: string }[] = [
|
|||||||
{ value: 'CLOSED', label: 'Closed' },
|
{ value: 'CLOSED', label: 'Closed' },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const SEVERITY_OPTIONS = [
|
||||||
|
{ value: 1, label: 'SEV 1 — Critical' },
|
||||||
|
{ value: 2, label: 'SEV 2 — High' },
|
||||||
|
{ value: 3, label: 'SEV 3 — Medium' },
|
||||||
|
{ value: 4, label: 'SEV 4 — Low' },
|
||||||
|
{ value: 5, label: 'SEV 5 — Minimal' },
|
||||||
|
]
|
||||||
|
|
||||||
const AUDIT_LABELS: Record<string, string> = {
|
const AUDIT_LABELS: Record<string, string> = {
|
||||||
CREATED: 'Ticket created',
|
CREATED: 'created this ticket',
|
||||||
STATUS_CHANGED: 'Status changed',
|
STATUS_CHANGED: 'changed status',
|
||||||
ASSIGNEE_CHANGED: 'Assignee changed',
|
ASSIGNEE_CHANGED: 'changed assignee',
|
||||||
SEVERITY_CHANGED: 'Severity changed',
|
SEVERITY_CHANGED: 'changed severity',
|
||||||
REROUTED: 'Rerouted',
|
REROUTED: 'rerouted ticket',
|
||||||
TITLE_CHANGED: 'Title updated',
|
TITLE_CHANGED: 'updated title',
|
||||||
OVERVIEW_CHANGED: 'Overview updated',
|
OVERVIEW_CHANGED: 'updated overview',
|
||||||
COMMENT_ADDED: 'Comment added',
|
COMMENT_ADDED: 'added a comment',
|
||||||
COMMENT_DELETED: 'Comment deleted',
|
COMMENT_DELETED: 'deleted a comment',
|
||||||
}
|
}
|
||||||
|
|
||||||
const AUDIT_COLORS: Record<string, string> = {
|
const AUDIT_COLORS: Record<string, string> = {
|
||||||
@@ -49,6 +58,18 @@ const AUDIT_COLORS: Record<string, string> = {
|
|||||||
COMMENT_DELETED: 'bg-red-400',
|
COMMENT_DELETED: 'bg-red-400',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const selectClass =
|
||||||
|
'w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white'
|
||||||
|
|
||||||
|
function SidebarField({ label, children }: { label: string; children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-gray-400 mb-1.5">{label}</p>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default function TicketDetail() {
|
export default function TicketDetail() {
|
||||||
const { id } = useParams<{ id: string }>()
|
const { id } = useParams<{ id: string }>()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
@@ -60,19 +81,13 @@ export default function TicketDetail() {
|
|||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [tab, setTab] = useState<Tab>('overview')
|
const [tab, setTab] = useState<Tab>('overview')
|
||||||
const [editing, setEditing] = useState(false)
|
const [editing, setEditing] = useState(false)
|
||||||
|
const [reroutingCTI, setReroutingCTI] = useState(false)
|
||||||
const [commentBody, setCommentBody] = useState('')
|
const [commentBody, setCommentBody] = useState('')
|
||||||
const [submittingComment, setSubmittingComment] = useState(false)
|
const [submittingComment, setSubmittingComment] = useState(false)
|
||||||
const [preview, setPreview] = useState(false)
|
const [preview, setPreview] = useState(false)
|
||||||
|
|
||||||
const [editForm, setEditForm] = useState({
|
const [editForm, setEditForm] = useState({ title: '', overview: '' })
|
||||||
title: '',
|
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })
|
||||||
overview: '',
|
|
||||||
severity: 3,
|
|
||||||
assigneeId: '',
|
|
||||||
categoryId: '',
|
|
||||||
typeId: '',
|
|
||||||
itemId: '',
|
|
||||||
})
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
@@ -84,60 +99,44 @@ export default function TicketDetail() {
|
|||||||
}).finally(() => setLoading(false))
|
}).finally(() => setLoading(false))
|
||||||
}, [id])
|
}, [id])
|
||||||
|
|
||||||
const fetchAudit = () => {
|
|
||||||
if (!ticket) return
|
|
||||||
api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (tab === 'audit') fetchAudit()
|
if (tab === 'audit' && ticket) {
|
||||||
}, [tab, ticket])
|
api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
|
||||||
|
}
|
||||||
|
}, [tab, ticket, id])
|
||||||
|
|
||||||
|
const patch = async (payload: Record<string, unknown>) => {
|
||||||
|
if (!ticket) return
|
||||||
|
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
|
||||||
|
setTicket(res.data)
|
||||||
|
return res.data
|
||||||
|
}
|
||||||
|
|
||||||
const startEdit = () => {
|
const startEdit = () => {
|
||||||
if (!ticket) return
|
if (!ticket) return
|
||||||
setEditForm({
|
setEditForm({ title: ticket.title, overview: ticket.overview })
|
||||||
title: ticket.title,
|
|
||||||
overview: ticket.overview,
|
|
||||||
severity: ticket.severity,
|
|
||||||
assigneeId: ticket.assigneeId ?? '',
|
|
||||||
categoryId: ticket.categoryId,
|
|
||||||
typeId: ticket.typeId,
|
|
||||||
itemId: ticket.itemId,
|
|
||||||
})
|
|
||||||
setEditing(true)
|
setEditing(true)
|
||||||
|
setTab('overview')
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveEdit = async () => {
|
const saveEdit = async () => {
|
||||||
if (!ticket) return
|
await patch({ title: editForm.title, overview: editForm.overview })
|
||||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
|
|
||||||
title: editForm.title,
|
|
||||||
overview: editForm.overview,
|
|
||||||
severity: editForm.severity,
|
|
||||||
categoryId: editForm.categoryId,
|
|
||||||
typeId: editForm.typeId,
|
|
||||||
itemId: editForm.itemId,
|
|
||||||
assigneeId: editForm.assigneeId || null,
|
|
||||||
})
|
|
||||||
setTicket(res.data)
|
|
||||||
setEditing(false)
|
setEditing(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateStatus = async (status: TicketStatus) => {
|
const startReroute = () => {
|
||||||
if (!ticket) return
|
if (!ticket) return
|
||||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, { status })
|
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId })
|
||||||
setTicket(res.data)
|
setReroutingCTI(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateAssignee = async (assigneeId: string) => {
|
const saveReroute = async () => {
|
||||||
if (!ticket) return
|
await patch(pendingCTI)
|
||||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
|
setReroutingCTI(false)
|
||||||
assigneeId: assigneeId || null,
|
|
||||||
})
|
|
||||||
setTicket(res.data)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteTicket = async () => {
|
const deleteTicket = async () => {
|
||||||
if (!ticket || !confirm('Delete this ticket?')) return
|
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
|
||||||
await api.delete(`/tickets/${ticket.displayId}`)
|
await api.delete(`/tickets/${ticket.displayId}`)
|
||||||
navigate('/')
|
navigate('/')
|
||||||
}
|
}
|
||||||
@@ -164,374 +163,423 @@ export default function TicketDetail() {
|
|||||||
setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
|
setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
|
||||||
}
|
}
|
||||||
|
|
||||||
const inputClass =
|
|
||||||
'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Layout><div className="text-center py-16 text-gray-400 text-sm">Loading...</div></Layout>
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!ticket) {
|
if (!ticket) {
|
||||||
return <Layout><div className="text-center py-16 text-gray-400 text-sm">Ticket not found</div></Layout>
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||||
|
Ticket not found
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const commentCount = ticket.comments?.length ?? 0
|
const commentCount = ticket.comments?.length ?? 0
|
||||||
|
const agentUsers = users.filter((u) => u.role !== 'SERVICE')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="max-w-3xl">
|
{/* Back link */}
|
||||||
{/* Ticket header */}
|
<button
|
||||||
<div className="bg-white border border-gray-200 rounded-xl mb-4">
|
onClick={() => navigate('/')}
|
||||||
<div className="px-5 pt-5 pb-4">
|
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-700 mb-4 transition-colors"
|
||||||
{/* ID + actions row */}
|
>
|
||||||
<div className="flex items-start justify-between gap-4 mb-3">
|
<ArrowLeft size={14} />
|
||||||
<div className="flex items-center gap-2">
|
All tickets
|
||||||
<span className="font-mono text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
</button>
|
||||||
{ticket.displayId}
|
|
||||||
</span>
|
<div className="flex gap-6 items-start">
|
||||||
<SeverityBadge severity={ticket.severity} />
|
{/* ── Main content ── */}
|
||||||
<StatusBadge status={ticket.status} />
|
<div className="flex-1 min-w-0">
|
||||||
</div>
|
{/* Title card */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="bg-white border border-gray-200 rounded-xl px-6 py-5 mb-4">
|
||||||
{!editing ? (
|
<div className="flex items-center gap-2 mb-3">
|
||||||
<button
|
<span className="font-mono text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
||||||
onClick={startEdit}
|
{ticket.displayId}
|
||||||
className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-800 border border-gray-200 hover:border-gray-400 px-2.5 py-1 rounded-lg transition-colors"
|
</span>
|
||||||
>
|
<SeverityBadge severity={ticket.severity} />
|
||||||
<Pencil size={12} />
|
<StatusBadge status={ticket.status} />
|
||||||
Edit
|
<span className="text-xs text-gray-400 ml-1">
|
||||||
</button>
|
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||||
) : (
|
</span>
|
||||||
<>
|
|
||||||
<button
|
|
||||||
onClick={() => setEditing(false)}
|
|
||||||
className="flex items-center gap-1.5 text-xs text-gray-500 border border-gray-200 px-2.5 py-1 rounded-lg hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
<X size={12} /> Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={saveEdit}
|
|
||||||
className="flex items-center gap-1.5 text-xs bg-blue-600 text-white px-2.5 py-1 rounded-lg hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
<Check size={12} /> Save
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{authUser?.role === 'ADMIN' && (
|
|
||||||
<button
|
|
||||||
onClick={deleteTicket}
|
|
||||||
className="flex items-center gap-1.5 text-xs text-red-500 hover:text-red-700 border border-red-200 hover:border-red-400 px-2.5 py-1 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<Trash2 size={12} />
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Title */}
|
|
||||||
{editing ? (
|
{editing ? (
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editForm.title}
|
value={editForm.title}
|
||||||
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
||||||
className={`${inputClass} text-lg font-semibold mb-3`}
|
className="w-full text-2xl font-bold text-gray-900 border-0 border-b-2 border-blue-500 focus:outline-none pb-1 bg-transparent"
|
||||||
|
autoFocus
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<h1 className="text-lg font-semibold text-gray-900 mb-3">{ticket.title}</h1>
|
<h1 className="text-2xl font-bold text-gray-900">{ticket.title}</h1>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* CTI breadcrumb / edit */}
|
|
||||||
{editing ? (
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="block text-xs font-medium text-gray-500 mb-1">Routing (CTI)</label>
|
|
||||||
<CTISelect
|
|
||||||
value={{ categoryId: editForm.categoryId, typeId: editForm.typeId, itemId: editForm.itemId }}
|
|
||||||
onChange={(cti) => setEditForm((f) => ({ ...f, ...cti }))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-xs text-gray-400 mb-3">
|
|
||||||
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Status + Assignee quick controls (when not editing) */}
|
|
||||||
{!editing && (
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-500 mb-1">Status</label>
|
|
||||||
<select
|
|
||||||
value={ticket.status}
|
|
||||||
onChange={(e) => updateStatus(e.target.value as TicketStatus)}
|
|
||||||
className={inputClass}
|
|
||||||
>
|
|
||||||
{STATUS_OPTIONS.map((s) => (
|
|
||||||
<option key={s.value} value={s.value}>{s.label}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
|
|
||||||
<select
|
|
||||||
value={ticket.assigneeId ?? ''}
|
|
||||||
onChange={(e) => updateAssignee(e.target.value)}
|
|
||||||
className={inputClass}
|
|
||||||
>
|
|
||||||
<option value="">Unassigned</option>
|
|
||||||
{users.filter((u) => u.role !== 'SERVICE').map((u) => (
|
|
||||||
<option key={u.id} value={u.id}>{u.displayName}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Severity + Assignee edit controls */}
|
|
||||||
{editing && (
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-500 mb-1">Severity</label>
|
|
||||||
<select
|
|
||||||
value={editForm.severity}
|
|
||||||
onChange={(e) => setEditForm((f) => ({ ...f, severity: Number(e.target.value) }))}
|
|
||||||
className={inputClass}
|
|
||||||
>
|
|
||||||
<option value={1}>SEV 1 — Critical</option>
|
|
||||||
<option value={2}>SEV 2 — High</option>
|
|
||||||
<option value={3}>SEV 3 — Medium</option>
|
|
||||||
<option value={4}>SEV 4 — Low</option>
|
|
||||||
<option value={5}>SEV 5 — Minimal</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
|
|
||||||
<select
|
|
||||||
value={editForm.assigneeId}
|
|
||||||
onChange={(e) => setEditForm((f) => ({ ...f, assigneeId: e.target.value }))}
|
|
||||||
className={inputClass}
|
|
||||||
>
|
|
||||||
<option value="">Unassigned</option>
|
|
||||||
{users.filter((u) => u.role !== 'SERVICE').map((u) => (
|
|
||||||
<option key={u.id} value={u.id}>{u.displayName}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Meta footer */}
|
{/* Tabs + content */}
|
||||||
<div className="px-5 py-2.5 bg-gray-50 rounded-b-xl border-t border-gray-100 flex items-center gap-5 text-xs text-gray-400">
|
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
|
||||||
<span>
|
{/* Tab bar */}
|
||||||
Opened by <strong className="text-gray-600">{ticket.createdBy.displayName}</strong>
|
<div className="flex border-b border-gray-200 px-2">
|
||||||
</span>
|
{(
|
||||||
<span>{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</span>
|
[
|
||||||
{ticket.resolvedAt && (
|
{ key: 'overview', icon: FileText, label: 'Overview' },
|
||||||
<span>Resolved {format(new Date(ticket.resolvedAt), 'MMM d, yyyy')}</span>
|
{ key: 'comments', icon: MessageSquare, label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}` },
|
||||||
)}
|
{ key: 'audit', icon: ClipboardList, label: 'Audit Log' },
|
||||||
<span className="ml-auto">
|
] as const
|
||||||
Updated {formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}
|
).map(({ key, icon: Icon, label }) => (
|
||||||
</span>
|
<button
|
||||||
</div>
|
key={key}
|
||||||
</div>
|
onClick={() => setTab(key)}
|
||||||
|
className={`flex items-center gap-2 px-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
|
||||||
{/* Tab bar */}
|
tab === key
|
||||||
<div className="flex border-b border-gray-200 mb-4 bg-white rounded-t-xl border border-gray-200 border-b-0">
|
? 'border-blue-600 text-blue-600'
|
||||||
{(
|
: 'border-transparent text-gray-500 hover:text-gray-800'
|
||||||
[
|
}`}
|
||||||
{ key: 'overview', icon: FileText, label: 'Overview' },
|
|
||||||
{ key: 'comments', icon: MessageSquare, label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}` },
|
|
||||||
{ key: 'audit', icon: ClipboardList, label: 'Audit Log' },
|
|
||||||
] as const
|
|
||||||
).map(({ key, icon: Icon, label }) => (
|
|
||||||
<button
|
|
||||||
key={key}
|
|
||||||
onClick={() => setTab(key)}
|
|
||||||
className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
||||||
tab === key
|
|
||||||
? 'border-blue-600 text-blue-600'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-800'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Icon size={14} />
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Overview tab ── */}
|
|
||||||
{tab === 'overview' && (
|
|
||||||
<div className="bg-white border border-gray-200 rounded-xl p-5">
|
|
||||||
{editing ? (
|
|
||||||
<textarea
|
|
||||||
value={editForm.overview}
|
|
||||||
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
|
|
||||||
rows={8}
|
|
||||||
className={inputClass}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="prose text-sm text-gray-700">
|
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
||||||
{ticket.overview}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ── Comments tab ── */}
|
|
||||||
{tab === 'comments' && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{ticket.comments && ticket.comments.length > 0 ? (
|
|
||||||
ticket.comments.map((comment) => (
|
|
||||||
<div
|
|
||||||
key={comment.id}
|
|
||||||
className="bg-white border border-gray-200 rounded-xl p-5 group"
|
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
<Icon size={14} />
|
||||||
<Avatar name={comment.author.displayName} size="md" />
|
{label}
|
||||||
<div className="flex-1 min-w-0">
|
</button>
|
||||||
<div className="flex items-center justify-between mb-2">
|
))}
|
||||||
<div className="flex items-center gap-2">
|
</div>
|
||||||
<span className="text-sm font-semibold text-gray-900">
|
|
||||||
{comment.author.displayName}
|
{/* ── Overview ── */}
|
||||||
</span>
|
{tab === 'overview' && (
|
||||||
<span className="text-xs text-gray-400">
|
<div className="p-6">
|
||||||
{formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
|
{editing ? (
|
||||||
</span>
|
<div className="space-y-3">
|
||||||
<span className="text-xs text-gray-300" title={format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')}>
|
<textarea
|
||||||
· {format(new Date(comment.createdAt), 'MMM d, yyyy')}
|
value={editForm.overview}
|
||||||
</span>
|
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
|
||||||
</div>
|
rows={12}
|
||||||
{(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
|
className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y font-mono"
|
||||||
<button
|
/>
|
||||||
onClick={() => deleteComment(comment.id)}
|
<div className="flex justify-end gap-2">
|
||||||
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all"
|
<button
|
||||||
>
|
onClick={() => setEditing(false)}
|
||||||
<Trash2 size={13} />
|
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
</button>
|
>
|
||||||
)}
|
<X size={13} /> Cancel
|
||||||
</div>
|
</button>
|
||||||
<div className="prose text-sm text-gray-700">
|
<button
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
onClick={saveEdit}
|
||||||
{comment.body}
|
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
</ReactMarkdown>
|
>
|
||||||
</div>
|
<Check size={13} /> Save changes
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="bg-white border border-gray-200 rounded-xl px-5 py-10 text-center text-sm text-gray-400">
|
|
||||||
No comments yet
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Comment composer */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-xl">
|
|
||||||
<div className="flex items-center gap-3 px-4 pt-4">
|
|
||||||
<Avatar name={authUser?.displayName ?? '?'} size="md" />
|
|
||||||
<div className="flex gap-3 border-b border-gray-100 pb-0 flex-1">
|
|
||||||
<button
|
|
||||||
onClick={() => setPreview(false)}
|
|
||||||
className={`text-xs pb-2 border-b-2 transition-colors ${
|
|
||||||
!preview ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-400 hover:text-gray-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Write
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setPreview(true)}
|
|
||||||
className={`text-xs pb-2 border-b-2 transition-colors ${
|
|
||||||
preview ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-400 hover:text-gray-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Preview
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={submitComment} className="p-4">
|
|
||||||
{preview ? (
|
|
||||||
<div className="prose text-sm text-gray-700 min-h-[80px] px-1">
|
|
||||||
{commentBody.trim() ? (
|
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
|
|
||||||
) : (
|
|
||||||
<span className="text-gray-400 italic">Nothing to preview</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<textarea
|
<div className="prose text-sm text-gray-700">
|
||||||
value={commentBody}
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
onChange={(e) => setCommentBody(e.target.value)}
|
{ticket.overview}
|
||||||
placeholder="Leave a comment… Markdown supported"
|
</ReactMarkdown>
|
||||||
rows={4}
|
|
||||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
|
||||||
e.preventDefault()
|
|
||||||
submitComment(e as unknown as React.FormEvent)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-between items-center mt-3">
|
|
||||||
<span className="text-xs text-gray-400">Markdown supported · Ctrl+Enter to submit</span>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={submittingComment || !commentBody.trim()}
|
|
||||||
className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
<Send size={12} />
|
|
||||||
Comment
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ── Audit Log tab ── */}
|
|
||||||
{tab === 'audit' && (
|
|
||||||
<div className="bg-white border border-gray-200 rounded-xl divide-y divide-gray-100">
|
|
||||||
{auditLogs.length === 0 ? (
|
|
||||||
<div className="px-5 py-10 text-center text-sm text-gray-400">No audit entries</div>
|
|
||||||
) : (
|
|
||||||
auditLogs.map((log, i) => (
|
|
||||||
<div key={log.id} className="flex items-start gap-4 px-5 py-4">
|
|
||||||
{/* Timeline dot */}
|
|
||||||
<div className="flex flex-col items-center flex-shrink-0 pt-0.5">
|
|
||||||
<div
|
|
||||||
className={`w-2.5 h-2.5 rounded-full ${AUDIT_COLORS[log.action] ?? 'bg-gray-400'}`}
|
|
||||||
/>
|
|
||||||
{i < auditLogs.length - 1 && (
|
|
||||||
<div className="w-px flex-1 bg-gray-100 mt-1" style={{ minHeight: '16px' }} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex-1 min-w-0 pb-1">
|
{/* ── Comments ── */}
|
||||||
<div className="flex items-baseline justify-between gap-3">
|
{tab === 'comments' && (
|
||||||
<span className="text-sm text-gray-800">
|
<div>
|
||||||
<strong className="font-medium">{log.user.displayName}</strong>
|
{ticket.comments && ticket.comments.length > 0 ? (
|
||||||
{' '}{AUDIT_LABELS[log.action]?.toLowerCase() ?? log.action.toLowerCase()}
|
<div className="divide-y divide-gray-100">
|
||||||
{log.detail && (
|
{ticket.comments.map((comment) => (
|
||||||
<span className="text-gray-500"> — {log.detail}</span>
|
<div key={comment.id} className="p-6 group">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Avatar name={comment.author.displayName} size="md" />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm font-semibold text-gray-900">
|
||||||
|
{comment.author.displayName}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400">
|
||||||
|
{format(new Date(comment.createdAt), 'MMM d, yyyy · HH:mm')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
|
||||||
|
<button
|
||||||
|
onClick={() => deleteComment(comment.id)}
|
||||||
|
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all"
|
||||||
|
>
|
||||||
|
<Trash2 size={13} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="prose text-sm text-gray-700">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
|
{comment.body}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="py-16 text-center text-sm text-gray-400">
|
||||||
|
No comments yet — be the first
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Comment composer */}
|
||||||
|
<div className="border-t border-gray-200 p-6">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Avatar name={authUser?.displayName ?? '?'} size="md" />
|
||||||
|
<div className="flex-1">
|
||||||
|
{/* Write / Preview toggle */}
|
||||||
|
<div className="flex gap-4 mb-2 border-b border-gray-100">
|
||||||
|
{(['Write', 'Preview'] as const).map((label) => (
|
||||||
|
<button
|
||||||
|
key={label}
|
||||||
|
onClick={() => setPreview(label === 'Preview')}
|
||||||
|
className={`text-xs pb-2 border-b-2 -mb-px transition-colors ${
|
||||||
|
(label === 'Preview') === preview
|
||||||
|
? 'border-blue-600 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-400 hover:text-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={submitComment}>
|
||||||
|
{preview ? (
|
||||||
|
<div className="prose text-sm text-gray-700 min-h-[80px] mb-3 px-1">
|
||||||
|
{commentBody.trim()
|
||||||
|
? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
|
||||||
|
: <span className="text-gray-400 italic">Nothing to preview</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<textarea
|
||||||
|
value={commentBody}
|
||||||
|
onChange={(e) => setCommentBody(e.target.value)}
|
||||||
|
placeholder="Leave a comment… Markdown supported"
|
||||||
|
rows={4}
|
||||||
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none mb-3"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||||
|
e.preventDefault()
|
||||||
|
submitComment(e as unknown as React.FormEvent)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</span>
|
<div className="flex justify-between items-center">
|
||||||
<span
|
<span className="text-xs text-gray-400">
|
||||||
className="text-xs text-gray-400 flex-shrink-0"
|
Markdown supported · Ctrl+Enter to submit
|
||||||
title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
|
</span>
|
||||||
>
|
<button
|
||||||
{formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
|
type="submit"
|
||||||
</span>
|
disabled={submittingComment || !commentBody.trim()}
|
||||||
|
className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||||
|
>
|
||||||
|
<Send size={13} />
|
||||||
|
Comment
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Audit Log ── */}
|
||||||
|
{tab === 'audit' && (
|
||||||
|
<div className="p-6">
|
||||||
|
{auditLogs.length === 0 ? (
|
||||||
|
<div className="py-10 text-center text-sm text-gray-400">No activity yet</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-0">
|
||||||
|
{auditLogs.map((log, i) => (
|
||||||
|
<div key={log.id} className="flex gap-4">
|
||||||
|
{/* Timeline */}
|
||||||
|
<div className="flex flex-col items-center w-5 flex-shrink-0">
|
||||||
|
<div className={`w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0 ${AUDIT_COLORS[log.action] ?? 'bg-gray-400'}`} />
|
||||||
|
{i < auditLogs.length - 1 && (
|
||||||
|
<div className="w-px flex-1 bg-gray-100 my-1" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* Entry */}
|
||||||
|
<div className="flex-1 pb-5">
|
||||||
|
<div className="flex items-baseline justify-between gap-4">
|
||||||
|
<p className="text-sm text-gray-700">
|
||||||
|
<span className="font-medium">{log.user.displayName}</span>
|
||||||
|
{' '}{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
|
||||||
|
{log.detail && (
|
||||||
|
<span className="text-gray-500"> — {log.detail}</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<span
|
||||||
|
className="text-xs text-gray-400 flex-shrink-0"
|
||||||
|
title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
|
||||||
|
>
|
||||||
|
{formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
|
{/* ── Sidebar ── */}
|
||||||
|
<div className="w-64 flex-shrink-0 sticky top-0 space-y-3">
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl divide-y divide-gray-100">
|
||||||
|
<div className="px-4 py-3">
|
||||||
|
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">Details</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-4 py-3 space-y-3">
|
||||||
|
<SidebarField label="Status">
|
||||||
|
<select
|
||||||
|
value={ticket.status}
|
||||||
|
onChange={(e) => patch({ status: e.target.value })}
|
||||||
|
className={selectClass}
|
||||||
|
>
|
||||||
|
{STATUS_OPTIONS.map((s) => (
|
||||||
|
<option key={s.value} value={s.value}>{s.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</SidebarField>
|
||||||
|
|
||||||
|
<SidebarField label="Severity">
|
||||||
|
<select
|
||||||
|
value={ticket.severity}
|
||||||
|
onChange={(e) => patch({ severity: Number(e.target.value) })}
|
||||||
|
className={selectClass}
|
||||||
|
>
|
||||||
|
{SEVERITY_OPTIONS.map((s) => (
|
||||||
|
<option key={s.value} value={s.value}>{s.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</SidebarField>
|
||||||
|
|
||||||
|
<SidebarField label="Assignee">
|
||||||
|
<select
|
||||||
|
value={ticket.assigneeId ?? ''}
|
||||||
|
onChange={(e) => patch({ assigneeId: e.target.value || null })}
|
||||||
|
className={selectClass}
|
||||||
|
>
|
||||||
|
<option value="">Unassigned</option>
|
||||||
|
{agentUsers.map((u) => (
|
||||||
|
<option key={u.id} value={u.id}>{u.displayName}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{ticket.assignee && (
|
||||||
|
<div className="flex items-center gap-1.5 mt-1.5">
|
||||||
|
<Avatar name={ticket.assignee.displayName} size="sm" />
|
||||||
|
<span className="text-xs text-gray-500">{ticket.assignee.displayName}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</SidebarField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Routing */}
|
||||||
|
<div className="px-4 py-3">
|
||||||
|
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Routing</p>
|
||||||
|
{reroutingCTI ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<CTISelect value={pendingCTI} onChange={setPendingCTI} />
|
||||||
|
<div className="flex gap-2 pt-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setReroutingCTI(false)}
|
||||||
|
className="flex-1 text-xs py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-600"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={saveReroute}
|
||||||
|
className="flex-1 text-xs py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-700 leading-relaxed">
|
||||||
|
{ticket.category.name}
|
||||||
|
<span className="text-gray-400"> › </span>
|
||||||
|
{ticket.type.name}
|
||||||
|
<span className="text-gray-400"> › </span>
|
||||||
|
{ticket.item.name}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={startReroute}
|
||||||
|
className="mt-1.5 text-xs text-blue-600 hover:text-blue-800 transition-colors"
|
||||||
|
>
|
||||||
|
Change routing
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dates */}
|
||||||
|
<div className="px-4 py-3 space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Avatar name={ticket.createdBy.displayName} size="sm" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-400">Opened by</p>
|
||||||
|
<p className="text-xs font-medium text-gray-700">{ticket.createdBy.displayName}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-400">Created</p>
|
||||||
|
<p className="text-xs text-gray-700">{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</p>
|
||||||
|
</div>
|
||||||
|
{ticket.resolvedAt && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-400">Resolved</p>
|
||||||
|
<p className="text-xs text-gray-700">{format(new Date(ticket.resolvedAt), 'MMM d, yyyy')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-400">Updated</p>
|
||||||
|
<p className="text-xs text-gray-700">{formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl px-4 py-3 space-y-2">
|
||||||
|
<button
|
||||||
|
onClick={startEdit}
|
||||||
|
className="w-full flex items-center justify-center gap-2 py-2 text-sm text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
<Pencil size={13} />
|
||||||
|
Edit title & overview
|
||||||
|
</button>
|
||||||
|
{authUser?.role === 'ADMIN' && (
|
||||||
|
<button
|
||||||
|
onClick={deleteTicket}
|
||||||
|
className="w-full flex items-center justify-center gap-2 py-2 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50 transition-colors"
|
||||||
|
>
|
||||||
|
<Trash2 size={13} />
|
||||||
|
Delete ticket
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user