DOC
Accueil/ Projets/ KOBIKE Tracking Notifier/ Prompt Orchids AI - Frontend « Gestion clients KOBIKE »

Prompt Orchids AI - Frontend « Gestion clients KOBIKE »

À copier-coller dans Orchids AI pour générer la première version du frontend. Réf. interne : ADR 0003.

PROMPT

Crée une application web (SPA) de gestion des clients et du suivi de commandes pour une marque de vélos électriques (KOBIKE / ENGWE). L'app est utilisée par le personnel d'une boutique/atelier pour retrouver un client, corriger son email, et suivre les emails de notification de livraison envoyés automatiquement.

Contexte métier

Quand un colis est expédié, un système externe (n8n) envoie automatiquement au client un email avec son numéro de suivi. Pour que ça marche, il faut connaître l'email du client. Cette app sert à gérer/corriger ces emails et à surveiller les notifications. Certaines commandes n'ont pas encore d'email : l'app doit les mettre en évidence.

Stack & contraintes techniques

  • React + Vite (SPA), TypeScript.
  • Style épuré et minimal, CSS simple (CSS modules ou CSS classique, éviter les usines à gaz). Interface en français.
  • Responsive (utilisable sur tablette au comptoir).
  • L'app consomme une API REST externe (backend FastAPI, à venir). Centralise l'URL dans une variable VITE_API_URL et un petit client HTTP (fetch/axios) dans src/api/. Tant que l'API n'existe pas, utilise des données mockées dans src/mocks/ et une couche d'API facile à remplacer.
  • Thème clair, accent bleu-canard/teal (ex. #0E7490), fond très clair, coins arrondis, ombres légères.

Modèle de données (à refléter dans l'UI)

  • Client : id, nom, email, telephone, pays, source (tencent | shopify | shifter | manuel).
  • Commande : id, numero_commande (ex. KO260107-1), client_id, plateforme (ex. KOBIKE), date_commande, ville, pays.
  • Ligne de commande / expédition : id, commande_id, sku, produit (ex. « ENGWE M1 Double batterie »), quantite, tracking_number, statut_logistique, entrepot, date_expedition.
  • Notification : id, numero_commande, tracking_number, email_destinataire, statut (envoye | echec), date_envoi.

Écrans à créer

  1. Tableau de bord (accueil)

    • Cartes de stats en haut : « Clients », « Commandes », « Notifications envoyées », « Emails manquants » (en évidence, couleur d'alerte).
    • Liste des dernières notifications envoyées (tableau : date, n° commande, tracking, email, statut).

  2. Clients

    • Barre de recherche (par nom, email ou téléphone) + filtre par source.
    • Tableau paginé des clients (nom, email, téléphone, pays, source).
    • Ligne cliquable → panneau/fiche client :
      • Champs éditables : email, telephone (validation format email + téléphone), bouton Enregistrer.
      • Historique des commandes du client.
      • Historique des notifications reçues.

  3. Commandes

    • Recherche par numero_commande.
    • Tableau : n° commande, client, produit(s), tracking, statut logistique, date.
    • Détail d'une commande avec ses lignes d'expédition et un bouton « Renvoyer l'email de suivi » (par ligne ayant un tracking).

  4. Emails manquants (écran prioritaire)

    • Liste des commandes/expéditions avec un tracking mais sans email client (ce sont les envois bloqués).
    • Pour chaque ligne : n° commande, client, tracking, et un champ email à saisir + bouton Enregistrer & envoyer.

  5. Portail public d'auto-enregistrement (route publique séparée, ex. /suivi-email, sans authentification, design ultra-simple mobile-first)

    • Le client scanne un QR code en boutique et arrive ici.
    • Formulaire : numéro de commande + adresse email → bouton Valider.
    • Message de confirmation : « Merci, vous recevrez le suivi de votre commande par email. »

UX / détails

  • Navigation latérale (sidebar) : Tableau de bord, Clients, Commandes, Emails manquants.
  • États de chargement (skeletons), messages d'erreur clairs, toasts de succès (« Email enregistré »).
  • Le compteur « Emails manquants » doit sauter aux yeux (badge rouge).
  • Prévoir des données de démonstration réalistes (noms français, produits ENGWE/KOBIKE, n° type KO260107-1, tracking type DG021887687500028).

Endpoints API attendus (à câbler plus tard, mocker pour l'instant)

  • GET /clients?search=&source=
  • GET /clients/:id
  • PUT /clients/:id (mise à jour email/téléphone)
  • GET /commandes?search=
  • GET /commandes/:id
  • GET /notifications
  • GET /emails-manquants
  • POST /emails-manquants/:ligneId (enregistrer email + déclencher l'envoi)
  • POST /public/suivi-email (portail public : { numero_commande, email })

Livre un code propre, organisé en composants réutilisables (Table, SearchBar, StatCard, ClientForm, Toast), avec une couche API isolée et remplaçable.