21 days ago
📋 STRUCTURE : Page d'affichage des tarifs 1. EN-TÊTE DE PAGE - Titre : "Gestion des Tarifs de Livraison" - Breadcrumb : Accueil > Paramètres > Tarifs - Boutons d'action globaux : * Créer un tarif standard * Créer un tarif client spécifique * Exporter les tarifs (Excel/PDF) 2. FILTRES ET RECHERCHE Section filtres (horizontale ou verticale selon l'espace) : - Type de tarif : [Tous | Standard | Client Spécifique] - HUP : Dropdown select (tous les HUPs) - Région : Dropdown select - Ville : Dropdown select (dépendant de la région) - Client : Dropdown select (visible uniquement si "Client Spécifique" sélectionné) - Recherche textuelle : Input search (code HUP, nom ville, nom client) - Bouton "Réinitialiser les filtres" - Bouton "Appliquer les filtres" 3. TABLEAU DE DONNÉES Colonnes du tableau : A. Pour TOUS les tarifs : - [Checkbox] Sélection - Type : Badge [Standard | Client Spécifique] - HUP : Référence + Nom - Ville : Nom (FR/AR selon langue) - Région : Nom de la région - Tarif Livré : Montant DH - Tarif Refusé : Montant DH - Tarif Retour : Montant DH - Date création : Date formatée - Actions : [Voir | Modifier | Supprimer | Dupliquer] B. Colonne supplémentaire pour tarifs CLIENT SPÉCIFIQUE uniquement : - Client : Nom + CIN (entre HUP et Ville) - Badge prioritaire : "Prioritaire sur tarif standard" Structure visuelle du tableau : ┌────────────────────────────────────────────────────────────────────────────┐ │ [☐] │ Type │ HUP │ Client* │ Ville │ Région │ Tarifs... │ ├────────────────────────────────────────────────────────────────────────────┤ │ [☐] │ Standard │ HUP-001 │ - │ Rabat │ Rabat │ 30|20|15 │ │ [☐] │ Client │ HUP-001 │ Ahmed │ Rabat │ Rabat │ 25|15|10 │ │ [☐] │ Standard │ HUP-002 │ - │ Casablanca│ Casa │ 35|25|20 │ └────────────────────────────────────────────────────────────────────────────┘ * Colonne "Client" visible uniquement pour les tarifs client spécifiques 4. INDICATEURS ET STATISTIQUES (En haut de page) Cards horizontales avec compteurs : - Total tarifs standards : Nombre - Total tarifs clients spécifiques : Nombre - Villes couvertes : Nombre de villes avec tarif - HUPs configurés : Nombre de HUPs avec au moins 1 tarif - Tarif moyen livré : Montant moyen DH 5. ACTIONS EN MASSE Barre d'actions (visible quand au moins 1 ligne sélectionnée) : - "X tarifs sélectionnés" - Supprimer la sélection - Dupliquer la sélection - Exporter la sélection - Modifier en masse (tarifs standards uniquement) 6. DÉTAILS D'UN TARIF (Modal ou page séparée) Sections d'information : A. Informations générales : - Type : Standard ou Client Spécifique - Date de création - Date de dernière modification - Créé par : Nom utilisateur B. Localisation : - HUP : Référence, Nom, Adresse - Ville : Nom (FR + AR) - Région : Nom C. Client (si tarif spécifique) : - Nom complet - CIN - Téléphone - Email - Lien vers profil client D. Tarifs appliqués : - Tarif Livré : Montant DH - Tarif Refusé : Montant DH - Tarif Retour : Montant DH E. Comparaison (pour tarifs clients) : Tableau comparatif : ┌─────────────────┬──────────────┬────────────────┐ │ │ Standard │ Client │ ├─────────────────┼──────────────┼────────────────┤ │ Tarif Livré │ 30 DH │ 25 DH (-5) │ │ Tarif Refusé │ 20 DH │ 15 DH (-5) │ │ Tarif Retour │ 15 DH │ 10 DH (-5) │ └─────────────────┴──────────────┴────────────────┘ Badge : "Économie de 15 DH en moyenne" F. Historique des modifications : Liste chronologique des changements avec : - Date - Utilisateur - Type de modification - Anciennes valeurs → Nouvelles valeurs G. Statistiques d'utilisation (si applicable) : - Nombre de colis livrés avec ce tarif : X - Montant total facturé : X DH - Période d'utilisation : Du X au Y 7. TRI ET PAGINATION Options de tri (cliquables sur en-têtes de colonnes) : - Type (Standard → Client Spécifique) - HUP (alphabétique) - Ville (alphabétique) - Tarif Livré (croissant/décroissant) - Date création (récent → ancien) Pagination : - Sélecteur : [10 | 25 | 50 | 100] par page - Affichage : "Affichage de X à Y sur Z tarifs" - Boutons : [Première | Précédent | 1 2 3 ... | Suivant | Dernière] 8. ÉTATS VIDES A. Aucun tarif créé : - Icône : Illustration vide - Message : "Aucun tarif configuré" - Action : Bouton "Créer le premier tarif" B. Aucun résultat de recherche : - Icône : Loupe barrée - Message : "Aucun tarif ne correspond à vos critères" - Actions : * Bouton "Réinitialiser les filtres" * Lien "Voir tous les tarifs" C. HUP sans tarif : - Message d'alerte : "Le HUP X n'a aucun tarif configuré" - Action : Bouton "Configurer les tarifs pour ce HUP" 9. ALERTES ET NOTIFICATIONS Messages contextuels : A. Avertissements : - "X villes n'ont pas de tarif standard configuré" - "Le client Y utilise le tarif standard (pas de tarif spécifique)" - "Conflit : Tarif client identique au tarif standard" B. Informations : - "Tarif créé avec succès" - "X tarifs modifiés" - "Export en cours..." C. Priorités (pour tarifs clients) : Badge : "Ce tarif remplace le tarif standard pour ce client" 10. NAVIGATION ET LIENS RAPIDES Liens contextuels dans le tableau : - Clic sur HUP → Détails du HUP - Clic sur Ville → Liste des quartiers de la ville - Clic sur Client → Profil du client - Clic sur Région → Toutes les villes de la région Boutons d'accès rapide : - "Voir les colis livrés avec ce tarif" - "Historique des facturations" - "Créer un tarif similaire" (duplication) 11. FORMULAIRE DE CRÉATION/MODIFICATION Structure du formulaire (déjà présente dans votre code) : Section 1 : Type de tarif - Radio : Standard | Client Spécifique - Si Client : Select Client Section 2 : Localisation - Select HUP - Mode sélection ville : Tout Maroc | Par Région | Par Ville - Affichage villes selon mode Section 3 : Tarifs - Input Tarif Livré - Input Tarif Refusé - Input Tarif Retour Section 4 : Résumé - Récapitulatif des choix - Comparaison avec tarif standard (si client) - Validation finale 12. RÈGLES DE LOGIQUE MÉTIER Affichage conditionnel : - Si tarif CLIENT existe → Afficher badge "Prioritaire" - Si tarif CLIENT == tarif STANDARD → Alerte "Tarifs identiques, inutile" - Si ville sans tarif STANDARD → Message "Tarif standard manquant" - Si client a plusieurs tarifs (même HUP) → Erreur "Doublon" Ordre d'affichage par défaut : 1. Tarifs CLIENTS (triés par client) 2. Tarifs STANDARDS 3. Tri secondaire par HUP puis Ville Recherche intelligente : - "Rabat" → Trouve tous les tarifs pour Rabat - "Ahmed" → Trouve tous les tarifs du client Ahmed - "HUP-001" → Trouve tous les tarifs du HUP-001 - "30" → Trouve tous les tarifs avec montant contenant 30 13. EXPORT DE DONNÉES Formats disponibles : - Excel : Colonnes complètes + onglets séparés (Standard / Clients) - PDF : Tableau formaté avec en-tête entreprise - CSV : Format simple pour import Contenu de l'export : - Toutes les colonnes visibles - Filtres appliqués mentionnés en en-tête - Date d'export - Utilisateur ayant exporté 🔄 FLUX UTILISATEUR PRINCIPAL 1. Arrivée sur la page ↓ 2. Voir le tableau avec tous les tarifs ↓ 3. Utiliser les filtres pour affiner ↓ 4. Cliquer sur un tarif pour voir détails ↓ 5. Option : Modifier | Dupliquer | Supprimer ↓ 6. Retour au tableau avec message de confirmation
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
