Ticket IDs, audit log, markdown comments, tabbed detail page
- Tickets get a random display ID (V + 9 digits, e.g. V325813929) - Ticket detail page has Overview / Comments / Audit Log tabs - Audit log records every action (create, status, assignee, severity, reroute, title/overview edit, comment add/delete) with who and when - Comments redesigned: avatar (initials + color), markdown rendering via react-markdown + remark-gfm, Write/Preview toggle - Dashboard shows displayId and assignee avatar - URLs now use displayId (/tickets/V325813929) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,15 +1,23 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { format } from 'date-fns'
|
||||
import { Pencil, Trash2, Send, X, Check } from 'lucide-react'
|
||||
import { format, formatDistanceToNow } from 'date-fns'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import {
|
||||
Pencil, Trash2, Send, X, Check,
|
||||
MessageSquare, ClipboardList, FileText,
|
||||
} from 'lucide-react'
|
||||
import api from '../api/client'
|
||||
import Layout from '../components/Layout'
|
||||
import SeverityBadge from '../components/SeverityBadge'
|
||||
import StatusBadge from '../components/StatusBadge'
|
||||
import CTISelect from '../components/CTISelect'
|
||||
import { Ticket, TicketStatus, User, Comment } from '../types'
|
||||
import Avatar from '../components/Avatar'
|
||||
import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
|
||||
type Tab = 'overview' | 'comments' | 'audit'
|
||||
|
||||
const STATUS_OPTIONS: { value: TicketStatus; label: string }[] = [
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||
@@ -17,6 +25,30 @@ const STATUS_OPTIONS: { value: TicketStatus; label: string }[] = [
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
]
|
||||
|
||||
const AUDIT_LABELS: Record<string, string> = {
|
||||
CREATED: 'Ticket created',
|
||||
STATUS_CHANGED: 'Status changed',
|
||||
ASSIGNEE_CHANGED: 'Assignee changed',
|
||||
SEVERITY_CHANGED: 'Severity changed',
|
||||
REROUTED: 'Rerouted',
|
||||
TITLE_CHANGED: 'Title updated',
|
||||
OVERVIEW_CHANGED: 'Overview updated',
|
||||
COMMENT_ADDED: 'Comment added',
|
||||
COMMENT_DELETED: 'Comment deleted',
|
||||
}
|
||||
|
||||
const AUDIT_COLORS: Record<string, string> = {
|
||||
CREATED: 'bg-green-500',
|
||||
STATUS_CHANGED: 'bg-blue-500',
|
||||
ASSIGNEE_CHANGED: 'bg-purple-500',
|
||||
SEVERITY_CHANGED: 'bg-orange-500',
|
||||
REROUTED: 'bg-cyan-500',
|
||||
TITLE_CHANGED: 'bg-gray-400',
|
||||
OVERVIEW_CHANGED: 'bg-gray-400',
|
||||
COMMENT_ADDED: 'bg-gray-400',
|
||||
COMMENT_DELETED: 'bg-red-400',
|
||||
}
|
||||
|
||||
export default function TicketDetail() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
@@ -24,11 +56,13 @@ export default function TicketDetail() {
|
||||
|
||||
const [ticket, setTicket] = useState<Ticket | null>(null)
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [tab, setTab] = useState<Tab>('overview')
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [commentBody, setCommentBody] = useState('')
|
||||
const [submittingComment, setSubmittingComment] = useState(false)
|
||||
const commentRef = useRef<HTMLTextAreaElement>(null)
|
||||
const [preview, setPreview] = useState(false)
|
||||
|
||||
const [editForm, setEditForm] = useState({
|
||||
title: '',
|
||||
@@ -50,6 +84,15 @@ export default function TicketDetail() {
|
||||
}).finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
const fetchAudit = () => {
|
||||
if (!ticket) return
|
||||
api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === 'audit') fetchAudit()
|
||||
}, [tab, ticket])
|
||||
|
||||
const startEdit = () => {
|
||||
if (!ticket) return
|
||||
setEditForm({
|
||||
@@ -66,7 +109,7 @@ export default function TicketDetail() {
|
||||
|
||||
const saveEdit = async () => {
|
||||
if (!ticket) return
|
||||
const payload: Record<string, unknown> = {
|
||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
|
||||
title: editForm.title,
|
||||
overview: editForm.overview,
|
||||
severity: editForm.severity,
|
||||
@@ -74,21 +117,20 @@ export default function TicketDetail() {
|
||||
typeId: editForm.typeId,
|
||||
itemId: editForm.itemId,
|
||||
assigneeId: editForm.assigneeId || null,
|
||||
}
|
||||
const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, payload)
|
||||
})
|
||||
setTicket(res.data)
|
||||
setEditing(false)
|
||||
}
|
||||
|
||||
const updateStatus = async (status: TicketStatus) => {
|
||||
if (!ticket) return
|
||||
const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, { status })
|
||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, { status })
|
||||
setTicket(res.data)
|
||||
}
|
||||
|
||||
const updateAssignee = async (assigneeId: string) => {
|
||||
if (!ticket) return
|
||||
const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, {
|
||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
|
||||
assigneeId: assigneeId || null,
|
||||
})
|
||||
setTicket(res.data)
|
||||
@@ -96,7 +138,7 @@ export default function TicketDetail() {
|
||||
|
||||
const deleteTicket = async () => {
|
||||
if (!ticket || !confirm('Delete this ticket?')) return
|
||||
await api.delete(`/tickets/${ticket.id}`)
|
||||
await api.delete(`/tickets/${ticket.displayId}`)
|
||||
navigate('/')
|
||||
}
|
||||
|
||||
@@ -105,13 +147,12 @@ export default function TicketDetail() {
|
||||
if (!ticket || !commentBody.trim()) return
|
||||
setSubmittingComment(true)
|
||||
try {
|
||||
const res = await api.post<Comment>(`/tickets/${ticket.id}/comments`, {
|
||||
const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
|
||||
body: commentBody.trim(),
|
||||
})
|
||||
setTicket((t) =>
|
||||
t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t
|
||||
)
|
||||
setTicket((t) => t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t)
|
||||
setCommentBody('')
|
||||
setPreview(false)
|
||||
} finally {
|
||||
setSubmittingComment(false)
|
||||
}
|
||||
@@ -119,272 +160,378 @@ export default function TicketDetail() {
|
||||
|
||||
const deleteComment = async (commentId: string) => {
|
||||
if (!ticket) return
|
||||
await api.delete(`/tickets/${ticket.id}/comments/${commentId}`)
|
||||
setTicket((t) =>
|
||||
t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t
|
||||
)
|
||||
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
|
||||
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) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="text-center py-16 text-gray-400 text-sm">Loading...</div>
|
||||
</Layout>
|
||||
)
|
||||
return <Layout><div className="text-center py-16 text-gray-400 text-sm">Loading...</div></Layout>
|
||||
}
|
||||
|
||||
if (!ticket) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="text-center py-16 text-gray-400 text-sm">Ticket not found</div>
|
||||
</Layout>
|
||||
)
|
||||
return <Layout><div className="text-center py-16 text-gray-400 text-sm">Ticket not found</div></Layout>
|
||||
}
|
||||
|
||||
const commentCount = ticket.comments?.length ?? 0
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={ticket.title}
|
||||
action={
|
||||
authUser?.role === 'ADMIN' ? (
|
||||
<button
|
||||
onClick={deleteTicket}
|
||||
className="flex items-center gap-2 text-sm text-red-600 hover:text-red-800 border border-red-200 hover:border-red-400 px-3 py-1.5 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
Delete
|
||||
</button>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<div className="max-w-3xl space-y-5">
|
||||
{/* Ticket card */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl">
|
||||
{/* Header bar */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<SeverityBadge severity={ticket.severity} />
|
||||
<StatusBadge status={ticket.status} />
|
||||
{!editing && (
|
||||
<span className="text-xs text-gray-400">
|
||||
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!editing ? (
|
||||
<button
|
||||
onClick={startEdit}
|
||||
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"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
Edit
|
||||
</button>
|
||||
) : (
|
||||
<Layout>
|
||||
<div className="max-w-3xl">
|
||||
{/* Ticket header */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl mb-4">
|
||||
<div className="px-5 pt-5 pb-4">
|
||||
{/* ID + actions row */}
|
||||
<div className="flex items-start justify-between gap-4 mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setEditing(false)}
|
||||
className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-2.5 py-1 rounded-lg 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>
|
||||
<span className="font-mono text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
||||
{ticket.displayId}
|
||||
</span>
|
||||
<SeverityBadge severity={ticket.severity} />
|
||||
<StatusBadge status={ticket.status} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{!editing ? (
|
||||
<button
|
||||
onClick={startEdit}
|
||||
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"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
Edit
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
|
||||
{/* Title */}
|
||||
{editing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editForm.title}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
||||
className={`${inputClass} text-lg font-semibold mb-3`}
|
||||
/>
|
||||
) : (
|
||||
<h1 className="text-lg font-semibold text-gray-900 mb-3">{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 className="p-5 space-y-4">
|
||||
{editing ? (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editForm.title}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Overview</label>
|
||||
<textarea
|
||||
value={editForm.overview}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
|
||||
rows={4}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<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>
|
||||
<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-sm text-gray-700 whitespace-pre-wrap">{ticket.overview}</p>
|
||||
|
||||
{/* Quick controls */}
|
||||
<div className="grid grid-cols-2 gap-4 pt-2">
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metadata footer */}
|
||||
<div className="px-5 py-3 bg-gray-50 rounded-b-xl border-t border-gray-100 flex items-center gap-6 text-xs text-gray-400">
|
||||
<span>Created by <strong className="text-gray-600">{ticket.createdBy.displayName}</strong></span>
|
||||
{/* Meta footer */}
|
||||
<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">
|
||||
<span>
|
||||
Opened by <strong className="text-gray-600">{ticket.createdBy.displayName}</strong>
|
||||
</span>
|
||||
<span>{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</span>
|
||||
{ticket.resolvedAt && (
|
||||
<span>Resolved {format(new Date(ticket.resolvedAt), 'MMM d, yyyy')}</span>
|
||||
)}
|
||||
<span>Updated {format(new Date(ticket.updatedAt), 'MMM d, yyyy HH:mm')}</span>
|
||||
<span className="ml-auto">
|
||||
Updated {formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl">
|
||||
<div className="px-5 py-3 border-b border-gray-100">
|
||||
<h3 className="text-sm font-semibold text-gray-700">
|
||||
Comments ({ticket.comments?.length ?? 0})
|
||||
</h3>
|
||||
</div>
|
||||
{/* Tab bar */}
|
||||
<div className="flex border-b border-gray-200 mb-4 bg-white rounded-t-xl border border-gray-200 border-b-0">
|
||||
{(
|
||||
[
|
||||
{ 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>
|
||||
|
||||
{ticket.comments && ticket.comments.length > 0 ? (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{ticket.comments.map((comment) => (
|
||||
<div key={comment.id} className="px-5 py-4 group">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-medium text-gray-700">
|
||||
{comment.author.displayName}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')}
|
||||
</span>
|
||||
{/* ── 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">
|
||||
<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">
|
||||
{formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
|
||||
</span>
|
||||
<span className="text-xs text-gray-300" title={format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')}>
|
||||
· {format(new Date(comment.createdAt), 'MMM d, yyyy')}
|
||||
</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>
|
||||
<p className="text-sm text-gray-700 whitespace-pre-wrap">{comment.body}</p>
|
||||
</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 flex-shrink-0"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-5 py-8 text-center text-xs text-gray-400">No comments yet</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 form */}
|
||||
<form onSubmit={submitComment} className="px-5 py-4 border-t border-gray-100">
|
||||
<textarea
|
||||
ref={commentRef}
|
||||
value={commentBody}
|
||||
onChange={(e) => setCommentBody(e.target.value)}
|
||||
placeholder="Add a comment..."
|
||||
rows={3}
|
||||
className="w-full border border-gray-300 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-2">
|
||||
<span className="text-xs text-gray-400">Ctrl+Enter to submit</span>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submittingComment || !commentBody.trim()}
|
||||
className="flex items-center gap-2 px-3 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>
|
||||
{/* 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
|
||||
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 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>
|
||||
</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 className="flex-1 min-w-0 pb-1">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<span className="text-sm text-gray-800">
|
||||
<strong className="font-medium">{log.user.displayName}</strong>
|
||||
{' '}{AUDIT_LABELS[log.action]?.toLowerCase() ?? log.action.toLowerCase()}
|
||||
{log.detail && (
|
||||
<span className="text-gray-500"> — {log.detail}</span>
|
||||
)}
|
||||
</span>
|
||||
<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>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user