Add ESLint + Prettier + EditorConfig tooling at repo root
v1.0 Phase 1.1 — repo-wide lint/format baseline. - eslint.config.mjs (flat config) lints server, client, shared - .prettierrc.json, .prettierignore, .editorconfig, .nvmrc - Root package.json holds shared devDeps; per-package scripts keep their typecheck + test runners - Fix 7 lint issues surfaced by the baseline run: - TicketDetail.tsx: replace ternary-with-side-effects with if/else - admin/Users.tsx: escape apostrophe in JSX - errorHandler.ts: typed err as unknown with ErrorLike refinement - users.ts: Prisma.UserUpdateInput instead of Record<string, any> - seed.ts: drop unused goddard binding - Run prettier across tracked sources for a clean formatting baseline
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
@@ -0,0 +1,10 @@
|
||||
node_modules
|
||||
dist
|
||||
build
|
||||
.vite
|
||||
coverage
|
||||
*.min.js
|
||||
*.min.css
|
||||
package-lock.json
|
||||
server/prisma/migrations
|
||||
client/src/components/ui
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2,
|
||||
"arrowParens": "always",
|
||||
"bracketSpacing": true,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
@@ -20,7 +20,7 @@ Internal ticketing system with CTI-based routing, severity levels, role-based ac
|
||||
## Roles
|
||||
|
||||
| Role | Access |
|
||||
|---|---|
|
||||
| ----------- | ---------------------------------------------------------------------------- |
|
||||
| **Admin** | Full access — manage users, CTI config, close and delete tickets |
|
||||
| **Agent** | Manage tickets — create, update, assign, comment, change status (not Closed) |
|
||||
| **User** | Basic access — view tickets and add comments only |
|
||||
@@ -78,6 +78,7 @@ docker compose exec server npm run db:seed
|
||||
```
|
||||
|
||||
This creates:
|
||||
|
||||
- `admin` user (password: `admin123`) — **change this immediately**
|
||||
- `goddard` service account — API key is printed to the console; copy it now
|
||||
|
||||
@@ -141,15 +142,23 @@ Base URL: `https://tickets.thewrightserver.net/api`
|
||||
Authenticate and receive a JWT.
|
||||
|
||||
**Body:**
|
||||
|
||||
```json
|
||||
{ "username": "string", "password": "string" }
|
||||
```
|
||||
|
||||
**Response:**
|
||||
|
||||
```json
|
||||
{
|
||||
"token": "eyJ...",
|
||||
"user": { "id": "...", "username": "admin", "displayName": "Admin", "email": "...", "role": "ADMIN" }
|
||||
"user": {
|
||||
"id": "...",
|
||||
"username": "admin",
|
||||
"displayName": "Admin",
|
||||
"email": "...",
|
||||
"role": "ADMIN"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -168,7 +177,7 @@ List all tickets, sorted by severity (ASC) then created date (DESC).
|
||||
**Query parameters:**
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| ------------ | ------ | ------------------------------------------------------------- |
|
||||
| `status` | string | Filter by status: `OPEN`, `IN_PROGRESS`, `RESOLVED`, `CLOSED` |
|
||||
| `severity` | number | Filter by severity: `1`–`5` |
|
||||
| `categoryId` | string | Filter by category (queue) |
|
||||
@@ -190,6 +199,7 @@ Fetch a single ticket by internal ID or display ID (e.g. `V325813929`). Includes
|
||||
Create a new ticket. Requires **Agent**, **Admin**, or **Service** role.
|
||||
|
||||
**Body:**
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "string",
|
||||
@@ -213,6 +223,7 @@ Update a ticket. Accepts any combination of fields. Requires **Agent**, **Admin*
|
||||
> Setting `status` to `CLOSED` requires **Admin** role.
|
||||
|
||||
**Body (all fields optional):**
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "string",
|
||||
@@ -247,6 +258,7 @@ Delete a ticket and all associated comments and audit logs. **Admin only.**
|
||||
Add a comment to a ticket. Supports markdown. All authenticated roles may comment.
|
||||
|
||||
**Body:**
|
||||
|
||||
```json
|
||||
{ "body": "string (markdown)" }
|
||||
```
|
||||
@@ -270,6 +282,7 @@ Delete a comment. Authors may delete their own comments; Admins may delete any.
|
||||
Retrieve the full audit log for a ticket, ordered newest first.
|
||||
|
||||
**Response:** Array of audit log entries:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
@@ -285,7 +298,7 @@ Retrieve the full audit log for a ticket, ordered newest first.
|
||||
**Action types:**
|
||||
|
||||
| Action | Detail |
|
||||
|---|---|
|
||||
| ------------------ | -------------------------------------------------------------- |
|
||||
| `CREATED` | — |
|
||||
| `STATUS_CHANGED` | e.g. `Open → In Progress` |
|
||||
| `SEVERITY_CHANGED` | e.g. `SEV 3 → SEV 1` |
|
||||
@@ -301,7 +314,9 @@ Retrieve the full audit log for a ticket, ordered newest first.
|
||||
### CTI (Category / Type / Item)
|
||||
|
||||
#### `GET /api/cti/categories`
|
||||
|
||||
#### `GET /api/cti/types?categoryId=<id>`
|
||||
|
||||
#### `GET /api/cti/items?typeId=<id>`
|
||||
|
||||
Read the CTI hierarchy. Used to resolve IDs when creating/rerouting tickets.
|
||||
@@ -309,7 +324,7 @@ Read the CTI hierarchy. Used to resolve IDs when creating/rerouting tickets.
|
||||
**Admin-only write operations:**
|
||||
|
||||
| Method | Endpoint | Body |
|
||||
|---|---|---|
|
||||
| -------- | ------------------------- | ---------------------------------------------- |
|
||||
| `POST` | `/api/cti/categories` | `{ "name": "string" }` |
|
||||
| `PUT` | `/api/cti/categories/:id` | `{ "name": "string" }` |
|
||||
| `DELETE` | `/api/cti/categories/:id` | — |
|
||||
@@ -391,6 +406,7 @@ Content-Type: application/json
|
||||
```
|
||||
|
||||
CTI IDs can be fetched from:
|
||||
|
||||
- `GET /api/cti/categories`
|
||||
- `GET /api/cti/types?categoryId=<id>`
|
||||
- `GET /api/cti/items?typeId=<id>`
|
||||
@@ -402,7 +418,7 @@ To regenerate the Goddard API key: Admin → Users → refresh icon next to Godd
|
||||
## Environment Variables
|
||||
|
||||
| Variable | Required | Description |
|
||||
|---|---|---|
|
||||
| ------------------- | -------- | ---------------------------------------------------- |
|
||||
| `DATABASE_URL` | Yes | PostgreSQL connection string |
|
||||
| `JWT_SECRET` | Yes | Secret for signing JWTs — use `openssl rand -hex 64` |
|
||||
| `CLIENT_URL` | Yes | Allowed CORS origin (your domain) |
|
||||
@@ -416,7 +432,7 @@ To regenerate the Goddard API key: Admin → Users → refresh icon next to Godd
|
||||
## Ticket Severity
|
||||
|
||||
| Level | Label | Meaning |
|
||||
|---|---|---|
|
||||
| ----- | ----- | ------------------------------------ |
|
||||
| 1 | SEV 1 | Critical — immediate action required |
|
||||
| 2 | SEV 2 | High — significant impact |
|
||||
| 3 | SEV 3 | Medium — standard priority |
|
||||
|
||||
Generated
+5903
-2
File diff suppressed because it is too large
Load Diff
+14
-2
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,4 +3,4 @@ export default {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
+11
-11
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import axios from 'axios'
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
})
|
||||
});
|
||||
|
||||
export default api
|
||||
export default api;
|
||||
|
||||
@@ -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 />;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 />;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
+54
-18
@@ -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;
|
||||
}
|
||||
|
||||
+6
-6
@@ -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>,
|
||||
);
|
||||
|
||||
@@ -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))
|
||||
.finally(() => setLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [status, severity, search, selectedCategory, selectedType, selectedItem])
|
||||
}, [status, severity, search, selectedCategory, selectedType, selectedItem]);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(fetchTickets, 300)
|
||||
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 */}
|
||||
@@ -324,5 +326,5 @@ export default function Dashboard() {
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+20
-24
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
@@ -87,5 +91,5 @@ export default function MyTickets() {
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+176
-152
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+113
-87
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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'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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+53
-53
@@ -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 };
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@ export default {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
+2
-2
@@ -15,7 +15,7 @@ services:
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U postgres"]
|
||||
test: ['CMD-SHELL', 'pg_isready -U postgres']
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
@@ -40,7 +40,7 @@ services:
|
||||
image: ${REGISTRY}/josh/ticketing-client:${TAG:-latest}
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "${PORT:-3080}:80"
|
||||
- '${PORT:-3080}:80'
|
||||
depends_on:
|
||||
- server
|
||||
networks:
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import js from '@eslint/js';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import react from 'eslint-plugin-react';
|
||||
import reactHooks from 'eslint-plugin-react-hooks';
|
||||
import globals from 'globals';
|
||||
|
||||
export default [
|
||||
{
|
||||
ignores: [
|
||||
'**/dist/**',
|
||||
'**/node_modules/**',
|
||||
'**/.vite/**',
|
||||
'**/coverage/**',
|
||||
'server/prisma/migrations/**',
|
||||
'client/src/components/ui/**',
|
||||
],
|
||||
},
|
||||
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
|
||||
{
|
||||
files: ['client/src/**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'module',
|
||||
globals: { ...globals.browser },
|
||||
parserOptions: {
|
||||
ecmaFeatures: { jsx: true },
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
react,
|
||||
'react-hooks': reactHooks,
|
||||
},
|
||||
settings: {
|
||||
react: { version: 'detect' },
|
||||
},
|
||||
rules: {
|
||||
...react.configs.recommended.rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
|
||||
],
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
files: ['server/src/**/*.ts', 'server/prisma/**/*.ts'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'module',
|
||||
globals: { ...globals.node },
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
|
||||
],
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
files: ['shared/**/*.ts'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'module',
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
|
||||
},
|
||||
},
|
||||
];
|
||||
Generated
+3506
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "ticketing-system",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"description": "Internal ticketing system — monorepo root (tooling only)",
|
||||
"scripts": {
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"format": "prettier --write .",
|
||||
"format:check": "prettier --check .",
|
||||
"typecheck": "npm run typecheck --prefix server && npm run typecheck --prefix client",
|
||||
"test": "npm test --prefix server && npm test --prefix client"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react": "^7.37.3",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"globals": "^15.14.0",
|
||||
"prettier": "^3.4.2",
|
||||
"typescript-eslint": "^8.18.2"
|
||||
}
|
||||
}
|
||||
Generated
+3667
-1
File diff suppressed because it is too large
Load Diff
+12
-2
@@ -9,7 +9,10 @@
|
||||
"db:migrate": "prisma migrate dev",
|
||||
"db:push": "prisma db push",
|
||||
"db:generate": "prisma generate",
|
||||
"db:seed": "tsx prisma/seed.ts"
|
||||
"db:seed": "tsx prisma/seed.ts",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@prisma/client": "^5.22.0",
|
||||
@@ -18,8 +21,12 @@
|
||||
"dotenv": "^16.4.7",
|
||||
"express": "^4.21.2",
|
||||
"express-async-errors": "^3.1.0",
|
||||
"express-rate-limit": "^7.5.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"node-cron": "^3.0.3",
|
||||
"pino": "^9.5.0",
|
||||
"pino-http": "^10.3.0",
|
||||
"pino-pretty": "^13.0.0",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -29,8 +36,11 @@
|
||||
"@types/jsonwebtoken": "^9.0.7",
|
||||
"@types/node": "^22.10.0",
|
||||
"@types/node-cron": "^3.0.11",
|
||||
"@types/supertest": "^6.0.2",
|
||||
"prisma": "^5.22.0",
|
||||
"supertest": "^7.0.0",
|
||||
"tsx": "^4.19.2",
|
||||
"typescript": "^5.7.2"
|
||||
"typescript": "^5.7.2",
|
||||
"vitest": "^2.1.8"
|
||||
}
|
||||
}
|
||||
|
||||
+27
-24
@@ -1,11 +1,11 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import bcrypt from 'bcryptjs'
|
||||
import crypto from 'crypto'
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import bcrypt from 'bcryptjs';
|
||||
import crypto from 'crypto';
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
async function main() {
|
||||
console.log('Seeding database...')
|
||||
console.log('Seeding database...');
|
||||
|
||||
// Admin user
|
||||
await prisma.user.upsert({
|
||||
@@ -18,11 +18,11 @@ async function main() {
|
||||
passwordHash: await bcrypt.hash('admin123', 12),
|
||||
role: 'ADMIN',
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
// Goddard — n8n service account
|
||||
const apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
|
||||
const goddard = await prisma.user.upsert({
|
||||
const apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
|
||||
await prisma.user.upsert({
|
||||
where: { username: 'goddard' },
|
||||
update: {},
|
||||
create: {
|
||||
@@ -33,70 +33,73 @@ async function main() {
|
||||
role: 'SERVICE',
|
||||
apiKey,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const existingGoddard = await prisma.user.findUnique({ where: { username: 'goddard' } })
|
||||
console.log(`\nGoddard API key: ${existingGoddard?.apiKey ?? apiKey}`)
|
||||
console.log('(This key is only displayed once on first seed — copy it now)\n')
|
||||
const existingGoddard = await prisma.user.findUnique({ where: { username: 'goddard' } });
|
||||
console.log(`\nGoddard API key: ${existingGoddard?.apiKey ?? apiKey}`);
|
||||
console.log('(This key is only displayed once on first seed — copy it now)\n');
|
||||
|
||||
// Sample CTI structure
|
||||
const theWrightServer = await prisma.category.upsert({
|
||||
where: { name: 'TheWrightServer' },
|
||||
update: {},
|
||||
create: { name: 'TheWrightServer' },
|
||||
})
|
||||
});
|
||||
|
||||
const homelab = await prisma.category.upsert({
|
||||
where: { name: 'Homelab' },
|
||||
update: {},
|
||||
create: { name: 'Homelab' },
|
||||
})
|
||||
});
|
||||
|
||||
const automation = await prisma.type.upsert({
|
||||
where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Automation' } },
|
||||
update: {},
|
||||
create: { name: 'Automation', categoryId: theWrightServer.id },
|
||||
})
|
||||
});
|
||||
|
||||
const media = await prisma.type.upsert({
|
||||
where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Media' } },
|
||||
update: {},
|
||||
create: { name: 'Media', categoryId: theWrightServer.id },
|
||||
})
|
||||
});
|
||||
|
||||
const infrastructure = await prisma.type.upsert({
|
||||
where: { categoryId_name: { categoryId: homelab.id, name: 'Infrastructure' } },
|
||||
update: {},
|
||||
create: { name: 'Infrastructure', categoryId: homelab.id },
|
||||
})
|
||||
});
|
||||
|
||||
await prisma.item.upsert({
|
||||
where: { typeId_name: { typeId: automation.id, name: 'Backup' } },
|
||||
update: {},
|
||||
create: { name: 'Backup', typeId: automation.id },
|
||||
})
|
||||
});
|
||||
|
||||
await prisma.item.upsert({
|
||||
where: { typeId_name: { typeId: automation.id, name: 'Sync' } },
|
||||
update: {},
|
||||
create: { name: 'Sync', typeId: automation.id },
|
||||
})
|
||||
});
|
||||
|
||||
await prisma.item.upsert({
|
||||
where: { typeId_name: { typeId: media.id, name: 'Plex' } },
|
||||
update: {},
|
||||
create: { name: 'Plex', typeId: media.id },
|
||||
})
|
||||
});
|
||||
|
||||
await prisma.item.upsert({
|
||||
where: { typeId_name: { typeId: infrastructure.id, name: 'Proxmox' } },
|
||||
update: {},
|
||||
create: { name: 'Proxmox', typeId: infrastructure.id },
|
||||
})
|
||||
});
|
||||
|
||||
console.log('Seed complete.')
|
||||
console.log('Seed complete.');
|
||||
}
|
||||
|
||||
main()
|
||||
.catch((e) => { console.error(e); process.exit(1) })
|
||||
.finally(() => prisma.$disconnect())
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
})
|
||||
.finally(() => prisma.$disconnect());
|
||||
|
||||
+26
-26
@@ -1,41 +1,41 @@
|
||||
import 'express-async-errors'
|
||||
import express from 'express'
|
||||
import cors from 'cors'
|
||||
import dotenv from 'dotenv'
|
||||
import 'express-async-errors';
|
||||
import express from 'express';
|
||||
import cors from 'cors';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
import authRoutes from './routes/auth'
|
||||
import ticketRoutes from './routes/tickets'
|
||||
import ctiRoutes from './routes/cti'
|
||||
import userRoutes from './routes/users'
|
||||
import { authenticate } from './middleware/auth'
|
||||
import { errorHandler } from './middleware/errorHandler'
|
||||
import { startAutoCloseJob } from './jobs/autoClose'
|
||||
import authRoutes from './routes/auth';
|
||||
import ticketRoutes from './routes/tickets';
|
||||
import ctiRoutes from './routes/cti';
|
||||
import userRoutes from './routes/users';
|
||||
import { authenticate } from './middleware/auth';
|
||||
import { errorHandler } from './middleware/errorHandler';
|
||||
import { startAutoCloseJob } from './jobs/autoClose';
|
||||
|
||||
dotenv.config()
|
||||
dotenv.config();
|
||||
|
||||
if (!process.env.JWT_SECRET) {
|
||||
console.error('FATAL: JWT_SECRET is not set')
|
||||
process.exit(1)
|
||||
console.error('FATAL: JWT_SECRET is not set');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const app = express()
|
||||
const app = express();
|
||||
|
||||
app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }))
|
||||
app.use(express.json())
|
||||
app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }));
|
||||
app.use(express.json());
|
||||
|
||||
// Public
|
||||
app.use('/api/auth', authRoutes)
|
||||
app.use('/api/auth', authRoutes);
|
||||
|
||||
// Protected
|
||||
app.use('/api/tickets', authenticate, ticketRoutes)
|
||||
app.use('/api/cti', authenticate, ctiRoutes)
|
||||
app.use('/api/users', authenticate, userRoutes)
|
||||
app.use('/api/tickets', authenticate, ticketRoutes);
|
||||
app.use('/api/cti', authenticate, ctiRoutes);
|
||||
app.use('/api/users', authenticate, userRoutes);
|
||||
|
||||
app.use(errorHandler)
|
||||
app.use(errorHandler);
|
||||
|
||||
startAutoCloseJob()
|
||||
startAutoCloseJob();
|
||||
|
||||
const PORT = Number(process.env.PORT) || 3000
|
||||
const PORT = Number(process.env.PORT) || 3000;
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`)
|
||||
})
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
});
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import cron from 'node-cron'
|
||||
import prisma from '../lib/prisma'
|
||||
import cron from 'node-cron';
|
||||
import prisma from '../lib/prisma';
|
||||
|
||||
export function startAutoCloseJob() {
|
||||
// Run every hour — closes RESOLVED tickets that have been resolved for 14+ days
|
||||
cron.schedule('0 * * * *', async () => {
|
||||
const twoWeeksAgo = new Date()
|
||||
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
|
||||
const twoWeeksAgo = new Date();
|
||||
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
|
||||
|
||||
const result = await prisma.ticket.updateMany({
|
||||
where: {
|
||||
@@ -13,12 +13,12 @@ export function startAutoCloseJob() {
|
||||
resolvedAt: { lte: twoWeeksAgo },
|
||||
},
|
||||
data: { status: 'CLOSED' },
|
||||
})
|
||||
});
|
||||
|
||||
if (result.count > 0) {
|
||||
console.log(`[AutoClose] Closed ${result.count} ticket(s) after 2-week resolution period`)
|
||||
console.log(`[AutoClose] Closed ${result.count} ticket(s) after 2-week resolution period`);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
console.log('[AutoClose] Job scheduled — runs every hour')
|
||||
console.log('[AutoClose] Job scheduled — runs every hour');
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export default prisma
|
||||
export default prisma;
|
||||
|
||||
@@ -1,69 +1,57 @@
|
||||
import { Request, Response, NextFunction } from 'express'
|
||||
import jwt from 'jsonwebtoken'
|
||||
import prisma from '../lib/prisma'
|
||||
import { Request, Response, NextFunction } from 'express';
|
||||
import jwt from 'jsonwebtoken';
|
||||
import prisma from '../lib/prisma';
|
||||
|
||||
export interface AuthRequest extends Request {
|
||||
user?: {
|
||||
id: string
|
||||
role: string
|
||||
username: string
|
||||
}
|
||||
id: string;
|
||||
role: string;
|
||||
username: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const authenticate = async (
|
||||
req: AuthRequest,
|
||||
res: Response,
|
||||
next: NextFunction
|
||||
) => {
|
||||
const apiKey = req.headers['x-api-key'] as string | undefined
|
||||
export const authenticate = async (req: AuthRequest, res: Response, next: NextFunction) => {
|
||||
const apiKey = req.headers['x-api-key'] as string | undefined;
|
||||
|
||||
if (apiKey) {
|
||||
const user = await prisma.user.findUnique({ where: { apiKey } })
|
||||
const user = await prisma.user.findUnique({ where: { apiKey } });
|
||||
if (!user || user.role !== 'SERVICE') {
|
||||
return res.status(401).json({ error: 'Invalid API key' })
|
||||
return res.status(401).json({ error: 'Invalid API key' });
|
||||
}
|
||||
req.user = { id: user.id, role: user.role, username: user.username }
|
||||
return next()
|
||||
req.user = { id: user.id, role: user.role, username: user.username };
|
||||
return next();
|
||||
}
|
||||
|
||||
const authHeader = req.headers.authorization
|
||||
const authHeader = req.headers.authorization;
|
||||
if (!authHeader?.startsWith('Bearer ')) {
|
||||
return res.status(401).json({ error: 'Unauthorized' })
|
||||
return res.status(401).json({ error: 'Unauthorized' });
|
||||
}
|
||||
|
||||
const token = authHeader.split(' ')[1]
|
||||
const token = authHeader.split(' ')[1];
|
||||
try {
|
||||
const payload = jwt.verify(token, process.env.JWT_SECRET!) as {
|
||||
id: string
|
||||
role: string
|
||||
username: string
|
||||
}
|
||||
req.user = payload
|
||||
next()
|
||||
id: string;
|
||||
role: string;
|
||||
username: string;
|
||||
};
|
||||
req.user = payload;
|
||||
next();
|
||||
} catch {
|
||||
return res.status(401).json({ error: 'Invalid or expired token' })
|
||||
return res.status(401).json({ error: 'Invalid or expired token' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const requireAdmin = (
|
||||
req: AuthRequest,
|
||||
res: Response,
|
||||
next: NextFunction
|
||||
) => {
|
||||
export const requireAdmin = (req: AuthRequest, res: Response, next: NextFunction) => {
|
||||
if (req.user?.role !== 'ADMIN') {
|
||||
return res.status(403).json({ error: 'Admin access required' })
|
||||
return res.status(403).json({ error: 'Admin access required' });
|
||||
}
|
||||
next()
|
||||
}
|
||||
next();
|
||||
};
|
||||
|
||||
// Blocks USER role — allows ADMIN, AGENT, SERVICE
|
||||
export const requireAgent = (
|
||||
req: AuthRequest,
|
||||
res: Response,
|
||||
next: NextFunction
|
||||
) => {
|
||||
export const requireAgent = (req: AuthRequest, res: Response, next: NextFunction) => {
|
||||
if (req.user?.role === 'USER') {
|
||||
return res.status(403).json({ error: 'Insufficient permissions' })
|
||||
return res.status(403).json({ error: 'Insufficient permissions' });
|
||||
}
|
||||
next()
|
||||
}
|
||||
next();
|
||||
};
|
||||
|
||||
@@ -1,29 +1,31 @@
|
||||
import { Request, Response, NextFunction } from 'express'
|
||||
import { ZodError } from 'zod'
|
||||
import { Request, Response, NextFunction } from 'express';
|
||||
import { ZodError } from 'zod';
|
||||
|
||||
export function errorHandler(
|
||||
err: any,
|
||||
req: Request,
|
||||
res: Response,
|
||||
next: NextFunction
|
||||
) {
|
||||
console.error(err)
|
||||
type ErrorLike = {
|
||||
code?: string;
|
||||
status?: number;
|
||||
statusCode?: number;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
export function errorHandler(err: unknown, _req: Request, res: Response, _next: NextFunction) {
|
||||
console.error(err);
|
||||
|
||||
if (err instanceof ZodError) {
|
||||
return res.status(400).json({ error: 'Validation error', details: err.flatten() })
|
||||
return res.status(400).json({ error: 'Validation error', details: err.flatten() });
|
||||
}
|
||||
|
||||
// Prisma unique constraint violation
|
||||
if (err.code === 'P2002') {
|
||||
return res.status(409).json({ error: 'A record with that value already exists' })
|
||||
const e = (err ?? {}) as ErrorLike;
|
||||
|
||||
if (e.code === 'P2002') {
|
||||
return res.status(409).json({ error: 'A record with that value already exists' });
|
||||
}
|
||||
|
||||
// Prisma record not found
|
||||
if (err.code === 'P2025') {
|
||||
return res.status(404).json({ error: 'Record not found' })
|
||||
if (e.code === 'P2025') {
|
||||
return res.status(404).json({ error: 'Record not found' });
|
||||
}
|
||||
|
||||
const status = err.status || err.statusCode || 500
|
||||
const message = err.message || 'Internal server error'
|
||||
res.status(status).json({ error: message })
|
||||
const status = e.status || e.statusCode || 500;
|
||||
const message = e.message || 'Internal server error';
|
||||
res.status(status).json({ error: message });
|
||||
}
|
||||
|
||||
+21
-21
@@ -1,34 +1,34 @@
|
||||
import { Router } from 'express'
|
||||
import bcrypt from 'bcryptjs'
|
||||
import jwt from 'jsonwebtoken'
|
||||
import { z } from 'zod'
|
||||
import prisma from '../lib/prisma'
|
||||
import { authenticate, AuthRequest } from '../middleware/auth'
|
||||
import { Router } from 'express';
|
||||
import bcrypt from 'bcryptjs';
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { z } from 'zod';
|
||||
import prisma from '../lib/prisma';
|
||||
import { authenticate, AuthRequest } from '../middleware/auth';
|
||||
|
||||
const router = Router()
|
||||
const router = Router();
|
||||
|
||||
const loginSchema = z.object({
|
||||
username: z.string().min(1),
|
||||
password: z.string().min(1),
|
||||
})
|
||||
});
|
||||
|
||||
router.post('/login', async (req, res) => {
|
||||
const { username, password } = loginSchema.parse(req.body)
|
||||
const { username, password } = loginSchema.parse(req.body);
|
||||
|
||||
const user = await prisma.user.findUnique({ where: { username } })
|
||||
const user = await prisma.user.findUnique({ where: { username } });
|
||||
if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
|
||||
return res.status(401).json({ error: 'Invalid credentials' })
|
||||
return res.status(401).json({ error: 'Invalid credentials' });
|
||||
}
|
||||
|
||||
if (user.role === 'SERVICE') {
|
||||
return res.status(401).json({ error: 'Service accounts must authenticate via API key' })
|
||||
return res.status(401).json({ error: 'Service accounts must authenticate via API key' });
|
||||
}
|
||||
|
||||
const token = jwt.sign(
|
||||
{ id: user.id, role: user.role, username: user.username },
|
||||
process.env.JWT_SECRET!,
|
||||
{ expiresIn: '24h' }
|
||||
)
|
||||
{ expiresIn: '24h' },
|
||||
);
|
||||
|
||||
res.json({
|
||||
token,
|
||||
@@ -39,16 +39,16 @@ router.post('/login', async (req, res) => {
|
||||
email: user.email,
|
||||
role: user.role,
|
||||
},
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
router.get('/me', authenticate, async (req: AuthRequest, res) => {
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { id: req.user!.id },
|
||||
select: { id: true, username: true, displayName: true, email: true, role: true },
|
||||
})
|
||||
if (!user) return res.status(404).json({ error: 'User not found' })
|
||||
res.json(user)
|
||||
})
|
||||
});
|
||||
if (!user) return res.status(404).json({ error: 'User not found' });
|
||||
res.json(user);
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { Router } from 'express'
|
||||
import { z } from 'zod'
|
||||
import prisma from '../lib/prisma'
|
||||
import { AuthRequest } from '../middleware/auth'
|
||||
import { Router } from 'express';
|
||||
import { z } from 'zod';
|
||||
import prisma from '../lib/prisma';
|
||||
import { AuthRequest } from '../middleware/auth';
|
||||
|
||||
const router = Router({ mergeParams: true })
|
||||
const router = Router({ mergeParams: true });
|
||||
|
||||
const commentSchema = z.object({
|
||||
body: z.string().min(1),
|
||||
})
|
||||
});
|
||||
|
||||
router.post('/', async (req: AuthRequest, res) => {
|
||||
const { body } = commentSchema.parse(req.body)
|
||||
const ticketId = (req.params as Record<string, string>).ticketId
|
||||
const { body } = commentSchema.parse(req.body);
|
||||
const ticketId = (req.params as Record<string, string>).ticketId;
|
||||
|
||||
const ticket = await prisma.ticket.findFirst({
|
||||
where: { OR: [{ id: ticketId }, { displayId: ticketId }] },
|
||||
})
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
||||
});
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||
|
||||
const [comment] = await prisma.$transaction([
|
||||
prisma.comment.create({
|
||||
@@ -26,19 +26,19 @@ router.post('/', async (req: AuthRequest, res) => {
|
||||
prisma.auditLog.create({
|
||||
data: { ticketId: ticket.id, userId: req.user!.id, action: 'COMMENT_ADDED', detail: body },
|
||||
}),
|
||||
])
|
||||
]);
|
||||
|
||||
res.status(201).json(comment)
|
||||
})
|
||||
res.status(201).json(comment);
|
||||
});
|
||||
|
||||
router.delete('/:commentId', async (req: AuthRequest, res) => {
|
||||
const comment = await prisma.comment.findUnique({
|
||||
where: { id: req.params.commentId },
|
||||
})
|
||||
if (!comment) return res.status(404).json({ error: 'Comment not found' })
|
||||
});
|
||||
if (!comment) return res.status(404).json({ error: 'Comment not found' });
|
||||
|
||||
if (comment.authorId !== req.user!.id && req.user!.role !== 'ADMIN') {
|
||||
return res.status(403).json({ error: 'Not allowed' })
|
||||
return res.status(403).json({ error: 'Not allowed' });
|
||||
}
|
||||
|
||||
await prisma.$transaction([
|
||||
@@ -51,9 +51,9 @@ router.delete('/:commentId', async (req: AuthRequest, res) => {
|
||||
detail: comment.body,
|
||||
},
|
||||
}),
|
||||
])
|
||||
]);
|
||||
|
||||
res.status(204).send()
|
||||
})
|
||||
res.status(204).send();
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
+51
-51
@@ -1,113 +1,113 @@
|
||||
import { Router } from 'express'
|
||||
import { z } from 'zod'
|
||||
import prisma from '../lib/prisma'
|
||||
import { requireAdmin } from '../middleware/auth'
|
||||
import { Router } from 'express';
|
||||
import { z } from 'zod';
|
||||
import prisma from '../lib/prisma';
|
||||
import { requireAdmin } from '../middleware/auth';
|
||||
|
||||
const router = Router()
|
||||
const router = Router();
|
||||
|
||||
const nameSchema = z.object({ name: z.string().min(1).max(100) })
|
||||
const nameSchema = z.object({ name: z.string().min(1).max(100) });
|
||||
|
||||
// ── Categories ────────────────────────────────────────────────────────────────
|
||||
|
||||
router.get('/categories', async (_req, res) => {
|
||||
const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } })
|
||||
res.json(categories)
|
||||
})
|
||||
const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } });
|
||||
res.json(categories);
|
||||
});
|
||||
|
||||
router.post('/categories', requireAdmin, async (req, res) => {
|
||||
const { name } = nameSchema.parse(req.body)
|
||||
const category = await prisma.category.create({ data: { name } })
|
||||
res.status(201).json(category)
|
||||
})
|
||||
const { name } = nameSchema.parse(req.body);
|
||||
const category = await prisma.category.create({ data: { name } });
|
||||
res.status(201).json(category);
|
||||
});
|
||||
|
||||
router.put('/categories/:id', requireAdmin, async (req, res) => {
|
||||
const { name } = nameSchema.parse(req.body)
|
||||
const { name } = nameSchema.parse(req.body);
|
||||
const category = await prisma.category.update({
|
||||
where: { id: req.params.id },
|
||||
data: { name },
|
||||
})
|
||||
res.json(category)
|
||||
})
|
||||
});
|
||||
res.json(category);
|
||||
});
|
||||
|
||||
router.delete('/categories/:id', requireAdmin, async (req, res) => {
|
||||
await prisma.category.delete({ where: { id: req.params.id } })
|
||||
res.status(204).send()
|
||||
})
|
||||
await prisma.category.delete({ where: { id: req.params.id } });
|
||||
res.status(204).send();
|
||||
});
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
router.get('/types', async (req, res) => {
|
||||
const { categoryId } = req.query
|
||||
const { categoryId } = req.query;
|
||||
const types = await prisma.type.findMany({
|
||||
where: categoryId ? { categoryId: categoryId as string } : undefined,
|
||||
include: { category: true },
|
||||
orderBy: { name: 'asc' },
|
||||
})
|
||||
res.json(types)
|
||||
})
|
||||
});
|
||||
res.json(types);
|
||||
});
|
||||
|
||||
router.post('/types', requireAdmin, async (req, res) => {
|
||||
const { name, categoryId } = z
|
||||
.object({ name: z.string().min(1).max(100), categoryId: z.string().min(1) })
|
||||
.parse(req.body)
|
||||
.parse(req.body);
|
||||
const type = await prisma.type.create({
|
||||
data: { name, categoryId },
|
||||
include: { category: true },
|
||||
})
|
||||
res.status(201).json(type)
|
||||
})
|
||||
});
|
||||
res.status(201).json(type);
|
||||
});
|
||||
|
||||
router.put('/types/:id', requireAdmin, async (req, res) => {
|
||||
const { name } = nameSchema.parse(req.body)
|
||||
const { name } = nameSchema.parse(req.body);
|
||||
const type = await prisma.type.update({
|
||||
where: { id: req.params.id },
|
||||
data: { name },
|
||||
include: { category: true },
|
||||
})
|
||||
res.json(type)
|
||||
})
|
||||
});
|
||||
res.json(type);
|
||||
});
|
||||
|
||||
router.delete('/types/:id', requireAdmin, async (req, res) => {
|
||||
await prisma.type.delete({ where: { id: req.params.id } })
|
||||
res.status(204).send()
|
||||
})
|
||||
await prisma.type.delete({ where: { id: req.params.id } });
|
||||
res.status(204).send();
|
||||
});
|
||||
|
||||
// ── Items ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
router.get('/items', async (req, res) => {
|
||||
const { typeId } = req.query
|
||||
const { typeId } = req.query;
|
||||
const items = await prisma.item.findMany({
|
||||
where: typeId ? { typeId: typeId as string } : undefined,
|
||||
include: { type: { include: { category: true } } },
|
||||
orderBy: { name: 'asc' },
|
||||
})
|
||||
res.json(items)
|
||||
})
|
||||
});
|
||||
res.json(items);
|
||||
});
|
||||
|
||||
router.post('/items', requireAdmin, async (req, res) => {
|
||||
const { name, typeId } = z
|
||||
.object({ name: z.string().min(1).max(100), typeId: z.string().min(1) })
|
||||
.parse(req.body)
|
||||
.parse(req.body);
|
||||
const item = await prisma.item.create({
|
||||
data: { name, typeId },
|
||||
include: { type: { include: { category: true } } },
|
||||
})
|
||||
res.status(201).json(item)
|
||||
})
|
||||
});
|
||||
res.status(201).json(item);
|
||||
});
|
||||
|
||||
router.put('/items/:id', requireAdmin, async (req, res) => {
|
||||
const { name } = nameSchema.parse(req.body)
|
||||
const { name } = nameSchema.parse(req.body);
|
||||
const item = await prisma.item.update({
|
||||
where: { id: req.params.id },
|
||||
data: { name },
|
||||
include: { type: { include: { category: true } } },
|
||||
})
|
||||
res.json(item)
|
||||
})
|
||||
});
|
||||
res.json(item);
|
||||
});
|
||||
|
||||
router.delete('/items/:id', requireAdmin, async (req, res) => {
|
||||
await prisma.item.delete({ where: { id: req.params.id } })
|
||||
res.status(204).send()
|
||||
})
|
||||
await prisma.item.delete({ where: { id: req.params.id } });
|
||||
res.status(204).send();
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Router } from 'express'
|
||||
import { z } from 'zod'
|
||||
import prisma from '../lib/prisma'
|
||||
import { requireAdmin, requireAgent, AuthRequest } from '../middleware/auth'
|
||||
import commentRouter from './comments'
|
||||
import { Router } from 'express';
|
||||
import { z } from 'zod';
|
||||
import prisma from '../lib/prisma';
|
||||
import { requireAdmin, requireAgent, AuthRequest } from '../middleware/auth';
|
||||
import commentRouter from './comments';
|
||||
|
||||
const router = Router()
|
||||
const router = Router();
|
||||
|
||||
const ticketInclude = {
|
||||
category: true,
|
||||
@@ -16,21 +16,21 @@ const ticketInclude = {
|
||||
include: { author: { select: { id: true, username: true, displayName: true } } },
|
||||
orderBy: { createdAt: 'asc' as const },
|
||||
},
|
||||
} as const
|
||||
} as const;
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
OPEN: 'Open',
|
||||
IN_PROGRESS: 'In Progress',
|
||||
RESOLVED: 'Resolved',
|
||||
CLOSED: 'Closed',
|
||||
}
|
||||
};
|
||||
|
||||
async function generateDisplayId(): Promise<string> {
|
||||
while (true) {
|
||||
const num = Math.floor(Math.random() * 900_000_000) + 100_000_000
|
||||
const displayId = `V${num}`
|
||||
const exists = await prisma.ticket.findUnique({ where: { displayId } })
|
||||
if (!exists) return displayId
|
||||
const num = Math.floor(Math.random() * 900_000_000) + 100_000_000;
|
||||
const displayId = `V${num}`;
|
||||
const exists = await prisma.ticket.findUnique({ where: { displayId } });
|
||||
if (!exists) return displayId;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ async function generateDisplayId(): Promise<string> {
|
||||
function findByIdOrDisplay(idOrDisplay: string) {
|
||||
return prisma.ticket.findFirst({
|
||||
where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const createSchema = z.object({
|
||||
@@ -49,7 +49,7 @@ const createSchema = z.object({
|
||||
typeId: z.string().min(1),
|
||||
itemId: z.string().min(1),
|
||||
assigneeId: z.string().optional(),
|
||||
})
|
||||
});
|
||||
|
||||
const updateSchema = z.object({
|
||||
title: z.string().min(1).max(255).optional(),
|
||||
@@ -60,28 +60,28 @@ const updateSchema = z.object({
|
||||
typeId: z.string().min(1).optional(),
|
||||
itemId: z.string().min(1).optional(),
|
||||
assigneeId: z.string().nullable().optional(),
|
||||
})
|
||||
});
|
||||
|
||||
// Mount comment sub-router
|
||||
router.use('/:ticketId/comments', commentRouter)
|
||||
router.use('/:ticketId/comments', commentRouter);
|
||||
|
||||
// GET /api/tickets
|
||||
router.get('/', async (req: AuthRequest, res) => {
|
||||
const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query
|
||||
const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query;
|
||||
|
||||
const where: Record<string, unknown> = {}
|
||||
if (status) where.status = status
|
||||
if (severity) where.severity = Number(severity)
|
||||
if (assigneeId) where.assigneeId = assigneeId
|
||||
if (itemId) where.itemId = itemId
|
||||
else if (typeId) where.typeId = typeId
|
||||
else if (categoryId) where.categoryId = categoryId
|
||||
const where: Record<string, unknown> = {};
|
||||
if (status) where.status = status;
|
||||
if (severity) where.severity = Number(severity);
|
||||
if (assigneeId) where.assigneeId = assigneeId;
|
||||
if (itemId) where.itemId = itemId;
|
||||
else if (typeId) where.typeId = typeId;
|
||||
else if (categoryId) where.categoryId = categoryId;
|
||||
if (search) {
|
||||
where.OR = [
|
||||
{ title: { contains: search as string, mode: 'insensitive' } },
|
||||
{ overview: { contains: search as string, mode: 'insensitive' } },
|
||||
{ displayId: { contains: search as string, mode: 'insensitive' } },
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
const tickets = await prisma.ticket.findMany({
|
||||
@@ -95,60 +95,60 @@ router.get('/', async (req: AuthRequest, res) => {
|
||||
_count: { select: { comments: true } },
|
||||
},
|
||||
orderBy: [{ severity: 'asc' }, { createdAt: 'desc' }],
|
||||
})
|
||||
});
|
||||
|
||||
res.json(tickets)
|
||||
})
|
||||
res.json(tickets);
|
||||
});
|
||||
|
||||
// GET /api/tickets/:id
|
||||
router.get('/:id', async (req, res) => {
|
||||
const ticket = await prisma.ticket.findFirst({
|
||||
where: { OR: [{ id: req.params.id }, { displayId: req.params.id }] },
|
||||
include: ticketInclude,
|
||||
})
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
||||
res.json(ticket)
|
||||
})
|
||||
});
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||
res.json(ticket);
|
||||
});
|
||||
|
||||
// GET /api/tickets/:id/audit
|
||||
router.get('/:id/audit', async (req, res) => {
|
||||
const ticket = await findByIdOrDisplay(req.params.id)
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
||||
const ticket = await findByIdOrDisplay(req.params.id);
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||
|
||||
const logs = await prisma.auditLog.findMany({
|
||||
where: { ticketId: ticket.id },
|
||||
include: { user: { select: { id: true, username: true, displayName: true } } },
|
||||
orderBy: { createdAt: 'desc' },
|
||||
})
|
||||
});
|
||||
|
||||
res.json(logs)
|
||||
})
|
||||
res.json(logs);
|
||||
});
|
||||
|
||||
// POST /api/tickets
|
||||
router.post('/', requireAgent, async (req: AuthRequest, res) => {
|
||||
const data = createSchema.parse(req.body)
|
||||
const displayId = await generateDisplayId()
|
||||
const data = createSchema.parse(req.body);
|
||||
const displayId = await generateDisplayId();
|
||||
|
||||
const ticket = await prisma.$transaction(async (tx) => {
|
||||
const created = await tx.ticket.create({
|
||||
data: { displayId, ...data, createdById: req.user!.id },
|
||||
})
|
||||
});
|
||||
await tx.auditLog.create({
|
||||
data: { ticketId: created.id, userId: req.user!.id, action: 'CREATED' },
|
||||
})
|
||||
return tx.ticket.findUnique({ where: { id: created.id }, include: ticketInclude })
|
||||
})
|
||||
});
|
||||
return tx.ticket.findUnique({ where: { id: created.id }, include: ticketInclude });
|
||||
});
|
||||
|
||||
res.status(201).json(ticket)
|
||||
})
|
||||
res.status(201).json(ticket);
|
||||
});
|
||||
|
||||
// PATCH /api/tickets/:id
|
||||
router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
||||
const data = updateSchema.parse(req.body)
|
||||
const data = updateSchema.parse(req.body);
|
||||
|
||||
// Only admins can set status to CLOSED
|
||||
if (data.status === 'CLOSED' && req.user?.role !== 'ADMIN') {
|
||||
return res.status(403).json({ error: 'Only admins can close tickets' })
|
||||
return res.status(403).json({ error: 'Only admins can close tickets' });
|
||||
}
|
||||
|
||||
const existing = await prisma.ticket.findFirst({
|
||||
@@ -159,17 +159,17 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
||||
item: true,
|
||||
assignee: { select: { displayName: true } },
|
||||
},
|
||||
})
|
||||
if (!existing) return res.status(404).json({ error: 'Ticket not found' })
|
||||
});
|
||||
if (!existing) return res.status(404).json({ error: 'Ticket not found' });
|
||||
|
||||
// Build audit entries
|
||||
const auditEntries: { action: string; detail?: string }[] = []
|
||||
const auditEntries: { action: string; detail?: string }[] = [];
|
||||
|
||||
if (data.status && data.status !== existing.status) {
|
||||
auditEntries.push({
|
||||
action: 'STATUS_CHANGED',
|
||||
detail: `${STATUS_LABELS[existing.status]} → ${STATUS_LABELS[data.status]}`,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
if ('assigneeId' in data && data.assigneeId !== existing.assigneeId) {
|
||||
@@ -178,25 +178,25 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
||||
where: { id: data.assigneeId },
|
||||
select: { displayName: true },
|
||||
})
|
||||
: null
|
||||
: null;
|
||||
auditEntries.push({
|
||||
action: 'ASSIGNEE_CHANGED',
|
||||
detail: `${existing.assignee?.displayName ?? 'Unassigned'} → ${newAssignee?.displayName ?? 'Unassigned'}`,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
if (data.severity && data.severity !== existing.severity) {
|
||||
auditEntries.push({
|
||||
action: 'SEVERITY_CHANGED',
|
||||
detail: `SEV ${existing.severity} → SEV ${data.severity}`,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// CTI rerouting — only log if any CTI field actually changed
|
||||
const ctiChanged =
|
||||
(data.categoryId && data.categoryId !== existing.categoryId) ||
|
||||
(data.typeId && data.typeId !== existing.typeId) ||
|
||||
(data.itemId && data.itemId !== existing.itemId)
|
||||
(data.itemId && data.itemId !== existing.itemId);
|
||||
|
||||
if (ctiChanged) {
|
||||
const [newCat, newType, newItem] = await Promise.all([
|
||||
@@ -209,34 +209,34 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
||||
data.itemId && data.itemId !== existing.itemId
|
||||
? prisma.item.findUnique({ where: { id: data.itemId } })
|
||||
: Promise.resolve(existing.item),
|
||||
])
|
||||
]);
|
||||
auditEntries.push({
|
||||
action: 'REROUTED',
|
||||
detail: `${existing.category.name} › ${existing.type.name} › ${existing.item.name} → ${newCat?.name} › ${newType?.name} › ${newItem?.name}`,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
if (data.title && data.title !== existing.title) {
|
||||
auditEntries.push({ action: 'TITLE_CHANGED', detail: data.title })
|
||||
auditEntries.push({ action: 'TITLE_CHANGED', detail: data.title });
|
||||
}
|
||||
|
||||
if (data.overview && data.overview !== existing.overview) {
|
||||
auditEntries.push({ action: 'OVERVIEW_CHANGED' })
|
||||
auditEntries.push({ action: 'OVERVIEW_CHANGED' });
|
||||
}
|
||||
|
||||
// Handle resolvedAt tracking
|
||||
const update: Record<string, unknown> = { ...data }
|
||||
const update: Record<string, unknown> = { ...data };
|
||||
if (data.status === 'RESOLVED' && existing.status !== 'RESOLVED') {
|
||||
update.resolvedAt = new Date()
|
||||
update.resolvedAt = new Date();
|
||||
} else if (data.status && data.status !== 'RESOLVED' && existing.status === 'RESOLVED') {
|
||||
update.resolvedAt = null
|
||||
update.resolvedAt = null;
|
||||
}
|
||||
|
||||
const ticket = await prisma.$transaction(async (tx) => {
|
||||
const updated = await tx.ticket.update({
|
||||
where: { id: existing.id },
|
||||
data: update,
|
||||
})
|
||||
});
|
||||
if (auditEntries.length > 0) {
|
||||
await tx.auditLog.createMany({
|
||||
data: auditEntries.map((e) => ({
|
||||
@@ -245,20 +245,20 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
||||
action: e.action,
|
||||
detail: e.detail ?? null,
|
||||
})),
|
||||
})
|
||||
});
|
||||
}
|
||||
return tx.ticket.findUnique({ where: { id: updated.id }, include: ticketInclude })
|
||||
})
|
||||
return tx.ticket.findUnique({ where: { id: updated.id }, include: ticketInclude });
|
||||
});
|
||||
|
||||
res.json(ticket)
|
||||
})
|
||||
res.json(ticket);
|
||||
});
|
||||
|
||||
// DELETE /api/tickets/:id — admin only
|
||||
router.delete('/:id', requireAdmin, async (req, res) => {
|
||||
const ticket = await findByIdOrDisplay(req.params.id)
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
||||
await prisma.ticket.delete({ where: { id: ticket.id } })
|
||||
res.status(204).send()
|
||||
})
|
||||
const ticket = await findByIdOrDisplay(req.params.id);
|
||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||
await prisma.ticket.delete({ where: { id: ticket.id } });
|
||||
res.status(204).send();
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
+42
-34
@@ -1,11 +1,12 @@
|
||||
import { Router } from 'express'
|
||||
import bcrypt from 'bcryptjs'
|
||||
import crypto from 'crypto'
|
||||
import { z } from 'zod'
|
||||
import prisma from '../lib/prisma'
|
||||
import { requireAdmin, AuthRequest } from '../middleware/auth'
|
||||
import { Router } from 'express';
|
||||
import bcrypt from 'bcryptjs';
|
||||
import crypto from 'crypto';
|
||||
import { z } from 'zod';
|
||||
import { Prisma } from '@prisma/client';
|
||||
import prisma from '../lib/prisma';
|
||||
import { requireAdmin, AuthRequest } from '../middleware/auth';
|
||||
|
||||
const router = Router()
|
||||
const router = Router();
|
||||
|
||||
const userSelect = {
|
||||
id: true,
|
||||
@@ -15,15 +16,22 @@ const userSelect = {
|
||||
role: true,
|
||||
apiKey: true,
|
||||
createdAt: true,
|
||||
} as const
|
||||
} as const;
|
||||
|
||||
router.get('/', async (_req, res) => {
|
||||
const users = await prisma.user.findMany({
|
||||
select: { id: true, username: true, displayName: true, email: true, role: true, createdAt: true },
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
displayName: true,
|
||||
email: true,
|
||||
role: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: { displayName: 'asc' },
|
||||
})
|
||||
res.json(users)
|
||||
})
|
||||
});
|
||||
res.json(users);
|
||||
});
|
||||
|
||||
router.post('/', requireAdmin, async (req, res) => {
|
||||
const data = z
|
||||
@@ -34,14 +42,14 @@ router.post('/', requireAdmin, async (req, res) => {
|
||||
password: z.string().min(8).optional(),
|
||||
role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).default('AGENT'),
|
||||
})
|
||||
.parse(req.body)
|
||||
.parse(req.body);
|
||||
|
||||
const passwordHash = data.password
|
||||
? await bcrypt.hash(data.password, 12)
|
||||
: await bcrypt.hash(crypto.randomBytes(32).toString('hex'), 12)
|
||||
: await bcrypt.hash(crypto.randomBytes(32).toString('hex'), 12);
|
||||
|
||||
const apiKey =
|
||||
data.role === 'SERVICE' ? `sk_${crypto.randomBytes(32).toString('hex')}` : undefined
|
||||
data.role === 'SERVICE' ? `sk_${crypto.randomBytes(32).toString('hex')}` : undefined;
|
||||
|
||||
const user = await prisma.user.create({
|
||||
data: {
|
||||
@@ -53,10 +61,10 @@ router.post('/', requireAdmin, async (req, res) => {
|
||||
apiKey,
|
||||
},
|
||||
select: userSelect,
|
||||
})
|
||||
});
|
||||
|
||||
res.status(201).json(user)
|
||||
})
|
||||
res.status(201).json(user);
|
||||
});
|
||||
|
||||
router.patch('/:id', requireAdmin, async (req, res) => {
|
||||
const data = z
|
||||
@@ -67,37 +75,37 @@ router.patch('/:id', requireAdmin, async (req, res) => {
|
||||
role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).optional(),
|
||||
regenerateApiKey: z.boolean().optional(),
|
||||
})
|
||||
.parse(req.body)
|
||||
.parse(req.body);
|
||||
|
||||
const update: Record<string, any> = {}
|
||||
if (data.displayName) update.displayName = data.displayName
|
||||
if (data.email) update.email = data.email
|
||||
if (data.password) update.passwordHash = await bcrypt.hash(data.password, 12)
|
||||
const update: Prisma.UserUpdateInput = {};
|
||||
if (data.displayName) update.displayName = data.displayName;
|
||||
if (data.email) update.email = data.email;
|
||||
if (data.password) update.passwordHash = await bcrypt.hash(data.password, 12);
|
||||
if (data.role) {
|
||||
update.role = data.role
|
||||
update.role = data.role;
|
||||
if (data.role === 'SERVICE' && !update.apiKey) {
|
||||
update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
|
||||
update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
|
||||
}
|
||||
}
|
||||
if (data.regenerateApiKey) {
|
||||
update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
|
||||
update.apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
|
||||
}
|
||||
|
||||
const user = await prisma.user.update({
|
||||
where: { id: req.params.id },
|
||||
data: update,
|
||||
select: userSelect,
|
||||
})
|
||||
});
|
||||
|
||||
res.json(user)
|
||||
})
|
||||
res.json(user);
|
||||
});
|
||||
|
||||
router.delete('/:id', requireAdmin, async (req: AuthRequest, res) => {
|
||||
if (req.params.id === req.user!.id) {
|
||||
return res.status(400).json({ error: 'Cannot delete your own account' })
|
||||
return res.status(400).json({ error: 'Cannot delete your own account' });
|
||||
}
|
||||
await prisma.user.delete({ where: { id: req.params.id } })
|
||||
res.status(204).send()
|
||||
})
|
||||
await prisma.user.delete({ where: { id: req.params.id } });
|
||||
res.status(204).send();
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
Reference in New Issue
Block a user