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>
2026-03-30 19:38:32 -04:00
commit 21894fad7a
50 changed files with 3293 additions and 0 deletions
@@ -0,0 +1,161 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '../api/client'
+import Layout from '../components/Layout'
+import CTISelect from '../components/CTISelect'
+import { User } from '../types'
+
+export default function NewTicket() {
+  const navigate = useNavigate()
+  const [users, setUsers] = useState<User[]>([])
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const [form, setForm] = useState({
+    title: '',
+    overview: '',
+    severity: 3,
+    assigneeId: '',
+    categoryId: '',
+    typeId: '',
+    itemId: '',
+  })
+
+  useEffect(() => {
+    api.get<User[]>('/users').then((r) => setUsers(r.data))
+  }, [])
+
+  const handleCTI = (cti: { categoryId: string; typeId: string; itemId: string }) => {
+    setForm((f) => ({ ...f, ...cti }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.categoryId || !form.typeId || !form.itemId) {
+      setError('Please select a Category, Type, and Item')
+      return
+    }
+    setError('')
+    setSubmitting(true)
+    try {
+      const payload: Record<string, unknown> = {
+        title: form.title,
+        overview: form.overview,
+        severity: form.severity,
+        categoryId: form.categoryId,
+        typeId: form.typeId,
+        itemId: form.itemId,
+      }
+      if (form.assigneeId) payload.assigneeId = form.assigneeId
+
+      const res = await api.post('/tickets', payload)
+      navigate(`/tickets/${res.data.id}`)
+    } catch {
+      setError('Failed to create ticket')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  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'
+  const labelClass = 'block text-sm font-medium text-gray-700 mb-1'
+
+  return (
+    <Layout title="New Ticket">
+      <div className="max-w-2xl">
+        <form onSubmit={handleSubmit} className="bg-white border border-gray-200 rounded-xl p-6 space-y-5">
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-3 rounded-lg">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className={labelClass}>Title</label>
+            <input
+              type="text"
+              value={form.title}
+              onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+              required
+              className={inputClass}
+              placeholder="Brief description of the issue"
+            />
+          </div>
+
+          <div>
+            <label className={labelClass}>Overview</label>
+            <textarea
+              value={form.overview}
+              onChange={(e) => setForm((f) => ({ ...f, overview: e.target.value }))}
+              required
+              rows={4}
+              className={inputClass}
+              placeholder="Detailed description..."
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className={labelClass}>Severity</label>
+              <select
+                value={form.severity}
+                onChange={(e) => setForm((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={labelClass}>Assignee</label>
+              <select
+                value={form.assigneeId}
+                onChange={(e) => setForm((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={labelClass}>Routing (CTI)</label>
+            <CTISelect
+              value={{ categoryId: form.categoryId, typeId: form.typeId, itemId: form.itemId }}
+              onChange={handleCTI}
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
+              className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            >
+              {submitting ? 'Creating...' : 'Create Ticket'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </Layout>
+  )
+}