Dark theme, roles overhaul, modal New Ticket, My Tickets page, and more
- Dark UI across all pages and components (gray-950/900/800 palette) - New Ticket is now a centered modal (triggered from sidebar), not a separate page - Add USER role: view and comment only; AGENT and SERVICE can create/edit tickets - Only admins can set ticket status to CLOSED (enforced server + UI) - Add My Tickets page (/my-tickets) showing tickets assigned to current user - Add queue (category) filter to Dashboard - Audit log entries are clickable to expand detail; comment body shown as markdown - Resolved date now includes time (HH:mm) in ticket sidebar - Store comment body in audit log detail for COMMENT_ADDED and COMMENT_DELETED - Clarify role descriptions in Admin Users modal - Remove CI/CD section from README; add full API reference documentation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,7 @@ import remarkGfm from 'remark-gfm'
|
||||
import {
|
||||
Pencil, Trash2, Send, X, Check,
|
||||
MessageSquare, ClipboardList, FileText,
|
||||
ArrowLeft,
|
||||
ArrowLeft, ChevronDown, ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import api from '../api/client'
|
||||
import Layout from '../components/Layout'
|
||||
@@ -19,13 +19,6 @@ 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' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
]
|
||||
|
||||
const SEVERITY_OPTIONS = [
|
||||
{ value: 1, label: 'SEV 1 — Critical' },
|
||||
{ value: 2, label: 'SEV 2 — High' },
|
||||
@@ -52,19 +45,21 @@ const AUDIT_COLORS: Record<string, string> = {
|
||||
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',
|
||||
TITLE_CHANGED: 'bg-gray-500',
|
||||
OVERVIEW_CHANGED: 'bg-gray-500',
|
||||
COMMENT_ADDED: 'bg-gray-500',
|
||||
COMMENT_DELETED: 'bg-red-500',
|
||||
}
|
||||
|
||||
const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED'])
|
||||
|
||||
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'
|
||||
'w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
|
||||
|
||||
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>
|
||||
<p className="text-xs font-medium text-gray-500 mb-1.5">{label}</p>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
@@ -85,10 +80,13 @@ export default function TicketDetail() {
|
||||
const [commentBody, setCommentBody] = useState('')
|
||||
const [submittingComment, setSubmittingComment] = useState(false)
|
||||
const [preview, setPreview] = useState(false)
|
||||
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
|
||||
|
||||
const [editForm, setEditForm] = useState({ title: '', overview: '' })
|
||||
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })
|
||||
|
||||
const isAdmin = authUser?.role === 'ADMIN'
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
api.get<Ticket>(`/tickets/${id}`),
|
||||
@@ -163,10 +161,19 @@ export default function TicketDetail() {
|
||||
setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
|
||||
}
|
||||
|
||||
const toggleLog = (logId: string) => {
|
||||
setExpandedLogs((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(logId)) next.delete(logId)
|
||||
else next.add(logId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||
<div className="flex items-center justify-center h-full text-gray-600 text-sm">
|
||||
Loading...
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -176,7 +183,7 @@ export default function TicketDetail() {
|
||||
if (!ticket) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||
<div className="flex items-center justify-center h-full text-gray-600 text-sm">
|
||||
Ticket not found
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -186,29 +193,37 @@ export default function TicketDetail() {
|
||||
const commentCount = ticket.comments?.length ?? 0
|
||||
const agentUsers = users.filter((u) => u.role !== 'SERVICE')
|
||||
|
||||
// Status options: CLOSED only for admins
|
||||
const statusOptions: { value: TicketStatus; label: string }[] = [
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
|
||||
]
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{/* Back link */}
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-700 mb-4 transition-colors"
|
||||
onClick={() => navigate(-1)}
|
||||
className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 mb-4 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={14} />
|
||||
All tickets
|
||||
Back
|
||||
</button>
|
||||
|
||||
<div className="flex gap-6 items-start">
|
||||
{/* ── Main content ── */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Title card */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl px-6 py-5 mb-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="font-mono text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
||||
<div className="bg-gray-900 border border-gray-800 rounded-xl px-6 py-5 mb-3">
|
||||
<div className="flex items-center gap-2 mb-3 flex-wrap">
|
||||
<span className="font-mono text-xs font-semibold text-gray-500 bg-gray-800 px-2 py-0.5 rounded">
|
||||
{ticket.displayId}
|
||||
</span>
|
||||
<SeverityBadge severity={ticket.severity} />
|
||||
<StatusBadge status={ticket.status} />
|
||||
<span className="text-xs text-gray-400 ml-1">
|
||||
<span className="text-xs text-gray-500 ml-1">
|
||||
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||
</span>
|
||||
</div>
|
||||
@@ -218,18 +233,18 @@ export default function TicketDetail() {
|
||||
type="text"
|
||||
value={editForm.title}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
||||
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"
|
||||
className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-blue-500 focus:outline-none pb-1"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<h1 className="text-2xl font-bold text-gray-900">{ticket.title}</h1>
|
||||
<h1 className="text-2xl font-bold text-gray-100">{ticket.title}</h1>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tabs + content */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
|
||||
<div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
|
||||
{/* Tab bar */}
|
||||
<div className="flex border-b border-gray-200 px-2">
|
||||
<div className="flex border-b border-gray-800 px-2">
|
||||
{(
|
||||
[
|
||||
{ key: 'overview', icon: FileText, label: 'Overview' },
|
||||
@@ -242,8 +257,8 @@ export default function TicketDetail() {
|
||||
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 === key
|
||||
? 'border-blue-600 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-800'
|
||||
? 'border-blue-500 text-blue-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<Icon size={14} />
|
||||
@@ -261,12 +276,12 @@ export default function TicketDetail() {
|
||||
value={editForm.overview}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
|
||||
rows={12}
|
||||
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"
|
||||
className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y font-mono"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => setEditing(false)}
|
||||
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"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<X size={13} /> Cancel
|
||||
</button>
|
||||
@@ -279,7 +294,7 @@ export default function TicketDetail() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="prose text-sm text-gray-700">
|
||||
<div className="prose text-sm text-gray-300">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||
{ticket.overview}
|
||||
</ReactMarkdown>
|
||||
@@ -292,7 +307,7 @@ export default function TicketDetail() {
|
||||
{tab === 'comments' && (
|
||||
<div>
|
||||
{ticket.comments && ticket.comments.length > 0 ? (
|
||||
<div className="divide-y divide-gray-100">
|
||||
<div className="divide-y divide-gray-800">
|
||||
{ticket.comments.map((comment) => (
|
||||
<div key={comment.id} className="p-6 group">
|
||||
<div className="flex items-start gap-3">
|
||||
@@ -300,23 +315,23 @@ export default function TicketDetail() {
|
||||
<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">
|
||||
<span className="text-sm font-semibold text-gray-200">
|
||||
{comment.author.displayName}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
<span className="text-xs text-gray-500">
|
||||
{format(new Date(comment.createdAt), 'MMM d, yyyy · HH:mm')}
|
||||
</span>
|
||||
</div>
|
||||
{(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
|
||||
{(comment.authorId === authUser?.id || isAdmin) && (
|
||||
<button
|
||||
onClick={() => deleteComment(comment.id)}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all"
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="prose text-sm text-gray-700">
|
||||
<div className="prose text-sm text-gray-300">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||
{comment.body}
|
||||
</ReactMarkdown>
|
||||
@@ -327,26 +342,25 @@ export default function TicketDetail() {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-16 text-center text-sm text-gray-400">
|
||||
No comments yet — be the first
|
||||
<div className="py-16 text-center text-sm text-gray-600">
|
||||
No comments yet
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Comment composer */}
|
||||
<div className="border-t border-gray-200 p-6">
|
||||
<div className="border-t border-gray-800 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">
|
||||
<div className="flex gap-4 mb-2 border-b border-gray-800">
|
||||
{(['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'
|
||||
? 'border-blue-500 text-blue-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
@@ -356,10 +370,10 @@ export default function TicketDetail() {
|
||||
|
||||
<form onSubmit={submitComment}>
|
||||
{preview ? (
|
||||
<div className="prose text-sm text-gray-700 min-h-[80px] mb-3 px-1">
|
||||
<div className="prose text-sm text-gray-300 min-h-[80px] mb-3 px-1">
|
||||
{commentBody.trim()
|
||||
? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
|
||||
: <span className="text-gray-400 italic">Nothing to preview</span>
|
||||
: <span className="text-gray-600 italic">Nothing to preview</span>
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
@@ -368,7 +382,7 @@ export default function TicketDetail() {
|
||||
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"
|
||||
className="w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-600 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()
|
||||
@@ -378,7 +392,7 @@ export default function TicketDetail() {
|
||||
/>
|
||||
)}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-gray-400">
|
||||
<span className="text-xs text-gray-600">
|
||||
Markdown supported · Ctrl+Enter to submit
|
||||
</span>
|
||||
<button
|
||||
@@ -401,38 +415,64 @@ export default function TicketDetail() {
|
||||
{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="py-10 text-center text-sm text-gray-600">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')}
|
||||
<div>
|
||||
{auditLogs.map((log, i) => {
|
||||
const hasDetail = !!log.detail
|
||||
const isExpanded = expandedLogs.has(log.id)
|
||||
const isComment = COMMENT_ACTIONS.has(log.action)
|
||||
|
||||
return (
|
||||
<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-500'}`} />
|
||||
{i < auditLogs.length - 1 && (
|
||||
<div className="w-px flex-1 bg-gray-800 my-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Entry */}
|
||||
<div className="flex-1 pb-4">
|
||||
<div
|
||||
className={`flex items-baseline justify-between gap-4 ${hasDetail ? 'cursor-pointer select-none' : ''}`}
|
||||
onClick={() => hasDetail && toggleLog(log.id)}
|
||||
>
|
||||
{formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
|
||||
</span>
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-medium text-gray-100">{log.user.displayName}</span>
|
||||
{' '}{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
|
||||
{hasDetail && (
|
||||
<span className="ml-1 inline-flex items-center text-gray-600">
|
||||
{isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<span
|
||||
className="text-xs text-gray-600 flex-shrink-0"
|
||||
title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
|
||||
>
|
||||
{formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{hasDetail && isExpanded && (
|
||||
<div className="mt-2 ml-0 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
|
||||
{isComment ? (
|
||||
<div className="prose text-sm text-gray-300">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||
{log.detail!}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400">{log.detail}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -444,9 +484,9 @@ export default function TicketDetail() {
|
||||
<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="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">Details</p>
|
||||
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Details</p>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 space-y-3">
|
||||
@@ -456,10 +496,13 @@ export default function TicketDetail() {
|
||||
onChange={(e) => patch({ status: e.target.value })}
|
||||
className={selectClass}
|
||||
>
|
||||
{STATUS_OPTIONS.map((s) => (
|
||||
{statusOptions.map((s) => (
|
||||
<option key={s.value} value={s.value}>{s.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{!isAdmin && ticket.status !== 'CLOSED' && (
|
||||
<p className="text-xs text-gray-600 mt-1">Closing requires admin</p>
|
||||
)}
|
||||
</SidebarField>
|
||||
|
||||
<SidebarField label="Severity">
|
||||
@@ -488,7 +531,7 @@ export default function TicketDetail() {
|
||||
{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>
|
||||
<span className="text-xs text-gray-400">{ticket.assignee.displayName}</span>
|
||||
</div>
|
||||
)}
|
||||
</SidebarField>
|
||||
@@ -496,14 +539,14 @@ export default function TicketDetail() {
|
||||
|
||||
{/* Routing */}
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Routing</p>
|
||||
<p className="text-xs font-semibold text-gray-500 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"
|
||||
className="flex-1 text-xs py-1.5 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors text-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -517,16 +560,16 @@ export default function TicketDetail() {
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="text-xs text-gray-700 leading-relaxed">
|
||||
<p className="text-xs text-gray-300 leading-relaxed">
|
||||
{ticket.category.name}
|
||||
<span className="text-gray-400"> › </span>
|
||||
<span className="text-gray-600"> › </span>
|
||||
{ticket.type.name}
|
||||
<span className="text-gray-400"> › </span>
|
||||
<span className="text-gray-600"> › </span>
|
||||
{ticket.item.name}
|
||||
</p>
|
||||
<button
|
||||
onClick={startReroute}
|
||||
className="mt-1.5 text-xs text-blue-600 hover:text-blue-800 transition-colors"
|
||||
className="mt-1.5 text-xs text-blue-500 hover:text-blue-400 transition-colors"
|
||||
>
|
||||
Change routing
|
||||
</button>
|
||||
@@ -535,44 +578,44 @@ export default function TicketDetail() {
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div className="px-4 py-3 space-y-2">
|
||||
<div className="px-4 py-3 space-y-2.5">
|
||||
<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>
|
||||
<p className="text-xs text-gray-500">Opened by</p>
|
||||
<p className="text-xs font-medium text-gray-300">{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>
|
||||
<p className="text-xs text-gray-500">Created</p>
|
||||
<p className="text-xs text-gray-300">{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>
|
||||
<p className="text-xs text-gray-500">Resolved</p>
|
||||
<p className="text-xs text-gray-300">{format(new Date(ticket.resolvedAt), 'MMM d, yyyy HH:mm')}</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>
|
||||
<p className="text-xs text-gray-500">Updated</p>
|
||||
<p className="text-xs text-gray-300">{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">
|
||||
<div className="bg-gray-900 border border-gray-800 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"
|
||||
className="w-full flex items-center justify-center gap-2 py-2 text-sm text-gray-300 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<Pencil size={13} />
|
||||
Edit title & overview
|
||||
</button>
|
||||
{authUser?.role === 'ADMIN' && (
|
||||
{isAdmin && (
|
||||
<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"
|
||||
className="w-full flex items-center justify-center gap-2 py-2 text-sm text-red-400 border border-red-500/30 rounded-lg hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
Delete ticket
|
||||
|
||||
Reference in New Issue
Block a user