/* Admin, mobile, UX features 41-50 */ /* ─── 42. ASIN Scanner (camera) ───────────────────────────────────── */ const AsinScanner = () => { const toast = (typeof useToastX === "function") ? useToastX() : null; const LS_SCANS = "kcc:asin-scans"; const SEED = [ { ts: "il y a 2min", asin: "B0CXYZ1234", from: "Caméra mobile (Carly)", matched: true, product: "Diffuseur ambré 700ml" }, { ts: "il y a 8min", asin: "B0CABC4567", from: "Caméra mobile (Kevin)", matched: true, product: "Lampe USB dimmable" }, { ts: "il y a 14min",asin: "B0NEW00001", from: "Caméra mobile (Carly)", matched: false, product: "Non répertorié · à ajouter" }, ]; const load = () => { try { const s = localStorage.getItem(LS_SCANS); return s ? JSON.parse(s) : SEED; } catch { return SEED; } }; const [scanning, setScanning] = useState(false); const [scanned, _setScanned] = useState(load); const persist = (next) => { _setScanned(next); try { localStorage.setItem(LS_SCANS, JSON.stringify(next)); } catch {} }; const manualScan = async () => { const asin = (prompt("Saisir l'ASIN (ou code-barre) :", "B0") || "").trim().toUpperCase(); if (!asin) return; setScanning(true); // Try Keepa lookup if API client is present let product = "Recherche…"; let matched = false; try { if (typeof window.keepa?.lookup === "function") { const r = await window.keepa.lookup(asin); product = r?.title || "ASIN inconnu"; matched = !!r?.title; } else { const r = await fetch("/api/keepa?asin=" + encodeURIComponent(asin)).then(res => res.ok ? res.json() : null); product = r?.title || r?.product?.title || "ASIN non trouvé"; matched = !!product && product !== "ASIN non trouvé"; } } catch (e) { product = "Échec lookup · ajouter manuellement"; } setScanning(false); const entry = { ts: new Date().toLocaleTimeString("fr-CA"), asin, from: "Saisie manuelle", matched, product }; persist([entry, ...scanned].slice(0, 50)); toast?.push?.({ tone: matched ? "good" : "warn", title: matched ? "ASIN trouvé" : "ASIN inconnu", body: product }); }; const addToCatalog = (entry) => { try { const cat = JSON.parse(localStorage.getItem("kcc:products") || "[]"); cat.unshift({ id: entry.asin, asin: entry.asin, name: entry.product, addedAt: new Date().toISOString() }); localStorage.setItem("kcc:products", JSON.stringify(cat)); persist(scanned.map(s => s.asin === entry.asin ? { ...s, matched: true } : s)); toast?.push?.({ tone: "good", title: "Ajouté au catalogue", body: entry.asin }); } catch (e) { toast?.push?.({ tone: "danger", title: "Erreur ajout" }); } }; return (
Scanner ASIN
Caméra mobile · scan code-barre Amazon depuis l'app PWA · ajout au catalogue en 1 tap
{scanning ? "Recherche d'un code-barre…" : "Pointez la caméra vers le code-barre"}
← Annuler 🔦
Scans récents
Synchronisé entre tous les téléphones de l'équipe
{scanned.map((s, i) => ( ))}
QuandASINSourceProduit
{s.ts} {s.asin} {s.from} {s.product} {s.matched ? déjà en catalogue : }
); }; /* ─── 41, 43. PWA install card + push notifs config ─────────────── */ const MobileSetup = () => { const toast = (typeof useToastX === "function") ? useToastX() : null; const NOTIF_SEED = [ { l: "Alertes critiques", d: "Stock <3j, marge négative, échec 2FA", on: true }, { l: "Messages directs", d: "DM ou mention dans un canal", on: true }, { l: "Daily Digest", d: "Récap quotidien 07:00", on: false }, { l: "JARVIS Autopilot", d: "Quand une suggestion à fort impact apparaît", on: true }, { l: "Rapport hebdo", d: "Lundi matin · résumé de la semaine", on: false }, ]; const [notifs, setNotifs] = useState(() => { try { const s = localStorage.getItem("kcc:notif-prefs"); return s ? JSON.parse(s) : NOTIF_SEED; } catch { return NOTIF_SEED; } }); const toggleNotif = (i) => setNotifs((arr) => { const v = arr.map((n, j) => j === i ? { ...n, on: !n.on } : n); try { localStorage.setItem("kcc:notif-prefs", JSON.stringify(v)); } catch {} return v; }); const installApp = async () => { const evt = window.__kccDeferredPrompt; if (evt && evt.prompt) { evt.prompt(); const { outcome } = await evt.userChoice; toast?.push?.({ tone: outcome === "accepted" ? "good" : "warn", title: outcome === "accepted" ? "App installée" : "Installation annulée" }); window.__kccDeferredPrompt = null; } else { toast?.push?.({ tone: "warn", title: "Installation manuelle", body: "Menu navigateur → « Ajouter à l'écran d'accueil »." }); } }; return (
Mobile & notifications
Installez le portail comme app · activez les notifs push · alertes critiques temps réel
KC
Installer comme application
iOS · Android · macOS · Windows · ChromeOS
{[ "Icône sur l'écran d'accueil · lancement instantané", "Mode offline-first : Dashboard et Messages disponibles sans réseau", "Notifications natives (avec son et badge)", "Stockage local IndexedDB chiffré pour le cache", ].map((t, i) => (
{t}
))}
Notifications push
Configurez ce que vous voulez recevoir en push web ou natif
{notifs.map((n, i) => (
{n.l}
{n.d}
))}
); }; /* ─── 44. Onboarding flow ────────────────────────────────────────── */ const Onboarding = () => { const toast = (typeof useToastX === "function") ? useToastX() : null; const [step, setStep] = useState(2); const steps = [ { id: 1, label: "Bienvenue", desc: "Présentation du portail · 1 min", done: true }, { id: 2, label: "Activer 2FA", desc: "Sécurisez votre compte avec un code email", done: false }, { id: 3, label: "Compléter profil", desc: "Nom, rôle, photo, fuseau", done: false }, { id: 4, label: "Connecter Sheets", desc: "Sync bidirectionnelle Google Sheets · OAuth", done: false }, { id: 5, label: "Choisir thème", desc: "Sombre, clair, accent · personnalisation", done: false }, { id: 6, label: "Tour guidé", desc: "Découvrir Dashboard, JARVIS, Messages", done: false }, ]; return (
Bienvenue chez KCC Holdings
Configurez votre portail en {steps.length - 1} étapes · ~5 minutes
{steps.map((s, i) => (
s.id || s.done ? "var(--green)" : step === s.id ? "var(--accent)" : "var(--bg-3)", color: step > s.id || s.done || step === s.id ? "white" : "var(--text-dim)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, }}> {step > s.id || s.done ? : s.id}
{i < steps.length - 1 &&
s.id ? "var(--green)" : "var(--bg-3)", borderRadius: 999 }}/>}
))}
{steps.map((s) =>
{s.label}
)}
{steps[step - 1].label}
{steps[step - 1].desc}
{step === 2 && (
Saisissez votre numéro pour recevoir un code de vérification :
)}
); }; /* ─── 47. Backups ────────────────────────────────────────────────── */ const Backups = () => { const toast = useToastX(); const LS_BACKUPS = "kcc:backups-log"; const loadLog = () => { try { return JSON.parse(localStorage.getItem(LS_BACKUPS) || "[]"); } catch { return []; } }; const [backups, setBackups] = useState(() => { const log = loadLog(); if (log.length) return log; // Seed default rows on first visit return Array.from({ length: 10 }, (_, i) => ({ date: `${10 - i} mai`, time: "03:00 ET", size: (47 + Math.random() * 4).toFixed(1) + " MB", tables: 18, status: i === 0 ? "auto" : i === 3 ? "manuel" : "auto", r2Key: `kcc-d1-${20260510 - i}.snapshot.sql.gz`, })); }); const persist = (next) => { setBackups(next); try { localStorage.setItem(LS_BACKUPS, JSON.stringify(next)); } catch {} }; const exportNow = () => { // Dump every kcc:* localStorage key into a JSON file const snap = {}; let bytes = 0; for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k && k.startsWith("kcc:")) { snap[k] = localStorage.getItem(k); bytes += (snap[k] || "").length; } } const payload = { ts: new Date().toISOString(), keys: Object.keys(snap).length, snap }; const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `kcc-backup-${Date.now()}.json`; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); const sizeMb = (bytes / 1024 / 1024).toFixed(2) + " MB"; const row = { date: new Date().toLocaleDateString("fr-CA", { day: "numeric", month: "short" }), time: new Date().toLocaleTimeString("fr-CA", { hour: "2-digit", minute: "2-digit" }) + " ET", size: sizeMb, tables: Object.keys(snap).length, status: "manuel", r2Key: `kcc-local-${Date.now()}.json`, }; persist([row, ...backups].slice(0, 30)); fetch("/api/sync", { method: "PUT", body: JSON.stringify({ col: "_backup", items: [payload] }) }).catch(() => null); toast?.push?.({ tone: "good", title: "Backup créé", body: `${Object.keys(snap).length} clés · ${sizeMb}` }); }; const restoreFile = () => { const inp = document.createElement("input"); inp.type = "file"; inp.accept = "application/json"; inp.onchange = (e) => { const f = e.target.files?.[0]; if (!f) return; const r = new FileReader(); r.onload = () => { try { const data = JSON.parse(r.result); if (!data?.snap) throw new Error("Format invalide"); if (!confirm(`Restaurer ${Object.keys(data.snap).length} clés ? Les données actuelles seront écrasées.`)) return; Object.entries(data.snap).forEach(([k, v]) => localStorage.setItem(k, v)); toast?.push?.({ tone: "good", title: "Restauration OK", body: "Recharge la page pour appliquer." }); } catch (err) { toast?.push?.({ tone: "danger", title: "Échec restauration", body: String(err.message || err) }); } }; r.readAsText(f); }; inp.click(); }; const totalBytes = backups.reduce((s, b) => s + (parseFloat(b.size) || 0), 0); return (
Backups
Export complet localStorage (kcc:*) en JSON · restauration en 1 clic
k.startsWith("kcc:")).length)} delta={0}/>
{backups.map((b, i) => ( ))}
DateHeureTailleTablesStatutR2 Key
{b.date} {b.time} {b.size} {b.tables} {b.status} {b.r2Key}
); }; /* ─── 48. Feature flags ──────────────────────────────────────────── */ const FeatureFlags = () => { const LS_FLAGS = "kcc:feature-flags"; const DEFAULT_FLAGS = [ { key: "JARVIS_AGENT_MODE", desc: "Mode agent multi-étapes (beta)", on: true, rollout: 33, env: "prod" }, { key: "MULTI_CURRENCY", desc: "Soldes multi-devises consolidés", on: true, rollout: 100, env: "prod" }, { key: "ASIN_SCANNER", desc: "Scanner code-barre via caméra PWA", on: true, rollout: 100, env: "prod" }, { key: "VOICE_NOTES", desc: "Voice notes dans Messages", on: false, rollout: 0, env: "staging" }, { key: "AUTOPILOT_COPY", desc: "JARVIS suggère des changements de copy", on: false, rollout: 0, env: "dev" }, { key: "QUICKBOOKS_EXPORT", desc: "Export mensuel vers QuickBooks Online", on: false, rollout: 0, env: "staging" }, { key: "DAILY_BRIEFING_AUDIO", desc: "Audio TTS du Daily Digest", on: true, rollout: 50, env: "prod" }, { key: "CANNIBALIZATION_DETECT", desc: "Détection de cannibalisation produits", on: true, rollout: 100, env: "prod" }, ]; const loadFlags = () => { try { const s = localStorage.getItem(LS_FLAGS); return s ? JSON.parse(s) : DEFAULT_FLAGS; } catch { return DEFAULT_FLAGS; } }; const [flags, _setFlags] = useState(loadFlags); const setFlags = (next) => { const v = typeof next === "function" ? next(flags) : next; _setFlags(v); try { localStorage.setItem(LS_FLAGS, JSON.stringify(v)); } catch {} // Expose globally for runtime feature gating window.__kcc_flags = Object.fromEntries(v.map(f => [f.key, f.on])); fetch("/api/sync", { method: "PUT", body: JSON.stringify({ col: "feature-flags", items: v }) }).catch(() => null); }; useEffect(() => { window.__kcc_flags = Object.fromEntries(flags.map(f => [f.key, f.on])); }, []); return (
Feature flags
Activation progressive · rollouts par % · KV-driven · changements live sans déploiement
{flags.map((f, i) => ( ))}
FlagDescriptionEnvironnementRolloutÉtat
{f.key} {f.desc} {f.env}
{f.rollout}%
); }; /* ─── 49. Maintenance mode ───────────────────────────────────────── */ const MaintenanceMode = () => { const [on, setOn] = useState(false); const [readonly, setReadonly] = useState(true); const toast = useToastX(); return (
Mode maintenance
Bannière globale + lecture seule · à utiliser pendant les migrations critiques
Mode maintenance global
Affiche une bannière à tous les utilisateurs · bloque les actions d'écriture si lecture seule cochée
Message de la bannière