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/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>
)
);
}