Entités et attributs Région id (PK) nom Ville id (PK) nom_fr nom_ar region_id (FK → Région) HUP (entrepôt / point de stockage) id (PK) nom ville_id (FK → Ville) Entreprise id (PK) nom Utilisateur id (PK) nom entreprise_id (FK → Entreprise) ville_id (FK → Ville) Produit id (PK) nom reference (Unique) quantite_initiale quantite_restante quantite_alerte a_variantes (booléen) client_id (FK → Utilisateur) entreprise_id (FK → Entreprise) hup_id (FK → HUP) Variante de produit id (PK) produit_id (FK → Produit) nom_variante reference quantite_initiale quantite_restante quantite_alerte Historique de stock id (PK) produit_id (FK → Produit) variante_id (FK → Variante de produit, NULL si pas de variante) client_id (FK → Utilisateur) quantite_avant quantite_changement type_action (ajout_stock, commande, retour) statut (en_attente, valide, rejete, livree) valide_par (FK → Utilisateur, NULL si non validé) date_validation created_at Associations et cardinalités Ville – Région : Ville (1,1) → Région (0,N) HUP – Ville : HUP (1,1) → Ville (0,N) Utilisateur – Entreprise : Utilisateur (1,1) → Entreprise (0,N) Utilisateur – Ville : Utilisateur (1,1) → Ville (0,N) Produit – HUP : Produit (1,1) → HUP (0,N) Produit – Utilisateur (client) : Produit (1,1) → Utilisateur (0,N) Produit – Entreprise : Produit (1,1) → Entreprise (0,N) Variante de produit – Produit : Variante (1,1) → Produit (0,N) Historique – Produit / Variante / Utilisateur : Historique (1,1) → Produit (1,1), Variante (0,1), Utilisateur (1,1) Dépendances Fonctionnelles – Gestion de Stock 1. Table regions id_r → nom_r (À partir de l’identifiant de la région, on connaît son nom.) 2. Table villes id_v → region_v, nom_fr_v, nom_ar_v (L’ID de la ville détermine sa région et ses noms en français et arabe.) nom_fr_v → id_v (Le nom français d’une ville peut être considéré unique dans la base.) 3. Table hups id_h → nom_h, ville_h (Chaque HUP a un nom et est situé dans une ville unique.) 4. Table business id_e → nom_e (Chaque entreprise a un identifiant unique qui détermine son nom.) 5. Table users id_u → nom_u, entreprise_u, ville_u (Chaque utilisateur est identifié par son ID, et cela permet de connaître son nom, son entreprise et sa ville.) nom_u, entreprise_u → id_u (Si on connaît le nom et l’entreprise, on peut retrouver l’utilisateur.) 6. Table products id_p → client_p, entreprise_p, hup_p, nom_p, reference_p, quantite_initiale_p, quantite_restante_p, quantite_alerte_p, a_variantes_p (L’ID du produit détermine toutes ses informations, y compris les quantités et si des variantes existent.) reference_p → id_p (La référence unique permet d’identifier le produit.) 7. Table product_variants id_vp → produit_vp, nom_variante_vp, reference_vp, quantite_initiale_vp, quantite_restante_vp, quantite_alerte_vp (L’ID de la variante détermine toutes ses caractéristiques.) produit_vp, nom_variante_vp → id_vp (Pour un produit donné, le nom de la variante identifie l’ID de la variante.) 8. Table stock_history id_hs → produit_hs, variante_hs, client_hs, quantite_avant_hs, quantite_changement_hs, type_action_hs, statut_hs, valide_par_hs, date_validation_hs, created_at, updated_at (L’ID du mouvement détermine toutes les informations de la transaction.) produit_hs, variante_hs, client_hs, created_at → id_hs (Pour un produit, une variante, un client et une date, on peut identifier un mouvement unique.) produit_hs, variante_hs → quantite_avant_hs (Pour un produit ou variante à un moment donné, on connaît la quantité avant action.) produit_hs, variante_hs → quantite_restante_p (La quantité restante du produit/variante est fonction de l’historique validé.) [17:47, 27/11/2025] الحمد الله: .. [17:48, 27/11/2025] Service Presse: 📋 Règles de Gestion – Système de Gestion de Stock Produits Chaque produit possède un nom, une référence unique, une quantité initiale, une quantité restante, un seuil d’alerte et peut appartenir à un HUP et à une entreprise. Un produit peut avoir des variantes. Si des variantes existent, les champs quantité initiale et quantité restante du produit principal sont NULL. Les quantités sont alors gérées uniquement au niveau des variantes. Chaque produit est associé à un client qui le gère. Variantes de produits Chaque variante possède un nom, une référence, et des champs de quantité identiques à ceux du produit : quantité initiale, quantité restante, seuil d’alerte. Une variante appartient à un seul produit. Stock Chaque produit ou variante possède un stock associé dans le HUP. Les quantités initiales et restantes évoluent selon les mouvements (ajouts ou sorties de stock). Mouvements / Historique Les clients peuvent ajouter des quantités à un produit existant ou créer un nouveau produit dans le stock. Pour chaque ajout, on conserve : La quantité déjà présente dans le stock (quantite_avant) La quantité ajoutée par le client (quantite_changement) Le statut (en_attente, validé, rejeté) L’ajout de stock doit être validé par l’admin avant d’être effectif. Après validation, la quantité initiale et la quantité restante du produit/variante sont augmentées. Les clients peuvent également sortir des produits du stock (commandes ou livraisons) : La quantité initiale reste inchangée. La quantité restante diminue selon la quantité sortie. Chaque sortie est enregistrée avec son historique, son client, et son statut (livrée, en attente). Alertes Si la quantité restante atteint ou descend en dessous du seuil d’alerte, un badge ou notification est généré pour signaler le stock faible. Clients Chaque client est identifié par son ID, son nom, sa ville, et l’entreprise à laquelle il appartient. Un client peut ajouter plusieurs produits ou variantes dans le stock, mais chaque action est tracée individuellement. Administrateurs L’admin peut : Valider ou rejeter un ajout de stock. Valider la sortie d’un produit (commande ou livraison). Toutes les validations sont enregistrées dans l’historique avec le nom de l’admin et la date de validation. Règles de traçabilité Chaque mouvement de stock (entrée ou sortie) doit être tracé dans stock_history. Les modifications des quantités doivent respecter les formules : Ajout validé : quantite_initiale_new = quantite_initiale_old + quantite_ajoutée quantite_restante_new = quantite_restante_old + quantite_ajoutée Sortie (commande/livraison) : quantite_initiale inchangée quantite_restante_new = quantite_restante_old - quantite_sortie Variantes et produits principaux Si un produit a des variantes, toutes les entrées et sorties de stock doivent être faites au niveau des variantes, pas du produit principal. Le produit principal sert uniquement de référence globale. 🗄️ 1. régions CREATE TABLE regions ( id BIGINT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(255) NOT NULL ); 🗄️ 2. villes CREATE TABLE villes ( id BIGINT AUTO_INCREMENT PRIMARY KEY, region_id BIGINT NOT NULL, nom_fr VARCHAR(255), nom_ar VARCHAR(255), FOREIGN KEY (region_id) REFERENCES regions(id) ); 🗄️ 3. hups CREATE TABLE hups ( id BIGINT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(255) NOT NULL, ville_id BIGINT NOT NULL, FOREIGN KEY (ville_id) REFERENCES villes(id) ); 🗄️ 4. entreprises CREATE TABLE entreprises ( id BIGINT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(255) NOT NULL ); 🗄️ 5. utilisateurs CREATE TABLE utilisateurs ( id BIGINT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(255) NOT NULL, entreprise_id BIGINT NOT NULL, ville_id BIGINT NOT NULL, FOREIGN KEY (entreprise_id) REFERENCES entreprises(id), FOREIGN KEY (ville_id) REFERENCES villes(id) ); 🗄️ 6. produits (stock principal) CREATE TABLE produits ( id BIGINT AUTO_INCREMENT PRIMARY KEY, client_id BIGINT NOT NULL, entreprise_id BIGINT NOT NULL, hup_id BIGINT NOT NULL, nom VARCHAR(255) NOT NULL, reference VARCHAR(100) NOT NULL UNIQUE, quantite_initiale INT DEFAULT 0, -- mis à jour quand admin valide ajout quantite_restante INT DEFAULT 0, -- mis à jour pour sortie ou ajout quantite_alerte INT DEFAULT 0, -- seuil d’alerte a_variantes BOOLEAN DEFAULT FALSE, -- TRUE si variantes existent created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, FOREIGN KEY (client_id) REFERENCES utilisateurs(id), FOREIGN KEY (entreprise_id) REFERENCES entreprises(id), FOREIGN KEY (hup_id) REFERENCES hups(id) ); 🗄️ 7. variantes_produits CREATE TABLE variantes_produits ( id BIGINT AUTO_INCREMENT PRIMARY KEY, produit_id BIGINT NOT NULL, nom_variante VARCHAR(255) NOT NULL, reference VARCHAR(100) NOT NULL, quantite_initiale INT NOT NULL, quantite_restante INT NOT NULL, quantite_alerte INT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, FOREIGN KEY (produit_id) REFERENCES produits(id) ); 🗄️ 8. historique_stock CREATE TABLE historique_stock ( id BIGINT AUTO_INCREMENT PRIMARY KEY, produit_id BIGINT NOT NULL, variante_id BIGINT NULL, -- NULL si pas de variante client_id BIGINT NOT NULL, quantite_avant INT NOT NULL, -- quantité avant action quantite_changement INT NOT NULL, -- quantité ajoutée ou sortie type_action ENUM('ajout_stock','commande','retour') NOT NULL, statut ENUM('en_attente','valide','rejete','livree') DEFAULT 'en_attente', valide_par BIGINT NULL, date_validation TIMESTAMP NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (produit_id) REFERENCES produits(id), FOREIGN KEY (variante_id) REFERENCES variantes_produits(id), FOREIGN KEY (client_id) REFERENCES utilisateurs(id), FOREIGN KEY (valide_par) REFERENCES utilisateurs(id) ); 🧾 Explication Table Description regions Contient les régions villes Contient les villes liées à une région hups Entrepôts / points de stockage entreprises Sociétés ou business utilisateurs Clients ou administrateurs produits Stock principal par produit. quantite_initiale = total stock, quantite_restante = disponible, quantite_alerte = seuil critique. variantes_produits Variantes avec leur propre stock. historique_stock Enregistre tous les mouvements (ajout, commande, retour) pour traçabilité. 🧩 Exemple d’insertion et workflow 1️⃣ Créer client et produit -- Entreprise INSERT INTO entreprises (nom) VALUES ('Entreprise A'); -- Région et ville INSERT INTO regions (nom) VALUES ('Région Nord'); INSERT INTO villes (region_id, nom_fr, nom_ar) VALUES (1, 'Casablanca', 'الدار البيضاء'); -- HUP INSERT INTO hups (nom, ville_id) VALUES ('Entrepôt 1', 1); -- Client INSERT INTO utilisateurs (nom, entreprise_id, ville_id) VALUES ('Client 1', 1, 1); -- Produit simple INSERT INTO produits (client_id, entreprise_id, hup_id, nom, reference, quantite_initiale, quantite_restante, quantite_alerte, a_variantes) VALUES (1, 1, 1, 'Produit A', 'PROD001', 100, 100, 50, FALSE); 2️⃣ Client ajoute 50 unités INSERT INTO historique_stock (produit_id, client_id, quantite_avant, quantite_changement, type_action, statut) VALUES (1, 1, 100, 50, 'ajout_stock', 'en_attente'); 3️⃣ Admin valide UPDATE produits SET quantite_initiale = quantite_initiale + 50, quantite_restante = quantite_restante + 50 WHERE id = 1; UPDATE historique_stock SET statut = 'valide', valide_par = 1, date_validation = NOW() WHERE produit_id = 1 AND statut = 'en_attente'; 4️⃣ Client passe commande de 20 unités INSERT INTO historique_stock (produit_id, client_id, quantite_avant, quantite_changement, type_action, statut) VALUES (1, 1, 150, 20, 'commande', 'livree'); UPDATE produits SET quantite_restante = quantite_restante - 20 WHERE id = 1; Stock actuel : quantite_initiale = 150 quantite_restante = 130 quantite_alerte = 50 5️⃣ Produit avec variantes -- Produit parent INSERT INTO produits (client_id, entreprise_id, hup_id, nom, reference, a_variantes) VALUES (1, 1, 1, 'T-shirt', 'TSHIRT001', TRUE); -- Variantes INSERT INTO variantes_produits (produit_id, nom_variante, reference, quantite_initiale, quantite_restante, quantite_alerte) VALUES (2, 'Rouge - M', 'TSHIRT001-RM', 50, 50, 10); INSERT INTO variantes_produits (produit_id, nom_variante, reference, quantite_initiale, quantite_restante, quantite_alerte) VALUES (2, 'Bleu - L', 'TSHIRT001-BL', 30, 30, 5); maintant je veux donnée un meilleure prompt pour autre IA pour designe les pages : Cote admin : -------- Page 1: Afficher les clients : * List et card avec button siwtch entre deux * info : name , buissnes , nombre produit stock initial pas vrainte selemenet produit le meme que pas de variante d'accord nombre de (produits ) avec en tete statistique ( nombre de client ), afficher dans card ou list table columln et header meilleure * avec zone filtrage qui hide et show seleon un button : dropdown client et hup et buisssnes depend client . quand cliquer sur un client passe page 2 : ----------- page 2 : afficher les produits de client selectionnée : * les produits afficher sous forme card ou list avec aussi button siwtch card et list . * info de produits afficher dans card ou list : logo - card ou liste : logo + badge étate de produit d'accord badge ( En stock ou outofStock ou Alerte ou Stock bas ) name produit Buissness : nom HUP SKU : texte Aussi button dropdown pour Modifier ou SUpprimer ou export Ajouter un badge pour mentionée que has-variante Quantité Initial primary - Quantité Restant Verte - Quantité Alerte Rouge Si has variante afficher nombre des variante et button pour afficher selement Modal avec les variante Aussi ajkouter button voir détails de produit quand cliquer sur Button voir Les détails produit : Page 3 ------------ détails de : * Logo + avec status de stock : logo a gauche et droite : détails name SKU Buissnes HUP et aussi c'est pas de variante Quantité Initial primary - Quantité Restant Verte - Quantité Alerte Rouge si has de variante afficher lbutton afficher liste des variante d'accord soit card ou liste comme produit d'accord Page 4 : un page pour AJouter un nouveau Produit Select hup seleect buissnes deened cleint select client entre logo descrioption choisir si produit avec variante ou non si pas vrinate entre Quantité Initial - Quantité Restant - Quantité Alerte si avec variante ; buttonpout ajouter vrainate avec le meme name et refrence et sku et logo et Quantité Initial - Quantité Restant - Quantité Alerte button que ajouter autre variante déigfne comme tailwind css meilleure et reponsive designe je veux comme tailwind css meilleure et smart et professionel d'accord * pour card client Ajoutrer avatar logo et ajouter image lpaceholder profil d'accord * pour card produit améliorer d'accord meilleure déiagne aussi page des produit client ajouter page quand sous forme list pas card * list variante c'est que soit table pour modifier et ajouter etc d'accord donc soit list ou card ajouter page de ajouter de colis base sur les impage pour designe Project Overview Design a modern, professional stock management system with Tailwind CSS. The interface should be clean, responsive, and optimized for business operations. Focus on clarity, usability, and professional aesthetics. Design Principles Modern & Professional: Clean layouts with subtle shadows, smooth transitions, and professional color schemes Responsive: Mobile-first approach with seamless adaptation to tablets and desktops Data-Dense: Efficiently display complex information without overwhelming users Accessibility: High contrast, clear typography, WCAG compliant Interactive: Smooth hover effects, loading states, and micro-interactions Admin Section Page 1: Client List View Layout Structure: Header Section: - Page title "Clients Management" - Statistics cards row (Total Clients, Active Products, Total Stock) - Right-aligned: "Add Client" button + View toggle (Card/List icons) Filter Zone (Collapsible): - Filter button with icon to show/hide - When expanded: 3-column grid * Client dropdown (searchable) * Business dropdown (dependent on client) * HUP dropdown (dependent on client) - "Apply Filters" and "Reset" buttons Main Content Area: - Card View: CSS Grid (3 columns desktop, 2 tablet, 1 mobile) - List View: Full-width table with responsive columns Client Card Design: Card Structure (White background, subtle shadow, rounded corners): ┌─────────────────────────────────────┐ │ [Avatar/Logo] [Status Badge] │ │ │ │ Client Name (Bold, Large) │ │ Business Name (Muted text) │ │ │ │ ├─ 🏢 Business: [Name] │ │ ├─ 📦 Products: [Count] │ │ ├─ 📊 Total Stock: [Initial Qty] │ │ │ │ [View Details Button - Full Width] │ └─────────────────────────────────────┘ Hover Effect: Subtle lift (shadow increase) + border accent Client List View (Table): ┌────────────────────────────────────────────────────────────────┐ │ Avatar | Client Name | Business | Products | Stock | Actions │ │ [img] | John Doe | ACME | 24 | 1,250 | [•••] │ └────────────────────────────────────────────────────────────────┘ - Alternating row colors for readability - Sticky header on scroll - Actions dropdown: View Details, Edit, Export Avatar/Logo Implementation: Circular avatar (w-16 h-16) If no image: Generate colored initials (e.g., "JD" for John Doe) Placeholder: Professional silhouette icon from Heroicons/Lucide Page 2: Client's Products List Header: ├─ Back button (← arrow) ├─ Client avatar + name ├─ Breadcrumb: Clients > [Client Name] > Products └─ Right side: Export button + View toggle + "Add Product" button Product Card Design: Card Structure (Compact, information-dense): ┌─────────────────────────────────────────┐ │ [Product Image] [Stock Status Badge] │ │ 80x80 ├─ "In Stock" (green) │ │ ├─ "Low Stock" (orange) │ │ ├─ "Alert" (red) │ │ └─ "Out of Stock" (gray) │ │ │ │ Product Name (Bold) │ │ SKU: PROD-001 (Small, muted) │ │ │ │ Business: [Name] | HUP: [Location] │ │ │ │ [Has Variants Badge] (if applicable) │ │ │ │ Stock Information Row: │ │ Initial: 2,000 | Remaining: 1,645 | Alert: 200 │ [Progress bar showing stock level] │ │ │ │ If has variants: "3 variants available" │ │ [View Variants Button] │ │ │ │ Footer Actions: │ │ [View Details] [Actions Dropdown ▼] │ │ Edit/Delete/Export │ └─────────────────────────────────────────┘ Progress Bar: - Green if > 50% of initial - Orange if between alert and 50% - Red if ≤ alert threshold Product List View (Table): Table Headers: Image | Product | SKU | Business | HUP | Initial | Remaining | Alert | Status | Variants | Actions Responsive Collapse: - Mobile: Show only Image, Product, Status, Actions - Tablet: Add SKU, Remaining - Desktop: Full columns Product Image Placeholder: 80x80px square with rounded corners If no image: Gray background with package icon Hover: Slight zoom effect Page 3: Product Details View Layout: Two-Column Layout (Desktop) / Stacked (Mobile): Left Column (40%): ┌──────────────────────────┐ │ [Product Image] │ │ Large (300x300) │ │ │ │ [Stock Status Badge] │ │ Large, prominent │ └──────────────────────────┘ Right Column (60%): ┌──────────────────────────────────────┐ │ Product Details Card │ │ │ │ Product Name (Large heading) │ │ SKU: [Reference] │ │ │ │ ├─ Business: [Name] │ │ ├─ HUP: [Location] │ │ ├─ Client: [Name] │ │ │ │ If NO Variants: │ │ Stock Metrics (Large numbers): │ │ ┌─────────────────────────────────┐ │ │ │ Initial | Remaining | Alert │ │ │ │ 2,000 | 1,645 | 200 │ │ │ │ (Gray) | (Green) | (Red) │ │ │ └─────────────────────────────────┘ │ │ │ │ If HAS Variants: │ │ [View Variants Button] │ │ "This product has 5 variants" │ │ │ │ Actions: │ │ [Edit Product] [Delete] [Export] │ └──────────────────────────────────────┘ Below: Recent Stock History Timeline - Card showing last 10 movements - Timeline design with icons for each action type Variants Modal/Section: When "View Variants" clicked, show table or card grid Design based on Image 3 reference (Liste des variantes) Each variant row shows: Avatar/Badge, Name, SKU, quantities, status, actions Page 4: Add/Edit Product Form Layout Structure: Three-Column Sidebar Layout: Left Sidebar (20%): - Product Image Upload * Large square area (200x200) * Drag & drop zone * "Upload Image" button * Preview thumbnail Main Form (60%): ┌─────────────────────────────────────────┐ │ General Information │ │ │ │ Product Name * [________________] │ │ SKU * [________________] │ │ Description │ │ [Text area - 4 rows] │ │ │ │ Organization Details │ │ Select HUP * [Dropdown ▼] │ │ Select Business * [Dropdown ▼] │ │ Select Client * [Dropdown ▼] │ │ │ │ Product Configuration │ │ ○ Simple Product (No Variants) │ │ ○ Variable Product (Has Variants) │ │ │ │ If Simple Product Selected: │ │ ┌───────────────────────────────────┐ │ │ │ Stock Management │ │ │ │ Initial Qty [____] │ │ │ │ Remaining Qty [____] │ │ │ │ Alert Threshold [____] │ │ │ └───────────────────────────────────┘ │ │ │ │ If Variable Product Selected: │ │ ┌───────────────────────────────────┐ │ │ │ Variants Section │ │ │ │ │ │ │ │ Variant 1: [____________] │ │ │ │ SKU: [____________] │ │ │ │ Initial: [__] Remaining: [__] │ │ │ │ Alert: [__] │ │ │ │ [×Remove] │ │ │ │ │ │ │ │ [+ Add Another Variant Button] │ │ │ └───────────────────────────────────┘ │ │ │ │ [Cancel] [Save as Draft] [Publish] │ └─────────────────────────────────────────┘ Right Sidebar (20%): - Status selector - Product guidelines - Help tips Variants Management: Based on Image 7 reference Dynamic add/remove variant rows Each variant has: Name, SKU, Image (optional), Quantities Validation: At least one variant required if "Variable Product" selected Design Specifications Color System (Semantic) Status Colors: - In Stock: emerald-500 / green-500 - Low Stock: amber-500 / orange-500 - Alert: red-500 - Out of Stock: slate-400 / gray-400 Primary Actions: blue-600 Secondary Actions: slate-600 Destructive: red-600 Success: green-600 Backgrounds: - Primary: white - Secondary: slate-50/gray-50 - Muted: slate-100 Page 2: Produits du Client Objectif Afficher tous les produits d'un client spécifique Éléments d'interface En-tête de page Titre: Produits de [Nom Client] Breadcrumb: Clients > [Nom Client] Bouton switch: Card View / List View Bouton: + Ajouter un Produit Affichage Card View text ┌─────────────────────────────────┐ │ 🖼️ [Logo Produit] │ │ [BADGE: EnStock/Alert/OutStock] │ │ **Nom Produit** │ │ 🏢 Business: [Nom] │ │ 🏭 HUP: [Nom] │ │ 🔤 SKU: [Référence] │ │ 📊 Qté Initiale: [100] │ │ ✅ Qté Restante: [75] │ │ ⚠️ Qté Alerte: [20] │ │ [BADGE: Avec Variantes] │ │ [Bouton: Voir Variantes] │ │ [⋮ Menu: Modif/Supp/Export] │ │ [Bouton: Voir Détails] │ └─────────────────────────────────┘ Affichage List View text ┌────────────────────────────────────────────────────────────────────────────────────────────┐ │ Logo │ Statut │ Nom │ Business │ HUP │ SKU │ Qté Init │ Qté Rest │ Qté Alert │ Variantes │ Actions │ ├──────┼────────┼─────┼──────────┼─────┼─────┼──────────┼──────────┼───────────┼───────────┼─────────┤ │ 🖼️ │ 🟢 │ PdtA│ Biz A │ HUP1│ SKU1│ 100 │ 75 │ 20 │ 3 [👁️] │ [⋮] │ └────────────────────────────────────────────────────────────────────────────────────────────┘ Badges de statut 🟢 En Stock: quantite_restante > quantite_alerte 🟡 Alerte: quantite_restante <= quantite_alerte && quantite_restante > 0 🔴 Stock Bas: quantite_restante <= quantite_alerte / 2 ⚫ Rupture: quantite_restante = 0 Interactions Clic sur Voir Variantes → Modal avec liste des variantes Clic sur Voir Détails → Redirige vers Page 3 Clic sur + Ajouter Produit → Redirige vers Page 4 Page 3: Détails du Produit Objectif Afficher les détails complets d'un produit Mise en page Section Header text ┌─────────────────────────────────────────┐ │ ← Retour aux produits │ │ **Détails du Produit** │ │ [Bouton: Modifier] [Bouton: Supprimer] │ └─────────────────────────────────────────┘ Section Principale text ┌───────────────┬─────────────────────────┐ │ │ **INFORMATIONS PRODUIT** │ │ [LOGO] │ Nom: [Nom Produit] │ │ [BADGE] │ SKU: [Référence] │ │ Statut: │ Business: [Nom] │ │ 🟢 En Stock │ HUP: [Nom] │ │ │ │ │ │ **STOCK** │ │ │ 📦 Qté Initiale: [100] │ │ │ ✅ Qté Restante: [75] │ │ │ ⚠️ Qté Alerte: [20] │ └───────────────┴─────────────────────────┘ Section Variantes (si applicable) Titre: "Variantes du Produit" Bouton switch: Card View / List View Affichage identique à Page 2 mais pour les variantes seulement donnée selement page list des produits et voir détails produit