Projeto bot pontos
This commit is contained in:
209
web/app/(painel)/usuarios/[id]/forms.tsx
Normal file
209
web/app/(painel)/usuarios/[id]/forms.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, type ChangeEvent, type FormEvent } from "react";
|
||||
import { WindowFields } from "@/components/WindowFields";
|
||||
import { apiFetch, errorMessage } from "@/lib/client-api";
|
||||
import { dayStatusLabel, fmtClock, fmtMinutes } from "@/lib/format";
|
||||
import type { QueryWindow, Schedule, Today } from "@/lib/types";
|
||||
|
||||
/** Grava e valida a credencial na PontoMais; a anterior é mantida se a validação falhar. */
|
||||
export function CredentialsForm({ userId }: { userId: number }) {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function submit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setBusy(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
await apiFetch(`/users/${userId}/credentials`, { method: "PUT", body: { email, password } });
|
||||
setPassword("");
|
||||
setMessage({ ok: true, text: "Credencial validada na PontoMais e gravada." });
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setMessage({ ok: false, text: errorMessage(err) });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="inline-form" onSubmit={submit} autoComplete="off">
|
||||
<label className="field">
|
||||
<span>E-mail de login na PontoMais</span>
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>Senha da PontoMais</span>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" required />
|
||||
</label>
|
||||
<button className="btn primary" type="submit" disabled={busy}>
|
||||
{busy ? "Validando…" : "Validar e salvar"}
|
||||
</button>
|
||||
{message && <p className={message.ok ? "ok-text" : "error-text"}>{message.text}</p>}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function ScheduleForm({
|
||||
userId,
|
||||
schedule,
|
||||
timezone,
|
||||
effectiveWindow,
|
||||
disabled,
|
||||
}: {
|
||||
userId: number;
|
||||
schedule: Schedule;
|
||||
timezone: string;
|
||||
effectiveWindow: QueryWindow;
|
||||
disabled: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [form, setForm] = useState({
|
||||
lunch_minutes: schedule.lunch_minutes,
|
||||
daily_work_minutes: schedule.daily_work_minutes,
|
||||
entrada2_lead_minutes: schedule.entrada2_lead_minutes,
|
||||
saida2_lead_minutes: schedule.saida2_lead_minutes,
|
||||
timezone,
|
||||
});
|
||||
const [useGlobal, setUseGlobal] = useState(schedule.window === null);
|
||||
const [windowValue, setWindowValue] = useState<QueryWindow>(schedule.window ?? effectiveWindow);
|
||||
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
function number(key: keyof typeof form) {
|
||||
return (e: ChangeEvent<HTMLInputElement>) => setForm({ ...form, [key]: Number(e.target.value) });
|
||||
}
|
||||
|
||||
async function submit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setBusy(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
await apiFetch(`/users/${userId}/schedule`, {
|
||||
method: "PUT",
|
||||
body: { ...form, window: useGlobal ? null : windowValue },
|
||||
});
|
||||
setMessage({ ok: true, text: "Jornada salva. Vale a partir da próxima consulta." });
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setMessage({ ok: false, text: errorMessage(err) });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={submit}>
|
||||
<div className="grid-4">
|
||||
<label className="field">
|
||||
<span>Almoço (min)</span>
|
||||
<input type="number" min={15} max={180} value={form.lunch_minutes} onChange={number("lunch_minutes")} disabled={disabled} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>Jornada (min) — {fmtMinutes(form.daily_work_minutes)}</span>
|
||||
<input type="number" min={60} max={720} value={form.daily_work_minutes} onChange={number("daily_work_minutes")} disabled={disabled} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>Antecedência retorno (min)</span>
|
||||
<input type="number" min={0} max={60} value={form.entrada2_lead_minutes} onChange={number("entrada2_lead_minutes")} disabled={disabled} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>Antecedência saída (min)</span>
|
||||
<input type="number" min={0} max={60} value={form.saida2_lead_minutes} onChange={number("saida2_lead_minutes")} disabled={disabled} />
|
||||
</label>
|
||||
</div>
|
||||
<label className="field">
|
||||
<span>Fuso horário</span>
|
||||
<input value={form.timezone} onChange={(e) => setForm({ ...form, timezone: e.target.value })} disabled={disabled} />
|
||||
</label>
|
||||
|
||||
<fieldset className="fieldset">
|
||||
<legend>Janela de consulta</legend>
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" checked={useGlobal} onChange={(e) => setUseGlobal(e.target.checked)} disabled={disabled} />
|
||||
Usar padrão global
|
||||
</label>
|
||||
{useGlobal ? (
|
||||
<p className="muted">
|
||||
Janela global: {effectiveWindow.query_window_start} às {effectiveWindow.query_window_end} (confirmação{" "}
|
||||
{effectiveWindow.day_check_deadline}, reverificações até {effectiveWindow.no_points_recheck_until}).
|
||||
</p>
|
||||
) : (
|
||||
<WindowFields value={windowValue} onChange={setWindowValue} disabled={disabled} />
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
{!disabled && (
|
||||
<button className="btn primary" type="submit" disabled={busy}>
|
||||
{busy ? "Salvando…" : "Salvar jornada"}
|
||||
</button>
|
||||
)}
|
||||
{message && <p className={message.ok ? "ok-text" : "error-text"}>{message.text}</p>}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
/** Consulta ao vivo na PontoMais (não é automática para não gastar consultas à toa). */
|
||||
export function TodayPanel({ userId, canTest }: { userId: number; canTest: boolean }) {
|
||||
const [today, setToday] = useState<Today | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function load(test: boolean) {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const path = test ? `/users/${userId}/credentials/test` : `/users/${userId}/today`;
|
||||
setToday(await apiFetch<Today>(path, { method: test ? "POST" : "GET" }));
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="actions">
|
||||
<button className="btn secondary" type="button" onClick={() => load(false)} disabled={busy}>
|
||||
{busy ? "Consultando…" : "Consultar PontoMais agora"}
|
||||
</button>
|
||||
{canTest && (
|
||||
<button className="btn secondary" type="button" onClick={() => load(true)} disabled={busy}>
|
||||
Testar credencial
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="error-text">{error}</p>}
|
||||
{today && (
|
||||
<dl className="kv">
|
||||
<dt>Pontos</dt>
|
||||
<dd>{today.points.length ? today.points.map((p) => fmtClock(p, today.timezone)).join(" · ") : "nenhum"}</dd>
|
||||
{today.invalid && (
|
||||
<>
|
||||
<dt>Atenção</dt>
|
||||
<dd className="error-text">pontos repetidos ou fora de ordem</dd>
|
||||
</>
|
||||
)}
|
||||
{today.overtime && (
|
||||
<>
|
||||
<dt>Atenção</dt>
|
||||
<dd>mais de quatro pontos (hora extra, fora do escopo)</dd>
|
||||
</>
|
||||
)}
|
||||
<dt>Retorno previsto</dt>
|
||||
<dd>{fmtClock(today.entrada2_at, today.timezone)}</dd>
|
||||
<dt>Saída prevista</dt>
|
||||
<dd>{today.saida2_error ? <span className="error-text">{today.saida2_error}</span> : fmtClock(today.saida2_at, today.timezone)}</dd>
|
||||
<dt>Situação do dia</dt>
|
||||
<dd>{dayStatusLabel[today.day_state.status]}</dd>
|
||||
</dl>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user