# Prompt p10 — Portail Vérification QR (portail public) *Contextes requis : ctx-global.md + ctx-web-nextjs.md + ctx-laravel-bff.md* --- ## Profil & Accès - **Public** : aucune authentification requise - **Accès** : toute personne disposant d'un QR code ou d'une référence de document FlowUp - **Platform** : Next.js standalone — domaine dédié `verif.flowup-febi.com` - **Rate limiting** : 20 requêtes / minute / IP (géré côté BFF) --- ## Fichiers à créer ``` app/page.tsx app/layout.tsx app/[ref]/page.tsx components/verif/QrCameraScanner.tsx components/verif/ReferenceManuelle.tsx components/verif/ResultatAuthentique.tsx components/verif/ResultatFalsifie.tsx components/verif/ResultatExpire.tsx components/verif/ResultatIntrouvable.tsx components/verif/ResultatCard.tsx hooks/useVerification.ts ``` --- ## Spec UX condensée ### Page d'accueil (scan / saisie) ``` ┌─────────────────────────────────────────────┐ │ FLOWUP FEBI ITC SA │ │ Vérification de l'authenticité │ │ des documents │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ [ CAMÉRA QR ] │ │ │ │ Pointez vers le QR du document │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ ─────────── ou ─────────────────────── │ │ │ │ Référence document : │ │ ┌─────────────────────────────────────┐ │ │ │ VNT-2026-0047 │ │ │ └─────────────────────────────────────┘ │ │ [ VÉRIFIER ] │ │ │ │ Ce service est gratuit et public. │ │ © FEBI ITC SA — FlowUp ERP 2026 │ └─────────────────────────────────────────────┘ ``` ### Résultat AUTHENTIQUE (vert) ``` ┌─────────────────────────────────────────────┐ │ ✅ DOCUMENT AUTHENTIQUE │ │ ───────────────────────────────────── │ │ Référence : VNT-2026-0047 │ │ Type : Reçu de vente │ │ Date : 13 mai 2026 à 10h42 │ │ Station : Kaloum, Conakry │ │ Signataire : Gérant Jean-Marie Camara │ │ Emis par : FEBI ITC SA │ │ │ │ Ce document a été émis par le système │ │ FlowUp ERP et n'a pas été modifié. │ │ │ │ [ Vérifier un autre document ] │ └─────────────────────────────────────────────┘ ``` ### Résultat FALSIFIÉ (rouge) ``` ┌─────────────────────────────────────────────┐ │ 🚨 DOCUMENT FALSIFIÉ │ │ ───────────────────────────────────── │ │ Référence : VNT-2026-0047 │ │ ⚠ La signature numérique ne correspond │ │ pas au contenu de ce document. │ │ ⚠ Ce document a été modifié après │ │ son émission. │ │ │ │ SIGNALER CE DOCUMENT │ │ Tel: +224 XXX XXX XXX │ │ Email: securite@febi-itc.com │ │ │ │ [ Vérifier un autre document ] │ └─────────────────────────────────────────────┘ ``` ### Résultat EXPIRÉ (orange) ``` ┌─────────────────────────────────────────────┐ │ ⚠ DOCUMENT EXPIRÉ │ │ ───────────────────────────────────── │ │ Référence : CTR-2026-0012 │ │ Type : Contrat client B2B │ │ Expiré le : 31 décembre 2025 │ │ │ │ Ce document était authentique à sa date │ │ d'émission mais n'est plus en vigueur. │ │ │ │ [ Vérifier un autre document ] │ └─────────────────────────────────────────────┘ ``` ### Résultat INTROUVABLE (gris) ``` ┌─────────────────────────────────────────────┐ │ ℹ DOCUMENT INTROUVABLE │ │ ───────────────────────────────────── │ │ Référence : ZZZ-9999-9999 │ │ │ │ Aucun document ne correspond à cette │ │ référence dans notre système. │ │ │ │ Si vous pensez qu'il s'agit d'une erreur,│ │ contactez : support@febi-itc.com │ │ │ │ [ Vérifier un autre document ] │ └─────────────────────────────────────────────┘ ``` --- ## Endpoints BFF ``` GET /api/verif/{ref} Query : ?sig={signature_hmac} Headers : X-Rate-Limit-Key: {ip} (géré par le reverse proxy) Réponse HTTP 200 : { statut: "AUTHENTIQUE"|"FALSIFIE"|"EXPIRE"|"INTROUVABLE", document: { reference: "VNT-2026-0047", type: "recu_vente"|"contrat"|"bulletin_paie"|"courrier_officiel"|"bon_commande", date_emission: "2026-05-13T10:42:00Z", date_expiration: "2026-12-31T23:59:59Z"|null, station_nom: "Kaloum"|null, signataire_nom: "Jean-Marie Camara"|null, emetteur: "FEBI ITC SA" }|null } HTTP 429 : { error: "Trop de requêtes. Réessayez dans 60 secondes." } HTTP 400 : { error: "Référence invalide." } Note : pour INTROUVABLE, le champ "document" est null. Note : la signature HMAC {sig} est optionnelle (QR codes incluent sig, saisie manuelle n'en a pas). Sans sig, le statut peut être AUTHENTIQUE si le document existe et n'est pas expiré, mais sans vérification d'intégrité (statut "VERIFIE_SANS_SIGNATURE"). ``` --- ## Règles spécifiques - **RGQR-01** : Pas d'authentification, pas de cookies de session, pas de tracking. Ce portail est stateless — chaque requête est indépendante. - **RGQR-02** : Rate limiting 20 req/min/IP côté BFF. Si HTTP 429, afficher un message clair avec countdown avant réessai. - **RGQR-03** : La caméra QR (`expo-camera` ou `react-qr-reader` selon plateforme) se démarre uniquement si l'utilisateur clique sur le bouton "Scanner". Pas d'activation automatique pour respecter la vie privée. - **RGQR-04** : Le résultat de vérification ne doit JAMAIS afficher d'informations sensibles (montants, identités complètes au-delà du nom signataire). Seules les infos du tableau Spec UX sont affichées. - **RGQR-05** : URL shareable — `verif.flowup-febi.com/{ref}?sig={sig}` renvoie directement le résultat sans passer par la page d'accueil. `useVerification` fetch côté client dès que `ref` est dans l'URL. - **RGQR-06** : Le portail est en 3 langues : Français (défaut), Anglais, Poular. `next-intl` pour i18n. - **RGQR-07** : Design épuré, mobile-first — 90% des utilisateurs sont sur mobile. Pas de sidebar, pas de header complexe. Logo FEBI ITC SA centré. - **RGQR-08** : Temps de chargement < 2s — pas de dépendances lourdes. Pas de Leaflet, pas de recharts. Next.js `generateStaticParams` pour les routes fréquentes (pas de SSG pour les références dynamiques — uniquement SSR/CSR). --- ## Tâche Claude Génère le code complet Next.js 15 TypeScript standalone pour le Portail de Vérification QR FlowUp FEBI. **Contraintes techniques absolues :** - Ce portail est INDÉPENDANT de l'ERP principal (domaine séparé, pas de module ERP) - Palette simplifiée : blanc + navy `#1A2157` + couleurs résultat (vert, rouge, orange, gris) - Pas d'authentification — tout est public - Mobile-first (breakpoint unique 375px → 768px) - next-intl pour FR/EN/Poular - `react-qr-reader` pour le scan via caméra web/mobile **Génère dans cet ordre :** 1. Types TypeScript (`types/verif.ts`) 2. Hook `useVerification.ts` (fetch BFF, gestion 429 avec countdown) 3. `QrCameraScanner.tsx` (react-qr-reader, activation manuelle) 4. `ReferenceManuelle.tsx` (input + bouton vérifier) 5. `ResultatAuthentique.tsx`, `ResultatFalsifie.tsx`, `ResultatExpire.tsx`, `ResultatIntrouvable.tsx` 6. `ResultatCard.tsx` (wrapper générique avec couleur + icône) 7. `app/layout.tsx` (minimal, next-intl provider) 8. `app/page.tsx` (scanner + saisie manuelle) 9. `app/[ref]/page.tsx` (SSR → redirect vers résultat avec sig)