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"
|
||||||
|
}
|
||||||
@@ -19,12 +19,12 @@ Internal ticketing system with CTI-based routing, severity levels, role-based ac
|
|||||||
|
|
||||||
## Roles
|
## Roles
|
||||||
|
|
||||||
| Role | Access |
|
| Role | Access |
|
||||||
|---|---|
|
| ----------- | ---------------------------------------------------------------------------- |
|
||||||
| **Admin** | Full access — manage users, CTI config, close and delete tickets |
|
| **Admin** | Full access — manage users, CTI config, close and delete tickets |
|
||||||
| **Agent** | Manage tickets — create, update, assign, comment, change status (not Closed) |
|
| **Agent** | Manage tickets — create, update, assign, comment, change status (not Closed) |
|
||||||
| **User** | Basic access — view tickets and add comments only |
|
| **User** | Basic access — view tickets and add comments only |
|
||||||
| **Service** | Automation account — authenticates via API key, no password login |
|
| **Service** | Automation account — authenticates via API key, no password login |
|
||||||
|
|
||||||
> Only **Admins** can manually set a ticket status to **Closed**.
|
> Only **Admins** can manually set a ticket status to **Closed**.
|
||||||
|
|
||||||
@@ -78,6 +78,7 @@ docker compose exec server npm run db:seed
|
|||||||
```
|
```
|
||||||
|
|
||||||
This creates:
|
This creates:
|
||||||
|
|
||||||
- `admin` user (password: `admin123`) — **change this immediately**
|
- `admin` user (password: `admin123`) — **change this immediately**
|
||||||
- `goddard` service account — API key is printed to the console; copy it now
|
- `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.
|
Authenticate and receive a JWT.
|
||||||
|
|
||||||
**Body:**
|
**Body:**
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{ "username": "string", "password": "string" }
|
{ "username": "string", "password": "string" }
|
||||||
```
|
```
|
||||||
|
|
||||||
**Response:**
|
**Response:**
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"token": "eyJ...",
|
"token": "eyJ...",
|
||||||
"user": { "id": "...", "username": "admin", "displayName": "Admin", "email": "...", "role": "ADMIN" }
|
"user": {
|
||||||
|
"id": "...",
|
||||||
|
"username": "admin",
|
||||||
|
"displayName": "Admin",
|
||||||
|
"email": "...",
|
||||||
|
"role": "ADMIN"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -167,13 +176,13 @@ List all tickets, sorted by severity (ASC) then created date (DESC).
|
|||||||
|
|
||||||
**Query parameters:**
|
**Query parameters:**
|
||||||
|
|
||||||
| Parameter | Type | Description |
|
| Parameter | Type | Description |
|
||||||
|---|---|---|
|
| ------------ | ------ | ------------------------------------------------------------- |
|
||||||
| `status` | string | Filter by status: `OPEN`, `IN_PROGRESS`, `RESOLVED`, `CLOSED` |
|
| `status` | string | Filter by status: `OPEN`, `IN_PROGRESS`, `RESOLVED`, `CLOSED` |
|
||||||
| `severity` | number | Filter by severity: `1`–`5` |
|
| `severity` | number | Filter by severity: `1`–`5` |
|
||||||
| `categoryId` | string | Filter by category (queue) |
|
| `categoryId` | string | Filter by category (queue) |
|
||||||
| `assigneeId` | string | Filter by assignee user ID |
|
| `assigneeId` | string | Filter by assignee user ID |
|
||||||
| `search` | string | Full-text search on title, overview, and display ID |
|
| `search` | string | Full-text search on title, overview, and display ID |
|
||||||
|
|
||||||
**Response:** Array of ticket objects with nested `category`, `type`, `item`, `assignee`, `createdBy`, and `_count.comments`.
|
**Response:** Array of ticket objects with nested `category`, `type`, `item`, `assignee`, `createdBy`, and `_count.comments`.
|
||||||
|
|
||||||
@@ -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.
|
Create a new ticket. Requires **Agent**, **Admin**, or **Service** role.
|
||||||
|
|
||||||
**Body:**
|
**Body:**
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"title": "string",
|
"title": "string",
|
||||||
@@ -213,6 +223,7 @@ Update a ticket. Accepts any combination of fields. Requires **Agent**, **Admin*
|
|||||||
> Setting `status` to `CLOSED` requires **Admin** role.
|
> Setting `status` to `CLOSED` requires **Admin** role.
|
||||||
|
|
||||||
**Body (all fields optional):**
|
**Body (all fields optional):**
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"title": "string",
|
"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.
|
Add a comment to a ticket. Supports markdown. All authenticated roles may comment.
|
||||||
|
|
||||||
**Body:**
|
**Body:**
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{ "body": "string (markdown)" }
|
{ "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.
|
Retrieve the full audit log for a ticket, ordered newest first.
|
||||||
|
|
||||||
**Response:** Array of audit log entries:
|
**Response:** Array of audit log entries:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
@@ -284,41 +297,43 @@ Retrieve the full audit log for a ticket, ordered newest first.
|
|||||||
|
|
||||||
**Action types:**
|
**Action types:**
|
||||||
|
|
||||||
| Action | Detail |
|
| Action | Detail |
|
||||||
|---|---|
|
| ------------------ | -------------------------------------------------------------- |
|
||||||
| `CREATED` | — |
|
| `CREATED` | — |
|
||||||
| `STATUS_CHANGED` | e.g. `Open → In Progress` |
|
| `STATUS_CHANGED` | e.g. `Open → In Progress` |
|
||||||
| `SEVERITY_CHANGED` | e.g. `SEV 3 → SEV 1` |
|
| `SEVERITY_CHANGED` | e.g. `SEV 3 → SEV 1` |
|
||||||
| `ASSIGNEE_CHANGED` | e.g. `Unassigned → Josh` |
|
| `ASSIGNEE_CHANGED` | e.g. `Unassigned → Josh` |
|
||||||
| `REROUTED` | e.g. `OldCat › OldType › OldItem → NewCat › NewType › NewItem` |
|
| `REROUTED` | e.g. `OldCat › OldType › OldItem → NewCat › NewType › NewItem` |
|
||||||
| `TITLE_CHANGED` | New title |
|
| `TITLE_CHANGED` | New title |
|
||||||
| `OVERVIEW_CHANGED` | — |
|
| `OVERVIEW_CHANGED` | — |
|
||||||
| `COMMENT_ADDED` | Comment body |
|
| `COMMENT_ADDED` | Comment body |
|
||||||
| `COMMENT_DELETED` | Deleted comment body |
|
| `COMMENT_DELETED` | Deleted comment body |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### CTI (Category / Type / Item)
|
### CTI (Category / Type / Item)
|
||||||
|
|
||||||
#### `GET /api/cti/categories`
|
#### `GET /api/cti/categories`
|
||||||
|
|
||||||
#### `GET /api/cti/types?categoryId=<id>`
|
#### `GET /api/cti/types?categoryId=<id>`
|
||||||
|
|
||||||
#### `GET /api/cti/items?typeId=<id>`
|
#### `GET /api/cti/items?typeId=<id>`
|
||||||
|
|
||||||
Read the CTI hierarchy. Used to resolve IDs when creating/rerouting tickets.
|
Read the CTI hierarchy. Used to resolve IDs when creating/rerouting tickets.
|
||||||
|
|
||||||
**Admin-only write operations:**
|
**Admin-only write operations:**
|
||||||
|
|
||||||
| Method | Endpoint | Body |
|
| Method | Endpoint | Body |
|
||||||
|---|---|---|
|
| -------- | ------------------------- | ---------------------------------------------- |
|
||||||
| `POST` | `/api/cti/categories` | `{ "name": "string" }` |
|
| `POST` | `/api/cti/categories` | `{ "name": "string" }` |
|
||||||
| `PUT` | `/api/cti/categories/:id` | `{ "name": "string" }` |
|
| `PUT` | `/api/cti/categories/:id` | `{ "name": "string" }` |
|
||||||
| `DELETE` | `/api/cti/categories/:id` | — |
|
| `DELETE` | `/api/cti/categories/:id` | — |
|
||||||
| `POST` | `/api/cti/types` | `{ "name": "string", "categoryId": "string" }` |
|
| `POST` | `/api/cti/types` | `{ "name": "string", "categoryId": "string" }` |
|
||||||
| `PUT` | `/api/cti/types/:id` | `{ "name": "string" }` |
|
| `PUT` | `/api/cti/types/:id` | `{ "name": "string" }` |
|
||||||
| `DELETE` | `/api/cti/types/:id` | — |
|
| `DELETE` | `/api/cti/types/:id` | — |
|
||||||
| `POST` | `/api/cti/items` | `{ "name": "string", "typeId": "string" }` |
|
| `POST` | `/api/cti/items` | `{ "name": "string", "typeId": "string" }` |
|
||||||
| `PUT` | `/api/cti/items/:id` | `{ "name": "string" }` |
|
| `PUT` | `/api/cti/items/:id` | `{ "name": "string" }` |
|
||||||
| `DELETE` | `/api/cti/items/:id` | — |
|
| `DELETE` | `/api/cti/items/:id` | — |
|
||||||
|
|
||||||
Deleting a category cascades to all child types and items.
|
Deleting a category cascades to all child types and items.
|
||||||
|
|
||||||
@@ -391,6 +406,7 @@ Content-Type: application/json
|
|||||||
```
|
```
|
||||||
|
|
||||||
CTI IDs can be fetched from:
|
CTI IDs can be fetched from:
|
||||||
|
|
||||||
- `GET /api/cti/categories`
|
- `GET /api/cti/categories`
|
||||||
- `GET /api/cti/types?categoryId=<id>`
|
- `GET /api/cti/types?categoryId=<id>`
|
||||||
- `GET /api/cti/items?typeId=<id>`
|
- `GET /api/cti/items?typeId=<id>`
|
||||||
@@ -401,27 +417,27 @@ To regenerate the Goddard API key: Admin → Users → refresh icon next to Godd
|
|||||||
|
|
||||||
## Environment Variables
|
## Environment Variables
|
||||||
|
|
||||||
| Variable | Required | Description |
|
| Variable | Required | Description |
|
||||||
|---|---|---|
|
| ------------------- | -------- | ---------------------------------------------------- |
|
||||||
| `DATABASE_URL` | Yes | PostgreSQL connection string |
|
| `DATABASE_URL` | Yes | PostgreSQL connection string |
|
||||||
| `JWT_SECRET` | Yes | Secret for signing JWTs — use `openssl rand -hex 64` |
|
| `JWT_SECRET` | Yes | Secret for signing JWTs — use `openssl rand -hex 64` |
|
||||||
| `CLIENT_URL` | Yes | Allowed CORS origin (your domain) |
|
| `CLIENT_URL` | Yes | Allowed CORS origin (your domain) |
|
||||||
| `PORT` | No | Server port (default: `3000`) |
|
| `PORT` | No | Server port (default: `3000`) |
|
||||||
| `REGISTRY` | Deploy | Container registry hostname |
|
| `REGISTRY` | Deploy | Container registry hostname |
|
||||||
| `POSTGRES_PASSWORD` | Deploy | Postgres password |
|
| `POSTGRES_PASSWORD` | Deploy | Postgres password |
|
||||||
| `TAG` | Deploy | Image tag to deploy (default: `latest`) |
|
| `TAG` | Deploy | Image tag to deploy (default: `latest`) |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Ticket Severity
|
## Ticket Severity
|
||||||
|
|
||||||
| Level | Label | Meaning |
|
| Level | Label | Meaning |
|
||||||
|---|---|---|
|
| ----- | ----- | ------------------------------------ |
|
||||||
| 1 | SEV 1 | Critical — immediate action required |
|
| 1 | SEV 1 | Critical — immediate action required |
|
||||||
| 2 | SEV 2 | High — significant impact |
|
| 2 | SEV 2 | High — significant impact |
|
||||||
| 3 | SEV 3 | Medium — standard priority |
|
| 3 | SEV 3 | Medium — standard priority |
|
||||||
| 4 | SEV 4 | Low — minor issue |
|
| 4 | SEV 4 | Low — minor issue |
|
||||||
| 5 | SEV 5 | Minimal — informational / automated |
|
| 5 | SEV 5 | Minimal — informational / automated |
|
||||||
|
|
||||||
Tickets are sorted SEV 1 → SEV 5 on the dashboard.
|
Tickets are sorted SEV 1 → SEV 5 on the dashboard.
|
||||||
|
|
||||||
|
|||||||
Generated
+5903
-2
File diff suppressed because it is too large
Load Diff
+14
-2
@@ -6,11 +6,16 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"typecheck": "tsc --noEmit",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^3.9.1",
|
"@hookform/resolvers": "^3.9.1",
|
||||||
|
"@tanstack/react-query": "^5.62.0",
|
||||||
"axios": "^1.7.9",
|
"axios": "^1.7.9",
|
||||||
|
"cmdk": "^1.0.4",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
"lucide-react": "^0.468.0",
|
"lucide-react": "^0.468.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
@@ -19,16 +24,23 @@
|
|||||||
"react-markdown": "^9.0.1",
|
"react-markdown": "^9.0.1",
|
||||||
"react-router-dom": "^6.28.0",
|
"react-router-dom": "^6.28.0",
|
||||||
"remark-gfm": "^4.0.0",
|
"remark-gfm": "^4.0.0",
|
||||||
|
"sonner": "^1.7.1",
|
||||||
"zod": "^3.23.8"
|
"zod": "^3.23.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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": "^18.3.12",
|
||||||
"@types/react-dom": "^18.3.1",
|
"@types/react-dom": "^18.3.1",
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
|
"jsdom": "^25.0.1",
|
||||||
"postcss": "^8.4.49",
|
"postcss": "^8.4.49",
|
||||||
"tailwindcss": "^3.4.16",
|
"tailwindcss": "^3.4.16",
|
||||||
"typescript": "^5.7.2",
|
"typescript": "^5.7.2",
|
||||||
"vite": "^6.0.5"
|
"vite": "^6.0.5",
|
||||||
|
"vitest": "^2.1.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,4 +3,4 @@ export default {
|
|||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|||||||
+11
-11
@@ -1,13 +1,13 @@
|
|||||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
import { AuthProvider } from './contexts/AuthContext'
|
import { AuthProvider } from './contexts/AuthContext';
|
||||||
import PrivateRoute from './components/PrivateRoute'
|
import PrivateRoute from './components/PrivateRoute';
|
||||||
import AdminRoute from './components/AdminRoute'
|
import AdminRoute from './components/AdminRoute';
|
||||||
import Login from './pages/Login'
|
import Login from './pages/Login';
|
||||||
import Dashboard from './pages/Dashboard'
|
import Dashboard from './pages/Dashboard';
|
||||||
import MyTickets from './pages/MyTickets'
|
import MyTickets from './pages/MyTickets';
|
||||||
import TicketDetail from './pages/TicketDetail'
|
import TicketDetail from './pages/TicketDetail';
|
||||||
import AdminUsers from './pages/admin/Users'
|
import AdminUsers from './pages/admin/Users';
|
||||||
import AdminCTI from './pages/admin/CTI'
|
import AdminCTI from './pages/admin/CTI';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
@@ -28,5 +28,5 @@ export default function App() {
|
|||||||
</Routes>
|
</Routes>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios';
|
||||||
|
|
||||||
const api = axios.create({
|
const api = axios.create({
|
||||||
baseURL: '/api',
|
baseURL: '/api',
|
||||||
})
|
});
|
||||||
|
|
||||||
export default api
|
export default api;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Navigate, Outlet } from 'react-router-dom'
|
import { Navigate, Outlet } from 'react-router-dom';
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
export default function AdminRoute() {
|
export default function AdminRoute() {
|
||||||
const { user } = useAuth()
|
const { user } = useAuth();
|
||||||
return user?.role === 'ADMIN' ? <Outlet /> : <Navigate to="/" replace />
|
return user?.role === 'ADMIN' ? <Outlet /> : <Navigate to="/" replace />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,20 @@
|
|||||||
const PALETTE = [
|
const PALETTE = [
|
||||||
'#ef4444', '#f97316', '#f59e0b', '#10b981',
|
'#ef4444',
|
||||||
'#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899',
|
'#f97316',
|
||||||
]
|
'#f59e0b',
|
||||||
|
'#10b981',
|
||||||
|
'#06b6d4',
|
||||||
|
'#3b82f6',
|
||||||
|
'#8b5cf6',
|
||||||
|
'#ec4899',
|
||||||
|
];
|
||||||
|
|
||||||
function nameToColor(name: string): string {
|
function nameToColor(name: string): string {
|
||||||
let hash = 0
|
let hash = 0;
|
||||||
for (let i = 0; i < name.length; i++) {
|
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 {
|
function initials(name: string): string {
|
||||||
@@ -17,18 +23,18 @@ function initials(name: string): string {
|
|||||||
.slice(0, 2)
|
.slice(0, 2)
|
||||||
.map((n) => n[0])
|
.map((n) => n[0])
|
||||||
.join('')
|
.join('')
|
||||||
.toUpperCase()
|
.toUpperCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
const SIZES = {
|
const SIZES = {
|
||||||
sm: 'w-6 h-6 text-xs',
|
sm: 'w-6 h-6 text-xs',
|
||||||
md: 'w-8 h-8 text-sm',
|
md: 'w-8 h-8 text-sm',
|
||||||
lg: 'w-10 h-10 text-base',
|
lg: 'w-10 h-10 text-base',
|
||||||
}
|
};
|
||||||
|
|
||||||
interface AvatarProps {
|
interface AvatarProps {
|
||||||
name: string
|
name: string;
|
||||||
size?: keyof typeof SIZES
|
size?: keyof typeof SIZES;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Avatar({ name, size = 'md' }: AvatarProps) {
|
export default function Avatar({ name, size = 'md' }: AvatarProps) {
|
||||||
@@ -40,5 +46,5 @@ export default function Avatar({ name, size = 'md' }: AvatarProps) {
|
|||||||
>
|
>
|
||||||
{initials(name)}
|
{initials(name)}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,57 +1,57 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react';
|
||||||
import api from '../api/client'
|
import api from '../api/client';
|
||||||
import { Category, CTIType, Item } from '../types'
|
import { Category, CTIType, Item } from '../types';
|
||||||
|
|
||||||
interface CTISelectProps {
|
interface CTISelectProps {
|
||||||
value: { categoryId: string; typeId: string; itemId: string }
|
value: { categoryId: string; typeId: string; itemId: string };
|
||||||
onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void
|
onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void;
|
||||||
disabled?: boolean
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CTISelect({ value, onChange, disabled }: CTISelectProps) {
|
export default function CTISelect({ value, onChange, disabled }: CTISelectProps) {
|
||||||
const [categories, setCategories] = useState<Category[]>([])
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
const [types, setTypes] = useState<CTIType[]>([])
|
const [types, setTypes] = useState<CTIType[]>([]);
|
||||||
const [items, setItems] = useState<Item[]>([])
|
const [items, setItems] = useState<Item[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data))
|
api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data));
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!value.categoryId) {
|
if (!value.categoryId) {
|
||||||
setTypes([])
|
setTypes([]);
|
||||||
setItems([])
|
setItems([]);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
api
|
api
|
||||||
.get<CTIType[]>('/cti/types', { params: { categoryId: value.categoryId } })
|
.get<CTIType[]>('/cti/types', { params: { categoryId: value.categoryId } })
|
||||||
.then((r) => setTypes(r.data))
|
.then((r) => setTypes(r.data));
|
||||||
}, [value.categoryId])
|
}, [value.categoryId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!value.typeId) {
|
if (!value.typeId) {
|
||||||
setItems([])
|
setItems([]);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
api
|
api
|
||||||
.get<Item[]>('/cti/items', { params: { typeId: value.typeId } })
|
.get<Item[]>('/cti/items', { params: { typeId: value.typeId } })
|
||||||
.then((r) => setItems(r.data))
|
.then((r) => setItems(r.data));
|
||||||
}, [value.typeId])
|
}, [value.typeId]);
|
||||||
|
|
||||||
const handleCategory = (categoryId: string) => {
|
const handleCategory = (categoryId: string) => {
|
||||||
onChange({ categoryId, typeId: '', itemId: '' })
|
onChange({ categoryId, typeId: '', itemId: '' });
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleType = (typeId: string) => {
|
const handleType = (typeId: string) => {
|
||||||
onChange({ ...value, typeId, itemId: '' })
|
onChange({ ...value, typeId, itemId: '' });
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleItem = (itemId: string) => {
|
const handleItem = (itemId: string) => {
|
||||||
onChange({ ...value, itemId })
|
onChange({ ...value, itemId });
|
||||||
}
|
};
|
||||||
|
|
||||||
const selectClass =
|
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 (
|
return (
|
||||||
<div className="grid grid-cols-3 gap-3">
|
<div className="grid grid-cols-3 gap-3">
|
||||||
@@ -106,5 +106,5 @@ export default function CTISelect({ value, onChange, disabled }: CTISelectProps)
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
import { ReactNode, useState } from 'react'
|
import { ReactNode, useState } from 'react';
|
||||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||||
import { LayoutDashboard, Users, Settings, LogOut, Plus, Ticket } from 'lucide-react'
|
import { LayoutDashboard, Users, Settings, LogOut, Plus, Ticket } from 'lucide-react';
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import NewTicketModal from '../pages/NewTicket'
|
import NewTicketModal from '../pages/NewTicket';
|
||||||
|
|
||||||
interface LayoutProps {
|
interface LayoutProps {
|
||||||
children: ReactNode
|
children: ReactNode;
|
||||||
title?: string
|
title?: string;
|
||||||
action?: ReactNode
|
action?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Layout({ children, title, action }: LayoutProps) {
|
export default function Layout({ children, title, action }: LayoutProps) {
|
||||||
const { user, logout } = useAuth()
|
const { user, logout } = useAuth();
|
||||||
const location = useLocation()
|
const location = useLocation();
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [showNewTicket, setShowNewTicket] = useState(false)
|
const [showNewTicket, setShowNewTicket] = useState(false);
|
||||||
|
|
||||||
const canCreateTicket = user?.role !== 'USER'
|
const canCreateTicket = user?.role !== 'USER';
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ to: '/', icon: LayoutDashboard, label: 'All Tickets' },
|
{ 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' },
|
{ to: '/admin/cti', icon: Settings, label: 'CTI Config' },
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
]
|
];
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
logout()
|
logout();
|
||||||
navigate('/login')
|
navigate('/login');
|
||||||
}
|
};
|
||||||
|
|
||||||
const isActive = (to: string) =>
|
const isActive = (to: string) =>
|
||||||
to === '/' ? location.pathname === '/' : location.pathname.startsWith(to)
|
to === '/' ? location.pathname === '/' : location.pathname.startsWith(to);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-gray-950 overflow-hidden">
|
<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)} />}
|
{showNewTicket && <NewTicketModal onClose={() => setShowNewTicket(false)} />}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,39 +1,40 @@
|
|||||||
import { ReactNode, useEffect } from 'react'
|
import { ReactNode, useEffect } from 'react';
|
||||||
import { X } from 'lucide-react'
|
import { X } from 'lucide-react';
|
||||||
|
|
||||||
interface ModalProps {
|
interface ModalProps {
|
||||||
title: string
|
title: string;
|
||||||
onClose: () => void
|
onClose: () => void;
|
||||||
children: ReactNode
|
children: ReactNode;
|
||||||
size?: 'md' | 'lg'
|
size?: 'md' | 'lg';
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Modal({ title, onClose, children, size = 'md' }: ModalProps) {
|
export default function Modal({ title, onClose, children, size = 'md' }: ModalProps) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handler = (e: KeyboardEvent) => {
|
const handler = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'Escape') onClose()
|
if (e.key === 'Escape') onClose();
|
||||||
}
|
};
|
||||||
document.addEventListener('keydown', handler)
|
document.addEventListener('keydown', handler);
|
||||||
return () => document.removeEventListener('keydown', handler)
|
return () => document.removeEventListener('keydown', handler);
|
||||||
}, [onClose])
|
}, [onClose]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
|
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">
|
<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>
|
<h3 className="text-base font-semibold text-gray-100">{title}</h3>
|
||||||
<button
|
<button onClick={onClose} className="text-gray-500 hover:text-gray-300 transition-colors">
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-500 hover:text-gray-300 transition-colors"
|
|
||||||
>
|
|
||||||
<X size={18} />
|
<X size={18} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="px-6 py-5">{children}</div>
|
<div className="px-6 py-5">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
import { Navigate, Outlet } from 'react-router-dom'
|
import { Navigate, Outlet } from 'react-router-dom';
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
export default function PrivateRoute() {
|
export default function PrivateRoute() {
|
||||||
const { user, loading } = useAuth()
|
const { user, loading } = useAuth();
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen items-center justify-center bg-gray-50">
|
<div className="flex h-screen items-center justify-center bg-gray-50">
|
||||||
<div className="text-gray-500">Loading...</div>
|
<div className="text-gray-500">Loading...</div>
|
||||||
</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' },
|
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' },
|
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' },
|
5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
|
||||||
}
|
};
|
||||||
|
|
||||||
export default function SeverityBadge({ severity }: { severity: number }) {
|
export default function SeverityBadge({ severity }: { severity: number }) {
|
||||||
const { label, className } = config[severity] ?? config[5]
|
const { label, className } = config[severity] ?? config[5];
|
||||||
return (
|
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}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,17 +1,22 @@
|
|||||||
import { TicketStatus } from '../types'
|
import { TicketStatus } from '../types';
|
||||||
|
|
||||||
const config: Record<TicketStatus, { label: string; className: string }> = {
|
const config: Record<TicketStatus, { label: string; className: string }> = {
|
||||||
OPEN: { label: 'Open', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
|
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' },
|
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' },
|
CLOSED: { label: 'Closed', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
|
||||||
}
|
};
|
||||||
|
|
||||||
export default function StatusBadge({ status }: { status: TicketStatus }) {
|
export default function StatusBadge({ status }: { status: TicketStatus }) {
|
||||||
const { label, className } = config[status]
|
const { label, className } = config[status];
|
||||||
return (
|
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}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,59 +1,57 @@
|
|||||||
import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
|
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||||
import api from '../api/client'
|
import api from '../api/client';
|
||||||
import { User } from '../types'
|
import { User } from '../types';
|
||||||
|
|
||||||
interface AuthContextType {
|
interface AuthContextType {
|
||||||
user: User | null
|
user: User | null;
|
||||||
loading: boolean
|
loading: boolean;
|
||||||
login: (username: string, password: string) => Promise<void>
|
login: (username: string, password: string) => Promise<void>;
|
||||||
logout: () => void
|
logout: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AuthContext = createContext<AuthContextType>(null!)
|
const AuthContext = createContext<AuthContextType>(null!);
|
||||||
|
|
||||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||||
const [user, setUser] = useState<User | null>(null)
|
const [user, setUser] = useState<User | null>(null);
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const token = localStorage.getItem('token')
|
const token = localStorage.getItem('token');
|
||||||
if (token) {
|
if (token) {
|
||||||
api.defaults.headers.common['Authorization'] = `Bearer ${token}`
|
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||||
api
|
api
|
||||||
.get<User>('/auth/me')
|
.get<User>('/auth/me')
|
||||||
.then((res) => setUser(res.data))
|
.then((res) => setUser(res.data))
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token');
|
||||||
delete api.defaults.headers.common['Authorization']
|
delete api.defaults.headers.common['Authorization'];
|
||||||
})
|
})
|
||||||
.finally(() => setLoading(false))
|
.finally(() => setLoading(false));
|
||||||
} else {
|
} else {
|
||||||
setLoading(false)
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
const login = async (username: string, password: string) => {
|
const login = async (username: string, password: string) => {
|
||||||
const res = await api.post<{ token: string; user: User }>('/auth/login', {
|
const res = await api.post<{ token: string; user: User }>('/auth/login', {
|
||||||
username,
|
username,
|
||||||
password,
|
password,
|
||||||
})
|
});
|
||||||
const { token, user } = res.data
|
const { token, user } = res.data;
|
||||||
localStorage.setItem('token', token)
|
localStorage.setItem('token', token);
|
||||||
api.defaults.headers.common['Authorization'] = `Bearer ${token}`
|
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||||
setUser(user)
|
setUser(user);
|
||||||
}
|
};
|
||||||
|
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token');
|
||||||
delete api.defaults.headers.common['Authorization']
|
delete api.defaults.headers.common['Authorization'];
|
||||||
setUser(null)
|
setUser(null);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider value={{ user, loading, login, logout }}>
|
<AuthContext.Provider value={{ user, loading, login, logout }}>{children}</AuthContext.Provider>
|
||||||
{children}
|
);
|
||||||
</AuthContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useAuth = () => useContext(AuthContext)
|
export const useAuth = () => useContext(AuthContext);
|
||||||
|
|||||||
+54
-18
@@ -9,22 +9,58 @@ select option {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Markdown prose styles (dark) */
|
/* Markdown prose styles (dark) */
|
||||||
.prose p { @apply mb-3 last:mb-0 leading-relaxed; }
|
.prose p {
|
||||||
.prose h1 { @apply text-xl font-bold mb-3 mt-5; }
|
@apply mb-3 last:mb-0 leading-relaxed;
|
||||||
.prose h2 { @apply text-lg font-semibold mb-2 mt-4; }
|
}
|
||||||
.prose h3 { @apply text-base font-semibold mb-2 mt-3; }
|
.prose h1 {
|
||||||
.prose ul { @apply list-disc pl-5 mb-3 space-y-1; }
|
@apply text-xl font-bold mb-3 mt-5;
|
||||||
.prose ol { @apply list-decimal pl-5 mb-3 space-y-1; }
|
}
|
||||||
|
.prose h2 {
|
||||||
|
@apply text-lg font-semibold mb-2 mt-4;
|
||||||
|
}
|
||||||
|
.prose h3 {
|
||||||
|
@apply text-base font-semibold mb-2 mt-3;
|
||||||
|
}
|
||||||
|
.prose ul {
|
||||||
|
@apply list-disc pl-5 mb-3 space-y-1;
|
||||||
|
}
|
||||||
|
.prose ol {
|
||||||
|
@apply list-decimal pl-5 mb-3 space-y-1;
|
||||||
|
}
|
||||||
.prose li > ul,
|
.prose li > ul,
|
||||||
.prose li > ol { @apply mt-1 mb-0; }
|
.prose li > ol {
|
||||||
.prose a { @apply text-blue-400 underline hover:text-blue-300; }
|
@apply mt-1 mb-0;
|
||||||
.prose strong { @apply font-semibold; }
|
}
|
||||||
.prose em { @apply italic; }
|
.prose a {
|
||||||
.prose blockquote { @apply border-l-4 border-gray-600 pl-4 text-gray-400 my-3 italic; }
|
@apply text-blue-400 underline hover:text-blue-300;
|
||||||
.prose code { @apply bg-gray-800 text-gray-300 px-1.5 py-0.5 rounded text-xs font-mono; }
|
}
|
||||||
.prose pre { @apply bg-gray-950 text-gray-300 p-4 rounded-lg my-3 overflow-x-auto text-sm; }
|
.prose strong {
|
||||||
.prose pre code { @apply bg-transparent text-gray-300 p-0; }
|
@apply font-semibold;
|
||||||
.prose hr { @apply border-gray-700 my-4; }
|
}
|
||||||
.prose table { @apply w-full border-collapse text-sm my-3; }
|
.prose em {
|
||||||
.prose th { @apply bg-gray-800 border border-gray-700 px-3 py-2 text-left font-semibold text-gray-300; }
|
@apply italic;
|
||||||
.prose td { @apply border border-gray-700 px-3 py-2 text-gray-400; }
|
}
|
||||||
|
.prose blockquote {
|
||||||
|
@apply border-l-4 border-gray-600 pl-4 text-gray-400 my-3 italic;
|
||||||
|
}
|
||||||
|
.prose code {
|
||||||
|
@apply bg-gray-800 text-gray-300 px-1.5 py-0.5 rounded text-xs font-mono;
|
||||||
|
}
|
||||||
|
.prose pre {
|
||||||
|
@apply bg-gray-950 text-gray-300 p-4 rounded-lg my-3 overflow-x-auto text-sm;
|
||||||
|
}
|
||||||
|
.prose pre code {
|
||||||
|
@apply bg-transparent text-gray-300 p-0;
|
||||||
|
}
|
||||||
|
.prose hr {
|
||||||
|
@apply border-gray-700 my-4;
|
||||||
|
}
|
||||||
|
.prose table {
|
||||||
|
@apply w-full border-collapse text-sm my-3;
|
||||||
|
}
|
||||||
|
.prose th {
|
||||||
|
@apply bg-gray-800 border border-gray-700 px-3 py-2 text-left font-semibold text-gray-300;
|
||||||
|
}
|
||||||
|
.prose td {
|
||||||
|
@apply border border-gray-700 px-3 py-2 text-gray-400;
|
||||||
|
}
|
||||||
|
|||||||
+6
-6
@@ -1,10 +1,10 @@
|
|||||||
import { StrictMode } from 'react'
|
import { StrictMode } from 'react';
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client';
|
||||||
import './index.css'
|
import './index.css';
|
||||||
import App from './App'
|
import App from './App';
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById('root')!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</StrictMode>
|
</StrictMode>,
|
||||||
)
|
);
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react'
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom';
|
||||||
import { Search, ChevronRight, X } from 'lucide-react'
|
import { Search, ChevronRight, X } from 'lucide-react';
|
||||||
import { formatDistanceToNow } from 'date-fns'
|
import { formatDistanceToNow } from 'date-fns';
|
||||||
import api from '../api/client'
|
import api from '../api/client';
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout';
|
||||||
import SeverityBadge from '../components/SeverityBadge'
|
import SeverityBadge from '../components/SeverityBadge';
|
||||||
import StatusBadge from '../components/StatusBadge'
|
import StatusBadge from '../components/StatusBadge';
|
||||||
import Avatar from '../components/Avatar'
|
import Avatar from '../components/Avatar';
|
||||||
import { Ticket, TicketStatus, Category, CTIType, Item } from '../types'
|
import { Ticket, TicketStatus, Category, CTIType, Item } from '../types';
|
||||||
|
|
||||||
const STATUSES: { value: TicketStatus | ''; label: string }[] = [
|
const STATUSES: { value: TicketStatus | ''; label: string }[] = [
|
||||||
{ value: '', label: 'All Statuses' },
|
{ value: '', label: 'All Statuses' },
|
||||||
@@ -15,97 +15,95 @@ const STATUSES: { value: TicketStatus | ''; label: string }[] = [
|
|||||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||||
{ value: 'RESOLVED', label: 'Resolved' },
|
{ value: 'RESOLVED', label: 'Resolved' },
|
||||||
{ value: 'CLOSED', label: 'Closed' },
|
{ value: 'CLOSED', label: 'Closed' },
|
||||||
]
|
];
|
||||||
|
|
||||||
const selectClass =
|
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
|
// Queue label built from whatever CTI level is selected
|
||||||
function queueLabel(
|
function queueLabel(category: Category | null, type: CTIType | null, item: Item | null): string {
|
||||||
category: Category | null,
|
if (item && type && category) return `${category.name} › ${type.name} › ${item.name}`;
|
||||||
type: CTIType | null,
|
if (type && category) return `${category.name} › ${type.name}`;
|
||||||
item: Item | null,
|
if (category) return category.name;
|
||||||
): string {
|
return '';
|
||||||
if (item && type && category) return `${category.name} › ${type.name} › ${item.name}`
|
|
||||||
if (type && category) return `${category.name} › ${type.name}`
|
|
||||||
if (category) return category.name
|
|
||||||
return ''
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const [tickets, setTickets] = useState<Ticket[]>([])
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true);
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('');
|
||||||
const [status, setStatus] = useState<TicketStatus | ''>('')
|
const [status, setStatus] = useState<TicketStatus | ''>('');
|
||||||
const [severity, setSeverity] = useState('')
|
const [severity, setSeverity] = useState('');
|
||||||
|
|
||||||
// CTI queue filter state
|
// CTI queue filter state
|
||||||
const [categories, setCategories] = useState<Category[]>([])
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
const [types, setTypes] = useState<CTIType[]>([])
|
const [types, setTypes] = useState<CTIType[]>([]);
|
||||||
const [items, setItems] = useState<Item[]>([])
|
const [items, setItems] = useState<Item[]>([]);
|
||||||
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
|
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
|
||||||
const [selectedType, setSelectedType] = useState<CTIType | null>(null)
|
const [selectedType, setSelectedType] = useState<CTIType | null>(null);
|
||||||
const [selectedItem, setSelectedItem] = useState<Item | null>(null)
|
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
|
||||||
const [showQueueFilter, setShowQueueFilter] = useState(false)
|
const [showQueueFilter, setShowQueueFilter] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
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) => {
|
const handleCategorySelect = (cat: Category) => {
|
||||||
setSelectedCategory(cat)
|
setSelectedCategory(cat);
|
||||||
setSelectedType(null)
|
setSelectedType(null);
|
||||||
setSelectedItem(null)
|
setSelectedItem(null);
|
||||||
setTypes([])
|
setTypes([]);
|
||||||
setItems([])
|
setItems([]);
|
||||||
api.get<CTIType[]>('/cti/types', { params: { categoryId: cat.id } }).then((r) => setTypes(r.data))
|
api
|
||||||
}
|
.get<CTIType[]>('/cti/types', { params: { categoryId: cat.id } })
|
||||||
|
.then((r) => setTypes(r.data));
|
||||||
|
};
|
||||||
|
|
||||||
const handleTypeSelect = (type: CTIType) => {
|
const handleTypeSelect = (type: CTIType) => {
|
||||||
setSelectedType(type)
|
setSelectedType(type);
|
||||||
setSelectedItem(null)
|
setSelectedItem(null);
|
||||||
setItems([])
|
setItems([]);
|
||||||
api.get<Item[]>('/cti/items', { params: { typeId: type.id } }).then((r) => setItems(r.data))
|
api.get<Item[]>('/cti/items', { params: { typeId: type.id } }).then((r) => setItems(r.data));
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleItemSelect = (item: Item) => {
|
const handleItemSelect = (item: Item) => {
|
||||||
setSelectedItem(item)
|
setSelectedItem(item);
|
||||||
setShowQueueFilter(false)
|
setShowQueueFilter(false);
|
||||||
}
|
};
|
||||||
|
|
||||||
const clearQueue = () => {
|
const clearQueue = () => {
|
||||||
setSelectedCategory(null)
|
setSelectedCategory(null);
|
||||||
setSelectedType(null)
|
setSelectedType(null);
|
||||||
setSelectedItem(null)
|
setSelectedItem(null);
|
||||||
setTypes([])
|
setTypes([]);
|
||||||
setItems([])
|
setItems([]);
|
||||||
}
|
};
|
||||||
|
|
||||||
// Derive the most specific filter param
|
// Derive the most specific filter param
|
||||||
const queueParams: Record<string, string> = {}
|
const queueParams: Record<string, string> = {};
|
||||||
if (selectedItem) queueParams.itemId = selectedItem.id
|
if (selectedItem) queueParams.itemId = selectedItem.id;
|
||||||
else if (selectedType) queueParams.typeId = selectedType.id
|
else if (selectedType) queueParams.typeId = selectedType.id;
|
||||||
else if (selectedCategory) queueParams.categoryId = selectedCategory.id
|
else if (selectedCategory) queueParams.categoryId = selectedCategory.id;
|
||||||
|
|
||||||
const fetchTickets = useCallback(() => {
|
const fetchTickets = useCallback(() => {
|
||||||
setLoading(true)
|
setLoading(true);
|
||||||
const params: Record<string, string> = { ...queueParams }
|
const params: Record<string, string> = { ...queueParams };
|
||||||
if (status) params.status = status
|
if (status) params.status = status;
|
||||||
if (severity) params.severity = severity
|
if (severity) params.severity = severity;
|
||||||
if (search) params.search = search
|
if (search) params.search = search;
|
||||||
api
|
api
|
||||||
.get<Ticket[]>('/tickets', { params })
|
.get<Ticket[]>('/tickets', { params })
|
||||||
.then((r) => setTickets(r.data))
|
.then((r) => setTickets(r.data))
|
||||||
.finally(() => setLoading(false))
|
.finally(() => setLoading(false));
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [status, severity, search, selectedCategory, selectedType, selectedItem])
|
}, [status, severity, search, selectedCategory, selectedType, selectedItem]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const t = setTimeout(fetchTickets, 300)
|
const t = setTimeout(fetchTickets, 300);
|
||||||
return () => clearTimeout(t)
|
return () => clearTimeout(t);
|
||||||
}, [fetchTickets])
|
}, [fetchTickets]);
|
||||||
|
|
||||||
const activeQueue = queueLabel(selectedCategory, selectedType, selectedItem)
|
const activeQueue = queueLabel(selectedCategory, selectedType, selectedItem);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title="All Tickets">
|
<Layout title="All Tickets">
|
||||||
@@ -161,7 +159,10 @@ export default function Dashboard() {
|
|||||||
<>
|
<>
|
||||||
<span className="max-w-48 truncate">{activeQueue}</span>
|
<span className="max-w-48 truncate">{activeQueue}</span>
|
||||||
<span
|
<span
|
||||||
onClick={(e) => { e.stopPropagation(); clearQueue() }}
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
clearQueue();
|
||||||
|
}}
|
||||||
className="text-blue-400 hover:text-white transition-colors cursor-pointer"
|
className="text-blue-400 hover:text-white transition-colors cursor-pointer"
|
||||||
>
|
>
|
||||||
<X size={13} />
|
<X size={13} />
|
||||||
@@ -173,7 +174,8 @@ export default function Dashboard() {
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
{showQueueFilter && (
|
{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' }}
|
style={{ minWidth: '520px' }}
|
||||||
>
|
>
|
||||||
{/* Categories */}
|
{/* Categories */}
|
||||||
@@ -278,12 +280,12 @@ export default function Dashboard() {
|
|||||||
ticket.severity === 1
|
ticket.severity === 1
|
||||||
? 'bg-red-500'
|
? 'bg-red-500'
|
||||||
: ticket.severity === 2
|
: ticket.severity === 2
|
||||||
? 'bg-orange-400'
|
? 'bg-orange-400'
|
||||||
: ticket.severity === 3
|
: ticket.severity === 3
|
||||||
? 'bg-yellow-400'
|
? 'bg-yellow-400'
|
||||||
: ticket.severity === 4
|
: ticket.severity === 4
|
||||||
? 'bg-blue-400'
|
? 'bg-blue-400'
|
||||||
: 'bg-gray-600'
|
: 'bg-gray-600'
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -324,5 +326,5 @@ export default function Dashboard() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+20
-24
@@ -1,28 +1,28 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const { login } = useAuth()
|
const { login } = useAuth();
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [username, setUsername] = useState('')
|
const [username, setUsername] = useState('');
|
||||||
const [password, setPassword] = useState('')
|
const [password, setPassword] = useState('');
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('');
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
setError('')
|
setError('');
|
||||||
setLoading(true)
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
await login(username, password)
|
await login(username, password);
|
||||||
navigate('/')
|
navigate('/');
|
||||||
} catch {
|
} catch {
|
||||||
setError('Invalid username or password')
|
setError('Invalid username or password');
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
|
||||||
@@ -43,9 +43,7 @@ export default function Login() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
<label className="block text-sm font-medium text-gray-300 mb-1">Username</label>
|
||||||
Username
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={username}
|
value={username}
|
||||||
@@ -57,9 +55,7 @@ export default function Login() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
<label className="block text-sm font-medium text-gray-300 mb-1">Password</label>
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
value={password}
|
value={password}
|
||||||
@@ -79,5 +75,5 @@ export default function Login() {
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,36 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react';
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom';
|
||||||
import { formatDistanceToNow } from 'date-fns'
|
import { formatDistanceToNow } from 'date-fns';
|
||||||
import api from '../api/client'
|
import api from '../api/client';
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout';
|
||||||
import SeverityBadge from '../components/SeverityBadge'
|
import SeverityBadge from '../components/SeverityBadge';
|
||||||
import StatusBadge from '../components/StatusBadge'
|
import StatusBadge from '../components/StatusBadge';
|
||||||
import { Ticket } from '../types'
|
import { Ticket } from '../types';
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
export default function MyTickets() {
|
export default function MyTickets() {
|
||||||
const { user } = useAuth()
|
const { user } = useAuth();
|
||||||
const [tickets, setTickets] = useState<Ticket[]>([])
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!user) return
|
if (!user) return;
|
||||||
// Only show active tickets — OPEN and IN_PROGRESS
|
// Only show active tickets — OPEN and IN_PROGRESS
|
||||||
Promise.all([
|
Promise.all([
|
||||||
api.get<Ticket[]>('/tickets', { params: { assigneeId: user.id, status: 'OPEN' } }),
|
api.get<Ticket[]>('/tickets', { params: { assigneeId: user.id, status: 'OPEN' } }),
|
||||||
api.get<Ticket[]>('/tickets', { params: { assigneeId: user.id, status: 'IN_PROGRESS' } }),
|
api.get<Ticket[]>('/tickets', { params: { assigneeId: user.id, status: 'IN_PROGRESS' } }),
|
||||||
])
|
])
|
||||||
.then(([openRes, inProgressRes]) => {
|
.then(([openRes, inProgressRes]) => {
|
||||||
const combined = [...openRes.data, ...inProgressRes.data]
|
const combined = [...openRes.data, ...inProgressRes.data];
|
||||||
combined.sort((a, b) => a.severity - b.severity || new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
combined.sort(
|
||||||
setTickets(combined)
|
(a, b) =>
|
||||||
|
a.severity - b.severity ||
|
||||||
|
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
||||||
|
);
|
||||||
|
setTickets(combined);
|
||||||
})
|
})
|
||||||
.finally(() => setLoading(false))
|
.finally(() => setLoading(false));
|
||||||
}, [user])
|
}, [user]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title="My Tickets">
|
<Layout title="My Tickets">
|
||||||
@@ -49,12 +53,12 @@ export default function MyTickets() {
|
|||||||
ticket.severity === 1
|
ticket.severity === 1
|
||||||
? 'bg-red-500'
|
? 'bg-red-500'
|
||||||
: ticket.severity === 2
|
: ticket.severity === 2
|
||||||
? 'bg-orange-400'
|
? 'bg-orange-400'
|
||||||
: ticket.severity === 3
|
: ticket.severity === 3
|
||||||
? 'bg-yellow-400'
|
? 'bg-yellow-400'
|
||||||
: ticket.severity === 4
|
: ticket.severity === 4
|
||||||
? 'bg-blue-400'
|
? 'bg-blue-400'
|
||||||
: 'bg-gray-600'
|
: 'bg-gray-600'
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -87,5 +91,5 @@ export default function MyTickets() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom';
|
||||||
import api from '../api/client'
|
import api from '../api/client';
|
||||||
import Modal from '../components/Modal'
|
import Modal from '../components/Modal';
|
||||||
import CTISelect from '../components/CTISelect'
|
import CTISelect from '../components/CTISelect';
|
||||||
import { User } from '../types'
|
import { User } from '../types';
|
||||||
|
|
||||||
interface NewTicketModalProps {
|
interface NewTicketModalProps {
|
||||||
onClose: () => void
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function NewTicketModal({ onClose }: NewTicketModalProps) {
|
export default function NewTicketModal({ onClose }: NewTicketModalProps) {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [users, setUsers] = useState<User[]>([])
|
const [users, setUsers] = useState<User[]>([]);
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('');
|
||||||
const [submitting, setSubmitting] = useState(false)
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
title: '',
|
title: '',
|
||||||
@@ -23,24 +23,24 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
|
|||||||
categoryId: '',
|
categoryId: '',
|
||||||
typeId: '',
|
typeId: '',
|
||||||
itemId: '',
|
itemId: '',
|
||||||
})
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
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 }) => {
|
const handleCTI = (cti: { categoryId: string; typeId: string; itemId: string }) => {
|
||||||
setForm((f) => ({ ...f, ...cti }))
|
setForm((f) => ({ ...f, ...cti }));
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
if (!form.categoryId || !form.typeId || !form.itemId) {
|
if (!form.categoryId || !form.typeId || !form.itemId) {
|
||||||
setError('Please select a Category, Type, and Item')
|
setError('Please select a Category, Type, and Item');
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
setError('')
|
setError('');
|
||||||
setSubmitting(true)
|
setSubmitting(true);
|
||||||
try {
|
try {
|
||||||
const payload: Record<string, unknown> = {
|
const payload: Record<string, unknown> = {
|
||||||
title: form.title,
|
title: form.title,
|
||||||
@@ -49,22 +49,22 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
|
|||||||
categoryId: form.categoryId,
|
categoryId: form.categoryId,
|
||||||
typeId: form.typeId,
|
typeId: form.typeId,
|
||||||
itemId: form.itemId,
|
itemId: form.itemId,
|
||||||
}
|
};
|
||||||
if (form.assigneeId) payload.assigneeId = form.assigneeId
|
if (form.assigneeId) payload.assigneeId = form.assigneeId;
|
||||||
|
|
||||||
const res = await api.post('/tickets', payload)
|
const res = await api.post('/tickets', payload);
|
||||||
onClose()
|
onClose();
|
||||||
navigate(`/${res.data.displayId}`)
|
navigate(`/${res.data.displayId}`);
|
||||||
} catch {
|
} catch {
|
||||||
setError('Failed to create ticket')
|
setError('Failed to create ticket');
|
||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false)
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const inputClass =
|
const inputClass =
|
||||||
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
|
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
|
||||||
const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
|
const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal title="New Ticket" onClose={onClose} size="lg">
|
<Modal title="New Ticket" onClose={onClose} size="lg">
|
||||||
@@ -161,5 +161,5 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+176
-152
@@ -1,24 +1,32 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react';
|
||||||
import { useParams, useNavigate } from 'react-router-dom'
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
import { format, formatDistanceToNow } from 'date-fns'
|
import { format, formatDistanceToNow } from 'date-fns';
|
||||||
import ReactMarkdown from 'react-markdown'
|
import ReactMarkdown from 'react-markdown';
|
||||||
import remarkGfm from 'remark-gfm'
|
import remarkGfm from 'remark-gfm';
|
||||||
import {
|
import {
|
||||||
Pencil, Trash2, Send, X, Check,
|
Pencil,
|
||||||
MessageSquare, ClipboardList, FileText,
|
Trash2,
|
||||||
ArrowLeft, ChevronDown, ChevronRight,
|
Send,
|
||||||
} from 'lucide-react'
|
X,
|
||||||
import api from '../api/client'
|
Check,
|
||||||
import Layout from '../components/Layout'
|
MessageSquare,
|
||||||
import Modal from '../components/Modal'
|
ClipboardList,
|
||||||
import SeverityBadge from '../components/SeverityBadge'
|
FileText,
|
||||||
import StatusBadge from '../components/StatusBadge'
|
ArrowLeft,
|
||||||
import CTISelect from '../components/CTISelect'
|
ChevronDown,
|
||||||
import Avatar from '../components/Avatar'
|
ChevronRight,
|
||||||
import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types'
|
} from 'lucide-react';
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import api from '../api/client';
|
||||||
|
import Layout from '../components/Layout';
|
||||||
|
import Modal from '../components/Modal';
|
||||||
|
import SeverityBadge from '../components/SeverityBadge';
|
||||||
|
import StatusBadge from '../components/StatusBadge';
|
||||||
|
import CTISelect from '../components/CTISelect';
|
||||||
|
import Avatar from '../components/Avatar';
|
||||||
|
import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
type Tab = 'overview' | 'comments' | 'audit'
|
type Tab = 'overview' | 'comments' | 'audit';
|
||||||
|
|
||||||
const SEVERITY_OPTIONS = [
|
const SEVERITY_OPTIONS = [
|
||||||
{ value: 1, label: 'SEV 1 — Critical' },
|
{ value: 1, label: 'SEV 1 — Critical' },
|
||||||
@@ -26,7 +34,7 @@ const SEVERITY_OPTIONS = [
|
|||||||
{ value: 3, label: 'SEV 3 — Medium' },
|
{ value: 3, label: 'SEV 3 — Medium' },
|
||||||
{ value: 4, label: 'SEV 4 — Low' },
|
{ value: 4, label: 'SEV 4 — Low' },
|
||||||
{ value: 5, label: 'SEV 5 — Minimal' },
|
{ value: 5, label: 'SEV 5 — Minimal' },
|
||||||
]
|
];
|
||||||
|
|
||||||
const AUDIT_LABELS: Record<string, string> = {
|
const AUDIT_LABELS: Record<string, string> = {
|
||||||
CREATED: 'created this ticket',
|
CREATED: 'created this ticket',
|
||||||
@@ -38,7 +46,7 @@ const AUDIT_LABELS: Record<string, string> = {
|
|||||||
OVERVIEW_CHANGED: 'updated overview',
|
OVERVIEW_CHANGED: 'updated overview',
|
||||||
COMMENT_ADDED: 'added a comment',
|
COMMENT_ADDED: 'added a comment',
|
||||||
COMMENT_DELETED: 'deleted a comment',
|
COMMENT_DELETED: 'deleted a comment',
|
||||||
}
|
};
|
||||||
|
|
||||||
const AUDIT_COLORS: Record<string, string> = {
|
const AUDIT_COLORS: Record<string, string> = {
|
||||||
CREATED: 'bg-green-500',
|
CREATED: 'bg-green-500',
|
||||||
@@ -50,134 +58,134 @@ const AUDIT_COLORS: Record<string, string> = {
|
|||||||
OVERVIEW_CHANGED: 'bg-gray-500',
|
OVERVIEW_CHANGED: 'bg-gray-500',
|
||||||
COMMENT_ADDED: 'bg-gray-500',
|
COMMENT_ADDED: 'bg-gray-500',
|
||||||
COMMENT_DELETED: 'bg-red-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() {
|
export default function TicketDetail() {
|
||||||
const { id } = useParams<{ id: string }>()
|
const { id } = useParams<{ id: string }>();
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const { user: authUser } = useAuth()
|
const { user: authUser } = useAuth();
|
||||||
|
|
||||||
const [ticket, setTicket] = useState<Ticket | null>(null)
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||||
const [users, setUsers] = useState<User[]>([])
|
const [users, setUsers] = useState<User[]>([]);
|
||||||
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
|
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true);
|
||||||
const [tab, setTab] = useState<Tab>('overview')
|
const [tab, setTab] = useState<Tab>('overview');
|
||||||
const [editing, setEditing] = useState(false)
|
const [editing, setEditing] = useState(false);
|
||||||
const [reroutingCTI, setReroutingCTI] = useState(false)
|
const [reroutingCTI, setReroutingCTI] = useState(false);
|
||||||
const [commentBody, setCommentBody] = useState('')
|
const [commentBody, setCommentBody] = useState('');
|
||||||
const [submittingComment, setSubmittingComment] = useState(false)
|
const [submittingComment, setSubmittingComment] = useState(false);
|
||||||
const [preview, setPreview] = useState(false)
|
const [preview, setPreview] = useState(false);
|
||||||
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
|
const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
const [editForm, setEditForm] = useState({ title: '', overview: '' })
|
const [editForm, setEditForm] = useState({ title: '', overview: '' });
|
||||||
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })
|
const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
|
||||||
const [editingStatus, setEditingStatus] = useState(false)
|
const [editingStatus, setEditingStatus] = useState(false);
|
||||||
const [editingSeverity, setEditingSeverity] = useState(false)
|
const [editingSeverity, setEditingSeverity] = useState(false);
|
||||||
const [editingAssignee, setEditingAssignee] = useState(false)
|
const [editingAssignee, setEditingAssignee] = useState(false);
|
||||||
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set())
|
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
|
||||||
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set())
|
const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
const toggleDate = (key: string) =>
|
const toggleDate = (key: string) =>
|
||||||
setExpandedDates((prev) => {
|
setExpandedDates((prev) => {
|
||||||
const next = new Set(prev)
|
const next = new Set(prev);
|
||||||
next.has(key) ? next.delete(key) : next.add(key)
|
if (next.has(key)) next.delete(key);
|
||||||
return next
|
else next.add(key);
|
||||||
})
|
return next;
|
||||||
|
});
|
||||||
|
|
||||||
const toggleCommentDate = (id: string) =>
|
const toggleCommentDate = (id: string) =>
|
||||||
setExpandedCommentDates((prev) => {
|
setExpandedCommentDates((prev) => {
|
||||||
const next = new Set(prev)
|
const next = new Set(prev);
|
||||||
next.has(id) ? next.delete(id) : next.add(id)
|
if (next.has(id)) next.delete(id);
|
||||||
return next
|
else next.add(id);
|
||||||
})
|
return next;
|
||||||
|
});
|
||||||
|
|
||||||
const isAdmin = authUser?.role === 'ADMIN'
|
const isAdmin = authUser?.role === 'ADMIN';
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Promise.all([
|
Promise.all([api.get<Ticket>(`/tickets/${id}`), api.get<User[]>('/users')])
|
||||||
api.get<Ticket>(`/tickets/${id}`),
|
.then(([tRes, uRes]) => {
|
||||||
api.get<User[]>('/users'),
|
setTicket(tRes.data);
|
||||||
]).then(([tRes, uRes]) => {
|
setUsers(uRes.data);
|
||||||
setTicket(tRes.data)
|
})
|
||||||
setUsers(uRes.data)
|
.finally(() => setLoading(false));
|
||||||
}).finally(() => setLoading(false))
|
}, [id]);
|
||||||
}, [id])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (tab === 'audit' && ticket) {
|
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>) => {
|
const patch = async (payload: Record<string, unknown>) => {
|
||||||
if (!ticket) return
|
if (!ticket) return;
|
||||||
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
|
const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload);
|
||||||
setTicket(res.data)
|
setTicket(res.data);
|
||||||
return res.data
|
return res.data;
|
||||||
}
|
};
|
||||||
|
|
||||||
const startEdit = () => {
|
const startEdit = () => {
|
||||||
if (!ticket) return
|
if (!ticket) return;
|
||||||
setEditForm({ title: ticket.title, overview: ticket.overview })
|
setEditForm({ title: ticket.title, overview: ticket.overview });
|
||||||
setEditing(true)
|
setEditing(true);
|
||||||
setTab('overview')
|
setTab('overview');
|
||||||
}
|
};
|
||||||
|
|
||||||
const saveEdit = async () => {
|
const saveEdit = async () => {
|
||||||
await patch({ title: editForm.title, overview: editForm.overview })
|
await patch({ title: editForm.title, overview: editForm.overview });
|
||||||
setEditing(false)
|
setEditing(false);
|
||||||
}
|
};
|
||||||
|
|
||||||
const startReroute = () => {
|
const startReroute = () => {
|
||||||
if (!ticket) return
|
if (!ticket) return;
|
||||||
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId })
|
setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
|
||||||
setReroutingCTI(true)
|
setReroutingCTI(true);
|
||||||
}
|
};
|
||||||
|
|
||||||
const saveReroute = async () => {
|
const saveReroute = async () => {
|
||||||
await patch(pendingCTI)
|
await patch(pendingCTI);
|
||||||
setReroutingCTI(false)
|
setReroutingCTI(false);
|
||||||
}
|
};
|
||||||
|
|
||||||
const deleteTicket = async () => {
|
const deleteTicket = async () => {
|
||||||
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
|
if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return;
|
||||||
await api.delete(`/tickets/${ticket.displayId}`)
|
await api.delete(`/tickets/${ticket.displayId}`);
|
||||||
navigate('/')
|
navigate('/');
|
||||||
}
|
};
|
||||||
|
|
||||||
const submitComment = async (e: React.FormEvent) => {
|
const submitComment = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
if (!ticket || !commentBody.trim()) return
|
if (!ticket || !commentBody.trim()) return;
|
||||||
setSubmittingComment(true)
|
setSubmittingComment(true);
|
||||||
try {
|
try {
|
||||||
const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
|
const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
|
||||||
body: commentBody.trim(),
|
body: commentBody.trim(),
|
||||||
})
|
});
|
||||||
setTicket((t) => t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t)
|
setTicket((t) => (t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t));
|
||||||
setCommentBody('')
|
setCommentBody('');
|
||||||
setPreview(false)
|
setPreview(false);
|
||||||
} finally {
|
} finally {
|
||||||
setSubmittingComment(false)
|
setSubmittingComment(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const deleteComment = async (commentId: string) => {
|
const deleteComment = async (commentId: string) => {
|
||||||
if (!ticket) return
|
if (!ticket) return;
|
||||||
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
|
await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`);
|
||||||
setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
|
setTicket((t) => (t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t));
|
||||||
}
|
};
|
||||||
|
|
||||||
const toggleLog = (logId: string) => {
|
const toggleLog = (logId: string) => {
|
||||||
setExpandedLogs((prev) => {
|
setExpandedLogs((prev) => {
|
||||||
const next = new Set(prev)
|
const next = new Set(prev);
|
||||||
if (next.has(logId)) next.delete(logId)
|
if (next.has(logId)) next.delete(logId);
|
||||||
else next.add(logId)
|
else next.add(logId);
|
||||||
return next
|
return next;
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
@@ -186,7 +194,7 @@ export default function TicketDetail() {
|
|||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!ticket) {
|
if (!ticket) {
|
||||||
@@ -196,11 +204,11 @@ export default function TicketDetail() {
|
|||||||
Ticket not found
|
Ticket not found
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const commentCount = ticket.comments?.length ?? 0
|
const commentCount = ticket.comments?.length ?? 0;
|
||||||
const agentUsers = users.filter((u) => u.role !== 'SERVICE')
|
const agentUsers = users.filter((u) => u.role !== 'SERVICE');
|
||||||
|
|
||||||
// Status options: CLOSED only for admins
|
// Status options: CLOSED only for admins
|
||||||
const statusOptions: { value: TicketStatus; label: string }[] = [
|
const statusOptions: { value: TicketStatus; label: string }[] = [
|
||||||
@@ -208,7 +216,7 @@ export default function TicketDetail() {
|
|||||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||||
{ value: 'RESOLVED', label: 'Resolved' },
|
{ value: 'RESOLVED', label: 'Resolved' },
|
||||||
...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
|
...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
|
||||||
]
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
@@ -264,7 +272,11 @@ export default function TicketDetail() {
|
|||||||
{(
|
{(
|
||||||
[
|
[
|
||||||
{ key: 'overview', icon: FileText, label: 'Overview' },
|
{ 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' },
|
{ key: 'audit', icon: ClipboardList, label: 'Audit Log' },
|
||||||
] as const
|
] as const
|
||||||
).map(({ key, icon: Icon, label }) => (
|
).map(({ key, icon: Icon, label }) => (
|
||||||
@@ -311,9 +323,7 @@ export default function TicketDetail() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="prose text-sm text-gray-300">
|
<div className="prose text-sm text-gray-300">
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
|
||||||
{ticket.overview}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -328,7 +338,7 @@ export default function TicketDetail() {
|
|||||||
{/* Avatar + spine */}
|
{/* Avatar + spine */}
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<Avatar name={comment.author.displayName} size="md" />
|
<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 className="flex-1 w-px bg-gray-800 mt-2" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -345,7 +355,9 @@ export default function TicketDetail() {
|
|||||||
>
|
>
|
||||||
{expandedCommentDates.has(comment.id)
|
{expandedCommentDates.has(comment.id)
|
||||||
? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
|
? 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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{(comment.authorId === authUser?.id || isAdmin) && (
|
{(comment.authorId === authUser?.id || isAdmin) && (
|
||||||
@@ -358,17 +370,13 @@ export default function TicketDetail() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
|
<div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{comment.body}</ReactMarkdown>
|
||||||
{comment.body}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<div className="py-12 text-center text-sm text-gray-600">
|
<div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
|
||||||
No comments yet
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Composer */}
|
{/* Composer */}
|
||||||
@@ -393,10 +401,11 @@ export default function TicketDetail() {
|
|||||||
<form onSubmit={submitComment} className="p-3">
|
<form onSubmit={submitComment} className="p-3">
|
||||||
{preview ? (
|
{preview ? (
|
||||||
<div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
|
<div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
|
||||||
{commentBody.trim()
|
{commentBody.trim() ? (
|
||||||
? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
|
||||||
: <span className="text-gray-600 italic">Nothing to preview</span>
|
) : (
|
||||||
}
|
<span className="text-gray-600 italic">Nothing to preview</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<textarea
|
<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"
|
className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none mb-3"
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
submitComment(e as unknown as React.FormEvent)
|
submitComment(e as unknown as React.FormEvent);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@@ -438,15 +447,17 @@ export default function TicketDetail() {
|
|||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
{auditLogs.map((log, i) => {
|
{auditLogs.map((log, i) => {
|
||||||
const hasDetail = !!log.detail
|
const hasDetail = !!log.detail;
|
||||||
const isExpanded = expandedLogs.has(log.id)
|
const isExpanded = expandedLogs.has(log.id);
|
||||||
const isComment = COMMENT_ACTIONS.has(log.action)
|
const isComment = COMMENT_ACTIONS.has(log.action);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={log.id} className="flex gap-4">
|
<div key={log.id} className="flex gap-4">
|
||||||
{/* Timeline */}
|
{/* Timeline */}
|
||||||
<div className="flex flex-col items-center w-5 flex-shrink-0">
|
<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 && (
|
{i < auditLogs.length - 1 && (
|
||||||
<div className="w-px flex-1 bg-gray-800 my-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)}
|
onClick={() => hasDetail && toggleLog(log.id)}
|
||||||
>
|
>
|
||||||
<p className="text-sm text-gray-300">
|
<p className="text-sm text-gray-300">
|
||||||
<span className="font-medium text-gray-100">{log.user.displayName}</span>
|
<span className="font-medium text-gray-100">
|
||||||
{' '}{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
|
{log.user.displayName}
|
||||||
|
</span>{' '}
|
||||||
|
{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
|
||||||
{hasDetail && (
|
{hasDetail && (
|
||||||
<span className="ml-1 inline-flex items-center text-gray-600">
|
<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>
|
</span>
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
@@ -490,7 +507,7 @@ export default function TicketDetail() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -501,11 +518,12 @@ export default function TicketDetail() {
|
|||||||
|
|
||||||
{/* ── Sidebar ── */}
|
{/* ── Sidebar ── */}
|
||||||
<div className="w-64 flex-shrink-0 sticky top-0 space-y-3">
|
<div className="w-64 flex-shrink-0 sticky top-0 space-y-3">
|
||||||
|
|
||||||
{/* Ticket Summary */}
|
{/* Ticket Summary */}
|
||||||
<div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
|
<div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
|
||||||
<div className="px-4 py-3">
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Status */}
|
{/* Status */}
|
||||||
@@ -550,7 +568,9 @@ export default function TicketDetail() {
|
|||||||
{[
|
{[
|
||||||
{ key: 'created', label: 'Created', date: ticket.createdAt },
|
{ key: 'created', label: 'Created', date: ticket.createdAt },
|
||||||
{ key: 'modified', label: 'Modified', date: ticket.updatedAt },
|
{ 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 }) => (
|
].map(({ key, label, date }) => (
|
||||||
<div key={key}>
|
<div key={key}>
|
||||||
<p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
|
<p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
|
||||||
@@ -612,8 +632,8 @@ export default function TicketDetail() {
|
|||||||
<button
|
<button
|
||||||
key={s.value}
|
key={s.value}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
await patch({ status: s.value })
|
await patch({ status: s.value });
|
||||||
setEditingStatus(false)
|
setEditingStatus(false);
|
||||||
}}
|
}}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
||||||
ticket.status === s.value
|
ticket.status === s.value
|
||||||
@@ -639,8 +659,8 @@ export default function TicketDetail() {
|
|||||||
<button
|
<button
|
||||||
key={s.value}
|
key={s.value}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
await patch({ severity: s.value })
|
await patch({ severity: s.value });
|
||||||
setEditingSeverity(false)
|
setEditingSeverity(false);
|
||||||
}}
|
}}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
||||||
ticket.severity === s.value
|
ticket.severity === s.value
|
||||||
@@ -650,7 +670,9 @@ export default function TicketDetail() {
|
|||||||
>
|
>
|
||||||
<SeverityBadge severity={s.value} />
|
<SeverityBadge severity={s.value} />
|
||||||
<span className="text-sm text-gray-400">{s.label.split(' — ')[1]}</span>
|
<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>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -662,8 +684,8 @@ export default function TicketDetail() {
|
|||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<button
|
<button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
await patch({ assigneeId: null })
|
await patch({ assigneeId: null });
|
||||||
setEditingAssignee(false)
|
setEditingAssignee(false);
|
||||||
}}
|
}}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
||||||
!ticket.assigneeId
|
!ticket.assigneeId
|
||||||
@@ -678,8 +700,8 @@ export default function TicketDetail() {
|
|||||||
<button
|
<button
|
||||||
key={u.id}
|
key={u.id}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
await patch({ assigneeId: u.id })
|
await patch({ assigneeId: u.id });
|
||||||
setEditingAssignee(false)
|
setEditingAssignee(false);
|
||||||
}}
|
}}
|
||||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors ${
|
||||||
ticket.assigneeId === u.id
|
ticket.assigneeId === u.id
|
||||||
@@ -689,7 +711,9 @@ export default function TicketDetail() {
|
|||||||
>
|
>
|
||||||
<Avatar name={u.displayName} size="sm" />
|
<Avatar name={u.displayName} size="sm" />
|
||||||
<span className="text-sm text-gray-300">{u.displayName}</span>
|
<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>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -725,5 +749,5 @@ export default function TicketDetail() {
|
|||||||
</Modal>
|
</Modal>
|
||||||
)}
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+113
-87
@@ -1,136 +1,144 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react';
|
||||||
import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react'
|
import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react';
|
||||||
import api from '../../api/client'
|
import api from '../../api/client';
|
||||||
import Layout from '../../components/Layout'
|
import Layout from '../../components/Layout';
|
||||||
import Modal from '../../components/Modal'
|
import Modal from '../../components/Modal';
|
||||||
import { Category, CTIType, Item } from '../../types'
|
import { Category, CTIType, Item } from '../../types';
|
||||||
|
|
||||||
type PanelItem = { id: string; name: string }
|
type PanelItem = { id: string; name: string };
|
||||||
|
|
||||||
interface NameModalState {
|
interface NameModalState {
|
||||||
open: boolean
|
open: boolean;
|
||||||
mode: 'add' | 'edit'
|
mode: 'add' | 'edit';
|
||||||
panel: 'category' | 'type' | 'item'
|
panel: 'category' | 'type' | 'item';
|
||||||
item?: PanelItem
|
item?: PanelItem;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AdminCTI() {
|
export default function AdminCTI() {
|
||||||
const [categories, setCategories] = useState<Category[]>([])
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
const [types, setTypes] = useState<CTIType[]>([])
|
const [types, setTypes] = useState<CTIType[]>([]);
|
||||||
const [items, setItems] = useState<Item[]>([])
|
const [items, setItems] = useState<Item[]>([]);
|
||||||
|
|
||||||
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
|
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
|
||||||
const [selectedType, setSelectedType] = useState<CTIType | null>(null)
|
const [selectedType, setSelectedType] = useState<CTIType | null>(null);
|
||||||
|
|
||||||
const [nameModal, setNameModal] = useState<NameModalState>({ open: false, mode: 'add', panel: 'category' })
|
const [nameModal, setNameModal] = useState<NameModalState>({
|
||||||
const [nameValue, setNameValue] = useState('')
|
open: false,
|
||||||
const [submitting, setSubmitting] = useState(false)
|
mode: 'add',
|
||||||
|
panel: 'category',
|
||||||
|
});
|
||||||
|
const [nameValue, setNameValue] = useState('');
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
const fetchCategories = () =>
|
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) =>
|
const fetchTypes = (categoryId: string) =>
|
||||||
api
|
api.get<CTIType[]>('/cti/types', { params: { categoryId } }).then((r) => setTypes(r.data));
|
||||||
.get<CTIType[]>('/cti/types', { params: { categoryId } })
|
|
||||||
.then((r) => setTypes(r.data))
|
|
||||||
|
|
||||||
const fetchItems = (typeId: string) =>
|
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) => {
|
const selectCategory = (cat: Category) => {
|
||||||
setSelectedCategory(cat)
|
setSelectedCategory(cat);
|
||||||
setSelectedType(null)
|
setSelectedType(null);
|
||||||
setItems([])
|
setItems([]);
|
||||||
fetchTypes(cat.id)
|
fetchTypes(cat.id);
|
||||||
}
|
};
|
||||||
|
|
||||||
const selectType = (type: CTIType) => {
|
const selectType = (type: CTIType) => {
|
||||||
setSelectedType(type)
|
setSelectedType(type);
|
||||||
fetchItems(type.id)
|
fetchItems(type.id);
|
||||||
}
|
};
|
||||||
|
|
||||||
const openAdd = (panel: 'category' | 'type' | 'item') => {
|
const openAdd = (panel: 'category' | 'type' | 'item') => {
|
||||||
setNameValue('')
|
setNameValue('');
|
||||||
setNameModal({ open: true, mode: 'add', panel })
|
setNameModal({ open: true, mode: 'add', panel });
|
||||||
}
|
};
|
||||||
|
|
||||||
const openEdit = (panel: 'category' | 'type' | 'item', item: PanelItem) => {
|
const openEdit = (panel: 'category' | 'type' | 'item', item: PanelItem) => {
|
||||||
setNameValue(item.name)
|
setNameValue(item.name);
|
||||||
setNameModal({ open: true, mode: 'edit', panel, item })
|
setNameModal({ open: true, mode: 'edit', panel, item });
|
||||||
}
|
};
|
||||||
|
|
||||||
const closeModal = () => setNameModal((m) => ({ ...m, open: false }))
|
const closeModal = () => setNameModal((m) => ({ ...m, open: false }));
|
||||||
|
|
||||||
const handleSave = async (e: React.FormEvent) => {
|
const handleSave = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
if (!nameValue.trim()) return
|
if (!nameValue.trim()) return;
|
||||||
setSubmitting(true)
|
setSubmitting(true);
|
||||||
try {
|
try {
|
||||||
const { mode, panel, item } = nameModal
|
const { mode, panel, item } = nameModal;
|
||||||
if (mode === 'add') {
|
if (mode === 'add') {
|
||||||
if (panel === 'category') {
|
if (panel === 'category') {
|
||||||
await api.post('/cti/categories', { name: nameValue.trim() })
|
await api.post('/cti/categories', { name: nameValue.trim() });
|
||||||
await fetchCategories()
|
await fetchCategories();
|
||||||
} else if (panel === 'type' && selectedCategory) {
|
} else if (panel === 'type' && selectedCategory) {
|
||||||
await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id })
|
await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id });
|
||||||
await fetchTypes(selectedCategory.id)
|
await fetchTypes(selectedCategory.id);
|
||||||
} else if (panel === 'item' && selectedType) {
|
} else if (panel === 'item' && selectedType) {
|
||||||
await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id })
|
await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id });
|
||||||
await fetchItems(selectedType.id)
|
await fetchItems(selectedType.id);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (!item) return
|
if (!item) return;
|
||||||
if (panel === 'category') {
|
if (panel === 'category') {
|
||||||
await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() })
|
await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() });
|
||||||
await fetchCategories()
|
await fetchCategories();
|
||||||
if (selectedCategory?.id === item.id) setSelectedCategory((c) => c ? { ...c, name: nameValue.trim() } : c)
|
if (selectedCategory?.id === item.id)
|
||||||
|
setSelectedCategory((c) => (c ? { ...c, name: nameValue.trim() } : c));
|
||||||
} else if (panel === 'type') {
|
} else if (panel === 'type') {
|
||||||
await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() })
|
await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() });
|
||||||
if (selectedCategory) await fetchTypes(selectedCategory.id)
|
if (selectedCategory) await fetchTypes(selectedCategory.id);
|
||||||
if (selectedType?.id === item.id) setSelectedType((t) => t ? { ...t, name: nameValue.trim() } : t)
|
if (selectedType?.id === item.id)
|
||||||
|
setSelectedType((t) => (t ? { ...t, name: nameValue.trim() } : t));
|
||||||
} else if (panel === 'item') {
|
} else if (panel === 'item') {
|
||||||
await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() })
|
await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() });
|
||||||
if (selectedType) await fetchItems(selectedType.id)
|
if (selectedType) await fetchItems(selectedType.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
closeModal()
|
closeModal();
|
||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false)
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleDelete = async (panel: 'category' | 'type' | 'item', item: PanelItem) => {
|
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') {
|
if (panel === 'category') {
|
||||||
await api.delete(`/cti/categories/${item.id}`)
|
await api.delete(`/cti/categories/${item.id}`);
|
||||||
if (selectedCategory?.id === item.id) {
|
if (selectedCategory?.id === item.id) {
|
||||||
setSelectedCategory(null)
|
setSelectedCategory(null);
|
||||||
setSelectedType(null)
|
setSelectedType(null);
|
||||||
setTypes([])
|
setTypes([]);
|
||||||
setItems([])
|
setItems([]);
|
||||||
}
|
}
|
||||||
await fetchCategories()
|
await fetchCategories();
|
||||||
} else if (panel === 'type') {
|
} else if (panel === 'type') {
|
||||||
await api.delete(`/cti/types/${item.id}`)
|
await api.delete(`/cti/types/${item.id}`);
|
||||||
if (selectedType?.id === item.id) {
|
if (selectedType?.id === item.id) {
|
||||||
setSelectedType(null)
|
setSelectedType(null);
|
||||||
setItems([])
|
setItems([]);
|
||||||
}
|
}
|
||||||
if (selectedCategory) await fetchTypes(selectedCategory.id)
|
if (selectedCategory) await fetchTypes(selectedCategory.id);
|
||||||
} else {
|
} else {
|
||||||
await api.delete(`/cti/items/${item.id}`)
|
await api.delete(`/cti/items/${item.id}`);
|
||||||
if (selectedType) await fetchItems(selectedType.id)
|
if (selectedType) await fetchItems(selectedType.id);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const panelClass = 'bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col'
|
const panelClass = 'bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col';
|
||||||
const panelHeaderClass = 'flex items-center justify-between px-4 py-3 border-b border-gray-800'
|
const panelHeaderClass = 'flex items-center justify-between px-4 py-3 border-b border-gray-800';
|
||||||
const itemClass = (active: boolean) =>
|
const itemClass = (active: boolean) =>
|
||||||
`flex items-center justify-between px-4 py-2.5 cursor-pointer group transition-colors ${
|
`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 (
|
return (
|
||||||
<Layout title="CTI Configuration">
|
<Layout title="CTI Configuration">
|
||||||
@@ -159,13 +167,19 @@ export default function AdminCTI() {
|
|||||||
<span className="text-sm text-gray-300">{cat.name}</span>
|
<span className="text-sm text-gray-300">{cat.name}</span>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<button
|
<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"
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
|
||||||
>
|
>
|
||||||
<Pencil size={13} />
|
<Pencil size={13} />
|
||||||
</button>
|
</button>
|
||||||
<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"
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||||
>
|
>
|
||||||
<Trash2 size={13} />
|
<Trash2 size={13} />
|
||||||
@@ -211,13 +225,19 @@ export default function AdminCTI() {
|
|||||||
<span className="text-sm text-gray-300">{type.name}</span>
|
<span className="text-sm text-gray-300">{type.name}</span>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<button
|
<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"
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
|
||||||
>
|
>
|
||||||
<Pencil size={13} />
|
<Pencil size={13} />
|
||||||
</button>
|
</button>
|
||||||
<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"
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||||
>
|
>
|
||||||
<Trash2 size={13} />
|
<Trash2 size={13} />
|
||||||
@@ -259,13 +279,19 @@ export default function AdminCTI() {
|
|||||||
<span className="text-sm text-gray-300">{item.name}</span>
|
<span className="text-sm text-gray-300">{item.name}</span>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<button
|
<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"
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
|
||||||
>
|
>
|
||||||
<Pencil size={13} />
|
<Pencil size={13} />
|
||||||
</button>
|
</button>
|
||||||
<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"
|
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||||
>
|
>
|
||||||
<Trash2 size={13} />
|
<Trash2 size={13} />
|
||||||
@@ -316,5 +342,5 @@ export default function AdminCTI() {
|
|||||||
</Modal>
|
</Modal>
|
||||||
)}
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react';
|
||||||
import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react'
|
import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react';
|
||||||
import api from '../../api/client'
|
import api from '../../api/client';
|
||||||
import Layout from '../../components/Layout'
|
import Layout from '../../components/Layout';
|
||||||
import Modal from '../../components/Modal'
|
import Modal from '../../components/Modal';
|
||||||
import { User, Role } from '../../types'
|
import { User, Role } from '../../types';
|
||||||
import { useAuth } from '../../contexts/AuthContext'
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
|
||||||
interface UserForm {
|
interface UserForm {
|
||||||
username: string
|
username: string;
|
||||||
email: string
|
email: string;
|
||||||
displayName: string
|
displayName: string;
|
||||||
password: string
|
password: string;
|
||||||
role: Role
|
role: Role;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BLANK_FORM: UserForm = {
|
const BLANK_FORM: UserForm = {
|
||||||
@@ -20,136 +20,149 @@ const BLANK_FORM: UserForm = {
|
|||||||
displayName: '',
|
displayName: '',
|
||||||
password: '',
|
password: '',
|
||||||
role: 'AGENT',
|
role: 'AGENT',
|
||||||
}
|
};
|
||||||
|
|
||||||
const ROLE_LABELS: Record<Role, string> = {
|
const ROLE_LABELS: Record<Role, string> = {
|
||||||
ADMIN: 'Admin',
|
ADMIN: 'Admin',
|
||||||
AGENT: 'Agent',
|
AGENT: 'Agent',
|
||||||
USER: 'User',
|
USER: 'User',
|
||||||
SERVICE: 'Service',
|
SERVICE: 'Service',
|
||||||
}
|
};
|
||||||
|
|
||||||
const ROLE_BADGE: Record<Role, string> = {
|
const ROLE_BADGE: Record<Role, string> = {
|
||||||
ADMIN: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
ADMIN: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||||
AGENT: 'bg-blue-500/20 text-blue-400 border-blue-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',
|
USER: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||||
SERVICE: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
SERVICE: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
||||||
}
|
};
|
||||||
|
|
||||||
const ROLE_DESCRIPTIONS: Record<Role, string> = {
|
const ROLE_DESCRIPTIONS: Record<Role, string> = {
|
||||||
ADMIN: 'Full access — manage users, CTI config, close and delete tickets',
|
ADMIN: 'Full access — manage users, CTI config, close and delete tickets',
|
||||||
AGENT: 'Manage tickets — create, update, assign, comment, change status',
|
AGENT: 'Manage tickets — create, update, assign, comment, change status',
|
||||||
USER: 'Basic access — view tickets and add comments only',
|
USER: 'Basic access — view tickets and add comments only',
|
||||||
SERVICE: 'Automation account — authenticates via API key, no password login',
|
SERVICE: 'Automation account — authenticates via API key, no password login',
|
||||||
}
|
};
|
||||||
|
|
||||||
export default function AdminUsers() {
|
export default function AdminUsers() {
|
||||||
const { user: authUser } = useAuth()
|
const { user: authUser } = useAuth();
|
||||||
const [users, setUsers] = useState<User[]>([])
|
const [users, setUsers] = useState<User[]>([]);
|
||||||
const [modal, setModal] = useState<'add' | 'edit' | null>(null)
|
const [modal, setModal] = useState<'add' | 'edit' | null>(null);
|
||||||
const [selected, setSelected] = useState<User | null>(null)
|
const [selected, setSelected] = useState<User | null>(null);
|
||||||
const [form, setForm] = useState<UserForm>(BLANK_FORM)
|
const [form, setForm] = useState<UserForm>(BLANK_FORM);
|
||||||
const [submitting, setSubmitting] = useState(false)
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('');
|
||||||
const [copiedKey, setCopiedKey] = useState<string | null>(null)
|
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
||||||
const [newApiKey, setNewApiKey] = useState<string | null>(null)
|
const [newApiKey, setNewApiKey] = useState<string | null>(null);
|
||||||
|
|
||||||
const fetchUsers = () => {
|
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 = () => {
|
const openAdd = () => {
|
||||||
setForm(BLANK_FORM)
|
setForm(BLANK_FORM);
|
||||||
setError('')
|
setError('');
|
||||||
setNewApiKey(null)
|
setNewApiKey(null);
|
||||||
setModal('add')
|
setModal('add');
|
||||||
}
|
};
|
||||||
|
|
||||||
const openEdit = (u: User) => {
|
const openEdit = (u: User) => {
|
||||||
setSelected(u)
|
setSelected(u);
|
||||||
setForm({ username: u.username, email: u.email, displayName: u.displayName, password: '', role: u.role })
|
setForm({
|
||||||
setError('')
|
username: u.username,
|
||||||
setNewApiKey(null)
|
email: u.email,
|
||||||
setModal('edit')
|
displayName: u.displayName,
|
||||||
}
|
password: '',
|
||||||
|
role: u.role,
|
||||||
|
});
|
||||||
|
setError('');
|
||||||
|
setNewApiKey(null);
|
||||||
|
setModal('edit');
|
||||||
|
};
|
||||||
|
|
||||||
const closeModal = () => {
|
const closeModal = () => {
|
||||||
setModal(null)
|
setModal(null);
|
||||||
setSelected(null)
|
setSelected(null);
|
||||||
setNewApiKey(null)
|
setNewApiKey(null);
|
||||||
fetchUsers()
|
fetchUsers();
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleAdd = async (e: React.FormEvent) => {
|
const handleAdd = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
setSubmitting(true)
|
setSubmitting(true);
|
||||||
setError('')
|
setError('');
|
||||||
try {
|
try {
|
||||||
const payload: Record<string, string> = {
|
const payload: Record<string, string> = {
|
||||||
username: form.username,
|
username: form.username,
|
||||||
email: form.email,
|
email: form.email,
|
||||||
displayName: form.displayName,
|
displayName: form.displayName,
|
||||||
role: form.role,
|
role: form.role,
|
||||||
}
|
};
|
||||||
if (form.password) payload.password = form.password
|
if (form.password) payload.password = form.password;
|
||||||
const res = await api.post<User>('/users', payload)
|
const res = await api.post<User>('/users', payload);
|
||||||
if (res.data.apiKey) setNewApiKey(res.data.apiKey)
|
if (res.data.apiKey) setNewApiKey(res.data.apiKey);
|
||||||
else closeModal()
|
else closeModal();
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
const e = err as { response?: { data?: { error?: string } } }
|
const e = err as { response?: { data?: { error?: string } } };
|
||||||
setError(e.response?.data?.error ?? 'Failed to create user')
|
setError(e.response?.data?.error ?? 'Failed to create user');
|
||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false)
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleEdit = async (e: React.FormEvent) => {
|
const handleEdit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
if (!selected) return
|
if (!selected) return;
|
||||||
setSubmitting(true)
|
setSubmitting(true);
|
||||||
setError('')
|
setError('');
|
||||||
try {
|
try {
|
||||||
const payload: Record<string, string> = {
|
const payload: Record<string, string> = {
|
||||||
email: form.email,
|
email: form.email,
|
||||||
displayName: form.displayName,
|
displayName: form.displayName,
|
||||||
role: form.role,
|
role: form.role,
|
||||||
}
|
};
|
||||||
if (form.password) payload.password = form.password
|
if (form.password) payload.password = form.password;
|
||||||
await api.patch(`/users/${selected.id}`, payload)
|
await api.patch(`/users/${selected.id}`, payload);
|
||||||
closeModal()
|
closeModal();
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
const e = err as { response?: { data?: { error?: string } } }
|
const e = err as { response?: { data?: { error?: string } } };
|
||||||
setError(e.response?.data?.error ?? 'Failed to update user')
|
setError(e.response?.data?.error ?? 'Failed to update user');
|
||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false)
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleDelete = async (u: User) => {
|
const handleDelete = async (u: User) => {
|
||||||
if (!confirm(`Delete user "${u.displayName}"?`)) return
|
if (!confirm(`Delete user "${u.displayName}"?`)) return;
|
||||||
await api.delete(`/users/${u.id}`)
|
await api.delete(`/users/${u.id}`);
|
||||||
fetchUsers()
|
fetchUsers();
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleRegenerateKey = async (u: User) => {
|
const handleRegenerateKey = async (u: User) => {
|
||||||
if (!confirm(`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`)) return
|
if (
|
||||||
const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true })
|
!confirm(
|
||||||
setNewApiKey(res.data.apiKey ?? null)
|
`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`,
|
||||||
setSelected(u)
|
)
|
||||||
setModal('edit')
|
)
|
||||||
}
|
return;
|
||||||
|
const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true });
|
||||||
|
setNewApiKey(res.data.apiKey ?? null);
|
||||||
|
setSelected(u);
|
||||||
|
setModal('edit');
|
||||||
|
};
|
||||||
|
|
||||||
const copyToClipboard = (key: string) => {
|
const copyToClipboard = (key: string) => {
|
||||||
navigator.clipboard.writeText(key)
|
navigator.clipboard.writeText(key);
|
||||||
setCopiedKey(key)
|
setCopiedKey(key);
|
||||||
setTimeout(() => setCopiedKey(null), 2000)
|
setTimeout(() => setCopiedKey(null), 2000);
|
||||||
}
|
};
|
||||||
|
|
||||||
const inputClass =
|
const inputClass =
|
||||||
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
|
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
|
||||||
const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
|
const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout
|
<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 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 text-gray-500 font-mono text-xs">{u.username}</td>
|
||||||
<td className="px-5 py-3">
|
<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]}
|
{ROLE_LABELS[u.role]}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
@@ -237,7 +252,7 @@ export default function AdminUsers() {
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-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">
|
<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>
|
</p>
|
||||||
<div className="flex items-center gap-2">
|
<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">
|
<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>
|
</Modal>
|
||||||
)}
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+53
-53
@@ -1,74 +1,74 @@
|
|||||||
export type Role = 'ADMIN' | 'AGENT' | 'USER' | 'SERVICE'
|
export type Role = 'ADMIN' | 'AGENT' | 'USER' | 'SERVICE';
|
||||||
export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED'
|
export type TicketStatus = 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED';
|
||||||
|
|
||||||
export interface User {
|
export interface User {
|
||||||
id: string
|
id: string;
|
||||||
username: string
|
username: string;
|
||||||
displayName: string
|
displayName: string;
|
||||||
email: string
|
email: string;
|
||||||
role: Role
|
role: Role;
|
||||||
apiKey?: string
|
apiKey?: string;
|
||||||
createdAt?: string
|
createdAt?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Category {
|
export interface Category {
|
||||||
id: string
|
id: string;
|
||||||
name: string
|
name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CTIType {
|
export interface CTIType {
|
||||||
id: string
|
id: string;
|
||||||
name: string
|
name: string;
|
||||||
categoryId: string
|
categoryId: string;
|
||||||
category?: Category
|
category?: Category;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Item {
|
export interface Item {
|
||||||
id: string
|
id: string;
|
||||||
name: string
|
name: string;
|
||||||
typeId: string
|
typeId: string;
|
||||||
type?: CTIType & { category?: Category }
|
type?: CTIType & { category?: Category };
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Comment {
|
export interface Comment {
|
||||||
id: string
|
id: string;
|
||||||
body: string
|
body: string;
|
||||||
ticketId: string
|
ticketId: string;
|
||||||
authorId: string
|
authorId: string;
|
||||||
author: Pick<User, 'id' | 'username' | 'displayName'>
|
author: Pick<User, 'id' | 'username' | 'displayName'>;
|
||||||
createdAt: string
|
createdAt: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AuditLog {
|
export interface AuditLog {
|
||||||
id: string
|
id: string;
|
||||||
ticketId: string
|
ticketId: string;
|
||||||
userId: string
|
userId: string;
|
||||||
action: string
|
action: string;
|
||||||
detail: string | null
|
detail: string | null;
|
||||||
createdAt: string
|
createdAt: string;
|
||||||
user: Pick<User, 'id' | 'username' | 'displayName'>
|
user: Pick<User, 'id' | 'username' | 'displayName'>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Ticket {
|
export interface Ticket {
|
||||||
id: string
|
id: string;
|
||||||
displayId: string
|
displayId: string;
|
||||||
title: string
|
title: string;
|
||||||
overview: string
|
overview: string;
|
||||||
severity: number
|
severity: number;
|
||||||
status: TicketStatus
|
status: TicketStatus;
|
||||||
categoryId: string
|
categoryId: string;
|
||||||
typeId: string
|
typeId: string;
|
||||||
itemId: string
|
itemId: string;
|
||||||
assigneeId: string | null
|
assigneeId: string | null;
|
||||||
createdById: string
|
createdById: string;
|
||||||
resolvedAt: string | null
|
resolvedAt: string | null;
|
||||||
createdAt: string
|
createdAt: string;
|
||||||
updatedAt: string
|
updatedAt: string;
|
||||||
category: Category
|
category: Category;
|
||||||
type: CTIType
|
type: CTIType;
|
||||||
item: Item
|
item: Item;
|
||||||
assignee: Pick<User, 'id' | 'username' | 'displayName'> | null
|
assignee: Pick<User, 'id' | 'username' | 'displayName'> | null;
|
||||||
createdBy: Pick<User, 'id' | 'username' | 'displayName'>
|
createdBy: Pick<User, 'id' | 'username' | 'displayName'>;
|
||||||
comments?: Comment[]
|
comments?: Comment[];
|
||||||
_count?: { comments: number }
|
_count?: { comments: number };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,4 +5,4 @@ export default {
|
|||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite';
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
@@ -8,4 +8,4 @@ export default defineConfig({
|
|||||||
'/api': 'http://localhost:3000',
|
'/api': 'http://localhost:3000',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|||||||
+2
-2
@@ -15,7 +15,7 @@ services:
|
|||||||
volumes:
|
volumes:
|
||||||
- postgres_data:/var/lib/postgresql/data
|
- postgres_data:/var/lib/postgresql/data
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD-SHELL", "pg_isready -U postgres"]
|
test: ['CMD-SHELL', 'pg_isready -U postgres']
|
||||||
interval: 5s
|
interval: 5s
|
||||||
timeout: 5s
|
timeout: 5s
|
||||||
retries: 5
|
retries: 5
|
||||||
@@ -40,7 +40,7 @@ services:
|
|||||||
image: ${REGISTRY}/josh/ticketing-client:${TAG:-latest}
|
image: ${REGISTRY}/josh/ticketing-client:${TAG:-latest}
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
- "${PORT:-3080}:80"
|
- '${PORT:-3080}:80'
|
||||||
depends_on:
|
depends_on:
|
||||||
- server
|
- server
|
||||||
networks:
|
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:migrate": "prisma migrate dev",
|
||||||
"db:push": "prisma db push",
|
"db:push": "prisma db push",
|
||||||
"db:generate": "prisma generate",
|
"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": {
|
"dependencies": {
|
||||||
"@prisma/client": "^5.22.0",
|
"@prisma/client": "^5.22.0",
|
||||||
@@ -18,8 +21,12 @@
|
|||||||
"dotenv": "^16.4.7",
|
"dotenv": "^16.4.7",
|
||||||
"express": "^4.21.2",
|
"express": "^4.21.2",
|
||||||
"express-async-errors": "^3.1.0",
|
"express-async-errors": "^3.1.0",
|
||||||
|
"express-rate-limit": "^7.5.0",
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
"node-cron": "^3.0.3",
|
"node-cron": "^3.0.3",
|
||||||
|
"pino": "^9.5.0",
|
||||||
|
"pino-http": "^10.3.0",
|
||||||
|
"pino-pretty": "^13.0.0",
|
||||||
"zod": "^3.23.8"
|
"zod": "^3.23.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -29,8 +36,11 @@
|
|||||||
"@types/jsonwebtoken": "^9.0.7",
|
"@types/jsonwebtoken": "^9.0.7",
|
||||||
"@types/node": "^22.10.0",
|
"@types/node": "^22.10.0",
|
||||||
"@types/node-cron": "^3.0.11",
|
"@types/node-cron": "^3.0.11",
|
||||||
|
"@types/supertest": "^6.0.2",
|
||||||
"prisma": "^5.22.0",
|
"prisma": "^5.22.0",
|
||||||
|
"supertest": "^7.0.0",
|
||||||
"tsx": "^4.19.2",
|
"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 { PrismaClient } from '@prisma/client';
|
||||||
import bcrypt from 'bcryptjs'
|
import bcrypt from 'bcryptjs';
|
||||||
import crypto from 'crypto'
|
import crypto from 'crypto';
|
||||||
|
|
||||||
const prisma = new PrismaClient()
|
const prisma = new PrismaClient();
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
console.log('Seeding database...')
|
console.log('Seeding database...');
|
||||||
|
|
||||||
// Admin user
|
// Admin user
|
||||||
await prisma.user.upsert({
|
await prisma.user.upsert({
|
||||||
@@ -18,11 +18,11 @@ async function main() {
|
|||||||
passwordHash: await bcrypt.hash('admin123', 12),
|
passwordHash: await bcrypt.hash('admin123', 12),
|
||||||
role: 'ADMIN',
|
role: 'ADMIN',
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
// Goddard — n8n service account
|
// Goddard — n8n service account
|
||||||
const apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`
|
const apiKey = `sk_${crypto.randomBytes(32).toString('hex')}`;
|
||||||
const goddard = await prisma.user.upsert({
|
await prisma.user.upsert({
|
||||||
where: { username: 'goddard' },
|
where: { username: 'goddard' },
|
||||||
update: {},
|
update: {},
|
||||||
create: {
|
create: {
|
||||||
@@ -33,70 +33,73 @@ async function main() {
|
|||||||
role: 'SERVICE',
|
role: 'SERVICE',
|
||||||
apiKey,
|
apiKey,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const existingGoddard = await prisma.user.findUnique({ where: { username: 'goddard' } })
|
const existingGoddard = await prisma.user.findUnique({ where: { username: 'goddard' } });
|
||||||
console.log(`\nGoddard API key: ${existingGoddard?.apiKey ?? apiKey}`)
|
console.log(`\nGoddard API key: ${existingGoddard?.apiKey ?? apiKey}`);
|
||||||
console.log('(This key is only displayed once on first seed — copy it now)\n')
|
console.log('(This key is only displayed once on first seed — copy it now)\n');
|
||||||
|
|
||||||
// Sample CTI structure
|
// Sample CTI structure
|
||||||
const theWrightServer = await prisma.category.upsert({
|
const theWrightServer = await prisma.category.upsert({
|
||||||
where: { name: 'TheWrightServer' },
|
where: { name: 'TheWrightServer' },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'TheWrightServer' },
|
create: { name: 'TheWrightServer' },
|
||||||
})
|
});
|
||||||
|
|
||||||
const homelab = await prisma.category.upsert({
|
const homelab = await prisma.category.upsert({
|
||||||
where: { name: 'Homelab' },
|
where: { name: 'Homelab' },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Homelab' },
|
create: { name: 'Homelab' },
|
||||||
})
|
});
|
||||||
|
|
||||||
const automation = await prisma.type.upsert({
|
const automation = await prisma.type.upsert({
|
||||||
where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Automation' } },
|
where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Automation' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Automation', categoryId: theWrightServer.id },
|
create: { name: 'Automation', categoryId: theWrightServer.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
const media = await prisma.type.upsert({
|
const media = await prisma.type.upsert({
|
||||||
where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Media' } },
|
where: { categoryId_name: { categoryId: theWrightServer.id, name: 'Media' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Media', categoryId: theWrightServer.id },
|
create: { name: 'Media', categoryId: theWrightServer.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
const infrastructure = await prisma.type.upsert({
|
const infrastructure = await prisma.type.upsert({
|
||||||
where: { categoryId_name: { categoryId: homelab.id, name: 'Infrastructure' } },
|
where: { categoryId_name: { categoryId: homelab.id, name: 'Infrastructure' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Infrastructure', categoryId: homelab.id },
|
create: { name: 'Infrastructure', categoryId: homelab.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
await prisma.item.upsert({
|
await prisma.item.upsert({
|
||||||
where: { typeId_name: { typeId: automation.id, name: 'Backup' } },
|
where: { typeId_name: { typeId: automation.id, name: 'Backup' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Backup', typeId: automation.id },
|
create: { name: 'Backup', typeId: automation.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
await prisma.item.upsert({
|
await prisma.item.upsert({
|
||||||
where: { typeId_name: { typeId: automation.id, name: 'Sync' } },
|
where: { typeId_name: { typeId: automation.id, name: 'Sync' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Sync', typeId: automation.id },
|
create: { name: 'Sync', typeId: automation.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
await prisma.item.upsert({
|
await prisma.item.upsert({
|
||||||
where: { typeId_name: { typeId: media.id, name: 'Plex' } },
|
where: { typeId_name: { typeId: media.id, name: 'Plex' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Plex', typeId: media.id },
|
create: { name: 'Plex', typeId: media.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
await prisma.item.upsert({
|
await prisma.item.upsert({
|
||||||
where: { typeId_name: { typeId: infrastructure.id, name: 'Proxmox' } },
|
where: { typeId_name: { typeId: infrastructure.id, name: 'Proxmox' } },
|
||||||
update: {},
|
update: {},
|
||||||
create: { name: 'Proxmox', typeId: infrastructure.id },
|
create: { name: 'Proxmox', typeId: infrastructure.id },
|
||||||
})
|
});
|
||||||
|
|
||||||
console.log('Seed complete.')
|
console.log('Seed complete.');
|
||||||
}
|
}
|
||||||
|
|
||||||
main()
|
main()
|
||||||
.catch((e) => { console.error(e); process.exit(1) })
|
.catch((e) => {
|
||||||
.finally(() => prisma.$disconnect())
|
console.error(e);
|
||||||
|
process.exit(1);
|
||||||
|
})
|
||||||
|
.finally(() => prisma.$disconnect());
|
||||||
|
|||||||
+26
-26
@@ -1,41 +1,41 @@
|
|||||||
import 'express-async-errors'
|
import 'express-async-errors';
|
||||||
import express from 'express'
|
import express from 'express';
|
||||||
import cors from 'cors'
|
import cors from 'cors';
|
||||||
import dotenv from 'dotenv'
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
import authRoutes from './routes/auth'
|
import authRoutes from './routes/auth';
|
||||||
import ticketRoutes from './routes/tickets'
|
import ticketRoutes from './routes/tickets';
|
||||||
import ctiRoutes from './routes/cti'
|
import ctiRoutes from './routes/cti';
|
||||||
import userRoutes from './routes/users'
|
import userRoutes from './routes/users';
|
||||||
import { authenticate } from './middleware/auth'
|
import { authenticate } from './middleware/auth';
|
||||||
import { errorHandler } from './middleware/errorHandler'
|
import { errorHandler } from './middleware/errorHandler';
|
||||||
import { startAutoCloseJob } from './jobs/autoClose'
|
import { startAutoCloseJob } from './jobs/autoClose';
|
||||||
|
|
||||||
dotenv.config()
|
dotenv.config();
|
||||||
|
|
||||||
if (!process.env.JWT_SECRET) {
|
if (!process.env.JWT_SECRET) {
|
||||||
console.error('FATAL: JWT_SECRET is not set')
|
console.error('FATAL: JWT_SECRET is not set');
|
||||||
process.exit(1)
|
process.exit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
const app = express()
|
const app = express();
|
||||||
|
|
||||||
app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }))
|
app.use(cors({ origin: process.env.CLIENT_URL || 'http://localhost:5173' }));
|
||||||
app.use(express.json())
|
app.use(express.json());
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
app.use('/api/auth', authRoutes)
|
app.use('/api/auth', authRoutes);
|
||||||
|
|
||||||
// Protected
|
// Protected
|
||||||
app.use('/api/tickets', authenticate, ticketRoutes)
|
app.use('/api/tickets', authenticate, ticketRoutes);
|
||||||
app.use('/api/cti', authenticate, ctiRoutes)
|
app.use('/api/cti', authenticate, ctiRoutes);
|
||||||
app.use('/api/users', authenticate, userRoutes)
|
app.use('/api/users', authenticate, userRoutes);
|
||||||
|
|
||||||
app.use(errorHandler)
|
app.use(errorHandler);
|
||||||
|
|
||||||
startAutoCloseJob()
|
startAutoCloseJob();
|
||||||
|
|
||||||
const PORT = Number(process.env.PORT) || 3000
|
const PORT = Number(process.env.PORT) || 3000;
|
||||||
app.listen(PORT, () => {
|
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 cron from 'node-cron';
|
||||||
import prisma from '../lib/prisma'
|
import prisma from '../lib/prisma';
|
||||||
|
|
||||||
export function startAutoCloseJob() {
|
export function startAutoCloseJob() {
|
||||||
// Run every hour — closes RESOLVED tickets that have been resolved for 14+ days
|
// Run every hour — closes RESOLVED tickets that have been resolved for 14+ days
|
||||||
cron.schedule('0 * * * *', async () => {
|
cron.schedule('0 * * * *', async () => {
|
||||||
const twoWeeksAgo = new Date()
|
const twoWeeksAgo = new Date();
|
||||||
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
|
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
|
||||||
|
|
||||||
const result = await prisma.ticket.updateMany({
|
const result = await prisma.ticket.updateMany({
|
||||||
where: {
|
where: {
|
||||||
@@ -13,12 +13,12 @@ export function startAutoCloseJob() {
|
|||||||
resolvedAt: { lte: twoWeeksAgo },
|
resolvedAt: { lte: twoWeeksAgo },
|
||||||
},
|
},
|
||||||
data: { status: 'CLOSED' },
|
data: { status: 'CLOSED' },
|
||||||
})
|
});
|
||||||
|
|
||||||
if (result.count > 0) {
|
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 { Request, Response, NextFunction } from 'express';
|
||||||
import jwt from 'jsonwebtoken'
|
import jwt from 'jsonwebtoken';
|
||||||
import prisma from '../lib/prisma'
|
import prisma from '../lib/prisma';
|
||||||
|
|
||||||
export interface AuthRequest extends Request {
|
export interface AuthRequest extends Request {
|
||||||
user?: {
|
user?: {
|
||||||
id: string
|
id: string;
|
||||||
role: string
|
role: string;
|
||||||
username: string
|
username: string;
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const authenticate = async (
|
export const authenticate = async (req: AuthRequest, res: Response, next: NextFunction) => {
|
||||||
req: AuthRequest,
|
const apiKey = req.headers['x-api-key'] as string | undefined;
|
||||||
res: Response,
|
|
||||||
next: NextFunction
|
|
||||||
) => {
|
|
||||||
const apiKey = req.headers['x-api-key'] as string | undefined
|
|
||||||
|
|
||||||
if (apiKey) {
|
if (apiKey) {
|
||||||
const user = await prisma.user.findUnique({ where: { apiKey } })
|
const user = await prisma.user.findUnique({ where: { apiKey } });
|
||||||
if (!user || user.role !== 'SERVICE') {
|
if (!user || user.role !== 'SERVICE') {
|
||||||
return res.status(401).json({ error: 'Invalid API key' })
|
return res.status(401).json({ error: 'Invalid API key' });
|
||||||
}
|
}
|
||||||
req.user = { id: user.id, role: user.role, username: user.username }
|
req.user = { id: user.id, role: user.role, username: user.username };
|
||||||
return next()
|
return next();
|
||||||
}
|
}
|
||||||
|
|
||||||
const authHeader = req.headers.authorization
|
const authHeader = req.headers.authorization;
|
||||||
if (!authHeader?.startsWith('Bearer ')) {
|
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 {
|
try {
|
||||||
const payload = jwt.verify(token, process.env.JWT_SECRET!) as {
|
const payload = jwt.verify(token, process.env.JWT_SECRET!) as {
|
||||||
id: string
|
id: string;
|
||||||
role: string
|
role: string;
|
||||||
username: string
|
username: string;
|
||||||
}
|
};
|
||||||
req.user = payload
|
req.user = payload;
|
||||||
next()
|
next();
|
||||||
} catch {
|
} catch {
|
||||||
return res.status(401).json({ error: 'Invalid or expired token' })
|
return res.status(401).json({ error: 'Invalid or expired token' });
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export const requireAdmin = (
|
export const requireAdmin = (req: AuthRequest, res: Response, next: NextFunction) => {
|
||||||
req: AuthRequest,
|
|
||||||
res: Response,
|
|
||||||
next: NextFunction
|
|
||||||
) => {
|
|
||||||
if (req.user?.role !== 'ADMIN') {
|
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
|
// Blocks USER role — allows ADMIN, AGENT, SERVICE
|
||||||
export const requireAgent = (
|
export const requireAgent = (req: AuthRequest, res: Response, next: NextFunction) => {
|
||||||
req: AuthRequest,
|
|
||||||
res: Response,
|
|
||||||
next: NextFunction
|
|
||||||
) => {
|
|
||||||
if (req.user?.role === 'USER') {
|
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 { Request, Response, NextFunction } from 'express';
|
||||||
import { ZodError } from 'zod'
|
import { ZodError } from 'zod';
|
||||||
|
|
||||||
export function errorHandler(
|
type ErrorLike = {
|
||||||
err: any,
|
code?: string;
|
||||||
req: Request,
|
status?: number;
|
||||||
res: Response,
|
statusCode?: number;
|
||||||
next: NextFunction
|
message?: string;
|
||||||
) {
|
};
|
||||||
console.error(err)
|
|
||||||
|
export function errorHandler(err: unknown, _req: Request, res: Response, _next: NextFunction) {
|
||||||
|
console.error(err);
|
||||||
|
|
||||||
if (err instanceof ZodError) {
|
if (err instanceof ZodError) {
|
||||||
return res.status(400).json({ error: 'Validation error', details: err.flatten() })
|
return res.status(400).json({ error: 'Validation error', details: err.flatten() });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prisma unique constraint violation
|
const e = (err ?? {}) as ErrorLike;
|
||||||
if (err.code === 'P2002') {
|
|
||||||
return res.status(409).json({ error: 'A record with that value already exists' })
|
if (e.code === 'P2002') {
|
||||||
|
return res.status(409).json({ error: 'A record with that value already exists' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prisma record not found
|
if (e.code === 'P2025') {
|
||||||
if (err.code === 'P2025') {
|
return res.status(404).json({ error: 'Record not found' });
|
||||||
return res.status(404).json({ error: 'Record not found' })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const status = err.status || err.statusCode || 500
|
const status = e.status || e.statusCode || 500;
|
||||||
const message = err.message || 'Internal server error'
|
const message = e.message || 'Internal server error';
|
||||||
res.status(status).json({ error: message })
|
res.status(status).json({ error: message });
|
||||||
}
|
}
|
||||||
|
|||||||
+21
-21
@@ -1,34 +1,34 @@
|
|||||||
import { Router } from 'express'
|
import { Router } from 'express';
|
||||||
import bcrypt from 'bcryptjs'
|
import bcrypt from 'bcryptjs';
|
||||||
import jwt from 'jsonwebtoken'
|
import jwt from 'jsonwebtoken';
|
||||||
import { z } from 'zod'
|
import { z } from 'zod';
|
||||||
import prisma from '../lib/prisma'
|
import prisma from '../lib/prisma';
|
||||||
import { authenticate, AuthRequest } from '../middleware/auth'
|
import { authenticate, AuthRequest } from '../middleware/auth';
|
||||||
|
|
||||||
const router = Router()
|
const router = Router();
|
||||||
|
|
||||||
const loginSchema = z.object({
|
const loginSchema = z.object({
|
||||||
username: z.string().min(1),
|
username: z.string().min(1),
|
||||||
password: z.string().min(1),
|
password: z.string().min(1),
|
||||||
})
|
});
|
||||||
|
|
||||||
router.post('/login', async (req, res) => {
|
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))) {
|
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') {
|
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(
|
const token = jwt.sign(
|
||||||
{ id: user.id, role: user.role, username: user.username },
|
{ id: user.id, role: user.role, username: user.username },
|
||||||
process.env.JWT_SECRET!,
|
process.env.JWT_SECRET!,
|
||||||
{ expiresIn: '24h' }
|
{ expiresIn: '24h' },
|
||||||
)
|
);
|
||||||
|
|
||||||
res.json({
|
res.json({
|
||||||
token,
|
token,
|
||||||
@@ -39,16 +39,16 @@ router.post('/login', async (req, res) => {
|
|||||||
email: user.email,
|
email: user.email,
|
||||||
role: user.role,
|
role: user.role,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
router.get('/me', authenticate, async (req: AuthRequest, res) => {
|
router.get('/me', authenticate, async (req: AuthRequest, res) => {
|
||||||
const user = await prisma.user.findUnique({
|
const user = await prisma.user.findUnique({
|
||||||
where: { id: req.user!.id },
|
where: { id: req.user!.id },
|
||||||
select: { id: true, username: true, displayName: true, email: true, role: true },
|
select: { id: true, username: true, displayName: true, email: true, role: true },
|
||||||
})
|
});
|
||||||
if (!user) return res.status(404).json({ error: 'User not found' })
|
if (!user) return res.status(404).json({ error: 'User not found' });
|
||||||
res.json(user)
|
res.json(user);
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router
|
export default router;
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
import { Router } from 'express'
|
import { Router } from 'express';
|
||||||
import { z } from 'zod'
|
import { z } from 'zod';
|
||||||
import prisma from '../lib/prisma'
|
import prisma from '../lib/prisma';
|
||||||
import { AuthRequest } from '../middleware/auth'
|
import { AuthRequest } from '../middleware/auth';
|
||||||
|
|
||||||
const router = Router({ mergeParams: true })
|
const router = Router({ mergeParams: true });
|
||||||
|
|
||||||
const commentSchema = z.object({
|
const commentSchema = z.object({
|
||||||
body: z.string().min(1),
|
body: z.string().min(1),
|
||||||
})
|
});
|
||||||
|
|
||||||
router.post('/', async (req: AuthRequest, res) => {
|
router.post('/', async (req: AuthRequest, res) => {
|
||||||
const { body } = commentSchema.parse(req.body)
|
const { body } = commentSchema.parse(req.body);
|
||||||
const ticketId = (req.params as Record<string, string>).ticketId
|
const ticketId = (req.params as Record<string, string>).ticketId;
|
||||||
|
|
||||||
const ticket = await prisma.ticket.findFirst({
|
const ticket = await prisma.ticket.findFirst({
|
||||||
where: { OR: [{ id: ticketId }, { displayId: ticketId }] },
|
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([
|
const [comment] = await prisma.$transaction([
|
||||||
prisma.comment.create({
|
prisma.comment.create({
|
||||||
@@ -26,19 +26,19 @@ router.post('/', async (req: AuthRequest, res) => {
|
|||||||
prisma.auditLog.create({
|
prisma.auditLog.create({
|
||||||
data: { ticketId: ticket.id, userId: req.user!.id, action: 'COMMENT_ADDED', detail: body },
|
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) => {
|
router.delete('/:commentId', async (req: AuthRequest, res) => {
|
||||||
const comment = await prisma.comment.findUnique({
|
const comment = await prisma.comment.findUnique({
|
||||||
where: { id: req.params.commentId },
|
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') {
|
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([
|
await prisma.$transaction([
|
||||||
@@ -51,9 +51,9 @@ router.delete('/:commentId', async (req: AuthRequest, res) => {
|
|||||||
detail: comment.body,
|
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 { Router } from 'express';
|
||||||
import { z } from 'zod'
|
import { z } from 'zod';
|
||||||
import prisma from '../lib/prisma'
|
import prisma from '../lib/prisma';
|
||||||
import { requireAdmin } from '../middleware/auth'
|
import { requireAdmin } from '../middleware/auth';
|
||||||
|
|
||||||
const router = Router()
|
const router = Router();
|
||||||
|
|
||||||
const nameSchema = z.object({ name: z.string().min(1).max(100) })
|
const nameSchema = z.object({ name: z.string().min(1).max(100) });
|
||||||
|
|
||||||
// ── Categories ────────────────────────────────────────────────────────────────
|
// ── Categories ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
router.get('/categories', async (_req, res) => {
|
router.get('/categories', async (_req, res) => {
|
||||||
const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } })
|
const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } });
|
||||||
res.json(categories)
|
res.json(categories);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.post('/categories', requireAdmin, async (req, res) => {
|
router.post('/categories', requireAdmin, async (req, res) => {
|
||||||
const { name } = nameSchema.parse(req.body)
|
const { name } = nameSchema.parse(req.body);
|
||||||
const category = await prisma.category.create({ data: { name } })
|
const category = await prisma.category.create({ data: { name } });
|
||||||
res.status(201).json(category)
|
res.status(201).json(category);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.put('/categories/:id', requireAdmin, async (req, res) => {
|
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({
|
const category = await prisma.category.update({
|
||||||
where: { id: req.params.id },
|
where: { id: req.params.id },
|
||||||
data: { name },
|
data: { name },
|
||||||
})
|
});
|
||||||
res.json(category)
|
res.json(category);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.delete('/categories/:id', requireAdmin, async (req, res) => {
|
router.delete('/categories/:id', requireAdmin, async (req, res) => {
|
||||||
await prisma.category.delete({ where: { id: req.params.id } })
|
await prisma.category.delete({ where: { id: req.params.id } });
|
||||||
res.status(204).send()
|
res.status(204).send();
|
||||||
})
|
});
|
||||||
|
|
||||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
router.get('/types', async (req, res) => {
|
router.get('/types', async (req, res) => {
|
||||||
const { categoryId } = req.query
|
const { categoryId } = req.query;
|
||||||
const types = await prisma.type.findMany({
|
const types = await prisma.type.findMany({
|
||||||
where: categoryId ? { categoryId: categoryId as string } : undefined,
|
where: categoryId ? { categoryId: categoryId as string } : undefined,
|
||||||
include: { category: true },
|
include: { category: true },
|
||||||
orderBy: { name: 'asc' },
|
orderBy: { name: 'asc' },
|
||||||
})
|
});
|
||||||
res.json(types)
|
res.json(types);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.post('/types', requireAdmin, async (req, res) => {
|
router.post('/types', requireAdmin, async (req, res) => {
|
||||||
const { name, categoryId } = z
|
const { name, categoryId } = z
|
||||||
.object({ name: z.string().min(1).max(100), categoryId: z.string().min(1) })
|
.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({
|
const type = await prisma.type.create({
|
||||||
data: { name, categoryId },
|
data: { name, categoryId },
|
||||||
include: { category: true },
|
include: { category: true },
|
||||||
})
|
});
|
||||||
res.status(201).json(type)
|
res.status(201).json(type);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.put('/types/:id', requireAdmin, async (req, res) => {
|
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({
|
const type = await prisma.type.update({
|
||||||
where: { id: req.params.id },
|
where: { id: req.params.id },
|
||||||
data: { name },
|
data: { name },
|
||||||
include: { category: true },
|
include: { category: true },
|
||||||
})
|
});
|
||||||
res.json(type)
|
res.json(type);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.delete('/types/:id', requireAdmin, async (req, res) => {
|
router.delete('/types/:id', requireAdmin, async (req, res) => {
|
||||||
await prisma.type.delete({ where: { id: req.params.id } })
|
await prisma.type.delete({ where: { id: req.params.id } });
|
||||||
res.status(204).send()
|
res.status(204).send();
|
||||||
})
|
});
|
||||||
|
|
||||||
// ── Items ─────────────────────────────────────────────────────────────────────
|
// ── Items ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
router.get('/items', async (req, res) => {
|
router.get('/items', async (req, res) => {
|
||||||
const { typeId } = req.query
|
const { typeId } = req.query;
|
||||||
const items = await prisma.item.findMany({
|
const items = await prisma.item.findMany({
|
||||||
where: typeId ? { typeId: typeId as string } : undefined,
|
where: typeId ? { typeId: typeId as string } : undefined,
|
||||||
include: { type: { include: { category: true } } },
|
include: { type: { include: { category: true } } },
|
||||||
orderBy: { name: 'asc' },
|
orderBy: { name: 'asc' },
|
||||||
})
|
});
|
||||||
res.json(items)
|
res.json(items);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.post('/items', requireAdmin, async (req, res) => {
|
router.post('/items', requireAdmin, async (req, res) => {
|
||||||
const { name, typeId } = z
|
const { name, typeId } = z
|
||||||
.object({ name: z.string().min(1).max(100), typeId: z.string().min(1) })
|
.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({
|
const item = await prisma.item.create({
|
||||||
data: { name, typeId },
|
data: { name, typeId },
|
||||||
include: { type: { include: { category: true } } },
|
include: { type: { include: { category: true } } },
|
||||||
})
|
});
|
||||||
res.status(201).json(item)
|
res.status(201).json(item);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.put('/items/:id', requireAdmin, async (req, res) => {
|
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({
|
const item = await prisma.item.update({
|
||||||
where: { id: req.params.id },
|
where: { id: req.params.id },
|
||||||
data: { name },
|
data: { name },
|
||||||
include: { type: { include: { category: true } } },
|
include: { type: { include: { category: true } } },
|
||||||
})
|
});
|
||||||
res.json(item)
|
res.json(item);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.delete('/items/:id', requireAdmin, async (req, res) => {
|
router.delete('/items/:id', requireAdmin, async (req, res) => {
|
||||||
await prisma.item.delete({ where: { id: req.params.id } })
|
await prisma.item.delete({ where: { id: req.params.id } });
|
||||||
res.status(204).send()
|
res.status(204).send();
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router
|
export default router;
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { Router } from 'express'
|
import { Router } from 'express';
|
||||||
import { z } from 'zod'
|
import { z } from 'zod';
|
||||||
import prisma from '../lib/prisma'
|
import prisma from '../lib/prisma';
|
||||||
import { requireAdmin, requireAgent, AuthRequest } from '../middleware/auth'
|
import { requireAdmin, requireAgent, AuthRequest } from '../middleware/auth';
|
||||||
import commentRouter from './comments'
|
import commentRouter from './comments';
|
||||||
|
|
||||||
const router = Router()
|
const router = Router();
|
||||||
|
|
||||||
const ticketInclude = {
|
const ticketInclude = {
|
||||||
category: true,
|
category: true,
|
||||||
@@ -16,21 +16,21 @@ const ticketInclude = {
|
|||||||
include: { author: { select: { id: true, username: true, displayName: true } } },
|
include: { author: { select: { id: true, username: true, displayName: true } } },
|
||||||
orderBy: { createdAt: 'asc' as const },
|
orderBy: { createdAt: 'asc' as const },
|
||||||
},
|
},
|
||||||
} as const
|
} as const;
|
||||||
|
|
||||||
const STATUS_LABELS: Record<string, string> = {
|
const STATUS_LABELS: Record<string, string> = {
|
||||||
OPEN: 'Open',
|
OPEN: 'Open',
|
||||||
IN_PROGRESS: 'In Progress',
|
IN_PROGRESS: 'In Progress',
|
||||||
RESOLVED: 'Resolved',
|
RESOLVED: 'Resolved',
|
||||||
CLOSED: 'Closed',
|
CLOSED: 'Closed',
|
||||||
}
|
};
|
||||||
|
|
||||||
async function generateDisplayId(): Promise<string> {
|
async function generateDisplayId(): Promise<string> {
|
||||||
while (true) {
|
while (true) {
|
||||||
const num = Math.floor(Math.random() * 900_000_000) + 100_000_000
|
const num = Math.floor(Math.random() * 900_000_000) + 100_000_000;
|
||||||
const displayId = `V${num}`
|
const displayId = `V${num}`;
|
||||||
const exists = await prisma.ticket.findUnique({ where: { displayId } })
|
const exists = await prisma.ticket.findUnique({ where: { displayId } });
|
||||||
if (!exists) return displayId
|
if (!exists) return displayId;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -38,7 +38,7 @@ async function generateDisplayId(): Promise<string> {
|
|||||||
function findByIdOrDisplay(idOrDisplay: string) {
|
function findByIdOrDisplay(idOrDisplay: string) {
|
||||||
return prisma.ticket.findFirst({
|
return prisma.ticket.findFirst({
|
||||||
where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
|
where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const createSchema = z.object({
|
const createSchema = z.object({
|
||||||
@@ -49,7 +49,7 @@ const createSchema = z.object({
|
|||||||
typeId: z.string().min(1),
|
typeId: z.string().min(1),
|
||||||
itemId: z.string().min(1),
|
itemId: z.string().min(1),
|
||||||
assigneeId: z.string().optional(),
|
assigneeId: z.string().optional(),
|
||||||
})
|
});
|
||||||
|
|
||||||
const updateSchema = z.object({
|
const updateSchema = z.object({
|
||||||
title: z.string().min(1).max(255).optional(),
|
title: z.string().min(1).max(255).optional(),
|
||||||
@@ -60,28 +60,28 @@ const updateSchema = z.object({
|
|||||||
typeId: z.string().min(1).optional(),
|
typeId: z.string().min(1).optional(),
|
||||||
itemId: z.string().min(1).optional(),
|
itemId: z.string().min(1).optional(),
|
||||||
assigneeId: z.string().nullable().optional(),
|
assigneeId: z.string().nullable().optional(),
|
||||||
})
|
});
|
||||||
|
|
||||||
// Mount comment sub-router
|
// Mount comment sub-router
|
||||||
router.use('/:ticketId/comments', commentRouter)
|
router.use('/:ticketId/comments', commentRouter);
|
||||||
|
|
||||||
// GET /api/tickets
|
// GET /api/tickets
|
||||||
router.get('/', async (req: AuthRequest, res) => {
|
router.get('/', async (req: AuthRequest, res) => {
|
||||||
const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query
|
const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query;
|
||||||
|
|
||||||
const where: Record<string, unknown> = {}
|
const where: Record<string, unknown> = {};
|
||||||
if (status) where.status = status
|
if (status) where.status = status;
|
||||||
if (severity) where.severity = Number(severity)
|
if (severity) where.severity = Number(severity);
|
||||||
if (assigneeId) where.assigneeId = assigneeId
|
if (assigneeId) where.assigneeId = assigneeId;
|
||||||
if (itemId) where.itemId = itemId
|
if (itemId) where.itemId = itemId;
|
||||||
else if (typeId) where.typeId = typeId
|
else if (typeId) where.typeId = typeId;
|
||||||
else if (categoryId) where.categoryId = categoryId
|
else if (categoryId) where.categoryId = categoryId;
|
||||||
if (search) {
|
if (search) {
|
||||||
where.OR = [
|
where.OR = [
|
||||||
{ title: { contains: search as string, mode: 'insensitive' } },
|
{ title: { contains: search as string, mode: 'insensitive' } },
|
||||||
{ overview: { contains: search as string, mode: 'insensitive' } },
|
{ overview: { contains: search as string, mode: 'insensitive' } },
|
||||||
{ displayId: { contains: search as string, mode: 'insensitive' } },
|
{ displayId: { contains: search as string, mode: 'insensitive' } },
|
||||||
]
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
const tickets = await prisma.ticket.findMany({
|
const tickets = await prisma.ticket.findMany({
|
||||||
@@ -95,60 +95,60 @@ router.get('/', async (req: AuthRequest, res) => {
|
|||||||
_count: { select: { comments: true } },
|
_count: { select: { comments: true } },
|
||||||
},
|
},
|
||||||
orderBy: [{ severity: 'asc' }, { createdAt: 'desc' }],
|
orderBy: [{ severity: 'asc' }, { createdAt: 'desc' }],
|
||||||
})
|
});
|
||||||
|
|
||||||
res.json(tickets)
|
res.json(tickets);
|
||||||
})
|
});
|
||||||
|
|
||||||
// GET /api/tickets/:id
|
// GET /api/tickets/:id
|
||||||
router.get('/:id', async (req, res) => {
|
router.get('/:id', async (req, res) => {
|
||||||
const ticket = await prisma.ticket.findFirst({
|
const ticket = await prisma.ticket.findFirst({
|
||||||
where: { OR: [{ id: req.params.id }, { displayId: req.params.id }] },
|
where: { OR: [{ id: req.params.id }, { displayId: req.params.id }] },
|
||||||
include: ticketInclude,
|
include: ticketInclude,
|
||||||
})
|
});
|
||||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||||
res.json(ticket)
|
res.json(ticket);
|
||||||
})
|
});
|
||||||
|
|
||||||
// GET /api/tickets/:id/audit
|
// GET /api/tickets/:id/audit
|
||||||
router.get('/:id/audit', async (req, res) => {
|
router.get('/:id/audit', async (req, res) => {
|
||||||
const ticket = await findByIdOrDisplay(req.params.id)
|
const ticket = await findByIdOrDisplay(req.params.id);
|
||||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||||
|
|
||||||
const logs = await prisma.auditLog.findMany({
|
const logs = await prisma.auditLog.findMany({
|
||||||
where: { ticketId: ticket.id },
|
where: { ticketId: ticket.id },
|
||||||
include: { user: { select: { id: true, username: true, displayName: true } } },
|
include: { user: { select: { id: true, username: true, displayName: true } } },
|
||||||
orderBy: { createdAt: 'desc' },
|
orderBy: { createdAt: 'desc' },
|
||||||
})
|
});
|
||||||
|
|
||||||
res.json(logs)
|
res.json(logs);
|
||||||
})
|
});
|
||||||
|
|
||||||
// POST /api/tickets
|
// POST /api/tickets
|
||||||
router.post('/', requireAgent, async (req: AuthRequest, res) => {
|
router.post('/', requireAgent, async (req: AuthRequest, res) => {
|
||||||
const data = createSchema.parse(req.body)
|
const data = createSchema.parse(req.body);
|
||||||
const displayId = await generateDisplayId()
|
const displayId = await generateDisplayId();
|
||||||
|
|
||||||
const ticket = await prisma.$transaction(async (tx) => {
|
const ticket = await prisma.$transaction(async (tx) => {
|
||||||
const created = await tx.ticket.create({
|
const created = await tx.ticket.create({
|
||||||
data: { displayId, ...data, createdById: req.user!.id },
|
data: { displayId, ...data, createdById: req.user!.id },
|
||||||
})
|
});
|
||||||
await tx.auditLog.create({
|
await tx.auditLog.create({
|
||||||
data: { ticketId: created.id, userId: req.user!.id, action: 'CREATED' },
|
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
|
// PATCH /api/tickets/:id
|
||||||
router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
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
|
// Only admins can set status to CLOSED
|
||||||
if (data.status === 'CLOSED' && req.user?.role !== 'ADMIN') {
|
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({
|
const existing = await prisma.ticket.findFirst({
|
||||||
@@ -159,17 +159,17 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
|||||||
item: true,
|
item: true,
|
||||||
assignee: { select: { displayName: 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
|
// Build audit entries
|
||||||
const auditEntries: { action: string; detail?: string }[] = []
|
const auditEntries: { action: string; detail?: string }[] = [];
|
||||||
|
|
||||||
if (data.status && data.status !== existing.status) {
|
if (data.status && data.status !== existing.status) {
|
||||||
auditEntries.push({
|
auditEntries.push({
|
||||||
action: 'STATUS_CHANGED',
|
action: 'STATUS_CHANGED',
|
||||||
detail: `${STATUS_LABELS[existing.status]} → ${STATUS_LABELS[data.status]}`,
|
detail: `${STATUS_LABELS[existing.status]} → ${STATUS_LABELS[data.status]}`,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if ('assigneeId' in data && data.assigneeId !== existing.assigneeId) {
|
if ('assigneeId' in data && data.assigneeId !== existing.assigneeId) {
|
||||||
@@ -178,25 +178,25 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
|||||||
where: { id: data.assigneeId },
|
where: { id: data.assigneeId },
|
||||||
select: { displayName: true },
|
select: { displayName: true },
|
||||||
})
|
})
|
||||||
: null
|
: null;
|
||||||
auditEntries.push({
|
auditEntries.push({
|
||||||
action: 'ASSIGNEE_CHANGED',
|
action: 'ASSIGNEE_CHANGED',
|
||||||
detail: `${existing.assignee?.displayName ?? 'Unassigned'} → ${newAssignee?.displayName ?? 'Unassigned'}`,
|
detail: `${existing.assignee?.displayName ?? 'Unassigned'} → ${newAssignee?.displayName ?? 'Unassigned'}`,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.severity && data.severity !== existing.severity) {
|
if (data.severity && data.severity !== existing.severity) {
|
||||||
auditEntries.push({
|
auditEntries.push({
|
||||||
action: 'SEVERITY_CHANGED',
|
action: 'SEVERITY_CHANGED',
|
||||||
detail: `SEV ${existing.severity} → SEV ${data.severity}`,
|
detail: `SEV ${existing.severity} → SEV ${data.severity}`,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// CTI rerouting — only log if any CTI field actually changed
|
// CTI rerouting — only log if any CTI field actually changed
|
||||||
const ctiChanged =
|
const ctiChanged =
|
||||||
(data.categoryId && data.categoryId !== existing.categoryId) ||
|
(data.categoryId && data.categoryId !== existing.categoryId) ||
|
||||||
(data.typeId && data.typeId !== existing.typeId) ||
|
(data.typeId && data.typeId !== existing.typeId) ||
|
||||||
(data.itemId && data.itemId !== existing.itemId)
|
(data.itemId && data.itemId !== existing.itemId);
|
||||||
|
|
||||||
if (ctiChanged) {
|
if (ctiChanged) {
|
||||||
const [newCat, newType, newItem] = await Promise.all([
|
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
|
data.itemId && data.itemId !== existing.itemId
|
||||||
? prisma.item.findUnique({ where: { id: data.itemId } })
|
? prisma.item.findUnique({ where: { id: data.itemId } })
|
||||||
: Promise.resolve(existing.item),
|
: Promise.resolve(existing.item),
|
||||||
])
|
]);
|
||||||
auditEntries.push({
|
auditEntries.push({
|
||||||
action: 'REROUTED',
|
action: 'REROUTED',
|
||||||
detail: `${existing.category.name} › ${existing.type.name} › ${existing.item.name} → ${newCat?.name} › ${newType?.name} › ${newItem?.name}`,
|
detail: `${existing.category.name} › ${existing.type.name} › ${existing.item.name} → ${newCat?.name} › ${newType?.name} › ${newItem?.name}`,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.title && data.title !== existing.title) {
|
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) {
|
if (data.overview && data.overview !== existing.overview) {
|
||||||
auditEntries.push({ action: 'OVERVIEW_CHANGED' })
|
auditEntries.push({ action: 'OVERVIEW_CHANGED' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle resolvedAt tracking
|
// Handle resolvedAt tracking
|
||||||
const update: Record<string, unknown> = { ...data }
|
const update: Record<string, unknown> = { ...data };
|
||||||
if (data.status === 'RESOLVED' && existing.status !== 'RESOLVED') {
|
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') {
|
} else if (data.status && data.status !== 'RESOLVED' && existing.status === 'RESOLVED') {
|
||||||
update.resolvedAt = null
|
update.resolvedAt = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ticket = await prisma.$transaction(async (tx) => {
|
const ticket = await prisma.$transaction(async (tx) => {
|
||||||
const updated = await tx.ticket.update({
|
const updated = await tx.ticket.update({
|
||||||
where: { id: existing.id },
|
where: { id: existing.id },
|
||||||
data: update,
|
data: update,
|
||||||
})
|
});
|
||||||
if (auditEntries.length > 0) {
|
if (auditEntries.length > 0) {
|
||||||
await tx.auditLog.createMany({
|
await tx.auditLog.createMany({
|
||||||
data: auditEntries.map((e) => ({
|
data: auditEntries.map((e) => ({
|
||||||
@@ -245,20 +245,20 @@ router.patch('/:id', requireAgent, async (req: AuthRequest, res) => {
|
|||||||
action: e.action,
|
action: e.action,
|
||||||
detail: e.detail ?? null,
|
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
|
// DELETE /api/tickets/:id — admin only
|
||||||
router.delete('/:id', requireAdmin, async (req, res) => {
|
router.delete('/:id', requireAdmin, async (req, res) => {
|
||||||
const ticket = await findByIdOrDisplay(req.params.id)
|
const ticket = await findByIdOrDisplay(req.params.id);
|
||||||
if (!ticket) return res.status(404).json({ error: 'Ticket not found' })
|
if (!ticket) return res.status(404).json({ error: 'Ticket not found' });
|
||||||
await prisma.ticket.delete({ where: { id: ticket.id } })
|
await prisma.ticket.delete({ where: { id: ticket.id } });
|
||||||
res.status(204).send()
|
res.status(204).send();
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router
|
export default router;
|
||||||
|
|||||||
+42
-34
@@ -1,11 +1,12 @@
|
|||||||
import { Router } from 'express'
|
import { Router } from 'express';
|
||||||
import bcrypt from 'bcryptjs'
|
import bcrypt from 'bcryptjs';
|
||||||
import crypto from 'crypto'
|
import crypto from 'crypto';
|
||||||
import { z } from 'zod'
|
import { z } from 'zod';
|
||||||
import prisma from '../lib/prisma'
|
import { Prisma } from '@prisma/client';
|
||||||
import { requireAdmin, AuthRequest } from '../middleware/auth'
|
import prisma from '../lib/prisma';
|
||||||
|
import { requireAdmin, AuthRequest } from '../middleware/auth';
|
||||||
|
|
||||||
const router = Router()
|
const router = Router();
|
||||||
|
|
||||||
const userSelect = {
|
const userSelect = {
|
||||||
id: true,
|
id: true,
|
||||||
@@ -15,15 +16,22 @@ const userSelect = {
|
|||||||
role: true,
|
role: true,
|
||||||
apiKey: true,
|
apiKey: true,
|
||||||
createdAt: true,
|
createdAt: true,
|
||||||
} as const
|
} as const;
|
||||||
|
|
||||||
router.get('/', async (_req, res) => {
|
router.get('/', async (_req, res) => {
|
||||||
const users = await prisma.user.findMany({
|
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' },
|
orderBy: { displayName: 'asc' },
|
||||||
})
|
});
|
||||||
res.json(users)
|
res.json(users);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.post('/', requireAdmin, async (req, res) => {
|
router.post('/', requireAdmin, async (req, res) => {
|
||||||
const data = z
|
const data = z
|
||||||
@@ -34,14 +42,14 @@ router.post('/', requireAdmin, async (req, res) => {
|
|||||||
password: z.string().min(8).optional(),
|
password: z.string().min(8).optional(),
|
||||||
role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).default('AGENT'),
|
role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).default('AGENT'),
|
||||||
})
|
})
|
||||||
.parse(req.body)
|
.parse(req.body);
|
||||||
|
|
||||||
const passwordHash = data.password
|
const passwordHash = data.password
|
||||||
? await bcrypt.hash(data.password, 12)
|
? 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 =
|
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({
|
const user = await prisma.user.create({
|
||||||
data: {
|
data: {
|
||||||
@@ -53,10 +61,10 @@ router.post('/', requireAdmin, async (req, res) => {
|
|||||||
apiKey,
|
apiKey,
|
||||||
},
|
},
|
||||||
select: userSelect,
|
select: userSelect,
|
||||||
})
|
});
|
||||||
|
|
||||||
res.status(201).json(user)
|
res.status(201).json(user);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.patch('/:id', requireAdmin, async (req, res) => {
|
router.patch('/:id', requireAdmin, async (req, res) => {
|
||||||
const data = z
|
const data = z
|
||||||
@@ -67,37 +75,37 @@ router.patch('/:id', requireAdmin, async (req, res) => {
|
|||||||
role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).optional(),
|
role: z.enum(['ADMIN', 'AGENT', 'USER', 'SERVICE']).optional(),
|
||||||
regenerateApiKey: z.boolean().optional(),
|
regenerateApiKey: z.boolean().optional(),
|
||||||
})
|
})
|
||||||
.parse(req.body)
|
.parse(req.body);
|
||||||
|
|
||||||
const update: Record<string, any> = {}
|
const update: Prisma.UserUpdateInput = {};
|
||||||
if (data.displayName) update.displayName = data.displayName
|
if (data.displayName) update.displayName = data.displayName;
|
||||||
if (data.email) update.email = data.email
|
if (data.email) update.email = data.email;
|
||||||
if (data.password) update.passwordHash = await bcrypt.hash(data.password, 12)
|
if (data.password) update.passwordHash = await bcrypt.hash(data.password, 12);
|
||||||
if (data.role) {
|
if (data.role) {
|
||||||
update.role = data.role
|
update.role = data.role;
|
||||||
if (data.role === 'SERVICE' && !update.apiKey) {
|
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) {
|
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({
|
const user = await prisma.user.update({
|
||||||
where: { id: req.params.id },
|
where: { id: req.params.id },
|
||||||
data: update,
|
data: update,
|
||||||
select: userSelect,
|
select: userSelect,
|
||||||
})
|
});
|
||||||
|
|
||||||
res.json(user)
|
res.json(user);
|
||||||
})
|
});
|
||||||
|
|
||||||
router.delete('/:id', requireAdmin, async (req: AuthRequest, res) => {
|
router.delete('/:id', requireAdmin, async (req: AuthRequest, res) => {
|
||||||
if (req.params.id === req.user!.id) {
|
if (req.params.id === req.user!.id) {
|
||||||
return res.status(400).json({ error: 'Cannot delete your own account' })
|
return res.status(400).json({ error: 'Cannot delete your own account' });
|
||||||
}
|
}
|
||||||
await prisma.user.delete({ where: { id: req.params.id } })
|
await prisma.user.delete({ where: { id: req.params.id } });
|
||||||
res.status(204).send()
|
res.status(204).send();
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router
|
export default router;
|
||||||
|
|||||||
Reference in New Issue
Block a user