Initial commit: TicketingSystem

Internal ticketing app with CTI routing, severity levels, and n8n integration.

Stack: Express + TypeScript + Prisma + PostgreSQL / React + Vite + Tailwind
- JWT auth for users, API key auth for service accounts (Goddard/n8n)
- CTI hierarchy (Category > Type > Item) for ticket routing
- Severity 1-5, auto-close resolved tickets after 14 days
- Gitea Actions CI/CD building separate server/client images
- Production docker-compose.yml with Traefik integration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/pages/TicketDetail.tsx

@@ -0,0 +1,391 @@
+import { useState, useEffect, useRef } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { format } from 'date-fns'
+import { Pencil, Trash2, Send, X, Check } from 'lucide-react'
+import api from '../api/client'
+import Layout from '../components/Layout'
+import SeverityBadge from '../components/SeverityBadge'
+import StatusBadge from '../components/StatusBadge'
+import CTISelect from '../components/CTISelect'
+import { Ticket, TicketStatus, User, Comment } from '../types'
+import { useAuth } from '../contexts/AuthContext'
+
+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' },
+]
+
+export default function TicketDetail() {
+  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 [loading, setLoading] = useState(true)
+  const [editing, setEditing] = useState(false)
+  const [commentBody, setCommentBody] = useState('')
+  const [submittingComment, setSubmittingComment] = useState(false)
+  const commentRef = useRef<HTMLTextAreaElement>(null)
+
+  const [editForm, setEditForm] = useState({
+    title: '',
+    overview: '',
+    severity: 3,
+    assigneeId: '',
+    categoryId: '',
+    typeId: '',
+    itemId: '',
+  })
+
+  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])
+
+  const startEdit = () => {
+    if (!ticket) return
+    setEditForm({
+      title: ticket.title,
+      overview: ticket.overview,
+      severity: ticket.severity,
+      assigneeId: ticket.assigneeId ?? '',
+      categoryId: ticket.categoryId,
+      typeId: ticket.typeId,
+      itemId: ticket.itemId,
+    })
+    setEditing(true)
+  }
+
+  const saveEdit = async () => {
+    if (!ticket) return
+    const payload: Record<string, unknown> = {
+      title: editForm.title,
+      overview: editForm.overview,
+      severity: editForm.severity,
+      categoryId: editForm.categoryId,
+      typeId: editForm.typeId,
+      itemId: editForm.itemId,
+      assigneeId: editForm.assigneeId || null,
+    }
+    const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, payload)
+    setTicket(res.data)
+    setEditing(false)
+  }
+
+  const updateStatus = async (status: TicketStatus) => {
+    if (!ticket) return
+    const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, { status })
+    setTicket(res.data)
+  }
+
+  const updateAssignee = async (assigneeId: string) => {
+    if (!ticket) return
+    const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, {
+      assigneeId: assigneeId || null,
+    })
+    setTicket(res.data)
+  }
+
+  const deleteTicket = async () => {
+    if (!ticket || !confirm('Delete this ticket?')) return
+    await api.delete(`/tickets/${ticket.id}`)
+    navigate('/')
+  }
+
+  const submitComment = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!ticket || !commentBody.trim()) return
+    setSubmittingComment(true)
+    try {
+      const res = await api.post<Comment>(`/tickets/${ticket.id}/comments`, {
+        body: commentBody.trim(),
+      })
+      setTicket((t) =>
+        t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t
+      )
+      setCommentBody('')
+    } finally {
+      setSubmittingComment(false)
+    }
+  }
+
+  const deleteComment = async (commentId: string) => {
+    if (!ticket) return
+    await api.delete(`/tickets/${ticket.id}/comments/${commentId}`)
+    setTicket((t) =>
+      t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t
+    )
+  }
+
+  const inputClass =
+    'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+
+  if (loading) {
+    return (
+      <Layout>
+        <div className="text-center py-16 text-gray-400 text-sm">Loading...</div>
+      </Layout>
+    )
+  }
+
+  if (!ticket) {
+    return (
+      <Layout>
+        <div className="text-center py-16 text-gray-400 text-sm">Ticket not found</div>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout
+      title={ticket.title}
+      action={
+        authUser?.role === 'ADMIN' ? (
+          <button
+            onClick={deleteTicket}
+            className="flex items-center gap-2 text-sm text-red-600 hover:text-red-800 border border-red-200 hover:border-red-400 px-3 py-1.5 rounded-lg transition-colors"
+          >
+            <Trash2 size={14} />
+            Delete
+          </button>
+        ) : undefined
+      }
+    >
+      <div className="max-w-3xl space-y-5">
+        {/* Ticket card */}
+        <div className="bg-white border border-gray-200 rounded-xl">
+          {/* Header bar */}
+          <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
+            <div className="flex items-center gap-2">
+              <SeverityBadge severity={ticket.severity} />
+              <StatusBadge status={ticket.status} />
+              {!editing && (
+                <span className="text-xs text-gray-400">
+                  {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+                </span>
+              )}
+            </div>
+            {!editing ? (
+              <button
+                onClick={startEdit}
+                className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-800 border border-gray-200 hover:border-gray-400 px-2.5 py-1 rounded-lg transition-colors"
+              >
+                <Pencil size={12} />
+                Edit
+              </button>
+            ) : (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setEditing(false)}
+                  className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-2.5 py-1 rounded-lg transition-colors"
+                >
+                  <X size={12} />
+                  Cancel
+                </button>
+                <button
+                  onClick={saveEdit}
+                  className="flex items-center gap-1.5 text-xs bg-blue-600 text-white px-2.5 py-1 rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  <Check size={12} />
+                  Save
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div className="p-5 space-y-4">
+            {editing ? (
+              <>
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Title</label>
+                  <input
+                    type="text"
+                    value={editForm.title}
+                    onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
+                    className={inputClass}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Overview</label>
+                  <textarea
+                    value={editForm.overview}
+                    onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
+                    rows={4}
+                    className={inputClass}
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 mb-1">Severity</label>
+                    <select
+                      value={editForm.severity}
+                      onChange={(e) => setEditForm((f) => ({ ...f, severity: Number(e.target.value) }))}
+                      className={inputClass}
+                    >
+                      <option value={1}>SEV 1 — Critical</option>
+                      <option value={2}>SEV 2 — High</option>
+                      <option value={3}>SEV 3 — Medium</option>
+                      <option value={4}>SEV 4 — Low</option>
+                      <option value={5}>SEV 5 — Minimal</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
+                    <select
+                      value={editForm.assigneeId}
+                      onChange={(e) => setEditForm((f) => ({ ...f, assigneeId: e.target.value }))}
+                      className={inputClass}
+                    >
+                      <option value="">Unassigned</option>
+                      {users
+                        .filter((u) => u.role !== 'SERVICE')
+                        .map((u) => (
+                          <option key={u.id} value={u.id}>
+                            {u.displayName}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Routing (CTI)</label>
+                  <CTISelect
+                    value={{ categoryId: editForm.categoryId, typeId: editForm.typeId, itemId: editForm.itemId }}
+                    onChange={(cti) => setEditForm((f) => ({ ...f, ...cti }))}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <p className="text-sm text-gray-700 whitespace-pre-wrap">{ticket.overview}</p>
+
+                {/* Quick controls */}
+                <div className="grid grid-cols-2 gap-4 pt-2">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 mb-1">Status</label>
+                    <select
+                      value={ticket.status}
+                      onChange={(e) => updateStatus(e.target.value as TicketStatus)}
+                      className={inputClass}
+                    >
+                      {STATUS_OPTIONS.map((s) => (
+                        <option key={s.value} value={s.value}>
+                          {s.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
+                    <select
+                      value={ticket.assigneeId ?? ''}
+                      onChange={(e) => updateAssignee(e.target.value)}
+                      className={inputClass}
+                    >
+                      <option value="">Unassigned</option>
+                      {users
+                        .filter((u) => u.role !== 'SERVICE')
+                        .map((u) => (
+                          <option key={u.id} value={u.id}>
+                            {u.displayName}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Metadata footer */}
+          <div className="px-5 py-3 bg-gray-50 rounded-b-xl border-t border-gray-100 flex items-center gap-6 text-xs text-gray-400">
+            <span>Created by <strong className="text-gray-600">{ticket.createdBy.displayName}</strong></span>
+            <span>{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</span>
+            {ticket.resolvedAt && (
+              <span>Resolved {format(new Date(ticket.resolvedAt), 'MMM d, yyyy')}</span>
+            )}
+            <span>Updated {format(new Date(ticket.updatedAt), 'MMM d, yyyy HH:mm')}</span>
+          </div>
+        </div>
+
+        {/* Comments */}
+        <div className="bg-white border border-gray-200 rounded-xl">
+          <div className="px-5 py-3 border-b border-gray-100">
+            <h3 className="text-sm font-semibold text-gray-700">
+              Comments ({ticket.comments?.length ?? 0})
+            </h3>
+          </div>
+
+          {ticket.comments && ticket.comments.length > 0 ? (
+            <div className="divide-y divide-gray-100">
+              {ticket.comments.map((comment) => (
+                <div key={comment.id} className="px-5 py-4 group">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-xs font-medium text-gray-700">
+                          {comment.author.displayName}
+                        </span>
+                        <span className="text-xs text-gray-400">
+                          {format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')}
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-700 whitespace-pre-wrap">{comment.body}</p>
+                    </div>
+                    {(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
+                      <button
+                        onClick={() => deleteComment(comment.id)}
+                        className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all flex-shrink-0"
+                      >
+                        <Trash2 size={13} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="px-5 py-8 text-center text-xs text-gray-400">No comments yet</div>
+          )}
+
+          {/* Comment form */}
+          <form onSubmit={submitComment} className="px-5 py-4 border-t border-gray-100">
+            <textarea
+              ref={commentRef}
+              value={commentBody}
+              onChange={(e) => setCommentBody(e.target.value)}
+              placeholder="Add a comment..."
+              rows={3}
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault()
+                  submitComment(e as unknown as React.FormEvent)
+                }
+              }}
+            />
+            <div className="flex justify-between items-center mt-2">
+              <span className="text-xs text-gray-400">Ctrl+Enter to submit</span>
+              <button
+                type="submit"
+                disabled={submittingComment || !commentBody.trim()}
+                className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              >
+                <Send size={12} />
+                Comment
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Layout>
+  )
+}