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:
+113
-87
@@ -1,136 +1,144 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react'
|
||||
import api from '../../api/client'
|
||||
import Layout from '../../components/Layout'
|
||||
import Modal from '../../components/Modal'
|
||||
import { Category, CTIType, Item } from '../../types'
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, Pencil, Trash2, ChevronRight } from 'lucide-react';
|
||||
import api from '../../api/client';
|
||||
import Layout from '../../components/Layout';
|
||||
import Modal from '../../components/Modal';
|
||||
import { Category, CTIType, Item } from '../../types';
|
||||
|
||||
type PanelItem = { id: string; name: string }
|
||||
type PanelItem = { id: string; name: string };
|
||||
|
||||
interface NameModalState {
|
||||
open: boolean
|
||||
mode: 'add' | 'edit'
|
||||
panel: 'category' | 'type' | 'item'
|
||||
item?: PanelItem
|
||||
open: boolean;
|
||||
mode: 'add' | 'edit';
|
||||
panel: 'category' | 'type' | 'item';
|
||||
item?: PanelItem;
|
||||
}
|
||||
|
||||
export default function AdminCTI() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [types, setTypes] = useState<CTIType[]>([])
|
||||
const [items, setItems] = useState<Item[]>([])
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [types, setTypes] = useState<CTIType[]>([]);
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
|
||||
const [selectedType, setSelectedType] = useState<CTIType | null>(null)
|
||||
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
|
||||
const [selectedType, setSelectedType] = useState<CTIType | null>(null);
|
||||
|
||||
const [nameModal, setNameModal] = useState<NameModalState>({ open: false, mode: 'add', panel: 'category' })
|
||||
const [nameValue, setNameValue] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [nameModal, setNameModal] = useState<NameModalState>({
|
||||
open: false,
|
||||
mode: 'add',
|
||||
panel: 'category',
|
||||
});
|
||||
const [nameValue, setNameValue] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const fetchCategories = () =>
|
||||
api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data))
|
||||
api.get<Category[]>('/cti/categories').then((r) => setCategories(r.data));
|
||||
|
||||
const fetchTypes = (categoryId: string) =>
|
||||
api
|
||||
.get<CTIType[]>('/cti/types', { params: { categoryId } })
|
||||
.then((r) => setTypes(r.data))
|
||||
api.get<CTIType[]>('/cti/types', { params: { categoryId } }).then((r) => setTypes(r.data));
|
||||
|
||||
const fetchItems = (typeId: string) =>
|
||||
api.get<Item[]>('/cti/items', { params: { typeId } }).then((r) => setItems(r.data))
|
||||
api.get<Item[]>('/cti/items', { params: { typeId } }).then((r) => setItems(r.data));
|
||||
|
||||
useEffect(() => { fetchCategories() }, [])
|
||||
useEffect(() => {
|
||||
fetchCategories();
|
||||
}, []);
|
||||
|
||||
const selectCategory = (cat: Category) => {
|
||||
setSelectedCategory(cat)
|
||||
setSelectedType(null)
|
||||
setItems([])
|
||||
fetchTypes(cat.id)
|
||||
}
|
||||
setSelectedCategory(cat);
|
||||
setSelectedType(null);
|
||||
setItems([]);
|
||||
fetchTypes(cat.id);
|
||||
};
|
||||
|
||||
const selectType = (type: CTIType) => {
|
||||
setSelectedType(type)
|
||||
fetchItems(type.id)
|
||||
}
|
||||
setSelectedType(type);
|
||||
fetchItems(type.id);
|
||||
};
|
||||
|
||||
const openAdd = (panel: 'category' | 'type' | 'item') => {
|
||||
setNameValue('')
|
||||
setNameModal({ open: true, mode: 'add', panel })
|
||||
}
|
||||
setNameValue('');
|
||||
setNameModal({ open: true, mode: 'add', panel });
|
||||
};
|
||||
|
||||
const openEdit = (panel: 'category' | 'type' | 'item', item: PanelItem) => {
|
||||
setNameValue(item.name)
|
||||
setNameModal({ open: true, mode: 'edit', panel, item })
|
||||
}
|
||||
setNameValue(item.name);
|
||||
setNameModal({ open: true, mode: 'edit', panel, item });
|
||||
};
|
||||
|
||||
const closeModal = () => setNameModal((m) => ({ ...m, open: false }))
|
||||
const closeModal = () => setNameModal((m) => ({ ...m, open: false }));
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!nameValue.trim()) return
|
||||
setSubmitting(true)
|
||||
e.preventDefault();
|
||||
if (!nameValue.trim()) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const { mode, panel, item } = nameModal
|
||||
const { mode, panel, item } = nameModal;
|
||||
if (mode === 'add') {
|
||||
if (panel === 'category') {
|
||||
await api.post('/cti/categories', { name: nameValue.trim() })
|
||||
await fetchCategories()
|
||||
await api.post('/cti/categories', { name: nameValue.trim() });
|
||||
await fetchCategories();
|
||||
} else if (panel === 'type' && selectedCategory) {
|
||||
await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id })
|
||||
await fetchTypes(selectedCategory.id)
|
||||
await api.post('/cti/types', { name: nameValue.trim(), categoryId: selectedCategory.id });
|
||||
await fetchTypes(selectedCategory.id);
|
||||
} else if (panel === 'item' && selectedType) {
|
||||
await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id })
|
||||
await fetchItems(selectedType.id)
|
||||
await api.post('/cti/items', { name: nameValue.trim(), typeId: selectedType.id });
|
||||
await fetchItems(selectedType.id);
|
||||
}
|
||||
} else {
|
||||
if (!item) return
|
||||
if (!item) return;
|
||||
if (panel === 'category') {
|
||||
await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() })
|
||||
await fetchCategories()
|
||||
if (selectedCategory?.id === item.id) setSelectedCategory((c) => c ? { ...c, name: nameValue.trim() } : c)
|
||||
await api.put(`/cti/categories/${item.id}`, { name: nameValue.trim() });
|
||||
await fetchCategories();
|
||||
if (selectedCategory?.id === item.id)
|
||||
setSelectedCategory((c) => (c ? { ...c, name: nameValue.trim() } : c));
|
||||
} else if (panel === 'type') {
|
||||
await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() })
|
||||
if (selectedCategory) await fetchTypes(selectedCategory.id)
|
||||
if (selectedType?.id === item.id) setSelectedType((t) => t ? { ...t, name: nameValue.trim() } : t)
|
||||
await api.put(`/cti/types/${item.id}`, { name: nameValue.trim() });
|
||||
if (selectedCategory) await fetchTypes(selectedCategory.id);
|
||||
if (selectedType?.id === item.id)
|
||||
setSelectedType((t) => (t ? { ...t, name: nameValue.trim() } : t));
|
||||
} else if (panel === 'item') {
|
||||
await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() })
|
||||
if (selectedType) await fetchItems(selectedType.id)
|
||||
await api.put(`/cti/items/${item.id}`, { name: nameValue.trim() });
|
||||
if (selectedType) await fetchItems(selectedType.id);
|
||||
}
|
||||
}
|
||||
closeModal()
|
||||
closeModal();
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (panel: 'category' | 'type' | 'item', item: PanelItem) => {
|
||||
if (!confirm(`Delete "${item.name}"? This will also delete all child records.`)) return
|
||||
if (!confirm(`Delete "${item.name}"? This will also delete all child records.`)) return;
|
||||
if (panel === 'category') {
|
||||
await api.delete(`/cti/categories/${item.id}`)
|
||||
await api.delete(`/cti/categories/${item.id}`);
|
||||
if (selectedCategory?.id === item.id) {
|
||||
setSelectedCategory(null)
|
||||
setSelectedType(null)
|
||||
setTypes([])
|
||||
setItems([])
|
||||
setSelectedCategory(null);
|
||||
setSelectedType(null);
|
||||
setTypes([]);
|
||||
setItems([]);
|
||||
}
|
||||
await fetchCategories()
|
||||
await fetchCategories();
|
||||
} else if (panel === 'type') {
|
||||
await api.delete(`/cti/types/${item.id}`)
|
||||
await api.delete(`/cti/types/${item.id}`);
|
||||
if (selectedType?.id === item.id) {
|
||||
setSelectedType(null)
|
||||
setItems([])
|
||||
setSelectedType(null);
|
||||
setItems([]);
|
||||
}
|
||||
if (selectedCategory) await fetchTypes(selectedCategory.id)
|
||||
if (selectedCategory) await fetchTypes(selectedCategory.id);
|
||||
} else {
|
||||
await api.delete(`/cti/items/${item.id}`)
|
||||
if (selectedType) await fetchItems(selectedType.id)
|
||||
await api.delete(`/cti/items/${item.id}`);
|
||||
if (selectedType) await fetchItems(selectedType.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const panelClass = 'bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col'
|
||||
const panelHeaderClass = 'flex items-center justify-between px-4 py-3 border-b border-gray-800'
|
||||
const panelClass = 'bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col';
|
||||
const panelHeaderClass = 'flex items-center justify-between px-4 py-3 border-b border-gray-800';
|
||||
const itemClass = (active: boolean) =>
|
||||
`flex items-center justify-between px-4 py-2.5 cursor-pointer group transition-colors ${
|
||||
active ? 'bg-blue-600/20 border-l-2 border-blue-500' : 'hover:bg-gray-800 border-l-2 border-transparent'
|
||||
}`
|
||||
active
|
||||
? 'bg-blue-600/20 border-l-2 border-blue-500'
|
||||
: 'hover:bg-gray-800 border-l-2 border-transparent'
|
||||
}`;
|
||||
|
||||
return (
|
||||
<Layout title="CTI Configuration">
|
||||
@@ -159,13 +167,19 @@ export default function AdminCTI() {
|
||||
<span className="text-sm text-gray-300">{cat.name}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); openEdit('category', cat) }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openEdit('category', cat);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
|
||||
>
|
||||
<Pencil size={13} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete('category', cat) }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete('category', cat);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
@@ -211,13 +225,19 @@ export default function AdminCTI() {
|
||||
<span className="text-sm text-gray-300">{type.name}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); openEdit('type', type) }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openEdit('type', type);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
|
||||
>
|
||||
<Pencil size={13} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete('type', type) }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete('type', type);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
@@ -259,13 +279,19 @@ export default function AdminCTI() {
|
||||
<span className="text-sm text-gray-300">{item.name}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); openEdit('item', item) }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openEdit('item', item);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-gray-300 transition-all"
|
||||
>
|
||||
<Pencil size={13} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete('item', item) }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete('item', item);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
@@ -316,5 +342,5 @@ export default function AdminCTI() {
|
||||
</Modal>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react'
|
||||
import api from '../../api/client'
|
||||
import Layout from '../../components/Layout'
|
||||
import Modal from '../../components/Modal'
|
||||
import { User, Role } from '../../types'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, Pencil, Trash2, RefreshCw, Copy, Check } from 'lucide-react';
|
||||
import api from '../../api/client';
|
||||
import Layout from '../../components/Layout';
|
||||
import Modal from '../../components/Modal';
|
||||
import { User, Role } from '../../types';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
|
||||
interface UserForm {
|
||||
username: string
|
||||
email: string
|
||||
displayName: string
|
||||
password: string
|
||||
role: Role
|
||||
username: string;
|
||||
email: string;
|
||||
displayName: string;
|
||||
password: string;
|
||||
role: Role;
|
||||
}
|
||||
|
||||
const BLANK_FORM: UserForm = {
|
||||
@@ -20,136 +20,149 @@ const BLANK_FORM: UserForm = {
|
||||
displayName: '',
|
||||
password: '',
|
||||
role: 'AGENT',
|
||||
}
|
||||
};
|
||||
|
||||
const ROLE_LABELS: Record<Role, string> = {
|
||||
ADMIN: 'Admin',
|
||||
AGENT: 'Agent',
|
||||
USER: 'User',
|
||||
SERVICE: 'Service',
|
||||
}
|
||||
};
|
||||
|
||||
const ROLE_BADGE: Record<Role, string> = {
|
||||
ADMIN: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||
AGENT: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
USER: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
SERVICE: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
||||
}
|
||||
};
|
||||
|
||||
const ROLE_DESCRIPTIONS: Record<Role, string> = {
|
||||
ADMIN: 'Full access — manage users, CTI config, close and delete tickets',
|
||||
AGENT: 'Manage tickets — create, update, assign, comment, change status',
|
||||
USER: 'Basic access — view tickets and add comments only',
|
||||
SERVICE: 'Automation account — authenticates via API key, no password login',
|
||||
}
|
||||
};
|
||||
|
||||
export default function AdminUsers() {
|
||||
const { user: authUser } = useAuth()
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
const [modal, setModal] = useState<'add' | 'edit' | null>(null)
|
||||
const [selected, setSelected] = useState<User | null>(null)
|
||||
const [form, setForm] = useState<UserForm>(BLANK_FORM)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [copiedKey, setCopiedKey] = useState<string | null>(null)
|
||||
const [newApiKey, setNewApiKey] = useState<string | null>(null)
|
||||
const { user: authUser } = useAuth();
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [modal, setModal] = useState<'add' | 'edit' | null>(null);
|
||||
const [selected, setSelected] = useState<User | null>(null);
|
||||
const [form, setForm] = useState<UserForm>(BLANK_FORM);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
||||
const [newApiKey, setNewApiKey] = useState<string | null>(null);
|
||||
|
||||
const fetchUsers = () => {
|
||||
api.get<User[]>('/users').then((r) => setUsers(r.data))
|
||||
}
|
||||
api.get<User[]>('/users').then((r) => setUsers(r.data));
|
||||
};
|
||||
|
||||
useEffect(() => { fetchUsers() }, [])
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const openAdd = () => {
|
||||
setForm(BLANK_FORM)
|
||||
setError('')
|
||||
setNewApiKey(null)
|
||||
setModal('add')
|
||||
}
|
||||
setForm(BLANK_FORM);
|
||||
setError('');
|
||||
setNewApiKey(null);
|
||||
setModal('add');
|
||||
};
|
||||
|
||||
const openEdit = (u: User) => {
|
||||
setSelected(u)
|
||||
setForm({ username: u.username, email: u.email, displayName: u.displayName, password: '', role: u.role })
|
||||
setError('')
|
||||
setNewApiKey(null)
|
||||
setModal('edit')
|
||||
}
|
||||
setSelected(u);
|
||||
setForm({
|
||||
username: u.username,
|
||||
email: u.email,
|
||||
displayName: u.displayName,
|
||||
password: '',
|
||||
role: u.role,
|
||||
});
|
||||
setError('');
|
||||
setNewApiKey(null);
|
||||
setModal('edit');
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setModal(null)
|
||||
setSelected(null)
|
||||
setNewApiKey(null)
|
||||
fetchUsers()
|
||||
}
|
||||
setModal(null);
|
||||
setSelected(null);
|
||||
setNewApiKey(null);
|
||||
fetchUsers();
|
||||
};
|
||||
|
||||
const handleAdd = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const payload: Record<string, string> = {
|
||||
username: form.username,
|
||||
email: form.email,
|
||||
displayName: form.displayName,
|
||||
role: form.role,
|
||||
}
|
||||
if (form.password) payload.password = form.password
|
||||
const res = await api.post<User>('/users', payload)
|
||||
if (res.data.apiKey) setNewApiKey(res.data.apiKey)
|
||||
else closeModal()
|
||||
};
|
||||
if (form.password) payload.password = form.password;
|
||||
const res = await api.post<User>('/users', payload);
|
||||
if (res.data.apiKey) setNewApiKey(res.data.apiKey);
|
||||
else closeModal();
|
||||
} catch (err: unknown) {
|
||||
const e = err as { response?: { data?: { error?: string } } }
|
||||
setError(e.response?.data?.error ?? 'Failed to create user')
|
||||
const e = err as { response?: { data?: { error?: string } } };
|
||||
setError(e.response?.data?.error ?? 'Failed to create user');
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!selected) return
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
e.preventDefault();
|
||||
if (!selected) return;
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const payload: Record<string, string> = {
|
||||
email: form.email,
|
||||
displayName: form.displayName,
|
||||
role: form.role,
|
||||
}
|
||||
if (form.password) payload.password = form.password
|
||||
await api.patch(`/users/${selected.id}`, payload)
|
||||
closeModal()
|
||||
};
|
||||
if (form.password) payload.password = form.password;
|
||||
await api.patch(`/users/${selected.id}`, payload);
|
||||
closeModal();
|
||||
} catch (err: unknown) {
|
||||
const e = err as { response?: { data?: { error?: string } } }
|
||||
setError(e.response?.data?.error ?? 'Failed to update user')
|
||||
const e = err as { response?: { data?: { error?: string } } };
|
||||
setError(e.response?.data?.error ?? 'Failed to update user');
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (u: User) => {
|
||||
if (!confirm(`Delete user "${u.displayName}"?`)) return
|
||||
await api.delete(`/users/${u.id}`)
|
||||
fetchUsers()
|
||||
}
|
||||
if (!confirm(`Delete user "${u.displayName}"?`)) return;
|
||||
await api.delete(`/users/${u.id}`);
|
||||
fetchUsers();
|
||||
};
|
||||
|
||||
const handleRegenerateKey = async (u: User) => {
|
||||
if (!confirm(`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`)) return
|
||||
const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true })
|
||||
setNewApiKey(res.data.apiKey ?? null)
|
||||
setSelected(u)
|
||||
setModal('edit')
|
||||
}
|
||||
if (
|
||||
!confirm(
|
||||
`Regenerate API key for "${u.displayName}"? The old key will stop working immediately.`,
|
||||
)
|
||||
)
|
||||
return;
|
||||
const res = await api.patch<User>(`/users/${u.id}`, { regenerateApiKey: true });
|
||||
setNewApiKey(res.data.apiKey ?? null);
|
||||
setSelected(u);
|
||||
setModal('edit');
|
||||
};
|
||||
|
||||
const copyToClipboard = (key: string) => {
|
||||
navigator.clipboard.writeText(key)
|
||||
setCopiedKey(key)
|
||||
setTimeout(() => setCopiedKey(null), 2000)
|
||||
}
|
||||
navigator.clipboard.writeText(key);
|
||||
setCopiedKey(key);
|
||||
setTimeout(() => setCopiedKey(null), 2000);
|
||||
};
|
||||
|
||||
const inputClass =
|
||||
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
|
||||
const labelClass = 'block text-sm font-medium text-gray-300 mb-1'
|
||||
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
|
||||
const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
|
||||
|
||||
return (
|
||||
<Layout
|
||||
@@ -189,7 +202,9 @@ export default function AdminUsers() {
|
||||
<td className="px-5 py-3 font-medium text-gray-100">{u.displayName}</td>
|
||||
<td className="px-5 py-3 text-gray-500 font-mono text-xs">{u.username}</td>
|
||||
<td className="px-5 py-3">
|
||||
<span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium border ${ROLE_BADGE[u.role]}`}>
|
||||
<span
|
||||
className={`inline-flex px-2 py-0.5 rounded text-xs font-medium border ${ROLE_BADGE[u.role]}`}
|
||||
>
|
||||
{ROLE_LABELS[u.role]}
|
||||
</span>
|
||||
</td>
|
||||
@@ -237,7 +252,7 @@ export default function AdminUsers() {
|
||||
<div className="space-y-4">
|
||||
<div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4">
|
||||
<p className="text-sm font-medium text-amber-400 mb-2">
|
||||
API Key — copy it now, it won't be shown again
|
||||
API Key — copy it now, it won't be shown again
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 text-xs bg-gray-800 border border-gray-700 text-gray-300 rounded px-3 py-2 font-mono break-all">
|
||||
@@ -354,5 +369,5 @@ export default function AdminUsers() {
|
||||
</Modal>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user