PROMPT - Page Ajouter Tarif de Livraison CONTEXTE SYSTÈME: Système de gestion de tarifs de livraison. Page formulaire pour configurer un nouveau tarif avec résumé en temps réel. React + Tailwind CSS. ================================================================================ PAGE - AJOUTER UN TARIF ================================================================================ LAYOUT: 2 colonnes (Contenu principal gauche 3/4 + Sidebar résumé droite 1/4) -------------------------------------------------------------------------------- CONTENU PRINCIPAL GAUCHE -------------------------------------------------------------------------------- Card 1 "Type de Tarif": - Icône + Titre "Type de Tarif" - Sous-titre: "Sélectionnez le type de tarif à configurer" - 2 boxes radio côte à côte: - Box 1: Icône + Radio + "Tarif Standard" + texte aide "Appliquer le tarif pour tous les clients" - Box 2: Icône + Radio + "Tarif Client Spécifique" + texte aide "Appliquer le tarif pour un client particulier" Card 2 "HUP": - Icône + Titre "HUP" - Sous-titre: "Sélectionnez le point de départ des livraisons" - Label "hup *" - Dropdown "Sélectionner un hup" Card 3 "Zones de Livraison": - Icône + Titre "Zones de Livraison" - Sous-titre: "Définissez les régions et villes concernées" - 3 options radio (liste verticale, chaque option est une card): - Option 1: Radio + "Mode 1: Toutes les Régions du Maroc" + texte aide + checkmark si sélectionné - Option 2: Radio + "Mode 2: Sélection par Région Complète" + texte aide - Option 3: Radio + "Mode 3: Sélection par Région et Ville" + texte aide Card 4 "Tarifs de Livraison": - Icône $ + Titre "Tarifs de Livraison" - Sous-titre: "Définissez les montants pour chaque type de livraison" - 3 inputs côte à côte: - Input "Tarif Livré *" + suffix "DH" + texte aide - Input "Tarif Refusé *" + suffix "DH" + texte aide - Input "Tarif Retour *" + suffix "DH" + texte aide -------------------------------------------------------------------------------- SIDEBAR DROITE - RÉSUMÉ -------------------------------------------------------------------------------- Card "Résumé du Tarif" (sticky): - Icône + Titre "Résumé du Tarif" - Sous-titre: "Vérifiez les informations avant d'enregistrer" Section "Type de Tarif": - Icône + "Standard" + Badge "Standard" Section "Hub de Départ": - Icône + "Aucun HUP sélectionné" (ou valeur sélectionnée) Section "Tarifs Appliqués": - 3 mini cards compactes côte à côte: - Card 1: Icône + "Tarif Livré" + "25 DH" (vert) - Card 2: Icône + "Tarif Refusé" + "0 DH" (rouge) - Card 3: Icône + "Tarif Retour" + "25 DH" (orange) Bouton "Réinitialiser" (rouge/outline, full width) Bouton "Enregistrer" (vert/primary, full width, avec icône save)