josh/TicketingSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ESLint + Prettier + EditorConfig tooling at repo root

Browse Source 
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
This commit is contained in:
Josh Wright
2026-04-18 14:47:34 -04:00
parent 2a6090e473
commit 27d2ab0f0d
48 changed files with 14460 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package-lock.json
Generated
+5903 -2
View File
File diff suppressed because it is too large Load Diff
client/package.json
+14 -2
View File
@@ -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
+1 -1
View File
@@ -3,4 +3,4 @@ export default {
tailwindcss: {},
autoprefixer: {},
},
}
};
client/src/App.tsx
+11 -11
View File
@@ -1,13 +1,13 @@
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider } from './contexts/AuthContext'
import PrivateRoute from './components/PrivateRoute'
import AdminRoute from './components/AdminRoute'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import MyTickets from './pages/MyTickets'
import TicketDetail from './pages/TicketDetail'
import AdminUsers from './pages/admin/Users'
import AdminCTI from './pages/admin/CTI'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import PrivateRoute from './components/PrivateRoute';
import AdminRoute from './components/AdminRoute';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import MyTickets from './pages/MyTickets';
import TicketDetail from './pages/TicketDetail';
import AdminUsers from './pages/admin/Users';
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
+3 -3
View File
@@ -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
+4 -4
View File
@@ -1,7 +1,7 @@
import { Navigate, Outlet } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
export default function AdminRoute() {
const { user } = useAuth()
return user?.role === 'ADMIN' ? <Outlet /> : <Navigate to="/" replace />
const { user } = useAuth();
return user?.role === 'ADMIN' ? <Outlet /> : <Navigate to="/" replace />;
}
client/src/components/Avatar.tsx
+17 -11
View File
@@ -1,14 +1,20 @@
const PALETTE = [
'#ef4444', '#f97316', '#f59e0b', '#10b981',
'#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899',
]
'#ef4444',
'#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
size?: keyof typeof SIZES
name: string;
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
+28 -28
View File
@@ -1,57 +1,57 @@
import { useEffect, useState } from 'react'
import api from '../api/client'
import { Category, CTIType, Item } from '../types'
import { useEffect, useState } from 'react';
import api from '../api/client';
import { Category, CTIType, Item } from '../types';
interface CTISelectProps {
value: { categoryId: string; typeId: string; itemId: string }
onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void
disabled?: boolean
value: { categoryId: string; typeId: string; itemId: string };
onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void;
disabled?: boolean;
}
export default function CTISelect({ value, onChange, disabled }: CTISelectProps) {
const [categories, setCategories] = useState<Category[]>([])
const [types, setTypes] = useState<CTIType[]>([])
const [items, setItems] = useState<Item[]>([])
const [categories, setCategories] = useState<Category[]>([]);
const [types, setTypes] = useState<CTIType[]>([]);
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([])
setItems([])
return
setTypes([]);
setItems([]);
return;
}
api
.get<CTIType[]>('/cti/types', { params: { categoryId: value.categoryId } })
.then((r) => setTypes(r.data))
}, [value.categoryId])
.then((r) => setTypes(r.data));
}, [value.categoryId]);
useEffect(() => {
if (!value.typeId) {
setItems([])
return
setItems([]);
return;
}
api
.get<Item[]>('/cti/items', { params: { typeId: value.typeId } })
.then((r) => setItems(r.data))
}, [value.typeId])
.then((r) => setItems(r.data));
}, [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
+19 -19
View File
@@ -1,22 +1,22 @@
import { ReactNode, useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { LayoutDashboard, Users, Settings, LogOut, Plus, Ticket } from 'lucide-react'
import { useAuth } from '../contexts/AuthContext'
import NewTicketModal from '../pages/NewTicket'
import { ReactNode, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { LayoutDashboard, Users, Settings, LogOut, Plus, Ticket } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import NewTicketModal from '../pages/NewTicket';
interface LayoutProps {
children: ReactNode
title?: string
action?: ReactNode
children: ReactNode;
title?: string;
action?: ReactNode;
}
export default function Layout({ children, title, action }: LayoutProps) {
const { user, logout } = useAuth()
const location = useLocation()
const navigate = useNavigate()
const [showNewTicket, setShowNewTicket] = useState(false)
const { user, logout } = useAuth();
const location = useLocation();
const navigate = useNavigate();
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()
navigate('/login')
}
logout();
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
+19 -18
View File
@@ -1,39 +1,40 @@
import { ReactNode, useEffect } from 'react'
import { X } from 'lucide-react'
import { ReactNode, useEffect } from 'react';
import { X } from 'lucide-react';
interface ModalProps {
title: string
onClose: () => void
children: ReactNode
size?: 'md' | 'lg'
title: string;
onClose: () => void;
children: ReactNode;
size?: 'md' | 'lg';
}
export default function Modal({ title, onClose, children, size = 'md' }: ModalProps) {
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose()
}
document.addEventListener('keydown', handler)
return () => document.removeEventListener('keydown', handler)
}, [onClose])
if (e.key === 'Escape') onClose();
};
document.addEventListener('keydown', handler);
return () => document.removeEventListener('keydown', handler);
}, [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
onClick={onClose}
className="text-gray-500 hover:text-gray-300 transition-colors"
>
<button 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
+5 -5
View File
@@ -1,16 +1,16 @@
import { Navigate, Outlet } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { Navigate, Outlet } from 'react-router-dom';
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
+6 -4
View File
@@ -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
+11 -6
View File
@@ -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
+30 -32
View File
@@ -1,59 +1,57 @@
import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
import api from '../api/client'
import { User } from '../types'
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import api from '../api/client';
import { User } from '../types';
interface AuthContextType {
user: User | null
loading: boolean
login: (username: string, password: string) => Promise<void>
logout: () => void
user: User | null;
loading: boolean;
login: (username: string, password: string) => Promise<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 [loading, setLoading] = useState(true)
const [user, setUser] = useState<User | null>(null);
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')
delete api.defaults.headers.common['Authorization']
localStorage.removeItem('token');
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
localStorage.setItem('token', token)
api.defaults.headers.common['Authorization'] = `Bearer ${token}`
setUser(user)
}
});
const { token, user } = res.data;
localStorage.setItem('token', token);
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
setUser(user);
};
const logout = () => {
localStorage.removeItem('token')
delete api.defaults.headers.common['Authorization']
setUser(null)
}
localStorage.removeItem('token');
delete api.defaults.headers.common['Authorization'];
setUser(null);
};
return (
<AuthContext.Provider value={{ user, loading, login, logout }}>
{children}
</AuthContext.Provider>
)
<AuthContext.Provider value={{ user, loading, login, logout }}>{children}</AuthContext.Provider>
);
}
export const useAuth = () => useContext(AuthContext)
export const useAuth = () => useContext(AuthContext);
client/src/index.css
+54 -18
View File
@@ -9,22 +9,58 @@ select option {
}
/* Markdown prose styles (dark) */
.prose p { @apply mb-3 last:mb-0 leading-relaxed; }
.prose h1 { @apply text-xl font-bold mb-3 mt-5; }
.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 p {
@apply mb-3 last:mb-0 leading-relaxed;
}
.prose h1 {
@apply text-xl font-bold mb-3 mt-5;
}
.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 a { @apply text-blue-400 underline hover:text-blue-300; }
.prose strong { @apply font-semibold; }
.prose em { @apply italic; }
.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; }
.prose li > ol {
@apply mt-1 mb-0;
}
.prose a {
@apply text-blue-400 underline hover:text-blue-300;
}
.prose strong {
@apply font-semibold;
}
.prose em {
@apply italic;
}
.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
+6 -6
View File
@@ -1,10 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>
)
</StrictMode>,
);
client/src/pages/Dashboard.tsx
+83 -81
View File
@@ -1,13 +1,13 @@
import { useState, useEffect, useCallback } from 'react'
import { Link } from 'react-router-dom'
import { Search, ChevronRight, X } from 'lucide-react'
import { formatDistanceToNow } from 'date-fns'
import api from '../api/client'
import Layout from '../components/Layout'
import SeverityBadge from '../components/SeverityBadge'
import StatusBadge from '../components/StatusBadge'
import Avatar from '../components/Avatar'
import { Ticket, TicketStatus, Category, CTIType, Item } from '../types'
import { useState, useEffect, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { Search, ChevronRight, X } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
import api from '../api/client';
import Layout from '../components/Layout';
import SeverityBadge from '../components/SeverityBadge';
import StatusBadge from '../components/StatusBadge';
import Avatar from '../components/Avatar';
import { Ticket, TicketStatus, 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(
category: Category | null,
type: CTIType | null,
item: Item | null,
): string {
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 ''
function queueLabel(category: Category | null, type: CTIType | null, item: Item | null): string {
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 [loading, setLoading] = useState(true)
const [search, setSearch] = useState('')
const [status, setStatus] = useState<TicketStatus | ''>('')
const [severity, setSeverity] = useState('')
const [tickets, setTickets] = useState<Ticket[]>([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState('');
const [status, setStatus] = useState<TicketStatus | ''>('');
const [severity, setSeverity] = useState('');
// CTI queue filter state
const [categories, setCategories] = useState<Category[]>([])
const [types, setTypes] = useState<CTIType[]>([])
const [items, setItems] = useState<Item[]>([])
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
const [selectedType, setSelectedType] = useState<CTIType | null>(null)
const [selectedItem, setSelectedItem] = useState<Item | null>(null)
const [showQueueFilter, setShowQueueFilter] = useState(false)
const [categories, setCategories] = useState<Category[]>([]);
const [types, setTypes] = useState<CTIType[]>([]);
const [items, setItems] = useState<Item[]>([]);
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
const [selectedType, setSelectedType] = useState<CTIType | null>(null);
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
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)
setSelectedType(null)
setSelectedItem(null)
setTypes([])
setItems([])
api.get<CTIType[]>('/cti/types', { params: { categoryId: cat.id } }).then((r) => setTypes(r.data))
}
setSelectedCategory(cat);
setSelectedType(null);
setSelectedItem(null);
setTypes([]);
setItems([]);
api
.get<CTIType[]>('/cti/types', { params: { categoryId: cat.id } })
.then((r) => setTypes(r.data));
};
const handleTypeSelect = (type: CTIType) => {
setSelectedType(type)
setSelectedItem(null)
setItems([])
api.get<Item[]>('/cti/items', { params: { typeId: type.id } }).then((r) => setItems(r.data))
}
setSelectedType(type);
setSelectedItem(null);
setItems([]);
api.get<Item[]>('/cti/items', { params: { typeId: type.id } }).then((r) => setItems(r.data));
};
const handleItemSelect = (item: Item) => {
setSelectedItem(item)
setShowQueueFilter(false)
}
setSelectedItem(item);
setShowQueueFilter(false);
};
const clearQueue = () => {
setSelectedCategory(null)
setSelectedType(null)
setSelectedItem(null)
setTypes([])
setItems([])
}
setSelectedCategory(null);
setSelectedType(null);
setSelectedItem(null);
setTypes([]);
setItems([]);
};
// Derive the most specific filter param
const queueParams: Record<string, string> = {}
if (selectedItem) queueParams.itemId = selectedItem.id
else if (selectedType) queueParams.typeId = selectedType.id
else if (selectedCategory) queueParams.categoryId = selectedCategory.id
const queueParams: Record<string, string> = {};
if (selectedItem) queueParams.itemId = selectedItem.id;
else if (selectedType) queueParams.typeId = selectedType.id;
else if (selectedCategory) queueParams.categoryId = selectedCategory.id;
const fetchTickets = useCallback(() => {
setLoading(true)
const params: Record<string, string> = { ...queueParams }
if (status) params.status = status
if (severity) params.severity = severity
if (search) params.search = search
setLoading(true);
const params: Record<string, string> = { ...queueParams };
if (status) params.status = status;
if (severity) params.severity = severity;
if (search) params.search = search;
api
.get<Ticket[]>('/tickets', { params })
.then((r) => setTickets(r.data))
.finally(() => setLoading(false))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [status, severity, search, selectedCategory, selectedType, selectedItem])
.finally(() => setLoading(false));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [status, severity, search, selectedCategory, selectedType, selectedItem]);
useEffect(() => {
const t = setTimeout(fetchTickets, 300)
return () => clearTimeout(t)
}, [fetchTickets])
const t = setTimeout(fetchTickets, 300);
return () => clearTimeout(t);
}, [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 */}
@@ -278,12 +280,12 @@ export default function Dashboard() {
ticket.severity === 1
? 'bg-red-500'
: ticket.severity === 2
? 'bg-orange-400'
: ticket.severity === 3
? 'bg-yellow-400'
: ticket.severity === 4
? 'bg-blue-400'
: 'bg-gray-600'
? 'bg-orange-400'
: ticket.severity === 3
? 'bg-yellow-400'
: ticket.severity === 4
? 'bg-blue-400'
: 'bg-gray-600'
}`}
/>
@@ -324,5 +326,5 @@ export default function Dashboard() {
</div>
)}
</Layout>
)
);
}
client/src/pages/Login.tsx
+20 -24
View File
@@ -1,28 +1,28 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
export default function Login() {
const { login } = useAuth()
const navigate = useNavigate()
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const { login } = useAuth();
const navigate = useNavigate();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError('')
setLoading(true)
e.preventDefault();
setError('');
setLoading(true);
try {
await login(username, password)
navigate('/')
await login(username, password);
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">
Username
</label>
<label className="block text-sm font-medium text-gray-300 mb-1">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">
Password
</label>
<label className="block text-sm font-medium text-gray-300 mb-1">Password</label>
<input
type="password"
value={password}
@@ -79,5 +75,5 @@ export default function Login() {
</form>
</div>
</div>
)
);
}
client/src/pages/MyTickets.tsx
+29 -25
View File
@@ -1,32 +1,36 @@
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { formatDistanceToNow } from 'date-fns'
import api from '../api/client'
import Layout from '../components/Layout'
import SeverityBadge from '../components/SeverityBadge'
import StatusBadge from '../components/StatusBadge'
import { Ticket } from '../types'
import { useAuth } from '../contexts/AuthContext'
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { formatDistanceToNow } from 'date-fns';
import api from '../api/client';
import Layout from '../components/Layout';
import SeverityBadge from '../components/SeverityBadge';
import StatusBadge from '../components/StatusBadge';
import { Ticket } from '../types';
import { useAuth } from '../contexts/AuthContext';
export default function MyTickets() {
const { user } = useAuth()
const [tickets, setTickets] = useState<Ticket[]>([])
const [loading, setLoading] = useState(true)
const { user } = useAuth();
const [tickets, setTickets] = useState<Ticket[]>([]);
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]
combined.sort((a, b) => a.severity - b.severity || new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
setTickets(combined)
const combined = [...openRes.data, ...inProgressRes.data];
combined.sort(
(a, b) =>
a.severity - b.severity ||
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
);
setTickets(combined);
})
.finally(() => setLoading(false))
}, [user])
.finally(() => setLoading(false));
}, [user]);
return (
<Layout title="My Tickets">
@@ -49,12 +53,12 @@ export default function MyTickets() {
ticket.severity === 1
? 'bg-red-500'
: ticket.severity === 2
? 'bg-orange-400'
: ticket.severity === 3
? 'bg-yellow-400'
: ticket.severity === 4
? 'bg-blue-400'
: 'bg-gray-600'
? 'bg-orange-400'
: ticket.severity === 3
? 'bg-yellow-400'
: ticket.severity === 4
? 'bg-blue-400'
: 'bg-gray-600'
}`}
/>
@@ -87,5 +91,5 @@ export default function MyTickets() {
</div>
)}
</Layout>
)
);
}
client/src/pages/NewTicket.tsx
+32 -32
View File
@@ -1,19 +1,19 @@
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '../api/client'
import Modal from '../components/Modal'
import CTISelect from '../components/CTISelect'
import { User } from '../types'
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '../api/client';
import Modal from '../components/Modal';
import CTISelect from '../components/CTISelect';
import { User } from '../types';
interface NewTicketModalProps {
onClose: () => void
onClose: () => void;
}
export default function NewTicketModal({ onClose }: NewTicketModalProps) {
const navigate = useNavigate()
const [users, setUsers] = useState<User[]>([])
const [error, setError] = useState('')
const [submitting, setSubmitting] = useState(false)
const navigate = useNavigate();
const [users, setUsers] = useState<User[]>([]);
const [error, setError] = useState('');
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')
return
setError('Please select a Category, Type, and Item');
return;
}
setError('')
setSubmitting(true)
setError('');
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)
onClose()
navigate(`/${res.data.displayId}`)
const res = await api.post('/tickets', payload);
onClose();
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'
const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
'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';
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
+176 -152
View File
@@ -1,24 +1,32 @@
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { format, formatDistanceToNow } from 'date-fns'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { format, formatDistanceToNow } from 'date-fns';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
Pencil, Trash2, Send, X, Check,
MessageSquare, ClipboardList, FileText,
ArrowLeft, ChevronDown, ChevronRight,
} from 'lucide-react'
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'
Pencil,
Trash2,
Send,
X,
Check,
MessageSquare,
ClipboardList,
FileText,
ArrowLeft,
ChevronDown,
ChevronRight,
} from 'lucide-react';
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 navigate = useNavigate()
const { user: authUser } = useAuth()
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { user: authUser } = useAuth();
const [ticket, setTicket] = useState<Ticket | null>(null)
const [users, setUsers] = useState<User[]>([])
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
const [loading, setLoading] = useState(true)
const [tab, setTab] = useState<Tab>('overview')
const [editing, setEditing] = useState(false)
const [reroutingCTI, setReroutingCTI] = useState(false)
const [commentBody, setCommentBody] = useState('')
const [submittingComment, setSubmittingComment] = useState(false)
const [preview, setPreview] = useState(false)
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
const [ticket, setTicket] = useState<Ticket | null>(null);
const [users, setUsers] = useState<User[]>([]);
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
const [loading, setLoading] = useState(true);
const [tab, setTab] = useState<Tab>('overview');
const [editing, setEditing] = useState(false);
const [reroutingCTI, setReroutingCTI] = useState(false);
const [commentBody, setCommentBody] = useState('');
const [submittingComment, setSubmittingComment] = useState(false);
const [preview, setPreview] = useState(false);
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
const [editForm, setEditForm] = useState({ title: '', overview: '' })
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })
const [editingStatus, setEditingStatus] = useState(false)
const [editingSeverity, setEditingSeverity] = useState(false)
const [editingAssignee, setEditingAssignee] = useState(false)
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set())
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set())
const [editForm, setEditForm] = useState({ title: '', overview: '' });
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
const [editingStatus, setEditingStatus] = useState(false);
const [editingSeverity, setEditingSeverity] = useState(false);
const [editingAssignee, setEditingAssignee] = useState(false);
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());
const toggleDate = (key: string) =>
setExpandedDates((prev) => {
const next = new Set(prev)
next.has(key) ? next.delete(key) : next.add(key)
return next
})
const next = new Set(prev);
if (next.has(key)) next.delete(key);
else next.add(key);
return next;
});
const toggleCommentDate = (id: string) =>
setExpandedCommentDates((prev) => {
const next = new Set(prev)
next.has(id) ? next.delete(id) : next.add(id)
return next
})
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
const isAdmin = authUser?.role === 'ADMIN'
const isAdmin = authUser?.role === 'ADMIN';
useEffect(() => {
Promise.all([
api.get<Ticket>(`/tickets/${id}`),
api.get<User[]>('/users'),
]).then(([tRes, uRes]) => {
setTicket(tRes.data)
setUsers(uRes.data)
}).finally(() => setLoading(false))
}, [id])
Promise.all([api.get<Ticket>(`/tickets/${id}`), api.get<User[]>('/users')])
.then(([tRes, uRes]) => {
setTicket(tRes.data);
setUsers(uRes.data);
})
.finally(() => setLoading(false));
}, [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
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
setTicket(res.data)
return res.data
}
if (!ticket) return;
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload);
setTicket(res.data);
return res.data;
};
const startEdit = () => {
if (!ticket) return
setEditForm({ title: ticket.title, overview: ticket.overview })
setEditing(true)
setTab('overview')
}
if (!ticket) return;
setEditForm({ title: ticket.title, overview: ticket.overview });
setEditing(true);
setTab('overview');
};
const saveEdit = async () => {
await patch({ title: editForm.title, overview: editForm.overview })
setEditing(false)
}
await patch({ title: editForm.title, overview: editForm.overview });
setEditing(false);
};
const startReroute = () => {
if (!ticket) return
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId })
setReroutingCTI(true)
}
if (!ticket) return;
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
setReroutingCTI(true);
};
const saveReroute = async () => {
await patch(pendingCTI)
setReroutingCTI(false)
}
await patch(pendingCTI);
setReroutingCTI(false);
};
const deleteTicket = async () => {
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
await api.delete(`/tickets/${ticket.displayId}`)
navigate('/')
}
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return;
await api.delete(`/tickets/${ticket.displayId}`);
navigate('/');
};
const submitComment = async (e: React.FormEvent) => {
e.preventDefault()
if (!ticket || !commentBody.trim()) return
setSubmittingComment(true)
e.preventDefault();
if (!ticket || !commentBody.trim()) return;
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)
setCommentBody('')
setPreview(false)
});
setTicket((t) => (t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t));
setCommentBody('');
setPreview(false);
} finally {
setSubmittingComment(false)
setSubmittingComment(false);
}
}
};
const deleteComment = async (commentId: string) => {
if (!ticket) return
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
}
if (!ticket) return;
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`);
setTicket((t) => (t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t));
};
const toggleLog = (logId: string) => {
setExpandedLogs((prev) => {
const next = new Set(prev)
if (next.has(logId)) next.delete(logId)
else next.add(logId)
return next
})
}
const next = new Set(prev);
if (next.has(logId)) next.delete(logId);
else next.add(logId);
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 agentUsers = users.filter((u) => u.role !== 'SERVICE')
const commentCount = ticket.comments?.length ?? 0;
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]}>
{ticket.overview}
</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{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]}>
{comment.body}
</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{comment.body}</ReactMarkdown>
</div>
</div>
</div>
))
) : (
<div className="py-12 text-center text-sm text-gray-600">
No comments yet
</div>
<div className="py-12 text-center text-sm text-gray-600">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()
? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
: <span className="text-gray-600 italic">Nothing to preview</span>
}
{commentBody.trim() ? (
<ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
) : (
<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()
submitComment(e as unknown as React.FormEvent)
e.preventDefault();
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 isExpanded = expandedLogs.has(log.id)
const isComment = COMMENT_ACTIONS.has(log.action)
const hasDetail = !!log.detail;
const isExpanded = expandedLogs.has(log.id);
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>
{' '}{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
<span className="font-medium text-gray-100">
{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 })
setEditingStatus(false)
await patch({ status: s.value });
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 })
setEditingSeverity(false)
await patch({ severity: s.value });
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 })
setEditingAssignee(false)
await patch({ assigneeId: null });
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 })
setEditingAssignee(false)
await patch({ assigneeId: u.id });
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
+113 -87
View File
@@ -1,136 +1,144 @@
import { useState, useEffect } from 'react'
import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react'
import api from '../../api/client'
import Layout from '../../components/Layout'
import Modal from '../../components/Modal'
import { Category, CTIType, Item } from '../../types'
import { useState, useEffect } from 'react';
import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react';
import api from '../../api/client';
import Layout from '../../components/Layout';
import Modal from '../../components/Modal';
import { Category, CTIType, Item } from '../../types';
type PanelItem = { id: string; name: string }
type PanelItem = { id: string; name: string };
interface NameModalState {
open: boolean
mode: 'add' | 'edit'
panel: 'category' | 'type' | 'item'
item?: PanelItem
open: boolean;
mode: 'add' | 'edit';
panel: 'category' | 'type' | 'item';
item?: PanelItem;
}
export default function AdminCTI() {
const [categories, setCategories] = useState<Category[]>([])
const [types, setTypes] = useState<CTIType[]>([])
const [items, setItems] = useState<Item[]>([])
const [categories, setCategories] = useState<Category[]>([]);
const [types, setTypes] = useState<CTIType[]>([]);
const [items, setItems] = useState<Item[]>([]);
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
const [selectedType, setSelectedType] = useState<CTIType | null>(null)
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
const [selectedType, setSelectedType] = useState<CTIType | null>(null);
const [nameModal, setNameModal] = useState<NameModalState>({ open: false, mode: 'add', panel: 'category' })
const [nameValue, setNameValue] = useState('')
const [submitting, setSubmitting] = useState(false)
const [nameModal, setNameModal] = useState<NameModalState>({
open: 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
.get<CTIType[]>('/cti/types', { params: { categoryId } })
.then((r) => setTypes(r.data))
api.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)
setSelectedType(null)
setItems([])
fetchTypes(cat.id)
}
setSelectedCategory(cat);
setSelectedType(null);
setItems([]);
fetchTypes(cat.id);
};
const selectType = (type: CTIType) => {
setSelectedType(type)
fetchItems(type.id)
}
setSelectedType(type);
fetchItems(type.id);
};
const openAdd = (panel: 'category' | 'type' | 'item') => {
setNameValue('')
setNameModal({ open: true, mode: 'add', panel })
}
setNameValue('');
setNameModal({ open: true, mode: 'add', panel });
};
const openEdit = (panel: 'category' | 'type' | 'item', item: PanelItem) => {
setNameValue(item.name)
setNameModal({ open: true, mode: 'edit', panel, item })
}
setNameValue(item.name);
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()
if (!nameValue.trim()) return
setSubmitting(true)
e.preventDefault();
if (!nameValue.trim()) return;
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 fetchCategories()
await api.post('/cti/categories', { name: nameValue.trim() });
await fetchCategories();
} else if (panel === 'type' && selectedCategory) {
await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id })
await fetchTypes(selectedCategory.id)
await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id });
await fetchTypes(selectedCategory.id);
} else if (panel === 'item' && selectedType) {
await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id })
await fetchItems(selectedType.id)
await api.post('/cti/items', { name: nameValue.trim(), typeId: 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 fetchCategories()
if (selectedCategory?.id === item.id) setSelectedCategory((c) => c ? { ...c, name: nameValue.trim() } : c)
await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() });
await fetchCategories();
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() })
if (selectedCategory) await fetchTypes(selectedCategory.id)
if (selectedType?.id === item.id) setSelectedType((t) => t ? { ...t, name: nameValue.trim() } : t)
await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() });
if (selectedCategory) await fetchTypes(selectedCategory.id);
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() })
if (selectedType) await fetchItems(selectedType.id)
await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() });
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)
setSelectedType(null)
setTypes([])
setItems([])
setSelectedCategory(null);
setSelectedType(null);
setTypes([]);
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)
setItems([])
setSelectedType(null);
setItems([]);
}
if (selectedCategory) await fetchTypes(selectedCategory.id)
if (selectedCategory) await fetchTypes(selectedCategory.id);
} else {
await api.delete(`/cti/items/${item.id}`)
if (selectedType) await fetchItems(selectedType.id)
await api.delete(`/cti/items/${item.id}`);
if (selectedType) await fetchItems(selectedType.id);
}
}
};
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 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 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
+102 -87
View File
@@ -1,17 +1,17 @@
import { useState, useEffect } from 'react'
import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react'
import api from '../../api/client'
import Layout from '../../components/Layout'
import Modal from '../../components/Modal'
import { User, Role } from '../../types'
import { useAuth } from '../../contexts/AuthContext'
import { useState, useEffect } from 'react';
import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react';
import api from '../../api/client';
import Layout from '../../components/Layout';
import Modal from '../../components/Modal';
import { User, Role } from '../../types';
import { useAuth } from '../../contexts/AuthContext';
interface UserForm {
username: string
email: string
displayName: string
password: string
role: Role
username: string;
email: string;
displayName: string;
password: string;
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 [users, setUsers] = useState<User[]>([])
const [modal, setModal] = useState<'add' | 'edit' | null>(null)
const [selected, setSelected] = useState<User | null>(null)
const [form, setForm] = useState<UserForm>(BLANK_FORM)
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState('')
const [copiedKey, setCopiedKey] = useState<string | null>(null)
const [newApiKey, setNewApiKey] = useState<string | null>(null)
const { user: authUser } = useAuth();
const [users, setUsers] = useState<User[]>([]);
const [modal, setModal] = useState<'add' | 'edit' | null>(null);
const [selected, setSelected] = useState<User | null>(null);
const [form, setForm] = useState<UserForm>(BLANK_FORM);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState('');
const [copiedKey, setCopiedKey] = 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)
setError('')
setNewApiKey(null)
setModal('add')
}
setForm(BLANK_FORM);
setError('');
setNewApiKey(null);
setModal('add');
};
const openEdit = (u: User) => {
setSelected(u)
setForm({ username: u.username, email: u.email, displayName: u.displayName, password: '', role: u.role })
setError('')
setNewApiKey(null)
setModal('edit')
}
setSelected(u);
setForm({
username: u.username,
email: u.email,
displayName: u.displayName,
password: '',
role: u.role,
});
setError('');
setNewApiKey(null);
setModal('edit');
};
const closeModal = () => {
setModal(null)
setSelected(null)
setNewApiKey(null)
fetchUsers()
}
setModal(null);
setSelected(null);
setNewApiKey(null);
fetchUsers();
};
const handleAdd = async (e: React.FormEvent) => {
e.preventDefault()
setSubmitting(true)
setError('')
e.preventDefault();
setSubmitting(true);
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
const res = await api.post<User>('/users', payload)
if (res.data.apiKey) setNewApiKey(res.data.apiKey)
else closeModal()
};
if (form.password) payload.password = form.password;
const res = await api.post<User>('/users', payload);
if (res.data.apiKey) setNewApiKey(res.data.apiKey);
else closeModal();
} catch (err: unknown) {
const e = err as { response?: { data?: { error?: string } } }
setError(e.response?.data?.error ?? 'Failed to create user')
const e = err as { response?: { data?: { error?: string } } };
setError(e.response?.data?.error ?? 'Failed to create user');
} finally {
setSubmitting(false)
setSubmitting(false);
}
}
};
const handleEdit = async (e: React.FormEvent) => {
e.preventDefault()
if (!selected) return
setSubmitting(true)
setError('')
e.preventDefault();
if (!selected) return;
setSubmitting(true);
setError('');
try {
const payload: Record<string, string> = {
email: form.email,
displayName: form.displayName,
role: form.role,
}
if (form.password) payload.password = form.password
await api.patch(`/users/${selected.id}`, payload)
closeModal()
};
if (form.password) payload.password = form.password;
await api.patch(`/users/${selected.id}`, payload);
closeModal();
} catch (err: unknown) {
const e = err as { response?: { data?: { error?: string } } }
setError(e.response?.data?.error ?? 'Failed to update user')
const e = err as { response?: { data?: { error?: string } } };
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
await api.delete(`/users/${u.id}`)
fetchUsers()
}
if (!confirm(`Delete user "${u.displayName}"?`)) return;
await api.delete(`/users/${u.id}`);
fetchUsers();
};
const handleRegenerateKey = async (u: User) => {
if (!confirm(`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`)) return
const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true })
setNewApiKey(res.data.apiKey ?? null)
setSelected(u)
setModal('edit')
}
if (
!confirm(
`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`,
)
)
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)
setCopiedKey(key)
setTimeout(() => setCopiedKey(null), 2000)
}
navigator.clipboard.writeText(key);
setCopiedKey(key);
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'
const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
'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';
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
+53 -53
View File
@@ -1,74 +1,74 @@
export type Role = 'ADMIN' | 'AGENT' | 'USER' | 'SERVICE'
export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED'
export type Role = 'ADMIN' | 'AGENT' | 'USER' | 'SERVICE';
export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED';
export interface User {
id: string
username: string
displayName: string
email: string
role: Role
apiKey?: string
createdAt?: string
id: string;
username: string;
displayName: string;
email: string;
role: Role;
apiKey?: string;
createdAt?: string;
}
export interface Category {
id: string
name: string
id: string;
name: string;
}
export interface CTIType {
id: string
name: string
categoryId: string
category?: Category
id: string;
name: string;
categoryId: string;
category?: Category;
}
export interface Item {
id: string
name: string
typeId: string
type?: CTIType & { category?: Category }
id: string;
name: string;
typeId: string;
type?: CTIType & { category?: Category };
}
export interface Comment {
id: string
body: string
ticketId: string
authorId: string
author: Pick<User, 'id' | 'username' | 'displayName'>
createdAt: string
id: string;
body: string;
ticketId: string;
authorId: string;
author: Pick<User, 'id' | 'username' | 'displayName'>;
createdAt: string;
}
export interface AuditLog {
id: string
ticketId: string
userId: string
action: string
detail: string | null
createdAt: string
user: Pick<User, 'id' | 'username' | 'displayName'>
id: string;
ticketId: string;
userId: string;
action: string;
detail: string | null;
createdAt: string;
user: Pick<User, 'id' | 'username' | 'displayName'>;
}
export interface Ticket {
id: string
displayId: string
title: string
overview: string
severity: number
status: TicketStatus
categoryId: string
typeId: string
itemId: string
assigneeId: string | null
createdById: string
resolvedAt: string | null
createdAt: string
updatedAt: string
category: Category
type: CTIType
item: Item
assignee: Pick<User, 'id' | 'username' | 'displayName'> | null
createdBy: Pick<User, 'id' | 'username' | 'displayName'>
comments?: Comment[]
_count?: { comments: number }
id: string;
displayId: string;
title: string;
overview: string;
severity: number;
status: TicketStatus;
categoryId: string;
typeId: string;
itemId: string;
assigneeId: string | null;
createdById: string;
resolvedAt: string | null;
createdAt: string;
updatedAt: string;
category: Category;
type: CTIType;
item: Item;
assignee: Pick<User, 'id' | 'username' | 'displayName'> | null;
createdBy: Pick<User, 'id' | 'username' | 'displayName'>;
comments?: Comment[];
_count?: { comments: number };
}
client/tailwind.config.js
+1 -1
View File
@@ -5,4 +5,4 @@ export default {
extend: {},
},
plugins: [],
}
};
client/vite.config.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
@@ -8,4 +8,4 @@ export default defineConfig({
'/api': 'http://localhost:3000',
},
},
})
});