Files
bot-pontos/web/app/(painel)/configuracoes/form.tsx
2026-10-23 22:31:02 -03:00

89 lines
3.2 KiB
TypeScript

"use client";
import { useRouter } from "next/navigation";
import { useState, type FormEvent } from "react";
import { WindowFields } from "@/components/WindowFields";
import { apiFetch, errorMessage } from "@/lib/client-api";
import type { QueryWindow, WindowPreview } from "@/lib/types";
export function SettingsForm({ initial, disabled }: { initial: QueryWindow; disabled: boolean }) {
const router = useRouter();
const [value, setValue] = useState<QueryWindow>(initial);
const [preview, setPreview] = useState<WindowPreview | null>(null);
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
const [busy, setBusy] = useState(false);
async function runPreview() {
setBusy(true);
setMessage(null);
try {
setPreview(await apiFetch<WindowPreview>("/settings/preview", { method: "POST", body: value }));
} catch (err) {
setMessage({ ok: false, text: errorMessage(err) });
} finally {
setBusy(false);
}
}
async function save(e: FormEvent) {
e.preventDefault();
if (!window.confirm("Salvar a nova janela global? Ela vale para todos os usuários sem janela personalizada.")) return;
setBusy(true);
setMessage(null);
try {
await apiFetch("/settings", { method: "PUT", body: value });
setMessage({ ok: true, text: "Janela salva." });
router.refresh();
} catch (err) {
setMessage({ ok: false, text: errorMessage(err) });
} finally {
setBusy(false);
}
}
return (
<form onSubmit={save}>
<WindowFields value={value} onChange={(w) => { setValue(w); setPreview(null); }} disabled={disabled} />
{!disabled && (
<div className="actions">
<button className="btn secondary" type="button" onClick={runPreview} disabled={busy}>
Pré-visualizar efeito
</button>
<button className="btn primary" type="submit" disabled={busy}>
Salvar
</button>
</div>
)}
{message && <p className={message.ok ? "ok-text" : "error-text"}>{message.text}</p>}
{preview && (
<div className="preview">
{preview.errors.length > 0 ? (
<ul className="error-text">
{preview.errors.map((e) => (
<li key={e.field + e.message}>{e.message}</li>
))}
</ul>
) : (
<dl className="kv">
<dt>Consultas por usuário (máximo)</dt>
<dd>{preview.max_queries_per_user} por dia</dd>
<dt>Consultas num dia típico</dt>
<dd>{preview.typical_queries_per_user} por usuário</dd>
<dt>Consultas num dia de folga</dt>
<dd>{preview.day_off_queries_per_user} por usuário</dd>
<dt>Lembretes que sairiam atrasados</dt>
<dd>
{preview.affected_users} usuário(s), {preview.affected_days} dia(s) nos últimos 30 dias (aviso de retorno
antes do início da janela)
</dd>
<dt>Não afetados</dt>
<dd>{preview.custom_window_users} usuário(s) com janela personalizada</dd>
</dl>
)}
</div>
)}
</form>
);
}