Initial commit: TicketingSystem

Internal ticketing app with CTI routing, severity levels, and n8n integration. Stack: Express + TypeScript + Prisma + PostgreSQL / React + Vite + Tailwind - JWT auth for users, API key auth for service accounts (Goddard/n8n) - CTI hierarchy (Category > Type > Item) for ticket routing - Severity 1-5, auto-close resolved tickets after 14 days - Gitea Actions CI/CD building separate server/client images - Production docker-compose.yml with Traefik integration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 19:38:32 -04:00
commit 21894fad7a
50 changed files with 3293 additions and 0 deletions
@@ -0,0 +1,346 @@
+import { useState, useEffect } from 'react'
+import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react'
+import api from '../../api/client'
+import Layout from '../../components/Layout'
+import Modal from '../../components/Modal'
+import { User, Role } from '../../types'
+import { useAuth } from '../../contexts/AuthContext'
+
+interface UserForm {
+  username: string
+  email: string
+  displayName: string
+  password: string
+  role: Role
+}
+
+const BLANK_FORM: UserForm = {
+  username: '',
+  email: '',
+  displayName: '',
+  password: '',
+  role: 'AGENT',
+}
+
+const ROLE_LABELS: Record<Role, string> = {
+  ADMIN: 'Admin',
+  AGENT: 'Agent',
+  SERVICE: 'Service',
+}
+
+export default function AdminUsers() {
+  const { user: authUser } = useAuth()
+  const [users, setUsers] = useState<User[]>([])
+  const [modal, setModal] = useState<'add' | 'edit' | null>(null)
+  const [selected, setSelected] = useState<User | null>(null)
+  const [form, setForm] = useState<UserForm>(BLANK_FORM)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+  const [newApiKey, setNewApiKey] = useState<string | null>(null)
+
+  const fetchUsers = () => {
+    api.get<User[]>('/users').then((r) => setUsers(r.data))
+  }
+
+  useEffect(() => { fetchUsers() }, [])
+
+  const openAdd = () => {
+    setForm(BLANK_FORM)
+    setError('')
+    setNewApiKey(null)
+    setModal('add')
+  }
+
+  const openEdit = (u: User) => {
+    setSelected(u)
+    setForm({ username: u.username, email: u.email, displayName: u.displayName, password: '', role: u.role })
+    setError('')
+    setNewApiKey(null)
+    setModal('edit')
+  }
+
+  const closeModal = () => {
+    setModal(null)
+    setSelected(null)
+    setNewApiKey(null)
+    fetchUsers()
+  }
+
+  const handleAdd = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitting(true)
+    setError('')
+    try {
+      const payload: Record<string, string> = {
+        username: form.username,
+        email: form.email,
+        displayName: form.displayName,
+        role: form.role,
+      }
+      if (form.password) payload.password = form.password
+      const res = await api.post<User>('/users', payload)
+      if (res.data.apiKey) setNewApiKey(res.data.apiKey)
+      else closeModal()
+    } catch (err: unknown) {
+      const e = err as { response?: { data?: { error?: string } } }
+      setError(e.response?.data?.error ?? 'Failed to create user')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleEdit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!selected) return
+    setSubmitting(true)
+    setError('')
+    try {
+      const payload: Record<string, string> = {
+        email: form.email,
+        displayName: form.displayName,
+        role: form.role,
+      }
+      if (form.password) payload.password = form.password
+      await api.patch(`/users/${selected.id}`, payload)
+      closeModal()
+    } catch (err: unknown) {
+      const e = err as { response?: { data?: { error?: string } } }
+      setError(e.response?.data?.error ?? 'Failed to update user')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (u: User) => {
+    if (!confirm(`Delete user "${u.displayName}"?`)) return
+    await api.delete(`/users/${u.id}`)
+    fetchUsers()
+  }
+
+  const handleRegenerateKey = async (u: User) => {
+    if (!confirm(`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`)) return
+    const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true })
+    setNewApiKey(res.data.apiKey ?? null)
+    setSelected(u)
+    setModal('edit')
+  }
+
+  const copyToClipboard = (key: string) => {
+    navigator.clipboard.writeText(key)
+    setCopiedKey(key)
+    setTimeout(() => setCopiedKey(null), 2000)
+  }
+
+  const inputClass =
+    'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+  const labelClass = 'block text-sm font-medium text-gray-700 mb-1'
+
+  return (
+    <Layout
+      title="Users"
+      action={
+        <button
+          onClick={openAdd}
+          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
+        >
+          <Plus size={14} />
+          Add User
+        </button>
+      }
+    >
+      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                User
+              </th>
+              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                Username
+              </th>
+              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                Role
+              </th>
+              <th className="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                Email
+              </th>
+              <th className="px-5 py-3" />
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {users.map((u) => (
+              <tr key={u.id} className="hover:bg-gray-50">
+                <td className="px-5 py-3 font-medium text-gray-900">{u.displayName}</td>
+                <td className="px-5 py-3 text-gray-500 font-mono text-xs">{u.username}</td>
+                <td className="px-5 py-3">
+                  <span
+                    className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
+                      u.role === 'ADMIN'
+                        ? 'bg-purple-100 text-purple-700'
+                        : u.role === 'SERVICE'
+                        ? 'bg-orange-100 text-orange-700'
+                        : 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    {ROLE_LABELS[u.role]}
+                  </span>
+                </td>
+                <td className="px-5 py-3 text-gray-500">{u.email}</td>
+                <td className="px-5 py-3">
+                  <div className="flex items-center justify-end gap-2">
+                    {u.role === 'SERVICE' && (
+                      <button
+                        onClick={() => handleRegenerateKey(u)}
+                        className="text-gray-400 hover:text-gray-700 transition-colors"
+                        title="Regenerate API key"
+                      >
+                        <RefreshCw size={14} />
+                      </button>
+                    )}
+                    <button
+                      onClick={() => openEdit(u)}
+                      className="text-gray-400 hover:text-gray-700 transition-colors"
+                    >
+                      <Pencil size={14} />
+                    </button>
+                    {u.id !== authUser?.id && (
+                      <button
+                        onClick={() => handleDelete(u)}
+                        className="text-gray-400 hover:text-red-600 transition-colors"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Add / Edit Modal */}
+      {modal && (
+        <Modal
+          title={modal === 'add' ? 'Add User' : `Edit ${selected?.displayName}`}
+          onClose={closeModal}
+        >
+          {newApiKey ? (
+            <div className="space-y-4">
+              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+                <p className="text-sm font-medium text-amber-800 mb-2">
+                  API Key — copy it now, it won't be shown again
+                </p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 text-xs bg-white border border-amber-200 rounded px-3 py-2 font-mono break-all">
+                    {newApiKey}
+                  </code>
+                  <button
+                    onClick={() => copyToClipboard(newApiKey)}
+                    className="flex-shrink-0 text-amber-700 hover:text-amber-900 transition-colors"
+                  >
+                    {copiedKey === newApiKey ? <Check size={16} /> : <Copy size={16} />}
+                  </button>
+                </div>
+              </div>
+              <button
+                onClick={closeModal}
+                className="w-full bg-blue-600 text-white py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
+              >
+                Done
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={modal === 'add' ? handleAdd : handleEdit} className="space-y-4">
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2 rounded-lg">
+                  {error}
+                </div>
+              )}
+
+              {modal === 'add' && (
+                <div>
+                  <label className={labelClass}>Username</label>
+                  <input
+                    type="text"
+                    value={form.username}
+                    onChange={(e) => setForm((f) => ({ ...f, username: e.target.value }))}
+                    required
+                    className={inputClass}
+                  />
+                </div>
+              )}
+
+              <div>
+                <label className={labelClass}>Display Name</label>
+                <input
+                  type="text"
+                  value={form.displayName}
+                  onChange={(e) => setForm((f) => ({ ...f, displayName: e.target.value }))}
+                  required
+                  className={inputClass}
+                />
+              </div>
+
+              <div>
+                <label className={labelClass}>Email</label>
+                <input
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+                  required
+                  className={inputClass}
+                />
+              </div>
+
+              <div>
+                <label className={labelClass}>
+                  Password {modal === 'edit' && <span className="text-gray-400 font-normal">(leave blank to keep current)</span>}
+                </label>
+                <input
+                  type="password"
+                  value={form.password}
+                  onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
+                  required={modal === 'add' && form.role !== 'SERVICE'}
+                  className={inputClass}
+                  placeholder={modal === 'edit' ? '••••••••' : ''}
+                />
+              </div>
+
+              <div>
+                <label className={labelClass}>Role</label>
+                <select
+                  value={form.role}
+                  onChange={(e) => setForm((f) => ({ ...f, role: e.target.value as Role }))}
+                  className={inputClass}
+                >
+                  <option value="AGENT">Agent</option>
+                  <option value="ADMIN">Admin</option>
+                  <option value="SERVICE">Service (API key auth)</option>
+                </select>
+              </div>
+
+              <div className="flex justify-end gap-3 pt-1">
+                <button
+                  type="button"
+                  onClick={closeModal}
+                  className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={submitting}
+                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                >
+                  {submitting ? 'Saving...' : modal === 'add' ? 'Create User' : 'Save Changes'}
+                </button>
+              </div>
+            </form>
+          )}
+        </Modal>
+      )}
+    </Layout>
+  )
+}