58c972c4c9
Re-offering a PDF that is already in the register did the safe thing — nothing was written, no income double-counted — but reported it as a failure, which was wrong twice over. No toast fired, so if the dialog were not in front of you the click looked unacknowledged; and it filed an entry in the retry inbox, where a duplicate is a trap: re-offering it can never succeed unless the original is deleted first, so it sat in a list of things to fix that could not be fixed. Duplicates now get their own status. Nothing is written, no inbox entry is created, the dialog closes and a notice toast names the copy already held — site, line count and total — so it is obvious which one it matched. Amber rather than teal, because nothing was imported and a success-coloured toast would misread. Verified by re-uffering PHI 169: invoices 10->10, lines 31->31, inbox 7->7, failed 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
80 lines
No EOL
2.8 KiB
TypeScript
80 lines
No EOL
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { CheckCircle2, Info, X } from "lucide-react";
|
|
|
|
// A minimal toast for a confirmed import. Deliberately not a dependency: the app needs
|
|
// exactly one, and a full toast library would ship far more surface than that justifies.
|
|
//
|
|
// Both fills come from the existing palette rather than inventing hues: #00798C teal is
|
|
// this app's success colour (the "All booked" badge, the income tiles), and #EDAE49 sunny
|
|
// is its existing attention/amber accent.
|
|
//
|
|
// Announced politely rather than assertively — a confirmation is not urgent, and it
|
|
// should not interrupt whatever a screen reader is currently saying.
|
|
export function Toast({
|
|
message,
|
|
detail,
|
|
tone = "success",
|
|
onDismiss,
|
|
duration = 6000,
|
|
}: {
|
|
message: string;
|
|
detail?: string;
|
|
// "success" = it was imported. "notice" = nothing was added, but nothing is wrong
|
|
// either — e.g. the file was already in the register.
|
|
tone?: "success" | "notice";
|
|
onDismiss: () => void;
|
|
duration?: number;
|
|
}) {
|
|
const [leaving, setLeaving] = useState(false);
|
|
|
|
const close = () => {
|
|
setLeaving(true);
|
|
setTimeout(onDismiss, 200); // let the transition run before unmounting
|
|
};
|
|
|
|
useEffect(() => {
|
|
const t = setTimeout(close, duration);
|
|
return () => clearTimeout(t);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [message, detail, duration]);
|
|
|
|
return (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
className={`pointer-events-none fixed z-[60] inset-x-3 sm:inset-x-auto sm:right-6 sm:w-auto sm:max-w-sm
|
|
pt-[max(0.75rem,env(safe-area-inset-top))] sm:pt-0 sm:top-6
|
|
transition-all duration-200 ease-out
|
|
${leaving ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`}
|
|
>
|
|
<div
|
|
className={`pointer-events-auto flex items-start gap-3 px-4 py-3 rounded-xl text-white
|
|
shadow-xl border border-white/15 ${
|
|
tone === "notice"
|
|
? "bg-[#EDAE49] shadow-amber-900/20"
|
|
: "bg-[#00798C] shadow-teal-900/20"
|
|
} ${leaving ? "" : "ring-1 ring-white/25"}`}
|
|
>
|
|
{tone === "notice" ? (
|
|
<Info className="w-5 h-5 text-white shrink-0 mt-0.5" />
|
|
) : (
|
|
<CheckCircle2 className="w-5 h-5 text-white shrink-0 mt-0.5" />
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-semibold text-white">{message}</div>
|
|
{detail && <div className="text-sm text-white/85 mt-0.5 break-words">{detail}</div>}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={close}
|
|
aria-label="Dismiss"
|
|
className="grid place-items-center w-11 h-11 -mr-2 -my-1 rounded-lg text-white/80 hover:bg-white/15 hover:text-white transition shrink-0"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |