CONTEXTE SYSTÈME: Système de Gestion de Stock pour clients. Page formulaire pour ajouter un nouveau produit au stock. React + Tailwind CSS. ================================================================================ PAGE - AJOUTER NOUVEAU STOCK ================================================================================ LAYOUT: 2 colonnes (Sidebar gauche 1/4 + Contenu principal droite 3/4) -------------------------------------------------------------------------------- SIDEBAR GAUCHE -------------------------------------------------------------------------------- Card 1 "Thumbnail": - Zone dropzone pour image - Icône upload au centre - Texte: "Déposer fichier ou cliquer pour upload" - Texte aide: "Formats: png, jpg, jpeg" Card 2 "Status": - Titre avec indicateur point vert - Dropdown avec valeur "Nouveau" - Texte aide Card 3 "Détails Produit": - Label "Business" - Dropdown - Texte aide - Bouton "+ Créer nouveau business" - Label "Hub" - Dropdown - Texte aide Card 4 "Résumé Stock": - Ligne: "Quantité Initiale: 0" - Ligne: "Quantité Restante: 0" - Ligne: "Variantes: 0" -------------------------------------------------------------------------------- CONTENU PRINCIPAL DROITE -------------------------------------------------------------------------------- TABS en haut: [Informations] [Historique] -------------------------------------------------------------------------------- TAB 1 - INFORMATIONS -------------------------------------------------------------------------------- Card "Informations Générales": - Label "Nom Produit *" - Input text - Texte aide - Label "Description" - Textarea avec toolbar (Bold, Italic, Underline, Image, Code) - Texte aide Card "Type de Produit": - Titre "Type de Produit" - 2 boxes radio côte à côte: - Box 1: Radio + "Produit Simple" - Box 2: Radio + "Produit avec Variantes" Card "Stock Produit Simple": - Label "SKU *" - Input text - Texte aide - Label "Quantités" - 3 inputs côte à côte: - Input "Quantité Initiale" - Input "Quantité Alerte" - Input "Quantité Restante" - Texte aide Card "Variantes": - Titre "Variantes du Produit" Ligne variante 1: - Mini zone dropzone (petite, carrée) - Input "Nom variante" - Input "SKU" - Input "Qté Initiale" - Input "Qté Alerte" - Input "Qté Restante" - Bouton X rouge (supprimer) Ligne variante 2: - Mini zone dropzone (petite, carrée) - Input "Nom variante" - Input "SKU" - Input "Qté Initiale" - Input "Qté Alerte" - Input "Qté Restante" - Bouton X rouge (supprimer) Bouton "+ Ajouter une variante" -------------------------------------------------------------------------------- TAB 2 - HISTORIQUE -------------------------------------------------------------------------------- Card "Historique des Produits": - Titre "Historique du Business sélectionné" - Texte aide: "Affiche l'historique de tous les produits du business choisi" Table avec colonnes: - Date/Heure - Produit - Type opération - Quantité Ajoutée - Quantité Restante - Utilisateur Lignes exemple: - Ligne 1: 15/01/2024 10:30 | iPhone 15 Pro | Création | +50 | 50 | Client - Ligne 2: 14/01/2024 14:00 | Câble USB-C | Sortie | -10 | 90 | Client - Ligne 3: 13/01/2024 09:15 | Coque iPhone | Entrée | +25 | 75 | Client Pagination en bas de table -------------------------------------------------------------------------------- FOOTER ACTIONS (en bas) -------------------------------------------------------------------------------- - Bouton "Annuler" (gris/outline) - Bouton "Enregistrer" (bleu/primary)