Soumission {dirty && · modifiée}
{quoteId || brouillon non sauvegardé}
{statusLabel.label}
{status === "brouillon" ? (
) : (
)}
);
};
// ═══════════════════════════════════════════════════════════════════
// App — racine : auth gate, routes, save logic
// ═══════════════════════════════════════════════════════════════════
const App = () => {
const { session, user, profile, isAdmin, loading: authLoading, signIn, signOut } = useAuth();
const [view, setView] = useState("repository"); // "repository" | "configurator"
const [state, setState] = useState(buildInitialState);
const [submissionId, setSubmissionId] = useState(null); // null = brouillon non sauvegardé
const [submissionStatus, setSubmissionStatus] = useState("brouillon");
const [dirty, setDirty] = useState(false);
const [busy, setBusy] = useState(false);
const [viewMode, setViewMode] = useState("internal");
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// ───── Apply tweaks (accent, density, preview width) ─────
useEffect(() => {
const root = document.documentElement;
root.style.setProperty("--raycom-accent", t.accent);
const hex = t.accent.replace("#", "");
const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
root.style.setProperty("--raycom-accent-dim", `rgba(${r},${g},${b},0.08)`);
root.style.setProperty("--raycom-accent-tint", `rgba(${r},${g},${b},0.16)`);
root.style.setProperty("--raycom-accent-dark", `rgb(${Math.round(r*0.55)},${Math.round(g*0.55)},${Math.round(b*0.65)})`);
root.style.setProperty("--raycom-accent-light", `rgb(${Math.min(255,Math.round(r+50))},${Math.min(255,Math.round(g+50))},${Math.min(255,Math.round(b+50))})`);
}, [t.accent]);
useEffect(() => {
const root = document.documentElement;
if (t.density === "compact") root.style.fontSize = "13px";
else if (t.density === "comfy") root.style.fontSize = "15px";
else root.style.fontSize = "14px";
}, [t.density]);
// ───── Marquer "dirty" sur toute modification du state ─────
const setStateTracked = useCallback((next) => {
setDirty(true);
setState(next);
}, []);
const calc = useMemo(() => window.RAYCAST_CALC.fullCalc(state), [state]);
// ───── Actions : Nouvelle soumission ─────
const handleNew = useCallback(() => {
setState(buildInitialState());
setSubmissionId(null);
setSubmissionStatus("brouillon");
setDirty(false);
setView("configurator");
}, []);
// ───── Actions : Ouvrir une soumission existante ─────
const handleOpen = useCallback(async (id) => {
setBusy(true);
try {
const row = await window.RaycastDB.getSubmission(id);
if (!row) throw new Error("Soumission introuvable");
const loaded = { ...row.data, quote_id: row.number };
// S'assurer que client.client_id est rempli
if (loaded.client && row.client_id) loaded.client.client_id = row.client_id;
setState(loaded);
setSubmissionId(row.id);
setSubmissionStatus(row.status);
setDirty(false);
setView("configurator");
} catch (e) {
alert("Erreur d'ouverture : " + (e.message || e));
} finally {
setBusy(false);
}
}, []);
// ───── Actions : Sauvegarder (brouillon ou maj) ─────
const persist = useCallback(async ({ send = false } = {}) => {
if (!user) return;
setBusy(true);
try {
// 1) Upsert client (crée ou met à jour la fiche du répertoire)
const clientId = await window.RaycastDB.upsertClientFromState(state.client, user.id);
const stateWithClient = { ...state, client: { ...state.client, client_id: clientId } };
let saved;
if (!submissionId) {
// Création initiale — un numéro est attribué automatiquement par createSubmission
saved = await window.RaycastDB.createSubmission({
state: stateWithClient, calc, userId: user.id, clientId
});
}
// Maj (le numéro est déjà attribué dès la création — plus besoin de l'assigner ici)
const targetId = saved ? saved.id : submissionId;
const currentNumber = saved ? saved.number : state.quote_id;
const finalRow = await window.RaycastDB.saveSubmission({
id: targetId,
state: stateWithClient,
calc,
userId: user.id,
clientId,
currentNumber
});
// Mise à jour du statut si envoi
let finalStatus = submissionStatus;
if (send && finalRow.status === "brouillon") {
const upd = await window.RaycastDB.setSubmissionStatus(targetId, "envoye");
finalStatus = upd.status;
} else {
finalStatus = finalRow.status;
}
setSubmissionId(targetId);
setSubmissionStatus(finalStatus);
setState({ ...stateWithClient, quote_id: finalRow.number });
setDirty(false);
} catch (e) {
console.error(e);
alert("Sauvegarde échouée : " + (e.message || e));
} finally {
setBusy(false);
}
}, [user, state, calc, submissionId, submissionStatus]);
const handleSave = useCallback(() => persist({ send: false }), [persist]);
const handleSend = useCallback(() => {
if (!confirm("Marquer cette soumission comme « envoyée » au client ?\n\nLe statut passera de brouillon à envoyée et tu ne pourras plus la modifier librement.")) return;
persist({ send: true });
}, [persist]);
// ───── Charger un client depuis le répertoire ─────
const handlePickClient = useCallback((c) => {
setStateTracked({
...state,
client: {
...state.client,
client_id: c.id,
name: c.name || "",
phone: c.phone || "",
email: c.email || "",
address_civic: c.address_civic || "",
address_apt: c.address_apt || "",
address_street: c.address_street || "",
address_city: c.address_city || "",
address_postal: c.address_postal || "",
address_province: c.address_province || "QC",
source: c.source || state.client.source,
region_id: c.region_id || state.client.region_id
}
});
}, [state, setStateTracked]);
// Exposer le handler pour que le Configurator y accède sans prop drilling
useEffect(() => {
window.RAYCAST_PICK_CLIENT = handlePickClient;
return () => { delete window.RAYCAST_PICK_CLIENT; };
}, [handlePickClient]);
// ───── Layout ─────
const previewGrid = t.previewWidth === "wide"
? "minmax(380px, 1fr) minmax(520px, 1.4fr) 320px"
: t.previewWidth === "compact"
? "minmax(440px, 1.2fr) minmax(380px, 1fr) 320px"
: "minmax(420px, 1fr) minmax(440px, 1.1fr) 320px";
// ─── 1) Loading auth ───
if (authLoading) return