Dark theme, roles overhaul, modal New Ticket, My Tickets page, and more

- Dark UI across all pages and components (gray-950/900/800 palette) - New Ticket is now a centered modal (triggered from sidebar), not a separate page - Add USER role: view and comment only; AGENT and SERVICE can create/edit tickets - Only admins can set ticket status to CLOSED (enforced server + UI) - Add My Tickets page (/my-tickets) showing tickets assigned to current user - Add queue (category) filter to Dashboard - Audit log entries are clickable to expand detail; comment body shown as markdown - Resolved date now includes time (HH:mm) in ticket sidebar - Store comment body in audit log detail for COMMENT_ADDED and COMMENT_DELETED - Clarify role descriptions in Admin Users modal - Remove CI/CD section from README; add full API reference documentation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 23:17:14 -04:00
parent d8dc5b3ded
commit 725f91578d
21 changed files with 821 additions and 388 deletions
@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+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 } from '../types'
+import { useAuth } from '../contexts/AuthContext'
+
+export default function MyTickets() {
+  const { user } = useAuth()
+  const [tickets, setTickets] = useState<Ticket[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!user) return
+    api
+      .get<Ticket[]>('/tickets', { params: { assigneeId: user.id } })
+      .then((r) => setTickets(r.data))
+      .finally(() => setLoading(false))
+  }, [user])
+
+  return (
+    <Layout title="My Tickets">
+      {loading ? (
+        <div className="text-center py-16 text-gray-600 text-sm">Loading...</div>
+      ) : tickets.length === 0 ? (
+        <div className="text-center py-16 text-gray-600 text-sm">
+          No tickets assigned to you
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          {tickets.map((ticket) => (
+            <Link
+              key={ticket.id}
+              to={`/tickets/${ticket.displayId}`}
+              className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-blue-500/50 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-600'
+                }`}
+              />
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-0.5 flex-wrap">
+                  <span className="text-xs font-mono font-medium text-gray-600">
+                    {ticket.displayId}
+                  </span>
+                  <SeverityBadge severity={ticket.severity} />
+                  <StatusBadge status={ticket.status} />
+                  <span className="text-xs text-gray-600">
+                    {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+                  </span>
+                </div>
+                <p className="text-sm font-medium text-gray-200 truncate group-hover:text-blue-400">
+                  {ticket.title}
+                </p>
+              </div>
+
+              <div className="flex items-center gap-3 flex-shrink-0">
+                <span className="text-xs text-gray-600">
+                  {ticket._count?.comments ?? 0} comments
+                </span>
+                <span className="text-xs text-gray-600">
+                  {formatDistanceToNow(new Date(ticket.createdAt), { addSuffix: true })}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </Layout>
+  )
+}