Add ESLint + Prettier + EditorConfig tooling at repo root

v1.0 Phase 1.1 — repo-wide lint/format baseline.

- eslint.config.mjs (flat config) lints server, client, shared
- .prettierrc.json, .prettierignore, .editorconfig, .nvmrc
- Root package.json holds shared devDeps; per-package scripts keep
  their typecheck + test runners
- Fix 7 lint issues surfaced by the baseline run:
  - TicketDetail.tsx: replace ternary-with-side-effects with if/else
  - admin/Users.tsx: escape apostrophe in JSX
  - errorHandler.ts: typed err as unknown with ErrorLike refinement
  - users.ts: Prisma.UserUpdateInput instead of Record<string, any>
  - seed.ts: drop unused goddard binding
- Run prettier across tracked sources for a clean formatting baseline

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.nvmrc

@@ -0,0 +1 @@
+22

.prettierignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+build
+.vite
+coverage
+*.min.js
+*.min.css
+package-lock.json
+server/prisma/migrations
+client/src/components/ui

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}

README.md

@@ -20,7 +20,7 @@ Internal ticketing system with CTI-based routing, severity levels, role-based ac
 ## Roles
 
 | Role        | Access                                                                       |
-|---|---|
+| ----------- | ---------------------------------------------------------------------------- |
 | **Admin**   | Full access — manage users, CTI config, close and delete tickets             |
 | **Agent**   | Manage tickets — create, update, assign, comment, change status (not Closed) |
 | **User**    | Basic access — view tickets and add comments only                            |
@@ -78,6 +78,7 @@ docker compose exec server npm run db:seed
 ```
 
 This creates:
+
 - `admin` user (password: `admin123`) — **change this immediately**
 - `goddard` service account — API key is printed to the console; copy it now
 
@@ -141,15 +142,23 @@ Base URL: `https://tickets.thewrightserver.net/api`
 Authenticate and receive a JWT.
 
 **Body:**
+
 ```json
 { "username": "string", "password": "string" }
 ```
 
 **Response:**
+
 ```json
 {
   "token": "eyJ...",
-  "user": { "id": "...", "username": "admin", "displayName": "Admin", "email": "...", "role": "ADMIN" }
+  "user": {
+    "id": "...",
+    "username": "admin",
+    "displayName": "Admin",
+    "email": "...",
+    "role": "ADMIN"
+  }
 }
 ```
 
@@ -168,7 +177,7 @@ List all tickets, sorted by severity (ASC) then created date (DESC).
 **Query parameters:**
 
 | Parameter    | Type   | Description                                                   |
-|---|---|---|
+| ------------ | ------ | ------------------------------------------------------------- |
 | `status`     | string | Filter by status: `OPEN`, `IN_PROGRESS`, `RESOLVED`, `CLOSED` |
 | `severity`   | number | Filter by severity: `1`–`5`                                   |
 | `categoryId` | string | Filter by category (queue)                                    |
@@ -190,6 +199,7 @@ Fetch a single ticket by internal ID or display ID (e.g. `V325813929`). Includes
 Create a new ticket. Requires **Agent**, **Admin**, or **Service** role.
 
 **Body:**
+
 ```json
 {
   "title": "string",
@@ -213,6 +223,7 @@ Update a ticket. Accepts any combination of fields. Requires **Agent**, **Admin*
 > Setting `status` to `CLOSED` requires **Admin** role.
 
 **Body (all fields optional):**
+
 ```json
 {
   "title": "string",
@@ -247,6 +258,7 @@ Delete a ticket and all associated comments and audit logs. **Admin only.**
 Add a comment to a ticket. Supports markdown. All authenticated roles may comment.
 
 **Body:**
+
 ```json
 { "body": "string (markdown)" }
 ```
@@ -270,6 +282,7 @@ Delete a comment. Authors may delete their own comments; Admins may delete any.
 Retrieve the full audit log for a ticket, ordered newest first.
 
 **Response:** Array of audit log entries:
+
 ```json
 [
   {
@@ -285,7 +298,7 @@ Retrieve the full audit log for a ticket, ordered newest first.
 **Action types:**
 
 | Action             | Detail                                                         |
-|---|---|
+| ------------------ | -------------------------------------------------------------- |
 | `CREATED`          | —                                                              |
 | `STATUS_CHANGED`   | e.g. `Open → In Progress`                                      |
 | `SEVERITY_CHANGED` | e.g. `SEV 3 → SEV 1`                                           |
@@ -301,7 +314,9 @@ Retrieve the full audit log for a ticket, ordered newest first.
 ### CTI (Category / Type / Item)
 
 #### `GET /api/cti/categories`
+
 #### `GET /api/cti/types?categoryId=<id>`
+
 #### `GET /api/cti/items?typeId=<id>`
 
 Read the CTI hierarchy. Used to resolve IDs when creating/rerouting tickets.
@@ -309,7 +324,7 @@ Read the CTI hierarchy. Used to resolve IDs when creating/rerouting tickets.
 **Admin-only write operations:**
 
 | Method   | Endpoint                  | Body                                           |
-|---|---|---|
+| -------- | ------------------------- | ---------------------------------------------- |
 | `POST`   | `/api/cti/categories`     | `{ "name": "string" }`                         |
 | `PUT`    | `/api/cti/categories/:id` | `{ "name": "string" }`                         |
 | `DELETE` | `/api/cti/categories/:id` | —                                              |
@@ -391,6 +406,7 @@ Content-Type: application/json
 ```
 
 CTI IDs can be fetched from:
+
 - `GET /api/cti/categories`
 - `GET /api/cti/types?categoryId=<id>`
 - `GET /api/cti/items?typeId=<id>`
@@ -402,7 +418,7 @@ To regenerate the Goddard API key: Admin → Users → refresh icon next to Godd
 ## Environment Variables
 
 | Variable            | Required | Description                                          |
-|---|---|---|
+| ------------------- | -------- | ---------------------------------------------------- |
 | `DATABASE_URL`      | Yes      | PostgreSQL connection string                         |
 | `JWT_SECRET`        | Yes      | Secret for signing JWTs — use `openssl rand -hex 64` |
 | `CLIENT_URL`        | Yes      | Allowed CORS origin (your domain)                    |
@@ -416,7 +432,7 @@ To regenerate the Goddard API key: Admin → Users → refresh icon next to Godd
 ## Ticket Severity
 
 | Level | Label | Meaning                              |
-|---|---|---|
+| ----- | ----- | ------------------------------------ |
 | 1     | SEV 1 | Critical — immediate action required |
 | 2     | SEV 2 | High — significant impact            |
 | 3     | SEV 3 | Medium — standard priority           |

client/package.json

@@ -6,11 +6,16 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
+    "@tanstack/react-query": "^5.62.0",
     "axios": "^1.7.9",
+    "cmdk": "^1.0.4",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.468.0",
     "react": "^18.3.1",
@@ -19,16 +24,23 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.28.0",
     "remark-gfm": "^4.0.0",
+    "sonner": "^1.7.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.62.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.5",
+    "vitest": "^2.1.8"
   }
 }

client/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

client/src/App.tsx

@@ -1,13 +1,13 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-import { AuthProvider } from './contexts/AuthContext'
+import { AuthProvider } from './contexts/AuthContext';
-import PrivateRoute from './components/PrivateRoute'
+import PrivateRoute from './components/PrivateRoute';
-import AdminRoute from './components/AdminRoute'
+import AdminRoute from './components/AdminRoute';
-import Login from './pages/Login'
+import Login from './pages/Login';
-import Dashboard from './pages/Dashboard'
+import Dashboard from './pages/Dashboard';
-import MyTickets from './pages/MyTickets'
+import MyTickets from './pages/MyTickets';
-import TicketDetail from './pages/TicketDetail'
+import TicketDetail from './pages/TicketDetail';
-import AdminUsers from './pages/admin/Users'
+import AdminUsers from './pages/admin/Users';
-import AdminCTI from './pages/admin/CTI'
+import AdminCTI from './pages/admin/CTI';
 
 export default function App() {
   return (
@@ -28,5 +28,5 @@ export default function App() {
         </Routes>
       </BrowserRouter>
     </AuthProvider>
-  )
+  );
 }

client/src/api/client.ts

@@ -1,7 +1,7 @@
-import axios from 'axios'
+import axios from 'axios';
 
 const api = axios.create({
   baseURL: '/api',
-})
+});
 
-export default api
+export default api;

client/src/components/AdminRoute.tsx

@@ -1,7 +1,7 @@
-import { Navigate, Outlet } from 'react-router-dom'
+import { Navigate, Outlet } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext'
+import { useAuth } from '../contexts/AuthContext';
 
 export default function AdminRoute() {
-  const { user } = useAuth()
+  const { user } = useAuth();
-  return user?.role === 'ADMIN' ? <Outlet /> : <Navigate to="/" replace />
+  return user?.role === 'ADMIN' ? <Outlet /> : <Navigate to="/" replace />;
 }

client/src/components/Avatar.tsx

@@ -1,14 +1,20 @@
 const PALETTE = [
-  '#ef4444', '#f97316', '#f59e0b', '#10b981',
+  '#ef4444',
-  '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899',
+  '#f97316',
-]
+  '#f59e0b',
+  '#10b981',
+  '#06b6d4',
+  '#3b82f6',
+  '#8b5cf6',
+  '#ec4899',
+];
 
 function nameToColor(name: string): string {
-  let hash = 0
+  let hash = 0;
   for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
   }
-  return PALETTE[Math.abs(hash) % PALETTE.length]
+  return PALETTE[Math.abs(hash) % PALETTE.length];
 }
 
 function initials(name: string): string {
@@ -17,18 +23,18 @@ function initials(name: string): string {
     .slice(0, 2)
     .map((n) => n[0])
     .join('')
-    .toUpperCase()
+    .toUpperCase();
 }
 
 const SIZES = {
   sm: 'w-6 h-6 text-xs',
   md: 'w-8 h-8 text-sm',
   lg: 'w-10 h-10 text-base',
-}
+};
 
 interface AvatarProps {
-  name: string
+  name: string;
-  size?: keyof typeof SIZES
+  size?: keyof typeof SIZES;
 }
 
 export default function Avatar({ name, size = 'md' }: AvatarProps) {
@@ -40,5 +46,5 @@ export default function Avatar({ name, size = 'md' }: AvatarProps) {
     >
       {initials(name)}
     </div>
-  )
+  );
 }

client/src/components/CTISelect.tsx

@@ -1,57 +1,57 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
-import api from '../api/client'
+import api from '../api/client';
-import { Category, CTIType, Item } from '../types'
+import { Category, CTIType, Item } from '../types';
 
 interface CTISelectProps {
-  value: { categoryId: string; typeId: string; itemId: string }
+  value: { categoryId: string; typeId: string; itemId: string };
-  onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void
+  onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void;
-  disabled?: boolean
+  disabled?: boolean;
 }
 
 export default function CTISelect({ value, onChange, disabled }: CTISelectProps) {
-  const [categories, setCategories] = useState<Category[]>([])
+  const [categories, setCategories] = useState<Category[]>([]);
-  const [types, setTypes] = useState<CTIType[]>([])
+  const [types, setTypes] = useState<CTIType[]>([]);
-  const [items, setItems] = useState<Item[]>([])
+  const [items, setItems] = useState<Item[]>([]);
 
   useEffect(() => {
-    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data))
+    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data));
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (!value.categoryId) {
-      setTypes([])
+      setTypes([]);
-      setItems([])
+      setItems([]);
-      return
+      return;
     }
     api
       .get<CTIType[]>('/cti/types', { params: { categoryId: value.categoryId } })
-      .then((r) => setTypes(r.data))
+      .then((r) => setTypes(r.data));
-  }, [value.categoryId])
+  }, [value.categoryId]);
 
   useEffect(() => {
     if (!value.typeId) {
-      setItems([])
+      setItems([]);
-      return
+      return;
     }
     api
       .get<Item[]>('/cti/items', { params: { typeId: value.typeId } })
-      .then((r) => setItems(r.data))
+      .then((r) => setItems(r.data));
-  }, [value.typeId])
+  }, [value.typeId]);
 
   const handleCategory = (categoryId: string) => {
-    onChange({ categoryId, typeId: '', itemId: '' })
+    onChange({ categoryId, typeId: '', itemId: '' });
-  }
+  };
 
   const handleType = (typeId: string) => {
-    onChange({ ...value, typeId, itemId: '' })
+    onChange({ ...value, typeId, itemId: '' });
-  }
+  };
 
   const handleItem = (itemId: string) => {
-    onChange({ ...value, itemId })
+    onChange({ ...value, itemId });
-  }
+  };
 
   const selectClass =
-    'block w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed'
+    'block w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed';
 
   return (
     <div className="grid grid-cols-3 gap-3">
@@ -106,5 +106,5 @@ export default function CTISelect({ value, onChange, disabled }: CTISelectProps)
         </select>
       </div>
     </div>
-  )
+  );
 }

client/src/components/Layout.tsx

@@ -1,22 +1,22 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { LayoutDashboard, Users, Settings, LogOut, Plus, Ticket } from 'lucide-react'
+import { LayoutDashboard, Users, Settings, LogOut, Plus, Ticket } from 'lucide-react';
-import { useAuth } from '../contexts/AuthContext'
+import { useAuth } from '../contexts/AuthContext';
-import NewTicketModal from '../pages/NewTicket'
+import NewTicketModal from '../pages/NewTicket';
 
 interface LayoutProps {
-  children: ReactNode
+  children: ReactNode;
-  title?: string
+  title?: string;
-  action?: ReactNode
+  action?: ReactNode;
 }
 
 export default function Layout({ children, title, action }: LayoutProps) {
-  const { user, logout } = useAuth()
+  const { user, logout } = useAuth();
-  const location = useLocation()
+  const location = useLocation();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const [showNewTicket, setShowNewTicket] = useState(false)
+  const [showNewTicket, setShowNewTicket] = useState(false);
 
-  const canCreateTicket = user?.role !== 'USER'
+  const canCreateTicket = user?.role !== 'USER';
 
   const navItems = [
     { to: '/', icon: LayoutDashboard, label: 'All Tickets' },
@@ -27,15 +27,15 @@ export default function Layout({ children, title, action }: LayoutProps) {
           { to: '/admin/cti', icon: Settings, label: 'CTI Config' },
         ]
       : []),
-  ]
+  ];
 
   const handleLogout = () => {
-    logout()
+    logout();
-    navigate('/login')
+    navigate('/login');
-  }
+  };
 
   const isActive = (to: string) =>
-    to === '/' ? location.pathname === '/' : location.pathname.startsWith(to)
+    to === '/' ? location.pathname === '/' : location.pathname.startsWith(to);
 
   return (
     <div className="flex h-screen bg-gray-950 overflow-hidden">
@@ -96,5 +96,5 @@ export default function Layout({ children, title, action }: LayoutProps) {
 
       {showNewTicket && <NewTicketModal onClose={() => setShowNewTicket(false)} />}
     </div>
-  )
+  );
 }

client/src/components/Modal.tsx

@@ -1,39 +1,40 @@
-import { ReactNode, useEffect } from 'react'
+import { ReactNode, useEffect } from 'react';
-import { X } from 'lucide-react'
+import { X } from 'lucide-react';
 
 interface ModalProps {
-  title: string
+  title: string;
-  onClose: () => void
+  onClose: () => void;
-  children: ReactNode
+  children: ReactNode;
-  size?: 'md' | 'lg'
+  size?: 'md' | 'lg';
 }
 
 export default function Modal({ title, onClose, children, size = 'md' }: ModalProps) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
+      if (e.key === 'Escape') onClose();
-    }
+    };
-    document.addEventListener('keydown', handler)
+    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler);
-  }, [onClose])
+  }, [onClose]);
 
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className={`bg-gray-900 border border-gray-800 rounded-xl shadow-2xl w-full mx-4 ${size === 'lg' ? 'max-w-2xl' : 'max-w-md'}`}
       >
-      <div className={`bg-gray-900 border border-gray-800 rounded-xl shadow-2xl w-full mx-4 ${size === 'lg' ? 'max-w-2xl' : 'max-w-md'}`}>
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800">
           <h3 className="text-base font-semibold text-gray-100">{title}</h3>
-          <button
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-300 transition-colors">
-            onClick={onClose}
-            className="text-gray-500 hover:text-gray-300 transition-colors"
-          >
             <X size={18} />
           </button>
         </div>
         <div className="px-6 py-5">{children}</div>
       </div>
     </div>
-  )
+  );
 }

client/src/components/PrivateRoute.tsx

@@ -1,16 +1,16 @@
-import { Navigate, Outlet } from 'react-router-dom'
+import { Navigate, Outlet } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext'
+import { useAuth } from '../contexts/AuthContext';
 
 export default function PrivateRoute() {
-  const { user, loading } = useAuth()
+  const { user, loading } = useAuth();
 
   if (loading) {
     return (
       <div className="flex h-screen items-center justify-center bg-gray-50">
         <div className="text-gray-500">Loading...</div>
       </div>
-    )
+    );
   }
 
-  return user ? <Outlet /> : <Navigate to="/login" replace />
+  return user ? <Outlet /> : <Navigate to="/login" replace />;
 }

client/src/components/SeverityBadge.tsx

@@ -4,13 +4,15 @@ const config: Record<number, { label: string; className: string }> = {
   3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
   4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
   5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
-}
+};
 
 export default function SeverityBadge({ severity }: { severity: number }) {
-  const { label, className } = config[severity] ?? config[5]
+  const { label, className } = config[severity] ?? config[5];
   return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${className}`}>
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${className}`}
+    >
       {label}
     </span>
-  )
+  );
 }

client/src/components/StatusBadge.tsx

@@ -1,17 +1,22 @@
-import { TicketStatus } from '../types'
+import { TicketStatus } from '../types';
 
 const config: Record<TicketStatus, { label: string; className: string }> = {
   OPEN: { label: 'Open', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
-  IN_PROGRESS: { label: 'In Progress', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
+  IN_PROGRESS: {
+    label: 'In Progress',
+    className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+  },
   RESOLVED: { label: 'Resolved', className: 'bg-green-500/20 text-green-400 border-green-500/30' },
   CLOSED: { label: 'Closed', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
-}
+};
 
 export default function StatusBadge({ status }: { status: TicketStatus }) {
-  const { label, className } = config[status]
+  const { label, className } = config[status];
   return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${className}`}>
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${className}`}
+    >
       {label}
     </span>
-  )
+  );
 }

client/src/contexts/AuthContext.tsx

@@ -1,59 +1,57 @@
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import api from '../api/client'
+import api from '../api/client';
-import { User } from '../types'
+import { User } from '../types';
 
 interface AuthContextType {
-  user: User | null
+  user: User | null;
-  loading: boolean
+  loading: boolean;
-  login: (username: string, password: string) => Promise<void>
+  login: (username: string, password: string) => Promise<void>;
-  logout: () => void
+  logout: () => void;
 }
 
-const AuthContext = createContext<AuthContextType>(null!)
+const AuthContext = createContext<AuthContextType>(null!);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null)
+  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const token = localStorage.getItem('token')
+    const token = localStorage.getItem('token');
     if (token) {
-      api.defaults.headers.common['Authorization'] = `Bearer ${token}`
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
       api
         .get<User>('/auth/me')
         .then((res) => setUser(res.data))
         .catch(() => {
-          localStorage.removeItem('token')
+          localStorage.removeItem('token');
-          delete api.defaults.headers.common['Authorization']
+          delete api.defaults.headers.common['Authorization'];
         })
-        .finally(() => setLoading(false))
+        .finally(() => setLoading(false));
     } else {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [])
+  }, []);
 
   const login = async (username: string, password: string) => {
     const res = await api.post<{ token: string; user: User }>('/auth/login', {
       username,
       password,
-    })
+    });
-    const { token, user } = res.data
+    const { token, user } = res.data;
-    localStorage.setItem('token', token)
+    localStorage.setItem('token', token);
-    api.defaults.headers.common['Authorization'] = `Bearer ${token}`
+    api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-    setUser(user)
+    setUser(user);
-  }
+  };
 
   const logout = () => {
-    localStorage.removeItem('token')
+    localStorage.removeItem('token');
-    delete api.defaults.headers.common['Authorization']
+    delete api.defaults.headers.common['Authorization'];
-    setUser(null)
+    setUser(null);
-  }
+  };
 
   return (
-    <AuthContext.Provider value={{ user, loading, login, logout }}>
+    <AuthContext.Provider value={{ user, loading, login, logout }}>{children}</AuthContext.Provider>
-      {children}
+  );
-    </AuthContext.Provider>
-  )
 }
 
-export const useAuth = () => useContext(AuthContext)
+export const useAuth = () => useContext(AuthContext);

client/src/index.css

@@ -9,22 +9,58 @@ select option {
 }
 
 /* Markdown prose styles (dark) */
-.prose p { @apply mb-3 last:mb-0 leading-relaxed; }
+.prose p {
-.prose h1 { @apply text-xl font-bold mb-3 mt-5; }
+  @apply mb-3 last:mb-0 leading-relaxed;
-.prose h2 { @apply text-lg font-semibold mb-2 mt-4; }
+}
-.prose h3 { @apply text-base font-semibold mb-2 mt-3; }
+.prose h1 {
-.prose ul { @apply list-disc pl-5 mb-3 space-y-1; }
+  @apply text-xl font-bold mb-3 mt-5;
-.prose ol { @apply list-decimal pl-5 mb-3 space-y-1; }
+}
+.prose h2 {
+  @apply text-lg font-semibold mb-2 mt-4;
+}
+.prose h3 {
+  @apply text-base font-semibold mb-2 mt-3;
+}
+.prose ul {
+  @apply list-disc pl-5 mb-3 space-y-1;
+}
+.prose ol {
+  @apply list-decimal pl-5 mb-3 space-y-1;
+}
 .prose li > ul,
-.prose li > ol { @apply mt-1 mb-0; }
+.prose li > ol {
-.prose a { @apply text-blue-400 underline hover:text-blue-300; }
+  @apply mt-1 mb-0;
-.prose strong { @apply font-semibold; }
+}
-.prose em { @apply italic; }
+.prose a {
-.prose blockquote { @apply border-l-4 border-gray-600 pl-4 text-gray-400 my-3 italic; }
+  @apply text-blue-400 underline hover:text-blue-300;
-.prose code { @apply bg-gray-800 text-gray-300 px-1.5 py-0.5 rounded text-xs font-mono; }
+}
-.prose pre { @apply bg-gray-950 text-gray-300 p-4 rounded-lg my-3 overflow-x-auto text-sm; }
+.prose strong {
-.prose pre code { @apply bg-transparent text-gray-300 p-0; }
+  @apply font-semibold;
-.prose hr { @apply border-gray-700 my-4; }
+}
-.prose table { @apply w-full border-collapse text-sm my-3; }
+.prose em {
-.prose th { @apply bg-gray-800 border border-gray-700 px-3 py-2 text-left font-semibold text-gray-300; }
+  @apply italic;
-.prose td { @apply border border-gray-700 px-3 py-2 text-gray-400; }
+}
+.prose blockquote {
+  @apply border-l-4 border-gray-600 pl-4 text-gray-400 my-3 italic;
+}
+.prose code {
+  @apply bg-gray-800 text-gray-300 px-1.5 py-0.5 rounded text-xs font-mono;
+}
+.prose pre {
+  @apply bg-gray-950 text-gray-300 p-4 rounded-lg my-3 overflow-x-auto text-sm;
+}
+.prose pre code {
+  @apply bg-transparent text-gray-300 p-0;
+}
+.prose hr {
+  @apply border-gray-700 my-4;
+}
+.prose table {
+  @apply w-full border-collapse text-sm my-3;
+}
+.prose th {
+  @apply bg-gray-800 border border-gray-700 px-3 py-2 text-left font-semibold text-gray-300;
+}
+.prose td {
+  @apply border border-gray-700 px-3 py-2 text-gray-400;
+}

client/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
+import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client'
+import { createRoot } from 'react-dom/client';
-import './index.css'
+import './index.css';
-import App from './App'
+import App from './App';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
-)
+);

client/src/pages/Dashboard.tsx

@@ -1,13 +1,13 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback } from 'react';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
-import { Search, ChevronRight, X } from 'lucide-react'
+import { Search, ChevronRight, X } from 'lucide-react';
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistanceToNow } from 'date-fns';
-import api from '../api/client'
+import api from '../api/client';
-import Layout from '../components/Layout'
+import Layout from '../components/Layout';
-import SeverityBadge from '../components/SeverityBadge'
+import SeverityBadge from '../components/SeverityBadge';
-import StatusBadge from '../components/StatusBadge'
+import StatusBadge from '../components/StatusBadge';
-import Avatar from '../components/Avatar'
+import Avatar from '../components/Avatar';
-import { Ticket, TicketStatus, Category, CTIType, Item } from '../types'
+import { Ticket, TicketStatus, Category, CTIType, Item } from '../types';
 
 const STATUSES: { value: TicketStatus | ''; label: string }[] = [
   { value: '', label: 'All Statuses' },
@@ -15,97 +15,95 @@ const STATUSES: { value: TicketStatus | ''; label: string }[] = [
   { value: 'IN_PROGRESS', label: 'In Progress' },
   { value: 'RESOLVED', label: 'Resolved' },
   { 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'
+  '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';
 
 // Queue label built from whatever CTI level is selected
-function queueLabel(
+function queueLabel(category: Category | null, type: CTIType | null, item: Item | null): string {
-  category: Category | null,
+  if (item && type && category) return `${category.name} › ${type.name} › ${item.name}`;
-  type: CTIType | null,
+  if (type && category) return `${category.name} › ${type.name}`;
-  item: Item | null,
+  if (category) return category.name;
-): string {
+  return '';
-  if (item && type && category) return `${category.name} › ${type.name} › ${item.name}`
-  if (type && category) return `${category.name} › ${type.name}`
-  if (category) return category.name
-  return ''
 }
 
 export default function Dashboard() {
-  const [tickets, setTickets] = useState<Ticket[]>([])
+  const [tickets, setTickets] = useState<Ticket[]>([]);
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = useState('');
-  const [status, setStatus] = useState<TicketStatus | ''>('')
+  const [status, setStatus] = useState<TicketStatus | ''>('');
-  const [severity, setSeverity] = useState('')
+  const [severity, setSeverity] = useState('');
 
   // CTI queue filter state
-  const [categories, setCategories] = useState<Category[]>([])
+  const [categories, setCategories] = useState<Category[]>([]);
-  const [types, setTypes] = useState<CTIType[]>([])
+  const [types, setTypes] = useState<CTIType[]>([]);
-  const [items, setItems] = useState<Item[]>([])
+  const [items, setItems] = useState<Item[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
+  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
-  const [selectedType, setSelectedType] = useState<CTIType | null>(null)
+  const [selectedType, setSelectedType] = useState<CTIType | null>(null);
-  const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
-  const [showQueueFilter, setShowQueueFilter] = useState(false)
+  const [showQueueFilter, setShowQueueFilter] = useState(false);
 
   useEffect(() => {
-    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data))
+    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data));
-  }, [])
+  }, []);
 
   const handleCategorySelect = (cat: Category) => {
-    setSelectedCategory(cat)
+    setSelectedCategory(cat);
-    setSelectedType(null)
+    setSelectedType(null);
-    setSelectedItem(null)
+    setSelectedItem(null);
-    setTypes([])
+    setTypes([]);
-    setItems([])
+    setItems([]);
-    api.get<CTIType[]>('/cti/types', { params: { categoryId: cat.id } }).then((r) => setTypes(r.data))
+    api
-  }
+      .get<CTIType[]>('/cti/types', { params: { categoryId: cat.id } })
+      .then((r) => setTypes(r.data));
+  };
 
   const handleTypeSelect = (type: CTIType) => {
-    setSelectedType(type)
+    setSelectedType(type);
-    setSelectedItem(null)
+    setSelectedItem(null);
-    setItems([])
+    setItems([]);
-    api.get<Item[]>('/cti/items', { params: { typeId: type.id } }).then((r) => setItems(r.data))
+    api.get<Item[]>('/cti/items', { params: { typeId: type.id } }).then((r) => setItems(r.data));
-  }
+  };
 
   const handleItemSelect = (item: Item) => {
-    setSelectedItem(item)
+    setSelectedItem(item);
-    setShowQueueFilter(false)
+    setShowQueueFilter(false);
-  }
+  };
 
   const clearQueue = () => {
-    setSelectedCategory(null)
+    setSelectedCategory(null);
-    setSelectedType(null)
+    setSelectedType(null);
-    setSelectedItem(null)
+    setSelectedItem(null);
-    setTypes([])
+    setTypes([]);
-    setItems([])
+    setItems([]);
-  }
+  };
 
   // Derive the most specific filter param
-  const queueParams: Record<string, string> = {}
+  const queueParams: Record<string, string> = {};
-  if (selectedItem) queueParams.itemId = selectedItem.id
+  if (selectedItem) queueParams.itemId = selectedItem.id;
-  else if (selectedType) queueParams.typeId = selectedType.id
+  else if (selectedType) queueParams.typeId = selectedType.id;
-  else if (selectedCategory) queueParams.categoryId = selectedCategory.id
+  else if (selectedCategory) queueParams.categoryId = selectedCategory.id;
 
   const fetchTickets = useCallback(() => {
-    setLoading(true)
+    setLoading(true);
-    const params: Record<string, string> = { ...queueParams }
+    const params: Record<string, string> = { ...queueParams };
-    if (status) params.status = status
+    if (status) params.status = status;
-    if (severity) params.severity = severity
+    if (severity) params.severity = severity;
-    if (search) params.search = search
+    if (search) params.search = search;
     api
       .get<Ticket[]>('/tickets', { params })
       .then((r) => setTickets(r.data))
-      .finally(() => setLoading(false))
+      .finally(() => setLoading(false));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, severity, search, selectedCategory, selectedType, selectedItem])
+  }, [status, severity, search, selectedCategory, selectedType, selectedItem]);
 
   useEffect(() => {
-    const t = setTimeout(fetchTickets, 300)
+    const t = setTimeout(fetchTickets, 300);
-    return () => clearTimeout(t)
+    return () => clearTimeout(t);
-  }, [fetchTickets])
+  }, [fetchTickets]);
 
-  const activeQueue = queueLabel(selectedCategory, selectedType, selectedItem)
+  const activeQueue = queueLabel(selectedCategory, selectedType, selectedItem);
 
   return (
     <Layout title="All Tickets">
@@ -161,7 +159,10 @@ export default function Dashboard() {
               <>
                 <span className="max-w-48 truncate">{activeQueue}</span>
                 <span
-                  onClick={(e) => { e.stopPropagation(); clearQueue() }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    clearQueue();
+                  }}
                   className="text-blue-400 hover:text-white transition-colors cursor-pointer"
                 >
                   <X size={13} />
@@ -173,7 +174,8 @@ export default function Dashboard() {
           </button>
 
           {showQueueFilter && (
-            <div className="absolute z-20 top-full mt-1 left-0 bg-gray-900 border border-gray-700 rounded-xl shadow-2xl overflow-hidden flex"
+            <div
+              className="absolute z-20 top-full mt-1 left-0 bg-gray-900 border border-gray-700 rounded-xl shadow-2xl overflow-hidden flex"
               style={{ minWidth: '520px' }}
             >
               {/* Categories */}
@@ -324,5 +326,5 @@ export default function Dashboard() {
         </div>
       )}
     </Layout>
-  )
+  );
 }

client/src/pages/Login.tsx

@@ -1,28 +1,28 @@
-import { useState } from 'react'
+import { useState } from 'react';
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext'
+import { useAuth } from '../contexts/AuthContext';
 
 export default function Login() {
-  const { login } = useAuth()
+  const { login } = useAuth();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const [username, setUsername] = useState('')
+  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('')
+  const [password, setPassword] = useState('');
-  const [error, setError] = useState('')
+  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    setError('')
+    setError('');
-    setLoading(true)
+    setLoading(true);
     try {
-      await login(username, password)
+      await login(username, password);
-      navigate('/')
+      navigate('/');
     } catch {
-      setError('Invalid username or password')
+      setError('Invalid username or password');
     } finally {
-      setLoading(false)
+      setLoading(false);
-    }
     }
+  };
 
   return (
     <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
@@ -43,9 +43,7 @@ export default function Login() {
           )}
 
           <div>
-            <label className="block text-sm font-medium text-gray-300 mb-1">
+            <label className="block text-sm font-medium text-gray-300 mb-1">Username</label>
-              Username
-            </label>
             <input
               type="text"
               value={username}
@@ -57,9 +55,7 @@ export default function Login() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-300 mb-1">
+            <label className="block text-sm font-medium text-gray-300 mb-1">Password</label>
-              Password
-            </label>
             <input
               type="password"
               value={password}
@@ -79,5 +75,5 @@ export default function Login() {
         </form>
       </div>
     </div>
-  )
+  );
 }

client/src/pages/MyTickets.tsx

@@ -1,32 +1,36 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistanceToNow } from 'date-fns';
-import api from '../api/client'
+import api from '../api/client';
-import Layout from '../components/Layout'
+import Layout from '../components/Layout';
-import SeverityBadge from '../components/SeverityBadge'
+import SeverityBadge from '../components/SeverityBadge';
-import StatusBadge from '../components/StatusBadge'
+import StatusBadge from '../components/StatusBadge';
-import { Ticket } from '../types'
+import { Ticket } from '../types';
-import { useAuth } from '../contexts/AuthContext'
+import { useAuth } from '../contexts/AuthContext';
 
 export default function MyTickets() {
-  const { user } = useAuth()
+  const { user } = useAuth();
-  const [tickets, setTickets] = useState<Ticket[]>([])
+  const [tickets, setTickets] = useState<Ticket[]>([]);
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!user) return
+    if (!user) return;
     // Only show active tickets — OPEN and IN_PROGRESS
     Promise.all([
       api.get<Ticket[]>('/tickets', { params: { assigneeId: user.id, status: 'OPEN' } }),
       api.get<Ticket[]>('/tickets', { params: { assigneeId: user.id, status: 'IN_PROGRESS' } }),
     ])
       .then(([openRes, inProgressRes]) => {
-        const combined = [...openRes.data, ...inProgressRes.data]
+        const combined = [...openRes.data, ...inProgressRes.data];
-        combined.sort((a, b) => a.severity - b.severity || new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+        combined.sort(
-        setTickets(combined)
+          (a, b) =>
+            a.severity - b.severity ||
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        );
+        setTickets(combined);
       })
-      .finally(() => setLoading(false))
+      .finally(() => setLoading(false));
-  }, [user])
+  }, [user]);
 
   return (
     <Layout title="My Tickets">
@@ -87,5 +91,5 @@ export default function MyTickets() {
         </div>
       )}
     </Layout>
-  )
+  );
 }

client/src/pages/NewTicket.tsx

@@ -1,19 +1,19 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom';
-import api from '../api/client'
+import api from '../api/client';
-import Modal from '../components/Modal'
+import Modal from '../components/Modal';
-import CTISelect from '../components/CTISelect'
+import CTISelect from '../components/CTISelect';
-import { User } from '../types'
+import { User } from '../types';
 
 interface NewTicketModalProps {
-  onClose: () => void
+  onClose: () => void;
 }
 
 export default function NewTicketModal({ onClose }: NewTicketModalProps) {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const [users, setUsers] = useState<User[]>([])
+  const [users, setUsers] = useState<User[]>([]);
-  const [error, setError] = useState('')
+  const [error, setError] = useState('');
-  const [submitting, setSubmitting] = useState(false)
+  const [submitting, setSubmitting] = useState(false);
 
   const [form, setForm] = useState({
     title: '',
@@ -23,24 +23,24 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
     categoryId: '',
     typeId: '',
     itemId: '',
-  })
+  });
 
   useEffect(() => {
-    api.get<User[]>('/users').then((r) => setUsers(r.data))
+    api.get<User[]>('/users').then((r) => setUsers(r.data));
-  }, [])
+  }, []);
 
   const handleCTI = (cti: { categoryId: string; typeId: string; itemId: string }) => {
-    setForm((f) => ({ ...f, ...cti }))
+    setForm((f) => ({ ...f, ...cti }));
-  }
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     if (!form.categoryId || !form.typeId || !form.itemId) {
-      setError('Please select a Category, Type, and Item')
+      setError('Please select a Category, Type, and Item');
-      return
+      return;
     }
-    setError('')
+    setError('');
-    setSubmitting(true)
+    setSubmitting(true);
     try {
       const payload: Record<string, unknown> = {
         title: form.title,
@@ -49,22 +49,22 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
         categoryId: form.categoryId,
         typeId: form.typeId,
         itemId: form.itemId,
-      }
+      };
-      if (form.assigneeId) payload.assigneeId = form.assigneeId
+      if (form.assigneeId) payload.assigneeId = form.assigneeId;
 
-      const res = await api.post('/tickets', payload)
+      const res = await api.post('/tickets', payload);
-      onClose()
+      onClose();
-      navigate(`/${res.data.displayId}`)
+      navigate(`/${res.data.displayId}`);
     } catch {
-      setError('Failed to create ticket')
+      setError('Failed to create ticket');
     } finally {
-      setSubmitting(false)
+      setSubmitting(false);
-    }
     }
+  };
 
   const inputClass =
-    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
-  const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
+  const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
 
   return (
     <Modal title="New Ticket" onClose={onClose} size="lg">
@@ -161,5 +161,5 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
         </div>
       </form>
     </Modal>
-  )
+  );
 }

client/src/pages/TicketDetail.tsx

@@ -1,24 +1,32 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom';
-import { format, formatDistanceToNow } from 'date-fns'
+import { format, formatDistanceToNow } from 'date-fns';
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm'
+import remarkGfm from 'remark-gfm';
 import {
-  Pencil, Trash2, Send, X, Check,
+  Pencil,
-  MessageSquare, ClipboardList, FileText,
+  Trash2,
-  ArrowLeft, ChevronDown, ChevronRight,
+  Send,
-} from 'lucide-react'
+  X,
-import api from '../api/client'
+  Check,
-import Layout from '../components/Layout'
+  MessageSquare,
-import Modal from '../components/Modal'
+  ClipboardList,
-import SeverityBadge from '../components/SeverityBadge'
+  FileText,
-import StatusBadge from '../components/StatusBadge'
+  ArrowLeft,
-import CTISelect from '../components/CTISelect'
+  ChevronDown,
-import Avatar from '../components/Avatar'
+  ChevronRight,
-import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types'
+} from 'lucide-react';
-import { useAuth } from '../contexts/AuthContext'
+import api from '../api/client';
+import Layout from '../components/Layout';
+import Modal from '../components/Modal';
+import SeverityBadge from '../components/SeverityBadge';
+import StatusBadge from '../components/StatusBadge';
+import CTISelect from '../components/CTISelect';
+import Avatar from '../components/Avatar';
+import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types';
+import { useAuth } from '../contexts/AuthContext';
 
-type Tab = 'overview' | 'comments' | 'audit'
+type Tab = 'overview' | 'comments' | 'audit';
 
 const SEVERITY_OPTIONS = [
   { value: 1, label: 'SEV 1 — Critical' },
@@ -26,7 +34,7 @@ const SEVERITY_OPTIONS = [
   { value: 3, label: 'SEV 3 — Medium' },
   { value: 4, label: 'SEV 4 — Low' },
   { value: 5, label: 'SEV 5 — Minimal' },
-]
+];
 
 const AUDIT_LABELS: Record<string, string> = {
   CREATED: 'created this ticket',
@@ -38,7 +46,7 @@ const AUDIT_LABELS: Record<string, string> = {
   OVERVIEW_CHANGED: 'updated overview',
   COMMENT_ADDED: 'added a comment',
   COMMENT_DELETED: 'deleted a comment',
-}
+};
 
 const AUDIT_COLORS: Record<string, string> = {
   CREATED: 'bg-green-500',
@@ -50,134 +58,134 @@ const AUDIT_COLORS: Record<string, string> = {
   OVERVIEW_CHANGED: 'bg-gray-500',
   COMMENT_ADDED: 'bg-gray-500',
   COMMENT_DELETED: 'bg-red-500',
-}
+};
-
-const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED'])
 
+const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED']);
 
 export default function TicketDetail() {
-  const { id } = useParams<{ id: string }>()
+  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const { user: authUser } = useAuth()
+  const { user: authUser } = useAuth();
 
-  const [ticket, setTicket] = useState<Ticket | null>(null)
+  const [ticket, setTicket] = useState<Ticket | null>(null);
-  const [users, setUsers] = useState<User[]>([])
+  const [users, setUsers] = useState<User[]>([]);
-  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
+  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [tab, setTab] = useState<Tab>('overview')
+  const [tab, setTab] = useState<Tab>('overview');
-  const [editing, setEditing] = useState(false)
+  const [editing, setEditing] = useState(false);
-  const [reroutingCTI, setReroutingCTI] = useState(false)
+  const [reroutingCTI, setReroutingCTI] = useState(false);
-  const [commentBody, setCommentBody] = useState('')
+  const [commentBody, setCommentBody] = useState('');
-  const [submittingComment, setSubmittingComment] = useState(false)
+  const [submittingComment, setSubmittingComment] = useState(false);
-  const [preview, setPreview] = useState(false)
+  const [preview, setPreview] = useState(false);
-  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
+  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
 
-  const [editForm, setEditForm] = useState({ title: '', overview: '' })
+  const [editForm, setEditForm] = useState({ title: '', overview: '' });
-  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })
+  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
-  const [editingStatus, setEditingStatus] = useState(false)
+  const [editingStatus, setEditingStatus] = useState(false);
-  const [editingSeverity, setEditingSeverity] = useState(false)
+  const [editingSeverity, setEditingSeverity] = useState(false);
-  const [editingAssignee, setEditingAssignee] = useState(false)
+  const [editingAssignee, setEditingAssignee] = useState(false);
-  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set())
+  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
-  const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set())
+  const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());
 
   const toggleDate = (key: string) =>
     setExpandedDates((prev) => {
-      const next = new Set(prev)
+      const next = new Set(prev);
-      next.has(key) ? next.delete(key) : next.add(key)
+      if (next.has(key)) next.delete(key);
-      return next
+      else next.add(key);
-    })
+      return next;
+    });
 
   const toggleCommentDate = (id: string) =>
     setExpandedCommentDates((prev) => {
-      const next = new Set(prev)
+      const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id)
+      if (next.has(id)) next.delete(id);
-      return next
+      else next.add(id);
-    })
+      return next;
+    });
 
-  const isAdmin = authUser?.role === 'ADMIN'
+  const isAdmin = authUser?.role === 'ADMIN';
 
   useEffect(() => {
-    Promise.all([
+    Promise.all([api.get<Ticket>(`/tickets/${id}`), api.get<User[]>('/users')])
-      api.get<Ticket>(`/tickets/${id}`),
+      .then(([tRes, uRes]) => {
-      api.get<User[]>('/users'),
+        setTicket(tRes.data);
-    ]).then(([tRes, uRes]) => {
+        setUsers(uRes.data);
-      setTicket(tRes.data)
+      })
-      setUsers(uRes.data)
+      .finally(() => setLoading(false));
-    }).finally(() => setLoading(false))
+  }, [id]);
-  }, [id])
 
   useEffect(() => {
     if (tab === 'audit' && ticket) {
-      api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
+      api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data));
     }
-  }, [tab, ticket, id])
+  }, [tab, ticket, id]);
 
   const patch = async (payload: Record<string, unknown>) => {
-    if (!ticket) return
+    if (!ticket) return;
-    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
+    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload);
-    setTicket(res.data)
+    setTicket(res.data);
-    return res.data
+    return res.data;
-  }
+  };
 
   const startEdit = () => {
-    if (!ticket) return
+    if (!ticket) return;
-    setEditForm({ title: ticket.title, overview: ticket.overview })
+    setEditForm({ title: ticket.title, overview: ticket.overview });
-    setEditing(true)
+    setEditing(true);
-    setTab('overview')
+    setTab('overview');
-  }
+  };
 
   const saveEdit = async () => {
-    await patch({ title: editForm.title, overview: editForm.overview })
+    await patch({ title: editForm.title, overview: editForm.overview });
-    setEditing(false)
+    setEditing(false);
-  }
+  };
 
   const startReroute = () => {
-    if (!ticket) return
+    if (!ticket) return;
-    setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId })
+    setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
-    setReroutingCTI(true)
+    setReroutingCTI(true);
-  }
+  };
 
   const saveReroute = async () => {
-    await patch(pendingCTI)
+    await patch(pendingCTI);
-    setReroutingCTI(false)
+    setReroutingCTI(false);
-  }
+  };
 
   const deleteTicket = async () => {
-    if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
+    if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return;
-    await api.delete(`/tickets/${ticket.displayId}`)
+    await api.delete(`/tickets/${ticket.displayId}`);
-    navigate('/')
+    navigate('/');
-  }
+  };
 
   const submitComment = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    if (!ticket || !commentBody.trim()) return
+    if (!ticket || !commentBody.trim()) return;
-    setSubmittingComment(true)
+    setSubmittingComment(true);
     try {
       const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
         body: commentBody.trim(),
-      })
+      });
-      setTicket((t) => t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t)
+      setTicket((t) => (t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t));
-      setCommentBody('')
+      setCommentBody('');
-      setPreview(false)
+      setPreview(false);
     } finally {
-      setSubmittingComment(false)
+      setSubmittingComment(false);
-    }
     }
+  };
 
   const deleteComment = async (commentId: string) => {
-    if (!ticket) return
+    if (!ticket) return;
-    await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
+    await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`);
-    setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
+    setTicket((t) => (t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t));
-  }
+  };
 
   const toggleLog = (logId: string) => {
     setExpandedLogs((prev) => {
-      const next = new Set(prev)
+      const next = new Set(prev);
-      if (next.has(logId)) next.delete(logId)
+      if (next.has(logId)) next.delete(logId);
-      else next.add(logId)
+      else next.add(logId);
-      return next
+      return next;
-    })
+    });
-  }
+  };
 
   if (loading) {
     return (
@@ -186,7 +194,7 @@ export default function TicketDetail() {
           Loading...
         </div>
       </Layout>
-    )
+    );
   }
 
   if (!ticket) {
@@ -196,11 +204,11 @@ export default function TicketDetail() {
           Ticket not found
         </div>
       </Layout>
-    )
+    );
   }
 
-  const commentCount = ticket.comments?.length ?? 0
+  const commentCount = ticket.comments?.length ?? 0;
-  const agentUsers = users.filter((u) => u.role !== 'SERVICE')
+  const agentUsers = users.filter((u) => u.role !== 'SERVICE');
 
   // Status options: CLOSED only for admins
   const statusOptions: { value: TicketStatus; label: string }[] = [
@@ -208,7 +216,7 @@ export default function TicketDetail() {
     { value: 'IN_PROGRESS', label: 'In Progress' },
     { value: 'RESOLVED', label: 'Resolved' },
     ...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
-  ]
+  ];
 
   return (
     <Layout>
@@ -264,7 +272,11 @@ export default function TicketDetail() {
               {(
                 [
                   { key: 'overview', icon: FileText, label: 'Overview' },
-                  { key: 'comments', icon: MessageSquare, label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}` },
+                  {
+                    key: 'comments',
+                    icon: MessageSquare,
+                    label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}`,
+                  },
                   { key: 'audit', icon: ClipboardList, label: 'Audit Log' },
                 ] as const
               ).map(({ key, icon: Icon, label }) => (
@@ -311,9 +323,7 @@ export default function TicketDetail() {
                   </div>
                 ) : (
                   <div className="prose text-sm text-gray-300">
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
-                      {ticket.overview}
-                    </ReactMarkdown>
                   </div>
                 )}
               </div>
@@ -328,7 +338,7 @@ export default function TicketDetail() {
                       {/* Avatar + spine */}
                       <div className="flex flex-col items-center">
                         <Avatar name={comment.author.displayName} size="md" />
-                        {i < (ticket.comments!.length - 1) && (
+                        {i < ticket.comments!.length - 1 && (
                           <div className="flex-1 w-px bg-gray-800 mt-2" />
                         )}
                       </div>
@@ -345,7 +355,9 @@ export default function TicketDetail() {
                             >
                               {expandedCommentDates.has(comment.id)
                                 ? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
-                                : formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
+                                : formatDistanceToNow(new Date(comment.createdAt), {
+                                    addSuffix: true,
+                                  })}
                             </button>
                           </div>
                           {(comment.authorId === authUser?.id || isAdmin) && (
@@ -358,17 +370,13 @@ export default function TicketDetail() {
                           )}
                         </div>
                         <div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
-                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                          <ReactMarkdown remarkPlugins={[remarkGfm]}>{comment.body}</ReactMarkdown>
-                            {comment.body}
-                          </ReactMarkdown>
                         </div>
                       </div>
                     </div>
                   ))
                 ) : (
-                  <div className="py-12 text-center text-sm text-gray-600">
+                  <div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
-                    No comments yet
-                  </div>
                 )}
 
                 {/* Composer */}
@@ -393,10 +401,11 @@ export default function TicketDetail() {
                     <form onSubmit={submitComment} className="p-3">
                       {preview ? (
                         <div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
-                          {commentBody.trim()
+                          {commentBody.trim() ? (
-                            ? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
+                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
-                            : <span className="text-gray-600 italic">Nothing to preview</span>
+                          ) : (
-                          }
+                            <span className="text-gray-600 italic">Nothing to preview</span>
+                          )}
                         </div>
                       ) : (
                         <textarea
@@ -407,8 +416,8 @@ export default function TicketDetail() {
                           className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none mb-3"
                           onKeyDown={(e) => {
                             if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                              e.preventDefault()
+                              e.preventDefault();
-                              submitComment(e as unknown as React.FormEvent)
+                              submitComment(e as unknown as React.FormEvent);
                             }
                           }}
                         />
@@ -438,15 +447,17 @@ export default function TicketDetail() {
                 ) : (
                   <div>
                     {auditLogs.map((log, i) => {
-                      const hasDetail = !!log.detail
+                      const hasDetail = !!log.detail;
-                      const isExpanded = expandedLogs.has(log.id)
+                      const isExpanded = expandedLogs.has(log.id);
-                      const isComment = COMMENT_ACTIONS.has(log.action)
+                      const isComment = COMMENT_ACTIONS.has(log.action);
 
                       return (
                         <div key={log.id} className="flex gap-4">
                           {/* Timeline */}
                           <div className="flex flex-col items-center w-5 flex-shrink-0">
-                            <div className={`w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0 ${AUDIT_COLORS[log.action] ?? 'bg-gray-500'}`} />
+                            <div
+                              className={`w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0 ${AUDIT_COLORS[log.action] ?? 'bg-gray-500'}`}
+                            />
                             {i < auditLogs.length - 1 && (
                               <div className="w-px flex-1 bg-gray-800 my-1" />
                             )}
@@ -459,11 +470,17 @@ export default function TicketDetail() {
                               onClick={() => hasDetail && toggleLog(log.id)}
                             >
                               <p className="text-sm text-gray-300">
-                                <span className="font-medium text-gray-100">{log.user.displayName}</span>
+                                <span className="font-medium text-gray-100">
-                                {' '}{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
+                                  {log.user.displayName}
+                                </span>{' '}
+                                {AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
                                 {hasDetail && (
                                   <span className="ml-1 inline-flex items-center text-gray-600">
-                                    {isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+                                    {isExpanded ? (
+                                      <ChevronDown size={13} />
+                                    ) : (
+                                      <ChevronRight size={13} />
+                                    )}
                                   </span>
                                 )}
                               </p>
@@ -490,7 +507,7 @@ export default function TicketDetail() {
                             )}
                           </div>
                         </div>
-                      )
+                      );
                     })}
                   </div>
                 )}
@@ -501,11 +518,12 @@ export default function TicketDetail() {
 
         {/* ── Sidebar ── */}
         <div className="w-64 flex-shrink-0 sticky top-0 space-y-3">
-
           {/* Ticket Summary */}
           <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
             <div className="px-4 py-3">
-              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Ticket Summary</p>
+              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                Ticket Summary
+              </p>
             </div>
 
             {/* Status */}
@@ -550,7 +568,9 @@ export default function TicketDetail() {
               {[
                 { key: 'created', label: 'Created', date: ticket.createdAt },
                 { key: 'modified', label: 'Modified', date: ticket.updatedAt },
-                ...(ticket.resolvedAt ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }] : []),
+                ...(ticket.resolvedAt
+                  ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }]
+                  : []),
               ].map(({ key, label, date }) => (
                 <div key={key}>
                   <p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
@@ -612,8 +632,8 @@ export default function TicketDetail() {
               <button
                 key={s.value}
                 onClick={async () => {
-                  await patch({ status: s.value })
+                  await patch({ status: s.value });
-                  setEditingStatus(false)
+                  setEditingStatus(false);
                 }}
                 className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
                   ticket.status === s.value
@@ -639,8 +659,8 @@ export default function TicketDetail() {
               <button
                 key={s.value}
                 onClick={async () => {
-                  await patch({ severity: s.value })
+                  await patch({ severity: s.value });
-                  setEditingSeverity(false)
+                  setEditingSeverity(false);
                 }}
                 className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
                   ticket.severity === s.value
@@ -650,7 +670,9 @@ export default function TicketDetail() {
               >
                 <SeverityBadge severity={s.value} />
                 <span className="text-sm text-gray-400">{s.label.split(' — ')[1]}</span>
-                {ticket.severity === s.value && <Check size={14} className="ml-auto text-blue-400" />}
+                {ticket.severity === s.value && (
+                  <Check size={14} className="ml-auto text-blue-400" />
+                )}
               </button>
             ))}
           </div>
@@ -662,8 +684,8 @@ export default function TicketDetail() {
           <div className="space-y-2">
             <button
               onClick={async () => {
-                await patch({ assigneeId: null })
+                await patch({ assigneeId: null });
-                setEditingAssignee(false)
+                setEditingAssignee(false);
               }}
               className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
                 !ticket.assigneeId
@@ -678,8 +700,8 @@ export default function TicketDetail() {
               <button
                 key={u.id}
                 onClick={async () => {
-                  await patch({ assigneeId: u.id })
+                  await patch({ assigneeId: u.id });
-                  setEditingAssignee(false)
+                  setEditingAssignee(false);
                 }}
                 className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
                   ticket.assigneeId === u.id
@@ -689,7 +711,9 @@ export default function TicketDetail() {
               >
                 <Avatar name={u.displayName} size="sm" />
                 <span className="text-sm text-gray-300">{u.displayName}</span>
-                {ticket.assigneeId === u.id && <Check size={14} className="ml-auto text-blue-400" />}
+                {ticket.assigneeId === u.id && (
+                  <Check size={14} className="ml-auto text-blue-400" />
+                )}
               </button>
             ))}
           </div>
@@ -725,5 +749,5 @@ export default function TicketDetail() {
         </Modal>
       )}
     </Layout>
-  )
+  );
 }

client/src/pages/admin/CTI.tsx

@@ -1,136 +1,144 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
-import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react'
+import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react';
-import api from '../../api/client'
+import api from '../../api/client';
-import Layout from '../../components/Layout'
+import Layout from '../../components/Layout';
-import Modal from '../../components/Modal'
+import Modal from '../../components/Modal';
-import { Category, CTIType, Item } from '../../types'
+import { Category, CTIType, Item } from '../../types';
 
-type PanelItem = { id: string; name: string }
+type PanelItem = { id: string; name: string };
 
 interface NameModalState {
-  open: boolean
+  open: boolean;
-  mode: 'add' | 'edit'
+  mode: 'add' | 'edit';
-  panel: 'category' | 'type' | 'item'
+  panel: 'category' | 'type' | 'item';
-  item?: PanelItem
+  item?: PanelItem;
 }
 
 export default function AdminCTI() {
-  const [categories, setCategories] = useState<Category[]>([])
+  const [categories, setCategories] = useState<Category[]>([]);
-  const [types, setTypes] = useState<CTIType[]>([])
+  const [types, setTypes] = useState<CTIType[]>([]);
-  const [items, setItems] = useState<Item[]>([])
+  const [items, setItems] = useState<Item[]>([]);
 
-  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
+  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
-  const [selectedType, setSelectedType] = useState<CTIType | null>(null)
+  const [selectedType, setSelectedType] = useState<CTIType | null>(null);
 
-  const [nameModal, setNameModal] = useState<NameModalState>({ open: false, mode: 'add', panel: 'category' })
+  const [nameModal, setNameModal] = useState<NameModalState>({
-  const [nameValue, setNameValue] = useState('')
+    open: false,
-  const [submitting, setSubmitting] = useState(false)
+    mode: 'add',
+    panel: 'category',
+  });
+  const [nameValue, setNameValue] = useState('');
+  const [submitting, setSubmitting] = useState(false);
 
   const fetchCategories = () =>
-    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data))
+    api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data));
 
   const fetchTypes = (categoryId: string) =>
-    api
+    api.get<CTIType[]>('/cti/types', { params: { categoryId } }).then((r) => setTypes(r.data));
-      .get<CTIType[]>('/cti/types', { params: { categoryId } })
-      .then((r) => setTypes(r.data))
 
   const fetchItems = (typeId: string) =>
-    api.get<Item[]>('/cti/items', { params: { typeId } }).then((r) => setItems(r.data))
+    api.get<Item[]>('/cti/items', { params: { typeId } }).then((r) => setItems(r.data));
 
-  useEffect(() => { fetchCategories() }, [])
+  useEffect(() => {
+    fetchCategories();
+  }, []);
 
   const selectCategory = (cat: Category) => {
-    setSelectedCategory(cat)
+    setSelectedCategory(cat);
-    setSelectedType(null)
+    setSelectedType(null);
-    setItems([])
+    setItems([]);
-    fetchTypes(cat.id)
+    fetchTypes(cat.id);
-  }
+  };
 
   const selectType = (type: CTIType) => {
-    setSelectedType(type)
+    setSelectedType(type);
-    fetchItems(type.id)
+    fetchItems(type.id);
-  }
+  };
 
   const openAdd = (panel: 'category' | 'type' | 'item') => {
-    setNameValue('')
+    setNameValue('');
-    setNameModal({ open: true, mode: 'add', panel })
+    setNameModal({ open: true, mode: 'add', panel });
-  }
+  };
 
   const openEdit = (panel: 'category' | 'type' | 'item', item: PanelItem) => {
-    setNameValue(item.name)
+    setNameValue(item.name);
-    setNameModal({ open: true, mode: 'edit', panel, item })
+    setNameModal({ open: true, mode: 'edit', panel, item });
-  }
+  };
 
-  const closeModal = () => setNameModal((m) => ({ ...m, open: false }))
+  const closeModal = () => setNameModal((m) => ({ ...m, open: false }));
 
   const handleSave = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    if (!nameValue.trim()) return
+    if (!nameValue.trim()) return;
-    setSubmitting(true)
+    setSubmitting(true);
     try {
-      const { mode, panel, item } = nameModal
+      const { mode, panel, item } = nameModal;
       if (mode === 'add') {
         if (panel === 'category') {
-          await api.post('/cti/categories', { name: nameValue.trim() })
+          await api.post('/cti/categories', { name: nameValue.trim() });
-          await fetchCategories()
+          await fetchCategories();
         } else if (panel === 'type' && selectedCategory) {
-          await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id })
+          await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id });
-          await fetchTypes(selectedCategory.id)
+          await fetchTypes(selectedCategory.id);
         } else if (panel === 'item' && selectedType) {
-          await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id })
+          await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id });
-          await fetchItems(selectedType.id)
+          await fetchItems(selectedType.id);
         }
       } else {
-        if (!item) return
+        if (!item) return;
         if (panel === 'category') {
-          await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() })
+          await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() });
-          await fetchCategories()
+          await fetchCategories();
-          if (selectedCategory?.id === item.id) setSelectedCategory((c) => c ? { ...c, name: nameValue.trim() } : c)
+          if (selectedCategory?.id === item.id)
+            setSelectedCategory((c) => (c ? { ...c, name: nameValue.trim() } : c));
         } else if (panel === 'type') {
-          await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() })
+          await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() });
-          if (selectedCategory) await fetchTypes(selectedCategory.id)
+          if (selectedCategory) await fetchTypes(selectedCategory.id);
-          if (selectedType?.id === item.id) setSelectedType((t) => t ? { ...t, name: nameValue.trim() } : t)
+          if (selectedType?.id === item.id)
+            setSelectedType((t) => (t ? { ...t, name: nameValue.trim() } : t));
         } else if (panel === 'item') {
-          await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() })
+          await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() });
-          if (selectedType) await fetchItems(selectedType.id)
+          if (selectedType) await fetchItems(selectedType.id);
         }
       }
-      closeModal()
+      closeModal();
     } finally {
-      setSubmitting(false)
+      setSubmitting(false);
-    }
     }
+  };
 
   const handleDelete = async (panel: 'category' | 'type' | 'item', item: PanelItem) => {
-    if (!confirm(`Delete "${item.name}"? This will also delete all child records.`)) return
+    if (!confirm(`Delete "${item.name}"? This will also delete all child records.`)) return;
     if (panel === 'category') {
-      await api.delete(`/cti/categories/${item.id}`)
+      await api.delete(`/cti/categories/${item.id}`);
       if (selectedCategory?.id === item.id) {
-        setSelectedCategory(null)
+        setSelectedCategory(null);
-        setSelectedType(null)
+        setSelectedType(null);
-        setTypes([])
+        setTypes([]);
-        setItems([])
+        setItems([]);
       }
-      await fetchCategories()
+      await fetchCategories();
     } else if (panel === 'type') {
-      await api.delete(`/cti/types/${item.id}`)
+      await api.delete(`/cti/types/${item.id}`);
       if (selectedType?.id === item.id) {
-        setSelectedType(null)
+        setSelectedType(null);
-        setItems([])
+        setItems([]);
       }
-      if (selectedCategory) await fetchTypes(selectedCategory.id)
+      if (selectedCategory) await fetchTypes(selectedCategory.id);
     } else {
-      await api.delete(`/cti/items/${item.id}`)
+      await api.delete(`/cti/items/${item.id}`);
-      if (selectedType) await fetchItems(selectedType.id)
+      if (selectedType) await fetchItems(selectedType.id);
-    }
     }
+  };
 
-  const panelClass = 'bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col'
+  const panelClass = 'bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col';
-  const panelHeaderClass = 'flex items-center justify-between px-4 py-3 border-b border-gray-800'
+  const panelHeaderClass = 'flex items-center justify-between px-4 py-3 border-b border-gray-800';
   const itemClass = (active: boolean) =>
     `flex items-center justify-between px-4 py-2.5 cursor-pointer group transition-colors ${
-      active ? 'bg-blue-600/20 border-l-2 border-blue-500' : 'hover:bg-gray-800 border-l-2 border-transparent'
+      active
-    }`
+        ? 'bg-blue-600/20 border-l-2 border-blue-500'
+        : 'hover:bg-gray-800 border-l-2 border-transparent'
+    }`;
 
   return (
     <Layout title="CTI Configuration">
@@ -159,13 +167,19 @@ export default function AdminCTI() {
                   <span className="text-sm text-gray-300">{cat.name}</span>
                   <div className="flex items-center gap-1">
                     <button
-                      onClick={(e) => { e.stopPropagation(); openEdit('category', cat) }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEdit('category', cat);
+                      }}
                       className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
                     >
                       <Pencil size={13} />
                     </button>
                     <button
-                      onClick={(e) => { e.stopPropagation(); handleDelete('category', cat) }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete('category', cat);
+                      }}
                       className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
                     >
                       <Trash2 size={13} />
@@ -211,13 +225,19 @@ export default function AdminCTI() {
                   <span className="text-sm text-gray-300">{type.name}</span>
                   <div className="flex items-center gap-1">
                     <button
-                      onClick={(e) => { e.stopPropagation(); openEdit('type', type) }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEdit('type', type);
+                      }}
                       className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
                     >
                       <Pencil size={13} />
                     </button>
                     <button
-                      onClick={(e) => { e.stopPropagation(); handleDelete('type', type) }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete('type', type);
+                      }}
                       className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
                     >
                       <Trash2 size={13} />
@@ -259,13 +279,19 @@ export default function AdminCTI() {
                   <span className="text-sm text-gray-300">{item.name}</span>
                   <div className="flex items-center gap-1">
                     <button
-                      onClick={(e) => { e.stopPropagation(); openEdit('item', item) }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEdit('item', item);
+                      }}
                       className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
                     >
                       <Pencil size={13} />
                     </button>
                     <button
-                      onClick={(e) => { e.stopPropagation(); handleDelete('item', item) }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete('item', item);
+                      }}
                       className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
                     >
                       <Trash2 size={13} />
@@ -316,5 +342,5 @@ export default function AdminCTI() {
         </Modal>
       )}
     </Layout>
-  )
+  );
 }

client/src/pages/admin/Users.tsx

@@ -1,17 +1,17 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
-import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react'
+import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react';
-import api from '../../api/client'
+import api from '../../api/client';
-import Layout from '../../components/Layout'
+import Layout from '../../components/Layout';
-import Modal from '../../components/Modal'
+import Modal from '../../components/Modal';
-import { User, Role } from '../../types'
+import { User, Role } from '../../types';
-import { useAuth } from '../../contexts/AuthContext'
+import { useAuth } from '../../contexts/AuthContext';
 
 interface UserForm {
-  username: string
+  username: string;
-  email: string
+  email: string;
-  displayName: string
+  displayName: string;
-  password: string
+  password: string;
-  role: Role
+  role: Role;
 }
 
 const BLANK_FORM: UserForm = {
@@ -20,136 +20,149 @@ const BLANK_FORM: UserForm = {
   displayName: '',
   password: '',
   role: 'AGENT',
-}
+};
 
 const ROLE_LABELS: Record<Role, string> = {
   ADMIN: 'Admin',
   AGENT: 'Agent',
   USER: 'User',
   SERVICE: 'Service',
-}
+};
 
 const ROLE_BADGE: Record<Role, string> = {
   ADMIN: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
   AGENT: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
   USER: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
   SERVICE: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
-}
+};
 
 const ROLE_DESCRIPTIONS: Record<Role, string> = {
   ADMIN: 'Full access — manage users, CTI config, close and delete tickets',
   AGENT: 'Manage tickets — create, update, assign, comment, change status',
   USER: 'Basic access — view tickets and add comments only',
   SERVICE: 'Automation account — authenticates via API key, no password login',
-}
+};
 
 export default function AdminUsers() {
-  const { user: authUser } = useAuth()
+  const { user: authUser } = useAuth();
-  const [users, setUsers] = useState<User[]>([])
+  const [users, setUsers] = useState<User[]>([]);
-  const [modal, setModal] = useState<'add' | 'edit' | null>(null)
+  const [modal, setModal] = useState<'add' | 'edit' | null>(null);
-  const [selected, setSelected] = useState<User | null>(null)
+  const [selected, setSelected] = useState<User | null>(null);
-  const [form, setForm] = useState<UserForm>(BLANK_FORM)
+  const [form, setForm] = useState<UserForm>(BLANK_FORM);
-  const [submitting, setSubmitting] = useState(false)
+  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState('')
+  const [error, setError] = useState('');
-  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+  const [copiedKey, setCopiedKey] = useState<string | null>(null);
-  const [newApiKey, setNewApiKey] = useState<string | null>(null)
+  const [newApiKey, setNewApiKey] = useState<string | null>(null);
 
   const fetchUsers = () => {
-    api.get<User[]>('/users').then((r) => setUsers(r.data))
+    api.get<User[]>('/users').then((r) => setUsers(r.data));
-  }
+  };
 
-  useEffect(() => { fetchUsers() }, [])
+  useEffect(() => {
+    fetchUsers();
+  }, []);
 
   const openAdd = () => {
-    setForm(BLANK_FORM)
+    setForm(BLANK_FORM);
-    setError('')
+    setError('');
-    setNewApiKey(null)
+    setNewApiKey(null);
-    setModal('add')
+    setModal('add');
-  }
+  };
 
   const openEdit = (u: User) => {
-    setSelected(u)
+    setSelected(u);
-    setForm({ username: u.username, email: u.email, displayName: u.displayName, password: '', role: u.role })
+    setForm({
-    setError('')
+      username: u.username,
-    setNewApiKey(null)
+      email: u.email,
-    setModal('edit')
+      displayName: u.displayName,
-  }
+      password: '',
+      role: u.role,
+    });
+    setError('');
+    setNewApiKey(null);
+    setModal('edit');
+  };
 
   const closeModal = () => {
-    setModal(null)
+    setModal(null);
-    setSelected(null)
+    setSelected(null);
-    setNewApiKey(null)
+    setNewApiKey(null);
-    fetchUsers()
+    fetchUsers();
-  }
+  };
 
   const handleAdd = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    setSubmitting(true)
+    setSubmitting(true);
-    setError('')
+    setError('');
     try {
       const payload: Record<string, string> = {
         username: form.username,
         email: form.email,
         displayName: form.displayName,
         role: form.role,
-      }
+      };
-      if (form.password) payload.password = form.password
+      if (form.password) payload.password = form.password;
-      const res = await api.post<User>('/users', payload)
+      const res = await api.post<User>('/users', payload);
-      if (res.data.apiKey) setNewApiKey(res.data.apiKey)
+      if (res.data.apiKey) setNewApiKey(res.data.apiKey);
-      else closeModal()
+      else closeModal();
     } catch (err: unknown) {
-      const e = err as { response?: { data?: { error?: string } } }
+      const e = err as { response?: { data?: { error?: string } } };
-      setError(e.response?.data?.error ?? 'Failed to create user')
+      setError(e.response?.data?.error ?? 'Failed to create user');
     } finally {
-      setSubmitting(false)
+      setSubmitting(false);
-    }
     }
+  };
 
   const handleEdit = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    if (!selected) return
+    if (!selected) return;
-    setSubmitting(true)
+    setSubmitting(true);
-    setError('')
+    setError('');
     try {
       const payload: Record<string, string> = {
         email: form.email,
         displayName: form.displayName,
         role: form.role,
-      }
+      };
-      if (form.password) payload.password = form.password
+      if (form.password) payload.password = form.password;
-      await api.patch(`/users/${selected.id}`, payload)
+      await api.patch(`/users/${selected.id}`, payload);
-      closeModal()
+      closeModal();
     } catch (err: unknown) {
-      const e = err as { response?: { data?: { error?: string } } }
+      const e = err as { response?: { data?: { error?: string } } };
-      setError(e.response?.data?.error ?? 'Failed to update user')
+      setError(e.response?.data?.error ?? 'Failed to update user');
     } finally {
-      setSubmitting(false)
+      setSubmitting(false);
-    }
     }
+  };
 
   const handleDelete = async (u: User) => {
-    if (!confirm(`Delete user "${u.displayName}"?`)) return
+    if (!confirm(`Delete user "${u.displayName}"?`)) return;
-    await api.delete(`/users/${u.id}`)
+    await api.delete(`/users/${u.id}`);
-    fetchUsers()
+    fetchUsers();
-  }
+  };
 
   const handleRegenerateKey = async (u: User) => {
-    if (!confirm(`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`)) return
+    if (
-    const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true })
+      !confirm(
-    setNewApiKey(res.data.apiKey ?? null)
+        `Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`,
-    setSelected(u)
+      )
-    setModal('edit')
+    )
-  }
+      return;
+    const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true });
+    setNewApiKey(res.data.apiKey ?? null);
+    setSelected(u);
+    setModal('edit');
+  };
 
   const copyToClipboard = (key: string) => {
-    navigator.clipboard.writeText(key)
+    navigator.clipboard.writeText(key);
-    setCopiedKey(key)
+    setCopiedKey(key);
-    setTimeout(() => setCopiedKey(null), 2000)
+    setTimeout(() => setCopiedKey(null), 2000);
-  }
+  };
 
   const inputClass =
-    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
-  const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
+  const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
 
   return (
     <Layout
@@ -189,7 +202,9 @@ export default function AdminUsers() {
                 <td className="px-5 py-3 font-medium text-gray-100">{u.displayName}</td>
                 <td className="px-5 py-3 text-gray-500 font-mono text-xs">{u.username}</td>
                 <td className="px-5 py-3">
-                  <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium border ${ROLE_BADGE[u.role]}`}>
+                  <span
+                    className={`inline-flex px-2 py-0.5 rounded text-xs font-medium border ${ROLE_BADGE[u.role]}`}
+                  >
                     {ROLE_LABELS[u.role]}
                   </span>
                 </td>
@@ -237,7 +252,7 @@ export default function AdminUsers() {
             <div className="space-y-4">
               <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4">
                 <p className="text-sm font-medium text-amber-400 mb-2">
-                  API Key — copy it now, it won't be shown again
+                  API Key — copy it now, it won&apos;t be shown again
                 </p>
                 <div className="flex items-center gap-2">
                   <code className="flex-1 text-xs bg-gray-800 border border-gray-700 text-gray-300 rounded px-3 py-2 font-mono break-all">
@@ -354,5 +369,5 @@ export default function AdminUsers() {
         </Modal>
       )}
     </Layout>
-  )
+  );
 }

client/src/types/index.ts

@@ -1,74 +1,74 @@
-export type Role = 'ADMIN' | 'AGENT' | 'USER' | 'SERVICE'
+export type Role = 'ADMIN' | 'AGENT' | 'USER' | 'SERVICE';
-export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED'
+export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED';
 
 export interface User {
-  id: string
+  id: string;
-  username: string
+  username: string;
-  displayName: string
+  displayName: string;
-  email: string
+  email: string;
-  role: Role
+  role: Role;
-  apiKey?: string
+  apiKey?: string;
-  createdAt?: string
+  createdAt?: string;
 }
 
 export interface Category {
-  id: string
+  id: string;
-  name: string
+  name: string;
 }
 
 export interface CTIType {
-  id: string
+  id: string;
-  name: string
+  name: string;
-  categoryId: string
+  categoryId: string;
-  category?: Category
+  category?: Category;
 }
 
 export interface Item {
-  id: string
+  id: string;
-  name: string
+  name: string;
-  typeId: string
+  typeId: string;
-  type?: CTIType & { category?: Category }
+  type?: CTIType & { category?: Category };
 }
 
 export interface Comment {
-  id: string
+  id: string;
-  body: string
+  body: string;
-  ticketId: string
+  ticketId: string;
-  authorId: string
+  authorId: string;
-  author: Pick<User, 'id' | 'username' | 'displayName'>
+  author: Pick<User, 'id' | 'username' | 'displayName'>;
-  createdAt: string
+  createdAt: string;
 }
 
 export interface AuditLog {
-  id: string
+  id: string;
-  ticketId: string
+  ticketId: string;
-  userId: string
+  userId: string;
-  action: string
+  action: string;
-  detail: string | null
+  detail: string | null;
-  createdAt: string
+  createdAt: string;
-  user: Pick<User, 'id' | 'username' | 'displayName'>
+  user: Pick<User, 'id' | 'username' | 'displayName'>;
 }
 
 export interface Ticket {
-  id: string
+  id: string;
-  displayId: string
+  displayId: string;
-  title: string
+  title: string;
-  overview: string
+  overview: string;
-  severity: number
+  severity: number;
-  status: TicketStatus
+  status: TicketStatus;
-  categoryId: string
+  categoryId: string;
-  typeId: string
+  typeId: string;
-  itemId: string
+  itemId: string;
-  assigneeId: string | null
+  assigneeId: string | null;
-  createdById: string
+  createdById: string;
-  resolvedAt: string | null
+  resolvedAt: string | null;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-  category: Category
+  category: Category;
-  type: CTIType
+  type: CTIType;
-  item: Item
+  item: Item;
-  assignee: Pick<User, 'id' | 'username' | 'displayName'> | null
+  assignee: Pick<User, 'id' | 'username' | 'displayName'> | null;
-  createdBy: Pick<User, 'id' | 'username' | 'displayName'>
+  createdBy: Pick<User, 'id' | 'username' | 'displayName'>;
-  comments?: Comment[]
+  comments?: Comment[];
-  _count?: { comments: number }
+  _count?: { comments: number };
 }

client/tailwind.config.js

@@ -5,4 +5,4 @@ export default {
     extend: {},
   },
   plugins: [],
-}
+};

client/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
@@ -8,4 +8,4 @@ export default defineConfig({
       '/api': 'http://localhost:3000',
     },
   },
-})
+});

docker-compose.yml

@@ -15,7 +15,7 @@ services:
     volumes:
       - postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
       interval: 5s
       timeout: 5s
       retries: 5
@@ -40,7 +40,7 @@ services:
     image: ${REGISTRY}/josh/ticketing-client:${TAG:-latest}
     restart: unless-stopped
     ports:
-      - "${PORT:-3080}:80"
+      - '${PORT:-3080}:80'
     depends_on:
       - server
     networks:

eslint.config.mjs

@@ -0,0 +1,78 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+export default [
+  {
+    ignores: [
+      '**/dist/**',
+      '**/node_modules/**',
+      '**/.vite/**',
+      '**/coverage/**',
+      'server/prisma/migrations/**',
+      'client/src/components/ui/**',
+    ],
+  },
+
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+
+  {
+    files: ['client/src/**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: { ...globals.browser },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+    },
+    settings: {
+      react: { version: 'detect' },
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+
+  {
+    files: ['server/src/**/*.ts', 'server/prisma/**/*.ts'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: { ...globals.node },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+
+  {
+    files: ['shared/**/*.ts'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+  },
+];

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "ticketing-system",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Internal ticketing system — monorepo root (tooling only)",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "npm run typecheck --prefix server && npm run typecheck --prefix client",
+    "test": "npm test --prefix server && npm test --prefix client"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "prettier": "^3.4.2",
+    "typescript-eslint": "^8.18.2"
+  }
+}

server/package.json

@@ -9,7 +9,10 @@
     "db:migrate": "prisma migrate dev",
     "db:push": "prisma db push",
     "db:generate": "prisma generate",
-    "db:seed": "tsx prisma/seed.ts"
+    "db:seed": "tsx prisma/seed.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@prisma/client": "^5.22.0",
@@ -18,8 +21,12 @@
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "express-async-errors": "^3.1.0",
+    "express-rate-limit": "^7.5.0",
     "jsonwebtoken": "^9.0.2",
     "node-cron": "^3.0.3",
+    "pino": "^9.5.0",
+    "pino-http": "^10.3.0",
+    "pino-pretty": "^13.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -29,8 +36,11 @@
     "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^22.10.0",
     "@types/node-cron": "^3.0.11",
+    "@types/supertest": "^6.0.2",
     "prisma": "^5.22.0",
+    "supertest": "^7.0.0",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
   }
 }

server/prisma/seed.ts

@@ -1,11 +1,11 @@
-import { PrismaClient } from '@prisma/client'
+import { PrismaClient } from '@prisma/client';
-import bcrypt from 'bcryptjs'
+import bcrypt from 'bcryptjs';
-import crypto from 'crypto'
+import crypto from 'crypto';
 
-const prisma = new PrismaClient()
+const prisma = new PrismaClient();
 
 async function main() {
-  console.log('Seeding database...')
+  console.log('Seeding database...');
 
   // Admin user
   await prisma.user.upsert({
@@ -18,11 +18,11 @@ async function main() {
       passwordHash: await bcrypt.hash('admin123', 12),
       role: 'ADMIN',
     },
-  })
+  });
 
   // Goddard — n8n service account
-  const apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
+  const apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
-  const goddard = await prisma.user.upsert({
+  await prisma.user.upsert({
     where: { username: 'goddard' },
     update: {},
     create: {
@@ -33,70 +33,73 @@ async function main() {
       role: 'SERVICE',
       apiKey,
     },
-  })
+  });
 
-  const existingGoddard = await prisma.user.findUnique({ where: { username: 'goddard' } })
+  const existingGoddard = await prisma.user.findUnique({ where: { username: 'goddard' } });
-  console.log(`\nGoddard API key: ${existingGoddard?.apiKey ?? apiKey}`)
+  console.log(`\nGoddard API key: ${existingGoddard?.apiKey ?? apiKey}`);
-  console.log('(This key is only displayed once on first seed — copy it now)\n')
+  console.log('(This key is only displayed once on first seed — copy it now)\n');
 
   // Sample CTI structure
   const theWrightServer = await prisma.category.upsert({
     where: { name: 'TheWrightServer' },
     update: {},
     create: { name: 'TheWrightServer' },
-  })
+  });
 
   const homelab = await prisma.category.upsert({
     where: { name: 'Homelab' },
     update: {},
     create: { name: 'Homelab' },
-  })
+  });
 
   const automation = await prisma.type.upsert({
     where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Automation' } },
     update: {},
     create: { name: 'Automation', categoryId: theWrightServer.id },
-  })
+  });
 
   const media = await prisma.type.upsert({
     where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Media' } },
     update: {},
     create: { name: 'Media', categoryId: theWrightServer.id },
-  })
+  });
 
   const infrastructure = await prisma.type.upsert({
     where: { categoryId_name: { categoryId: homelab.id, name: 'Infrastructure' } },
     update: {},
     create: { name: 'Infrastructure', categoryId: homelab.id },
-  })
+  });
 
   await prisma.item.upsert({
     where: { typeId_name: { typeId: automation.id, name: 'Backup' } },
     update: {},
     create: { name: 'Backup', typeId: automation.id },
-  })
+  });
 
   await prisma.item.upsert({
     where: { typeId_name: { typeId: automation.id, name: 'Sync' } },
     update: {},
     create: { name: 'Sync', typeId: automation.id },
-  })
+  });
 
   await prisma.item.upsert({
     where: { typeId_name: { typeId: media.id, name: 'Plex' } },
     update: {},
     create: { name: 'Plex', typeId: media.id },
-  })
+  });
 
   await prisma.item.upsert({
     where: { typeId_name: { typeId: infrastructure.id, name: 'Proxmox' } },
     update: {},
     create: { name: 'Proxmox', typeId: infrastructure.id },
-  })
+  });
 
-  console.log('Seed complete.')
+  console.log('Seed complete.');
 }
 
 main()
-  .catch((e) => { console.error(e); process.exit(1) })
+  .catch((e) => {
-  .finally(() => prisma.$disconnect())
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());

server/src/index.ts

@@ -1,41 +1,41 @@
-import 'express-async-errors'
+import 'express-async-errors';
-import express from 'express'
+import express from 'express';
-import cors from 'cors'
+import cors from 'cors';
-import dotenv from 'dotenv'
+import dotenv from 'dotenv';
 
-import authRoutes from './routes/auth'
+import authRoutes from './routes/auth';
-import ticketRoutes from './routes/tickets'
+import ticketRoutes from './routes/tickets';
-import ctiRoutes from './routes/cti'
+import ctiRoutes from './routes/cti';
-import userRoutes from './routes/users'
+import userRoutes from './routes/users';
-import { authenticate } from './middleware/auth'
+import { authenticate } from './middleware/auth';
-import { errorHandler } from './middleware/errorHandler'
+import { errorHandler } from './middleware/errorHandler';
-import { startAutoCloseJob } from './jobs/autoClose'
+import { startAutoCloseJob } from './jobs/autoClose';
 
-dotenv.config()
+dotenv.config();
 
 if (!process.env.JWT_SECRET) {
-  console.error('FATAL: JWT_SECRET is not set')
+  console.error('FATAL: JWT_SECRET is not set');
-  process.exit(1)
+  process.exit(1);
 }
 
-const app = express()
+const app = express();
 
-app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }))
+app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }));
-app.use(express.json())
+app.use(express.json());
 
 // Public
-app.use('/api/auth', authRoutes)
+app.use('/api/auth', authRoutes);
 
 // Protected
-app.use('/api/tickets', authenticate, ticketRoutes)
+app.use('/api/tickets', authenticate, ticketRoutes);
-app.use('/api/cti', authenticate, ctiRoutes)
+app.use('/api/cti', authenticate, ctiRoutes);
-app.use('/api/users', authenticate, userRoutes)
+app.use('/api/users', authenticate, userRoutes);
 
-app.use(errorHandler)
+app.use(errorHandler);
 
-startAutoCloseJob()
+startAutoCloseJob();
 
-const PORT = Number(process.env.PORT) || 3000
+const PORT = Number(process.env.PORT) || 3000;
 app.listen(PORT, () => {
-  console.log(`Server running on port ${PORT}`)
+  console.log(`Server running on port ${PORT}`);
-})
+});

server/src/jobs/autoClose.ts

@@ -1,11 +1,11 @@
-import cron from 'node-cron'
+import cron from 'node-cron';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
 
 export function startAutoCloseJob() {
   // Run every hour — closes RESOLVED tickets that have been resolved for 14+ days
   cron.schedule('0 * * * *', async () => {
-    const twoWeeksAgo = new Date()
+    const twoWeeksAgo = new Date();
-    twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
+    twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
 
     const result = await prisma.ticket.updateMany({
       where: {
@@ -13,12 +13,12 @@ export function startAutoCloseJob() {
         resolvedAt: { lte: twoWeeksAgo },
       },
       data: { status: 'CLOSED' },
-    })
+    });
 
     if (result.count > 0) {
-      console.log(`[AutoClose] Closed ${result.count} ticket(s) after 2-week resolution period`)
+      console.log(`[AutoClose] Closed ${result.count} ticket(s) after 2-week resolution period`);
     }
-  })
+  });
 
-  console.log('[AutoClose] Job scheduled — runs every hour')
+  console.log('[AutoClose] Job scheduled — runs every hour');
 }

server/src/lib/prisma.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
+import { PrismaClient } from '@prisma/client';
 
-const prisma = new PrismaClient()
+const prisma = new PrismaClient();
 
-export default prisma
+export default prisma;

server/src/middleware/auth.ts

@@ -1,69 +1,57 @@
-import { Request, Response, NextFunction } from 'express'
+import { Request, Response, NextFunction } from 'express';
-import jwt from 'jsonwebtoken'
+import jwt from 'jsonwebtoken';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
 
 export interface AuthRequest extends Request {
   user?: {
-    id: string
+    id: string;
-    role: string
+    role: string;
-    username: string
+    username: string;
-  }
+  };
 }
 
-export const authenticate = async (
+export const authenticate = async (req: AuthRequest, res: Response, next: NextFunction) => {
-  req: AuthRequest,
+  const apiKey = req.headers['x-api-key'] as string | undefined;
-  res: Response,
-  next: NextFunction
-) => {
-  const apiKey = req.headers['x-api-key'] as string | undefined
 
   if (apiKey) {
-    const user = await prisma.user.findUnique({ where: { apiKey } })
+    const user = await prisma.user.findUnique({ where: { apiKey } });
     if (!user || user.role !== 'SERVICE') {
-      return res.status(401).json({ error: 'Invalid API key' })
+      return res.status(401).json({ error: 'Invalid API key' });
     }
-    req.user = { id: user.id, role: user.role, username: user.username }
+    req.user = { id: user.id, role: user.role, username: user.username };
-    return next()
+    return next();
   }
 
-  const authHeader = req.headers.authorization
+  const authHeader = req.headers.authorization;
   if (!authHeader?.startsWith('Bearer ')) {
-    return res.status(401).json({ error: 'Unauthorized' })
+    return res.status(401).json({ error: 'Unauthorized' });
   }
 
-  const token = authHeader.split(' ')[1]
+  const token = authHeader.split(' ')[1];
   try {
     const payload = jwt.verify(token, process.env.JWT_SECRET!) as {
-      id: string
+      id: string;
-      role: string
+      role: string;
-      username: string
+      username: string;
-    }
+    };
-    req.user = payload
+    req.user = payload;
-    next()
+    next();
   } catch {
-    return res.status(401).json({ error: 'Invalid or expired token' })
+    return res.status(401).json({ error: 'Invalid or expired token' });
   }
-}
+};
 
-export const requireAdmin = (
+export const requireAdmin = (req: AuthRequest, res: Response, next: NextFunction) => {
-  req: AuthRequest,
-  res: Response,
-  next: NextFunction
-) => {
   if (req.user?.role !== 'ADMIN') {
-    return res.status(403).json({ error: 'Admin access required' })
+    return res.status(403).json({ error: 'Admin access required' });
   }
-  next()
+  next();
-}
+};
 
 // Blocks USER role — allows ADMIN, AGENT, SERVICE
-export const requireAgent = (
+export const requireAgent = (req: AuthRequest, res: Response, next: NextFunction) => {
-  req: AuthRequest,
-  res: Response,
-  next: NextFunction
-) => {
   if (req.user?.role === 'USER') {
-    return res.status(403).json({ error: 'Insufficient permissions' })
+    return res.status(403).json({ error: 'Insufficient permissions' });
   }
-  next()
+  next();
-}
+};

server/src/middleware/errorHandler.ts

@@ -1,29 +1,31 @@
-import { Request, Response, NextFunction } from 'express'
+import { Request, Response, NextFunction } from 'express';
-import { ZodError } from 'zod'
+import { ZodError } from 'zod';
 
-export function errorHandler(
+type ErrorLike = {
-  err: any,
+  code?: string;
-  req: Request,
+  status?: number;
-  res: Response,
+  statusCode?: number;
-  next: NextFunction
+  message?: string;
-) {
+};
-  console.error(err)
+
+export function errorHandler(err: unknown, _req: Request, res: Response, _next: NextFunction) {
+  console.error(err);
 
   if (err instanceof ZodError) {
-    return res.status(400).json({ error: 'Validation error', details: err.flatten() })
+    return res.status(400).json({ error: 'Validation error', details: err.flatten() });
   }
 
-  // Prisma unique constraint violation
+  const e = (err ?? {}) as ErrorLike;
-  if (err.code === 'P2002') {
+
-    return res.status(409).json({ error: 'A record with that value already exists' })
+  if (e.code === 'P2002') {
+    return res.status(409).json({ error: 'A record with that value already exists' });
   }
 
-  // Prisma record not found
+  if (e.code === 'P2025') {
-  if (err.code === 'P2025') {
+    return res.status(404).json({ error: 'Record not found' });
-    return res.status(404).json({ error: 'Record not found' })
   }
 
-  const status = err.status || err.statusCode || 500
+  const status = e.status || e.statusCode || 500;
-  const message = err.message || 'Internal server error'
+  const message = e.message || 'Internal server error';
-  res.status(status).json({ error: message })
+  res.status(status).json({ error: message });
 }

server/src/routes/auth.ts

@@ -1,34 +1,34 @@
-import { Router } from 'express'
+import { Router } from 'express';
-import bcrypt from 'bcryptjs'
+import bcrypt from 'bcryptjs';
-import jwt from 'jsonwebtoken'
+import jwt from 'jsonwebtoken';
-import { z } from 'zod'
+import { z } from 'zod';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
-import { authenticate, AuthRequest } from '../middleware/auth'
+import { authenticate, AuthRequest } from '../middleware/auth';
 
-const router = Router()
+const router = Router();
 
 const loginSchema = z.object({
   username: z.string().min(1),
   password: z.string().min(1),
-})
+});
 
 router.post('/login', async (req, res) => {
-  const { username, password } = loginSchema.parse(req.body)
+  const { username, password } = loginSchema.parse(req.body);
 
-  const user = await prisma.user.findUnique({ where: { username } })
+  const user = await prisma.user.findUnique({ where: { username } });
   if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
-    return res.status(401).json({ error: 'Invalid credentials' })
+    return res.status(401).json({ error: 'Invalid credentials' });
   }
 
   if (user.role === 'SERVICE') {
-    return res.status(401).json({ error: 'Service accounts must authenticate via API key' })
+    return res.status(401).json({ error: 'Service accounts must authenticate via API key' });
   }
 
   const token = jwt.sign(
     { id: user.id, role: user.role, username: user.username },
     process.env.JWT_SECRET!,
-    { expiresIn: '24h' }
+    { expiresIn: '24h' },
-  )
+  );
 
   res.json({
     token,
@@ -39,16 +39,16 @@ router.post('/login', async (req, res) => {
       email: user.email,
       role: user.role,
     },
-  })
+  });
-})
+});
 
 router.get('/me', authenticate, async (req: AuthRequest, res) => {
   const user = await prisma.user.findUnique({
     where: { id: req.user!.id },
     select: { id: true, username: true, displayName: true, email: true, role: true },
-  })
+  });
-  if (!user) return res.status(404).json({ error: 'User not found' })
+  if (!user) return res.status(404).json({ error: 'User not found' });
-  res.json(user)
+  res.json(user);
-})
+});
 
-export default router
+export default router;

server/src/routes/comments.ts

@@ -1,22 +1,22 @@
-import { Router } from 'express'
+import { Router } from 'express';
-import { z } from 'zod'
+import { z } from 'zod';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
-import { AuthRequest } from '../middleware/auth'
+import { AuthRequest } from '../middleware/auth';
 
-const router = Router({ mergeParams: true })
+const router = Router({ mergeParams: true });
 
 const commentSchema = z.object({
   body: z.string().min(1),
-})
+});
 
 router.post('/', async (req: AuthRequest, res) => {
-  const { body } = commentSchema.parse(req.body)
+  const { body } = commentSchema.parse(req.body);
-  const ticketId = (req.params as Record<string, string>).ticketId
+  const ticketId = (req.params as Record<string, string>).ticketId;
 
   const ticket = await prisma.ticket.findFirst({
     where: { OR: [{ id: ticketId }, { displayId: ticketId }] },
-  })
+  });
-  if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
+  if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
 
   const [comment] = await prisma.$transaction([
     prisma.comment.create({
@@ -26,19 +26,19 @@ router.post('/', async (req: AuthRequest, res) => {
     prisma.auditLog.create({
       data: { ticketId: ticket.id, userId: req.user!.id, action: 'COMMENT_ADDED', detail: body },
     }),
-  ])
+  ]);
 
-  res.status(201).json(comment)
+  res.status(201).json(comment);
-})
+});
 
 router.delete('/:commentId', async (req: AuthRequest, res) => {
   const comment = await prisma.comment.findUnique({
     where: { id: req.params.commentId },
-  })
+  });
-  if (!comment) return res.status(404).json({ error: 'Comment not found' })
+  if (!comment) return res.status(404).json({ error: 'Comment not found' });
 
   if (comment.authorId !== req.user!.id && req.user!.role !== 'ADMIN') {
-    return res.status(403).json({ error: 'Not allowed' })
+    return res.status(403).json({ error: 'Not allowed' });
   }
 
   await prisma.$transaction([
@@ -51,9 +51,9 @@ router.delete('/:commentId', async (req: AuthRequest, res) => {
         detail: comment.body,
       },
     }),
-  ])
+  ]);
 
-  res.status(204).send()
+  res.status(204).send();
-})
+});
 
-export default router
+export default router;

server/src/routes/cti.ts

@@ -1,113 +1,113 @@
-import { Router } from 'express'
+import { Router } from 'express';
-import { z } from 'zod'
+import { z } from 'zod';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
-import { requireAdmin } from '../middleware/auth'
+import { requireAdmin } from '../middleware/auth';
 
-const router = Router()
+const router = Router();
 
-const nameSchema = z.object({ name: z.string().min(1).max(100) })
+const nameSchema = z.object({ name: z.string().min(1).max(100) });
 
 // ── Categories ────────────────────────────────────────────────────────────────
 
 router.get('/categories', async (_req, res) => {
-  const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } })
+  const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } });
-  res.json(categories)
+  res.json(categories);
-})
+});
 
 router.post('/categories', requireAdmin, async (req, res) => {
-  const { name } = nameSchema.parse(req.body)
+  const { name } = nameSchema.parse(req.body);
-  const category = await prisma.category.create({ data: { name } })
+  const category = await prisma.category.create({ data: { name } });
-  res.status(201).json(category)
+  res.status(201).json(category);
-})
+});
 
 router.put('/categories/:id', requireAdmin, async (req, res) => {
-  const { name } = nameSchema.parse(req.body)
+  const { name } = nameSchema.parse(req.body);
   const category = await prisma.category.update({
     where: { id: req.params.id },
     data: { name },
-  })
+  });
-  res.json(category)
+  res.json(category);
-})
+});
 
 router.delete('/categories/:id', requireAdmin, async (req, res) => {
-  await prisma.category.delete({ where: { id: req.params.id } })
+  await prisma.category.delete({ where: { id: req.params.id } });
-  res.status(204).send()
+  res.status(204).send();
-})
+});
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
 router.get('/types', async (req, res) => {
-  const { categoryId } = req.query
+  const { categoryId } = req.query;
   const types = await prisma.type.findMany({
     where: categoryId ? { categoryId: categoryId as string } : undefined,
     include: { category: true },
     orderBy: { name: 'asc' },
-  })
+  });
-  res.json(types)
+  res.json(types);
-})
+});
 
 router.post('/types', requireAdmin, async (req, res) => {
   const { name, categoryId } = z
     .object({ name: z.string().min(1).max(100), categoryId: z.string().min(1) })
-    .parse(req.body)
+    .parse(req.body);
   const type = await prisma.type.create({
     data: { name, categoryId },
     include: { category: true },
-  })
+  });
-  res.status(201).json(type)
+  res.status(201).json(type);
-})
+});
 
 router.put('/types/:id', requireAdmin, async (req, res) => {
-  const { name } = nameSchema.parse(req.body)
+  const { name } = nameSchema.parse(req.body);
   const type = await prisma.type.update({
     where: { id: req.params.id },
     data: { name },
     include: { category: true },
-  })
+  });
-  res.json(type)
+  res.json(type);
-})
+});
 
 router.delete('/types/:id', requireAdmin, async (req, res) => {
-  await prisma.type.delete({ where: { id: req.params.id } })
+  await prisma.type.delete({ where: { id: req.params.id } });
-  res.status(204).send()
+  res.status(204).send();
-})
+});
 
 // ── Items ─────────────────────────────────────────────────────────────────────
 
 router.get('/items', async (req, res) => {
-  const { typeId } = req.query
+  const { typeId } = req.query;
   const items = await prisma.item.findMany({
     where: typeId ? { typeId: typeId as string } : undefined,
     include: { type: { include: { category: true } } },
     orderBy: { name: 'asc' },
-  })
+  });
-  res.json(items)
+  res.json(items);
-})
+});
 
 router.post('/items', requireAdmin, async (req, res) => {
   const { name, typeId } = z
     .object({ name: z.string().min(1).max(100), typeId: z.string().min(1) })
-    .parse(req.body)
+    .parse(req.body);
   const item = await prisma.item.create({
     data: { name, typeId },
     include: { type: { include: { category: true } } },
-  })
+  });
-  res.status(201).json(item)
+  res.status(201).json(item);
-})
+});
 
 router.put('/items/:id', requireAdmin, async (req, res) => {
-  const { name } = nameSchema.parse(req.body)
+  const { name } = nameSchema.parse(req.body);
   const item = await prisma.item.update({
     where: { id: req.params.id },
     data: { name },
     include: { type: { include: { category: true } } },
-  })
+  });
-  res.json(item)
+  res.json(item);
-})
+});
 
 router.delete('/items/:id', requireAdmin, async (req, res) => {
-  await prisma.item.delete({ where: { id: req.params.id } })
+  await prisma.item.delete({ where: { id: req.params.id } });
-  res.status(204).send()
+  res.status(204).send();
-})
+});
 
-export default router
+export default router;

server/src/routes/tickets.ts

@@ -1,10 +1,10 @@
-import { Router } from 'express'
+import { Router } from 'express';
-import { z } from 'zod'
+import { z } from 'zod';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
-import { requireAdmin, requireAgent, AuthRequest } from '../middleware/auth'
+import { requireAdmin, requireAgent, AuthRequest } from '../middleware/auth';
-import commentRouter from './comments'
+import commentRouter from './comments';
 
-const router = Router()
+const router = Router();
 
 const ticketInclude = {
   category: true,
@@ -16,21 +16,21 @@ const ticketInclude = {
     include: { author: { select: { id: true, username: true, displayName: true } } },
     orderBy: { createdAt: 'asc' as const },
   },
-} as const
+} as const;
 
 const STATUS_LABELS: Record<string, string> = {
   OPEN: 'Open',
   IN_PROGRESS: 'In Progress',
   RESOLVED: 'Resolved',
   CLOSED: 'Closed',
-}
+};
 
 async function generateDisplayId(): Promise<string> {
   while (true) {
-    const num = Math.floor(Math.random() * 900_000_000) + 100_000_000
+    const num = Math.floor(Math.random() * 900_000_000) + 100_000_000;
-    const displayId = `V${num}`
+    const displayId = `V${num}`;
-    const exists = await prisma.ticket.findUnique({ where: { displayId } })
+    const exists = await prisma.ticket.findUnique({ where: { displayId } });
-    if (!exists) return displayId
+    if (!exists) return displayId;
   }
 }
 
@@ -38,7 +38,7 @@ async function generateDisplayId(): Promise<string> {
 function findByIdOrDisplay(idOrDisplay: string) {
   return prisma.ticket.findFirst({
     where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
-  })
+  });
 }
 
 const createSchema = z.object({
@@ -49,7 +49,7 @@ const createSchema = z.object({
   typeId: z.string().min(1),
   itemId: z.string().min(1),
   assigneeId: z.string().optional(),
-})
+});
 
 const updateSchema = z.object({
   title: z.string().min(1).max(255).optional(),
@@ -60,28 +60,28 @@ const updateSchema = z.object({
   typeId: z.string().min(1).optional(),
   itemId: z.string().min(1).optional(),
   assigneeId: z.string().nullable().optional(),
-})
+});
 
 // Mount comment sub-router
-router.use('/:ticketId/comments', commentRouter)
+router.use('/:ticketId/comments', commentRouter);
 
 // GET /api/tickets
 router.get('/', async (req: AuthRequest, res) => {
-  const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query
+  const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query;
 
-  const where: Record<string, unknown> = {}
+  const where: Record<string, unknown> = {};
-  if (status) where.status = status
+  if (status) where.status = status;
-  if (severity) where.severity = Number(severity)
+  if (severity) where.severity = Number(severity);
-  if (assigneeId) where.assigneeId = assigneeId
+  if (assigneeId) where.assigneeId = assigneeId;
-  if (itemId) where.itemId = itemId
+  if (itemId) where.itemId = itemId;
-  else if (typeId) where.typeId = typeId
+  else if (typeId) where.typeId = typeId;
-  else if (categoryId) where.categoryId = categoryId
+  else if (categoryId) where.categoryId = categoryId;
   if (search) {
     where.OR = [
       { title: { contains: search as string, mode: 'insensitive' } },
       { overview: { contains: search as string, mode: 'insensitive' } },
       { displayId: { contains: search as string, mode: 'insensitive' } },
-    ]
+    ];
   }
 
   const tickets = await prisma.ticket.findMany({
@@ -95,60 +95,60 @@ router.get('/', async (req: AuthRequest, res) => {
       _count: { select: { comments: true } },
     },
     orderBy: [{ severity: 'asc' }, { createdAt: 'desc' }],
-  })
+  });
 
-  res.json(tickets)
+  res.json(tickets);
-})
+});
 
 // GET /api/tickets/:id
 router.get('/:id', async (req, res) => {
   const ticket = await prisma.ticket.findFirst({
     where: { OR: [{ id: req.params.id }, { displayId: req.params.id }] },
     include: ticketInclude,
-  })
+  });
-  if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
+  if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
-  res.json(ticket)
+  res.json(ticket);
-})
+});
 
 // GET /api/tickets/:id/audit
 router.get('/:id/audit', async (req, res) => {
-  const ticket = await findByIdOrDisplay(req.params.id)
+  const ticket = await findByIdOrDisplay(req.params.id);
-  if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
+  if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
 
   const logs = await prisma.auditLog.findMany({
     where: { ticketId: ticket.id },
     include: { user: { select: { id: true, username: true, displayName: true } } },
     orderBy: { createdAt: 'desc' },
-  })
+  });
 
-  res.json(logs)
+  res.json(logs);
-})
+});
 
 // POST /api/tickets
 router.post('/', requireAgent, async (req: AuthRequest, res) => {
-  const data = createSchema.parse(req.body)
+  const data = createSchema.parse(req.body);
-  const displayId = await generateDisplayId()
+  const displayId = await generateDisplayId();
 
   const ticket = await prisma.$transaction(async (tx) => {
     const created = await tx.ticket.create({
       data: { displayId, ...data, createdById: req.user!.id },
-    })
+    });
     await tx.auditLog.create({
       data: { ticketId: created.id, userId: req.user!.id, action: 'CREATED' },
-    })
+    });
-    return tx.ticket.findUnique({ where: { id: created.id }, include: ticketInclude })
+    return tx.ticket.findUnique({ where: { id: created.id }, include: ticketInclude });
-  })
+  });
 
-  res.status(201).json(ticket)
+  res.status(201).json(ticket);
-})
+});
 
 // PATCH /api/tickets/:id
 router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
-  const data = updateSchema.parse(req.body)
+  const data = updateSchema.parse(req.body);
 
   // Only admins can set status to CLOSED
   if (data.status === 'CLOSED' && req.user?.role !== 'ADMIN') {
-    return res.status(403).json({ error: 'Only admins can close tickets' })
+    return res.status(403).json({ error: 'Only admins can close tickets' });
   }
 
   const existing = await prisma.ticket.findFirst({
@@ -159,17 +159,17 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
       item: true,
       assignee: { select: { displayName: true } },
     },
-  })
+  });
-  if (!existing) return res.status(404).json({ error: 'Ticket not found' })
+  if (!existing) return res.status(404).json({ error: 'Ticket not found' });
 
   // Build audit entries
-  const auditEntries: { action: string; detail?: string }[] = []
+  const auditEntries: { action: string; detail?: string }[] = [];
 
   if (data.status && data.status !== existing.status) {
     auditEntries.push({
       action: 'STATUS_CHANGED',
       detail: `${STATUS_LABELS[existing.status]} → ${STATUS_LABELS[data.status]}`,
-    })
+    });
   }
 
   if ('assigneeId' in data && data.assigneeId !== existing.assigneeId) {
@@ -178,25 +178,25 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
           where: { id: data.assigneeId },
           select: { displayName: true },
         })
-      : null
+      : null;
     auditEntries.push({
       action: 'ASSIGNEE_CHANGED',
       detail: `${existing.assignee?.displayName ?? 'Unassigned'} → ${newAssignee?.displayName ?? 'Unassigned'}`,
-    })
+    });
   }
 
   if (data.severity && data.severity !== existing.severity) {
     auditEntries.push({
       action: 'SEVERITY_CHANGED',
       detail: `SEV ${existing.severity} → SEV ${data.severity}`,
-    })
+    });
   }
 
   // CTI rerouting — only log if any CTI field actually changed
   const ctiChanged =
     (data.categoryId && data.categoryId !== existing.categoryId) ||
     (data.typeId && data.typeId !== existing.typeId) ||
-    (data.itemId && data.itemId !== existing.itemId)
+    (data.itemId && data.itemId !== existing.itemId);
 
   if (ctiChanged) {
     const [newCat, newType, newItem] = await Promise.all([
@@ -209,34 +209,34 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
       data.itemId && data.itemId !== existing.itemId
         ? prisma.item.findUnique({ where: { id: data.itemId } })
         : Promise.resolve(existing.item),
-    ])
+    ]);
     auditEntries.push({
       action: 'REROUTED',
       detail: `${existing.category.name} › ${existing.type.name} › ${existing.item.name} → ${newCat?.name} › ${newType?.name} › ${newItem?.name}`,
-    })
+    });
   }
 
   if (data.title && data.title !== existing.title) {
-    auditEntries.push({ action: 'TITLE_CHANGED', detail: data.title })
+    auditEntries.push({ action: 'TITLE_CHANGED', detail: data.title });
   }
 
   if (data.overview && data.overview !== existing.overview) {
-    auditEntries.push({ action: 'OVERVIEW_CHANGED' })
+    auditEntries.push({ action: 'OVERVIEW_CHANGED' });
   }
 
   // Handle resolvedAt tracking
-  const update: Record<string, unknown> = { ...data }
+  const update: Record<string, unknown> = { ...data };
   if (data.status === 'RESOLVED' && existing.status !== 'RESOLVED') {
-    update.resolvedAt = new Date()
+    update.resolvedAt = new Date();
   } else if (data.status && data.status !== 'RESOLVED' && existing.status === 'RESOLVED') {
-    update.resolvedAt = null
+    update.resolvedAt = null;
   }
 
   const ticket = await prisma.$transaction(async (tx) => {
     const updated = await tx.ticket.update({
       where: { id: existing.id },
       data: update,
-    })
+    });
     if (auditEntries.length > 0) {
       await tx.auditLog.createMany({
         data: auditEntries.map((e) => ({
@@ -245,20 +245,20 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
           action: e.action,
           detail: e.detail ?? null,
         })),
-      })
+      });
     }
-    return tx.ticket.findUnique({ where: { id: updated.id }, include: ticketInclude })
+    return tx.ticket.findUnique({ where: { id: updated.id }, include: ticketInclude });
-  })
+  });
 
-  res.json(ticket)
+  res.json(ticket);
-})
+});
 
 // DELETE /api/tickets/:id — admin only
 router.delete('/:id', requireAdmin, async (req, res) => {
-  const ticket = await findByIdOrDisplay(req.params.id)
+  const ticket = await findByIdOrDisplay(req.params.id);
-  if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
+  if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
-  await prisma.ticket.delete({ where: { id: ticket.id } })
+  await prisma.ticket.delete({ where: { id: ticket.id } });
-  res.status(204).send()
+  res.status(204).send();
-})
+});
 
-export default router
+export default router;

server/src/routes/users.ts

@@ -1,11 +1,12 @@
-import { Router } from 'express'
+import { Router } from 'express';
-import bcrypt from 'bcryptjs'
+import bcrypt from 'bcryptjs';
-import crypto from 'crypto'
+import crypto from 'crypto';
-import { z } from 'zod'
+import { z } from 'zod';
-import prisma from '../lib/prisma'
+import { Prisma } from '@prisma/client';
-import { requireAdmin, AuthRequest } from '../middleware/auth'
+import prisma from '../lib/prisma';
+import { requireAdmin, AuthRequest } from '../middleware/auth';
 
-const router = Router()
+const router = Router();
 
 const userSelect = {
   id: true,
@@ -15,15 +16,22 @@ const userSelect = {
   role: true,
   apiKey: true,
   createdAt: true,
-} as const
+} as const;
 
 router.get('/', async (_req, res) => {
   const users = await prisma.user.findMany({
-    select: { id: true, username: true, displayName: true, email: true, role: true, createdAt: true },
+    select: {
+      id: true,
+      username: true,
+      displayName: true,
+      email: true,
+      role: true,
+      createdAt: true,
+    },
     orderBy: { displayName: 'asc' },
-  })
+  });
-  res.json(users)
+  res.json(users);
-})
+});
 
 router.post('/', requireAdmin, async (req, res) => {
   const data = z
@@ -34,14 +42,14 @@ router.post('/', requireAdmin, async (req, res) => {
       password: z.string().min(8).optional(),
       role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).default('AGENT'),
     })
-    .parse(req.body)
+    .parse(req.body);
 
   const passwordHash = data.password
     ? await bcrypt.hash(data.password, 12)
-    : await bcrypt.hash(crypto.randomBytes(32).toString('hex'), 12)
+    : await bcrypt.hash(crypto.randomBytes(32).toString('hex'), 12);
 
   const apiKey =
-    data.role === 'SERVICE' ? `sk_${crypto.randomBytes(32).toString('hex')}` : undefined
+    data.role === 'SERVICE' ? `sk_${crypto.randomBytes(32).toString('hex')}` : undefined;
 
   const user = await prisma.user.create({
     data: {
@@ -53,10 +61,10 @@ router.post('/', requireAdmin, async (req, res) => {
       apiKey,
     },
     select: userSelect,
-  })
+  });
 
-  res.status(201).json(user)
+  res.status(201).json(user);
-})
+});
 
 router.patch('/:id', requireAdmin, async (req, res) => {
   const data = z
@@ -67,37 +75,37 @@ router.patch('/:id', requireAdmin, async (req, res) => {
       role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).optional(),
       regenerateApiKey: z.boolean().optional(),
     })
-    .parse(req.body)
+    .parse(req.body);
 
-  const update: Record<string, any> = {}
+  const update: Prisma.UserUpdateInput = {};
-  if (data.displayName) update.displayName = data.displayName
+  if (data.displayName) update.displayName = data.displayName;
-  if (data.email) update.email = data.email
+  if (data.email) update.email = data.email;
-  if (data.password) update.passwordHash = await bcrypt.hash(data.password, 12)
+  if (data.password) update.passwordHash = await bcrypt.hash(data.password, 12);
   if (data.role) {
-    update.role = data.role
+    update.role = data.role;
     if (data.role === 'SERVICE' && !update.apiKey) {
-      update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
+      update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
     }
   }
   if (data.regenerateApiKey) {
-    update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
+    update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
   }
 
   const user = await prisma.user.update({
     where: { id: req.params.id },
     data: update,
     select: userSelect,
-  })
+  });
 
-  res.json(user)
+  res.json(user);
-})
+});
 
 router.delete('/:id', requireAdmin, async (req: AuthRequest, res) => {
   if (req.params.id === req.user!.id) {
-    return res.status(400).json({ error: 'Cannot delete your own account' })
+    return res.status(400).json({ error: 'Cannot delete your own account' });
   }
-  await prisma.user.delete({ where: { id: req.params.id } })
+  await prisma.user.delete({ where: { id: req.params.id } });
-  res.status(204).send()
+  res.status(204).send();
-})
+});
 
-export default router
+export default router;