josh/TicketingSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ESLint + Prettier + EditorConfig tooling at repo root

Browse Source 
v1.0 Phase 1.1 — repo-wide lint/format baseline.

- eslint.config.mjs (flat config) lints server, client, shared
- .prettierrc.json, .prettierignore, .editorconfig, .nvmrc
- Root package.json holds shared devDeps; per-package scripts keep
  their typecheck + test runners
- Fix 7 lint issues surfaced by the baseline run:
  - TicketDetail.tsx: replace ternary-with-side-effects with if/else
  - admin/Users.tsx: escape apostrophe in JSX
  - errorHandler.ts: typed err as unknown with ErrorLike refinement
  - users.ts: Prisma.UserUpdateInput instead of Record<string, any>
  - seed.ts: drop unused goddard binding
- Run prettier across tracked sources for a clean formatting baseline
This commit is contained in:
Josh Wright
2026-04-18 14:47:34 -04:00
parent 2a6090e473
commit 27d2ab0f0d
48 changed files with 14460 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/TicketDetail.tsx
+176 -152
View File
@@ -1,24 +1,32 @@
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { format, formatDistanceToNow } from 'date-fns'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
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 api from '../api/client'
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 { Ticket, TicketStatus, User, Comment, AuditLog } from '../types'
import { useAuth } from '../contexts/AuthContext'
Pencil,
Trash2,
Send,
X,
Check,
MessageSquare,
ClipboardList,
FileText,
ArrowLeft,
ChevronDown,
ChevronRight,
} from 'lucide-react';
import api from '../api/client';
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 { Ticket, TicketStatus, User, Comment, AuditLog } from '../types';
import { useAuth } from '../contexts/AuthContext';
type Tab = 'overview' | 'comments' | 'audit'
type Tab = 'overview' | 'comments' | 'audit';
const SEVERITY_OPTIONS = [
{ value: 1, label: 'SEV 1 — Critical' },
@@ -26,7 +34,7 @@ const SEVERITY_OPTIONS = [
{ value: 3, label: 'SEV 3 — Medium' },
{ value: 4, label: 'SEV 4 — Low' },
{ value: 5, label: 'SEV 5 — Minimal' },
]
];
const AUDIT_LABELS: Record<string, string> = {
CREATED: 'created this ticket',
@@ -38,7 +46,7 @@ const AUDIT_LABELS: Record<string, string> = {
OVERVIEW_CHANGED: 'updated overview',
COMMENT_ADDED: 'added a comment',
COMMENT_DELETED: 'deleted a comment',
}
};
const AUDIT_COLORS: Record<string, string> = {
CREATED: 'bg-green-500',
@@ -50,134 +58,134 @@ const AUDIT_COLORS: Record<string, string> = {
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 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 { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { user: authUser } = useAuth();
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 [reroutingCTI, setReroutingCTI] = useState(false)
const [commentBody, setCommentBody] = useState('')
const [submittingComment, setSubmittingComment] = useState(false)
const [preview, setPreview] = useState(false)
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
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 [reroutingCTI, setReroutingCTI] = useState(false);
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 [editingStatus, setEditingStatus] = useState(false)
const [editingSeverity, setEditingSeverity] = useState(false)
const [editingAssignee, setEditingAssignee] = useState(false)
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set())
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set())
const [editForm, setEditForm] = useState({ title: '', overview: '' });
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
const [editingStatus, setEditingStatus] = useState(false);
const [editingSeverity, setEditingSeverity] = useState(false);
const [editingAssignee, setEditingAssignee] = useState(false);
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());
const toggleDate = (key: string) =>
setExpandedDates((prev) => {
const next = new Set(prev)
next.has(key) ? next.delete(key) : next.add(key)
return next
})
const next = new Set(prev);
if (next.has(key)) next.delete(key);
else next.add(key);
return next;
});
const toggleCommentDate = (id: string) =>
setExpandedCommentDates((prev) => {
const next = new Set(prev)
next.has(id) ? next.delete(id) : next.add(id)
return next
})
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
const isAdmin = authUser?.role === 'ADMIN'
const isAdmin = authUser?.role === 'ADMIN';
useEffect(() => {
Promise.all([
api.get<Ticket>(`/tickets/${id}`),
api.get<User[]>('/users'),
]).then(([tRes, uRes]) => {
setTicket(tRes.data)
setUsers(uRes.data)
}).finally(() => setLoading(false))
}, [id])
Promise.all([api.get<Ticket>(`/tickets/${id}`), api.get<User[]>('/users')])
.then(([tRes, uRes]) => {
setTicket(tRes.data);
setUsers(uRes.data);
})
.finally(() => setLoading(false));
}, [id]);
useEffect(() => {
if (tab === 'audit' && ticket) {
api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data));
}
}, [tab, ticket, id])
}, [tab, ticket, id]);
const patch = async (payload: Record<string, unknown>) => {
if (!ticket) return
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
setTicket(res.data)
return res.data
}
if (!ticket) return;
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload);
setTicket(res.data);
return res.data;
};
const startEdit = () => {
if (!ticket) return
setEditForm({ title: ticket.title, overview: ticket.overview })
setEditing(true)
setTab('overview')
}
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)
}
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)
}
if (!ticket) return;
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
setReroutingCTI(true);
};
const saveReroute = async () => {
await patch(pendingCTI)
setReroutingCTI(false)
}
await patch(pendingCTI);
setReroutingCTI(false);
};
const deleteTicket = async () => {
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
await api.delete(`/tickets/${ticket.displayId}`)
navigate('/')
}
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return;
await api.delete(`/tickets/${ticket.displayId}`);
navigate('/');
};
const submitComment = async (e: React.FormEvent) => {
e.preventDefault()
if (!ticket || !commentBody.trim()) return
setSubmittingComment(true)
e.preventDefault();
if (!ticket || !commentBody.trim()) return;
setSubmittingComment(true);
try {
const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
body: commentBody.trim(),
})
setTicket((t) => t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t)
setCommentBody('')
setPreview(false)
});
setTicket((t) => (t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t));
setCommentBody('');
setPreview(false);
} finally {
setSubmittingComment(false)
setSubmittingComment(false);
}
}
};
const deleteComment = async (commentId: string) => {
if (!ticket) return
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
}
if (!ticket) return;
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`);
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
})
}
const next = new Set(prev);
if (next.has(logId)) next.delete(logId);
else next.add(logId);
return next;
});
};
if (loading) {
return (
@@ -186,7 +194,7 @@ export default function TicketDetail() {
Loading...
</div>
</Layout>
)
);
}
if (!ticket) {
@@ -196,11 +204,11 @@ export default function TicketDetail() {
Ticket not found
</div>
</Layout>
)
);
}
const commentCount = ticket.comments?.length ?? 0
const agentUsers = users.filter((u) => u.role !== 'SERVICE')
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 }[] = [
@@ -208,7 +216,7 @@ export default function TicketDetail() {
{ value: 'IN_PROGRESS', label: 'In Progress' },
{ value: 'RESOLVED', label: 'Resolved' },
...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
]
];
return (
<Layout>
@@ -264,7 +272,11 @@ export default function TicketDetail() {
{(
[
{ key: 'overview', icon: FileText, label: 'Overview' },
{ key: 'comments', icon: MessageSquare, label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}` },
{
key: 'comments',
icon: MessageSquare,
label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}`,
},
{ key: 'audit', icon: ClipboardList, label: 'Audit Log' },
] as const
).map(({ key, icon: Icon, label }) => (
@@ -311,9 +323,7 @@ export default function TicketDetail() {
</div>
) : (
<div className="prose text-sm text-gray-300">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{ticket.overview}
</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
</div>
)}
</div>
@@ -328,7 +338,7 @@ export default function TicketDetail() {
{/* Avatar + spine */}
<div className="flex flex-col items-center">
<Avatar name={comment.author.displayName} size="md" />
{i < (ticket.comments!.length - 1) && (
{i < ticket.comments!.length - 1 && (
<div className="flex-1 w-px bg-gray-800 mt-2" />
)}
</div>
@@ -345,7 +355,9 @@ export default function TicketDetail() {
>
{expandedCommentDates.has(comment.id)
? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
: formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
: formatDistanceToNow(new Date(comment.createdAt), {
addSuffix: true,
})}
</button>
</div>
{(comment.authorId === authUser?.id || isAdmin) && (
@@ -358,17 +370,13 @@ export default function TicketDetail() {
)}
</div>
<div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{comment.body}
</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{comment.body}</ReactMarkdown>
</div>
</div>
</div>
))
) : (
<div className="py-12 text-center text-sm text-gray-600">
No comments yet
</div>
<div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
)}
{/* Composer */}
@@ -393,10 +401,11 @@ export default function TicketDetail() {
<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]}>{commentBody}</ReactMarkdown>
: <span className="text-gray-600 italic">Nothing to preview</span>
}
{commentBody.trim() ? (
<ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
) : (
<span className="text-gray-600 italic">Nothing to preview</span>
)}
</div>
) : (
<textarea
@@ -407,8 +416,8 @@ export default function TicketDetail() {
className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none mb-3"
onKeyDown={(e) => {
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
submitComment(e as unknown as React.FormEvent)
e.preventDefault();
submitComment(e as unknown as React.FormEvent);
}
}}
/>
@@ -438,15 +447,17 @@ export default function TicketDetail() {
) : (
<div>
{auditLogs.map((log, i) => {
const hasDetail = !!log.detail
const isExpanded = expandedLogs.has(log.id)
const isComment = COMMENT_ACTIONS.has(log.action)
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'}`} />
<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" />
)}
@@ -459,11 +470,17 @@ export default function TicketDetail() {
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()}
<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} />}
{isExpanded ? (
<ChevronDown size={13} />
) : (
<ChevronRight size={13} />
)}
</span>
)}
</p>
@@ -490,7 +507,7 @@ export default function TicketDetail() {
)}
</div>
</div>
)
);
})}
</div>
)}
@@ -501,11 +518,12 @@ export default function TicketDetail() {
{/* ── Sidebar ── */}
<div className="w-64 flex-shrink-0 sticky 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>
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
Ticket Summary
</p>
</div>
{/* Status */}
@@ -550,7 +568,9 @@ export default function TicketDetail() {
{[
{ key: 'created', label: 'Created', date: ticket.createdAt },
{ key: 'modified', label: 'Modified', date: ticket.updatedAt },
...(ticket.resolvedAt ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }] : []),
...(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>
@@ -612,8 +632,8 @@ export default function TicketDetail() {
<button
key={s.value}
onClick={async () => {
await patch({ status: s.value })
setEditingStatus(false)
await patch({ status: s.value });
setEditingStatus(false);
}}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
ticket.status === s.value
@@ -639,8 +659,8 @@ export default function TicketDetail() {
<button
key={s.value}
onClick={async () => {
await patch({ severity: s.value })
setEditingSeverity(false)
await patch({ severity: s.value });
setEditingSeverity(false);
}}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
ticket.severity === s.value
@@ -650,7 +670,9 @@ export default function TicketDetail() {
>
<SeverityBadge severity={s.value} />
<span className="text-sm text-gray-400">{s.label.split(' — ')[1]}</span>
{ticket.severity === s.value && <Check size={14} className="ml-auto text-blue-400" />}
{ticket.severity === s.value && (
<Check size={14} className="ml-auto text-blue-400" />
)}
</button>
))}
</div>
@@ -662,8 +684,8 @@ export default function TicketDetail() {
<div className="space-y-2">
<button
onClick={async () => {
await patch({ assigneeId: null })
setEditingAssignee(false)
await patch({ assigneeId: null });
setEditingAssignee(false);
}}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
!ticket.assigneeId
@@ -678,8 +700,8 @@ export default function TicketDetail() {
<button
key={u.id}
onClick={async () => {
await patch({ assigneeId: u.id })
setEditingAssignee(false)
await patch({ assigneeId: u.id });
setEditingAssignee(false);
}}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
ticket.assigneeId === u.id
@@ -689,7 +711,9 @@ export default function TicketDetail() {
>
<Avatar name={u.displayName} size="sm" />
<span className="text-sm text-gray-300">{u.displayName}</span>
{ticket.assigneeId === u.id && <Check size={14} className="ml-auto text-blue-400" />}
{ticket.assigneeId === u.id && (
<Check size={14} className="ml-auto text-blue-400" />
)}
</button>
))}
</div>
@@ -725,5 +749,5 @@ export default function TicketDetail() {
</Modal>
)}
</Layout>
)
);
}