234 lines
8.5 KiB
TypeScript
234 lines
8.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { ALL_ROLES, type UserRole } from '@/lib/auth/roles'
|
|
|
|
export type AdminUser = {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
role: string
|
|
department: string | null
|
|
site_id: string | null
|
|
active: boolean
|
|
}
|
|
|
|
export type SiteOption = { id: string; name: string }
|
|
|
|
interface Props {
|
|
users: AdminUser[]
|
|
sites: SiteOption[]
|
|
}
|
|
|
|
const EMPTY_FORM = { email: '', name: '', phone: '', role: 'reporter' as UserRole, site_id: '', password: '' }
|
|
|
|
export function UserManager({ users, sites }: Props) {
|
|
const router = useRouter()
|
|
const [busyId, setBusyId] = useState<string | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [form, setForm] = useState(EMPTY_FORM)
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
|
|
|
|
const patchUser = async (id: string, update: Record<string, unknown>) => {
|
|
setBusyId(id)
|
|
setError(null)
|
|
const res = await fetch('/ims/api/admin/users', {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id, ...update }),
|
|
})
|
|
setBusyId(null)
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
setError(data.error ?? 'Update failed')
|
|
return
|
|
}
|
|
router.refresh()
|
|
}
|
|
|
|
const deleteUser = async (id: string) => {
|
|
setBusyId(id)
|
|
setError(null)
|
|
const res = await fetch(`/api/admin/users?id=${encodeURIComponent(id)}`, { method: 'DELETE' })
|
|
setBusyId(null)
|
|
setConfirmDeleteId(null)
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
setError(data.error ?? 'Delete failed')
|
|
return
|
|
}
|
|
router.refresh()
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setSubmitting(true)
|
|
setError(null)
|
|
const res = await fetch('/ims/api/admin/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: form.email,
|
|
name: form.name || undefined,
|
|
phone: form.phone || undefined,
|
|
role: form.role,
|
|
site_id: form.site_id || undefined,
|
|
password: form.password,
|
|
}),
|
|
})
|
|
setSubmitting(false)
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
setError(data.error ?? 'Add failed')
|
|
return
|
|
}
|
|
setForm(EMPTY_FORM)
|
|
router.refresh()
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-sm p-5">
|
|
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Users</h2>
|
|
|
|
<form onSubmit={handleSubmit} className="flex flex-wrap gap-2 mb-5 items-end">
|
|
<input
|
|
type="email" required placeholder="email@company.com"
|
|
value={form.email}
|
|
onChange={e => setForm(v => ({ ...v, email: e.target.value }))}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-52"
|
|
/>
|
|
<input
|
|
type="text" placeholder="Full name"
|
|
value={form.name}
|
|
onChange={e => setForm(v => ({ ...v, name: e.target.value }))}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40"
|
|
/>
|
|
<input
|
|
type="tel" placeholder="Phone (e.g. +60123456789)"
|
|
value={form.phone}
|
|
onChange={e => setForm(v => ({ ...v, phone: e.target.value }))}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-44"
|
|
/>
|
|
<select
|
|
value={form.role}
|
|
onChange={e => setForm(v => ({ ...v, role: e.target.value as UserRole }))}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
|
|
>
|
|
{ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
|
|
</select>
|
|
<select
|
|
value={form.site_id}
|
|
onChange={e => setForm(v => ({ ...v, site_id: e.target.value }))}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
|
|
>
|
|
<option value="">No site</option>
|
|
{sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
|
</select>
|
|
<input
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
placeholder="Password (min 8 chars)"
|
|
value={form.password}
|
|
onChange={e => setForm(v => ({ ...v, password: e.target.value }))}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
|
|
/>
|
|
<button
|
|
type="submit" disabled={submitting}
|
|
className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
{submitting ? 'Adding…' : 'Add User'}
|
|
</button>
|
|
</form>
|
|
|
|
{error && <p className="text-sm text-red-600 mb-3">{error}</p>}
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-xs text-gray-500 uppercase tracking-wide border-b border-gray-100">
|
|
<th className="py-2 pr-3">Name</th>
|
|
<th className="py-2 pr-3">Email</th>
|
|
<th className="py-2 pr-3">Role</th>
|
|
<th className="py-2 pr-3">Site</th>
|
|
<th className="py-2">Status</th>
|
|
<th className="py-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map(u => (
|
|
<tr key={u.id} className={`border-b border-gray-50 ${u.active ? '' : 'opacity-50'}`}>
|
|
<td className="py-2 pr-3 text-gray-900">{u.name || '—'}</td>
|
|
<td className="py-2 pr-3 text-gray-600">{u.email}</td>
|
|
<td className="py-2 pr-3">
|
|
<select
|
|
value={u.role}
|
|
disabled={busyId === u.id}
|
|
onChange={e => patchUser(u.id, { role: e.target.value })}
|
|
className="border border-gray-200 rounded px-2 py-1 text-xs"
|
|
>
|
|
{ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
|
|
</select>
|
|
</td>
|
|
<td className="py-2 pr-3">
|
|
<select
|
|
value={u.site_id ?? ''}
|
|
disabled={busyId === u.id}
|
|
onChange={e => patchUser(u.id, { site_id: e.target.value || null })}
|
|
className="border border-gray-200 rounded px-2 py-1 text-xs"
|
|
>
|
|
<option value="">No site</option>
|
|
{sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
|
</select>
|
|
</td>
|
|
<td className="py-2">
|
|
<button
|
|
disabled={busyId === u.id}
|
|
onClick={() => patchUser(u.id, { active: !u.active })}
|
|
className={`text-xs px-2 py-1 rounded-full font-medium ${
|
|
u.active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
|
}`}
|
|
>
|
|
{u.active ? 'Active' : 'Deactivated'}
|
|
</button>
|
|
</td>
|
|
<td className="py-2">
|
|
{confirmDeleteId === u.id ? (
|
|
<span className="flex items-center gap-1">
|
|
<span className="text-xs text-red-600 font-medium">Sure?</span>
|
|
<button
|
|
disabled={busyId === u.id}
|
|
onClick={() => deleteUser(u.id)}
|
|
className="text-xs px-2 py-0.5 rounded bg-red-600 text-white font-medium hover:bg-red-700"
|
|
>
|
|
{busyId === u.id ? '…' : 'Yes'}
|
|
</button>
|
|
<button
|
|
disabled={busyId === u.id}
|
|
onClick={() => setConfirmDeleteId(null)}
|
|
className="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
|
|
>
|
|
No
|
|
</button>
|
|
</span>
|
|
) : (
|
|
<button
|
|
disabled={busyId === u.id}
|
|
onClick={() => setConfirmDeleteId(u.id)}
|
|
className="text-xs px-2 py-1 rounded text-red-600 hover:bg-red-50 font-medium"
|
|
>
|
|
Delete
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|