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>

client/src/pages/Dashboard.tsx

@@ -1,13 +1,13 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Link } from 'react-router-dom'
-import { Plus, Search } from 'lucide-react'
+import { 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 Avatar from '../components/Avatar'
-import { Ticket, TicketStatus } from '../types'
+import { Ticket, TicketStatus, Category } from '../types'
 
 const STATUSES: { value: TicketStatus | ''; label: string }[] = [
   { value: '', label: 'All Statuses' },
@@ -17,24 +17,34 @@ const STATUSES: { value: TicketStatus | ''; label: string }[] = [
   { value: 'CLOSED', label: 'Closed' },
 ]
 
+const selectClass =
+  'bg-gray-800 border border-gray-700 text-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+
 export default function Dashboard() {
   const [tickets, setTickets] = useState<Ticket[]>([])
+  const [categories, setCategories] = useState<Category[]>([])
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
   const [status, setStatus] = useState<TicketStatus | ''>('')
   const [severity, setSeverity] = useState('')
+  const [categoryId, setCategoryId] = useState('')
+
+  useEffect(() => {
+    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data))
+  }, [])
 
   const fetchTickets = useCallback(() => {
     setLoading(true)
     const params: Record<string, string> = {}
     if (status) params.status = status
     if (severity) params.severity = severity
+    if (categoryId) params.categoryId = categoryId
     if (search) params.search = search
     api
       .get<Ticket[]>('/tickets', { params })
       .then((r) => setTickets(r.data))
       .finally(() => setLoading(false))
-  }, [status, severity, search])
+  }, [status, severity, categoryId, search])
 
   useEffect(() => {
     const t = setTimeout(fetchTickets, 300)
@@ -42,35 +52,24 @@ export default function Dashboard() {
   }, [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>
-      }
-    >
+    <Layout title="All Tickets">
       {/* 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} />
+      <div className="flex gap-3 mb-5 flex-wrap">
+        <div className="relative flex-1 min-w-48 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" 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"
+            className="pl-9 pr-4 py-2 bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           />
         </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"
+          className={selectClass}
         >
           {STATUSES.map((s) => (
             <option key={s.value} value={s.value}>
@@ -82,7 +81,7 @@ export default function Dashboard() {
         <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"
+          className={selectClass}
         >
           <option value="">All Severities</option>
           {[1, 2, 3, 4, 5].map((s) => (
@@ -91,20 +90,33 @@ export default function Dashboard() {
             </option>
           ))}
         </select>
+
+        <select
+          value={categoryId}
+          onChange={(e) => setCategoryId(e.target.value)}
+          className={selectClass}
+        >
+          <option value="">All Queues</option>
+          {categories.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
       </div>
 
       {/* Ticket list */}
       {loading ? (
-        <div className="text-center py-16 text-gray-400 text-sm">Loading...</div>
+        <div className="text-center py-16 text-gray-600 text-sm">Loading...</div>
       ) : tickets.length === 0 ? (
-        <div className="text-center py-16 text-gray-400 text-sm">No tickets found</div>
+        <div className="text-center py-16 text-gray-600 text-sm">No tickets found</div>
       ) : (
-        <div className="space-y-2">
+        <div className="space-y-1.5">
           {tickets.map((ticket) => (
             <Link
               key={ticket.id}
               to={`/tickets/${ticket.displayId}`}
-              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"
+              className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-blue-500/50 hover:bg-gray-900/80 transition-all group"
             >
               {/* Severity stripe */}
               <div
@@ -117,40 +129,39 @@ export default function Dashboard() {
                     ? 'bg-yellow-400'
                     : ticket.severity === 4
                     ? 'bg-blue-400'
-                    : 'bg-gray-300'
+                    : 'bg-gray-600'
                 }`}
               />
 
               <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2 mb-0.5">
-                  <span className="text-xs font-mono font-medium text-gray-400">
+                <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-400">
+                  <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-900 truncate group-hover:text-blue-700">
+                <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">
-                {ticket.assignee && (
+                {ticket.assignee ? (
                   <div className="flex items-center gap-1.5 text-xs text-gray-500">
                     <Avatar name={ticket.assignee.displayName} size="sm" />
                     <span>{ticket.assignee.displayName}</span>
                   </div>
+                ) : (
+                  <span className="text-xs text-gray-600">Unassigned</span>
                 )}
-                {!ticket.assignee && (
-                  <span className="text-xs text-gray-400">Unassigned</span>
-                )}
-                <span className="text-xs text-gray-400">
+                <span className="text-xs text-gray-600">
                   {ticket._count?.comments ?? 0} comments
                 </span>
-                <span className="text-xs text-gray-400">
+                <span className="text-xs text-gray-600">
                   {formatDistanceToNow(new Date(ticket.createdAt), { addSuffix: true })}
                 </span>
               </div>