Intégration complète à l'écosystème Groupe KA
- Design : ka-ui vendoré (tokens.css importé avant le CSS local), accent officiel cyan #0c8599 (fin du lime hérité), socle dédupliqué, badge « Un service Groupe KA » au header (desktop + mobile, zéro débordement à 360/768/1440), prefooter local + KaFooter commun, page /contact (ecosystem.json), title « Job-Ka — Un service Groupe KA », assets og.png/favicon.svg/apple-touch-icon + meta OG/Twitter absolues. - SSO KA ID : jobka/auth.py (client job-ka, cookie jobka_session, table users), bouton « Se connecter avec KA » au header, testé bout-en-bout jusqu'au hub (307 → /connexion, client reconnu). - Stats : /api/stats/dashboard (contrat SPEC, cache 5 min, salaires bornés 25–400 k$, série date_posted réelle) + /api/stats/report (PDF fpdf2 via jobka/kapdf.py, complet + synthèse), page /stats refaite sur ka/stats/kacharts.tsx ; /api/stats historique conservé pour le hub. - KA Agent : widget ka-agent.js câblé (site job-ka). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
24 changed files +3,546 −132
modified
frontend/index.html
+17 −4
@@ -13,15 +13,28 @@ Créé : 2026-08-17 Modifié : 2026-08-17 | ||
| 13 | 13 | <head> |
| 14 | 14 | <meta charset="UTF-8" /> |
| 15 | 15 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 16 | − <meta name="description" content="Job·Ka — toutes les offres d'emploi des employeurs québécois, directement à la source. Salaires transparents, zéro boîte noire." /> | |
| 17 | − <title>Job·Ka — L'emploi au Québec, à la source</title> | |
| 18 | − <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23141814'/%3E%3Ctext x='32' y='42' font-family='Inter,sans-serif' font-size='28' font-weight='800' fill='%23d9f26b' text-anchor='middle'%3EJ·K%3C/text%3E%3C/svg%3E" /> | |
| 16 | + <meta name="description" content="Job·Ka — toutes les offres d'emploi des employeurs québécois, directement à la source. Salaires transparents, zéro boîte noire. Un service Groupe KA." /> | |
| 17 | + <title>Job-Ka — Un service Groupe KA</title> | |
| 18 | + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | |
| 19 | + <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> | |
| 20 | + <meta property="og:title" content="Job-Ka — Un service Groupe KA" /> | |
| 21 | + <meta property="og:description" content="Toutes les offres d'emploi des employeurs québécois, directement à la source. Salaires transparents, zéro boîte noire." /> | |
| 22 | + <meta property="og:type" content="website" /> | |
| 23 | + <meta property="og:url" content="https://www.job-ka.com/" /> | |
| 24 | + <meta property="og:image" content="https://www.job-ka.com/og.png" /> | |
| 25 | + <meta property="og:image:width" content="1200" /> | |
| 26 | + <meta property="og:image:height" content="630" /> | |
| 27 | + <meta name="twitter:card" content="summary_large_image" /> | |
| 28 | + <meta name="twitter:image" content="https://www.job-ka.com/og.png" /> | |
| 19 | 29 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 20 | 30 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 21 | − <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| 31 | + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 22 | 32 | </head> |
| 23 | 33 | <body> |
| 24 | 34 | <div id="root"></div> |
| 25 | 35 | <script type="module" src="/src/main.tsx"></script> |
| 36 | + <!-- KA Agent : assistant IA commun de l'écosystème Groupe KA --> | |
| 37 | + <script>window.KA_AGENT={site:"job-ka"}</script> | |
| 38 | + <script src="/ka-agent.js" defer></script> | |
| 26 | 39 | </body> |
| 27 | 40 | </html> |
added
frontend/public/apple-touch-icon.png
+0 −0
Binary file not shown.
added
frontend/public/favicon.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#0c8599" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#0c8599" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
frontend/public/ka-agent.js
+233 −0
@@ -0,0 +1,233 @@ | ||
| 1 | +/* Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | + * ka-ui/agent/ka-agent.js — KA AGENT : widget de chat commun de l'écosystème | |
| 3 | + * Groupe KA. Vanilla JS, zéro dépendance, injecté sur les 13 sites. | |
| 4 | + * <script>window.KA_AGENT={site:"lou-ka"}</script> | |
| 5 | + * <script src="/ka-agent.js" defer></script> | |
| 6 | + * Bulle flottante en bas à droite → panneau de chat (bulle) → plein écran (⛶). | |
| 7 | + * Flux SSE en direct depuis le backend central (texte token par token + | |
| 8 | + * indicateur d'outil). Historique conservé en localStorage (par site). | |
| 9 | + */ | |
| 10 | +(function () { | |
| 11 | + "use strict"; | |
| 12 | + var CFG = window.KA_AGENT || {}; | |
| 13 | + var SITE = CFG.site || "groupe-ka"; | |
| 14 | + var ENDPOINT = CFG.endpoint || "https://www.api-ka.com/api/agent/chat"; | |
| 15 | + var KEY = "ka-agent-" + SITE; | |
| 16 | + var MAXLOG = 20; | |
| 17 | + | |
| 18 | + /* ---------- styles ---------- */ | |
| 19 | + var css = ` | |
| 20 | + .kaa-btn{position:fixed;right:18px;bottom:18px;z-index:2147483000;width:58px;height:58px; | |
| 21 | + border-radius:50%;border:2px solid var(--ink,#141814);background:var(--accent,#d9f26b); | |
| 22 | + color:var(--on-accent,#141814);font:700 17px/1 "Space Grotesk",system-ui,sans-serif; | |
| 23 | + cursor:pointer;box-shadow:4px 4px 0 rgba(20,24,20,.85);display:flex;align-items:center; | |
| 24 | + justify-content:center;transition:transform .15s;padding-bottom:env(safe-area-inset-bottom,0)} | |
| 25 | + .kaa-btn:hover{transform:translate(-2px,-2px)} | |
| 26 | + .kaa-panel{position:fixed;right:16px;bottom:86px;z-index:2147483001;width:min(392px,calc(100vw - 24px)); | |
| 27 | + height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee); | |
| 28 | + border:2px solid var(--ink,#141814);border-radius:14px;box-shadow:8px 8px 0 rgba(20,24,20,.85); | |
| 29 | + overflow:hidden;font-family:Inter,system-ui,sans-serif} | |
| 30 | + .kaa-panel.kaa-open{display:flex} | |
| 31 | + .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none} | |
| 32 | + .kaa-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--ink,#141814); | |
| 33 | + color:var(--paper,#f5f3ee);flex:none} | |
| 34 | + .kaa-head b{font:700 15px "Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em} | |
| 35 | + .kaa-head .kaa-ka{display:inline-block;background:var(--accent,#d9f26b);color:var(--on-accent,#141814); | |
| 36 | + border-radius:6px;padding:1px 7px 2px;transform:rotate(-2deg);font-weight:700} | |
| 37 | + .kaa-head small{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;opacity:.65} | |
| 38 | + .kaa-head .kaa-sp{flex:1} | |
| 39 | + .kaa-hbtn{width:34px;height:34px;border:1.5px solid rgba(245,243,238,.4);border-radius:8px;background:none; | |
| 40 | + color:var(--paper,#f5f3ee);font-size:15px;cursor:pointer;line-height:1} | |
| 41 | + .kaa-hbtn:hover{border-color:var(--accent,#d9f26b);color:var(--accent,#d9f26b)} | |
| 42 | + .kaa-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px; | |
| 43 | + overscroll-behavior:contain;-webkit-overflow-scrolling:touch} | |
| 44 | + .kaa-msg{max-width:86%;padding:9px 13px;border:1.5px solid var(--ink,#141814);border-radius:12px; | |
| 45 | + font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word} | |
| 46 | + .kaa-msg.kaa-u{align-self:flex-end;background:var(--accent,#d9f26b);color:var(--on-accent,#141814); | |
| 47 | + border-bottom-right-radius:4px} | |
| 48 | + .kaa-msg.kaa-a{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;box-shadow:3px 3px 0 rgba(20,24,20,.12)} | |
| 49 | + .kaa-msg.kaa-a a{color:inherit;text-decoration:underline;text-underline-offset:3px} | |
| 50 | + .kaa-msg.kaa-a b{font-weight:700} | |
| 51 | + .kaa-tool{align-self:flex-start;font:700 10px "JetBrains Mono",monospace;letter-spacing:.07em; | |
| 52 | + text-transform:uppercase;color:var(--ink-2,#4d5551);padding:3px 10px;border:1.5px dashed var(--ink-2,#4d5551); | |
| 53 | + border-radius:999px;background:var(--surface-2,#faf9f5)} | |
| 54 | + .kaa-in{display:flex;gap:8px;padding:11px;border-top:2px solid var(--ink,#141814);background:#fff;flex:none; | |
| 55 | + padding-bottom:calc(11px + env(safe-area-inset-bottom,0))} | |
| 56 | + .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:11px 12px;font:13.5px/1.4 Inter,system-ui,sans-serif; | |
| 57 | + border:1.5px solid var(--ink,#141814);border-radius:9px;background:var(--paper,#f5f3ee);outline:none} | |
| 58 | + .kaa-in button{min-width:52px;min-height:44px;border:1.5px solid var(--ink,#141814);border-radius:9px; | |
| 59 | + background:var(--ink,#141814);color:var(--accent,#d9f26b);font:700 16px "Space Grotesk",system-ui;cursor:pointer} | |
| 60 | + .kaa-in button:disabled{opacity:.45} | |
| 61 | + .kaa-hello{font-size:12.5px;color:var(--ink-2,#4d5551);padding:4px 2px} | |
| 62 | + .kaa-dots::after{content:"…";animation:kaa-b 1.2s infinite} | |
| 63 | + @keyframes kaa-b{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}} | |
| 64 | + @media (max-width:560px){.kaa-panel{right:8px;left:8px;width:auto}} | |
| 65 | + `; | |
| 66 | + | |
| 67 | + /* ---------- markdown minimal (gras, liens, puces) — texte échappé d'abord ---------- */ | |
| 68 | + function esc(s) { | |
| 69 | + return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); | |
| 70 | + } | |
| 71 | + function md(s) { | |
| 72 | + return esc(s) | |
| 73 | + .replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>") | |
| 74 | + .replace(/(https?:\/\/[^\s<)"']+)/g, function (u) { | |
| 75 | + return '<a href="' + u + '" target="_blank" rel="noopener noreferrer">' + u.replace(/^https?:\/\/(www\.)?/, "").slice(0, 40) + "</a>"; | |
| 76 | + }); | |
| 77 | + } | |
| 78 | + | |
| 79 | + /* ---------- état ---------- */ | |
| 80 | + var log = []; | |
| 81 | + try { log = JSON.parse(localStorage.getItem(KEY) || "[]"); } catch (e) {} | |
| 82 | + function save() { try { localStorage.setItem(KEY, JSON.stringify(log.slice(-MAXLOG))); } catch (e) {} } | |
| 83 | + | |
| 84 | + /* ---------- DOM ---------- */ | |
| 85 | + var style = document.createElement("style"); | |
| 86 | + style.textContent = css; | |
| 87 | + document.head.appendChild(style); | |
| 88 | + | |
| 89 | + var btn = document.createElement("button"); | |
| 90 | + btn.className = "kaa-btn"; | |
| 91 | + btn.setAttribute("aria-label", "Ouvrir KA Agent — assistant de l'écosystème Groupe KA"); | |
| 92 | + btn.innerHTML = "Ka"; | |
| 93 | + | |
| 94 | + var panel = document.createElement("div"); | |
| 95 | + panel.className = "kaa-panel"; | |
| 96 | + panel.setAttribute("role", "dialog"); | |
| 97 | + panel.setAttribute("aria-label", "KA Agent"); | |
| 98 | + panel.innerHTML = | |
| 99 | + '<div class="kaa-head"><b>KA<span class="kaa-ka">Agent</span></b><small>Groupe KA · IA</small><span class="kaa-sp"></span>' + | |
| 100 | + '<button class="kaa-hbtn kaa-x1" title="Plein écran" aria-label="Plein écran">⛶</button>' + | |
| 101 | + '<button class="kaa-hbtn kaa-x2" title="Fermer" aria-label="Fermer">✕</button></div>' + | |
| 102 | + '<div class="kaa-log"></div>' + | |
| 103 | + '<div class="kaa-in"><textarea rows="1" placeholder="Posez votre question…" aria-label="Votre question"></textarea>' + | |
| 104 | + "<button aria-label=\"Envoyer\">➤</button></div>"; | |
| 105 | + document.body.appendChild(btn); | |
| 106 | + document.body.appendChild(panel); | |
| 107 | + | |
| 108 | + var logEl = panel.querySelector(".kaa-log"); | |
| 109 | + var ta = panel.querySelector("textarea"); | |
| 110 | + var send = panel.querySelector(".kaa-in button"); | |
| 111 | + | |
| 112 | + function scroll() { logEl.scrollTop = logEl.scrollHeight; } | |
| 113 | + function bubble(cls, html) { | |
| 114 | + var d = document.createElement("div"); | |
| 115 | + d.className = "kaa-msg " + cls; | |
| 116 | + d.innerHTML = html; | |
| 117 | + logEl.appendChild(d); | |
| 118 | + scroll(); | |
| 119 | + return d; | |
| 120 | + } | |
| 121 | + function toolChip(name) { | |
| 122 | + var d = document.createElement("div"); | |
| 123 | + d.className = "kaa-tool kaa-dots"; | |
| 124 | + d.textContent = "🔎 " + name.replace(/_/g, " "); | |
| 125 | + logEl.appendChild(d); | |
| 126 | + scroll(); | |
| 127 | + return d; | |
| 128 | + } | |
| 129 | + | |
| 130 | + function hello() { | |
| 131 | + if (log.length) return; | |
| 132 | + var d = document.createElement("div"); | |
| 133 | + d.className = "kaa-hello"; | |
| 134 | + d.textContent = "👋 Je suis KA Agent, l'assistant de l'écosystème Groupe KA. Posez-moi une question sur ce site, ses données (prix, annonces, stats…) ou sur le groupe."; | |
| 135 | + logEl.appendChild(d); | |
| 136 | + } | |
| 137 | + function render() { | |
| 138 | + logEl.innerHTML = ""; | |
| 139 | + hello(); | |
| 140 | + log.forEach(function (m) { bubble(m.role === "user" ? "kaa-u" : "kaa-a", md(m.content)); }); | |
| 141 | + scroll(); | |
| 142 | + } | |
| 143 | + | |
| 144 | + /* ---------- ouverture / plein écran ---------- */ | |
| 145 | + btn.addEventListener("click", function () { | |
| 146 | + panel.classList.toggle("kaa-open"); | |
| 147 | + if (panel.classList.contains("kaa-open")) { render(); ta.focus(); } | |
| 148 | + }); | |
| 149 | + panel.querySelector(".kaa-x2").addEventListener("click", function () { | |
| 150 | + panel.classList.remove("kaa-open", "kaa-full"); | |
| 151 | + }); | |
| 152 | + panel.querySelector(".kaa-x1").addEventListener("click", function () { | |
| 153 | + panel.classList.toggle("kaa-full"); | |
| 154 | + scroll(); | |
| 155 | + }); | |
| 156 | + | |
| 157 | + /* ---------- envoi + flux SSE ---------- */ | |
| 158 | + var busy = false; | |
| 159 | + function ask() { | |
| 160 | + var q = ta.value.trim(); | |
| 161 | + if (!q || busy) return; | |
| 162 | + busy = true; | |
| 163 | + send.disabled = true; | |
| 164 | + ta.value = ""; | |
| 165 | + log.push({ role: "user", content: q }); | |
| 166 | + save(); | |
| 167 | + bubble("kaa-u", md(q)); | |
| 168 | + var out = bubble("kaa-a", '<span class="kaa-dots"></span>'); | |
| 169 | + var acc = ""; | |
| 170 | + var chips = []; | |
| 171 | + | |
| 172 | + fetch(ENDPOINT, { | |
| 173 | + method: "POST", | |
| 174 | + headers: { "Content-Type": "application/json" }, | |
| 175 | + body: JSON.stringify({ site: SITE, messages: log.slice(-MAXLOG) }), | |
| 176 | + }) | |
| 177 | + .then(function (res) { | |
| 178 | + if (!res.ok || !res.body) throw new Error("HTTP " + res.status); | |
| 179 | + var reader = res.body.getReader(); | |
| 180 | + var dec = new TextDecoder(); | |
| 181 | + var buf = ""; | |
| 182 | + function pump() { | |
| 183 | + return reader.read().then(function (r) { | |
| 184 | + if (r.done) return finish(); | |
| 185 | + buf += dec.decode(r.value, { stream: true }); | |
| 186 | + var blocks = buf.split("\n\n"); | |
| 187 | + buf = blocks.pop(); | |
| 188 | + blocks.forEach(function (b) { | |
| 189 | + var ev = (b.match(/^event: (.+)$/m) || [])[1]; | |
| 190 | + var dm = (b.match(/^data: (.+)$/m) || [])[1]; | |
| 191 | + if (!ev || !dm) return; | |
| 192 | + var data = {}; | |
| 193 | + try { data = JSON.parse(dm); } catch (e) {} | |
| 194 | + if (ev === "delta" && data.text) { | |
| 195 | + acc += data.text; | |
| 196 | + out.innerHTML = md(acc); | |
| 197 | + scroll(); | |
| 198 | + } else if (ev === "tool") { | |
| 199 | + chips.push(toolChip(data.name || "recherche")); | |
| 200 | + logEl.appendChild(out); // la bulle reste après le chip | |
| 201 | + scroll(); | |
| 202 | + } else if (ev === "error") { | |
| 203 | + acc = acc || "Désolé, une erreur est survenue (" + (data.message || "inconnue") + "). Réessayez."; | |
| 204 | + out.innerHTML = md(acc); | |
| 205 | + } | |
| 206 | + }); | |
| 207 | + return pump(); | |
| 208 | + }); | |
| 209 | + } | |
| 210 | + return pump(); | |
| 211 | + }) | |
| 212 | + .catch(function (e) { | |
| 213 | + acc = acc || "Impossible de joindre KA Agent (" + e.message + "). Réessayez dans un instant."; | |
| 214 | + out.innerHTML = md(acc); | |
| 215 | + }) | |
| 216 | + .then(function () { finish(); }); | |
| 217 | + | |
| 218 | + function finish() { | |
| 219 | + if (busy === false) return; | |
| 220 | + busy = false; | |
| 221 | + send.disabled = false; | |
| 222 | + chips.forEach(function (c) { c.classList.remove("kaa-dots"); }); | |
| 223 | + if (!acc) { acc = "Je n'ai pas pu formuler de réponse — réessayez."; out.innerHTML = md(acc); } | |
| 224 | + log.push({ role: "assistant", content: acc }); | |
| 225 | + save(); | |
| 226 | + scroll(); | |
| 227 | + } | |
| 228 | + } | |
| 229 | + send.addEventListener("click", ask); | |
| 230 | + ta.addEventListener("keydown", function (e) { | |
| 231 | + if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); ask(); } | |
| 232 | + }); | |
| 233 | +})(); | |
added
frontend/public/og.png
+0 −0
Binary file not shown.
modified
frontend/src/App.tsx
+66 −11
@@ -4,32 +4,82 @@ | ||
| 4 | 4 | * Auteur : Simon-Pierre Boucher |
| 5 | 5 | * Contact : contact@spboucher.ai |
| 6 | 6 | * Fichier : frontend/src/App.tsx |
| 7 | − * Rôle : Gabarit global (en-tête, navigation, routes, pied de page) | |
| 7 | + * Rôle : Gabarit global (en-tête + badge Groupe KA + connexion KA ID, | |
| 8 | + * navigation, routes, pied de page commun Groupe KA) | |
| 8 | 9 | * Créé : 2026-08-17 Modifié : 2026-08-17 |
| 9 | 10 | * ============================================================================= |
| 10 | 11 | */ |
| 11 | −import { lazy, Suspense } from "react"; | |
| 12 | +import { lazy, Suspense, useEffect, useState } from "react"; | |
| 12 | 13 | import { NavLink, Route, Routes } from "react-router-dom"; |
| 13 | 14 | import Home from "./pages/Home"; |
| 14 | 15 | import JobPage from "./pages/Job"; |
| 15 | 16 | import Sources from "./pages/Sources"; |
| 16 | 17 | import Stats from "./pages/Stats"; |
| 18 | +import Contact from "./pages/Contact"; | |
| 19 | +import GroupeKaBadge from "./ka/GroupeKaBadge"; | |
| 20 | +import KaFooter from "./ka/KaFooter"; | |
| 17 | 21 | |
| 18 | 22 | // MapLibre pèse ~700 kB : chargé uniquement quand on visite /carte |
| 19 | 23 | const MapPage = lazy(() => import("./pages/MapPage")); |
| 20 | 24 | |
| 25 | +interface Me { name: string; email: string; picture: string; ka_id: string } | |
| 26 | + | |
| 27 | +/** Connexion KA ID (hub groupe-ka.com) — bouton ou profil connecté. */ | |
| 28 | +function KaAuth() { | |
| 29 | + const [enabled, setEnabled] = useState(false); | |
| 30 | + const [me, setMe] = useState<Me | null>(null); | |
| 31 | + | |
| 32 | + useEffect(() => { | |
| 33 | + fetch("/api/auth/config") | |
| 34 | + .then((r) => r.json()) | |
| 35 | + .then((c) => setEnabled(Boolean(c.ka))) | |
| 36 | + .catch(() => {}); | |
| 37 | + fetch("/api/me") | |
| 38 | + .then((r) => (r.ok ? r.json() : null)) | |
| 39 | + .then(setMe) | |
| 40 | + .catch(() => {}); | |
| 41 | + }, []); | |
| 42 | + | |
| 43 | + const logout = () => { | |
| 44 | + fetch("/api/auth/logout", { method: "POST" }) | |
| 45 | + .then(() => setMe(null)) | |
| 46 | + .catch(() => {}); | |
| 47 | + }; | |
| 48 | + | |
| 49 | + if (!enabled) return null; | |
| 50 | + if (me) { | |
| 51 | + return ( | |
| 52 | + <span className="auth-user"> | |
| 53 | + {me.picture ? <img src={me.picture} alt="" referrerPolicy="no-referrer" /> : null} | |
| 54 | + <span className="name">{me.name || me.email}</span> | |
| 55 | + <button type="button" onClick={logout}>Déconnexion</button> | |
| 56 | + </span> | |
| 57 | + ); | |
| 58 | + } | |
| 59 | + return ( | |
| 60 | + <a className="btn-ka" href="/api/auth/ka/login"> | |
| 61 | + Se connecter avec <b>KA</b> | |
| 62 | + </a> | |
| 63 | + ); | |
| 64 | +} | |
| 65 | + | |
| 21 | 66 | export default function App() { |
| 22 | 67 | return ( |
| 23 | 68 | <> |
| 24 | 69 | <header className="site"> |
| 25 | 70 | <div className="container"> |
| 26 | 71 | <NavLink to="/" className="logo">Job<em>·</em>Ka</NavLink> |
| 72 | + <GroupeKaBadge dark /> | |
| 27 | 73 | <nav className="main"> |
| 28 | 74 | <NavLink to="/" end className={({ isActive }) => (isActive ? "active" : "")}>Offres</NavLink> |
| 29 | 75 | <NavLink to="/carte" className={({ isActive }) => (isActive ? "active" : "")}>Carte</NavLink> |
| 30 | 76 | <NavLink to="/sources" className={({ isActive }) => (isActive ? "active" : "")}>Employeurs</NavLink> |
| 31 | − <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>Statistiques</NavLink> | |
| 77 | + <NavLink to="/stats" className={({ isActive }) => (isActive ? "active" : "")}>Stats</NavLink> | |
| 78 | + <NavLink to="/contact" className={({ isActive }) => (isActive ? "active" : "")}>Contact</NavLink> | |
| 32 | 79 | </nav> |
| 80 | + <div className="auth-box"> | |
| 81 | + <KaAuth /> | |
| 82 | + </div> | |
| 33 | 83 | </div> |
| 34 | 84 | </header> |
| 35 | 85 | <Routes> |
@@ -42,19 +92,24 @@ export default function App() { | ||
| 42 | 92 | <Route path="/emploi/:uid" element={<JobPage />} /> |
| 43 | 93 | <Route path="/sources" element={<Sources />} /> |
| 44 | 94 | <Route path="/stats" element={<Stats />} /> |
| 95 | + <Route path="/contact" element={<Contact />} /> | |
| 45 | 96 | <Route path="*" element={<div className="container empty"><h2>Page introuvable</h2></div>} /> |
| 46 | 97 | </Routes> |
| 47 | − <footer className="site"> | |
| 98 | + <div className="prefooter"> | |
| 48 | 99 | <div className="container"> |
| 49 | − <span> | |
| 50 | − Une plateforme du <a href="https://www.groupe-ka.com">Groupe KA</a> —{" "} | |
| 51 | − <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a> | |
| 52 | − </span> | |
| 53 | − <span> | |
| 54 | − Chaque offre est traçable à sa source originale. Zéro boîte noire. | |
| 100 | + <span className="baseline"> | |
| 101 | + <b>Job-Ka</b> — Tous les emplois des employeurs québécois, directement | |
| 102 | + à la source. Chaque offre est traçable à sa source originale, zéro | |
| 103 | + boîte noire. | |
| 55 | 104 | </span> |
| 105 | + <NavLink to="/">Offres</NavLink> | |
| 106 | + <NavLink to="/carte">Carte</NavLink> | |
| 107 | + <NavLink to="/sources">Employeurs</NavLink> | |
| 108 | + <NavLink to="/stats">Stats</NavLink> | |
| 109 | + <NavLink to="/contact">Contact</NavLink> | |
| 56 | 110 | </div> |
| 57 | − </footer> | |
| 111 | + </div> | |
| 112 | + <KaFooter siteId="job-ka" /> | |
| 58 | 113 | </> |
| 59 | 114 | ); |
| 60 | 115 | } |
added
frontend/src/ka/GroupeKaBadge.tsx
+21 −0
@@ -0,0 +1,21 @@ | ||
| 1 | +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | +// ka-ui/react/GroupeKaBadge.tsx — badge « Un service Groupe KA », cliquable | |
| 3 | +// vers le hub. À placer dans le header de chaque site (à côté du logo de la | |
| 4 | +// marque). Variante dark pour les surfaces encre. Zone de protection : le | |
| 5 | +// padding interne du badge suffit ; ne rien coller à moins de 8 px du badge. | |
| 6 | +export default function GroupeKaBadge({ dark = false }: { dark?: boolean }) { | |
| 7 | + return ( | |
| 8 | + <a | |
| 9 | + className={`gk-badge${dark ? " gk-badge--dark" : ""}`} | |
| 10 | + href="https://www.groupe-ka.com" | |
| 11 | + target="_blank" | |
| 12 | + rel="noopener noreferrer" | |
| 13 | + aria-label="Un service Groupe KA — visiter le portail de l'écosystème" | |
| 14 | + > | |
| 15 | + Un service | |
| 16 | + <b> | |
| 17 | + Groupe<span className="ka">KA</span> | |
| 18 | + </b> | |
| 19 | + </a> | |
| 20 | + ); | |
| 21 | +} | |
added
frontend/src/ka/KaFooter.tsx
+91 −0
@@ -0,0 +1,91 @@ | ||
| 1 | +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | +// ka-ui/react/KaFooter.tsx — footer commun Groupe KA (fond encre), à vendorer | |
| 3 | +// dans chaque app Vite/React sous frontend/src/ka/. Consomme ecosystem.json : | |
| 4 | +// toute modification des infos de contact se fait dans ka-ui/ecosystem.json | |
| 5 | +// puis se resynchronise sur les 12 sites (voir ka-ui/README.md). | |
| 6 | +import eco from "./ecosystem.json"; | |
| 7 | + | |
| 8 | +type LocalLink = { label: string; href: string }; | |
| 9 | + | |
| 10 | +export default function KaFooter({ | |
| 11 | + siteId, | |
| 12 | + localLegal = [], | |
| 13 | +}: { | |
| 14 | + /** id du site courant dans ecosystem.json (ex. "resto-ka") */ | |
| 15 | + siteId: string; | |
| 16 | + /** pages légales PROPRES au site (ex. /conditions), affichées avant celles du hub */ | |
| 17 | + localLegal?: LocalLink[]; | |
| 18 | +}) { | |
| 19 | + const year = new Date().getFullYear(); | |
| 20 | + const site = eco.sites.find((s) => s.id === siteId); | |
| 21 | + const others = eco.sites.filter((s) => s.id !== siteId); | |
| 22 | + return ( | |
| 23 | + <footer className="ka-footer" id="contact"> | |
| 24 | + <div className="container"> | |
| 25 | + <a | |
| 26 | + className="wordmark" | |
| 27 | + href={eco.hub.url} | |
| 28 | + target={siteId === "groupe-ka" ? undefined : "_blank"} | |
| 29 | + rel="noopener noreferrer" | |
| 30 | + aria-label="Groupe KA — le portail de l'écosystème" | |
| 31 | + > | |
| 32 | + Groupe <span className="ka">KA</span> | |
| 33 | + </a> | |
| 34 | + <p className="desc"> | |
| 35 | + {eco.org.tagline} Des centaines de connecteurs lisent les sites à la | |
| 36 | + source, normalisent la donnée et se resynchronisent seuls.{" "} | |
| 37 | + {site ? ( | |
| 38 | + <> | |
| 39 | + <b style={{ color: "var(--paper)" }}>{site.wordmark}</b> —{" "} | |
| 40 | + {site.tagline} — est un service Groupe KA. | |
| 41 | + </> | |
| 42 | + ) : null} | |
| 43 | + </p> | |
| 44 | + <p className="notice"> | |
| 45 | + <b>{eco.org.disclaimer}</b> | |
| 46 | + </p> | |
| 47 | + <ul className="sites"> | |
| 48 | + {others.map((s) => ( | |
| 49 | + <li key={s.id}> | |
| 50 | + <a href={`https://${s.domain}`} target="_blank" rel="noopener noreferrer"> | |
| 51 | + {s.wordmark} | |
| 52 | + </a> | |
| 53 | + </li> | |
| 54 | + ))} | |
| 55 | + {eco.extraFooterLinks.map((l) => ( | |
| 56 | + <li key={l.href}> | |
| 57 | + <a href={l.href} target="_blank" rel="noopener noreferrer"> | |
| 58 | + {l.label} | |
| 59 | + </a> | |
| 60 | + </li> | |
| 61 | + ))} | |
| 62 | + </ul> | |
| 63 | + <div className="contacts"> | |
| 64 | + {eco.contacts.map((c) => ( | |
| 65 | + <p key={c.email} style={{ margin: 0 }}> | |
| 66 | + <a href={`mailto:${c.email}`}>{c.email}</a> | |
| 67 | + <span>{c.role}</span> | |
| 68 | + </p> | |
| 69 | + ))} | |
| 70 | + </div> | |
| 71 | + <p className="legal"> | |
| 72 | + © {year} {eco.org.copyrightHolder} | |
| 73 | + {localLegal.map((l) => ( | |
| 74 | + <span key={l.href}> | |
| 75 | + {" · "} | |
| 76 | + <a href={l.href}>{l.label}</a> | |
| 77 | + </span> | |
| 78 | + ))} | |
| 79 | + {eco.legal.map((l) => ( | |
| 80 | + <span key={l.href}> | |
| 81 | + {" · "} | |
| 82 | + <a href={l.href} target="_blank" rel="noopener noreferrer"> | |
| 83 | + {l.label} | |
| 84 | + </a> | |
| 85 | + </span> | |
| 86 | + ))} | |
| 87 | + </p> | |
| 88 | + </div> | |
| 89 | + </footer> | |
| 90 | + ); | |
| 91 | +} | |
added
frontend/src/ka/ecosystem.json
+196 −0
@@ -0,0 +1,196 @@ | ||
| 1 | +{ | |
| 2 | + "org": { | |
| 3 | + "name": "Groupe KA", | |
| 4 | + "legalName": "Groupe KA — Simon-Pierre Boucher", | |
| 5 | + "tagline": "Holding québécois d'agrégateurs de produits et services entièrement automatisés.", | |
| 6 | + "disclaimer": "Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons rien et ne sommes partie à aucune transaction.", | |
| 7 | + "copyrightHolder": "Groupe KA — Simon-Pierre Boucher" | |
| 8 | + }, | |
| 9 | + "hub": { | |
| 10 | + "url": "https://www.groupe-ka.com", | |
| 11 | + "loginPath": "/connexion", | |
| 12 | + "signupNote": "La création de compte KA ID se fait sur le hub groupe-ka.com ; chaque site délègue sa connexion via /api/auth/ka/login." | |
| 13 | + }, | |
| 14 | + "contacts": [ | |
| 15 | + { | |
| 16 | + "email": "contact@groupe-ka.com", | |
| 17 | + "role": "Projets, partenariats & données" | |
| 18 | + }, | |
| 19 | + { | |
| 20 | + "email": "info@groupe-ka.com", | |
| 21 | + "role": "Médias & questions générales" | |
| 22 | + }, | |
| 23 | + { | |
| 24 | + "email": "admin@groupe-ka.com", | |
| 25 | + "role": "Légal, vie privée & Loi 25" | |
| 26 | + } | |
| 27 | + ], | |
| 28 | + "legal": [ | |
| 29 | + { | |
| 30 | + "label": "Conditions d'utilisation", | |
| 31 | + "href": "https://www.groupe-ka.com/conditions" | |
| 32 | + }, | |
| 33 | + { | |
| 34 | + "label": "Politique de confidentialité", | |
| 35 | + "href": "https://www.groupe-ka.com/confidentialite" | |
| 36 | + }, | |
| 37 | + { | |
| 38 | + "label": "Protection des renseignements personnels (Loi 25)", | |
| 39 | + "href": "https://www.groupe-ka.com/loi-25" | |
| 40 | + }, | |
| 41 | + { | |
| 42 | + "label": "Transparence des robots d'indexation", | |
| 43 | + "href": "https://www.groupe-ka.com/bots" | |
| 44 | + } | |
| 45 | + ], | |
| 46 | + "sites": [ | |
| 47 | + { | |
| 48 | + "id": "groupe-ka", | |
| 49 | + "wordmark": "Groupe KA", | |
| 50 | + "domain": "www.groupe-ka.com", | |
| 51 | + "accent": "#d9f26b", | |
| 52 | + "accentSoft": "#f0f9d2", | |
| 53 | + "accentDeep": "#123f2e", | |
| 54 | + "onAccent": "#141814", | |
| 55 | + "tagline": "Le portail de l'écosystème ·Ka" | |
| 56 | + }, | |
| 57 | + { | |
| 58 | + "id": "trouve-ka", | |
| 59 | + "wordmark": "Trouve·Ka", | |
| 60 | + "domain": "www.trouve-ka.com", | |
| 61 | + "accent": "#1c7ed6", | |
| 62 | + "accentSoft": "#e7f2fd", | |
| 63 | + "accentDeep": "#14508f", | |
| 64 | + "onAccent": "#ffffff", | |
| 65 | + "tagline": "Le moteur de recherche du web québécois" | |
| 66 | + }, | |
| 67 | + { | |
| 68 | + "id": "lou-ka", | |
| 69 | + "wordmark": "Lou·Ka", | |
| 70 | + "domain": "www.lou-ka.com", | |
| 71 | + "accent": "#ff6a00", | |
| 72 | + "accentSoft": "#fff1e6", | |
| 73 | + "accentDeep": "#cc5500", | |
| 74 | + "onAccent": "#ffffff", | |
| 75 | + "tagline": "Tous les logements à louer" | |
| 76 | + }, | |
| 77 | + { | |
| 78 | + "id": "immo-ka", | |
| 79 | + "wordmark": "Immo·Ka", | |
| 80 | + "domain": "www.immo-ka.com", | |
| 81 | + "accent": "#e23744", | |
| 82 | + "accentSoft": "#fbe0e2", | |
| 83 | + "accentDeep": "#a8232e", | |
| 84 | + "onAccent": "#ffffff", | |
| 85 | + "tagline": "Toutes les propriétés à vendre" | |
| 86 | + }, | |
| 87 | + { | |
| 88 | + "id": "vrai-prix", | |
| 89 | + "wordmark": "Vrai-Prix", | |
| 90 | + "domain": "www.vrai-prix.com", | |
| 91 | + "accent": "#ff5148", | |
| 92 | + "accentSoft": "#ffe3e0", | |
| 93 | + "accentDeep": "#9e2a25", | |
| 94 | + "onAccent": "#ffffff", | |
| 95 | + "tagline": "La valeur réelle de chaque propriété" | |
| 96 | + }, | |
| 97 | + { | |
| 98 | + "id": "auto-ka", | |
| 99 | + "wordmark": "Auto·Ka", | |
| 100 | + "domain": "www.auto-ka.com", | |
| 101 | + "accent": "#ff5a2a", | |
| 102 | + "accentSoft": "#ffe8de", | |
| 103 | + "accentDeep": "#cc3f16", | |
| 104 | + "onAccent": "#ffffff", | |
| 105 | + "tagline": "Les voitures usagées du Québec" | |
| 106 | + }, | |
| 107 | + { | |
| 108 | + "id": "fabri-ka", | |
| 109 | + "wordmark": "Fabri·Ka", | |
| 110 | + "domain": "www.fabri-ka.com", | |
| 111 | + "accent": "#c4532e", | |
| 112 | + "accentSoft": "#f7e3da", | |
| 113 | + "accentDeep": "#a94525", | |
| 114 | + "onAccent": "#ffffff", | |
| 115 | + "tagline": "Les produits fabriqués au Québec" | |
| 116 | + }, | |
| 117 | + { | |
| 118 | + "id": "food-ka", | |
| 119 | + "wordmark": "Food·Ka", | |
| 120 | + "domain": "www.food-ka.com", | |
| 121 | + "accent": "#1f9d55", | |
| 122 | + "accentSoft": "#e2f5ea", | |
| 123 | + "accentDeep": "#157a40", | |
| 124 | + "onAccent": "#ffffff", | |
| 125 | + "tagline": "Les prix d'épicerie, suivis à la source" | |
| 126 | + }, | |
| 127 | + { | |
| 128 | + "id": "resto-ka", | |
| 129 | + "wordmark": "Resto·Ka", | |
| 130 | + "domain": "www.resto-ka.com", | |
| 131 | + "accent": "#f08c00", | |
| 132 | + "accentSoft": "#fdeed7", | |
| 133 | + "accentDeep": "#b96a00", | |
| 134 | + "onAccent": "#141814", | |
| 135 | + "tagline": "Chaque resto, chaque plat, chaque prix" | |
| 136 | + }, | |
| 137 | + { | |
| 138 | + "id": "sorti-ka", | |
| 139 | + "wordmark": "Sorti·Ka", | |
| 140 | + "domain": "www.sorti-ka.com", | |
| 141 | + "accent": "#d6336c", | |
| 142 | + "accentSoft": "#fbe0eb", | |
| 143 | + "accentDeep": "#a12551", | |
| 144 | + "onAccent": "#ffffff", | |
| 145 | + "tagline": "Toutes les sorties, dans les 17 régions" | |
| 146 | + }, | |
| 147 | + { | |
| 148 | + "id": "crea-ka", | |
| 149 | + "wordmark": "Créa·Ka", | |
| 150 | + "domain": "www.crea-ka.com", | |
| 151 | + "accent": "#7048e8", | |
| 152 | + "accentSoft": "#ece5fc", | |
| 153 | + "accentDeep": "#5433b8", | |
| 154 | + "onAccent": "#ffffff", | |
| 155 | + "tagline": "Les créateurs d'ici, tous leurs liens" | |
| 156 | + }, | |
| 157 | + { | |
| 158 | + "id": "api-ka", | |
| 159 | + "wordmark": "API·Ka", | |
| 160 | + "domain": "www.api-ka.com", | |
| 161 | + "accent": "#3b5bdb", | |
| 162 | + "accentSoft": "#e4eafb", | |
| 163 | + "accentDeep": "#2b44a8", | |
| 164 | + "onAccent": "#ffffff", | |
| 165 | + "tagline": "La donnée de l'écosystème, par API" | |
| 166 | + }, | |
| 167 | + { | |
| 168 | + "id": "job-ka", | |
| 169 | + "wordmark": "Job·Ka", | |
| 170 | + "domain": "www.job-ka.com", | |
| 171 | + "accent": "#0c8599", | |
| 172 | + "accentSoft": "#def0f4", | |
| 173 | + "accentDeep": "#095c6b", | |
| 174 | + "onAccent": "#ffffff", | |
| 175 | + "tagline": "Tous les emplois des employeurs québécois" | |
| 176 | + } | |
| 177 | + ], | |
| 178 | + "extraFooterLinks": [ | |
| 179 | + { | |
| 180 | + "label": "ValoPlex", | |
| 181 | + "href": "https://www.valoplex.com" | |
| 182 | + }, | |
| 183 | + { | |
| 184 | + "label": "Ka2", | |
| 185 | + "href": "https://www.ka2.bot" | |
| 186 | + }, | |
| 187 | + { | |
| 188 | + "label": "Ka4", | |
| 189 | + "href": "https://www.ka4.bot" | |
| 190 | + }, | |
| 191 | + { | |
| 192 | + "label": "Ka6", | |
| 193 | + "href": "https://www.ka6.bot" | |
| 194 | + } | |
| 195 | + ] | |
| 196 | +} | |
| \ No newline at end of file | ||
added
frontend/src/ka/stats/SPEC.md
+123 −0
@@ -0,0 +1,123 @@ | ||
| 1 | +# ka-stats — module Stats commun Groupe KA (spec v1) | |
| 2 | + | |
| 3 | +Contrat partagé par les 12 plateformes pour leurs pages **/stats** (tableau de | |
| 4 | +bord analytique) et l'**export PDF** estampillé Groupe-KA. Le visuel suit le | |
| 5 | +design system ka-ui (tokens.css) avec l'accent de la marque. | |
| 6 | + | |
| 7 | +## 1. Page /stats — structure obligatoire (dans cet ordre) | |
| 8 | + | |
| 9 | +1. **Bandeau KPI** : 4–6 grandes cartes (`KpiCard`) — valeur, libellé, | |
| 10 | + variation vs période précédente (▲/▼ + %, vert `--green` / rouge `--danger`). | |
| 11 | +2. **Sélecteur de période global** (`PeriodSelector`) : `aujourd'hui · 7 j · | |
| 12 | + 30 j · 3 m · 6 m · 12 m · année en cours · tout` + plage personnalisée | |
| 13 | + (2 champs date). Toute la page se recalcule (state → refetch dashboard). | |
| 14 | +3. **Graphiques** : courbes d'évolution (`LineChart`, survol = infobulle, | |
| 15 | + légende cliquable pour masquer une série, comparaison N vs N-1 en | |
| 16 | + pointillé), barres (`BarChart`), anneaux (`Donut`), calendrier de chaleur | |
| 17 | + (`CalendarHeatmap`) quand pertinent. | |
| 18 | +4. **Répartition géographique** (par ville/région) quand pertinent — barres | |
| 19 | + horizontales triées (pas besoin de vraie carte). | |
| 20 | +5. **Tableaux détaillés** (`DataTable`) : tri par colonne, recherche interne, | |
| 21 | + pagination (25/pg), débordement horizontal propre sur mobile (.tbl-wrap). | |
| 22 | +6. **Records & faits marquants** : générés depuis les données (jour record, | |
| 23 | + plus forte croissance, meilleure entrée…) — cartes compactes. | |
| 24 | +7. **Fraîcheur** : « Mis à jour le {date heure} » + bouton Rafraîchir. | |
| 25 | +8. **Bouton PDF** bien visible en haut : « Télécharger le rapport PDF » avec | |
| 26 | + deux choix (Rapport complet / Synthèse 2 pages). Indicateur de progression | |
| 27 | + si > 2 s. | |
| 28 | + | |
| 29 | +Responsive : KPI empilés < 768 px, graphiques pleine largeur redimensionnés | |
| 30 | +(SVG viewBox), tableaux en défilement horizontal contenu, tactile ≥ 44 px. | |
| 31 | +AUCUNE donnée inventée : une stat indisponible = bloc « Pas encore mesuré » | |
| 32 | +(carte grise propre), jamais un faux chiffre. | |
| 33 | + | |
| 34 | +## 2. API — contrat commun | |
| 35 | + | |
| 36 | +`GET /api/stats/dashboard?period=7j|30j|3m|6m|12m|annee|tout|auj&from=YYYY-MM-DD&to=YYYY-MM-DD` | |
| 37 | + | |
| 38 | +```jsonc | |
| 39 | +{ | |
| 40 | + "updated": "2026-08-17T21:04:00-04:00", | |
| 41 | + "period": { "from": "2026-07-18", "to": "2026-08-17", "label": "30 jours" }, | |
| 42 | + "kpis": [ { "id": "total", "label": "Annonces actives", "value": 33744, | |
| 43 | + "unit": "", "delta_pct": 4.2, "direction": "up" } ], | |
| 44 | + "series": [ { "id": "vol", "title": "Annonces actives par jour", "unit": "annonces", | |
| 45 | + "kind": "line", "points": [{ "t": "2026-07-18", "v": 31200 }], | |
| 46 | + "compare": [{ "t": "2025-07-18", "v": 24100 }] } ], | |
| 47 | + "breakdowns": [ { "id": "types", "title": "Par type", "kind": "donut", | |
| 48 | + "items": [{ "label": "4½", "value": 9120 }] } ], | |
| 49 | + "geo": { "title": "Par région", "items": [{ "label": "Montréal", "value": 15680 }] }, | |
| 50 | + "heatmap": { "title": "Activité", "cells": [{ "date": "2026-08-01", "value": 210 }] }, | |
| 51 | + "tables": [ { "id": "top", "title": "Top villes", "columns": ["Ville", "Annonces", "Δ 30 j"], | |
| 52 | + "rows": [["Montréal", 15680, "+3,1 %"]] } ], | |
| 53 | + "records": [ { "label": "Jour record d'ajouts", "value": "412 annonces", "date": "2026-08-09" } ] | |
| 54 | +} | |
| 55 | +``` | |
| 56 | + | |
| 57 | +Champs absents = section masquée. Cache serveur recommandé (≥ 5 min par | |
| 58 | +période). Les valeurs proviennent des données réelles (DB de la plateforme, | |
| 59 | +journaux de sync des connecteurs, /api/v1/runs d'API-KA…). | |
| 60 | + | |
| 61 | +`GET /api/stats/report?period=…&from=&to=&mode=complet|synthese` | |
| 62 | +→ `application/pdf`, en-tête `Content-Disposition: attachment; filename= | |
| 63 | +groupe-ka_<plateforme>_stats_<periode>_<YYYY-MM-DD>.pdf`. | |
| 64 | + | |
| 65 | +## 3. PDF — gabarit Groupe-KA (implémentations : `kapdf.py` fpdf2 pour les | |
| 66 | +apps Python ; les apps Next portent le même gabarit en pdfkit) | |
| 67 | + | |
| 68 | +- **Couverture** : cadre encre, kicker « GROUPE KA · RAPPORT STATISTIQUE », | |
| 69 | + wordmark de la plateforme (boîte encre + accent), sous-titre, période | |
| 70 | + couverte, date/heure de génération, bande encre au pied avec | |
| 71 | + « par Groupe KA — groupe-ka.com ». | |
| 72 | +- **Sommaire** avec numéros de pages (mode complet). | |
| 73 | +- **KPI** : grille de cartes (bordure encre, valeur en gros, delta coloré). | |
| 74 | +- **Graphiques VECTORIELS** (dessinés en primitives, jamais de capture) : | |
| 75 | + courbes, barres, anneaux — accent de la plateforme, axes/graduations encre. | |
| 76 | +- **Tableaux** paginés proprement (lignes zébrées `--surface-2`, jamais | |
| 77 | + coupés en deux à cheval sur une ligne). | |
| 78 | +- **Records** puis **page de fin** : coordonnées Groupe KA (3 courriels + | |
| 79 | + rôles d'ecosystem.json, groupe-ka.com), avertissement d'agrégateur, | |
| 80 | + mentions légales courtes. | |
| 81 | +- **Chaque page** : en-tête discret (« Groupe KA · {Plateforme} », filet | |
| 82 | + encre) + pied (« © Groupe-KA — {année} — groupe-ka.com · {période} · p. X/Y »). | |
| 83 | +- A4 portrait, marges 18 mm, typo : Helvetica (fallback sûr) ou fonts TTF du | |
| 84 | + DS si présentes. Mode « synthese » = couverture + 1 page KPI/records. | |
| 85 | + | |
| 86 | +## 4. Spécifique par plateforme (sections métier attendues) | |
| 87 | + | |
| 88 | +- **groupe-ka** : tableau de bord maître — consolidation des 12 (volume total, | |
| 89 | + croissance), classement des plateformes, bloc résumé par plateforme + lien | |
| 90 | + vers sa page /stats ; « Rapport écosystème complet » = PDF consolidé. | |
| 91 | +- **lou-ka** : annonces actives/nouvelles/retirées, loyers moyens/médians par | |
| 92 | + ville & taille, évolution, répartition par type, top villes. | |
| 93 | +- **immo-ka** : annonces actives/nouvelles/vendues-retirées, prix moyen/médian | |
| 94 | + par ville/région/type, délai de présence, top villes, tension du marché. | |
| 95 | +- **vrai-prix** : couverture du rôle (unités, valeur totale), estimations | |
| 96 | + servies si journalisées, répartitions par municipalité/type, indices marché. | |
| 97 | +- **auto-ka** : volume par marque/modèle/année/carburant/boîte, prix moyens et | |
| 98 | + km moyens par segment, top marques/modèles. | |
| 99 | +- **fabri-ka** : produits par catégorie/région/boutique, fourchettes de prix, | |
| 100 | + nouveautés par période, top catégories. | |
| 101 | +- **food-ka** : produits suivis, relevés de prix, soldes détectés (baisses/ | |
| 102 | + hausses, amplitude), top produits en solde, prix moyens par catégorie. | |
| 103 | +- **resto-ka** : restos par cuisine/ville/gamme, menus & plats, nouveautés/ | |
| 104 | + fermetures détectées, top établissements. | |
| 105 | +- **sorti-ka** : événements à venir/passés par catégorie/ville, gratuits vs | |
| 106 | + payants, heatmap calendrier, top lieux. | |
| 107 | +- **crea-ka** : créateurs par plateforme/niche/tier, comptes reliés, top | |
| 108 | + créateurs, croissance du répertoire. | |
| 109 | +- **trouve-ka** : pages indexées, domaines, rythme de crawl (indexées/h), | |
| 110 | + erreurs, file frontier, tendances si les requêtes sont journalisées. | |
| 111 | +- **api-ka** : appels par endpoint/jour/heure, latences moyennes + p95, taux | |
| 112 | + d'erreur, top endpoints, uptime (données des middlewares de logging + runs). | |
| 113 | +- **Transverse (tous)** : volume total agrégé + croissance, connecteurs actifs | |
| 114 | + et éléments ajoutés/mis à jour par période (journaux de sync), complétude/ | |
| 115 | + fraîcheur moyenne des fiches quand mesurable. Trafic web : seulement si des | |
| 116 | + journaux d'accès existent — sinon état vide propre. | |
| 117 | + | |
| 118 | +## 5. Ajouter une métrique / un graphique / une plateforme | |
| 119 | + | |
| 120 | +1 métrique = 1 entrée `kpis[]` ou `series[]` côté API (requête SQL agrégée + | |
| 121 | +cache) — le front la rend automatiquement. 1 plateforme = implémenter les 2 | |
| 122 | +endpoints du contrat + une page /stats montée sur les composants du kit + | |
| 123 | +`kapdf.py` (ou gabarit pdfkit) branché sur le même JSON de dashboard. | |
added
frontend/src/ka/stats/kacharts.tsx
+389 −0
@@ -0,0 +1,389 @@ | ||
| 1 | +// Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | +// ka-ui/stats/kacharts.tsx — kit de graphiques SVG du module Stats commun | |
| 3 | +// Groupe KA (zéro dépendance, React 18+). Style : design system ka-ui | |
| 4 | +// (bordures encre, accent de la plateforme via var(--accent)). | |
| 5 | +// Composants : KpiCard, PeriodSelector, LineChart (infobulle + légende | |
| 6 | +// cliquable + comparaison N-1), BarChart, Donut, CalendarHeatmap, DataTable | |
| 7 | +// (tri/recherche/pagination), RecordCard, PdfButton, EmptyBlock, Fraicheur. | |
| 8 | +import { useMemo, useState } from "react"; | |
| 9 | + | |
| 10 | +/* ---------- types (contrat SPEC.md) ---------- */ | |
| 11 | +export type Kpi = { | |
| 12 | + id: string; label: string; value: number | string; unit?: string; | |
| 13 | + delta_pct?: number | null; direction?: "up" | "down"; | |
| 14 | +}; | |
| 15 | +export type Point = { t: string; v: number }; | |
| 16 | +export type Serie = { | |
| 17 | + id: string; title: string; unit?: string; kind?: "line" | "bar"; | |
| 18 | + points: Point[]; compare?: Point[]; | |
| 19 | +}; | |
| 20 | +export type BreakItem = { label: string; value: number }; | |
| 21 | +export type TableSpec = { id: string; title: string; columns: string[]; rows: (string | number)[][] }; | |
| 22 | +export type RecordFact = { label: string; value: string; date?: string }; | |
| 23 | + | |
| 24 | +export const PERIODS: { id: string; label: string }[] = [ | |
| 25 | + { id: "auj", label: "Aujourd'hui" }, | |
| 26 | + { id: "7j", label: "7 jours" }, | |
| 27 | + { id: "30j", label: "30 jours" }, | |
| 28 | + { id: "3m", label: "3 mois" }, | |
| 29 | + { id: "6m", label: "6 mois" }, | |
| 30 | + { id: "12m", label: "12 mois" }, | |
| 31 | + { id: "annee", label: "Année en cours" }, | |
| 32 | + { id: "tout", label: "Tout" }, | |
| 33 | +]; | |
| 34 | + | |
| 35 | +export const fmtInt = (n: number) => n.toLocaleString("fr-CA"); | |
| 36 | +export const fmtNum = (n: number) => | |
| 37 | + Number.isInteger(n) ? fmtInt(n) : n.toLocaleString("fr-CA", { maximumFractionDigits: 2 }); | |
| 38 | + | |
| 39 | +/* ---------- KPI ---------- */ | |
| 40 | +export function KpiCard({ k }: { k: Kpi }) { | |
| 41 | + const up = (k.direction ?? ((k.delta_pct ?? 0) >= 0 ? "up" : "down")) === "up"; | |
| 42 | + return ( | |
| 43 | + <article className="card" style={{ padding: "14px 16px", minWidth: 0 }}> | |
| 44 | + <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em" }}> | |
| 45 | + {typeof k.value === "number" ? fmtNum(k.value) : k.value} | |
| 46 | + {k.unit ? <span style={{ fontSize: "0.6em", color: "var(--ink-2)" }}> {k.unit}</span> : null} | |
| 47 | + </p> | |
| 48 | + <p className="klabel" style={{ margin: "6px 0 0" }}>{k.label}</p> | |
| 49 | + {k.delta_pct !== undefined && k.delta_pct !== null && ( | |
| 50 | + <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}> | |
| 51 | + {up ? "▲" : "▼"} {k.delta_pct >= 0 ? "+" : ""}{fmtNum(k.delta_pct)} % <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs période préc.</span> | |
| 52 | + </p> | |
| 53 | + )} | |
| 54 | + </article> | |
| 55 | + ); | |
| 56 | +} | |
| 57 | + | |
| 58 | +/* ---------- Sélecteur de période ---------- */ | |
| 59 | +export function PeriodSelector({ | |
| 60 | + value, onChange, custom, onCustom, | |
| 61 | +}: { | |
| 62 | + value: string; onChange: (p: string) => void; | |
| 63 | + custom?: { from: string; to: string }; onCustom?: (from: string, to: string) => void; | |
| 64 | +}) { | |
| 65 | + return ( | |
| 66 | + <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}> | |
| 67 | + {PERIODS.map((p) => ( | |
| 68 | + <button key={p.id} type="button" onClick={() => onChange(p.id)} | |
| 69 | + className="chip" aria-pressed={value === p.id} | |
| 70 | + style={{ cursor: "pointer", minHeight: 44, background: value === p.id ? "var(--accent)" : "var(--surface)", color: value === p.id ? "var(--on-accent)" : "var(--ink)" }}> | |
| 71 | + {p.label} | |
| 72 | + </button> | |
| 73 | + ))} | |
| 74 | + {onCustom && ( | |
| 75 | + <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}> | |
| 76 | + <input className="input" type="date" style={{ width: 150 }} value={custom?.from ?? ""} aria-label="Du" | |
| 77 | + onChange={(e) => onCustom(e.target.value, custom?.to ?? "")} /> | |
| 78 | + <span className="klabel">au</span> | |
| 79 | + <input className="input" type="date" style={{ width: 150 }} value={custom?.to ?? ""} aria-label="Au" | |
| 80 | + onChange={(e) => onCustom(custom?.from ?? "", e.target.value)} /> | |
| 81 | + </span> | |
| 82 | + )} | |
| 83 | + </div> | |
| 84 | + ); | |
| 85 | +} | |
| 86 | + | |
| 87 | +/* ---------- Courbe ---------- */ | |
| 88 | +export function LineChart({ serie, height = 240 }: { serie: Serie; height?: number }) { | |
| 89 | + const [hide, setHide] = useState<{ cur: boolean; cmp: boolean }>({ cur: false, cmp: false }); | |
| 90 | + const [hover, setHover] = useState<number | null>(null); | |
| 91 | + const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26; | |
| 92 | + const pts = serie.points ?? []; | |
| 93 | + if (pts.length < 2) return <EmptyBlock title={serie.title} />; | |
| 94 | + const all = [...(hide.cur ? [] : pts), ...(!hide.cmp && serie.compare ? serie.compare : [])]; | |
| 95 | + const vmax = Math.max(...all.map((p) => p.v), 1); | |
| 96 | + const vmin = Math.min(0, ...all.map((p) => p.v)); | |
| 97 | + const X = (i: number, n: number) => PL + ((W - PL - PR) * i) / (n - 1); | |
| 98 | + const Y = (v: number) => PT + (H - PT - PB) * (1 - (v - vmin) / (vmax - vmin || 1)); | |
| 99 | + const path = (s: Point[]) => s.map((p, i) => `${i ? "L" : "M"}${X(i, s.length)},${Y(p.v)}`).join(""); | |
| 100 | + const hi = hover !== null ? Math.min(pts.length - 1, Math.max(0, hover)) : null; | |
| 101 | + return ( | |
| 102 | + <figure className="card" style={{ margin: 0, padding: 16 }}> | |
| 103 | + <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}> | |
| 104 | + <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{serie.title}</b> | |
| 105 | + <span style={{ display: "flex", gap: 10 }}> | |
| 106 | + <LegendChip label="Période courante" color="var(--accent)" off={hide.cur} onClick={() => setHide((h) => ({ ...h, cur: !h.cur }))} /> | |
| 107 | + {serie.compare && <LegendChip label="Période comparée" color="var(--ink-3)" dashed off={hide.cmp} onClick={() => setHide((h) => ({ ...h, cmp: !h.cmp }))} />} | |
| 108 | + </span> | |
| 109 | + </figcaption> | |
| 110 | + <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10, touchAction: "pan-y" }} role="img" aria-label={serie.title} | |
| 111 | + onMouseMove={(e) => { | |
| 112 | + const r = (e.currentTarget as SVGSVGElement).getBoundingClientRect(); | |
| 113 | + const fx = ((e.clientX - r.left) / r.width) * W; | |
| 114 | + setHover(Math.round(((fx - PL) / (W - PL - PR)) * (pts.length - 1))); | |
| 115 | + }} | |
| 116 | + onMouseLeave={() => setHover(null)}> | |
| 117 | + {[0, 1, 2, 3, 4].map((g) => { | |
| 118 | + const y = PT + ((H - PT - PB) * g) / 4; | |
| 119 | + const v = vmax - ((vmax - vmin) * g) / 4; | |
| 120 | + return ( | |
| 121 | + <g key={g}> | |
| 122 | + <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} /> | |
| 123 | + <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text> | |
| 124 | + </g> | |
| 125 | + ); | |
| 126 | + })} | |
| 127 | + {[0, Math.floor(pts.length / 2), pts.length - 1].map((i) => ( | |
| 128 | + <text key={i} x={X(i, pts.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text> | |
| 129 | + ))} | |
| 130 | + {!hide.cmp && serie.compare && serie.compare.length > 1 && ( | |
| 131 | + <path d={path(serie.compare)} fill="none" stroke="var(--ink-3)" strokeWidth={1.4} strokeDasharray="4 4" /> | |
| 132 | + )} | |
| 133 | + {!hide.cur && <path d={path(pts)} fill="none" stroke="var(--accent)" strokeWidth={2.4} />} | |
| 134 | + {hi !== null && ( | |
| 135 | + <g> | |
| 136 | + <line x1={X(hi, pts.length)} x2={X(hi, pts.length)} y1={PT} y2={H - PB} stroke="var(--ink)" strokeWidth={1} strokeDasharray="2 3" /> | |
| 137 | + <circle cx={X(hi, pts.length)} cy={Y(pts[hi].v)} r={4} fill="var(--accent)" stroke="var(--ink)" strokeWidth={1.5} /> | |
| 138 | + </g> | |
| 139 | + )} | |
| 140 | + </svg> | |
| 141 | + {hi !== null && ( | |
| 142 | + <p className="chip" style={{ marginTop: 8 }}> | |
| 143 | + {pts[hi].t} — <b>{fmtNum(pts[hi].v)}{serie.unit ? ` ${serie.unit}` : ""}</b> | |
| 144 | + {serie.compare?.[hi] && !hide.cmp ? <span style={{ color: "var(--ink-3)" }}> · N-1 : {fmtNum(serie.compare[hi].v)}</span> : null} | |
| 145 | + </p> | |
| 146 | + )} | |
| 147 | + </figure> | |
| 148 | + ); | |
| 149 | +} | |
| 150 | + | |
| 151 | +function LegendChip({ label, color, off, dashed, onClick }: { label: string; color: string; off: boolean; dashed?: boolean; onClick: () => void }) { | |
| 152 | + return ( | |
| 153 | + <button type="button" onClick={onClick} aria-pressed={!off} | |
| 154 | + style={{ display: "inline-flex", alignItems: "center", gap: 6, border: 0, background: "none", cursor: "pointer", opacity: off ? 0.4 : 1, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", minHeight: 44 }}> | |
| 155 | + <span style={{ width: 18, height: 0, borderTop: `3px ${dashed ? "dashed" : "solid"} ${color}` }} /> | |
| 156 | + {label} | |
| 157 | + </button> | |
| 158 | + ); | |
| 159 | +} | |
| 160 | + | |
| 161 | +/* ---------- Barres horizontales (répartitions, géo) ---------- */ | |
| 162 | +export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) { | |
| 163 | + const rows = (items ?? []).slice(0, 14); | |
| 164 | + if (!rows.length) return <EmptyBlock title={title} />; | |
| 165 | + const max = Math.max(...rows.map((r) => r.value), 1); | |
| 166 | + return ( | |
| 167 | + <figure className="card" style={{ margin: 0, padding: 16 }}> | |
| 168 | + <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b></figcaption> | |
| 169 | + <div style={{ marginTop: 12, display: "grid", gap: 9 }}> | |
| 170 | + {rows.map((r) => ( | |
| 171 | + <div key={r.label} title={`${r.label} — ${fmtNum(r.value)}${unit ? ` ${unit}` : ""}`}> | |
| 172 | + <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5 }}> | |
| 173 | + <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span> | |
| 174 | + <b style={{ fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{fmtNum(r.value)}{unit ? ` ${unit}` : ""}</b> | |
| 175 | + </div> | |
| 176 | + <div style={{ marginTop: 3, height: 12, background: "rgba(20,24,20,0.06)", borderRadius: "0 3px 3px 0" }}> | |
| 177 | + <div style={{ height: "100%", width: `${Math.max((r.value / max) * 100, 1)}%`, background: "var(--accent)", border: "1px solid var(--ink)", borderRadius: "0 3px 3px 0", boxSizing: "border-box" }} /> | |
| 178 | + </div> | |
| 179 | + </div> | |
| 180 | + ))} | |
| 181 | + </div> | |
| 182 | + </figure> | |
| 183 | + ); | |
| 184 | +} | |
| 185 | + | |
| 186 | +/* ---------- Anneau ---------- */ | |
| 187 | +export function Donut({ title, items }: { title: string; items: BreakItem[] }) { | |
| 188 | + const rows = (items ?? []).filter((i) => i.value > 0).slice(0, 8); | |
| 189 | + const total = rows.reduce((s, r) => s + r.value, 0); | |
| 190 | + if (!total) return <EmptyBlock title={title} />; | |
| 191 | + const R = 74, C = 2 * Math.PI * R; | |
| 192 | + let acc = 0; | |
| 193 | + const shades = [1, 0.78, 0.58, 0.42, 0.3, 0.22, 0.15, 0.1]; | |
| 194 | + return ( | |
| 195 | + <figure className="card" style={{ margin: 0, padding: 16 }}> | |
| 196 | + <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b></figcaption> | |
| 197 | + <div style={{ display: "flex", flexWrap: "wrap", gap: 18, alignItems: "center", marginTop: 12 }}> | |
| 198 | + <svg viewBox="0 0 200 200" style={{ width: 180, maxWidth: "100%" }} role="img" aria-label={title}> | |
| 199 | + {rows.map((r, i) => { | |
| 200 | + const frac = r.value / total; | |
| 201 | + const off = acc; acc += frac; | |
| 202 | + return ( | |
| 203 | + <circle key={r.label} cx={100} cy={100} r={R} fill="none" | |
| 204 | + stroke="var(--accent)" strokeOpacity={shades[i % shades.length]} | |
| 205 | + strokeWidth={30} strokeDasharray={`${frac * C} ${C}`} strokeDashoffset={-off * C} | |
| 206 | + transform="rotate(-90 100 100)"> | |
| 207 | + <title>{`${r.label} — ${fmtNum(r.value)} (${((100 * r.value) / total).toFixed(1)} %)`}</title> | |
| 208 | + </circle> | |
| 209 | + ); | |
| 210 | + })} | |
| 211 | + <circle cx={100} cy={100} r={R} fill="none" stroke="var(--ink)" strokeWidth={1} opacity={0.5} /> | |
| 212 | + </svg> | |
| 213 | + <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 6, minWidth: 200, flex: 1 }}> | |
| 214 | + {rows.map((r, i) => ( | |
| 215 | + <li key={r.label} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}> | |
| 216 | + <span style={{ width: 11, height: 11, borderRadius: 3, border: "1px solid var(--ink)", background: "var(--accent)", opacity: shades[i % shades.length] }} /> | |
| 217 | + <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span> | |
| 218 | + <b style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>{((100 * r.value) / total).toFixed(1)} %</b> | |
| 219 | + </li> | |
| 220 | + ))} | |
| 221 | + </ul> | |
| 222 | + </div> | |
| 223 | + </figure> | |
| 224 | + ); | |
| 225 | +} | |
| 226 | + | |
| 227 | +/* ---------- Calendrier de chaleur ---------- */ | |
| 228 | +export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) { | |
| 229 | + if (!cells?.length) return <EmptyBlock title={title} />; | |
| 230 | + const byDate = new Map(cells.map((c) => [c.date, c.value])); | |
| 231 | + const dates = cells.map((c) => c.date).sort(); | |
| 232 | + const end = new Date(dates[dates.length - 1] + "T12:00:00"); | |
| 233 | + const max = Math.max(...cells.map((c) => c.value), 1); | |
| 234 | + const weeks = 26, cols: { date: string; v: number }[][] = []; | |
| 235 | + const cur = new Date(end); | |
| 236 | + cur.setDate(cur.getDate() - (weeks * 7 - 1)); | |
| 237 | + for (let w = 0; w < weeks; w++) { | |
| 238 | + const col: { date: string; v: number }[] = []; | |
| 239 | + for (let d = 0; d < 7; d++) { | |
| 240 | + const iso = cur.toISOString().slice(0, 10); | |
| 241 | + col.push({ date: iso, v: byDate.get(iso) ?? 0 }); | |
| 242 | + cur.setDate(cur.getDate() + 1); | |
| 243 | + } | |
| 244 | + cols.push(col); | |
| 245 | + } | |
| 246 | + return ( | |
| 247 | + <figure className="card" style={{ margin: 0, padding: 16 }}> | |
| 248 | + <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b> <span className="klabel">26 dernières semaines</span></figcaption> | |
| 249 | + <div className="tbl-wrap" style={{ marginTop: 12 }}> | |
| 250 | + <svg viewBox={`0 0 ${weeks * 14} ${7 * 14}`} style={{ minWidth: 480, width: "100%", height: "auto" }} role="img" aria-label={title}> | |
| 251 | + {cols.map((col, w) => col.map((c, d) => ( | |
| 252 | + <rect key={c.date} x={w * 14} y={d * 14} width={12} height={12} rx={2.5} | |
| 253 | + fill={c.v ? "var(--accent)" : "rgba(20,24,20,0.07)"} fillOpacity={c.v ? 0.25 + 0.75 * (c.v / max) : 1} | |
| 254 | + stroke="rgba(20,24,20,0.15)" strokeWidth={0.5}> | |
| 255 | + <title>{`${c.date} — ${fmtNum(c.v)}`}</title> | |
| 256 | + </rect> | |
| 257 | + )))} | |
| 258 | + </svg> | |
| 259 | + </div> | |
| 260 | + </figure> | |
| 261 | + ); | |
| 262 | +} | |
| 263 | + | |
| 264 | +/* ---------- Tableau : tri, recherche, pagination ---------- */ | |
| 265 | +export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) { | |
| 266 | + const [q, setQ] = useState(""); | |
| 267 | + const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null); | |
| 268 | + const [page, setPage] = useState(0); | |
| 269 | + const rows = useMemo(() => { | |
| 270 | + let r = spec.rows ?? []; | |
| 271 | + if (q) r = r.filter((row) => row.some((c) => String(c).toLowerCase().includes(q.toLowerCase()))); | |
| 272 | + if (sort) r = [...r].sort((a, b) => { | |
| 273 | + const x = a[sort.col], y = b[sort.col]; | |
| 274 | + const nx = typeof x === "number" ? x : parseFloat(String(x).replace(/[^\d.,-]/g, "").replace(",", ".")); | |
| 275 | + const ny = typeof y === "number" ? y : parseFloat(String(y).replace(/[^\d.,-]/g, "").replace(",", ".")); | |
| 276 | + if (!Number.isNaN(nx) && !Number.isNaN(ny)) return (nx - ny) * sort.dir; | |
| 277 | + return String(x).localeCompare(String(y), "fr") * sort.dir; | |
| 278 | + }); | |
| 279 | + return r; | |
| 280 | + }, [spec.rows, q, sort]); | |
| 281 | + const pages = Math.max(1, Math.ceil(rows.length / pageSize)); | |
| 282 | + const cur = Math.min(page, pages - 1); | |
| 283 | + return ( | |
| 284 | + <section className="card" style={{ padding: 16 }}> | |
| 285 | + <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "space-between", alignItems: "center" }}> | |
| 286 | + <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{spec.title}</b> | |
| 287 | + <input className="input" style={{ maxWidth: 240 }} placeholder="Rechercher…" value={q} | |
| 288 | + onChange={(e) => { setQ(e.target.value); setPage(0); }} aria-label={`Rechercher dans ${spec.title}`} /> | |
| 289 | + </div> | |
| 290 | + <div className="tbl-wrap" style={{ marginTop: 10 }}> | |
| 291 | + <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}> | |
| 292 | + <thead> | |
| 293 | + <tr> | |
| 294 | + {spec.columns.map((c, i) => ( | |
| 295 | + <th key={c} onClick={() => setSort((s) => ({ col: i, dir: s?.col === i && s.dir === 1 ? -1 : 1 }))} | |
| 296 | + style={{ cursor: "pointer", textAlign: "left", padding: "8px 10px", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.06em", whiteSpace: "nowrap", userSelect: "none" }} | |
| 297 | + aria-sort={sort?.col === i ? (sort.dir === 1 ? "ascending" : "descending") : "none"}> | |
| 298 | + {c} {sort?.col === i ? (sort.dir === 1 ? "▲" : "▼") : "↕"} | |
| 299 | + </th> | |
| 300 | + ))} | |
| 301 | + </tr> | |
| 302 | + </thead> | |
| 303 | + <tbody> | |
| 304 | + {rows.slice(cur * pageSize, (cur + 1) * pageSize).map((row, ri) => ( | |
| 305 | + <tr key={ri} style={{ background: ri % 2 ? "var(--surface-2)" : "var(--surface)" }}> | |
| 306 | + {row.map((c, ci) => ( | |
| 307 | + <td key={ci} style={{ padding: "7px 10px", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}> | |
| 308 | + {typeof c === "number" ? fmtNum(c) : c} | |
| 309 | + </td> | |
| 310 | + ))} | |
| 311 | + </tr> | |
| 312 | + ))} | |
| 313 | + </tbody> | |
| 314 | + </table> | |
| 315 | + </div> | |
| 316 | + <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10, flexWrap: "wrap", gap: 8 }}> | |
| 317 | + <span className="klabel">{fmtInt(rows.length)} lignes</span> | |
| 318 | + <span style={{ display: "flex", gap: 6 }}> | |
| 319 | + <button type="button" className="btn btn-ghost" disabled={cur === 0} onClick={() => setPage(cur - 1)}>←</button> | |
| 320 | + <span className="chip">{cur + 1} / {pages}</span> | |
| 321 | + <button type="button" className="btn btn-ghost" disabled={cur >= pages - 1} onClick={() => setPage(cur + 1)}>→</button> | |
| 322 | + </span> | |
| 323 | + </div> | |
| 324 | + </section> | |
| 325 | + ); | |
| 326 | +} | |
| 327 | + | |
| 328 | +/* ---------- Records / faits marquants ---------- */ | |
| 329 | +export function RecordCard({ r }: { r: RecordFact }) { | |
| 330 | + return ( | |
| 331 | + <article className="card" style={{ padding: "12px 16px", display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", background: "var(--surface-2)" }}> | |
| 332 | + <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{r.label}</span> | |
| 333 | + <span style={{ textAlign: "right" }}> | |
| 334 | + <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{r.value}</b> | |
| 335 | + {r.date && <span className="klabel" style={{ display: "block" }}>{r.date}</span>} | |
| 336 | + </span> | |
| 337 | + </article> | |
| 338 | + ); | |
| 339 | +} | |
| 340 | + | |
| 341 | +/* ---------- Bouton PDF ---------- */ | |
| 342 | +export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }: { period: string; from?: string; to?: string; endpoint?: string }) { | |
| 343 | + const [busy, setBusy] = useState(false); | |
| 344 | + const url = (mode: string) => { | |
| 345 | + const p = new URLSearchParams({ period, mode }); | |
| 346 | + if (from) p.set("from", from); | |
| 347 | + if (to) p.set("to", to); | |
| 348 | + return `${endpoint}?${p}`; | |
| 349 | + }; | |
| 350 | + const dl = (mode: string) => { | |
| 351 | + setBusy(true); | |
| 352 | + const a = document.createElement("a"); | |
| 353 | + a.href = url(mode); | |
| 354 | + a.download = ""; | |
| 355 | + document.body.appendChild(a); | |
| 356 | + a.click(); | |
| 357 | + a.remove(); | |
| 358 | + setTimeout(() => setBusy(false), 2500); | |
| 359 | + }; | |
| 360 | + return ( | |
| 361 | + <span style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}> | |
| 362 | + <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={busy}> | |
| 363 | + {busy ? "Génération…" : "⬇ Télécharger le rapport PDF"} | |
| 364 | + </button> | |
| 365 | + <button type="button" className="btn btn-ghost" onClick={() => dl("synthese")} disabled={busy}> | |
| 366 | + Synthèse (2 p.) | |
| 367 | + </button> | |
| 368 | + </span> | |
| 369 | + ); | |
| 370 | +} | |
| 371 | + | |
| 372 | +/* ---------- États ---------- */ | |
| 373 | +export function EmptyBlock({ title }: { title: string }) { | |
| 374 | + return ( | |
| 375 | + <div className="card" style={{ padding: 20, background: "var(--surface-2)", borderStyle: "dashed" }}> | |
| 376 | + <b style={{ fontFamily: "var(--font-display)", fontSize: 14 }}>{title}</b> | |
| 377 | + <p className="klabel" style={{ margin: "6px 0 0" }}>Pas encore mesuré — aucune donnée disponible pour cette période.</p> | |
| 378 | + </div> | |
| 379 | + ); | |
| 380 | +} | |
| 381 | + | |
| 382 | +export function Fraicheur({ updated, onRefresh }: { updated: string; onRefresh: () => void }) { | |
| 383 | + return ( | |
| 384 | + <p style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", margin: 0 }}> | |
| 385 | + <span className="klabel">Mis à jour le {new Date(updated).toLocaleString("fr-CA", { dateStyle: "medium", timeStyle: "short" })}</span> | |
| 386 | + <button type="button" className="btn btn-ghost" onClick={onRefresh}>↻ Rafraîchir</button> | |
| 387 | + </p> | |
| 388 | + ); | |
| 389 | +} | |
added
frontend/src/ka/stats/kapdf.py
+560 −0
@@ -0,0 +1,560 @@ | ||
| 1 | +# Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | +# ka-ui/stats/kapdf.py — moteur PDF commun Groupe KA (fpdf2). | |
| 3 | +# Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit | |
| 4 | +# le rapport estampillé Groupe-KA : couverture, sommaire, KPI, graphiques | |
| 5 | +# VECTORIELS (courbes/barres/anneaux), tableaux paginés, records, page de fin. | |
| 6 | +# Usage : | |
| 7 | +# from kapdf import GroupeKAReport | |
| 8 | +# pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00", | |
| 9 | +# "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json, | |
| 10 | +# mode="complet").build() | |
| 11 | +# Dépendance : pip install fpdf2 (aucune autre) | |
| 12 | +from __future__ import annotations | |
| 13 | + | |
| 14 | +import math | |
| 15 | +from datetime import datetime | |
| 16 | +from zoneinfo import ZoneInfo | |
| 17 | + | |
| 18 | +from fpdf import FPDF | |
| 19 | + | |
| 20 | +INK = (20, 24, 20) | |
| 21 | +INK2 = (77, 85, 81) | |
| 22 | +INK3 = (139, 146, 140) | |
| 23 | +PAPER = (245, 243, 238) | |
| 24 | +SURFACE2 = (250, 249, 245) | |
| 25 | +GREEN = (28, 92, 65) | |
| 26 | +DANGER = (179, 66, 58) | |
| 27 | +WHITE = (255, 255, 255) | |
| 28 | + | |
| 29 | +EMAILS = [ | |
| 30 | + ("contact@groupe-ka.com", "Projets, partenariats & données"), | |
| 31 | + ("info@groupe-ka.com", "Médias & questions générales"), | |
| 32 | + ("admin@groupe-ka.com", "Légal, vie privée & Loi 25"), | |
| 33 | +] | |
| 34 | +DISCLAIMER = ( | |
| 35 | + "Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons " | |
| 36 | + "rien et ne sommes partie à aucune transaction. Données lues à la source, " | |
| 37 | + "rien d'inventé, tout est traçable." | |
| 38 | +) | |
| 39 | + | |
| 40 | + | |
| 41 | +def _hex(c: str) -> tuple[int, int, int]: | |
| 42 | + c = c.lstrip("#") | |
| 43 | + return tuple(int(c[i : i + 2], 16) for i in (0, 2, 4)) # type: ignore | |
| 44 | + | |
| 45 | + | |
| 46 | +def _fr(n) -> str: | |
| 47 | + if isinstance(n, float) and not n.is_integer(): | |
| 48 | + return f"{n:,.2f}".replace(",", " ").replace(".", ",") | |
| 49 | + return f"{int(n):,}".replace(",", " ") | |
| 50 | + | |
| 51 | + | |
| 52 | +_SUBST = { | |
| 53 | + "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-", | |
| 54 | + "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"', | |
| 55 | + "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ", | |
| 56 | +} | |
| 57 | + | |
| 58 | + | |
| 59 | +def _latin1(s: str) -> str: | |
| 60 | + for k, v in _SUBST.items(): | |
| 61 | + s = s.replace(k, v) | |
| 62 | + return s.encode("latin-1", "replace").decode("latin-1") | |
| 63 | + | |
| 64 | + | |
| 65 | +class _PDF(FPDF): | |
| 66 | + """FPDF avec en-tête/pied Groupe-KA sur chaque page (sauf couverture). | |
| 67 | + Les polices core sont latin-1 : normalize_text sanitise en amont.""" | |
| 68 | + | |
| 69 | + def normalize_text(self, text): | |
| 70 | + return super().normalize_text(_latin1(text)) | |
| 71 | + | |
| 72 | + def __init__(self, brand: str, accent: tuple, period_label: str): | |
| 73 | + super().__init__(orientation="P", unit="mm", format="A4") | |
| 74 | + self.brand = brand | |
| 75 | + self.accent = accent | |
| 76 | + self.period_label = period_label | |
| 77 | + self.cover_mode = False | |
| 78 | + self.set_margins(18, 20, 18) | |
| 79 | + self.set_auto_page_break(True, margin=22) | |
| 80 | + | |
| 81 | + def header(self): | |
| 82 | + if self.cover_mode or self.page_no() == 1: | |
| 83 | + return | |
| 84 | + self.set_font("helvetica", "B", 8.5) | |
| 85 | + self.set_text_color(*INK) | |
| 86 | + self.set_xy(18, 9) | |
| 87 | + self.cell(0, 5, f"Groupe KA · {self.brand}") | |
| 88 | + self.set_font("helvetica", "", 8) | |
| 89 | + self.set_text_color(*INK3) | |
| 90 | + self.set_xy(18, 9) | |
| 91 | + self.cell(0, 5, "Rapport statistique", align="R") | |
| 92 | + self.set_draw_color(*INK) | |
| 93 | + self.set_line_width(0.5) | |
| 94 | + self.line(18, 15.5, 192, 15.5) | |
| 95 | + self.set_y(20) | |
| 96 | + | |
| 97 | + def footer(self): | |
| 98 | + # page 1 = couverture (le flag cover_mode est déjà retombé quand | |
| 99 | + # add_page() clôt la page 1 → tester aussi le numéro de page) | |
| 100 | + if self.cover_mode or self.page_no() == 1: | |
| 101 | + return | |
| 102 | + self.set_y(-15) | |
| 103 | + self.set_draw_color(*INK3) | |
| 104 | + self.set_line_width(0.2) | |
| 105 | + self.line(18, self.get_y() - 1.5, 192, self.get_y() - 1.5) | |
| 106 | + self.set_font("helvetica", "", 7.5) | |
| 107 | + self.set_text_color(*INK3) | |
| 108 | + year = datetime.now(ZoneInfo("America/Toronto")).year | |
| 109 | + self.cell(130, 5, f"© Groupe-KA — {year} — groupe-ka.com · {self.period_label}") | |
| 110 | + self.cell(0, 5, f"p. {self.page_no()}/{{nb}}", align="R") | |
| 111 | + | |
| 112 | + | |
| 113 | +class GroupeKAReport: | |
| 114 | + def __init__(self, site: dict, dashboard: dict, mode: str = "complet"): | |
| 115 | + self.site = site | |
| 116 | + self.d = dashboard | |
| 117 | + self.mode = mode | |
| 118 | + self.accent = _hex(site.get("accent", "#d9f26b")) | |
| 119 | + period = dashboard.get("period", {}) or {} | |
| 120 | + self.period_label = period.get("label") or "toute la période" | |
| 121 | + self.pdf = _PDF(site.get("wordmark", ""), self.accent, self.period_label) | |
| 122 | + self.toc: list[tuple[str, int]] = [] | |
| 123 | + | |
| 124 | + # ---------- primitives ---------- | |
| 125 | + def _card(self, x, y, w, h, fill=WHITE): | |
| 126 | + p = self.pdf | |
| 127 | + p.set_draw_color(*INK) | |
| 128 | + p.set_line_width(0.45) | |
| 129 | + p.set_fill_color(*fill) | |
| 130 | + p.rect(x, y, w, h, style="DF", round_corners=True, corner_radius=2.2) | |
| 131 | + | |
| 132 | + def _kicker(self, text): | |
| 133 | + p = self.pdf | |
| 134 | + p.set_font("helvetica", "B", 8) | |
| 135 | + p.set_text_color(*GREEN) | |
| 136 | + p.set_draw_color(*GREEN) | |
| 137 | + p.set_line_width(0.6) | |
| 138 | + y = p.get_y() + 2 | |
| 139 | + p.line(p.l_margin, y, p.l_margin + 7, y) | |
| 140 | + p.set_xy(p.l_margin + 9, y - 2.5) | |
| 141 | + p.cell(0, 5, text.upper()) | |
| 142 | + p.ln(8) | |
| 143 | + | |
| 144 | + def _section_title(self, title): | |
| 145 | + if self.pdf.get_y() > 240: | |
| 146 | + self.pdf.add_page() | |
| 147 | + self._kicker("Groupe KA · " + self.site.get("wordmark", "")) | |
| 148 | + self.pdf.set_font("helvetica", "B", 15) | |
| 149 | + self.pdf.set_text_color(*INK) | |
| 150 | + self.pdf.set_x(self.pdf.l_margin) | |
| 151 | + self.pdf.cell(0, 8, title) | |
| 152 | + self.toc.append((title, self.pdf.page_no())) | |
| 153 | + self.pdf.ln(11) | |
| 154 | + | |
| 155 | + # ---------- pages ---------- | |
| 156 | + def _cover(self): | |
| 157 | + p = self.pdf | |
| 158 | + p.cover_mode = True | |
| 159 | + p.set_auto_page_break(False) | |
| 160 | + p.add_page() | |
| 161 | + p.set_fill_color(*PAPER) | |
| 162 | + p.rect(0, 0, 210, 297, style="F") | |
| 163 | + p.set_draw_color(*INK) | |
| 164 | + p.set_line_width(1.0) | |
| 165 | + p.rect(10, 10, 190, 277) | |
| 166 | + # kicker | |
| 167 | + p.set_font("helvetica", "B", 10) | |
| 168 | + p.set_text_color(*GREEN) | |
| 169 | + p.set_xy(24, 34) | |
| 170 | + p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE") | |
| 171 | + # wordmark : partie gauche + boîte encre/accent | |
| 172 | + wm = self.site.get("wordmark", "") | |
| 173 | + left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None) | |
| 174 | + p.set_xy(24, 70) | |
| 175 | + p.set_font("helvetica", "B", 40) | |
| 176 | + p.set_text_color(*INK) | |
| 177 | + p.cell(p.get_string_width(left) + 2, 20, left) | |
| 178 | + if boxed: | |
| 179 | + bw = p.get_string_width(boxed) + 12 | |
| 180 | + x = p.get_x() + 2 | |
| 181 | + p.set_fill_color(*INK) | |
| 182 | + p.rect(x, 68, bw, 22, style="F", round_corners=True, corner_radius=3) | |
| 183 | + p.set_text_color(*self.accent) | |
| 184 | + p.set_xy(x + 6, 70) | |
| 185 | + p.cell(bw - 12, 18, boxed) | |
| 186 | + p.set_xy(24, 100) | |
| 187 | + p.set_font("helvetica", "", 13) | |
| 188 | + p.set_text_color(*INK2) | |
| 189 | + p.multi_cell(150, 7, f"Rapport statistique — {wm}") | |
| 190 | + now = datetime.now(ZoneInfo("America/Toronto")) | |
| 191 | + per = self.d.get("period", {}) or {} | |
| 192 | + p.set_xy(24, 125) | |
| 193 | + p.set_font("helvetica", "", 10.5) | |
| 194 | + rows = [ | |
| 195 | + ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")), | |
| 196 | + ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"), | |
| 197 | + ("Plateforme", "https://" + self.site.get("domain", "")), | |
| 198 | + ("Mode", "Rapport complet" if self.mode == "complet" else "Synthèse"), | |
| 199 | + ] | |
| 200 | + y = 128 | |
| 201 | + for k, v in rows: | |
| 202 | + p.set_xy(24, y) | |
| 203 | + p.set_text_color(*INK3) | |
| 204 | + p.cell(40, 6, k) | |
| 205 | + p.set_text_color(*INK) | |
| 206 | + p.set_font("helvetica", "B", 10.5) | |
| 207 | + p.cell(0, 6, str(v)) | |
| 208 | + p.set_font("helvetica", "", 10.5) | |
| 209 | + y += 8 | |
| 210 | + # bande encre au pied | |
| 211 | + p.set_fill_color(*INK) | |
| 212 | + p.rect(10, 262, 190, 25, style="F") | |
| 213 | + p.set_xy(24, 270) | |
| 214 | + p.set_font("helvetica", "B", 12) | |
| 215 | + p.set_text_color(*WHITE) | |
| 216 | + p.cell(60, 8, "par Groupe ") | |
| 217 | + p.set_text_color(*self.accent) | |
| 218 | + p.set_xy(24 + p.get_string_width("par Groupe ") + 1, 270) | |
| 219 | + p.cell(20, 8, "KA") | |
| 220 | + p.set_font("helvetica", "B", 10) | |
| 221 | + p.set_xy(24, 270) | |
| 222 | + p.set_text_color(*self.accent) | |
| 223 | + p.cell(162, 8, "groupe-ka.com", align="R") | |
| 224 | + p.set_auto_page_break(True, margin=22) | |
| 225 | + p.cover_mode = False | |
| 226 | + | |
| 227 | + def _kpis(self): | |
| 228 | + kpis = self.d.get("kpis") or [] | |
| 229 | + if not kpis: | |
| 230 | + return | |
| 231 | + self._section_title("Synthèse des indicateurs") | |
| 232 | + p = self.pdf | |
| 233 | + cols, gw, gh, gap = 3, 56, 26, 3 | |
| 234 | + x0, y = p.l_margin, p.get_y() | |
| 235 | + for i, k in enumerate(kpis[:9]): | |
| 236 | + x = x0 + (i % cols) * (gw + gap) | |
| 237 | + if i and i % cols == 0: | |
| 238 | + y += gh + gap | |
| 239 | + if y > 250: | |
| 240 | + p.add_page(); y = p.get_y() | |
| 241 | + self._card(x, y, gw, gh) | |
| 242 | + p.set_xy(x + 4, y + 4) | |
| 243 | + p.set_font("helvetica", "B", 14) | |
| 244 | + p.set_text_color(*INK) | |
| 245 | + val = k.get("value") | |
| 246 | + p.cell(gw - 8, 7, (_fr(val) if isinstance(val, (int, float)) else str(val)) + (" " + k["unit"] if k.get("unit") else "")) | |
| 247 | + p.set_xy(x + 4, y + 12) | |
| 248 | + p.set_font("helvetica", "", 7.6) | |
| 249 | + p.set_text_color(*INK2) | |
| 250 | + p.multi_cell(gw - 8, 3.6, str(k.get("label", ""))[:70]) | |
| 251 | + if k.get("delta_pct") is not None: | |
| 252 | + up = (k.get("direction") or ("up" if k["delta_pct"] >= 0 else "down")) == "up" | |
| 253 | + p.set_xy(x + 4, y + gh - 6.5) | |
| 254 | + p.set_font("helvetica", "B", 8) | |
| 255 | + p.set_text_color(*(GREEN if up else DANGER)) | |
| 256 | + arrow = "+" if k["delta_pct"] >= 0 else "" | |
| 257 | + p.cell(gw - 8, 4, f"{'▲' if up else '▼'} {arrow}{str(k['delta_pct']).replace('.', ',')} % vs période préc.") | |
| 258 | + p.set_y(y + gh + 8) | |
| 259 | + | |
| 260 | + def _line_chart(self, s): | |
| 261 | + p = self.pdf | |
| 262 | + pts = s.get("points") or [] | |
| 263 | + if len(pts) < 2: | |
| 264 | + return | |
| 265 | + if p.get_y() > 200: | |
| 266 | + p.add_page() | |
| 267 | + p.set_font("helvetica", "B", 10) | |
| 268 | + p.set_text_color(*INK) | |
| 269 | + p.cell(0, 6, s.get("title", "")) | |
| 270 | + p.ln(7) | |
| 271 | + x0, y0, w, h = p.l_margin, p.get_y(), 174, 52 | |
| 272 | + self._card(x0, y0, w, h, fill=WHITE) | |
| 273 | + cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16 | |
| 274 | + vals = [pt["v"] for pt in pts] + [c["v"] for c in (s.get("compare") or [])] | |
| 275 | + vmax = max(vals) or 1 | |
| 276 | + vmin = min(0, min(vals)) | |
| 277 | + rng = (vmax - vmin) or 1 | |
| 278 | + # grille + graduations | |
| 279 | + p.set_font("helvetica", "", 6.3) | |
| 280 | + p.set_text_color(*INK3) | |
| 281 | + p.set_draw_color(200, 200, 195) | |
| 282 | + p.set_line_width(0.15) | |
| 283 | + for g in range(5): | |
| 284 | + gy = cy + ch - ch * g / 4 | |
| 285 | + p.line(cx, gy, cx + cw, gy) | |
| 286 | + p.set_xy(x0 + 1, gy - 1.6) | |
| 287 | + p.cell(10, 3, _fr(vmin + rng * g / 4), align="R") | |
| 288 | + | |
| 289 | + def draw(series, color, width, dash=None): | |
| 290 | + n = len(series) | |
| 291 | + p.set_draw_color(*color) | |
| 292 | + p.set_line_width(width) | |
| 293 | + if dash: | |
| 294 | + p.set_dash_pattern(dash=1.2, gap=1.2) | |
| 295 | + last = None | |
| 296 | + for i, pt in enumerate(series): | |
| 297 | + px = cx + cw * (i / (n - 1)) | |
| 298 | + py = cy + ch - ch * ((pt["v"] - vmin) / rng) | |
| 299 | + if last: | |
| 300 | + p.line(last[0], last[1], px, py) | |
| 301 | + last = (px, py) | |
| 302 | + p.set_dash_pattern() | |
| 303 | + | |
| 304 | + if s.get("compare"): | |
| 305 | + draw(s["compare"], INK3, 0.35, dash=True) | |
| 306 | + draw(pts, self.accent, 0.7) | |
| 307 | + # libellés d'axe X (premier / milieu / dernier) | |
| 308 | + p.set_text_color(*INK3) | |
| 309 | + for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)): | |
| 310 | + p.set_xy(cx + cw * frac - 9, cy + ch + 1.5) | |
| 311 | + p.cell(18, 3, str(pts[idx].get("t", ""))[:10], align="C") | |
| 312 | + p.set_y(y0 + h + 4) | |
| 313 | + if s.get("compare"): | |
| 314 | + p.set_font("helvetica", "", 6.8) | |
| 315 | + p.set_text_color(*INK3) | |
| 316 | + p.cell(0, 4, "— période courante (accent) · ---- période comparée") | |
| 317 | + p.ln(6) | |
| 318 | + else: | |
| 319 | + p.ln(2) | |
| 320 | + | |
| 321 | + def _bars(self, title, items, unit=""): | |
| 322 | + p = self.pdf | |
| 323 | + items = [it for it in (items or []) if isinstance(it.get("value"), (int, float))][:12] | |
| 324 | + if not items: | |
| 325 | + return | |
| 326 | + need = 10 + len(items) * 7 | |
| 327 | + if p.get_y() + need > 265: | |
| 328 | + p.add_page() | |
| 329 | + p.set_font("helvetica", "B", 10) | |
| 330 | + p.set_text_color(*INK) | |
| 331 | + p.cell(0, 6, title) | |
| 332 | + p.ln(8) | |
| 333 | + vmax = max(it["value"] for it in items) or 1 | |
| 334 | + for it in items: | |
| 335 | + y = p.get_y() | |
| 336 | + p.set_font("helvetica", "", 7.6) | |
| 337 | + p.set_text_color(*INK) | |
| 338 | + p.set_x(p.l_margin) | |
| 339 | + p.cell(46, 5, str(it["label"])[:34]) | |
| 340 | + bw = 96 * (it["value"] / vmax) | |
| 341 | + p.set_fill_color(*self.accent) | |
| 342 | + p.set_draw_color(*INK) | |
| 343 | + p.set_line_width(0.25) | |
| 344 | + p.rect(p.l_margin + 48, y + 0.7, max(bw, 0.8), 3.6, style="DF") | |
| 345 | + p.set_xy(p.l_margin + 148, y) | |
| 346 | + p.set_font("helvetica", "B", 7.6) | |
| 347 | + p.cell(26, 5, _fr(it["value"]) + (" " + unit if unit else ""), align="R") | |
| 348 | + p.ln(6.4) | |
| 349 | + p.ln(3) | |
| 350 | + | |
| 351 | + def _donut(self, b): | |
| 352 | + # anneau vectoriel simple (arcs) + légende | |
| 353 | + p = self.pdf | |
| 354 | + items = [it for it in (b.get("items") or []) if it.get("value")][:8] | |
| 355 | + total = sum(it["value"] for it in items) | |
| 356 | + if not items or not total: | |
| 357 | + return | |
| 358 | + if p.get_y() > 210: | |
| 359 | + p.add_page() | |
| 360 | + p.set_font("helvetica", "B", 10) | |
| 361 | + p.set_text_color(*INK) | |
| 362 | + p.cell(0, 6, b.get("title", "")) | |
| 363 | + p.ln(8) | |
| 364 | + cx, cy, r = p.l_margin + 26, p.get_y() + 24, 20 | |
| 365 | + shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10] | |
| 366 | + start = -90.0 | |
| 367 | + for i, it in enumerate(items): | |
| 368 | + frac = it["value"] / total | |
| 369 | + f = shades[i % len(shades)] | |
| 370 | + col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3)) | |
| 371 | + steps = max(2, int(72 * frac)) | |
| 372 | + p.set_fill_color(*col) | |
| 373 | + p.set_draw_color(*col) | |
| 374 | + for st in range(steps): | |
| 375 | + a0 = math.radians(start + 360 * frac * st / steps) | |
| 376 | + a1 = math.radians(start + 360 * frac * (st + 1) / steps) | |
| 377 | + p.polygon( | |
| 378 | + [(cx, cy), | |
| 379 | + (cx + r * math.cos(a0), cy + r * math.sin(a0)), | |
| 380 | + (cx + r * math.cos(a1), cy + r * math.sin(a1))], | |
| 381 | + style="DF", | |
| 382 | + ) | |
| 383 | + start += 360 * frac | |
| 384 | + p.set_fill_color(*WHITE) | |
| 385 | + p.set_draw_color(*INK) | |
| 386 | + p.set_line_width(0.4) | |
| 387 | + p.ellipse(cx - 11, cy - 11, 22, 22, style="DF") | |
| 388 | + p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D") | |
| 389 | + # légende | |
| 390 | + ly = cy - 22 | |
| 391 | + for i, it in enumerate(items): | |
| 392 | + f = shades[i % len(shades)] | |
| 393 | + col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3)) | |
| 394 | + p.set_fill_color(*col) | |
| 395 | + p.set_draw_color(*INK) | |
| 396 | + p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF") | |
| 397 | + p.set_xy(p.l_margin + 66, ly) | |
| 398 | + p.set_font("helvetica", "", 7.6) | |
| 399 | + p.set_text_color(*INK) | |
| 400 | + pct = 100 * it["value"] / total | |
| 401 | + p.cell(0, 5.6, f"{str(it['label'])[:40]} — {_fr(it['value'])} ({pct:.1f} %)".replace(".", ",")) | |
| 402 | + ly += 5.6 | |
| 403 | + p.set_y(max(cy + r, ly) + 6) | |
| 404 | + | |
| 405 | + def _table(self, t): | |
| 406 | + p = self.pdf | |
| 407 | + cols = t.get("columns") or [] | |
| 408 | + rows = t.get("rows") or [] | |
| 409 | + if not cols or not rows: | |
| 410 | + return | |
| 411 | + self._section_title(t.get("title", "Tableau")) | |
| 412 | + w = 174 / len(cols) | |
| 413 | + def head(): | |
| 414 | + p.set_font("helvetica", "B", 7.6) | |
| 415 | + p.set_fill_color(*INK) | |
| 416 | + p.set_text_color(*WHITE) | |
| 417 | + for c in cols: | |
| 418 | + p.cell(w, 6, " " + str(c)[:30], fill=True) | |
| 419 | + p.ln(6) | |
| 420 | + head() | |
| 421 | + p.set_text_color(*INK) | |
| 422 | + for i, row in enumerate(rows[:200]): | |
| 423 | + if p.get_y() > 262: | |
| 424 | + p.add_page() | |
| 425 | + head() | |
| 426 | + p.set_text_color(*INK) | |
| 427 | + p.set_font("helvetica", "", 7.4) | |
| 428 | + p.set_fill_color(*(SURFACE2 if i % 2 else WHITE)) | |
| 429 | + for cell in row: | |
| 430 | + txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell) | |
| 431 | + p.cell(w, 5.4, " " + txt[:34], fill=True) | |
| 432 | + p.ln(5.4) | |
| 433 | + if len(rows) > 200: | |
| 434 | + p.set_font("helvetica", "", 7) | |
| 435 | + p.set_text_color(*INK3) | |
| 436 | + p.cell(0, 5, f"… {len(rows) - 200} lignes supplémentaires non imprimées") | |
| 437 | + p.ln(6) | |
| 438 | + | |
| 439 | + def _records(self): | |
| 440 | + recs = self.d.get("records") or [] | |
| 441 | + if not recs: | |
| 442 | + return | |
| 443 | + self._section_title("Records & faits marquants") | |
| 444 | + p = self.pdf | |
| 445 | + for r in recs[:10]: | |
| 446 | + if p.get_y() > 258: | |
| 447 | + p.add_page() | |
| 448 | + y = p.get_y() | |
| 449 | + self._card(p.l_margin, y, 174, 11, fill=SURFACE2) | |
| 450 | + p.set_xy(p.l_margin + 4, y + 2) | |
| 451 | + p.set_font("helvetica", "", 8.6) | |
| 452 | + p.set_text_color(*INK2) | |
| 453 | + p.cell(96, 7, str(r.get("label", ""))[:70]) | |
| 454 | + p.set_font("helvetica", "B", 9) | |
| 455 | + p.set_text_color(*INK) | |
| 456 | + p.cell(52, 7, str(r.get("value", ""))[:36], align="R") | |
| 457 | + p.set_font("helvetica", "", 7.6) | |
| 458 | + p.set_text_color(*INK3) | |
| 459 | + p.cell(20, 7, str(r.get("date", "") or ""), align="R") | |
| 460 | + p.set_y(y + 13.5) | |
| 461 | + p.ln(4) | |
| 462 | + | |
| 463 | + def _final_page(self): | |
| 464 | + p = self.pdf | |
| 465 | + p.add_page() | |
| 466 | + self._kicker("Groupe KA · contact") | |
| 467 | + p.set_font("helvetica", "B", 15) | |
| 468 | + p.set_text_color(*INK) | |
| 469 | + p.cell(0, 8, "Coordonnées du Groupe KA") | |
| 470 | + p.ln(12) | |
| 471 | + for email, role in EMAILS: | |
| 472 | + p.set_font("helvetica", "B", 10.5) | |
| 473 | + p.set_text_color(*INK) | |
| 474 | + p.cell(0, 6, email) | |
| 475 | + p.ln(5.5) | |
| 476 | + p.set_font("helvetica", "", 8.6) | |
| 477 | + p.set_text_color(*INK3) | |
| 478 | + p.cell(0, 5, role) | |
| 479 | + p.ln(8) | |
| 480 | + p.ln(2) | |
| 481 | + p.set_font("helvetica", "B", 10) | |
| 482 | + p.set_text_color(*GREEN) | |
| 483 | + p.cell(0, 6, "groupe-ka.com — le portail de l'écosystème ·Ka") | |
| 484 | + p.ln(10) | |
| 485 | + p.set_draw_color(*self.accent) | |
| 486 | + p.set_line_width(0.8) | |
| 487 | + p.line(p.l_margin, p.get_y(), p.l_margin + 30, p.get_y()) | |
| 488 | + p.ln(4) | |
| 489 | + p.set_font("helvetica", "", 8.6) | |
| 490 | + p.set_text_color(*INK2) | |
| 491 | + p.multi_cell(160, 4.6, DISCLAIMER) | |
| 492 | + p.ln(4) | |
| 493 | + p.set_font("helvetica", "", 7.6) | |
| 494 | + p.set_text_color(*INK3) | |
| 495 | + p.multi_cell( | |
| 496 | + 160, 4.2, | |
| 497 | + "Mentions : rapport généré automatiquement à partir des données réelles de la " | |
| 498 | + "plateforme au moment indiqué en couverture. Conditions d'utilisation, politique " | |
| 499 | + "de confidentialité et protection des renseignements personnels (Loi 25) : " | |
| 500 | + "groupe-ka.com/conditions · /confidentialite · /loi-25.", | |
| 501 | + ) | |
| 502 | + | |
| 503 | + def _toc_page(self): | |
| 504 | + # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en | |
| 505 | + # page 2 en réservant la page lors du build (voir build()). | |
| 506 | + pass | |
| 507 | + | |
| 508 | + def build(self) -> bytes: | |
| 509 | + p = self.pdf | |
| 510 | + p.alias_nb_pages() | |
| 511 | + self._cover() | |
| 512 | + if self.mode == "synthese": | |
| 513 | + p.add_page() | |
| 514 | + self._kpis() | |
| 515 | + self._records() | |
| 516 | + self._final_page() | |
| 517 | + else: | |
| 518 | + p.add_page() | |
| 519 | + toc_page_no = p.page_no() | |
| 520 | + p.add_page() | |
| 521 | + self._kpis() | |
| 522 | + for s in self.d.get("series") or []: | |
| 523 | + if s.get("kind") == "bar": | |
| 524 | + self._bars(s.get("title", ""), [{"label": pt.get("t"), "value": pt.get("v")} for pt in (s.get("points") or [])], s.get("unit", "")) | |
| 525 | + else: | |
| 526 | + self._line_chart(s) | |
| 527 | + for b in self.d.get("breakdowns") or []: | |
| 528 | + if b.get("kind") == "donut": | |
| 529 | + self._donut(b) | |
| 530 | + else: | |
| 531 | + self._bars(b.get("title", ""), b.get("items")) | |
| 532 | + geo = self.d.get("geo") | |
| 533 | + if geo: | |
| 534 | + self._bars(geo.get("title", "Répartition géographique"), geo.get("items")) | |
| 535 | + for t in self.d.get("tables") or []: | |
| 536 | + self._table(t) | |
| 537 | + self._records() | |
| 538 | + self._final_page() | |
| 539 | + # sommaire écrit sur la page réservée (page 2) | |
| 540 | + last_page = p.page | |
| 541 | + p.page = toc_page_no | |
| 542 | + p.set_y(22) | |
| 543 | + p.set_font("helvetica", "B", 15) | |
| 544 | + p.set_text_color(*INK) | |
| 545 | + p.cell(0, 8, "Sommaire") | |
| 546 | + p.ln(12) | |
| 547 | + p.set_font("helvetica", "", 9.5) | |
| 548 | + for title, page_no in self.toc: | |
| 549 | + p.set_text_color(*INK) | |
| 550 | + p.cell(140, 6.5, title[:80]) | |
| 551 | + p.set_text_color(*INK3) | |
| 552 | + p.cell(0, 6.5, str(page_no), align="R") | |
| 553 | + p.ln(6.5) | |
| 554 | + p.page = last_page | |
| 555 | + return bytes(p.output()) | |
| 556 | + | |
| 557 | + | |
| 558 | +def filename(platform_id: str, period: str) -> str: | |
| 559 | + today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d") | |
| 560 | + return f"groupe-ka_{platform_id}_stats_{period}_{today}.pdf" | |
added
frontend/src/ka/tokens.css
+229 −0
@@ -0,0 +1,229 @@ | ||
| 1 | +/* ----------------------------------------------------------------------------- | |
| 2 | + Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 3 | + Fichier : ka-ui/tokens.css — SOURCE CANONIQUE (repo ka-ui sur spbgit) | |
| 4 | + Desc. : Design system commun GROUPE KA « éditorial sharp » — tokens + socle | |
| 5 | + de composants partagés par les 12 plateformes. Chaque site importe ce | |
| 6 | + fichier PUIS surcharge uniquement son accent (voir accents.css). | |
| 7 | + | |
| 8 | + · Typo : display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono | |
| 9 | + · Palette: papier #f5f3ee · encre #141814 · vert profond #1c5c41 + ACCENT du site | |
| 10 | + · Signature : bordures encre 1,5–2 px + ombres décalées dures, grain de film, | |
| 11 | + surlignés d'accent inclinés (néo-brutalisme raffiné) | |
| 12 | + · Breakpoints communs : 360 / 768 / 1024 / 1440 px (mobile-first) | |
| 13 | + · Zones tactiles ≥ 44×44 px, safe-areas iOS, typographie fluide (clamp) | |
| 14 | +----------------------------------------------------------------------------- */ | |
| 15 | + | |
| 16 | +:root { | |
| 17 | + /* ---- Palette fixe Groupe KA (identique sur les 12 sites) ---- */ | |
| 18 | + --paper: #f5f3ee; | |
| 19 | + --surface: #ffffff; | |
| 20 | + --surface-2: #faf9f5; | |
| 21 | + --ink: #141814; | |
| 22 | + --ink-2: #4d5551; | |
| 23 | + --ink-3: #8b928c; | |
| 24 | + --line: rgba(20, 24, 20, 0.14); | |
| 25 | + --line-strong: rgba(20, 24, 20, 0.85); | |
| 26 | + --green: #1c5c41; | |
| 27 | + --green-deep: #123f2e; | |
| 28 | + --amber: #e8a33d; | |
| 29 | + --amber-soft: #fdf3e2; | |
| 30 | + --danger: #b3423a; | |
| 31 | + --danger-soft: #fbe9e7; | |
| 32 | + | |
| 33 | + /* ---- ACCENT du site — SEULES variables surchargées par marque ---- */ | |
| 34 | + --accent: #d9f26b; /* défaut : lime Groupe KA */ | |
| 35 | + --accent-soft: #f0f9d2; | |
| 36 | + --accent-deep: #123f2e; | |
| 37 | + --on-accent: var(--ink); /* couleur du texte posé SUR l'accent */ | |
| 38 | + | |
| 39 | + /* alias rétro-compatibles (les satellites historiques utilisent --lime) */ | |
| 40 | + --lime: var(--accent); | |
| 41 | + --lime-soft: var(--accent-soft); | |
| 42 | + | |
| 43 | + /* ---- Géométrie sharp ---- */ | |
| 44 | + --r-card: 10px; | |
| 45 | + --r-ctl: 6px; | |
| 46 | + --r-pill: 999px; | |
| 47 | + | |
| 48 | + /* ---- Ombres décalées — la signature du groupe ---- */ | |
| 49 | + --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05); | |
| 50 | + --shadow-off: 6px 6px 0 var(--ink); | |
| 51 | + --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08); | |
| 52 | + --shadow-off-mid: 4px 4px 0 rgba(20, 24, 20, 0.18); | |
| 53 | + | |
| 54 | + /* ---- Typographie ---- */ | |
| 55 | + --font-display: "Space Grotesk", system-ui, sans-serif; | |
| 56 | + --font-body: "Inter", system-ui, sans-serif; | |
| 57 | + --font-mono: "JetBrains Mono", ui-monospace, monospace; | |
| 58 | + | |
| 59 | + /* Échelle fluide (mobile-first, clamp) */ | |
| 60 | + --fs-h1: clamp(30px, 3.2vw + 18px, 54px); | |
| 61 | + --fs-h2: clamp(23px, 1.8vw + 14px, 34px); | |
| 62 | + --fs-h3: clamp(17px, 0.9vw + 12px, 22px); | |
| 63 | + --fs-body: 15px; | |
| 64 | + --fs-small: 13px; | |
| 65 | + | |
| 66 | + /* Espacements */ | |
| 67 | + --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; | |
| 68 | + --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; | |
| 69 | + | |
| 70 | + /* Cible tactile minimale */ | |
| 71 | + --touch: 44px; | |
| 72 | +} | |
| 73 | + | |
| 74 | +/* ---- Socle ---- */ | |
| 75 | +* { box-sizing: border-box; } | |
| 76 | +html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } | |
| 77 | +body { | |
| 78 | + margin: 0; | |
| 79 | + background: var(--paper); | |
| 80 | + color: var(--ink); | |
| 81 | + font-family: var(--font-body); | |
| 82 | + font-size: var(--fs-body); | |
| 83 | + line-height: 1.55; | |
| 84 | + -webkit-font-smoothing: antialiased; | |
| 85 | + padding-bottom: env(safe-area-inset-bottom); | |
| 86 | + overflow-x: clip; /* jamais de débordement horizontal */ | |
| 87 | +} | |
| 88 | +img, svg, video { max-width: 100%; height: auto; display: block; } | |
| 89 | +h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0 0 0.5em; } | |
| 90 | +h1 { font-size: var(--fs-h1); line-height: 1.06; } | |
| 91 | +h2 { font-size: var(--fs-h2); line-height: 1.15; } | |
| 92 | +h3 { font-size: var(--fs-h3); line-height: 1.25; } | |
| 93 | +a { color: inherit; } | |
| 94 | +::selection { background: var(--accent); color: var(--on-accent); } | |
| 95 | +:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } | |
| 96 | + | |
| 97 | +/* Grain de film pleine page — ⚠️ jamais de z-index sur body > * (position: | |
| 98 | + relative seulement), sinon les utilitaires z-* sont écrasés. */ | |
| 99 | +body::before { | |
| 100 | + content: ""; | |
| 101 | + position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 9999; | |
| 102 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| 103 | +} | |
| 104 | +body > * { position: relative; } | |
| 105 | + | |
| 106 | +/* ---- Conteneur commun ---- */ | |
| 107 | +.container { max-width: 1152px; margin: 0 auto; padding: 0 var(--sp-4); } | |
| 108 | +@media (min-width: 768px) { .container { padding: 0 var(--sp-5); } } | |
| 109 | + | |
| 110 | +/* ---- Micro-typographie signature ---- */ | |
| 111 | +.kicker { | |
| 112 | + display: inline-flex; align-items: center; gap: 10px; | |
| 113 | + font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; | |
| 114 | + text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); | |
| 115 | +} | |
| 116 | +.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); } | |
| 117 | +.klabel { | |
| 118 | + font-family: var(--font-mono); font-size: 10px; font-weight: 700; | |
| 119 | + text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); | |
| 120 | +} | |
| 121 | +.hl { | |
| 122 | + display: inline-block; background: var(--accent); color: var(--on-accent); | |
| 123 | + border-radius: 8px; padding: 0 10px 2px; transform: rotate(-1deg); | |
| 124 | +} | |
| 125 | +.outline-txt { color: transparent; -webkit-text-stroke: 2px var(--ink); } | |
| 126 | + | |
| 127 | +/* ---- Boutons (cible ≥ 44 px) ---- */ | |
| 128 | +.btn { | |
| 129 | + display: inline-flex; align-items: center; justify-content: center; gap: 8px; | |
| 130 | + min-height: var(--touch); padding: 10px 18px; | |
| 131 | + font-family: var(--font-display); font-weight: 700; font-size: 14px; | |
| 132 | + border: 1.5px solid var(--ink); border-radius: var(--r-ctl); | |
| 133 | + background: var(--surface); color: var(--ink); | |
| 134 | + cursor: pointer; text-decoration: none; | |
| 135 | + transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s; | |
| 136 | +} | |
| 137 | +.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off-mid); } | |
| 138 | +.btn:active { transform: translate(0, 0); box-shadow: none; } | |
| 139 | +.btn:disabled { opacity: 0.45; pointer-events: none; } | |
| 140 | +.btn-primary { background: var(--ink); color: var(--accent); } | |
| 141 | +.btn-primary:hover { background: var(--accent-deep); } | |
| 142 | +.btn-accent { background: var(--accent); color: var(--on-accent); } | |
| 143 | +.btn-ghost { background: transparent; border-color: var(--line); } | |
| 144 | +.btn-ghost:hover { border-color: var(--ink); } | |
| 145 | + | |
| 146 | +/* ---- Cartes ---- */ | |
| 147 | +.card { | |
| 148 | + background: var(--surface); border: 1.5px solid var(--ink); | |
| 149 | + border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); | |
| 150 | + overflow: hidden; | |
| 151 | +} | |
| 152 | +.card-hover { transition: transform 0.15s, box-shadow 0.15s; } | |
| 153 | +.card-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); } | |
| 154 | + | |
| 155 | +/* ---- Chips / badges ---- */ | |
| 156 | +.chip { | |
| 157 | + display: inline-flex; align-items: center; gap: 6px; | |
| 158 | + padding: 4px 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; | |
| 159 | + text-transform: uppercase; letter-spacing: 0.06em; | |
| 160 | + border: 1.5px solid var(--ink); border-radius: var(--r-pill); | |
| 161 | + background: var(--surface); color: var(--ink); | |
| 162 | +} | |
| 163 | +.chip-accent { background: var(--accent); color: var(--on-accent); } | |
| 164 | +.chip-soft { background: var(--accent-soft); border-color: var(--line); } | |
| 165 | + | |
| 166 | +/* ---- Champs ---- */ | |
| 167 | +.input, .select, .textarea { | |
| 168 | + width: 100%; min-height: var(--touch); padding: 10px 14px; | |
| 169 | + font: inherit; color: var(--ink); background: var(--surface); | |
| 170 | + border: 1.5px solid var(--ink); border-radius: var(--r-ctl); | |
| 171 | +} | |
| 172 | +.input:focus, .select:focus, .textarea:focus { | |
| 173 | + outline: none; box-shadow: 3px 3px 0 var(--accent); border-color: var(--ink); | |
| 174 | +} | |
| 175 | +.input::placeholder { color: var(--ink-3); } | |
| 176 | + | |
| 177 | +/* ---- Badge « Un service Groupe KA » (header, cliquable → hub) ---- */ | |
| 178 | +.gk-badge { | |
| 179 | + display: inline-flex; align-items: center; gap: 7px; | |
| 180 | + min-height: 30px; padding: 3px 10px 4px; | |
| 181 | + font-family: var(--font-mono); font-size: 10px; font-weight: 700; | |
| 182 | + letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; | |
| 183 | + border: 1.5px solid var(--ink); border-radius: var(--r-pill); | |
| 184 | + background: var(--surface); color: var(--ink-2); white-space: nowrap; | |
| 185 | +} | |
| 186 | +.gk-badge b { | |
| 187 | + font-family: var(--font-display); font-size: 12px; letter-spacing: -0.02em; | |
| 188 | + text-transform: none; color: var(--ink); | |
| 189 | +} | |
| 190 | +.gk-badge b .ka { | |
| 191 | + display: inline-block; background: var(--ink); color: var(--accent); | |
| 192 | + border-radius: 5px; padding: 0 5px 1px; margin-left: 3px; transform: rotate(-2deg); | |
| 193 | +} | |
| 194 | +.gk-badge:hover .ka { transform: rotate(0); } | |
| 195 | +.gk-badge--dark { background: transparent; border-color: rgba(245,243,238,0.4); color: rgba(245,243,238,0.75); } | |
| 196 | +.gk-badge--dark b { color: var(--paper); } | |
| 197 | + | |
| 198 | +/* ---- Footer commun (fond encre — voir react/KaFooter.tsx) ---- */ | |
| 199 | +.ka-footer { margin-top: var(--sp-8); background: var(--ink); padding: 44px 0; font-size: 13px; color: rgba(245,243,238,0.75); } | |
| 200 | +.ka-footer a { text-decoration: none; } | |
| 201 | +.ka-footer .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--paper); text-decoration: none; } | |
| 202 | +.ka-footer .wordmark .ka { color: var(--accent); } | |
| 203 | +.ka-footer .desc { max-width: 640px; margin-top: var(--sp-4); } | |
| 204 | +.ka-footer .notice { max-width: 640px; margin-top: var(--sp-4); border-left: 2px solid var(--accent); padding-left: var(--sp-4); } | |
| 205 | +.ka-footer .notice b { color: var(--paper); } | |
| 206 | +.ka-footer .sites { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } | |
| 207 | +.ka-footer .sites a { color: rgba(245,243,238,0.65); } | |
| 208 | +.ka-footer .sites a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } | |
| 209 | +.ka-footer .contacts { display: grid; gap: 14px 32px; border-top: 1px solid rgba(245,243,238,0.15); margin-top: 30px; padding-top: 26px; } | |
| 210 | +@media (min-width: 768px) { .ka-footer .contacts { grid-template-columns: repeat(3, 1fr); } } | |
| 211 | +.ka-footer .contacts a { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: rgba(245,243,238,0.85); } | |
| 212 | +.ka-footer .contacts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } | |
| 213 | +.ka-footer .contacts span { display: block; margin-top: 3px; font-size: 11px; color: rgba(245,243,238,0.5); } | |
| 214 | +.ka-footer .legal { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: rgba(245,243,238,0.45); } | |
| 215 | +.ka-footer .legal a { color: inherit; } | |
| 216 | +.ka-footer .legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } | |
| 217 | + | |
| 218 | +/* ---- Tableaux → cartes empilées sous 768 px ---- */ | |
| 219 | +.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } | |
| 220 | +@media (max-width: 767px) { | |
| 221 | + .tbl-stack thead { display: none; } | |
| 222 | + .tbl-stack tr { display: block; border: 1.5px solid var(--ink); border-radius: var(--r-card); margin-bottom: var(--sp-3); background: var(--surface); } | |
| 223 | + .tbl-stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px; border: 0; } | |
| 224 | + .tbl-stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } | |
| 225 | +} | |
| 226 | + | |
| 227 | +/* ---- Utilitaires responsive ---- */ | |
| 228 | +.only-mobile { display: initial; } .only-desktop { display: none; } | |
| 229 | +@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } } | |
modified
frontend/src/main.tsx
+1 −0
@@ -12,6 +12,7 @@ import React from "react"; | ||
| 12 | 12 | import ReactDOM from "react-dom/client"; |
| 13 | 13 | import { BrowserRouter } from "react-router-dom"; |
| 14 | 14 | import App from "./App"; |
| 15 | +import "./ka/tokens.css"; // design system commun Groupe KA — AVANT le CSS local | |
| 15 | 16 | import "./styles.css"; |
| 16 | 17 | |
| 17 | 18 | ReactDOM.createRoot(document.getElementById("root")!).render( |
added
frontend/src/pages/Contact.tsx
+72 −0
@@ -0,0 +1,72 @@ | ||
| 1 | +/** | |
| 2 | + * ============================================================================= | |
| 3 | + * Job·Ka — Groupe KA | |
| 4 | + * Auteur : Simon-Pierre Boucher | |
| 5 | + * Contact : contact@spboucher.ai | |
| 6 | + * Fichier : frontend/src/pages/Contact.tsx | |
| 7 | + * Rôle : Page Contact commune Groupe KA (données ka/ecosystem.json) | |
| 8 | + * Créé : 2026-08-17 Modifié : 2026-08-17 | |
| 9 | + * ============================================================================= | |
| 10 | + */ | |
| 11 | +import { useEffect } from "react"; | |
| 12 | +import eco from "../ka/ecosystem.json"; | |
| 13 | + | |
| 14 | +export default function ContactPage() { | |
| 15 | + useEffect(() => { | |
| 16 | + document.title = "Contact | Job-Ka — Un service Groupe KA"; | |
| 17 | + window.scrollTo(0, 0); | |
| 18 | + }, []); | |
| 19 | + | |
| 20 | + const others = eco.sites.filter((s) => s.id !== "job-ka"); | |
| 21 | + | |
| 22 | + return ( | |
| 23 | + <div className="container contact-page"> | |
| 24 | + <span className="kicker">Contact</span> | |
| 25 | + <h1> | |
| 26 | + Écrire au <span className="hl">Groupe KA</span> | |
| 27 | + </h1> | |
| 28 | + <p className="lede"> | |
| 29 | + Job-Ka — {eco.sites.find((s) => s.id === "job-ka")?.tagline?.toLowerCase()} — | |
| 30 | + est un service du {eco.org.name}. {eco.org.tagline} Toutes les demandes | |
| 31 | + passent par les adresses ci-dessous. | |
| 32 | + </p> | |
| 33 | + | |
| 34 | + <div className="contact-grid"> | |
| 35 | + {eco.contacts.map((c) => ( | |
| 36 | + <div className="card contact-card" key={c.email}> | |
| 37 | + <span className="klabel">{c.role}</span> | |
| 38 | + <a className="mail" href={`mailto:${c.email}`}>{c.email}</a> | |
| 39 | + </div> | |
| 40 | + ))} | |
| 41 | + </div> | |
| 42 | + | |
| 43 | + <p className="contact-note"> | |
| 44 | + <b>{eco.org.disclaimer}</b> Les offres affichées sur Job-Ka proviennent | |
| 45 | + des pages carrières publiques des employeurs québécois ; chaque fiche | |
| 46 | + renvoie vers l'offre originale. Pour postuler ou poser une question sur | |
| 47 | + un poste, adressez-vous directement à l'employeur indiqué sur la fiche. | |
| 48 | + </p> | |
| 49 | + | |
| 50 | + <div className="contact-hub"> | |
| 51 | + <span className="klabel">L'écosystème ·Ka</span> | |
| 52 | + <ul className="contact-sites"> | |
| 53 | + {others.map((s) => ( | |
| 54 | + <li key={s.id}> | |
| 55 | + <a href={`https://${s.domain}`} target="_blank" rel="noopener noreferrer"> | |
| 56 | + {s.wordmark} | |
| 57 | + </a> | |
| 58 | + </li> | |
| 59 | + ))} | |
| 60 | + </ul> | |
| 61 | + <p style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 10 }}> | |
| 62 | + <a className="btn btn-primary" href={eco.hub.url} target="_blank" rel="noopener noreferrer"> | |
| 63 | + Visiter le portail groupe-ka.com → | |
| 64 | + </a> | |
| 65 | + <a className="btn" href={`${eco.hub.url}${eco.hub.loginPath}`} target="_blank" rel="noopener noreferrer"> | |
| 66 | + Créer un compte KA ID | |
| 67 | + </a> | |
| 68 | + </p> | |
| 69 | + </div> | |
| 70 | + </div> | |
| 71 | + ); | |
| 72 | +} | |
modified
frontend/src/pages/MapPage.tsx
+2 −2
@@ -39,7 +39,7 @@ export default function MapPage() { | ||
| 39 | 39 | map.addLayer({ |
| 40 | 40 | id: "clusters", type: "circle", source: "jobs", filter: ["has", "point_count"], |
| 41 | 41 | paint: { |
| 42 | − "circle-color": "#1c5c41", | |
| 42 | + "circle-color": "#0c8599", | |
| 43 | 43 | "circle-radius": ["step", ["get", "point_count"], 16, 25, 22, 100, 28], |
| 44 | 44 | "circle-stroke-width": 2, "circle-stroke-color": "#ffffff", |
| 45 | 45 | }, |
@@ -52,7 +52,7 @@ export default function MapPage() { | ||
| 52 | 52 | map.addLayer({ |
| 53 | 53 | id: "points", type: "circle", source: "jobs", filter: ["!", ["has", "point_count"]], |
| 54 | 54 | paint: { |
| 55 | − "circle-color": "#1c5c41", "circle-radius": 7, | |
| 55 | + "circle-color": "#0c8599", "circle-radius": 7, | |
| 56 | 56 | "circle-stroke-width": 2, "circle-stroke-color": "#ffffff", |
| 57 | 57 | }, |
| 58 | 58 | }); |
modified
frontend/src/pages/Stats.tsx
+139 −59
@@ -4,76 +4,156 @@ | ||
| 4 | 4 | * Auteur : Simon-Pierre Boucher |
| 5 | 5 | * Contact : contact@spboucher.ai |
| 6 | 6 | * Fichier : frontend/src/pages/Stats.tsx |
| 7 | − * Rôle : Statistiques du marché — tuiles + barres à teinte unique | |
| 8 | − * (magnitude portée par la longueur, étiquettes en encre de texte) | |
| 7 | + * Rôle : Tableau de bord analytique — module Stats commun Groupe KA | |
| 8 | + * (contrat ../ka/stats/SPEC.md, composants ../ka/stats/kacharts.tsx). | |
| 9 | + * PDF + fraîcheur, KPI, sélecteur de période, courbes (N-1), | |
| 10 | + * répartitions, géographie, calendrier de chaleur, tableaux, records. | |
| 9 | 11 | * Créé : 2026-08-17 Modifié : 2026-08-17 |
| 10 | 12 | * ============================================================================= |
| 11 | 13 | */ |
| 12 | −import { useEffect, useState } from "react"; | |
| 13 | −import { fetchStats, Stats as StatsData } from "../api"; | |
| 14 | +import { useCallback, useEffect, useState } from "react"; | |
| 15 | +import { | |
| 16 | + BarChart, BreakItem, CalendarHeatmap, DataTable, Donut, EmptyBlock, | |
| 17 | + Fraicheur, Kpi, KpiCard, LineChart, PdfButton, PeriodSelector, RecordCard, | |
| 18 | + RecordFact, Serie, TableSpec, | |
| 19 | +} from "../ka/stats/kacharts"; | |
| 14 | 20 | |
| 15 | −function Bars({ rows }: { rows: { name: string; n: number }[] }) { | |
| 16 | − const max = Math.max(1, ...rows.map((r) => r.n)); | |
| 17 | − return ( | |
| 18 | − <div className="bars"> | |
| 19 | − {rows.map((r) => ( | |
| 20 | − <div className="bar-row" key={r.name} title={`${r.name} : ${r.n} offres`}> | |
| 21 | − <span className="name">{r.name}</span> | |
| 22 | − <span className="track"><span className="fill" style={{ width: `${(r.n / max) * 100}%` }} /></span> | |
| 23 | − <span className="n">{r.n.toLocaleString("fr-CA")}</span> | |
| 24 | − </div> | |
| 25 | − ))} | |
| 26 | − </div> | |
| 27 | − ); | |
| 21 | +interface Dashboard { | |
| 22 | + updated: string; | |
| 23 | + period: { from: string | null; to: string | null; label: string }; | |
| 24 | + kpis: Kpi[]; | |
| 25 | + series: Serie[]; | |
| 26 | + breakdowns: { id: string; title: string; kind?: string; items: BreakItem[] }[]; | |
| 27 | + geo?: { title: string; items: BreakItem[] }; | |
| 28 | + heatmap?: { title: string; cells: { date: string; value: number }[] }; | |
| 29 | + tables: TableSpec[]; | |
| 30 | + records: RecordFact[]; | |
| 28 | 31 | } |
| 29 | 32 | |
| 30 | −export default function Stats() { | |
| 31 | − const [stats, setStats] = useState<StatsData | null>(null); | |
| 33 | +export default function StatsPage() { | |
| 34 | + const [period, setPeriod] = useState("30j"); | |
| 35 | + const [custom, setCustom] = useState<{ from: string; to: string }>({ from: "", to: "" }); | |
| 36 | + const [dash, setDash] = useState<Dashboard | null>(null); | |
| 37 | + const [loading, setLoading] = useState(true); | |
| 38 | + const [err, setErr] = useState<string | null>(null); | |
| 39 | + | |
| 40 | + const customOk = Boolean(custom.from && custom.to); | |
| 32 | 41 | |
| 33 | − useEffect(() => { fetchStats().then(setStats).catch(() => {}); }, []); | |
| 42 | + const load = useCallback(() => { | |
| 43 | + setLoading(true); | |
| 44 | + setErr(null); | |
| 45 | + const p = new URLSearchParams({ period }); | |
| 46 | + if (customOk) { | |
| 47 | + p.set("from", custom.from); | |
| 48 | + p.set("to", custom.to); | |
| 49 | + } | |
| 50 | + fetch(`/api/stats/dashboard?${p}`) | |
| 51 | + .then((r) => { | |
| 52 | + if (!r.ok) throw new Error(`API ${r.status}`); | |
| 53 | + return r.json(); | |
| 54 | + }) | |
| 55 | + .then((d: Dashboard) => setDash(d)) | |
| 56 | + .catch((e) => setErr(String(e?.message ?? e))) | |
| 57 | + .finally(() => setLoading(false)); | |
| 58 | + }, [period, custom.from, custom.to, customOk]); | |
| 34 | 59 | |
| 35 | − if (!stats) return <div className="container empty">Chargement…</div>; | |
| 60 | + useEffect(() => { | |
| 61 | + document.title = "Statistiques de l'emploi — Job-Ka · Un service Groupe KA"; | |
| 62 | + load(); | |
| 63 | + }, [load]); | |
| 36 | 64 | |
| 37 | − const pctSalary = stats.total ? Math.round((stats.with_salary / stats.total) * 100) : 0; | |
| 65 | + const donuts = dash?.breakdowns?.filter((b) => b.kind === "donut") ?? []; | |
| 66 | + const barBreaks = dash?.breakdowns?.filter((b) => b.kind !== "donut") ?? []; | |
| 38 | 67 | |
| 39 | 68 | return ( |
| 40 | − <main className="container"> | |
| 41 | − <h1 className="section-title" style={{ fontSize: 24, marginTop: 28 }}>Le marché en chiffres</h1> | |
| 42 | − <div className="tiles"> | |
| 43 | − <div className="tile"><div className="value">{stats.total.toLocaleString("fr-CA")}</div><div className="label">Offres actives</div></div> | |
| 44 | − <div className="tile"><div className="value">{stats.employers.toLocaleString("fr-CA")}</div><div className="label">Employeurs</div></div> | |
| 45 | − <div className="tile"><div className="value">{pctSalary} %</div><div className="label">Offres avec salaire affiché</div></div> | |
| 46 | − <div className="tile"> | |
| 47 | − <div className="value"> | |
| 48 | − {stats.avg_salary_year ? `${Math.round(stats.avg_salary_year / 1000)} k$` : "—"} | |
| 49 | − </div> | |
| 50 | − <div className="label">Salaire annuel moyen (offres affichées)</div> | |
| 69 | + <div className="container" style={{ display: "grid", gap: 18, paddingBottom: 40 }}> | |
| 70 | + {/* --- en-tête : titre + PDF + fraîcheur ------------------------------ */} | |
| 71 | + <header style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "flex-end", justifyContent: "space-between", marginTop: 24 }}> | |
| 72 | + <div style={{ minWidth: 0 }}> | |
| 73 | + <p className="klabel" style={{ margin: 0 }}>Groupe KA · Job·Ka</p> | |
| 74 | + <h1 style={{ margin: "4px 0 0", fontFamily: "var(--font-display)", fontSize: "clamp(24px,3.4vw,34px)", letterSpacing: "-0.02em" }}> | |
| 75 | + Statistiques du marché de l'emploi | |
| 76 | + </h1> | |
| 77 | + {dash && ( | |
| 78 | + <p className="klabel" style={{ margin: "6px 0 0" }}> | |
| 79 | + Période : {dash.period.label} | |
| 80 | + {dash.period.from ? ` (${dash.period.from} → ${dash.period.to})` : ""} | |
| 81 | + </p> | |
| 82 | + )} | |
| 83 | + </div> | |
| 84 | + <div style={{ display: "grid", gap: 8, justifyItems: "end" }}> | |
| 85 | + <PdfButton period={period} from={customOk ? custom.from : undefined} to={customOk ? custom.to : undefined} /> | |
| 86 | + {dash && <Fraicheur updated={dash.updated} onRefresh={load} />} | |
| 87 | + </div> | |
| 88 | + </header> | |
| 89 | + | |
| 90 | + {err && ( | |
| 91 | + <div className="card" style={{ padding: 18, borderColor: "var(--danger)" }}> | |
| 92 | + <b>Impossible de charger les statistiques.</b> | |
| 93 | + <p className="klabel" style={{ margin: "6px 0 10px" }}>{err}</p> | |
| 94 | + <button type="button" className="btn btn-primary" onClick={load}>Réessayer</button> | |
| 95 | + </div> | |
| 96 | + )} | |
| 97 | + | |
| 98 | + {/* --- bandeau KPI ----------------------------------------------------- */} | |
| 99 | + {dash && dash.kpis.length > 0 && ( | |
| 100 | + <section aria-label="Indicateurs clés" style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}> | |
| 101 | + {dash.kpis.map((k) => <KpiCard key={k.id} k={k} />)} | |
| 102 | + </section> | |
| 103 | + )} | |
| 104 | + {!dash && loading && ( | |
| 105 | + <div className="card" style={{ padding: 24, textAlign: "center" }}> | |
| 106 | + <span className="klabel">Chargement des statistiques…</span> | |
| 51 | 107 | </div> |
| 52 | − <div className="tile"><div className="value">{stats.remote.toLocaleString("fr-CA")}</div><div className="label">Postes en télétravail</div></div> | |
| 53 | − </div> | |
| 54 | − | |
| 55 | − <h2 className="section-title">Offres par catégorie</h2> | |
| 56 | − <Bars rows={stats.categories.map((c) => ({ name: c.category, n: c.n }))} /> | |
| 57 | − | |
| 58 | − <h2 className="section-title">Offres par ville</h2> | |
| 59 | − <Bars rows={stats.top_cities.map((c) => ({ name: c.city, n: c.n }))} /> | |
| 60 | − | |
| 61 | − <h2 className="section-title">Dernières synchronisations</h2> | |
| 62 | − <table className="data" style={{ marginBottom: 40 }}> | |
| 63 | − <thead> | |
| 64 | − <tr><th>Source</th><th>Quand</th><th>Trouvées</th><th>Ajouts</th><th>MAJ</th><th>Retraits</th><th>État</th></tr> | |
| 65 | − </thead> | |
| 66 | − <tbody> | |
| 67 | − {stats.recent_syncs.map((s, i) => ( | |
| 68 | − <tr key={i}> | |
| 69 | − <td>{s.source}</td> | |
| 70 | − <td>{new Date(s.ts * 1000).toLocaleString("fr-CA", { dateStyle: "short", timeStyle: "short" })}</td> | |
| 71 | − <td>{s.found}</td><td>{s.added}</td><td>{s.updated}</td><td>{s.removed}</td> | |
| 72 | − <td>{s.ok ? (s.message === "ok" ? "✓" : `⚠ ${s.message}`) : `✗ ${s.message}`}</td> | |
| 73 | − </tr> | |
| 74 | − ))} | |
| 75 | − </tbody> | |
| 76 | − </table> | |
| 77 | − </main> | |
| 108 | + )} | |
| 109 | + | |
| 110 | + {/* --- sélecteur de période -------------------------------------------- */} | |
| 111 | + <section className="card" style={{ padding: "14px 16px" }} aria-label="Période"> | |
| 112 | + <PeriodSelector | |
| 113 | + value={period} | |
| 114 | + onChange={(p) => { setPeriod(p); setCustom({ from: "", to: "" }); }} | |
| 115 | + custom={custom} | |
| 116 | + onCustom={(from, to) => setCustom({ from, to })} | |
| 117 | + /> | |
| 118 | + </section> | |
| 119 | + | |
| 120 | + {dash && ( | |
| 121 | + <div style={{ display: "grid", gap: 18, opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}> | |
| 122 | + {/* --- courbes ----------------------------------------------------- */} | |
| 123 | + {dash.series?.length ? ( | |
| 124 | + dash.series.map((s) => <LineChart key={s.id} serie={s} />) | |
| 125 | + ) : ( | |
| 126 | + <EmptyBlock title="Évolution quotidienne" /> | |
| 127 | + )} | |
| 128 | + | |
| 129 | + {/* --- répartitions (anneaux + barres) ------------------------------ */} | |
| 130 | + {(donuts.length > 0 || barBreaks.length > 0) && ( | |
| 131 | + <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}> | |
| 132 | + {donuts.map((b) => <Donut key={b.id} title={b.title} items={b.items} />)} | |
| 133 | + {barBreaks.map((b) => <BarChart key={b.id} title={b.title} items={b.items} unit="offres" />)} | |
| 134 | + </div> | |
| 135 | + )} | |
| 136 | + | |
| 137 | + {/* --- géographie --------------------------------------------------- */} | |
| 138 | + {dash.geo && <BarChart title={dash.geo.title} items={dash.geo.items} unit="offres" />} | |
| 139 | + | |
| 140 | + {/* --- calendrier de chaleur ---------------------------------------- */} | |
| 141 | + {dash.heatmap && <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />} | |
| 142 | + | |
| 143 | + {/* --- tableaux détaillés ------------------------------------------- */} | |
| 144 | + {dash.tables?.map((t) => <DataTable key={t.id} spec={t} />)} | |
| 145 | + | |
| 146 | + {/* --- records & faits marquants ------------------------------------ */} | |
| 147 | + {dash.records?.length > 0 && ( | |
| 148 | + <section aria-label="Records et faits marquants" style={{ display: "grid", gap: 10 }}> | |
| 149 | + <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 19 }}>Records & faits marquants</h2> | |
| 150 | + <div style={{ display: "grid", gap: 10, gridTemplateColumns: "repeat(auto-fit, minmax(min(280px, 100%), 1fr))" }}> | |
| 151 | + {dash.records.map((r) => <RecordCard key={r.label} r={r} />)} | |
| 152 | + </div> | |
| 153 | + </section> | |
| 154 | + )} | |
| 155 | + </div> | |
| 156 | + )} | |
| 157 | + </div> | |
| 78 | 158 | ); |
| 79 | 159 | } |
modified
frontend/src/styles.css
+121 −53
@@ -4,42 +4,35 @@ Job·Ka — Groupe KA | ||
| 4 | 4 | Auteur : Simon-Pierre Boucher |
| 5 | 5 | Contact : contact@spboucher.ai |
| 6 | 6 | Fichier : frontend/src/styles.css |
| 7 | −Rôle : Système de design unique de l'application (clair, style Groupe KA) | |
| 7 | +Rôle : CSS local Job·Ka — s'appuie sur le design system commun Groupe KA | |
| 8 | + (ka/tokens.css, importé AVANT ce fichier dans main.tsx). Ici : | |
| 9 | + seulement l'accent de la marque + les classes métier (offres, | |
| 10 | + filtres, carte). Le socle (body, grain, sélection, .container, | |
| 11 | + .btn, .card, .chip, ka-footer…) vit dans tokens.css. | |
| 8 | 12 | Créé : 2026-08-17 Modifié : 2026-08-17 |
| 9 | 13 | ============================================================================= |
| 10 | 14 | */ |
| 11 | 15 | |
| 12 | 16 | :root { |
| 13 | − --ink: #14181a; /* encre principale */ | |
| 14 | − --ink-2: #4a5459; /* encre secondaire */ | |
| 15 | − --ink-3: #7d8a90; /* encre atténuée */ | |
| 16 | − --surface: #ffffff; | |
| 17 | − --surface-2: #f4f6f5; | |
| 18 | − --border: #e3e8e6; | |
| 19 | − --brand: #141814; /* noir-vert Groupe KA */ | |
| 20 | − --accent: #d9f26b; /* lime Groupe KA (sur fond sombre uniquement) */ | |
| 21 | − --green: #1c5c41; /* vert profond — liens, barres, accents sur clair */ | |
| 17 | + /* ---- ACCENT Job·Ka (cyan officiel — voir ka/ecosystem.json) ---- */ | |
| 18 | + --accent: #0c8599; | |
| 19 | + --accent-soft: #def0f4; | |
| 20 | + --accent-deep: #095c6b; | |
| 21 | + --on-accent: #ffffff; | |
| 22 | + --lime: var(--accent); | |
| 23 | + --lime-soft: var(--accent-soft); | |
| 24 | + | |
| 25 | + /* ---- alias hérités du CSS v1 (classes métier ci-dessous) ---- */ | |
| 26 | + --brand: var(--ink); | |
| 27 | + --border: var(--line); | |
| 22 | 28 | --green-soft: #e7f2ec; |
| 23 | − --radius: 12px; | |
| 24 | − --shadow: 0 1px 2px rgb(20 24 20 / 6%), 0 4px 14px rgb(20 24 20 / 6%); | |
| 25 | −} | |
| 26 | − | |
| 27 | −* { box-sizing: border-box; } | |
| 28 | − | |
| 29 | −body { | |
| 30 | − margin: 0; | |
| 31 | − font-family: "Inter", system-ui, -apple-system, sans-serif; | |
| 32 | − color: var(--ink); | |
| 33 | − background: var(--surface-2); | |
| 34 | − font-size: 15px; | |
| 35 | − line-height: 1.55; | |
| 29 | + --radius: var(--r-card); | |
| 30 | + --shadow: var(--shadow-flat), 0 4px 14px rgb(20 24 20 / 6%); | |
| 36 | 31 | } |
| 37 | 32 | |
| 38 | 33 | a { color: var(--green); text-decoration: none; } |
| 39 | 34 | a:hover { text-decoration: underline; } |
| 40 | 35 | |
| 41 | −.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; } | |
| 42 | − | |
| 43 | 36 | /* --- en-tête ---------------------------------------------------------------- */ |
| 44 | 37 | header.site { |
| 45 | 38 | background: var(--brand); |
@@ -47,21 +40,66 @@ header.site { | ||
| 47 | 40 | position: sticky; top: 0; z-index: 50; |
| 48 | 41 | } |
| 49 | 42 | header.site .container { |
| 50 | − display: flex; align-items: center; gap: 24px; height: 58px; | |
| 43 | + display: flex; align-items: center; flex-wrap: wrap; | |
| 44 | + gap: 4px 14px; min-height: 58px; padding-top: 8px; padding-bottom: 8px; | |
| 51 | 45 | } |
| 52 | −.logo { font-weight: 800; font-size: 20px; color: #fff; letter-spacing: -0.3px; } | |
| 53 | −.logo em { color: var(--accent); font-style: normal; } | |
| 46 | +.logo { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.3px; white-space: nowrap; } | |
| 47 | +.logo em { color: var(--accent-soft); font-style: normal; } | |
| 48 | +header.site .gk-badge { flex-shrink: 0; } | |
| 54 | 49 | nav.main { display: flex; gap: 4px; margin-left: auto; } |
| 55 | 50 | nav.main a { |
| 56 | 51 | color: #d7ddda; padding: 7px 12px; border-radius: 8px; font-weight: 500; |
| 52 | + white-space: nowrap; | |
| 57 | 53 | } |
| 58 | 54 | nav.main a:hover { color: #fff; background: rgb(255 255 255 / 8%); text-decoration: none; } |
| 59 | −nav.main a.active { color: var(--accent); background: rgb(255 255 255 / 10%); } | |
| 55 | +nav.main a.active { color: var(--accent-soft); background: rgb(255 255 255 / 10%); } | |
| 56 | + | |
| 57 | +/* connexion KA ID (droite du header) */ | |
| 58 | +.auth-box { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } | |
| 59 | +.btn-ka { | |
| 60 | + display: inline-flex; align-items: center; gap: 7px; min-height: 34px; | |
| 61 | + padding: 4px 13px; border: 1.5px solid rgb(245 243 238 / 45%); | |
| 62 | + border-radius: var(--r-pill); background: transparent; color: #f5f3ee; | |
| 63 | + font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; | |
| 64 | + letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; | |
| 65 | + white-space: nowrap; text-decoration: none; | |
| 66 | +} | |
| 67 | +.btn-ka b { | |
| 68 | + font-family: var(--font-display); font-size: 12px; text-transform: none; | |
| 69 | + letter-spacing: -0.02em; background: var(--accent); color: var(--on-accent); | |
| 70 | + border-radius: 5px; padding: 0 6px 1px; | |
| 71 | +} | |
| 72 | +.btn-ka:hover { border-color: var(--accent-soft); text-decoration: none; } | |
| 73 | +.auth-user { display: inline-flex; align-items: center; gap: 8px; color: #d7ddda; font-size: 13px; white-space: nowrap; } | |
| 74 | +.auth-user img { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgb(245 243 238 / 45%); } | |
| 75 | +.auth-user button { | |
| 76 | + border: 0; background: none; color: #9aa5a0; font: inherit; font-size: 12px; | |
| 77 | + cursor: pointer; padding: 6px 0; min-height: 34px; | |
| 78 | +} | |
| 79 | +.auth-user button:hover { color: #fff; text-decoration: underline; } | |
| 80 | + | |
| 81 | +/* bascule mobile du header : sous 980 px la nav passe sur sa propre rangée | |
| 82 | + (défilement horizontal contenu — jamais de débordement de page) */ | |
| 83 | +@media (max-width: 979px) { | |
| 84 | + nav.main { | |
| 85 | + order: 10; flex-basis: 100%; margin-left: 0; | |
| 86 | + overflow-x: auto; -webkit-overflow-scrolling: touch; | |
| 87 | + scrollbar-width: none; padding-bottom: 2px; | |
| 88 | + } | |
| 89 | + nav.main::-webkit-scrollbar { display: none; } | |
| 90 | + nav.main a { padding: 7px 9px; font-size: 13.5px; } | |
| 91 | + .auth-box { margin-left: auto; } | |
| 92 | +} | |
| 93 | +@media (max-width: 560px) { | |
| 94 | + header.site .gk-badge { padding: 2px 8px 3px; font-size: 9px; } | |
| 95 | + header.site .gk-badge b { font-size: 11px; } | |
| 96 | + .auth-user span.name { display: none; } | |
| 97 | +} | |
| 60 | 98 | |
| 61 | 99 | /* --- héros ------------------------------------------------------------------ */ |
| 62 | 100 | .hero { background: var(--brand); color: #fff; padding: 40px 0 34px; } |
| 63 | −.hero h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.5px; } | |
| 64 | −.hero h1 em { color: var(--accent); font-style: normal; } | |
| 101 | +.hero h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; color: #fff; } | |
| 102 | +.hero h1 em { color: var(--accent-soft); font-style: normal; } | |
| 65 | 103 | .hero p { margin: 0 0 20px; color: #b9c2be; max-width: 640px; } |
| 66 | 104 | |
| 67 | 105 | /* --- filtres ------------------------------------------------------------------ */ |
@@ -73,6 +111,7 @@ nav.main a.active { color: var(--accent); background: rgb(255 255 255 / 10%); } | ||
| 73 | 111 | .filters input[type="search"] { flex: 1 1 220px; } |
| 74 | 112 | .filters label.check { |
| 75 | 113 | display: inline-flex; align-items: center; gap: 7px; background: #fff; |
| 114 | + color: var(--ink); /* le héros est blanc sur encre — ne pas hériter */ | |
| 76 | 115 | border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; |
| 77 | 116 | height: 42px; cursor: pointer; user-select: none; white-space: nowrap; |
| 78 | 117 | } |
@@ -84,9 +123,9 @@ nav.main a.active { color: var(--accent); background: rgb(255 255 255 / 10%); } | ||
| 84 | 123 | border-radius: var(--radius); padding: 18px 20px; color: inherit; |
| 85 | 124 | transition: border-color 0.12s, box-shadow 0.12s; |
| 86 | 125 | } |
| 87 | −.job-card:hover { border-color: var(--green); box-shadow: var(--shadow); text-decoration: none; } | |
| 126 | +.job-card:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; } | |
| 88 | 127 | .job-card h3 { margin: 0 0 2px; font-size: 17px; font-weight: 700; color: var(--ink); } |
| 89 | −.job-card .employer { color: var(--green); font-weight: 600; } | |
| 128 | +.job-card .employer { color: var(--accent-deep); font-weight: 600; } | |
| 90 | 129 | .job-card .meta { color: var(--ink-3); font-size: 13.5px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; } |
| 91 | 130 | |
| 92 | 131 | .badge { |
@@ -94,7 +133,7 @@ nav.main a.active { color: var(--accent); background: rgb(255 255 255 / 10%); } | ||
| 94 | 133 | font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); |
| 95 | 134 | } |
| 96 | 135 | .badge.salary { background: var(--green-soft); color: var(--green); } |
| 97 | −.badge.mode { background: #eef1ff; color: #3c4a9e; } | |
| 136 | +.badge.mode { background: var(--accent-soft); color: var(--accent-deep); } | |
| 98 | 137 | |
| 99 | 138 | /* --- fiche ------------------------------------------------------------------------- */ |
| 100 | 139 | .sheet { |
@@ -104,12 +143,6 @@ nav.main a.active { color: var(--accent); background: rgb(255 255 255 / 10%); } | ||
| 104 | 143 | .sheet h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.3px; } |
| 105 | 144 | .sheet .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; } |
| 106 | 145 | .sheet .description { white-space: pre-line; color: var(--ink-2); } |
| 107 | −.btn { | |
| 108 | − display: inline-block; background: var(--brand); color: var(--accent); | |
| 109 | − font-weight: 700; padding: 11px 22px; border-radius: 10px; border: none; | |
| 110 | − cursor: pointer; font: inherit; font-weight: 700; | |
| 111 | −} | |
| 112 | −.btn:hover { text-decoration: none; opacity: 0.92; } | |
| 113 | 146 | |
| 114 | 147 | /* --- tuiles de statistiques (hero numbers) --------------------------------------- */ |
| 115 | 148 | .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 22px 0; } |
@@ -117,15 +150,15 @@ nav.main a.active { color: var(--accent); background: rgb(255 255 255 / 10%); } | ||
| 117 | 150 | background: var(--surface); border: 1px solid var(--border); |
| 118 | 151 | border-radius: var(--radius); padding: 18px 20px; |
| 119 | 152 | } |
| 120 | −.tile .value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } | |
| 153 | +.tile .value { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; } | |
| 121 | 154 | .tile .label { color: var(--ink-3); font-size: 13px; margin-top: 2px; } |
| 122 | 155 | |
| 123 | 156 | /* --- barres horizontales (magnitude, teinte unique) --------------------------------- */ |
| 124 | 157 | .bars { display: grid; gap: 8px; margin: 10px 0 26px; } |
| 125 | 158 | .bar-row { display: grid; grid-template-columns: 190px 1fr 52px; align-items: center; gap: 10px; } |
| 126 | 159 | .bar-row .name { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| 127 | −.bar-row .track { background: var(--surface-2); border-radius: 4px; height: 14px; } | |
| 128 | −.bar-row .fill { background: var(--green); border-radius: 4px 4px 4px 4px; height: 14px; min-width: 3px; } | |
| 160 | +.bar-row .track { background: rgb(20 24 20 / 6%); border-radius: 4px; height: 14px; } | |
| 161 | +.bar-row .fill { background: var(--accent); border-radius: 4px; height: 14px; min-width: 3px; } | |
| 129 | 162 | .bar-row .n { font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; } |
| 130 | 163 | |
| 131 | 164 | /* --- tableaux ----------------------------------------------------------------------- */ |
@@ -149,24 +182,59 @@ table.data tr:last-child td { border-bottom: none; } | ||
| 149 | 182 | .pager { display: flex; gap: 8px; justify-content: center; margin: 26px 0; } |
| 150 | 183 | .pager button { |
| 151 | 184 | background: var(--surface); border: 1px solid var(--border); border-radius: 8px; |
| 152 | − padding: 8px 16px; cursor: pointer; font: inherit; | |
| 185 | + padding: 8px 16px; cursor: pointer; font: inherit; min-height: var(--touch); | |
| 153 | 186 | } |
| 154 | 187 | .pager button:disabled { opacity: 0.4; cursor: default; } |
| 155 | 188 | .empty { text-align: center; color: var(--ink-3); padding: 60px 0; } |
| 156 | 189 | .section-title { font-size: 19px; font-weight: 700; margin: 30px 0 4px; } |
| 157 | 190 | .muted { color: var(--ink-3); font-size: 13px; } |
| 158 | 191 | |
| 159 | −/* --- pied de page ----------------------------------------------------------------------- */ | |
| 160 | −footer.site { | |
| 161 | − background: var(--brand); color: #9aa5a0; margin-top: 60px; | |
| 162 | − padding: 26px 0; font-size: 13.5px; | |
| 163 | −} | |
| 164 | −footer.site a { color: #d7ddda; } | |
| 165 | −footer.site .container { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; } | |
| 192 | +/* --- page Contact (commune Groupe KA) -------------------------------------------------- */ | |
| 193 | +.contact-page { padding: 44px 0 90px; } | |
| 194 | +.contact-page h1 { margin: 10px 0 8px; } | |
| 195 | +.contact-page .lede { color: var(--ink-2); max-width: 640px; margin: 0 0 26px; } | |
| 196 | +.contact-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 26px 0; } | |
| 197 | +@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } } | |
| 198 | +.contact-card { padding: 18px 20px; } | |
| 199 | +.contact-card .klabel { display: block; margin-bottom: 6px; } | |
| 200 | +.contact-card a.mail { | |
| 201 | + font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; | |
| 202 | + color: var(--accent-deep); word-break: break-all; | |
| 203 | + text-decoration: underline; text-underline-offset: 3px; | |
| 204 | +} | |
| 205 | +.contact-note { | |
| 206 | + border-left: 3px solid var(--accent); background: var(--surface); | |
| 207 | + border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); | |
| 208 | + border-bottom: 1.5px solid var(--ink); border-radius: 0 var(--r-card) var(--r-card) 0; | |
| 209 | + padding: 14px 18px; max-width: 720px; color: var(--ink-2); font-size: 14px; | |
| 210 | +} | |
| 211 | +.contact-note b { color: var(--ink); } | |
| 212 | +.contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } | |
| 213 | +.contact-sites a { | |
| 214 | + display: inline-flex; align-items: center; min-height: 34px; | |
| 215 | + padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); | |
| 216 | + background: var(--surface); font-family: var(--font-mono); font-size: 11px; | |
| 217 | + font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; | |
| 218 | + color: var(--ink); transition: transform 0.12s, box-shadow 0.12s; | |
| 219 | +} | |
| 220 | +.contact-sites a:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-off-mid); text-decoration: none; } | |
| 221 | +.contact-hub { margin-top: 26px; } | |
| 222 | + | |
| 223 | +/* --- rangée de navigation locale au-dessus du footer commun ----------------------------- */ | |
| 224 | +.prefooter { border-top: 1.5px solid var(--ink); background: var(--surface-2); padding: 18px 0; margin-top: 60px; } | |
| 225 | +.prefooter .container { | |
| 226 | + display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; | |
| 227 | +} | |
| 228 | +.prefooter a { | |
| 229 | + color: var(--ink-2); text-decoration: none; text-transform: uppercase; | |
| 230 | + letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; | |
| 231 | + min-height: var(--touch); display: inline-flex; align-items: center; | |
| 232 | +} | |
| 233 | +.prefooter a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; } | |
| 234 | +.prefooter .baseline { width: 100%; font-size: 13px; color: var(--ink-2); } | |
| 235 | +.ka-footer { margin-top: 0; } | |
| 166 | 236 | |
| 167 | 237 | @media (max-width: 640px) { |
| 168 | − nav.main { gap: 0; } | |
| 169 | − nav.main a { padding: 7px 8px; font-size: 13.5px; } | |
| 170 | 238 | .bar-row { grid-template-columns: 120px 1fr 44px; } |
| 171 | 239 | .sheet { padding: 20px; } |
| 172 | 240 | } |
added
jobka/auth.py
+238 −0
@@ -0,0 +1,238 @@ | ||
| 1 | +# ============================================================================= | |
| 2 | +# Job·Ka — Groupe KA | |
| 3 | +# Auteur : Simon-Pierre Boucher | |
| 4 | +# Contact : contact@spboucher.ai | |
| 5 | +# Fichier : jobka/auth.py | |
| 6 | +# Rôle : Connexion KA ID — SSO du hub Groupe KA (groupe-ka.com) | |
| 7 | +# Flux (hérité de Lou·Ka, client_id « job-ka ») : | |
| 8 | +# GET /api/auth/ka/login -> redirige vers {hub}/sso/authorize (state signé) | |
| 9 | +# GET /api/auth/ka/callback -> vérifie le jeton HS256 du hub, upsert | |
| 10 | +# l'utilisateur local, pose le cookie de session | |
| 11 | +# GET /api/auth/config -> {"ka": bool} (bouton affiché ou non) | |
| 12 | +# GET /api/me -> profil de la session courante (ou 401) | |
| 13 | +# POST /api/auth/logout -> efface le cookie | |
| 14 | +# Session : jeton signé HMAC-SHA256 (stdlib seulement) dans un cookie | |
| 15 | +# httpOnly propre à Job·Ka (« jobka_session »). La création de compte se | |
| 16 | +# fait sur le hub : https://www.groupe-ka.com/connexion. | |
| 17 | +# Config .env : KA_SSO_SECRET (partagé avec le hub), KA_HUB_URL (optionnel), | |
| 18 | +# JOBKA_BASE_URL (optionnel — défaut https://www.job-ka.com). | |
| 19 | +# Créé : 2026-08-17 Modifié : 2026-08-17 | |
| 20 | +# ============================================================================= | |
| 21 | +from __future__ import annotations | |
| 22 | + | |
| 23 | +import base64 | |
| 24 | +import hashlib | |
| 25 | +import hmac | |
| 26 | +import json | |
| 27 | +import os | |
| 28 | +import secrets | |
| 29 | +import time | |
| 30 | +from urllib.parse import urlencode | |
| 31 | + | |
| 32 | +from fastapi import APIRouter, HTTPException, Request | |
| 33 | +from fastapi.responses import JSONResponse, RedirectResponse | |
| 34 | + | |
| 35 | +from . import db | |
| 36 | + | |
| 37 | +router = APIRouter(prefix="/api") | |
| 38 | + | |
| 39 | +COOKIE = "jobka_session" | |
| 40 | +SESSION_DAYS = 30 | |
| 41 | +CLIENT_ID = "job-ka" | |
| 42 | + | |
| 43 | +KA_HUB_URL = os.environ.get("KA_HUB_URL", "https://www.groupe-ka.com").rstrip("/") | |
| 44 | + | |
| 45 | + | |
| 46 | +def _ka_secret() -> bytes | None: | |
| 47 | + s = os.environ.get("KA_SSO_SECRET") | |
| 48 | + return s.encode() if s else None | |
| 49 | + | |
| 50 | + | |
| 51 | +def _session_secret() -> bytes: | |
| 52 | + """Clé de signature des sessions locales — dérivée du secret SSO partagé | |
| 53 | + (aucune variable .env supplémentaire requise).""" | |
| 54 | + s = _ka_secret() | |
| 55 | + if not s: | |
| 56 | + raise HTTPException(503, "KA_SSO_SECRET manquant (voir .env)") | |
| 57 | + return hashlib.sha256(b"jobka-session|" + s).digest() | |
| 58 | + | |
| 59 | + | |
| 60 | +def _base_url(request: Request) -> str: | |
| 61 | + """URL publique de l'app. Le trafic prod passe par ngrok (schéma http vu | |
| 62 | + du serveur) : on force https sur le domaine officiel. JOBKA_BASE_URL | |
| 63 | + (optionnel) a préséance — utile en dev local.""" | |
| 64 | + env = os.environ.get("JOBKA_BASE_URL") | |
| 65 | + if env: | |
| 66 | + return env.rstrip("/") | |
| 67 | + host = request.url.hostname or "" | |
| 68 | + if host.endswith("job-ka.com"): | |
| 69 | + return "https://www.job-ka.com" | |
| 70 | + return str(request.base_url).rstrip("/") | |
| 71 | + | |
| 72 | + | |
| 73 | +# -- jeton signé local (payload JSON -> base64url.signature) ------------------- | |
| 74 | + | |
| 75 | +def _sign(payload: dict) -> str: | |
| 76 | + raw = base64.urlsafe_b64encode( | |
| 77 | + json.dumps(payload, separators=(",", ":")).encode()).decode().rstrip("=") | |
| 78 | + sig = hmac.new(_session_secret(), raw.encode(), hashlib.sha256).hexdigest() | |
| 79 | + return f"{raw}.{sig}" | |
| 80 | + | |
| 81 | + | |
| 82 | +def _verify(token: str) -> dict | None: | |
| 83 | + try: | |
| 84 | + raw, sig = token.rsplit(".", 1) | |
| 85 | + expected = hmac.new(_session_secret(), raw.encode(), | |
| 86 | + hashlib.sha256).hexdigest() | |
| 87 | + if not hmac.compare_digest(sig, expected): | |
| 88 | + return None | |
| 89 | + payload = json.loads(base64.urlsafe_b64decode(raw + "=" * (-len(raw) % 4))) | |
| 90 | + if payload.get("exp", 0) < time.time(): | |
| 91 | + return None | |
| 92 | + return payload | |
| 93 | + except Exception: | |
| 94 | + return None | |
| 95 | + | |
| 96 | + | |
| 97 | +def current_user(request: Request) -> dict | None: | |
| 98 | + """Payload de session ({uid, ka_id, email, name, picture}) ou None.""" | |
| 99 | + token = request.cookies.get(COOKIE) | |
| 100 | + return _verify(token) if token else None | |
| 101 | + | |
| 102 | + | |
| 103 | +# -- vérification du JWT HS256 émis par le hub KA ------------------------------- | |
| 104 | + | |
| 105 | +def _b64url(s: str) -> bytes: | |
| 106 | + return base64.urlsafe_b64decode(s + "=" * (-len(s) % 4)) | |
| 107 | + | |
| 108 | + | |
| 109 | +def _verify_ka_token(token: str) -> dict | None: | |
| 110 | + secret = _ka_secret() | |
| 111 | + if not secret: | |
| 112 | + return None | |
| 113 | + try: | |
| 114 | + h_b64, p_b64, s_b64 = token.split(".") | |
| 115 | + expected = hmac.new(secret, f"{h_b64}.{p_b64}".encode(), | |
| 116 | + hashlib.sha256).digest() | |
| 117 | + if not hmac.compare_digest(_b64url(s_b64), expected): | |
| 118 | + return None | |
| 119 | + if json.loads(_b64url(h_b64)).get("alg") != "HS256": | |
| 120 | + return None | |
| 121 | + claims = json.loads(_b64url(p_b64)) | |
| 122 | + if claims.get("iss") != KA_HUB_URL: | |
| 123 | + return None | |
| 124 | + aud = claims.get("aud") | |
| 125 | + if (aud if isinstance(aud, str) else "") != CLIENT_ID \ | |
| 126 | + and CLIENT_ID not in (aud if isinstance(aud, list) else []): | |
| 127 | + return None | |
| 128 | + if claims.get("exp", 0) < time.time(): | |
| 129 | + return None | |
| 130 | + return claims | |
| 131 | + except Exception: | |
| 132 | + return None | |
| 133 | + | |
| 134 | + | |
| 135 | +# -- routes --------------------------------------------------------------------- | |
| 136 | + | |
| 137 | +@router.get("/auth/config") | |
| 138 | +def auth_config(): | |
| 139 | + return {"ka": bool(_ka_secret())} | |
| 140 | + | |
| 141 | + | |
| 142 | +@router.get("/auth/ka/login") | |
| 143 | +def ka_login(request: Request): | |
| 144 | + """Départ SSO : envoie l'utilisateur au hub KA ID (groupe-ka.com).""" | |
| 145 | + if not _ka_secret(): | |
| 146 | + raise HTTPException(503, "KA_SSO_SECRET manquant (voir .env)") | |
| 147 | + state = _sign({"n": secrets.token_urlsafe(12), "exp": time.time() + 600}) | |
| 148 | + params = { | |
| 149 | + "client_id": CLIENT_ID, | |
| 150 | + "redirect_uri": f"{_base_url(request)}/api/auth/ka/callback", | |
| 151 | + "state": state, | |
| 152 | + } | |
| 153 | + return RedirectResponse(f"{KA_HUB_URL}/sso/authorize?{urlencode(params)}") | |
| 154 | + | |
| 155 | + | |
| 156 | +@router.get("/auth/ka/callback") | |
| 157 | +def ka_callback(request: Request, ka_token: str = "", state: str = ""): | |
| 158 | + """Retour SSO : vérifie le jeton du hub, upsert l'utilisateur local, | |
| 159 | + pose le cookie de session Job·Ka.""" | |
| 160 | + if not ka_token or _verify(state) is None: | |
| 161 | + raise HTTPException(400, "state invalide ou expiré") | |
| 162 | + claims = _verify_ka_token(ka_token) | |
| 163 | + if claims is None: | |
| 164 | + raise HTTPException(401, "jeton KA invalide ou expiré") | |
| 165 | + | |
| 166 | + email = (claims.get("email") or "").lower() | |
| 167 | + name = claims.get("name") or (email.split("@")[0] if email else "membre") | |
| 168 | + picture = claims.get("picture") or "" | |
| 169 | + ka_sub = f"ka:{claims.get('sub')}" # clé stable côté hub | |
| 170 | + ka_id = (claims.get("ka_id") or "").strip() # créé À LA SOURCE par le hub | |
| 171 | + | |
| 172 | + con = db.connect() | |
| 173 | + now = time.time() | |
| 174 | + con.execute( | |
| 175 | + """INSERT INTO users (ka_sub, email, name, picture, created_at, last_login) | |
| 176 | + VALUES (?,?,?,?,?,?) | |
| 177 | + ON CONFLICT(ka_sub) DO UPDATE SET | |
| 178 | + email=excluded.email, name=excluded.name, | |
| 179 | + picture=excluded.picture, last_login=excluded.last_login""", | |
| 180 | + (ka_sub, email, name, picture, now, now)) | |
| 181 | + row = con.execute("SELECT id FROM users WHERE ka_sub=?", (ka_sub,)).fetchone() | |
| 182 | + uid = row["id"] | |
| 183 | + if ka_id: | |
| 184 | + import sqlite3 | |
| 185 | + try: | |
| 186 | + con.execute("UPDATE users SET ka_id=? WHERE id=?", (ka_id, uid)) | |
| 187 | + except sqlite3.IntegrityError: | |
| 188 | + pass # KA ID déjà porté par une autre ligne locale : on garde | |
| 189 | + con.commit() | |
| 190 | + con.close() | |
| 191 | + | |
| 192 | + session = _sign({ | |
| 193 | + "uid": uid, | |
| 194 | + "ka_id": ka_id, | |
| 195 | + "email": email, | |
| 196 | + "name": name, | |
| 197 | + "picture": picture, | |
| 198 | + "exp": time.time() + SESSION_DAYS * 86400, | |
| 199 | + }) | |
| 200 | + resp = RedirectResponse("/?login=ok") | |
| 201 | + resp.set_cookie( | |
| 202 | + COOKIE, session, | |
| 203 | + max_age=SESSION_DAYS * 86400, | |
| 204 | + httponly=True, | |
| 205 | + secure=_base_url(request).startswith("https"), | |
| 206 | + samesite="lax", | |
| 207 | + path="/", | |
| 208 | + ) | |
| 209 | + return resp | |
| 210 | + | |
| 211 | + | |
| 212 | +@router.get("/me") | |
| 213 | +def me(request: Request): | |
| 214 | + user = current_user(request) | |
| 215 | + if user is None: | |
| 216 | + raise HTTPException(401, "non connecté") | |
| 217 | + con = db.connect() | |
| 218 | + row = con.execute("SELECT * FROM users WHERE id=?", (user["uid"],)).fetchone() | |
| 219 | + con.close() | |
| 220 | + if row is None: | |
| 221 | + raise HTTPException(401, "compte introuvable") | |
| 222 | + return { | |
| 223 | + "uid": row["id"], | |
| 224 | + "ka_id": row["ka_id"], | |
| 225 | + "email": row["email"], | |
| 226 | + "name": row["name"], | |
| 227 | + "picture": row["picture"], | |
| 228 | + "created_at": row["created_at"], | |
| 229 | + "last_login": row["last_login"], | |
| 230 | + "provider": "ka-id", | |
| 231 | + } | |
| 232 | + | |
| 233 | + | |
| 234 | +@router.post("/auth/logout") | |
| 235 | +def logout(): | |
| 236 | + resp = JSONResponse({"ok": True}) | |
| 237 | + resp.delete_cookie(COOKIE, path="/") | |
| 238 | + return resp | |
modified
jobka/db.py
+12 −0
@@ -110,6 +110,18 @@ CREATE TABLE IF NOT EXISTS salary_log ( | ||
| 110 | 110 | ); |
| 111 | 111 | CREATE INDEX IF NOT EXISTS idx_salary_log_uid ON salary_log(uid); |
| 112 | 112 | |
| 113 | +CREATE TABLE IF NOT EXISTS users ( | |
| 114 | + id INTEGER PRIMARY KEY AUTOINCREMENT, | |
| 115 | + ka_sub TEXT UNIQUE, -- « ka:{sub} » identifiant stable du hub KA | |
| 116 | + ka_id TEXT, -- identifiant membre « ka-0123456789 » (hub) | |
| 117 | + email TEXT, | |
| 118 | + name TEXT, | |
| 119 | + picture TEXT, -- URL de l'avatar (hub / Google) | |
| 120 | + created_at REAL, | |
| 121 | + last_login REAL | |
| 122 | +); | |
| 123 | +CREATE UNIQUE INDEX IF NOT EXISTS users_ka_id ON users(ka_id); | |
| 124 | + | |
| 113 | 125 | CREATE TABLE IF NOT EXISTS geocode_cache ( |
| 114 | 126 | address TEXT PRIMARY KEY, -- adresse/ville normalisée (clé de cache) |
| 115 | 127 | lat REAL, |
added
jobka/kapdf.py
+560 −0
@@ -0,0 +1,560 @@ | ||
| 1 | +# Auteur : Simon-Pierre Boucher — contact@spboucher.ai | |
| 2 | +# jobka/kapdf.py (copie de ka-ui/stats/kapdf.py) — moteur PDF commun Groupe KA (fpdf2). | |
| 3 | +# Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit | |
| 4 | +# le rapport estampillé Groupe-KA : couverture, sommaire, KPI, graphiques | |
| 5 | +# VECTORIELS (courbes/barres/anneaux), tableaux paginés, records, page de fin. | |
| 6 | +# Usage : | |
| 7 | +# from kapdf import GroupeKAReport | |
| 8 | +# pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00", | |
| 9 | +# "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json, | |
| 10 | +# mode="complet").build() | |
| 11 | +# Dépendance : pip install fpdf2 (aucune autre) | |
| 12 | +from __future__ import annotations | |
| 13 | + | |
| 14 | +import math | |
| 15 | +from datetime import datetime | |
| 16 | +from zoneinfo import ZoneInfo | |
| 17 | + | |
| 18 | +from fpdf import FPDF | |
| 19 | + | |
| 20 | +INK = (20, 24, 20) | |
| 21 | +INK2 = (77, 85, 81) | |
| 22 | +INK3 = (139, 146, 140) | |
| 23 | +PAPER = (245, 243, 238) | |
| 24 | +SURFACE2 = (250, 249, 245) | |
| 25 | +GREEN = (28, 92, 65) | |
| 26 | +DANGER = (179, 66, 58) | |
| 27 | +WHITE = (255, 255, 255) | |
| 28 | + | |
| 29 | +EMAILS = [ | |
| 30 | + ("contact@groupe-ka.com", "Projets, partenariats & données"), | |
| 31 | + ("info@groupe-ka.com", "Médias & questions générales"), | |
| 32 | + ("admin@groupe-ka.com", "Légal, vie privée & Loi 25"), | |
| 33 | +] | |
| 34 | +DISCLAIMER = ( | |
| 35 | + "Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons " | |
| 36 | + "rien et ne sommes partie à aucune transaction. Données lues à la source, " | |
| 37 | + "rien d'inventé, tout est traçable." | |
| 38 | +) | |
| 39 | + | |
| 40 | + | |
| 41 | +def _hex(c: str) -> tuple[int, int, int]: | |
| 42 | + c = c.lstrip("#") | |
| 43 | + return tuple(int(c[i : i + 2], 16) for i in (0, 2, 4)) # type: ignore | |
| 44 | + | |
| 45 | + | |
| 46 | +def _fr(n) -> str: | |
| 47 | + if isinstance(n, float) and not n.is_integer(): | |
| 48 | + return f"{n:,.2f}".replace(",", " ").replace(".", ",") | |
| 49 | + return f"{int(n):,}".replace(",", " ") | |
| 50 | + | |
| 51 | + | |
| 52 | +_SUBST = { | |
| 53 | + "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-", | |
| 54 | + "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"', | |
| 55 | + "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ", | |
| 56 | +} | |
| 57 | + | |
| 58 | + | |
| 59 | +def _latin1(s: str) -> str: | |
| 60 | + for k, v in _SUBST.items(): | |
| 61 | + s = s.replace(k, v) | |
| 62 | + return s.encode("latin-1", "replace").decode("latin-1") | |
| 63 | + | |
| 64 | + | |
| 65 | +class _PDF(FPDF): | |
| 66 | + """FPDF avec en-tête/pied Groupe-KA sur chaque page (sauf couverture). | |
| 67 | + Les polices core sont latin-1 : normalize_text sanitise en amont.""" | |
| 68 | + | |
| 69 | + def normalize_text(self, text): | |
| 70 | + return super().normalize_text(_latin1(text)) | |
| 71 | + | |
| 72 | + def __init__(self, brand: str, accent: tuple, period_label: str): | |
| 73 | + super().__init__(orientation="P", unit="mm", format="A4") | |
| 74 | + self.brand = brand | |
| 75 | + self.accent = accent | |
| 76 | + self.period_label = period_label | |
| 77 | + self.cover_mode = False | |
| 78 | + self.set_margins(18, 20, 18) | |
| 79 | + self.set_auto_page_break(True, margin=22) | |
| 80 | + | |
| 81 | + def header(self): | |
| 82 | + if self.cover_mode or self.page_no() == 1: | |
| 83 | + return | |
| 84 | + self.set_font("helvetica", "B", 8.5) | |
| 85 | + self.set_text_color(*INK) | |
| 86 | + self.set_xy(18, 9) | |
| 87 | + self.cell(0, 5, f"Groupe KA · {self.brand}") | |
| 88 | + self.set_font("helvetica", "", 8) | |
| 89 | + self.set_text_color(*INK3) | |
| 90 | + self.set_xy(18, 9) | |
| 91 | + self.cell(0, 5, "Rapport statistique", align="R") | |
| 92 | + self.set_draw_color(*INK) | |
| 93 | + self.set_line_width(0.5) | |
| 94 | + self.line(18, 15.5, 192, 15.5) | |
| 95 | + self.set_y(20) | |
| 96 | + | |
| 97 | + def footer(self): | |
| 98 | + # page 1 = couverture (le flag cover_mode est déjà retombé quand | |
| 99 | + # add_page() clôt la page 1 → tester aussi le numéro de page) | |
| 100 | + if self.cover_mode or self.page_no() == 1: | |
| 101 | + return | |
| 102 | + self.set_y(-15) | |
| 103 | + self.set_draw_color(*INK3) | |
| 104 | + self.set_line_width(0.2) | |
| 105 | + self.line(18, self.get_y() - 1.5, 192, self.get_y() - 1.5) | |
| 106 | + self.set_font("helvetica", "", 7.5) | |
| 107 | + self.set_text_color(*INK3) | |
| 108 | + year = datetime.now(ZoneInfo("America/Toronto")).year | |
| 109 | + self.cell(130, 5, f"© Groupe-KA — {year} — groupe-ka.com · {self.period_label}") | |
| 110 | + self.cell(0, 5, f"p. {self.page_no()}/{{nb}}", align="R") | |
| 111 | + | |
| 112 | + | |
| 113 | +class GroupeKAReport: | |
| 114 | + def __init__(self, site: dict, dashboard: dict, mode: str = "complet"): | |
| 115 | + self.site = site | |
| 116 | + self.d = dashboard | |
| 117 | + self.mode = mode | |
| 118 | + self.accent = _hex(site.get("accent", "#d9f26b")) | |
| 119 | + period = dashboard.get("period", {}) or {} | |
| 120 | + self.period_label = period.get("label") or "toute la période" | |
| 121 | + self.pdf = _PDF(site.get("wordmark", ""), self.accent, self.period_label) | |
| 122 | + self.toc: list[tuple[str, int]] = [] | |
| 123 | + | |
| 124 | + # ---------- primitives ---------- | |
| 125 | + def _card(self, x, y, w, h, fill=WHITE): | |
| 126 | + p = self.pdf | |
| 127 | + p.set_draw_color(*INK) | |
| 128 | + p.set_line_width(0.45) | |
| 129 | + p.set_fill_color(*fill) | |
| 130 | + p.rect(x, y, w, h, style="DF", round_corners=True, corner_radius=2.2) | |
| 131 | + | |
| 132 | + def _kicker(self, text): | |
| 133 | + p = self.pdf | |
| 134 | + p.set_font("helvetica", "B", 8) | |
| 135 | + p.set_text_color(*GREEN) | |
| 136 | + p.set_draw_color(*GREEN) | |
| 137 | + p.set_line_width(0.6) | |
| 138 | + y = p.get_y() + 2 | |
| 139 | + p.line(p.l_margin, y, p.l_margin + 7, y) | |
| 140 | + p.set_xy(p.l_margin + 9, y - 2.5) | |
| 141 | + p.cell(0, 5, text.upper()) | |
| 142 | + p.ln(8) | |
| 143 | + | |
| 144 | + def _section_title(self, title): | |
| 145 | + if self.pdf.get_y() > 240: | |
| 146 | + self.pdf.add_page() | |
| 147 | + self._kicker("Groupe KA · " + self.site.get("wordmark", "")) | |
| 148 | + self.pdf.set_font("helvetica", "B", 15) | |
| 149 | + self.pdf.set_text_color(*INK) | |
| 150 | + self.pdf.set_x(self.pdf.l_margin) | |
| 151 | + self.pdf.cell(0, 8, title) | |
| 152 | + self.toc.append((title, self.pdf.page_no())) | |
| 153 | + self.pdf.ln(11) | |
| 154 | + | |
| 155 | + # ---------- pages ---------- | |
| 156 | + def _cover(self): | |
| 157 | + p = self.pdf | |
| 158 | + p.cover_mode = True | |
| 159 | + p.set_auto_page_break(False) | |
| 160 | + p.add_page() | |
| 161 | + p.set_fill_color(*PAPER) | |
| 162 | + p.rect(0, 0, 210, 297, style="F") | |
| 163 | + p.set_draw_color(*INK) | |
| 164 | + p.set_line_width(1.0) | |
| 165 | + p.rect(10, 10, 190, 277) | |
| 166 | + # kicker | |
| 167 | + p.set_font("helvetica", "B", 10) | |
| 168 | + p.set_text_color(*GREEN) | |
| 169 | + p.set_xy(24, 34) | |
| 170 | + p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE") | |
| 171 | + # wordmark : partie gauche + boîte encre/accent | |
| 172 | + wm = self.site.get("wordmark", "") | |
| 173 | + left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None) | |
| 174 | + p.set_xy(24, 70) | |
| 175 | + p.set_font("helvetica", "B", 40) | |
| 176 | + p.set_text_color(*INK) | |
| 177 | + p.cell(p.get_string_width(left) + 2, 20, left) | |
| 178 | + if boxed: | |
| 179 | + bw = p.get_string_width(boxed) + 12 | |
| 180 | + x = p.get_x() + 2 | |
| 181 | + p.set_fill_color(*INK) | |
| 182 | + p.rect(x, 68, bw, 22, style="F", round_corners=True, corner_radius=3) | |
| 183 | + p.set_text_color(*self.accent) | |
| 184 | + p.set_xy(x + 6, 70) | |
| 185 | + p.cell(bw - 12, 18, boxed) | |
| 186 | + p.set_xy(24, 100) | |
| 187 | + p.set_font("helvetica", "", 13) | |
| 188 | + p.set_text_color(*INK2) | |
| 189 | + p.multi_cell(150, 7, f"Rapport statistique — {wm}") | |
| 190 | + now = datetime.now(ZoneInfo("America/Toronto")) | |
| 191 | + per = self.d.get("period", {}) or {} | |
| 192 | + p.set_xy(24, 125) | |
| 193 | + p.set_font("helvetica", "", 10.5) | |
| 194 | + rows = [ | |
| 195 | + ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")), | |
| 196 | + ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"), | |
| 197 | + ("Plateforme", "https://" + self.site.get("domain", "")), | |
| 198 | + ("Mode", "Rapport complet" if self.mode == "complet" else "Synthèse"), | |
| 199 | + ] | |
| 200 | + y = 128 | |
| 201 | + for k, v in rows: | |
| 202 | + p.set_xy(24, y) | |
| 203 | + p.set_text_color(*INK3) | |
| 204 | + p.cell(40, 6, k) | |
| 205 | + p.set_text_color(*INK) | |
| 206 | + p.set_font("helvetica", "B", 10.5) | |
| 207 | + p.cell(0, 6, str(v)) | |
| 208 | + p.set_font("helvetica", "", 10.5) | |
| 209 | + y += 8 | |
| 210 | + # bande encre au pied | |
| 211 | + p.set_fill_color(*INK) | |
| 212 | + p.rect(10, 262, 190, 25, style="F") | |
| 213 | + p.set_xy(24, 270) | |
| 214 | + p.set_font("helvetica", "B", 12) | |
| 215 | + p.set_text_color(*WHITE) | |
| 216 | + p.cell(60, 8, "par Groupe ") | |
| 217 | + p.set_text_color(*self.accent) | |
| 218 | + p.set_xy(24 + p.get_string_width("par Groupe ") + 1, 270) | |
| 219 | + p.cell(20, 8, "KA") | |
| 220 | + p.set_font("helvetica", "B", 10) | |
| 221 | + p.set_xy(24, 270) | |
| 222 | + p.set_text_color(*self.accent) | |
| 223 | + p.cell(162, 8, "groupe-ka.com", align="R") | |
| 224 | + p.set_auto_page_break(True, margin=22) | |
| 225 | + p.cover_mode = False | |
| 226 | + | |
| 227 | + def _kpis(self): | |
| 228 | + kpis = self.d.get("kpis") or [] | |
| 229 | + if not kpis: | |
| 230 | + return | |
| 231 | + self._section_title("Synthèse des indicateurs") | |
| 232 | + p = self.pdf | |
| 233 | + cols, gw, gh, gap = 3, 56, 26, 3 | |
| 234 | + x0, y = p.l_margin, p.get_y() | |
| 235 | + for i, k in enumerate(kpis[:9]): | |
| 236 | + x = x0 + (i % cols) * (gw + gap) | |
| 237 | + if i and i % cols == 0: | |
| 238 | + y += gh + gap | |
| 239 | + if y > 250: | |
| 240 | + p.add_page(); y = p.get_y() | |
| 241 | + self._card(x, y, gw, gh) | |
| 242 | + p.set_xy(x + 4, y + 4) | |
| 243 | + p.set_font("helvetica", "B", 14) | |
| 244 | + p.set_text_color(*INK) | |
| 245 | + val = k.get("value") | |
| 246 | + p.cell(gw - 8, 7, (_fr(val) if isinstance(val, (int, float)) else str(val)) + (" " + k["unit"] if k.get("unit") else "")) | |
| 247 | + p.set_xy(x + 4, y + 12) | |
| 248 | + p.set_font("helvetica", "", 7.6) | |
| 249 | + p.set_text_color(*INK2) | |
| 250 | + p.multi_cell(gw - 8, 3.6, str(k.get("label", ""))[:70]) | |
| 251 | + if k.get("delta_pct") is not None: | |
| 252 | + up = (k.get("direction") or ("up" if k["delta_pct"] >= 0 else "down")) == "up" | |
| 253 | + p.set_xy(x + 4, y + gh - 6.5) | |
| 254 | + p.set_font("helvetica", "B", 8) | |
| 255 | + p.set_text_color(*(GREEN if up else DANGER)) | |
| 256 | + arrow = "+" if k["delta_pct"] >= 0 else "" | |
| 257 | + p.cell(gw - 8, 4, f"{'▲' if up else '▼'} {arrow}{str(k['delta_pct']).replace('.', ',')} % vs période préc.") | |
| 258 | + p.set_y(y + gh + 8) | |
| 259 | + | |
| 260 | + def _line_chart(self, s): | |
| 261 | + p = self.pdf | |
| 262 | + pts = s.get("points") or [] | |
| 263 | + if len(pts) < 2: | |
| 264 | + return | |
| 265 | + if p.get_y() > 200: | |
| 266 | + p.add_page() | |
| 267 | + p.set_font("helvetica", "B", 10) | |
| 268 | + p.set_text_color(*INK) | |
| 269 | + p.cell(0, 6, s.get("title", "")) | |
| 270 | + p.ln(7) | |
| 271 | + x0, y0, w, h = p.l_margin, p.get_y(), 174, 52 | |
| 272 | + self._card(x0, y0, w, h, fill=WHITE) | |
| 273 | + cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16 | |
| 274 | + vals = [pt["v"] for pt in pts] + [c["v"] for c in (s.get("compare") or [])] | |
| 275 | + vmax = max(vals) or 1 | |
| 276 | + vmin = min(0, min(vals)) | |
| 277 | + rng = (vmax - vmin) or 1 | |
| 278 | + # grille + graduations | |
| 279 | + p.set_font("helvetica", "", 6.3) | |
| 280 | + p.set_text_color(*INK3) | |
| 281 | + p.set_draw_color(200, 200, 195) | |
| 282 | + p.set_line_width(0.15) | |
| 283 | + for g in range(5): | |
| 284 | + gy = cy + ch - ch * g / 4 | |
| 285 | + p.line(cx, gy, cx + cw, gy) | |
| 286 | + p.set_xy(x0 + 1, gy - 1.6) | |
| 287 | + p.cell(10, 3, _fr(vmin + rng * g / 4), align="R") | |
| 288 | + | |
| 289 | + def draw(series, color, width, dash=None): | |
| 290 | + n = len(series) | |
| 291 | + p.set_draw_color(*color) | |
| 292 | + p.set_line_width(width) | |
| 293 | + if dash: | |
| 294 | + p.set_dash_pattern(dash=1.2, gap=1.2) | |
| 295 | + last = None | |
| 296 | + for i, pt in enumerate(series): | |
| 297 | + px = cx + cw * (i / (n - 1)) | |
| 298 | + py = cy + ch - ch * ((pt["v"] - vmin) / rng) | |
| 299 | + if last: | |
| 300 | + p.line(last[0], last[1], px, py) | |
| 301 | + last = (px, py) | |
| 302 | + p.set_dash_pattern() | |
| 303 | + | |
| 304 | + if s.get("compare"): | |
| 305 | + draw(s["compare"], INK3, 0.35, dash=True) | |
| 306 | + draw(pts, self.accent, 0.7) | |
| 307 | + # libellés d'axe X (premier / milieu / dernier) | |
| 308 | + p.set_text_color(*INK3) | |
| 309 | + for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)): | |
| 310 | + p.set_xy(cx + cw * frac - 9, cy + ch + 1.5) | |
| 311 | + p.cell(18, 3, str(pts[idx].get("t", ""))[:10], align="C") | |
| 312 | + p.set_y(y0 + h + 4) | |
| 313 | + if s.get("compare"): | |
| 314 | + p.set_font("helvetica", "", 6.8) | |
| 315 | + p.set_text_color(*INK3) | |
| 316 | + p.cell(0, 4, "— période courante (accent) · ---- période comparée") | |
| 317 | + p.ln(6) | |
| 318 | + else: | |
| 319 | + p.ln(2) | |
| 320 | + | |
| 321 | + def _bars(self, title, items, unit=""): | |
| 322 | + p = self.pdf | |
| 323 | + items = [it for it in (items or []) if isinstance(it.get("value"), (int, float))][:12] | |
| 324 | + if not items: | |
| 325 | + return | |
| 326 | + need = 10 + len(items) * 7 | |
| 327 | + if p.get_y() + need > 265: | |
| 328 | + p.add_page() | |
| 329 | + p.set_font("helvetica", "B", 10) | |
| 330 | + p.set_text_color(*INK) | |
| 331 | + p.cell(0, 6, title) | |
| 332 | + p.ln(8) | |
| 333 | + vmax = max(it["value"] for it in items) or 1 | |
| 334 | + for it in items: | |
| 335 | + y = p.get_y() | |
| 336 | + p.set_font("helvetica", "", 7.6) | |
| 337 | + p.set_text_color(*INK) | |
| 338 | + p.set_x(p.l_margin) | |
| 339 | + p.cell(46, 5, str(it["label"])[:34]) | |
| 340 | + bw = 96 * (it["value"] / vmax) | |
| 341 | + p.set_fill_color(*self.accent) | |
| 342 | + p.set_draw_color(*INK) | |
| 343 | + p.set_line_width(0.25) | |
| 344 | + p.rect(p.l_margin + 48, y + 0.7, max(bw, 0.8), 3.6, style="DF") | |
| 345 | + p.set_xy(p.l_margin + 148, y) | |
| 346 | + p.set_font("helvetica", "B", 7.6) | |
| 347 | + p.cell(26, 5, _fr(it["value"]) + (" " + unit if unit else ""), align="R") | |
| 348 | + p.ln(6.4) | |
| 349 | + p.ln(3) | |
| 350 | + | |
| 351 | + def _donut(self, b): | |
| 352 | + # anneau vectoriel simple (arcs) + légende | |
| 353 | + p = self.pdf | |
| 354 | + items = [it for it in (b.get("items") or []) if it.get("value")][:8] | |
| 355 | + total = sum(it["value"] for it in items) | |
| 356 | + if not items or not total: | |
| 357 | + return | |
| 358 | + if p.get_y() > 210: | |
| 359 | + p.add_page() | |
| 360 | + p.set_font("helvetica", "B", 10) | |
| 361 | + p.set_text_color(*INK) | |
| 362 | + p.cell(0, 6, b.get("title", "")) | |
| 363 | + p.ln(8) | |
| 364 | + cx, cy, r = p.l_margin + 26, p.get_y() + 24, 20 | |
| 365 | + shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10] | |
| 366 | + start = -90.0 | |
| 367 | + for i, it in enumerate(items): | |
| 368 | + frac = it["value"] / total | |
| 369 | + f = shades[i % len(shades)] | |
| 370 | + col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3)) | |
| 371 | + steps = max(2, int(72 * frac)) | |
| 372 | + p.set_fill_color(*col) | |
| 373 | + p.set_draw_color(*col) | |
| 374 | + for st in range(steps): | |
| 375 | + a0 = math.radians(start + 360 * frac * st / steps) | |
| 376 | + a1 = math.radians(start + 360 * frac * (st + 1) / steps) | |
| 377 | + p.polygon( | |
| 378 | + [(cx, cy), | |
| 379 | + (cx + r * math.cos(a0), cy + r * math.sin(a0)), | |
| 380 | + (cx + r * math.cos(a1), cy + r * math.sin(a1))], | |
| 381 | + style="DF", | |
| 382 | + ) | |
| 383 | + start += 360 * frac | |
| 384 | + p.set_fill_color(*WHITE) | |
| 385 | + p.set_draw_color(*INK) | |
| 386 | + p.set_line_width(0.4) | |
| 387 | + p.ellipse(cx - 11, cy - 11, 22, 22, style="DF") | |
| 388 | + p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D") | |
| 389 | + # légende | |
| 390 | + ly = cy - 22 | |
| 391 | + for i, it in enumerate(items): | |
| 392 | + f = shades[i % len(shades)] | |
| 393 | + col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3)) | |
| 394 | + p.set_fill_color(*col) | |
| 395 | + p.set_draw_color(*INK) | |
| 396 | + p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF") | |
| 397 | + p.set_xy(p.l_margin + 66, ly) | |
| 398 | + p.set_font("helvetica", "", 7.6) | |
| 399 | + p.set_text_color(*INK) | |
| 400 | + pct = 100 * it["value"] / total | |
| 401 | + p.cell(0, 5.6, f"{str(it['label'])[:40]} — {_fr(it['value'])} ({pct:.1f} %)".replace(".", ",")) | |
| 402 | + ly += 5.6 | |
| 403 | + p.set_y(max(cy + r, ly) + 6) | |
| 404 | + | |
| 405 | + def _table(self, t): | |
| 406 | + p = self.pdf | |
| 407 | + cols = t.get("columns") or [] | |
| 408 | + rows = t.get("rows") or [] | |
| 409 | + if not cols or not rows: | |
| 410 | + return | |
| 411 | + self._section_title(t.get("title", "Tableau")) | |
| 412 | + w = 174 / len(cols) | |
| 413 | + def head(): | |
| 414 | + p.set_font("helvetica", "B", 7.6) | |
| 415 | + p.set_fill_color(*INK) | |
| 416 | + p.set_text_color(*WHITE) | |
| 417 | + for c in cols: | |
| 418 | + p.cell(w, 6, " " + str(c)[:30], fill=True) | |
| 419 | + p.ln(6) | |
| 420 | + head() | |
| 421 | + p.set_text_color(*INK) | |
| 422 | + for i, row in enumerate(rows[:200]): | |
| 423 | + if p.get_y() > 262: | |
| 424 | + p.add_page() | |
| 425 | + head() | |
| 426 | + p.set_text_color(*INK) | |
| 427 | + p.set_font("helvetica", "", 7.4) | |
| 428 | + p.set_fill_color(*(SURFACE2 if i % 2 else WHITE)) | |
| 429 | + for cell in row: | |
| 430 | + txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell) | |
| 431 | + p.cell(w, 5.4, " " + txt[:34], fill=True) | |
| 432 | + p.ln(5.4) | |
| 433 | + if len(rows) > 200: | |
| 434 | + p.set_font("helvetica", "", 7) | |
| 435 | + p.set_text_color(*INK3) | |
| 436 | + p.cell(0, 5, f"… {len(rows) - 200} lignes supplémentaires non imprimées") | |
| 437 | + p.ln(6) | |
| 438 | + | |
| 439 | + def _records(self): | |
| 440 | + recs = self.d.get("records") or [] | |
| 441 | + if not recs: | |
| 442 | + return | |
| 443 | + self._section_title("Records & faits marquants") | |
| 444 | + p = self.pdf | |
| 445 | + for r in recs[:10]: | |
| 446 | + if p.get_y() > 258: | |
| 447 | + p.add_page() | |
| 448 | + y = p.get_y() | |
| 449 | + self._card(p.l_margin, y, 174, 11, fill=SURFACE2) | |
| 450 | + p.set_xy(p.l_margin + 4, y + 2) | |
| 451 | + p.set_font("helvetica", "", 8.6) | |
| 452 | + p.set_text_color(*INK2) | |
| 453 | + p.cell(96, 7, str(r.get("label", ""))[:70]) | |
| 454 | + p.set_font("helvetica", "B", 9) | |
| 455 | + p.set_text_color(*INK) | |
| 456 | + p.cell(52, 7, str(r.get("value", ""))[:36], align="R") | |
| 457 | + p.set_font("helvetica", "", 7.6) | |
| 458 | + p.set_text_color(*INK3) | |
| 459 | + p.cell(20, 7, str(r.get("date", "") or ""), align="R") | |
| 460 | + p.set_y(y + 13.5) | |
| 461 | + p.ln(4) | |
| 462 | + | |
| 463 | + def _final_page(self): | |
| 464 | + p = self.pdf | |
| 465 | + p.add_page() | |
| 466 | + self._kicker("Groupe KA · contact") | |
| 467 | + p.set_font("helvetica", "B", 15) | |
| 468 | + p.set_text_color(*INK) | |
| 469 | + p.cell(0, 8, "Coordonnées du Groupe KA") | |
| 470 | + p.ln(12) | |
| 471 | + for email, role in EMAILS: | |
| 472 | + p.set_font("helvetica", "B", 10.5) | |
| 473 | + p.set_text_color(*INK) | |
| 474 | + p.cell(0, 6, email) | |
| 475 | + p.ln(5.5) | |
| 476 | + p.set_font("helvetica", "", 8.6) | |
| 477 | + p.set_text_color(*INK3) | |
| 478 | + p.cell(0, 5, role) | |
| 479 | + p.ln(8) | |
| 480 | + p.ln(2) | |
| 481 | + p.set_font("helvetica", "B", 10) | |
| 482 | + p.set_text_color(*GREEN) | |
| 483 | + p.cell(0, 6, "groupe-ka.com — le portail de l'écosystème ·Ka") | |
| 484 | + p.ln(10) | |
| 485 | + p.set_draw_color(*self.accent) | |
| 486 | + p.set_line_width(0.8) | |
| 487 | + p.line(p.l_margin, p.get_y(), p.l_margin + 30, p.get_y()) | |
| 488 | + p.ln(4) | |
| 489 | + p.set_font("helvetica", "", 8.6) | |
| 490 | + p.set_text_color(*INK2) | |
| 491 | + p.multi_cell(160, 4.6, DISCLAIMER) | |
| 492 | + p.ln(4) | |
| 493 | + p.set_font("helvetica", "", 7.6) | |
| 494 | + p.set_text_color(*INK3) | |
| 495 | + p.multi_cell( | |
| 496 | + 160, 4.2, | |
| 497 | + "Mentions : rapport généré automatiquement à partir des données réelles de la " | |
| 498 | + "plateforme au moment indiqué en couverture. Conditions d'utilisation, politique " | |
| 499 | + "de confidentialité et protection des renseignements personnels (Loi 25) : " | |
| 500 | + "groupe-ka.com/conditions · /confidentialite · /loi-25.", | |
| 501 | + ) | |
| 502 | + | |
| 503 | + def _toc_page(self): | |
| 504 | + # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en | |
| 505 | + # page 2 en réservant la page lors du build (voir build()). | |
| 506 | + pass | |
| 507 | + | |
| 508 | + def build(self) -> bytes: | |
| 509 | + p = self.pdf | |
| 510 | + p.alias_nb_pages() | |
| 511 | + self._cover() | |
| 512 | + if self.mode == "synthese": | |
| 513 | + p.add_page() | |
| 514 | + self._kpis() | |
| 515 | + self._records() | |
| 516 | + self._final_page() | |
| 517 | + else: | |
| 518 | + p.add_page() | |
| 519 | + toc_page_no = p.page_no() | |
| 520 | + p.add_page() | |
| 521 | + self._kpis() | |
| 522 | + for s in self.d.get("series") or []: | |
| 523 | + if s.get("kind") == "bar": | |
| 524 | + self._bars(s.get("title", ""), [{"label": pt.get("t"), "value": pt.get("v")} for pt in (s.get("points") or [])], s.get("unit", "")) | |
| 525 | + else: | |
| 526 | + self._line_chart(s) | |
| 527 | + for b in self.d.get("breakdowns") or []: | |
| 528 | + if b.get("kind") == "donut": | |
| 529 | + self._donut(b) | |
| 530 | + else: | |
| 531 | + self._bars(b.get("title", ""), b.get("items")) | |
| 532 | + geo = self.d.get("geo") | |
| 533 | + if geo: | |
| 534 | + self._bars(geo.get("title", "Répartition géographique"), geo.get("items")) | |
| 535 | + for t in self.d.get("tables") or []: | |
| 536 | + self._table(t) | |
| 537 | + self._records() | |
| 538 | + self._final_page() | |
| 539 | + # sommaire écrit sur la page réservée (page 2) | |
| 540 | + last_page = p.page | |
| 541 | + p.page = toc_page_no | |
| 542 | + p.set_y(22) | |
| 543 | + p.set_font("helvetica", "B", 15) | |
| 544 | + p.set_text_color(*INK) | |
| 545 | + p.cell(0, 8, "Sommaire") | |
| 546 | + p.ln(12) | |
| 547 | + p.set_font("helvetica", "", 9.5) | |
| 548 | + for title, page_no in self.toc: | |
| 549 | + p.set_text_color(*INK) | |
| 550 | + p.cell(140, 6.5, title[:80]) | |
| 551 | + p.set_text_color(*INK3) | |
| 552 | + p.cell(0, 6.5, str(page_no), align="R") | |
| 553 | + p.ln(6.5) | |
| 554 | + p.page = last_page | |
| 555 | + return bytes(p.output()) | |
| 556 | + | |
| 557 | + | |
| 558 | +def filename(platform_id: str, period: str) -> str: | |
| 559 | + today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d") | |
| 560 | + return f"groupe-ka_{platform_id}_stats_{period}_{today}.pdf" | |
added
jobka/statsdash.py
+428 −0
@@ -0,0 +1,428 @@ | ||
| 1 | +# ============================================================================= | |
| 2 | +# Job·Ka — Groupe KA | |
| 3 | +# Auteur : Simon-Pierre Boucher | |
| 4 | +# Contact : contact@spboucher.ai | |
| 5 | +# Fichier : jobka/statsdash.py | |
| 6 | +# Rôle : Tableau de bord statistique — contrat commun Groupe KA | |
| 7 | +# (voir frontend/src/ka/stats/SPEC.md). Construit le JSON du dashboard à | |
| 8 | +# partir de requêtes SQL agrégées (jobs, sync_log) avec un cache mémoire de | |
| 9 | +# 5 minutes par clé de période. AUCUNE stat inventée : une section sans | |
| 10 | +# donnée réelle est simplement absente du JSON (le front affiche « Pas | |
| 11 | +# encore mesuré »). Les salaires publiés sont bornés [SAL_MIN, SAL_MAX] $/an | |
| 12 | +# pour écarter les aberrations de lecture à la source. | |
| 13 | +# Créé : 2026-08-17 Modifié : 2026-08-17 | |
| 14 | +# ============================================================================= | |
| 15 | +from __future__ import annotations | |
| 16 | + | |
| 17 | +import threading | |
| 18 | +import time | |
| 19 | +from datetime import date, datetime, timedelta | |
| 20 | +from zoneinfo import ZoneInfo | |
| 21 | + | |
| 22 | +from . import db | |
| 23 | + | |
| 24 | +TZ = ZoneInfo("America/Toronto") | |
| 25 | + | |
| 26 | +CACHE_TTL = 300 # secondes | |
| 27 | +_cache: dict[str, tuple[float, dict]] = {} | |
| 28 | +_cache_lock = threading.Lock() | |
| 29 | + | |
| 30 | +# Bornes de plausibilité des salaires annualisés publiés ($ CA / an) : en | |
| 31 | +# dehors, c'est presque toujours une erreur de parsing à la source (taux | |
| 32 | +# horaire annualisé deux fois, montant par quart, etc.), pas un vrai salaire. | |
| 33 | +SAL_MIN, SAL_MAX = 25_000, 400_000 | |
| 34 | + | |
| 35 | +PERIODS = { | |
| 36 | + "auj": ("Aujourd'hui", 0), | |
| 37 | + "7j": ("7 jours", 6), | |
| 38 | + "30j": ("30 jours", 29), | |
| 39 | + "3m": ("3 mois", 89), | |
| 40 | + "6m": ("6 mois", 179), | |
| 41 | + "12m": ("12 mois", 364), | |
| 42 | +} | |
| 43 | + | |
| 44 | +ATS_FR = { | |
| 45 | + "workday": "Workday", "smartrecruiters": "SmartRecruiters", | |
| 46 | + "workable": "Workable", "lever": "Lever", "ashby": "Ashby", | |
| 47 | + "bamboohr": "BambooHR", "breezy": "Breezy", "recruitee": "Recruitee", | |
| 48 | + "greenhouse": "Greenhouse", "custom": "Site employeur", | |
| 49 | + "": "Autre / sur mesure", | |
| 50 | +} | |
| 51 | +MODE_FR = {"presentiel": "Présentiel", "hybride": "Hybride", | |
| 52 | + "teletravail": "Télétravail", None: "Non précisé", "": "Non précisé"} | |
| 53 | + | |
| 54 | +# Fourchettes salariales annualisées (bornes inférieures, $ / an) | |
| 55 | +SAL_BUCKETS = [ | |
| 56 | + (SAL_MIN, 40_000, "25 k$ – 40 k$"), | |
| 57 | + (40_000, 60_000, "40 k$ – 60 k$"), | |
| 58 | + (60_000, 80_000, "60 k$ – 80 k$"), | |
| 59 | + (80_000, 100_000, "80 k$ – 100 k$"), | |
| 60 | + (100_000, 130_000, "100 k$ – 130 k$"), | |
| 61 | + (130_000, SAL_MAX + 1, "130 k$ et plus"), | |
| 62 | +] | |
| 63 | + | |
| 64 | +# Milieu de fourchette annualisé (expression SQL réutilisée partout) | |
| 65 | +_SAL_MID = ("(COALESCE(salary_year_min, salary_year_max)" | |
| 66 | + " + COALESCE(salary_year_max, salary_year_min)) / 2.0") | |
| 67 | + | |
| 68 | + | |
| 69 | +def _sal_where() -> str: | |
| 70 | + """Clause : offre avec salaire annualisé publié ET plausible.""" | |
| 71 | + return (f" AND (salary_year_min IS NOT NULL OR salary_year_max IS NOT NULL)" | |
| 72 | + f" AND {_SAL_MID} BETWEEN {SAL_MIN} AND {SAL_MAX}") | |
| 73 | + | |
| 74 | + | |
| 75 | +# ---------------------------------------------------------------- utilitaires | |
| 76 | +def _day_start_ts(d: date) -> float: | |
| 77 | + return datetime(d.year, d.month, d.day, tzinfo=TZ).timestamp() | |
| 78 | + | |
| 79 | + | |
| 80 | +def _coverage(con) -> tuple[date | None, date | None]: | |
| 81 | + """Première et dernière date OBSERVÉES par Job·Ka (first/last_seen).""" | |
| 82 | + row = con.execute( | |
| 83 | + "SELECT MIN(first_seen) a, MAX(last_seen) b FROM jobs" | |
| 84 | + " WHERE dup_of IS NULL").fetchone() | |
| 85 | + if row["a"] is None: | |
| 86 | + return None, None | |
| 87 | + return (datetime.fromtimestamp(row["a"], TZ).date(), | |
| 88 | + datetime.fromtimestamp(row["b"], TZ).date()) | |
| 89 | + | |
| 90 | + | |
| 91 | +def resolve_period(period: str, from_: str | None, to_: str | None, | |
| 92 | + cov_min: date, today: date) -> tuple[date, date, str]: | |
| 93 | + """Bornes [from, to] (dates locales incluses) + libellé humain.""" | |
| 94 | + if from_ and to_: | |
| 95 | + try: | |
| 96 | + a = date.fromisoformat(from_) | |
| 97 | + b = date.fromisoformat(to_) | |
| 98 | + if a > b: | |
| 99 | + a, b = b, a | |
| 100 | + return max(a, cov_min), min(b, today), f"{a} → {b}" | |
| 101 | + except ValueError: | |
| 102 | + pass | |
| 103 | + if period == "tout": | |
| 104 | + return cov_min, today, "Toute la période" | |
| 105 | + if period == "annee": | |
| 106 | + return max(date(today.year, 1, 1), cov_min), today, "Année en cours" | |
| 107 | + label, back = PERIODS.get(period, PERIODS["30j"]) | |
| 108 | + return max(today - timedelta(days=back), cov_min), today, label | |
| 109 | + | |
| 110 | + | |
| 111 | +def _pct(cur: float, prev: float) -> float | None: | |
| 112 | + if not prev: | |
| 113 | + return None | |
| 114 | + return round(100.0 * (cur - prev) / prev, 1) | |
| 115 | + | |
| 116 | + | |
| 117 | +def _days(a: date, b: date) -> list[date]: | |
| 118 | + return [a + timedelta(days=i) for i in range((b - a).days + 1)] | |
| 119 | + | |
| 120 | + | |
| 121 | +def _fr_int(n: float) -> str: | |
| 122 | + return f"{int(round(n)):,}".replace(",", " ") | |
| 123 | + | |
| 124 | + | |
| 125 | +def _fr_money(n: float) -> str: | |
| 126 | + return _fr_int(n) + " $" | |
| 127 | + | |
| 128 | + | |
| 129 | +# ------------------------------------------------------------------- dashboard | |
| 130 | +def compute(period: str = "30j", from_: str | None = None, | |
| 131 | + to_: str | None = None) -> dict: | |
| 132 | + key = f"{period}|{from_ or ''}|{to_ or ''}" | |
| 133 | + now = time.time() | |
| 134 | + with _cache_lock: | |
| 135 | + hit = _cache.get(key) | |
| 136 | + if hit and hit[0] > now: | |
| 137 | + return hit[1] | |
| 138 | + data = _compute(period, from_, to_) | |
| 139 | + with _cache_lock: | |
| 140 | + _cache[key] = (now + CACHE_TTL, data) | |
| 141 | + return data | |
| 142 | + | |
| 143 | + | |
| 144 | +def _compute(period: str, from_: str | None, to_: str | None) -> dict: | |
| 145 | + con = db.connect() | |
| 146 | + try: | |
| 147 | + return _build(con, period, from_, to_) | |
| 148 | + finally: | |
| 149 | + con.close() | |
| 150 | + | |
| 151 | + | |
| 152 | +def _build(con, period: str, from_: str | None, to_: str | None) -> dict: | |
| 153 | + today = datetime.now(TZ).date() | |
| 154 | + cov_min, _cov_max = _coverage(con) | |
| 155 | + if cov_min is None: # base vide | |
| 156 | + return {"updated": datetime.now(TZ).isoformat(), | |
| 157 | + "period": {"from": None, "to": None, "label": "—"}, | |
| 158 | + "kpis": [], "series": [], "breakdowns": [], "tables": [], | |
| 159 | + "records": []} | |
| 160 | + | |
| 161 | + d_from, d_to, label = resolve_period(period, from_, to_, cov_min, today) | |
| 162 | + ts_from = _day_start_ts(d_from) | |
| 163 | + ts_to = _day_start_ts(d_to + timedelta(days=1)) # borne exclusive | |
| 164 | + iso_from, iso_to = d_from.isoformat(), d_to.isoformat() | |
| 165 | + BASE = " FROM jobs WHERE active=1 AND dup_of IS NULL" | |
| 166 | + | |
| 167 | + # ---- histogrammes journaliers (réutilisés partout) ---------------------- | |
| 168 | + starts = {r["d"]: r["n"] for r in con.execute( | |
| 169 | + "SELECT date(first_seen,'unixepoch','localtime') d, COUNT(*) n" | |
| 170 | + " FROM jobs WHERE dup_of IS NULL GROUP BY d")} | |
| 171 | + ends = {r["d"]: r["n"] for r in con.execute( | |
| 172 | + "SELECT date(last_seen,'unixepoch','localtime') d, COUNT(*) n" | |
| 173 | + " FROM jobs WHERE dup_of IS NULL AND active=0 GROUP BY d")} | |
| 174 | + | |
| 175 | + def actives_at(d: date) -> int: | |
| 176 | + """Reconstruction : cum(first_seen<=d) − cum(retraits<=d−1).""" | |
| 177 | + iso = d.isoformat() | |
| 178 | + prev = (d - timedelta(days=1)).isoformat() | |
| 179 | + s = sum(n for dd, n in starts.items() if dd <= iso) | |
| 180 | + e = sum(n for dd, n in ends.items() if dd <= prev) | |
| 181 | + return s - e | |
| 182 | + | |
| 183 | + # ---- KPI ----------------------------------------------------------------- | |
| 184 | + actives_now = con.execute(f"SELECT COUNT(*) n{BASE}").fetchone()["n"] | |
| 185 | + employers_now = con.execute( | |
| 186 | + f"SELECT COUNT(DISTINCT employer) n{BASE} AND employer<>''" | |
| 187 | + ).fetchone()["n"] | |
| 188 | + new_in = sum(n for d, n in starts.items() if iso_from <= d <= iso_to) | |
| 189 | + removed_in = sum(n for d, n in ends.items() if iso_from <= d <= iso_to) | |
| 190 | + | |
| 191 | + # période précédente de même longueur — deltas SEULEMENT si couverte | |
| 192 | + span = (d_to - d_from).days + 1 | |
| 193 | + p_from, p_to = d_from - timedelta(days=span), d_from - timedelta(days=1) | |
| 194 | + prev_ok = p_from >= cov_min | |
| 195 | + new_prev = removed_prev = None | |
| 196 | + if prev_ok: | |
| 197 | + new_prev = sum(n for d, n in starts.items() | |
| 198 | + if p_from.isoformat() <= d <= p_to.isoformat()) | |
| 199 | + removed_prev = sum(n for d, n in ends.items() | |
| 200 | + if p_from.isoformat() <= d <= p_to.isoformat()) | |
| 201 | + actives_prev = actives_at(p_to) if p_to >= cov_min else None | |
| 202 | + | |
| 203 | + row = con.execute( | |
| 204 | + f"SELECT AVG({_SAL_MID}) avg_s, COUNT(*) n_s{BASE}{_sal_where()}" | |
| 205 | + ).fetchone() | |
| 206 | + avg_sal, n_sal = row["avg_s"], row["n_s"] | |
| 207 | + median_sal = None | |
| 208 | + if n_sal: | |
| 209 | + median_sal = con.execute( | |
| 210 | + f"SELECT {_SAL_MID} m{BASE}{_sal_where()}" | |
| 211 | + f" ORDER BY m LIMIT 1 OFFSET ?", (n_sal // 2,)).fetchone()["m"] | |
| 212 | + | |
| 213 | + remote_n = con.execute( | |
| 214 | + f"SELECT COUNT(*) n{BASE} AND work_mode='teletravail'").fetchone()["n"] | |
| 215 | + pct_remote = round(100.0 * remote_n / actives_now, 1) if actives_now else None | |
| 216 | + | |
| 217 | + kpis = [ | |
| 218 | + {"id": "actives", "label": "Offres actives", "value": actives_now, | |
| 219 | + "delta_pct": _pct(actives_now, actives_prev) if actives_prev else None, | |
| 220 | + "direction": ("up" if actives_now >= actives_prev else "down") | |
| 221 | + if actives_prev else None}, | |
| 222 | + {"id": "nouvelles", "label": "Nouvelles offres (période)", | |
| 223 | + "value": new_in, | |
| 224 | + "delta_pct": _pct(new_in, new_prev) if prev_ok else None, | |
| 225 | + "direction": ("up" if new_in >= (new_prev or 0) else "down") | |
| 226 | + if prev_ok else None}, | |
| 227 | + {"id": "retirees", "label": "Offres retirées ou expirées (période)", | |
| 228 | + "value": removed_in, | |
| 229 | + "delta_pct": _pct(removed_in, removed_prev) if prev_ok else None, | |
| 230 | + "direction": ("down" if removed_in >= (removed_prev or 0) else "up") | |
| 231 | + if prev_ok else None}, | |
| 232 | + {"id": "employeurs", "label": "Employeurs avec offres actives", | |
| 233 | + "value": employers_now}, | |
| 234 | + ] | |
| 235 | + if avg_sal: | |
| 236 | + kpis.append({"id": "salaire_moyen", | |
| 237 | + "label": "Salaire annuel moyen publié", | |
| 238 | + "value": round(avg_sal), "unit": "$"}) | |
| 239 | + if median_sal: | |
| 240 | + kpis.append({"id": "salaire_median", | |
| 241 | + "label": "Salaire annuel médian publié", | |
| 242 | + "value": round(median_sal), "unit": "$"}) | |
| 243 | + if pct_remote is not None: | |
| 244 | + kpis.append({"id": "teletravail", "label": "Offres en télétravail", | |
| 245 | + "value": pct_remote, "unit": "%"}) | |
| 246 | + kpis = [{k: v for k, v in kpi.items() if v is not None} for kpi in kpis] | |
| 247 | + | |
| 248 | + # ---- séries temporelles ---------------------------------------------------- | |
| 249 | + days = _days(d_from, d_to) | |
| 250 | + series = [] | |
| 251 | + if len(days) >= 2: | |
| 252 | + s_act = {"id": "actives_jour", "title": "Offres actives par jour", | |
| 253 | + "unit": "offres", "kind": "line", | |
| 254 | + "points": [{"t": d.isoformat(), "v": actives_at(d)} for d in days]} | |
| 255 | + s_new = {"id": "nouvelles_jour", "title": "Nouvelles offres par jour", | |
| 256 | + "unit": "offres", "kind": "line", | |
| 257 | + "points": [{"t": d.isoformat(), | |
| 258 | + "v": starts.get(d.isoformat(), 0)} for d in days]} | |
| 259 | + if prev_ok: | |
| 260 | + pdays = _days(p_from, p_to) | |
| 261 | + s_act["compare"] = [{"t": d.isoformat(), "v": actives_at(d)} | |
| 262 | + for d in pdays] | |
| 263 | + s_new["compare"] = [{"t": d.isoformat(), | |
| 264 | + "v": starts.get(d.isoformat(), 0)} | |
| 265 | + for d in pdays] | |
| 266 | + series = [s_act, s_new] | |
| 267 | + | |
| 268 | + # dates de publication AFFICHÉES par les employeurs — données réelles qui | |
| 269 | + # précèdent la mise en service de Job·Ka : la fenêtre demandée est prise | |
| 270 | + # SANS la borner à la couverture d'observation (first_seen). | |
| 271 | + rq_from, rq_to, _ = resolve_period(period, from_, to_, date(2000, 1, 1), today) | |
| 272 | + rq_from = max(rq_from, today - timedelta(days=365)) # 12 mois max (lisibilité) | |
| 273 | + posted_rows = con.execute( | |
| 274 | + f"SELECT date_posted d, COUNT(*) n{BASE}" | |
| 275 | + " AND date_posted IS NOT NULL AND date_posted>=? AND date_posted<=?" | |
| 276 | + " GROUP BY date_posted ORDER BY date_posted", | |
| 277 | + (rq_from.isoformat(), rq_to.isoformat())).fetchall() | |
| 278 | + if len(posted_rows) >= 2: | |
| 279 | + by_day = {r["d"]: r["n"] for r in posted_rows} | |
| 280 | + series.append({"id": "publiees_jour", | |
| 281 | + "title": "Offres publiées par jour " | |
| 282 | + "(date affichée par l'employeur)", | |
| 283 | + "unit": "offres", "kind": "line", | |
| 284 | + "points": [{"t": d.isoformat(), | |
| 285 | + "v": by_day.get(d.isoformat(), 0)} | |
| 286 | + for d in _days(rq_from, rq_to)]}) | |
| 287 | + | |
| 288 | + # ---- répartitions ---------------------------------------------------------- | |
| 289 | + breakdowns = [] | |
| 290 | + ats_items = [{"label": ATS_FR.get(r["a"] or "", (r["a"] or "").title()), | |
| 291 | + "value": r["n"]} | |
| 292 | + for r in con.execute( | |
| 293 | + f"SELECT ats a, COUNT(*) n{BASE}" | |
| 294 | + " GROUP BY ats ORDER BY n DESC LIMIT 10")] | |
| 295 | + if ats_items: | |
| 296 | + breakdowns.append({"id": "ats", | |
| 297 | + "title": "Offres actives par plateforme ATS", | |
| 298 | + "kind": "donut", "items": ats_items}) | |
| 299 | + | |
| 300 | + sal_items = [] | |
| 301 | + for lo, hi, blabel in SAL_BUCKETS: | |
| 302 | + n = con.execute( | |
| 303 | + f"SELECT COUNT(*) n{BASE}{_sal_where()}" | |
| 304 | + f" AND {_SAL_MID} >= ? AND {_SAL_MID} < ?", (lo, hi)).fetchone()["n"] | |
| 305 | + if n: | |
| 306 | + sal_items.append({"label": blabel, "value": n}) | |
| 307 | + if sal_items: | |
| 308 | + breakdowns.append({"id": "salaires", | |
| 309 | + "title": "Fourchettes salariales publiées " | |
| 310 | + "($ / an, offres actives)", | |
| 311 | + "kind": "bar", "items": sal_items}) | |
| 312 | + | |
| 313 | + mode_items = [{"label": MODE_FR.get(r["m"], r["m"] or "Non précisé"), | |
| 314 | + "value": r["n"]} | |
| 315 | + for r in con.execute( | |
| 316 | + f"SELECT work_mode m, COUNT(*) n{BASE}" | |
| 317 | + " GROUP BY work_mode ORDER BY n DESC")] | |
| 318 | + if mode_items: | |
| 319 | + breakdowns.append({"id": "modes", | |
| 320 | + "title": "Télétravail, hybride, présentiel", | |
| 321 | + "kind": "donut", "items": mode_items}) | |
| 322 | + | |
| 323 | + # ---- géographie (région administrative peu remplie -> villes) -------------- | |
| 324 | + geo_items = [{"label": r["c"], "value": r["n"]} for r in con.execute( | |
| 325 | + f"SELECT city c, COUNT(*) n{BASE} AND city<>''" | |
| 326 | + " GROUP BY city ORDER BY n DESC LIMIT 14")] | |
| 327 | + geo = ({"title": "Top villes (offres actives)", "items": geo_items} | |
| 328 | + if geo_items else None) | |
| 329 | + | |
| 330 | + # ---- heatmap (nouvelles offres observées par jour) -------------------------- | |
| 331 | + heat_cells = [{"date": d.isoformat(), "value": starts.get(d.isoformat(), 0)} | |
| 332 | + for d in days if starts.get(d.isoformat())] | |
| 333 | + heatmap = ({"title": "Nouvelles offres par jour", "cells": heat_cells} | |
| 334 | + if heat_cells else None) | |
| 335 | + | |
| 336 | + # ---- tableaux ---------------------------------------------------------------- | |
| 337 | + tables = [] | |
| 338 | + top_emp = con.execute( | |
| 339 | + f"""SELECT employer, COUNT(*) n, | |
| 340 | + AVG(CASE WHEN {_SAL_MID} BETWEEN {SAL_MIN} AND {SAL_MAX} | |
| 341 | + AND (salary_year_min IS NOT NULL | |
| 342 | + OR salary_year_max IS NOT NULL) | |
| 343 | + THEN {_SAL_MID} END) avg_s, | |
| 344 | + SUM(CASE WHEN first_seen>=? AND first_seen<? THEN 1 ELSE 0 END) new_n | |
| 345 | + {BASE} AND employer<>'' | |
| 346 | + GROUP BY employer ORDER BY n DESC LIMIT 50""", | |
| 347 | + (ts_from, ts_to)).fetchall() | |
| 348 | + if top_emp: | |
| 349 | + tables.append({ | |
| 350 | + "id": "top_employeurs", "title": "Top employeurs", | |
| 351 | + "columns": ["Employeur", "Offres actives", | |
| 352 | + "Salaire annuel moyen publié", "Nouvelles (période)"], | |
| 353 | + "rows": [[r["employer"], r["n"], | |
| 354 | + _fr_money(r["avg_s"]) if r["avg_s"] else "—", | |
| 355 | + r["new_n"]] for r in top_emp]}) | |
| 356 | + | |
| 357 | + top_cities = con.execute( | |
| 358 | + f"""SELECT city, COUNT(*) n, | |
| 359 | + AVG(CASE WHEN {_SAL_MID} BETWEEN {SAL_MIN} AND {SAL_MAX} | |
| 360 | + AND (salary_year_min IS NOT NULL | |
| 361 | + OR salary_year_max IS NOT NULL) | |
| 362 | + THEN {_SAL_MID} END) avg_s, | |
| 363 | + SUM(CASE WHEN first_seen>=? AND first_seen<? THEN 1 ELSE 0 END) new_n | |
| 364 | + {BASE} AND city<>'' | |
| 365 | + GROUP BY city ORDER BY n DESC LIMIT 50""", | |
| 366 | + (ts_from, ts_to)).fetchall() | |
| 367 | + if top_cities: | |
| 368 | + tables.append({ | |
| 369 | + "id": "top_villes", "title": "Top villes", | |
| 370 | + "columns": ["Ville", "Offres actives", | |
| 371 | + "Salaire annuel moyen publié", "Nouvelles (période)"], | |
| 372 | + "rows": [[r["city"], r["n"], | |
| 373 | + _fr_money(r["avg_s"]) if r["avg_s"] else "—", | |
| 374 | + r["new_n"]] for r in top_cities]}) | |
| 375 | + | |
| 376 | + new_rows = con.execute( | |
| 377 | + f"""SELECT title, employer, city, salary_label, date_posted | |
| 378 | + {BASE} AND first_seen>=? AND first_seen<? | |
| 379 | + ORDER BY date_posted IS NULL, date_posted DESC, first_seen DESC | |
| 380 | + LIMIT 50""", (ts_from, ts_to)).fetchall() | |
| 381 | + if new_rows: | |
| 382 | + tables.append({ | |
| 383 | + "id": "nouvelles_offres", "title": "Nouvelles offres (période)", | |
| 384 | + "columns": ["Titre", "Employeur", "Ville", "Salaire publié", | |
| 385 | + "Publiée le"], | |
| 386 | + "rows": [[r["title"][:70], r["employer"], r["city"] or "—", | |
| 387 | + r["salary_label"] or "—", r["date_posted"] or "—"] | |
| 388 | + for r in new_rows]}) | |
| 389 | + | |
| 390 | + # ---- records & faits marquants ------------------------------------------------- | |
| 391 | + records = [] | |
| 392 | + in_period = {d: n for d, n in starts.items() if iso_from <= d <= iso_to} | |
| 393 | + if in_period: | |
| 394 | + best = max(in_period, key=in_period.get) | |
| 395 | + records.append({"label": "Jour record de nouvelles offres", | |
| 396 | + "value": _fr_int(in_period[best]) + " offres", | |
| 397 | + "date": best}) | |
| 398 | + top_sal = con.execute( | |
| 399 | + f"""SELECT title, employer, salary_year_max s | |
| 400 | + {BASE} AND salary_year_max BETWEEN {SAL_MIN} AND {SAL_MAX} | |
| 401 | + ORDER BY salary_year_max DESC LIMIT 1""").fetchone() | |
| 402 | + if top_sal: | |
| 403 | + records.append({ | |
| 404 | + "label": "Salaire publié le plus élevé (borné, offres actives)", | |
| 405 | + "value": f"{_fr_money(top_sal['s'])} / an — " | |
| 406 | + f"{top_sal['title'][:40]} ({top_sal['employer']})"}) | |
| 407 | + if top_emp: | |
| 408 | + emp = max(top_emp, key=lambda r: r["new_n"]) | |
| 409 | + if emp["new_n"]: | |
| 410 | + records.append({"label": "Employeur le plus actif " | |
| 411 | + "(nouvelles offres, période)", | |
| 412 | + "value": f"{emp['employer']} — " | |
| 413 | + f"{_fr_int(emp['new_n'])} offres"}) | |
| 414 | + | |
| 415 | + out = { | |
| 416 | + "updated": datetime.now(TZ).isoformat(), | |
| 417 | + "period": {"from": iso_from, "to": iso_to, "label": label}, | |
| 418 | + "kpis": kpis, | |
| 419 | + "series": series, | |
| 420 | + "breakdowns": breakdowns, | |
| 421 | + "tables": tables, | |
| 422 | + "records": records, | |
| 423 | + } | |
| 424 | + if geo: | |
| 425 | + out["geo"] = geo | |
| 426 | + if heatmap: | |
| 427 | + out["heatmap"] = heatmap | |
| 428 | + return out | |
modified
jobka/web.py
+42 −3
@@ -16,10 +16,10 @@ from pathlib import Path | ||
| 16 | 16 | from fastapi import BackgroundTasks, FastAPI, HTTPException, Query |
| 17 | 17 | from fastapi.middleware.cors import CORSMiddleware |
| 18 | 18 | from fastapi.middleware.gzip import GZipMiddleware |
| 19 | −from fastapi.responses import FileResponse | |
| 19 | +from fastapi.responses import FileResponse, Response | |
| 20 | 20 | from fastapi.staticfiles import StaticFiles |
| 21 | 21 | |
| 22 | −from . import db, ingest | |
| 22 | +from . import auth, db, ingest | |
| 23 | 23 | |
| 24 | 24 | ROOT = Path(__file__).resolve().parent.parent |
| 25 | 25 | SOURCES_PATH = ROOT / "data" / "sources.json" |
@@ -32,6 +32,9 @@ app.add_middleware(CORSMiddleware, allow_origins=["*"], | ||
| 32 | 32 | allow_methods=["*"], allow_headers=["*"]) |
| 33 | 33 | app.add_middleware(GZipMiddleware, minimum_size=1000) |
| 34 | 34 | |
| 35 | +# connexion KA ID (SSO du hub groupe-ka.com) — voir jobka/auth.py | |
| 36 | +app.include_router(auth.router) | |
| 37 | + | |
| 35 | 38 | _sync_lock = threading.Lock() |
| 36 | 39 | |
| 37 | 40 | |
@@ -295,6 +298,41 @@ def stats(): | ||
| 295 | 298 | "recent_syncs": log} |
| 296 | 299 | |
| 297 | 300 | |
| 301 | +@app.get("/api/stats/dashboard") | |
| 302 | +def stats_dashboard(period: str = "30j", | |
| 303 | + from_: str | None = Query(None, alias="from"), | |
| 304 | + to: str | None = None): | |
| 305 | + """Tableau de bord analytique — contrat commun Groupe KA (SPEC.md). | |
| 306 | + Cache mémoire 5 min par clé de période (voir jobka/statsdash.py).""" | |
| 307 | + from . import statsdash | |
| 308 | + if period not in ("auj", "7j", "30j", "3m", "6m", "12m", "annee", "tout"): | |
| 309 | + period = "30j" | |
| 310 | + return statsdash.compute(period, from_, to) | |
| 311 | + | |
| 312 | + | |
| 313 | +@app.get("/api/stats/report") | |
| 314 | +def stats_report(period: str = "30j", | |
| 315 | + from_: str | None = Query(None, alias="from"), | |
| 316 | + to: str | None = None, | |
| 317 | + mode: str = "complet"): | |
| 318 | + """Rapport PDF estampillé Groupe-KA (complet ou synthèse 2 pages).""" | |
| 319 | + from . import kapdf, statsdash | |
| 320 | + if period not in ("auj", "7j", "30j", "3m", "6m", "12m", "annee", "tout"): | |
| 321 | + period = "30j" | |
| 322 | + dash = statsdash.compute(period, from_, to) | |
| 323 | + data = kapdf.GroupeKAReport( | |
| 324 | + site={"wordmark": "Job·Ka", "accent": "#0c8599", | |
| 325 | + "domain": "www.job-ka.com", | |
| 326 | + "tagline": "Tous les emplois des employeurs québécois"}, | |
| 327 | + dashboard=dash, | |
| 328 | + mode="synthese" if mode == "synthese" else "complet", | |
| 329 | + ).build() | |
| 330 | + fname = kapdf.filename("job-ka", period) | |
| 331 | + return Response( | |
| 332 | + content=data, media_type="application/pdf", | |
| 333 | + headers={"Content-Disposition": f'attachment; filename="{fname}"'}) | |
| 334 | + | |
| 335 | + | |
| 298 | 336 | @app.post("/api/sync") |
| 299 | 337 | def trigger_sync(background: BackgroundTasks, source: str | None = None): |
| 300 | 338 | """Déclenche une synchronisation (équivalent d'un webhook entrant).""" |
@@ -323,7 +361,8 @@ if FRONTEND_DIST.exists(): | ||
| 323 | 361 | |
| 324 | 362 | # routes rendues uniquement côté client — tout autre chemin inconnu renvoie |
| 325 | 363 | # index.html avec un statut 404 (pas de soft-404 pour les moteurs) |
| 326 | − _CLIENT_ROUTES = {"carte", "sources", "stats", "confidentialite", "conditions"} | |
| 364 | + _CLIENT_ROUTES = {"carte", "sources", "stats", "contact", | |
| 365 | + "confidentialite", "conditions"} | |
| 327 | 366 | _CLIENT_PREFIXES = ("emploi/",) |
| 328 | 367 | |
| 329 | 368 | @app.get("/{full_path:path}") |
modified
requirements.txt
+1 −0
@@ -10,3 +10,4 @@ fastapi>=0.110 | ||
| 10 | 10 | uvicorn>=0.29 |
| 11 | 11 | requests>=2.31 |
| 12 | 12 | beautifulsoup4>=4.12 |
| 13 | +fpdf2>=2.7 # rapports PDF Groupe-KA (jobka/kapdf.py) | |
| 13 | 14 | |