53 lines
4.0 KiB
TypeScript
53 lines
4.0 KiB
TypeScript
import { FormEvent, useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { api } from "../api/client";
|
|
import { describeApiError, type ApiErrorInfo } from "../api/errorMessages";
|
|
import type { Role, UserRecord } from "../api/types";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import { ApiErrorNotice, LoadingState, PageHeader } from "../components/PageChrome";
|
|
|
|
export function Users() {
|
|
const { t } = useTranslation(["operations", "errors"]);
|
|
const { user: currentUser } = useAuth();
|
|
const [users, setUsers] = useState<UserRecord[] | null>(null);
|
|
const [displayName, setDisplayName] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [role, setRole] = useState<Role>("rental_employee");
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<ApiErrorInfo | null>(null);
|
|
|
|
const load = useCallback(() => {
|
|
api.get<UserRecord[]>("/api/v1/users").then(setUsers).catch((err) => setError(describeApiError(t, err)));
|
|
}, [t]);
|
|
useEffect(load, [load]);
|
|
|
|
async function create(event: FormEvent) {
|
|
event.preventDefault(); setSaving(true); setError(null);
|
|
try {
|
|
await api.post<UserRecord>("/api/v1/users", { email, display_name: displayName, password, role });
|
|
setDisplayName(""); setEmail(""); setPassword(""); setRole("rental_employee"); load();
|
|
} catch (err) { setError(describeApiError(t, err, "operations:users.createFailed")); }
|
|
finally { setSaving(false); }
|
|
}
|
|
|
|
async function toggleActive(record: UserRecord) {
|
|
setError(null);
|
|
try { await api.patch(`/api/v1/users/${record.public_ref}`, { active: !record.active }); load(); }
|
|
catch (err) { setError(describeApiError(t, err, "operations:users.updateFailed")); }
|
|
}
|
|
|
|
return <div className="page">
|
|
<PageHeader eyebrow={t("users.eyebrow")} title={t("users.title")} description={t("users.description")} />
|
|
<ApiErrorNotice error={error} />
|
|
<section className="record-surface user-create"><h2>{t("users.addTitle")}</h2><form onSubmit={create}><div className="form-grid">
|
|
<label>{t("users.name")}<input required minLength={2} value={displayName} onChange={(event) => setDisplayName(event.target.value)} /></label>
|
|
<label>{t("users.email")}<input required type="email" value={email} onChange={(event) => setEmail(event.target.value)} /></label>
|
|
<label>{t("users.role")}<select value={role} onChange={(event) => setRole(event.target.value as Role)}><option value="rental_employee">{t("roles.rental_employee")}</option><option value="operations_manager">{t("roles.operations_manager")}</option></select></label>
|
|
<label>{t("users.password")}<input required type="password" minLength={8} autoComplete="new-password" value={password} onChange={(event) => setPassword(event.target.value)} /></label>
|
|
</div><div className="form-actions"><button className="button button-primary" disabled={saving}>{saving ? t("users.saving") : t("users.add")}</button></div></form></section>
|
|
{!users && <LoadingState label={t("users.loading")} />}
|
|
{users && <div className="table-shell"><table className="data-table"><caption className="visually-hidden">{t("users.title")}</caption><thead><tr><th>{t("users.name")}</th><th>{t("users.email")}</th><th>{t("users.role")}</th><th>{t("users.status")}</th><th>{t("users.action")}</th></tr></thead><tbody>{users.map((record) => <tr key={record.public_ref}><th>{record.display_name}<span className="table-secondary">{record.public_ref}</span></th><td>{record.email ?? "—"}</td><td>{t(`roles.${record.role}`)}</td><td><span className={`badge ${record.active ? "status-available" : "status-blocked"}`}>{t(record.active ? "users.active" : "users.inactive")}</span></td><td><button type="button" className="button button-secondary" disabled={record.public_ref === currentUser?.public_ref} onClick={() => toggleActive(record)}>{t(record.active ? "users.deactivate" : "users.activate")}</button></td></tr>)}</tbody></table></div>}
|
|
</div>;
|
|
}
|