NaftoManager est une application SaaS moderne de gestion des stations-service en Algérie. Elle permet aux propriétaires et aux gérants d'exploiter une ou plusieurs stations-service : ventes de carburant, pompes, cuves, stocks, livraisons, fournisseurs, dépenses, caisses, employés, maintenance et rapports.
L'interface est entièrement en français, responsive et adaptée aux ordinateurs, tablettes et mobiles. Le style est professionnel, simple et facile à utiliser par un personnel non technique. La devise affichée est le DZD / DA, les dates sont au format DD/MM/YYYY, et l'interface initiale est en français LTR, avec une future compatibilité RTL prévue mais non activée.
Public visé : super administrateur de la plateforme, propriétaires d'entreprises de distribution de carburant, gérants de station, caissiers, employés de piste, responsables stock et comptables.
NaftoManager est une plateforme multi-tenant : une entreprise peut gérer plusieurs stations, avec isolation stricte des données entre entreprises. L'accès se fait par authentification sécurisée par email et mot de passe, avec gestion des rôles et permissions et journal d'audit des actions importantes. L'architecture est prévue pour évoluer vers une future application mobile.
Le produit couvre les domaines suivants :
Les carburants par défaut sont l'Essence sans plomb, le Gasoil et le GPL carburant. Chaque produit contient un nom et un code, un prix de vente, un prix d'achat, une unité en litre, un stock minimum, une couleur et un statut actif/inactif. Les prix sont configurables par station et les taxes sont configurables ; aucun prix ni taxe n'est codé en dur, et aucun taux de TVA fixe n'est imposé.
NaftoManager est livré comme une application web first-party, avec un frontend, un backend et une base de données clairement séparés, exposant des API sécurisées. Toutes les surfaces de travail opérationnelles sont détenues par l'application : la plateforme ne délègue à aucun fournisseur externe la gestion des ventes, des stocks, de la caisse, des rapports ou de l'administration.
L'identité est détenue par l'application : un compte est créé ou provisionné de façon sécurisée, avec attribution d'un rôle et d'une entreprise, puis vérifié par email et mot de passe avant tout accès aux données protégées. L'entrée publique (Landing) et la Connexion sont accessibles sans session ; toutes les autres surfaces exigent une session authentifiée et un contrôle d'accès par rôle et permissions.
Périmètre actuel : l'ensemble des pages principales, des rôles, des flux opérationnels et financiers décrits dans ce document.
Hors périmètre actuel : l'application mobile native (architecture seulement prévue pour l'accueillir), l'activation de l'interface RTL (compatibilité future seulement), et tout taux de TVA imposé par défaut.
FR-01 — Application SaaS multi-tenant (explicit) As a Super administrateur, I should disposer d'une plateforme SaaS multi-tenant où une entreprise peut gérer plusieurs stations, afin d'exploiter plusieurs réseaux de stations-service.
FR-02 — Isolation stricte des données entre entreprises (explicit) As a Propriétaire, I should que les données de mon entreprise soient strictement isolées de celles des autres entreprises, afin de protéger mes informations commerciales.
FR-03 — Authentification sécurisée par email et mot de passe (explicit) As a Utilisateur, I should me connecter avec mon email et mon mot de passe, afin d'accéder à mes données protégées.
FR-04 — Mot de passe oublié (explicit) As a Utilisateur, I should demander la réinitialisation de mon mot de passe oublié, afin de retrouver l'accès à mon compte.
FR-05 — Création ou provisionnement sécurisé des comptes (required_inference) As a Propriétaire, I should créer ou faire provisionner de façon sécurisée les comptes de mes collaborateurs avec attribution d'un rôle et d'une entreprise, afin que chacun accède uniquement à ce qui le concerne.
FR-06 — Vérification récurrente avant accès aux données protégées (required_inference) As a Utilisateur, I should être vérifié par email et mot de passe avant chaque accès aux données protégées, afin que mes données restent inaccessibles sans session valide.
FR-07 — Gestion des rôles et permissions (explicit) As a Propriétaire, I should gérer les rôles et permissions, afin que chaque collaborateur dispose des accès correspondant à sa fonction.
FR-08 — Journal d'audit des actions importantes (explicit) As a Propriétaire, I should consulter un journal d'audit des actions importantes, afin de tracer les opérations sensibles.
FR-09 — Configuration initiale de l'entreprise et de la station (required_inference) As a Propriétaire, I should configurer au moins une entreprise, une station et les produits ou paramètres nécessaires aux opérations, afin de démarrer l'exploitation.
FR-10 — Gestion des stations (explicit) As a Propriétaire, I should lister, ajouter et modifier mes stations avec adresse, localisation, statut et contacts, afin de tenir à jour mon réseau.
FR-11 — Détail d'une station (explicit) As a Gérant, I should consulter le détail d'une station avec ses pompes, cuves, employés, ventes, stocks, dépenses et activité, afin de piloter l'exploitation quotidienne.
FR-12 — Création d'une vente (explicit) As a Caissier, I should créer une vente contenant station et pompe, produit, quantité en litres, prix unitaire, montant total en DA, mode de paiement, employé, date et heure, afin d'enregistrer la transaction.
FR-13 — Modes de paiement (explicit) As a Caissier, I should choisir le mode de paiement parmi espèces, carte bancaire, paiement électronique et crédit client si activé, afin d'encaisser correctement la vente.
FR-14 — Validation, annulation et correction des ventes (explicit) As a Caissier, I should valider, annuler et corriger une vente, afin de traiter les erreurs de saisie et les retours.
FR-15 — Historique et filtres des ventes (explicit) As a Comptable, I should consulter l'historique des ventes et le filtrer par période, produit, pompe et employé, afin d'analyser l'activité.
FR-16 — Suivi des pompes (explicit) As a Employé de piste, I should renseigner le compteur initial, le compteur final, le volume distribué, l'état et les anomalies d'une pompe, afin de suivre la distribution réelle.
FR-17 — Signalement des problèmes et anomalies (explicit) As a Employé de piste, I should signaler les problèmes et anomalies de pompes ou d'équipements, afin que la maintenance intervienne.
FR-18 — Suivi des stocks par cuve et par produit (explicit) As a Responsable stock, I should suivre les stocks par cuve et par produit, avec stock actuel, capacité, pourcentage de remplissage, seuil minimum et dernière livraison, afin de maîtriser les niveaux.
FR-19 — Enregistrement automatique des entrées et sorties de stock (explicit) As a Responsable stock, I should que les entrées et sorties de stock soient enregistrées automatiquement, afin que les niveaux restent exacts sans saisie manuelle.
FR-20 — Alerte de stock faible (explicit) As a Responsable stock, I should être alerté en cas de stock faible, afin de déclencher un réapprovisionnement.
FR-21 — Ajustements manuels de stock avec motif obligatoire (explicit) As a Responsable stock, I should effectuer des ajustements manuels de stock uniquement avec un motif obligatoire, afin de justifier tout écart.
FR-22 — Historique complet des mouvements de stock (explicit) As a Responsable stock, I should consulter l'historique complet des mouvements, afin de reconstituer l'évolution des stocks.
FR-23 — Gestion des fournisseurs (explicit) As a Responsable stock, I should gérer les coordonnées des fournisseurs, leurs produits, leurs livraisons et l'historique des achats, afin de suivre mes approvisionnements.
FR-24 — Enregistrement des livraisons (explicit) As a Responsable stock, I should enregistrer une livraison avec fournisseur, produit, quantité, prix d'achat, date et document, afin de tracer les approvisionnements.
FR-25 — Gestion des dépenses (explicit) As a Comptable, I should enregistrer une dépense avec catégorie, montant, date, justificatif et commentaire, afin de suivre les charges.
FR-26 — Ouverture, mouvements et paiements de caisse (explicit) As a Caissier, I should ouvrir la caisse, enregistrer les mouvements et les paiements, afin de suivre les encaissements de la journée.
FR-27 — Clôture et rapprochement de caisse (explicit) As a Caissier, I should clôturer la caisse et effectuer le rapprochement, afin de valider les encaissements et détecter les écarts.
FR-28 — Gestion des clients (explicit) As a Caissier, I should gérer les clients particuliers et entreprises, leur historique et leur crédit éventuel, afin de suivre la relation commerciale.
FR-29 — Crédit client conditionnel (required_inference) As a Caissier, I should utiliser le crédit client uniquement lorsqu'il est activé, afin de ne pas enregistrer de ventes à crédit non autorisées.
FR-30 — Gestion des employés (explicit) As a Gérant, I should gérer les utilisateurs, rôles, horaires, station et statut des employés, afin d'organiser le personnel de la station.
FR-31 — Gestion de la maintenance (explicit) As a Gérant, I should suivre les incidents, équipements, interventions, coûts et statuts, afin de maintenir les équipements en service.
FR-32 — Tableau de bord (explicit) As a Propriétaire, I should consulter un tableau de bord affichant chiffre d'affaires du jour et du mois, litres vendus, nombre de transactions, stock disponible, produit le plus vendu, meilleure station, dépenses du mois, marge estimée, alertes de stock, pompes hors service et livraisons récentes, afin de piloter l'activité.
FR-33 — Graphiques du tableau de bord (explicit) As a Propriétaire, I should consulter des graphiques de ventes par jour, ventes par carburant, évolution du chiffre d'affaires, comparaison des stations, dépenses par catégorie et niveau des stocks, afin de visualiser les tendances.
FR-34 — Rapports filtrables (explicit) As a Comptable, I should générer des rapports filtrables par station, période, produit, pompe, employé et mode de paiement, afin d'analyser précisément l'activité.
FR-35 — Types de rapports (explicit) As a Comptable, I should disposer du rapport journalier des ventes, du rapport mensuel, du rapport de caisse, du rapport des stocks, du rapport des livraisons, du rapport des dépenses, du rapport de marge estimée et du rapport de performance par station, afin de couvrir tous les besoins d'analyse.
FR-36 — Export PDF et Excel (explicit) As a Comptable, I should exporter les rapports en PDF et Excel avec logo, nom de l'entreprise, station, période et date de génération, afin de les diffuser et les archiver.
FR-37 — Notifications (explicit) As a Gérant, I should recevoir des notifications pour stock faible, livraison reçue, pompe hors service, dépense importante, écart de caisse, création d'utilisateur et clôture de caisse réussie ou échouée, afin de réagir rapidement.
FR-38 — Gestion des abonnements (explicit) As a Super administrateur, I should gérer les plans Essentiel, Professionnel et Entreprise, afin d'attribuer et de suivre les abonnements des entreprises.
FR-39 — Consultation de l'abonnement (explicit) As a Propriétaire, I should consulter le plan actuel, les limites utilisées, la date de renouvellement, les factures et changer de plan, afin de gérer mon abonnement.
FR-40 — Paramétrage de l'entreprise, des produits et des taxes (explicit) As a Propriétaire, I should configurer l'entreprise, les stations, les produits, les taxes, les utilisateurs et les permissions, afin d'adapter la plateforme à mon exploitation.
FR-41 — Produits carburant par défaut (explicit) As a Propriétaire, I should disposer par défaut de l'Essence sans plomb, du Gasoil et du GPL carburant, chacun avec nom et code, prix de vente, prix d'achat, unité en litre, stock minimum, couleur et statut actif/inactif, afin de démarrer sans configuration exhaustive.
FR-42 — Prix configurables par station et taxes configurables (explicit) As a Propriétaire, I should configurer les prix par station et les taxes, sans jamais coder les prix ou les taxes en dur et sans imposer un taux de TVA fixe, afin de refléter la réalité commerciale de chaque station.
FR-43 — Champs du contexte algérien (explicit) As a Propriétaire, I should renseigner wilaya, commune, adresse, téléphone algérien, numéro d'identification fiscale et registre de commerce, afin de conformer mes données au contexte algérien.
FR-44 — Horaires d'ouverture configurables par station (explicit) As a Gérant, I should configurer les horaires d'ouverture de ma station, afin de refléter son fonctionnement réel.
FR-45 — Devise et format de date (explicit) As a Utilisateur, I should voir les montants en « DA » et les dates au format DD/MM/YYYY, afin de lire les données sans ambiguïté.
FR-46 — Interface en français LTR et compatibilité RTL future (explicit) As a Utilisateur, I should utiliser une interface entièrement en français LTR, avec une compatibilité RTL prévue mais non activée, afin de travailler dans ma langue tout en préparant l'avenir.
FR-47 — Mode clair et mode sombre (explicit) As a Utilisateur, I should basculer entre mode clair et mode sombre, afin de travailler confortablement selon l'éclairage.
FR-48 — Interface responsive (explicit) As a Utilisateur, I should utiliser l'application sur ordinateur, tablette et mobile, afin de travailler au bureau comme sur la piste.
FR-49 — États de chargement, erreurs, succès et écrans vides (explicit) As a Utilisateur, I should voir des états de chargement, des erreurs, des succès et des écrans vides explicatifs, afin de comprendre l'état du système.
FR-50 — Tableaux optimisés avec recherche, filtres, pagination et tri (explicit) As a Utilisateur, I should disposer de tableaux optimisés pour un grand volume de données avec recherche, filtres, pagination et tri, afin de retrouver rapidement une information.
FR-51 — Confirmation avant suppression et archivage (explicit) As a Propriétaire, I should confirmer avant toute suppression et archiver lorsque nécessaire, afin d'éviter les pertes de données.
FR-52 — Sécurité des mots de passe et des sessions (explicit) As a Super administrateur, I should que les mots de passe soient hashés et les sessions gérées de façon sécurisée, afin de protéger les comptes.
FR-53 — Protection contre l'accès aux données d'une autre entreprise (explicit) As a Super administrateur, I should garantir qu'aucun utilisateur n'accède aux données d'une autre entreprise, afin de préserver la confidentialité multi-tenant.
FR-54 — Sauvegardes régulières et variables d'environnement (explicit) As a Super administrateur, I should disposer de sauvegardes régulières et stocker les données sensibles dans des variables d'environnement, sans jamais les exposer dans le frontend, afin de garantir la résilience et la confidentialité.
FR-55 — Données de démonstration (explicit) As a Propriétaire, I should disposer de données de démonstration réalistes pour une entreprise algérienne avec trois stations dans différentes wilayas, plusieurs pompes, cuves, ventes, livraisons, dépenses, employés et alertes de stock, afin d'évaluer la plateforme.
FR-56 — Séparation frontend, backend et base de données avec API sécurisées (explicit) As a Super administrateur, I should disposer d'une séparation claire entre frontend, backend et base de données, exposant des API sécurisées, afin de garantir maintenabilité et sécurité.
FR-57 — Composants réutilisables et absence de données statiques (explicit) As a Super administrateur, I should que les écrans finaux utilisent des composants réutilisables et aucune donnée statique, afin de garantir cohérence et fiabilité.
FR-58 — Architecture évolutive pour une future application mobile (explicit) As a Super administrateur, I should disposer d'une architecture évolutive prête pour une future application mobile, afin de préparer l'extension du produit.
Muse : Erik Spiekermann. Direction retenue : typographic infrastructure for a fuel network — signal colours as wayfinding, Fira Sans as the system. L'interface est un système de signalétique, pas un site marketing : lisibilité sous le soleil de la piste, calme sous pression, ordre strict.
| Rôle | Valeur |
|---|---|
| Fond (papier chaud) | #F4F1EA |
| Surface (panneaux) | #FFFFFF |
| Texte | #16181C |
| Primaire (navigation, règles de section) | #12294A |
| Accent (actions et états actifs uniquement) | #E8660B |
| Atténué (libellés, métadonnées, en-têtes de tableau) | #6E6A62 |
| Vert sémantique (revenus, validations, niveaux au-dessus du seuil) | #1F7A4D |
| Rouge sémantique (alertes, écarts de caisse, pompes hors service) | #B3261E |
| Surface verte teintée (petit texte) | #E7F2EB |
| Surface rouge teintée (petit texte) | #FBEAE8 |
| Filet 1px | #DCD6CA |
| Rôle | Valeur |
|---|---|
| Fond | #121417 |
| Surface | #1B1E23 |
| Texte | #F2EFE9 |
| Primaire (navigation) | #2C4A75 |
| Accent | #F0781E |
| Atténué | #9A958C |
| Surface verte teintée | #16301F |
| Surface rouge teintée | #3A1A18 |
| Filet 1px | #2A2E34 |
Le vert et le rouge ne sont jamais décoratifs : ils portent une signification (revenus/validations/niveaux au-dessus du seuil ; alertes/écarts/pompes hors service) et ne s'appliquent à du petit texte que sur leurs surfaces teintées. Chaque paire de données atteint 4.5:1 au corps de texte dans les deux modes.
-0.01em.0.14em — lecture « signalétique de station ».clamp(26px, 3.2vw, 40px). Valeur KPI : clamp(24px, 2.6vw, 34px). Corps de tableau : 14px. Micro-libellés : 12px majuscules, interlettrage 0.14em.Rectiligne et honnête. Rayon 6px sur les champs, boutons et cartes ; 2px sur les cellules de tableau et les badges. Filets 1px #DCD6CA (clair) / #2A2E34 (sombre) séparent chaque ligne et chaque panneau : la grille est visible, jamais suggérée. Aucune pastille, aucune forme organique, aucun rayon de 20px et plus. Des règles gauches codées de 4px marquent les lignes de station et les cartes d'alerte comme des lignes de transit.
Grille de 12 colonnes avec barre latérale navy fixe de 264px sur desktop (pictogrammes 2px + libellés français, groupes : Exploitation / Finances / Réseau / Administration), repliée en rail d'icônes de 64px à 768px et en bottom sheet à 375px. Colonne de contenu limitée à 1440px. Le tableau de bord ouvre sur une bande de 4 cartes KPI, puis un partage 2/3 + 1/3 : graphiques de ventes à gauche, alertes et livraisons récentes à droite. Tableaux denses (lignes de 40px), en-tête collant, filtres dans une barre horizontale au-dessus, pagination et export ancrés en bas à droite. Le détail de station utilise un bandeau d'onglets numérotés (01 Pompes, 02 Cuves, 03 Ventes, 04 Dépenses, 05 Activité).
Aucune photographie de stock, aucun rendu 3D. L'imagerie est le système lui-même : pictogrammes linéaires schématiques d'une pompe, d'une cuve, d'un camion-citerne, d'un tiroir-caisse et d'une clé, tracés à 2px en navy ; carte des wilayas d'Algérie en contour plat avec des points codés par station ; sparklines et graphiques à barres comme seules « images ». Chaque produit carburant porte sa couleur configurée en carré plein de 10px à côté de son nom — la couleur du produit est son icône.
La Connexion est le héros : un mur de signalétique, pas une carte centrée.
#12294A : titre Fira Sans surdimensionné, aligné au fer à gauche, en français — « GÉREZ VOS STATIONS, PAS VOS CLASSEURS » — à clamp(34px, 5vw, 72px), graisse 700, interligne serré. Une règle orange #E8660B unique souligne le titre. Trois lignes de preuve numérotées suivent, en 12px majuscules, interlettrage 0.14em : 01 Ventes · 02 Cuves · 03 Rapports.Ce concept ne recompose que du contenu, des états et des contrôles acceptés : la présentation du produit, les champs email/mot de passe, le lien mot de passe oublié et l'action de connexion.
Interaction Model: Static (direction) Motion Tempo: restrained Hero Dimensionality: flat
prefers-reduced-motion supprime les comptes à l'augmentation et les animations de remplissage ; les changements d'état sont instantanés et tout le contenu reste entier et lisible.prefers-reduced-motion. Rationale : écrans opérationnels, pas de mouvement décoratif.Contraintes explicites
Hypothèses
Hors périmètre actuel
Défauts de présentation et de technologie (Default — not specified by user)
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!