Split TicketDetail.tsx (775 lines) into focused sub-components
Extracted TicketComments, TicketAuditLog, and TicketSidebar into client/src/pages/ticket-detail/. The main TicketDetail.tsx remains as the page orchestrator. Router import unchanged via index.ts re-export. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -6,7 +6,7 @@ import Login from './pages/Login';
|
|||||||
import Dashboard from './pages/Dashboard';
|
import Dashboard from './pages/Dashboard';
|
||||||
import Tickets from './pages/Tickets';
|
import Tickets from './pages/Tickets';
|
||||||
import MyTickets from './pages/MyTickets';
|
import MyTickets from './pages/MyTickets';
|
||||||
import TicketDetail from './pages/TicketDetail';
|
import TicketDetail from './pages/ticket-detail';
|
||||||
import Notifications from './pages/Notifications';
|
import Notifications from './pages/Notifications';
|
||||||
import Settings from './pages/Settings';
|
import Settings from './pages/Settings';
|
||||||
import AdminUsers from './pages/admin/Users';
|
import AdminUsers from './pages/admin/Users';
|
||||||
|
|||||||
@@ -1,774 +0,0 @@
|
|||||||
import { useEffect, useRef, useState } from 'react';
|
|
||||||
import { useParams, useNavigate } from 'react-router-dom';
|
|
||||||
import { useShortcut } from '../hooks/useShortcuts';
|
|
||||||
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,
|
|
||||||
ArrowLeft,
|
|
||||||
ChevronDown,
|
|
||||||
ChevronRight,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import Layout from '../components/Layout';
|
|
||||||
import Modal from '../components/Modal';
|
|
||||||
import SeverityBadge from '../components/SeverityBadge';
|
|
||||||
import StatusBadge from '../components/StatusBadge';
|
|
||||||
import CTISelect from '../components/CTISelect';
|
|
||||||
import Avatar from '../components/Avatar';
|
|
||||||
import MentionTextarea from '../components/MentionTextarea';
|
|
||||||
import { injectMentionLinks } from '../lib/mentions';
|
|
||||||
import { TicketStatus } from '../types';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import {
|
|
||||||
useTicket,
|
|
||||||
useTicketAudit,
|
|
||||||
useUpdateTicket,
|
|
||||||
useDeleteTicket,
|
|
||||||
useUsers,
|
|
||||||
useAddComment,
|
|
||||||
useDeleteComment,
|
|
||||||
} from '../api/queries';
|
|
||||||
import {
|
|
||||||
Popover,
|
|
||||||
PopoverContent,
|
|
||||||
PopoverTrigger,
|
|
||||||
} from '@/components/ui/popover';
|
|
||||||
import {
|
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from '@/components/ui/alert-dialog';
|
|
||||||
|
|
||||||
type Tab = 'overview' | 'comments' | 'audit';
|
|
||||||
|
|
||||||
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' },
|
|
||||||
];
|
|
||||||
|
|
||||||
import { AUDIT_LABELS, AUDIT_COLORS } from '../../../shared/constants/labels';
|
|
||||||
|
|
||||||
const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED']);
|
|
||||||
|
|
||||||
export default function TicketDetail() {
|
|
||||||
const { id } = useParams<{ id: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { user: authUser } = useAuth();
|
|
||||||
|
|
||||||
const [tab, setTab] = useState<Tab>('overview');
|
|
||||||
const [editing, setEditing] = useState(false);
|
|
||||||
const [reroutingCTI, setReroutingCTI] = useState(false);
|
|
||||||
const [commentBody, setCommentBody] = useState('');
|
|
||||||
const [preview, setPreview] = useState(false);
|
|
||||||
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
|
|
||||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
|
||||||
|
|
||||||
const commentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
|
|
||||||
const [editForm, setEditForm] = useState({ title: '', overview: '' });
|
|
||||||
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
|
|
||||||
const [statusOpen, setStatusOpen] = useState(false);
|
|
||||||
const [severityOpen, setSeverityOpen] = useState(false);
|
|
||||||
const [assigneeOpen, setAssigneeOpen] = useState(false);
|
|
||||||
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
|
|
||||||
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());
|
|
||||||
|
|
||||||
// Draft autosave
|
|
||||||
const draftKey = id ? `comment-draft:${id}` : null;
|
|
||||||
useEffect(() => {
|
|
||||||
if (!draftKey) return;
|
|
||||||
const saved = localStorage.getItem(draftKey);
|
|
||||||
if (saved) setCommentBody(saved);
|
|
||||||
}, [draftKey]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!draftKey) return;
|
|
||||||
if (commentBody) localStorage.setItem(draftKey, commentBody);
|
|
||||||
else localStorage.removeItem(draftKey);
|
|
||||||
}, [commentBody, draftKey]);
|
|
||||||
|
|
||||||
const { data: ticket, isLoading } = useTicket(id);
|
|
||||||
const { data: users = [] } = useUsers();
|
|
||||||
const { data: auditLogs = [] } = useTicketAudit(id, tab === 'audit');
|
|
||||||
|
|
||||||
const updateTicket = useUpdateTicket();
|
|
||||||
const deleteTicketMutation = useDeleteTicket();
|
|
||||||
const addComment = useAddComment(id);
|
|
||||||
const deleteCommentMutation = useDeleteComment(id);
|
|
||||||
|
|
||||||
const toggleDate = (key: string) =>
|
|
||||||
setExpandedDates((prev) => {
|
|
||||||
const next = new Set(prev);
|
|
||||||
if (next.has(key)) next.delete(key);
|
|
||||||
else next.add(key);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
|
|
||||||
const toggleCommentDate = (commentId: string) =>
|
|
||||||
setExpandedCommentDates((prev) => {
|
|
||||||
const next = new Set(prev);
|
|
||||||
if (next.has(commentId)) next.delete(commentId);
|
|
||||||
else next.add(commentId);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
|
|
||||||
const isAdmin = authUser?.role === 'ADMIN';
|
|
||||||
|
|
||||||
const patch = async (payload: Record<string, unknown>) => {
|
|
||||||
if (!ticket) return;
|
|
||||||
await updateTicket.mutateAsync({ id: ticket.displayId, data: payload });
|
|
||||||
};
|
|
||||||
|
|
||||||
const startEdit = () => {
|
|
||||||
if (!ticket) return;
|
|
||||||
setEditForm({ title: ticket.title, overview: ticket.overview });
|
|
||||||
setEditing(true);
|
|
||||||
setTab('overview');
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveEdit = async () => {
|
|
||||||
await patch({ title: editForm.title, overview: editForm.overview });
|
|
||||||
setEditing(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const startReroute = () => {
|
|
||||||
if (!ticket) return;
|
|
||||||
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
|
|
||||||
setReroutingCTI(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveReroute = async () => {
|
|
||||||
await patch(pendingCTI);
|
|
||||||
setReroutingCTI(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const confirmDeleteTicket = async () => {
|
|
||||||
if (!ticket) return;
|
|
||||||
await deleteTicketMutation.mutateAsync(ticket.displayId);
|
|
||||||
toast.success('Ticket deleted');
|
|
||||||
navigate('/tickets');
|
|
||||||
};
|
|
||||||
|
|
||||||
const submitComment = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!ticket || !commentBody.trim()) return;
|
|
||||||
await addComment.mutateAsync(commentBody.trim());
|
|
||||||
setCommentBody('');
|
|
||||||
setPreview(false);
|
|
||||||
if (draftKey) localStorage.removeItem(draftKey);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteComment = async (commentId: string) => {
|
|
||||||
await deleteCommentMutation.mutateAsync(commentId);
|
|
||||||
};
|
|
||||||
|
|
||||||
useShortcut('e', (e) => {
|
|
||||||
if (!ticket || editing) return;
|
|
||||||
e.preventDefault();
|
|
||||||
startEdit();
|
|
||||||
}, [ticket, editing]);
|
|
||||||
|
|
||||||
useShortcut('r', (e) => {
|
|
||||||
if (!ticket) return;
|
|
||||||
e.preventDefault();
|
|
||||||
setTab('comments');
|
|
||||||
setPreview(false);
|
|
||||||
setTimeout(() => commentTextareaRef.current?.focus(), 40);
|
|
||||||
}, [ticket]);
|
|
||||||
|
|
||||||
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 (isLoading) {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<div className="flex items-center justify-center h-full text-gray-600 text-sm">
|
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!ticket) {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<div className="flex items-center justify-center h-full text-gray-600 text-sm">
|
|
||||||
Ticket not found
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const commentCount = ticket.comments?.length ?? 0;
|
|
||||||
const agentUsers = users;
|
|
||||||
|
|
||||||
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('/tickets')}
|
|
||||||
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
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="flex flex-col-reverse md:flex-row gap-6 md:items-start">
|
|
||||||
{/* ── Main content ── */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
{/* Title card */}
|
|
||||||
<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-500 ml-1">
|
|
||||||
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={startEdit}
|
|
||||||
className="ml-auto text-gray-500 hover:text-gray-300 transition-colors"
|
|
||||||
title="Edit title & overview"
|
|
||||||
>
|
|
||||||
<Pencil size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{editing ? (
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={editForm.title}
|
|
||||||
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
|
||||||
className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<h1 className="text-2xl font-bold text-gray-100">{ticket.title}</h1>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabs + content */}
|
|
||||||
<div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
|
|
||||||
{/* Tab bar */}
|
|
||||||
<div className="flex border-b border-gray-800 px-2">
|
|
||||||
{(
|
|
||||||
[
|
|
||||||
{ 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-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
|
|
||||||
tab === key
|
|
||||||
? 'border-indigo-500 text-indigo-400'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Icon size={14} />
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Overview ── */}
|
|
||||||
{tab === 'overview' && (
|
|
||||||
<div className="p-6">
|
|
||||||
{editing ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<textarea
|
|
||||||
value={editForm.overview}
|
|
||||||
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
|
|
||||||
rows={12}
|
|
||||||
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-indigo-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-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
|
|
||||||
>
|
|
||||||
<X size={13} /> Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={saveEdit}
|
|
||||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
|
|
||||||
>
|
|
||||||
<Check size={13} /> Save changes
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="prose text-sm text-gray-300">
|
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ── Comments ── */}
|
|
||||||
{tab === 'comments' && (
|
|
||||||
<div className="p-6 space-y-4">
|
|
||||||
{ticket.comments && ticket.comments.length > 0 ? (
|
|
||||||
ticket.comments.map((comment, i) => (
|
|
||||||
<div key={comment.id} className="flex gap-3 group">
|
|
||||||
{/* Avatar + spine */}
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<Avatar name={comment.author.displayName} size="md" />
|
|
||||||
{i < ticket.comments!.length - 1 && (
|
|
||||||
<div className="flex-1 w-px bg-gray-800 mt-2" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* Card */}
|
|
||||||
<div className="flex-1 min-w-0 border border-gray-700 rounded-lg overflow-hidden">
|
|
||||||
<div className="flex items-center justify-between px-4 py-2 bg-gray-800/60 border-b border-gray-700">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-sm font-semibold text-gray-200">
|
|
||||||
{comment.author.displayName}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() => toggleCommentDate(comment.id)}
|
|
||||||
className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
|
||||||
>
|
|
||||||
{expandedCommentDates.has(comment.id)
|
|
||||||
? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
|
|
||||||
: formatDistanceToNow(new Date(comment.createdAt), {
|
|
||||||
addSuffix: true,
|
|
||||||
})}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{(comment.authorId === authUser?.id || isAdmin) && (
|
|
||||||
<button
|
|
||||||
onClick={() => handleDeleteComment(comment.id)}
|
|
||||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
|
||||||
>
|
|
||||||
<Trash2 size={13} />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
|
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
||||||
{injectMentionLinks(comment.body, users)}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Composer */}
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Avatar name={authUser?.displayName ?? '?'} size="md" />
|
|
||||||
<div className="flex-1 border border-gray-700 rounded-lg overflow-hidden">
|
|
||||||
<div className="flex gap-4 px-4 bg-gray-800/60 border-b border-gray-700">
|
|
||||||
{(['Write', 'Preview'] as const).map((label) => (
|
|
||||||
<button
|
|
||||||
key={label}
|
|
||||||
onClick={() => setPreview(label === 'Preview')}
|
|
||||||
className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
|
|
||||||
(label === 'Preview') === preview
|
|
||||||
? 'border-indigo-500 text-indigo-400'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<form onSubmit={submitComment} className="p-3">
|
|
||||||
{preview ? (
|
|
||||||
<div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
|
|
||||||
{commentBody.trim() ? (
|
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
||||||
{injectMentionLinks(commentBody, users)}
|
|
||||||
</ReactMarkdown>
|
|
||||||
) : (
|
|
||||||
<span className="text-gray-600 italic">Nothing to preview</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="mb-3">
|
|
||||||
<MentionTextarea
|
|
||||||
ref={commentTextareaRef}
|
|
||||||
value={commentBody}
|
|
||||||
onChange={setCommentBody}
|
|
||||||
users={users}
|
|
||||||
onSubmit={() =>
|
|
||||||
submitComment({
|
|
||||||
preventDefault: () => {},
|
|
||||||
} as unknown as React.FormEvent)
|
|
||||||
}
|
|
||||||
placeholder="Leave a comment… Markdown & @mentions"
|
|
||||||
rows={4}
|
|
||||||
className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-between items-center border-t border-gray-700 pt-2">
|
|
||||||
<span className="text-xs text-gray-600">Markdown · Ctrl+Enter</span>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={addComment.isPending || !commentBody.trim()}
|
|
||||||
className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
<Send size={13} />
|
|
||||||
Comment
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ── Audit Log ── */}
|
|
||||||
{tab === 'audit' && (
|
|
||||||
<div className="p-6">
|
|
||||||
{auditLogs.length === 0 ? (
|
|
||||||
<div className="py-10 text-center text-sm text-gray-600">No activity yet</div>
|
|
||||||
) : (
|
|
||||||
<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)}
|
|
||||||
>
|
|
||||||
<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]}>
|
|
||||||
{injectMentionLinks(log.detail!, users)}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-gray-400">{log.detail}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Sidebar ── */}
|
|
||||||
<div className="w-full md:w-64 flex-shrink-0 md:sticky md:top-0 space-y-3">
|
|
||||||
{/* Ticket Summary */}
|
|
||||||
<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-500 uppercase tracking-wide">
|
|
||||||
Ticket Summary
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status */}
|
|
||||||
<Popover open={statusOpen} onOpenChange={setStatusOpen}>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1.5">Status</p>
|
|
||||||
<StatusBadge status={ticket.status} />
|
|
||||||
</button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent align="start" className="w-56 p-1">
|
|
||||||
{statusOptions.map((s) => (
|
|
||||||
<button
|
|
||||||
key={s.value}
|
|
||||||
onClick={async () => {
|
|
||||||
await patch({ status: s.value });
|
|
||||||
setStatusOpen(false);
|
|
||||||
}}
|
|
||||||
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
|
||||||
>
|
|
||||||
<StatusBadge status={s.value} />
|
|
||||||
{ticket.status === s.value && (
|
|
||||||
<Check size={13} className="ml-auto text-primary" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
{!isAdmin && (
|
|
||||||
<p className="px-2 pt-1 text-[11px] text-muted-foreground">
|
|
||||||
Closing requires admin
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
|
|
||||||
{/* Severity */}
|
|
||||||
<Popover open={severityOpen} onOpenChange={setSeverityOpen}>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1.5">Severity</p>
|
|
||||||
<SeverityBadge severity={ticket.severity} />
|
|
||||||
</button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent align="start" className="w-56 p-1">
|
|
||||||
{SEVERITY_OPTIONS.map((s) => (
|
|
||||||
<button
|
|
||||||
key={s.value}
|
|
||||||
onClick={async () => {
|
|
||||||
await patch({ severity: s.value });
|
|
||||||
setSeverityOpen(false);
|
|
||||||
}}
|
|
||||||
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
|
||||||
>
|
|
||||||
<SeverityBadge severity={s.value} />
|
|
||||||
<span className="text-muted-foreground text-xs">
|
|
||||||
{s.label.split(' — ')[1]}
|
|
||||||
</span>
|
|
||||||
{ticket.severity === s.value && (
|
|
||||||
<Check size={13} className="ml-auto text-primary" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
|
|
||||||
{/* CTI — one clickable unit */}
|
|
||||||
<button
|
|
||||||
onClick={startReroute}
|
|
||||||
className="w-full px-4 py-3 text-left space-y-3 hover:bg-gray-800/50 transition-colors"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1">Category</p>
|
|
||||||
<p className="text-sm text-gray-300">{ticket.category.name}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1">Type</p>
|
|
||||||
<p className="text-sm text-gray-300">{ticket.type.name}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1">Issue</p>
|
|
||||||
<p className="text-sm text-gray-300">{ticket.item.name}</p>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Dates */}
|
|
||||||
<div className="px-4 py-3 space-y-2.5">
|
|
||||||
{[
|
|
||||||
{ key: 'created', label: 'Created', date: ticket.createdAt },
|
|
||||||
{ key: 'modified', label: 'Modified', date: ticket.updatedAt },
|
|
||||||
...(ticket.resolvedAt
|
|
||||||
? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }]
|
|
||||||
: []),
|
|
||||||
].map(({ key, label, date }) => (
|
|
||||||
<div key={key}>
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
|
|
||||||
<button
|
|
||||||
onClick={() => toggleDate(key)}
|
|
||||||
className="text-xs text-gray-300 hover:text-gray-100 transition-colors"
|
|
||||||
>
|
|
||||||
{expandedDates.has(key)
|
|
||||||
? format(new Date(date), 'MMM d, yyyy HH:mm')
|
|
||||||
: formatDistanceToNow(new Date(date), { addSuffix: true })}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Assignee */}
|
|
||||||
<Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1.5">Assignee</p>
|
|
||||||
{ticket.assignee ? (
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Avatar name={ticket.assignee.displayName} size="sm" />
|
|
||||||
<span className="text-sm text-gray-300">{ticket.assignee.displayName}</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-gray-500">Unassigned</p>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent align="start" className="w-60 p-1">
|
|
||||||
<button
|
|
||||||
onClick={async () => {
|
|
||||||
await patch({ assigneeId: null });
|
|
||||||
setAssigneeOpen(false);
|
|
||||||
}}
|
|
||||||
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
|
||||||
>
|
|
||||||
<span className="text-muted-foreground">Unassigned</span>
|
|
||||||
{!ticket.assigneeId && <Check size={13} className="ml-auto text-primary" />}
|
|
||||||
</button>
|
|
||||||
<div className="max-h-64 overflow-auto">
|
|
||||||
{agentUsers.map((u) => (
|
|
||||||
<button
|
|
||||||
key={u.id}
|
|
||||||
onClick={async () => {
|
|
||||||
await patch({ assigneeId: u.id });
|
|
||||||
setAssigneeOpen(false);
|
|
||||||
}}
|
|
||||||
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
|
||||||
>
|
|
||||||
<Avatar name={u.displayName} size="sm" />
|
|
||||||
<span>{u.displayName}</span>
|
|
||||||
{ticket.assigneeId === u.id && (
|
|
||||||
<Check size={13} className="ml-auto text-primary" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
|
|
||||||
{/* Requester */}
|
|
||||||
<div className="px-4 py-3">
|
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1.5">Requester</p>
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Avatar name={ticket.createdBy.displayName} size="sm" />
|
|
||||||
<span className="text-sm text-gray-300">{ticket.createdBy.displayName}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isAdmin && (
|
|
||||||
<div className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
|
|
||||||
<button
|
|
||||||
onClick={() => setDeleteOpen(true)}
|
|
||||||
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
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Delete this ticket?</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
{ticket.displayId} · {ticket.title} will be permanently removed along with its
|
|
||||||
comments and audit log. This cannot be undone.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
onClick={confirmDeleteTicket}
|
|
||||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
|
|
||||||
{reroutingCTI && (
|
|
||||||
<Modal title="Change Routing" onClose={() => setReroutingCTI(false)} size="lg">
|
|
||||||
<div className="space-y-5">
|
|
||||||
<p className="text-sm text-gray-400">
|
|
||||||
Current:{' '}
|
|
||||||
<span className="text-gray-200">
|
|
||||||
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<CTISelect value={pendingCTI} onChange={setPendingCTI} />
|
|
||||||
<div className="flex justify-end gap-3 pt-1">
|
|
||||||
<button
|
|
||||||
onClick={() => setReroutingCTI(false)}
|
|
||||||
className="px-4 py-2 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={saveReroute}
|
|
||||||
disabled={!pendingCTI.itemId}
|
|
||||||
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
Save routing
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
)}
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { format, formatDistanceToNow } from 'date-fns';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||||||
|
import { AUDIT_LABELS, AUDIT_COLORS } from '../../../../shared/constants/labels';
|
||||||
|
import { injectMentionLinks } from '../../lib/mentions';
|
||||||
|
import type { AuditLog, User } from '../../types';
|
||||||
|
|
||||||
|
const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED']);
|
||||||
|
|
||||||
|
interface TicketAuditLogProps {
|
||||||
|
auditLogs: AuditLog[];
|
||||||
|
users: User[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TicketAuditLog({ auditLogs, users }: TicketAuditLogProps) {
|
||||||
|
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
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 (auditLogs.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="py-10 text-center text-sm text-gray-600">No activity yet</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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)}
|
||||||
|
>
|
||||||
|
<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]}>
|
||||||
|
{injectMentionLinks(log.detail!, users)}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-gray-400">{log.detail}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,161 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { format, formatDistanceToNow } from 'date-fns';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import { Trash2, Send } from 'lucide-react';
|
||||||
|
import Avatar from '../../components/Avatar';
|
||||||
|
import MentionTextarea from '../../components/MentionTextarea';
|
||||||
|
import { injectMentionLinks } from '../../lib/mentions';
|
||||||
|
import type { Ticket, User, Comment } from '../../types';
|
||||||
|
|
||||||
|
interface TicketCommentsProps {
|
||||||
|
ticket: Ticket & { comments?: Comment[] };
|
||||||
|
users: User[];
|
||||||
|
authUser: { id: string; displayName: string; role: string } | null;
|
||||||
|
isAdmin: boolean;
|
||||||
|
commentBody: string;
|
||||||
|
setCommentBody: (v: string) => void;
|
||||||
|
preview: boolean;
|
||||||
|
setPreview: (v: boolean) => void;
|
||||||
|
commentTextareaRef: React.Ref<HTMLTextAreaElement>;
|
||||||
|
onSubmitComment: (e: React.FormEvent) => void;
|
||||||
|
onDeleteComment: (commentId: string) => void;
|
||||||
|
isSubmitting: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TicketComments({
|
||||||
|
ticket,
|
||||||
|
users,
|
||||||
|
authUser,
|
||||||
|
isAdmin,
|
||||||
|
commentBody,
|
||||||
|
setCommentBody,
|
||||||
|
preview,
|
||||||
|
setPreview,
|
||||||
|
commentTextareaRef,
|
||||||
|
onSubmitComment,
|
||||||
|
onDeleteComment,
|
||||||
|
isSubmitting,
|
||||||
|
}: TicketCommentsProps) {
|
||||||
|
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const toggleDate = (commentId: string) =>
|
||||||
|
setExpandedDates((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(commentId)) next.delete(commentId);
|
||||||
|
else next.add(commentId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
{ticket.comments && ticket.comments.length > 0 ? (
|
||||||
|
ticket.comments.map((comment, i) => (
|
||||||
|
<div key={comment.id} className="flex gap-3 group">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<Avatar name={comment.author.displayName} size="md" />
|
||||||
|
{i < ticket.comments!.length - 1 && (
|
||||||
|
<div className="flex-1 w-px bg-gray-800 mt-2" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0 border border-gray-700 rounded-lg overflow-hidden">
|
||||||
|
<div className="flex items-center justify-between px-4 py-2 bg-gray-800/60 border-b border-gray-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm font-semibold text-gray-200">
|
||||||
|
{comment.author.displayName}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleDate(comment.id)}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
{expandedDates.has(comment.id)
|
||||||
|
? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
|
||||||
|
: formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{(comment.authorId === authUser?.id || isAdmin) && (
|
||||||
|
<button
|
||||||
|
onClick={() => onDeleteComment(comment.id)}
|
||||||
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||||
|
>
|
||||||
|
<Trash2 size={13} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
|
{injectMentionLinks(comment.body, users)}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Composer */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Avatar name={authUser?.displayName ?? '?'} size="md" />
|
||||||
|
<div className="flex-1 border border-gray-700 rounded-lg overflow-hidden">
|
||||||
|
<div className="flex gap-4 px-4 bg-gray-800/60 border-b border-gray-700">
|
||||||
|
{(['Write', 'Preview'] as const).map((label) => (
|
||||||
|
<button
|
||||||
|
key={label}
|
||||||
|
onClick={() => setPreview(label === 'Preview')}
|
||||||
|
className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
|
||||||
|
(label === 'Preview') === preview
|
||||||
|
? 'border-indigo-500 text-indigo-400'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<form onSubmit={onSubmitComment} className="p-3">
|
||||||
|
{preview ? (
|
||||||
|
<div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
|
||||||
|
{commentBody.trim() ? (
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||||
|
{injectMentionLinks(commentBody, users)}
|
||||||
|
</ReactMarkdown>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-600 italic">Nothing to preview</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mb-3">
|
||||||
|
<MentionTextarea
|
||||||
|
ref={commentTextareaRef}
|
||||||
|
value={commentBody}
|
||||||
|
onChange={setCommentBody}
|
||||||
|
users={users}
|
||||||
|
onSubmit={() =>
|
||||||
|
onSubmitComment({
|
||||||
|
preventDefault: () => {},
|
||||||
|
} as unknown as React.FormEvent)
|
||||||
|
}
|
||||||
|
placeholder="Leave a comment… Markdown & @mentions"
|
||||||
|
rows={4}
|
||||||
|
className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-between items-center border-t border-gray-700 pt-2">
|
||||||
|
<span className="text-xs text-gray-600">Markdown · Ctrl+Enter</span>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting || !commentBody.trim()}
|
||||||
|
className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
||||||
|
>
|
||||||
|
<Send size={13} />
|
||||||
|
Comment
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,354 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { useShortcut } from '../../hooks/useShortcuts';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import { Pencil, X, Check, MessageSquare, ClipboardList, FileText, ArrowLeft } from 'lucide-react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import Layout from '../../components/Layout';
|
||||||
|
import Modal from '../../components/Modal';
|
||||||
|
import SeverityBadge from '../../components/SeverityBadge';
|
||||||
|
import StatusBadge from '../../components/StatusBadge';
|
||||||
|
import CTISelect from '../../components/CTISelect';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import {
|
||||||
|
useTicket,
|
||||||
|
useTicketAudit,
|
||||||
|
useUpdateTicket,
|
||||||
|
useDeleteTicket,
|
||||||
|
useUsers,
|
||||||
|
useAddComment,
|
||||||
|
useDeleteComment,
|
||||||
|
} from '../../api/queries';
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from '@/components/ui/alert-dialog';
|
||||||
|
import type { UpdateTicketInput } from '../../../../shared/schemas/ticket';
|
||||||
|
import TicketComments from './TicketComments';
|
||||||
|
import TicketAuditLog from './TicketAuditLog';
|
||||||
|
import TicketSidebar from './TicketSidebar';
|
||||||
|
|
||||||
|
type Tab = 'overview' | 'comments' | 'audit';
|
||||||
|
|
||||||
|
export default function TicketDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { user: authUser } = useAuth();
|
||||||
|
|
||||||
|
const [tab, setTab] = useState<Tab>('overview');
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const [reroutingCTI, setReroutingCTI] = useState(false);
|
||||||
|
const [commentBody, setCommentBody] = useState('');
|
||||||
|
const [preview, setPreview] = useState(false);
|
||||||
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||||
|
|
||||||
|
const commentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||||
|
const [editForm, setEditForm] = useState({ title: '', overview: '' });
|
||||||
|
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
|
||||||
|
|
||||||
|
// Draft autosave
|
||||||
|
const draftKey = id ? `comment-draft:${id}` : null;
|
||||||
|
useEffect(() => {
|
||||||
|
if (!draftKey) return;
|
||||||
|
const saved = localStorage.getItem(draftKey);
|
||||||
|
if (saved) setCommentBody(saved);
|
||||||
|
}, [draftKey]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!draftKey) return;
|
||||||
|
if (commentBody) localStorage.setItem(draftKey, commentBody);
|
||||||
|
else localStorage.removeItem(draftKey);
|
||||||
|
}, [commentBody, draftKey]);
|
||||||
|
|
||||||
|
const { data: ticket, isLoading } = useTicket(id);
|
||||||
|
const { data: users = [] } = useUsers();
|
||||||
|
const { data: auditLogs = [] } = useTicketAudit(id, tab === 'audit');
|
||||||
|
|
||||||
|
const updateTicket = useUpdateTicket();
|
||||||
|
const deleteTicketMutation = useDeleteTicket();
|
||||||
|
const addComment = useAddComment(id);
|
||||||
|
const deleteCommentMutation = useDeleteComment(id);
|
||||||
|
|
||||||
|
const isAdmin = authUser?.role === 'ADMIN';
|
||||||
|
|
||||||
|
const patch = async (payload: UpdateTicketInput) => {
|
||||||
|
if (!ticket) return;
|
||||||
|
await updateTicket.mutateAsync({ id: ticket.displayId, data: payload });
|
||||||
|
};
|
||||||
|
|
||||||
|
const startEdit = () => {
|
||||||
|
if (!ticket) return;
|
||||||
|
setEditForm({ title: ticket.title, overview: ticket.overview });
|
||||||
|
setEditing(true);
|
||||||
|
setTab('overview');
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveEdit = async () => {
|
||||||
|
await patch({ title: editForm.title, overview: editForm.overview });
|
||||||
|
setEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const startReroute = () => {
|
||||||
|
if (!ticket) return;
|
||||||
|
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
|
||||||
|
setReroutingCTI(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveReroute = async () => {
|
||||||
|
await patch(pendingCTI);
|
||||||
|
setReroutingCTI(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmDeleteTicket = async () => {
|
||||||
|
if (!ticket) return;
|
||||||
|
await deleteTicketMutation.mutateAsync(ticket.displayId);
|
||||||
|
toast.success('Ticket deleted');
|
||||||
|
navigate('/tickets');
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitComment = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!ticket || !commentBody.trim()) return;
|
||||||
|
await addComment.mutateAsync(commentBody.trim());
|
||||||
|
setCommentBody('');
|
||||||
|
setPreview(false);
|
||||||
|
if (draftKey) localStorage.removeItem(draftKey);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteComment = async (commentId: string) => {
|
||||||
|
await deleteCommentMutation.mutateAsync(commentId);
|
||||||
|
};
|
||||||
|
|
||||||
|
useShortcut('e', (e) => {
|
||||||
|
if (!ticket || editing) return;
|
||||||
|
e.preventDefault();
|
||||||
|
startEdit();
|
||||||
|
}, [ticket, editing]);
|
||||||
|
|
||||||
|
useShortcut('r', (e) => {
|
||||||
|
if (!ticket) return;
|
||||||
|
e.preventDefault();
|
||||||
|
setTab('comments');
|
||||||
|
setPreview(false);
|
||||||
|
setTimeout(() => commentTextareaRef.current?.focus(), 40);
|
||||||
|
}, [ticket]);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex items-center justify-center h-full text-gray-600 text-sm">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!ticket) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex items-center justify-center h-full text-gray-600 text-sm">
|
||||||
|
Ticket not found
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const commentCount = ticket.comments?.length ?? 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/tickets')}
|
||||||
|
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
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex flex-col-reverse md:flex-row gap-6 md:items-start">
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
{/* Title card */}
|
||||||
|
<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-500 ml-1">
|
||||||
|
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={startEdit}
|
||||||
|
className="ml-auto text-gray-500 hover:text-gray-300 transition-colors"
|
||||||
|
title="Edit title & overview"
|
||||||
|
>
|
||||||
|
<Pencil size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editing ? (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editForm.title}
|
||||||
|
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
|
||||||
|
className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<h1 className="text-2xl font-bold text-gray-100">{ticket.title}</h1>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs + content */}
|
||||||
|
<div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
|
||||||
|
<div className="flex border-b border-gray-800 px-2">
|
||||||
|
{(
|
||||||
|
[
|
||||||
|
{ 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-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
|
||||||
|
tab === key
|
||||||
|
? 'border-indigo-500 text-indigo-400'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon size={14} />
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tab === 'overview' && (
|
||||||
|
<div className="p-6">
|
||||||
|
{editing ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<textarea
|
||||||
|
value={editForm.overview}
|
||||||
|
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
|
||||||
|
rows={12}
|
||||||
|
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-indigo-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-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<X size={13} /> Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={saveEdit}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
|
||||||
|
>
|
||||||
|
<Check size={13} /> Save changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="prose text-sm text-gray-300">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'comments' && (
|
||||||
|
<TicketComments
|
||||||
|
ticket={ticket}
|
||||||
|
users={users}
|
||||||
|
authUser={authUser}
|
||||||
|
isAdmin={isAdmin}
|
||||||
|
commentBody={commentBody}
|
||||||
|
setCommentBody={setCommentBody}
|
||||||
|
preview={preview}
|
||||||
|
setPreview={setPreview}
|
||||||
|
commentTextareaRef={commentTextareaRef}
|
||||||
|
onSubmitComment={submitComment}
|
||||||
|
onDeleteComment={handleDeleteComment}
|
||||||
|
isSubmitting={addComment.isPending}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'audit' && <TicketAuditLog auditLogs={auditLogs} users={users} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TicketSidebar
|
||||||
|
ticket={ticket}
|
||||||
|
users={users}
|
||||||
|
isAdmin={isAdmin}
|
||||||
|
patch={patch}
|
||||||
|
onReroute={startReroute}
|
||||||
|
onDelete={() => setDeleteOpen(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Delete this ticket?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
{ticket.displayId} · {ticket.title} will be permanently removed along with its
|
||||||
|
comments and audit log. This cannot be undone.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={confirmDeleteTicket}
|
||||||
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
|
||||||
|
{reroutingCTI && (
|
||||||
|
<Modal title="Change Routing" onClose={() => setReroutingCTI(false)} size="lg">
|
||||||
|
<div className="space-y-5">
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
Current:{' '}
|
||||||
|
<span className="text-gray-200">
|
||||||
|
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<CTISelect value={pendingCTI} onChange={setPendingCTI} />
|
||||||
|
<div className="flex justify-end gap-3 pt-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setReroutingCTI(false)}
|
||||||
|
className="px-4 py-2 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={saveReroute}
|
||||||
|
disabled={!pendingCTI.itemId}
|
||||||
|
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
||||||
|
>
|
||||||
|
Save routing
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { format, formatDistanceToNow } from 'date-fns';
|
||||||
|
import { Trash2, Check } from 'lucide-react';
|
||||||
|
import SeverityBadge from '../../components/SeverityBadge';
|
||||||
|
import StatusBadge from '../../components/StatusBadge';
|
||||||
|
import Avatar from '../../components/Avatar';
|
||||||
|
import type { Ticket, User, TicketStatus } from '../../types';
|
||||||
|
import type { UpdateTicketInput } from '../../../../shared/schemas/ticket';
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/popover';
|
||||||
|
|
||||||
|
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' },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface TicketSidebarProps {
|
||||||
|
ticket: Ticket;
|
||||||
|
users: User[];
|
||||||
|
isAdmin: boolean;
|
||||||
|
patch: (payload: UpdateTicketInput) => Promise<void>;
|
||||||
|
onReroute: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TicketSidebar({
|
||||||
|
ticket,
|
||||||
|
users,
|
||||||
|
isAdmin,
|
||||||
|
patch,
|
||||||
|
onReroute,
|
||||||
|
onDelete,
|
||||||
|
}: TicketSidebarProps) {
|
||||||
|
const [statusOpen, setStatusOpen] = useState(false);
|
||||||
|
const [severityOpen, setSeverityOpen] = useState(false);
|
||||||
|
const [assigneeOpen, setAssigneeOpen] = useState(false);
|
||||||
|
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const toggleDate = (key: string) =>
|
||||||
|
setExpandedDates((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(key)) next.delete(key);
|
||||||
|
else next.add(key);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div className="w-full md:w-64 flex-shrink-0 md:sticky md:top-0 space-y-3">
|
||||||
|
<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-500 uppercase tracking-wide">
|
||||||
|
Ticket Summary
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status */}
|
||||||
|
<Popover open={statusOpen} onOpenChange={setStatusOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1.5">Status</p>
|
||||||
|
<StatusBadge status={ticket.status} />
|
||||||
|
</button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent align="start" className="w-56 p-1">
|
||||||
|
{statusOptions.map((s) => (
|
||||||
|
<button
|
||||||
|
key={s.value}
|
||||||
|
onClick={async () => {
|
||||||
|
await patch({ status: s.value });
|
||||||
|
setStatusOpen(false);
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
<StatusBadge status={s.value} />
|
||||||
|
{ticket.status === s.value && (
|
||||||
|
<Check size={13} className="ml-auto text-primary" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{!isAdmin && (
|
||||||
|
<p className="px-2 pt-1 text-[11px] text-muted-foreground">
|
||||||
|
Closing requires admin
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{/* Severity */}
|
||||||
|
<Popover open={severityOpen} onOpenChange={setSeverityOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1.5">Severity</p>
|
||||||
|
<SeverityBadge severity={ticket.severity} />
|
||||||
|
</button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent align="start" className="w-56 p-1">
|
||||||
|
{SEVERITY_OPTIONS.map((s) => (
|
||||||
|
<button
|
||||||
|
key={s.value}
|
||||||
|
onClick={async () => {
|
||||||
|
await patch({ severity: s.value });
|
||||||
|
setSeverityOpen(false);
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
<SeverityBadge severity={s.value} />
|
||||||
|
<span className="text-muted-foreground text-xs">
|
||||||
|
{s.label.split(' — ')[1]}
|
||||||
|
</span>
|
||||||
|
{ticket.severity === s.value && (
|
||||||
|
<Check size={13} className="ml-auto text-primary" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{/* CTI */}
|
||||||
|
<button
|
||||||
|
onClick={onReroute}
|
||||||
|
className="w-full px-4 py-3 text-left space-y-3 hover:bg-gray-800/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1">Category</p>
|
||||||
|
<p className="text-sm text-gray-300">{ticket.category.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1">Type</p>
|
||||||
|
<p className="text-sm text-gray-300">{ticket.type.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1">Issue</p>
|
||||||
|
<p className="text-sm text-gray-300">{ticket.item.name}</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dates */}
|
||||||
|
<div className="px-4 py-3 space-y-2.5">
|
||||||
|
{[
|
||||||
|
{ key: 'created', label: 'Created', date: ticket.createdAt },
|
||||||
|
{ key: 'modified', label: 'Modified', date: ticket.updatedAt },
|
||||||
|
...(ticket.resolvedAt
|
||||||
|
? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }]
|
||||||
|
: []),
|
||||||
|
].map(({ key, label, date }) => (
|
||||||
|
<div key={key}>
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleDate(key)}
|
||||||
|
className="text-xs text-gray-300 hover:text-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
{expandedDates.has(key)
|
||||||
|
? format(new Date(date), 'MMM d, yyyy HH:mm')
|
||||||
|
: formatDistanceToNow(new Date(date), { addSuffix: true })}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Assignee */}
|
||||||
|
<Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1.5">Assignee</p>
|
||||||
|
{ticket.assignee ? (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Avatar name={ticket.assignee.displayName} size="sm" />
|
||||||
|
<span className="text-sm text-gray-300">{ticket.assignee.displayName}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-gray-500">Unassigned</p>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent align="start" className="w-60 p-1">
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
await patch({ assigneeId: null });
|
||||||
|
setAssigneeOpen(false);
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
<span className="text-muted-foreground">Unassigned</span>
|
||||||
|
{!ticket.assigneeId && <Check size={13} className="ml-auto text-primary" />}
|
||||||
|
</button>
|
||||||
|
<div className="max-h-64 overflow-auto">
|
||||||
|
{users.map((u) => (
|
||||||
|
<button
|
||||||
|
key={u.id}
|
||||||
|
onClick={async () => {
|
||||||
|
await patch({ assigneeId: u.id });
|
||||||
|
setAssigneeOpen(false);
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
<Avatar name={u.displayName} size="sm" />
|
||||||
|
<span>{u.displayName}</span>
|
||||||
|
{ticket.assigneeId === u.id && (
|
||||||
|
<Check size={13} className="ml-auto text-primary" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{/* Requester */}
|
||||||
|
<div className="px-4 py-3">
|
||||||
|
<p className="text-xs font-medium text-gray-500 mb-1.5">Requester</p>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Avatar name={ticket.createdBy.displayName} size="sm" />
|
||||||
|
<span className="text-sm text-gray-300">{ticket.createdBy.displayName}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
|
||||||
|
<button
|
||||||
|
onClick={onDelete}
|
||||||
|
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
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default } from './TicketDetail';
|
||||||
Reference in New Issue
Block a user