Créer un système complet de Gestion de Stock de produits pour clients avec React et Tailwind CSS natif. ================================================================================ ARCHITECTURE GÉNÉRALE ================================================================================ STATUTS STOCK: - "Nouveau" (bleu) : Produit vient d'être créé - "En stock" (vert) : Quantité Restante > Seuil Alerte - "Alerte" (orange) : Quantité Restante <= Seuil Alerte - "Rupture" (rouge) : Quantité Restante = 0 CHAMPS STOCK PRODUIT: - Quantité Initiale : Stock total depuis création - Quantité Alerte : Seuil déclencheur d'alerte - Quantité Restante : Stock disponible actuel CHAMPS HISTORIQUE: - Date/Heure - Type (Création/Entrée/Sortie/Ajustement) - Quantité Ajoutée (+XX ou -XX) - Quantité Restante Après opération - Motif - Utilisateur ================================================================================ PAGES ADMIN ================================================================================ PAGE 1 - LISTE DES CLIENTS -------------------------- HEADER STATISTIQUES (4 cards avec icônes animées): - Card 1: Nombre total de clients - Card 2: Clients avec stock actif (ex: "3 clients avec 4 produits") - Card 3: Clients avec alerte stock - Card 4: Total produits en stock Design: fond blanc, ombre, bordure gauche colorée, compteurs animés FILTRES: - Dropdown Région (avec recherche) - Dropdown Ville (dépendant région) - Dropdown Hub - Bouton réinitialiser - Toggle vue Card/Table VUE CARDS: - Grid responsive - Infos: Business (titre), Nom contact, Téléphone, Adresse, Badges (Région, Ville, Hub) - Badge nombre produits stock - Bouton "Voir Stock" - Hover effect, transitions VUE TABLE: - Colonnes: Business, Contact, Téléphone, Adresse, Région, Ville, Hub, Produits, Actions - Header sticky, pagination - Hover sur lignes ÉTAT VIDE: Illustration + message + suggestion filtres -------------------------------------------------------------------------------- PAGE 2 - STOCK D'UN CLIENT -------------------------- HEADER CLIENT (Présentation): - Bandeau gradient - Logo/Avatar client grand - Infos: Business (H1), Contact, Téléphone, Adresse - Badges: Région, Ville, Hub - Bouton retour CARDS STATISTIQUES (4 cards): - Quantité Initiale Totale - Quantité Restante Totale (progress bar) - Produits en Alerte - Taux de Retour (%) BARRE D'ACTIONS: - Bouton "Ajouter Nouveau Produit Stock" (primary, icône +) - Toggle Card/Table - Filtres: Business, Hub, DateTimePicker (plage dates), Recherche nom/référence VUE CARDS PRODUITS (grid 3 colonnes desktop): Chaque card: - Logo produit - Nom (titre), Référence (sous-titre) - Badges: Business, Hub SI PAS DE VARIANTE: - Quantité Initiale: XX - Quantité Restante: XX (progress bar colorée) - Seuil Alerte: XX SI VARIANTES: - Badge "X variantes" (pas de détails quantités) - Badge statut (Nouveau/En stock/Alerte/Rupture) - Bouton "Voir détails" VUE TABLE: - Colonnes: Logo, Nom, Référence, Business, Hub, Qté Init, Qté Rest, Alerte, Variantes, Statut, Actions ÉTAT VIDE: Illustration + CTA "Ajouter premier produit" ANIMATIONS: Fade in scroll, hover lift, skeleton loading -------------------------------------------------------------------------------- PAGE 3 - DÉTAILS PRODUIT STOCK ------------------------------ HEADER: - Breadcrumb: Clients > [Client] > [Produit] - Titre produit - Badge statut global - Boutons: Modifier, Supprimer, Retour ONGLETS: - Tab 1: "Informations Générales" - Tab 2: "Historique du Stock" TAB 1 - INFORMATIONS GÉNÉRALES (2 colonnes col-6): CARD GAUCHE - Infos Produit: - Logo grand (zoom hover) - Nom, Référence, Business (badge), Hub (badge), Type - Description CARD DROITE - Détails Stock: SI PAS DE VARIANTES: Titre "Détails du Stock": - Quantité Initiale - Quantité Restante (progress bar animée) - Seuil Alerte (rouge si atteint) - Description Progress bar: Vert >50%, Orange entre alerte et 50%, Rouge <=alerte SI VARIANTES: Titre "Variantes (X)": Toggle Card/Table TABLE: | Logo | Variante | SKU | Qté Initiale | Qté Restante | Seuil Alerte | Statut | - Progress bar par variante - Badge statut par variante CARDS: - Mini cards avec logo, nom, SKU - Qté Initiale, Qté Restante (progress), Alerte - Badge statut TAB 2 - HISTORIQUE: SI PAS DE VARIANTES: Timeline verticale: - Date/Heure - Type opération - Quantité Ajoutée (+/-XX) - Quantité Restante Après - Motif, Utilisateur - Filtres: Type, Plage dates - Pagination SI VARIANTES: - Dropdown filtre par variante (+ "Toutes") - Même timeline avec badge variante sur chaque entrée ANIMATIONS: Progress bars animées, compteurs count-up, transitions tabs, tooltips ================================================================================ PAGES CLIENT ================================================================================ PAGE 1 - MES PRODUITS EN STOCK (Client) --------------------------------------- IDENTIQUE à Page 2 Admin avec: HEADER: - "Bienvenue, [Business]" - "Gérez votre inventaire" STATISTIQUES: Mêmes 4 cards ACTIONS: - Bouton "Ajouter Nouveau Stock" - Mêmes filtres et toggles AFFICHAGE: Même structure, mêmes infos (Qté Init, Qté Rest, Alerte, statuts) -------------------------------------------------------------------------------- PAGE 2 - DÉTAILS PRODUIT (Client) --------------------------------- IDENTIQUE à Page 3 Admin avec: ACTIONS LIMITÉES: - Pas de Modifier/Supprimer - Bouton "Ajouter au Stock" (réapprovisionnement) - Bouton Retour CONTENU: Mêmes tabs, mêmes infos, historique lecture seule -------------------------------------------------------------------------------- PAGE 3 - AJOUTER NOUVEAU STOCK (Client) --------------------------------------- HEADER: - Titre: "Ajouter un Nouveau Produit au Stock" - Bouton retour FORMULAIRE: SECTION 1 - Infos de base: - Dropdown Business (required, recherche) - Input Nom produit (required) - Input SKU/Référence (required) - Textarea Description - Dropdown Hub (required) SECTION 2 - Type produit: Radio buttons stylisés (cards cliquables): - "Produit Simple" (icône box) - "Produit avec Variantes" (icône boxes) SI PRODUIT SIMPLE: SECTION MEDIA: - Dropzone logo (JPG/PNG, max 2MB) - Preview + bouton supprimer SECTION QUANTITÉS: - Input "Quantité Initiale" (number, required) - Input "Quantité Alerte" (number, required) - Input "Quantité Restante" (number, required) CARD RÉSUMÉ temps réel: - Stock Initial: XX, Alerte: XX, Disponible: XX - Progress bar preview - Badge "Nouveau" SI VARIANTES: SECTION MEDIA: - Dropzone logo principal SECTION VARIANTES: Pour chaque variante: - Mini Dropzone logo variante - Input Nom variante (required) - Input SKU (required) - Input Quantité Initiale (required) - Input Quantité Alerte (required) - Input Quantité Restante (required) - Bouton Supprimer (trash rouge, désactivé si 1 seule) - Bouton "Ajouter une variante" (icône +) - Minimum 1 variante CARD RÉSUMÉ: - Variantes: X - Qté totale initiale: XX - Qté totale restante: XX - Statut: Nouveau ACTIONS: - Annuler (secondary) - Enregistrer (primary) - Loading state VALIDATIONS: - Required marqués * - Qté Restante <= Qté Initiale - Qté Alerte < Qté Initiale - SKU unique - Erreurs inline rouges APRÈS ENREGISTREMENT: - Statut "Nouveau" - Entrée historique: Type "Création", Qté ajoutée = Qté Initiale - Redirect vers liste stock - Toast succès ================================================================================ STYLE GLOBAL ================================================================================ TAILWIND CSS NATIF: - Couleurs: bleu (primary), gris (secondary), vert/orange/rouge (statuts) - Ombres: shadow-sm, shadow-md - Bordures: rounded-lg, rounded-xl - Espacement: p-4, p-6, gap-4 - Focus: ring-2 ring-blue-500 - Transitions: transition-all duration-300 COMPOSANTS: - Cards: bg-white rounded-xl shadow-md p-6 - Badges: px-3 py-1 rounded-full text-sm font-medium - Buttons: px-4 py-2 rounded-lg font-medium - Inputs: w-full px-4 py-2 border rounded-lg focus:ring-2 - Dropzone: border-2 border-dashed rounded-lg p-8 ANIMATIONS: - Hover lift: hover:-translate-y-1 hover:shadow-lg - Fade in: animate-fadeIn - Progress bars animées - Compteurs count-up - Skeleton loading - Toast notifications RESPONSIVE: - Mobile-first - Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 - Stack vertical mobile, colonnes desktop ================================================================================ DONNÉES EXEMPLE ================================================================================ CLIENTS: [ { id: 1, business: "TechStore Pro", nom: "Ahmed Benali", telephone: "+212 6XX XXX XXX", adresse: "123 Rue Mohammed V", region: "Casablanca-Settat", ville: "Casablanca", hub: "Hub Central", produitsStock: 4 } ] PRODUITS: [ { id: 1, nom: "iPhone 15 Pro", reference: "IPH15P-001", logo: "url", business: "Apple Store", hub: "Hub Central", hasVariants: true, nombreVariants: 3, statut: "en_stock", variantes: [ { id: 1, nom: "128GB - Noir", sku: "IPH15P-128-BLK", logo: "url", quantiteInitiale: 50, quantiteRestante: 35, quantiteAlerte: 10, statut: "en_stock" } ] }, { id: 2, nom: "Câble USB-C", reference: "CAB-USBC-01", logo: "url", business: "Accessoires", hub: "Hub Nord", hasVariants: false, quantiteInitiale: 100, quantiteRestante: 25, quantiteAlerte: 20, statut: "alerte" } ] HISTORIQUE: [ { id: 1, produitId: 1, varianteId: 1, varianteNom: "128GB - Noir", date: "2024-01-15T10:30:00", type: "sortie", quantiteAjoutee: -5, quantiteRestanteApres: 35, motif: "Vente client", utilisateur: "Admin" } ] FILTRES: { regions: ["Casablanca-Settat", "Rabat-Salé-Kénitra", ...], villes: { "Casablanca-Settat": ["Casablanca", "Mohammedia", ...] }, hubs: ["Hub Central", "Hub Nord", "Hub Sud"], businesses: ["Apple Store", "Samsung", "Accessoires"] }