210 lines
7.8 KiB
TypeScript
210 lines
7.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|