// ============================================================
// Polycall — application : qualification + routeur par rôle
// ============================================================
const EMPTY_DRAFT = { code: null, devis: "", rappelDate: "", rappelHeure: "", sav: "" };
const nowHM = () => { const d = new Date(); return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0"); };
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "density": "regular", "timer": true }/*EDITMODE-END*/;
/* ---------- barre d'action ---------- */
function ActionBar({ tab, setTab, draft, qualified, onReset, onQualify }) {
const op = useOp();
const cur = draft.code ? op.byCode(draft.code) : null;
const ready = cur && (cur.needs !== "rappel" || (draft.rappelDate && draft.rappelHeure));
if (qualified) {
return (
Fiche déjà qualifiée et clôturée.
);
}
return (
{cur
? {cur.label}
{!ready && — précisez la date et l'heure}
: Sélectionnez un code conclusion pour clôturer.}
{tab === "fiche"
?
: <>
{draft.code && }
}
);
}
/* ---------- bandeau fiche traitée ---------- */
function QualifiedBanner({ fiche }) {
const op = useOp();
const c = op.byCode(fiche.conclusion.code);
const cc = fiche.conclusion;
return (
Code conclusion
{c ? c.label : cc.code}
{cc.rappelDate && Rappel : {cc.rappelDate} à {cc.rappelHeure}}
{cc.devis && Réf. : {cc.devis}}
Clôturée à {fiche.qualifiedAt}
);
}
/* ---------- résultats de recherche ---------- */
function SearchResults({ query, clients, onPick, onClose }) {
const q = query.trim().toLowerCase();
if (!q) return null;
const matchC = clients.filter((c) => [c.nom, c.prenom, c.societe, c.num, c.tel, c.ville].join(" ").toLowerCase().includes(q));
return (
<>
Clients existants · {matchC.length}
{matchC.length === 0 &&
Aucun client trouvé. Créez une fiche vierge.
}
{matchC.slice(0, 6).map((c) => (
))}
);
}
/* ====================== APP DE QUALIFICATION (agent / pilotage) ====================== */
function QualificationApp({ op, user, onLogout, onExit, exitLabel, updateFiches }) {
const opCtx = useMemo(() => ({
op, codes: op.codes, groups: groupsOf(op.codes),
byCode: (c) => findCode(op.codes, c), forFlux: (f) => forFlux(op.codes, f),
}), [op]);
useEffect(() => { applyAccent(op.accent); }, [op.accent]);
const fiches = useMemo(() => op.fiches.filter(isLive), [op.fiches]);
const firstAttente = fiches.find((f) => f.status === "attente");
const [selectedId, setSelectedId] = useState(firstAttente ? firstAttente.id : (fiches[0] && fiches[0].id));
const [tab, setTab] = useState("attente");
const [fluxFilter, setFluxFilter] = useState("tous");
const [ficheTab, setFicheTab] = useState("fiche");
const [drafts, setDrafts] = useState({});
const [query, setQuery] = useState("");
const [dash, setDash] = useState(false);
const [toast, setToast] = useState(null);
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
const fiche = fiches.find((f) => f.id === selectedId) || null;
const draft = (fiche && drafts[fiche.id]) || EMPTY_DRAFT;
const setDraft = (u) => setDrafts((d) => ({ ...d, [fiche.id]: typeof u === "function" ? u(d[fiche.id] || EMPTY_DRAFT) : u }));
const stats = useMemo(() => {
const attente = fiches.filter((f) => f.status === "attente").length;
const done = fiches.filter((f) => f.status === "traitee");
const won = done.filter((f) => { const c = findCode(op.codes, f.conclusion.code); return c && c.tone === "good"; }).length;
return { attente, traitees: done.length, taux: done.length ? Math.round(won / done.length * 100) : 0 };
}, [fiches, op.codes]);
const selectFiche = (id) => { setSelectedId(id); setFicheTab("fiche"); };
const updateField = (key, val) => updateFiches((fs) => fs.map((f) => f.id === selectedId ? { ...f, fields: { ...f.fields, [key]: val } } : f));
const updateType = (type) => updateFiches((fs) => fs.map((f) => f.id === selectedId ? { ...f, type } : f));
const updateCanal = (canal) => {
updateFiches((fs) => fs.map((f) => f.id === selectedId ? { ...f, canal } : f));
if (fiche) PolycallAPI.updateFiche(selectedId, fiche.fields, fiche.type, canal);
};
const resetDraft = () => setDraft({ ...EMPTY_DRAFT });
const qualify = () => {
const conclusion = { code: draft.code, devis: draft.devis, rappelDate: draft.rappelDate, rappelHeure: draft.rappelHeure, sav: draft.sav };
const t = nowHM();
PolycallAPI.updateFiche(selectedId, fiche.fields, fiche.type);
PolycallAPI.qualifyFiche(selectedId, conclusion);
updateFiches((fs) => fs.map((f) => f.id === selectedId ? { ...f, status: "traitee", conclusion, qualifiedAt: t } : f));
const c = findCode(op.codes, draft.code);
setToast({ label: c ? c.label : draft.code }); setTimeout(() => setToast(null), 3200);
const rest = fiches.filter((f) => f.status === "attente" && f.id !== selectedId);
if (rest.length) { setSelectedId(rest[0].id); }
setFicheTab("fiche");
};
const reopen = () => { PolycallAPI.reopenFiche(selectedId); updateFiches((fs) => fs.map((f) => f.id === selectedId ? { ...f, status: "attente", conclusion: null, qualifiedAt: null } : f)); };
const newFiche = async (type = "entrant") => {
const channel = type === "entrant" ? "Appel entrant" : "Appel sortant";
const canal = DEFAULT_CHANNEL;
const fields = blankFields();
let id = fid();
const r = await PolycallAPI.createFiche(op.id, type, canal, channel, fields);
if (r && r.id) id = r.id;
const nf = { id, type, status: "attente", waiting: "00:00", channel, canal, fields, conclusion: null, qualifiedAt: null, deletedAt: null };
updateFiches((fs) => [nf, ...fs]); setTab("attente"); setSelectedId(id); setFicheTab("fiche");
};
const pickClient = async (c) => {
const fields = { ...blankFields(), civilite: c.civilite, nom: c.nom, prenom: c.prenom, societe: c.societe, clientNum: c.num, adresse: c.adresse, cp: c.cp, ville: c.ville, tel: c.tel, email: c.email, matricule: c.matricule };
const canal = DEFAULT_CHANNEL;
let id = fid();
const r = await PolycallAPI.createFiche(op.id, "entrant", canal, "Appel entrant", fields);
if (r && r.id) id = r.id;
const nf = { id, type: "entrant", status: "attente", waiting: "00:00", channel: "Appel entrant", canal, fields, conclusion: null, qualifiedAt: null, deletedAt: null };
updateFiches((fs) => [nf, ...fs]); setQuery(""); setTab("attente"); setSelectedId(id); setFicheTab("fiche");
};
const qualified = fiche && fiche.status === "traitee";
const exportNow = () => downloadFiches(fiches.filter((f) => f.status === "traitee"), op.codes, "polycall_" + op.id + "_traitees_" + new Date().toISOString().slice(0, 10) + ".csv");
return (
setDash(true)}
onExport={exportNow} user={user} onLogout={onLogout} onExit={onExit} exitLabel={exitLabel} />
setQuery("")} />
{!fiche ? (
Sélectionnez une fiche
Choisissez une fiche dans la file d'attente, ou créez-en une nouvelle.
) : (
<>
{ficheTab === "fiche"
? <>{qualified &&
}
: qualified
?
Cette fiche est clôturée. Rouvrez-la pour modifier la qualification.
:
}
)}
{dash &&
setDash(false)} />}
setTweak("density", v)} />
setTweak("timer", v)} />
{toast && (
Fiche qualifiée et clôturée
{toast.label}
)}
);
}
/* ---------- agent sans opération assignée ---------- */
function NoOp({ user, onLogout }) {
return (
Aucune opération assignée
Votre compte n'est rattaché à aucune opération. Contactez votre administrateur.
);
}
/* ---------- écran de chargement ---------- */
function BootSplash() {
return (
);
}
/* ====================== ROUTEUR PAR RÔLE ====================== */
function Root() {
const [operations, setOperations] = useState(() => cloneOperations());
const [accounts, setAccounts] = useState(() => ACCOUNTS.map((a) => ({ ...a })));
const [brand, setBrand] = useState({ logo: null });
const [theme, setTheme] = useState(() => { try { return localStorage.getItem("polycall-theme") === "dark" ? "dark" : "light"; } catch (e) { return "light"; } });
const [user, setUser] = useState(null);
const [activeOpId, setActiveOpId] = useState(null);
const [apiMode, setApiMode] = useState(false);
const [booting, setBooting] = useState(true);
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
try { localStorage.setItem("polycall-theme", theme); } catch (e) {}
}, [theme]);
const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
const brandValue = useMemo(() => ({ logo: brand.logo, theme, toggleTheme }), [brand.logo, theme]);
// Détection du serveur : si présent, on charge l'état réel ; sinon mode démo.
useEffect(() => { (async () => {
const ok = await PolycallAPI.detect();
setApiMode(ok);
if (ok && PolycallAPI.hasToken()) {
try {
const me = await PolycallAPI.me();
const data = await PolycallAPI.bootstrap();
setOperations(data.operations); setAccounts(data.accounts || []); setBrand(data.brand || { logo: null }); setUser(me);
} catch (e) { PolycallAPI.logout(); }
}
setBooting(false);
})(); }, []);
const updateOp = (id, fn) => setOperations((ops) => ops.map((o) => o.id === id ? fn(o) : o));
const login = async (creds) => {
if (apiMode) {
const u = await PolycallAPI.login(creds.email, creds.password); // peut lever une erreur
const data = await PolycallAPI.bootstrap();
setOperations(data.operations); setAccounts(data.accounts || []); setBrand(data.brand || { logo: null });
setUser(u); setActiveOpId(null);
} else { setUser(creds); setActiveOpId(null); }
};
const logout = () => { PolycallAPI.logout(); setUser(null); setActiveOpId(null); };
const saveBrand = (b) => { setBrand(b); PolycallAPI.saveBrand(b.logo); };
// hors opération (login / console / chooser) : accent plateforme par défaut
useEffect(() => {
const inOp = user && (user.role === "user" || activeOpId);
if (!inOp) applyAccent(["#d12b2b", "#a81f1f", "#fbecec", "#f6dcdc"]);
}, [user, activeOpId]);
// admin avec une seule opération : entrée directe
useEffect(() => {
if (user && user.role === "admin" && !activeOpId) {
const my = operations.filter((o) => user.operationIds.includes(o.id));
if (my.length === 1) setActiveOpId(my[0].id);
}
}, [user, activeOpId, operations]);
const renderScreen = () => {
if (booting) return ;
if (!user) return ;
if (user.role === "user") {
const op = operations.find((o) => o.id === user.operationIds[0]);
if (!op) return ;
return updateOp(op.id, (o) => ({ ...o, fiches: fn(o.fiches) }))} />;
}
if (user.role === "visitor") {
const op = operations.find((o) => o.id === user.operationIds[0]);
if (!op) return ;
return updateOp(op.id, fn)} onLogout={logout} />;
}
if (user.role === "super") {
if (activeOpId) {
const op = operations.find((o) => o.id === activeOpId);
if (!op) { setActiveOpId(null); return null; }
return updateOp(op.id, fn)}
onExit={() => setActiveOpId(null)} exitLabel="Retour à l'administration" onLogout={logout} />;
}
return ;
}
// admin
if (!activeOpId) return ;
const op = operations.find((o) => o.id === activeOpId);
if (!op) { setActiveOpId(null); return null; }
return updateOp(op.id, fn)}
onExit={() => setActiveOpId(null)} exitLabel="Changer d'opération" onLogout={logout} />;
};
return {renderScreen()};
}
ReactDOM.createRoot(document.getElementById("root")).render();