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/Dashboard.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Link } from 'react-router-dom'
+import { Plus, Search } from 'lucide-react'
+import { formatDistanceToNow } from 'date-fns'
+import api from '../api/client'
+import Layout from '../components/Layout'
+import SeverityBadge from '../components/SeverityBadge'
+import StatusBadge from '../components/StatusBadge'
+import { Ticket, TicketStatus } from '../types'
+
+const STATUSES: { value: TicketStatus | ''; label: string }[] = [
+  { value: '', label: 'All Statuses' },
+  { value: 'OPEN', label: 'Open' },
+  { value: 'IN_PROGRESS', label: 'In Progress' },
+  { value: 'RESOLVED', label: 'Resolved' },
+  { value: 'CLOSED', label: 'Closed' },
+]
+
+export default function Dashboard() {
+  const [tickets, setTickets] = useState<Ticket[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [status, setStatus] = useState<TicketStatus | ''>('')
+  const [severity, setSeverity] = useState('')
+
+  const fetchTickets = useCallback(() => {
+    setLoading(true)
+    const params: Record<string, string> = {}
+    if (status) params.status = status
+    if (severity) params.severity = severity
+    if (search) params.search = search
+    api
+      .get<Ticket[]>('/tickets', { params })
+      .then((r) => setTickets(r.data))
+      .finally(() => setLoading(false))
+  }, [status, severity, search])
+
+  useEffect(() => {
+    const t = setTimeout(fetchTickets, 300)
+    return () => clearTimeout(t)
+  }, [fetchTickets])
+
+  return (
+    <Layout
+      title="Tickets"
+      action={
+        <Link
+          to="/tickets/new"
+          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
+        >
+          <Plus size={15} />
+          New Ticket
+        </Link>
+      }
+    >
+      {/* Filters */}
+      <div className="flex gap-3 mb-5">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={14} />
+          <input
+            type="text"
+            placeholder="Search tickets..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9 pr-4 py-2 border border-gray-300 rounded-lg w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <select
+          value={status}
+          onChange={(e) => setStatus(e.target.value as TicketStatus | '')}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          {STATUSES.map((s) => (
+            <option key={s.value} value={s.value}>
+              {s.label}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={severity}
+          onChange={(e) => setSeverity(e.target.value)}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <option value="">All Severities</option>
+          {[1, 2, 3, 4, 5].map((s) => (
+            <option key={s} value={s}>
+              SEV {s}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Ticket list */}
+      {loading ? (
+        <div className="text-center py-16 text-gray-400 text-sm">Loading...</div>
+      ) : tickets.length === 0 ? (
+        <div className="text-center py-16 text-gray-400 text-sm">No tickets found</div>
+      ) : (
+        <div className="space-y-2">
+          {tickets.map((ticket) => (
+            <Link
+              key={ticket.id}
+              to={`/tickets/${ticket.id}`}
+              className="flex items-center gap-4 bg-white border border-gray-200 rounded-lg px-4 py-3 hover:border-blue-400 hover:shadow-sm transition-all group"
+            >
+              {/* Severity stripe */}
+              <div
+                className={`w-1 self-stretch rounded-full flex-shrink-0 ${
+                  ticket.severity === 1
+                    ? 'bg-red-500'
+                    : ticket.severity === 2
+                    ? 'bg-orange-400'
+                    : ticket.severity === 3
+                    ? 'bg-yellow-400'
+                    : ticket.severity === 4
+                    ? 'bg-blue-400'
+                    : 'bg-gray-300'
+                }`}
+              />
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-0.5">
+                  <SeverityBadge severity={ticket.severity} />
+                  <StatusBadge status={ticket.status} />
+                  <span className="text-xs text-gray-400">
+                    {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+                  </span>
+                </div>
+                <p className="text-sm font-medium text-gray-900 truncate group-hover:text-blue-700">
+                  {ticket.title}
+                </p>
+                <p className="text-xs text-gray-400 truncate mt-0.5">{ticket.overview}</p>
+              </div>
+
+              <div className="text-right text-xs text-gray-400 flex-shrink-0 space-y-0.5">
+                <div className="font-medium text-gray-600">
+                  {ticket.assignee?.displayName ?? 'Unassigned'}
+                </div>
+                <div>{ticket._count?.comments ?? 0} comments</div>
+                <div>{formatDistanceToNow(new Date(ticket.createdAt), { addSuffix: true })}</div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </Layout>
+  )
+}