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 Section Variantes (si applicable) Titre: "Variantes du Produit" Bouton switch: Card View / List View Affichage identique à Page 2 mais pour les variantes seulement