Improve visibility and debugging for order validation functionality

Add temporary debug logs and visible indicators to the CalendarGrid component to diagnose why the order validation button is not appearing for admins, and also include a direct SQL fix for CMD-55 status. Replit-Commit-Author: Agent Replit-Commit-Session-Id: a8a78c07-e900-425c-a577-5b4c5894379d Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/a8a78c07-e900-425c-a577-5b4c5894379d/3ec1Xks
2026-10-12 01:37:40 +02:00 · 2025-08-11 21:05:47 +00:00
1 parent a8ff4c0c73
commit 95823a90c3
@@ -0,0 +1,55 @@
+# Debug - Bouton de Validation Non Visible
+
+## Modifications de Debug Ajoutées
+
+J'ai ajouté du code de debug temporaire pour identifier pourquoi le bouton de validation n'est pas visible :
+
+### 1. Informations Utilisateur
+Un petit texte rouge s'affiche au-dessus de la première commande montrant :
+- Le rôle de l'utilisateur connecté
+- Le statut de cette commande
+
+### 2. Bouton de Validation en Rouge
+Le bouton de validation est maintenant **TOUJOURS VISIBLE** avec un fond rouge vif au lieu d'être masqué
+
+### 3. Indicateur de Test Jaune
+Un petit "V" jaune apparaît sur toutes les commandes non-delivered pour confirmer que la condition fonctionne
+
+### 4. Logs de Debug
+Quand vous cliquez sur le bouton, des logs détaillés s'affichent dans la console
+
+## Comment Diagnostiquer
+
+1. **Ouvrez la console du navigateur** (F12)
+2. **Connectez-vous en admin** sur votre serveur de production
+3. **Allez au calendrier** et regardez :
+   - Le texte rouge au-dessus de la première commande (rôle utilisateur)
+   - Les petits "V" jaunes sur les commandes non-delivered
+   - Le bouton rouge de validation s'il apparaît
+
+4. **Testez le bouton rouge** et vérifiez les logs dans la console
+
+## Résultats Possibles
+
+### Si vous voyez le texte rouge "User: admin"
+✅ L'utilisateur est bien connecté en admin
+
+### Si vous voyez le texte rouge "User: null" ou autre
+❌ Problème de connexion admin ou de passage des props
+
+### Si vous voyez les "V" jaunes mais pas le bouton rouge
+❌ Problème avec la condition `user?.role === 'admin'`
+
+### Si vous ne voyez rien du tout
+❌ Le code n'a pas été déployé correctement sur le serveur
+
+## Prochaines Étapes
+
+Une fois le diagnostic fait, je pourrai :
+1. Corriger le problème identifié
+2. Retirer le code de debug
+3. Remettre le bouton normal qui apparaît au survol
+
+---
+
+**Important** : Ce code de debug est temporaire et très visible. Il faut le retirer une fois le problème résolu.
@@ -1,71 +1,197 @@
-# CORRECTION URGENTE CMD-55 - Production
+# URGENT - Correction CMD-55 et Déploiement Bouton Validation

-## Problème
-CMD-55 n'apparaît pas en gris dans le calendrier malgré ses livraisons validées.
+## Problèmes Identifiés en Production

-## Solution Immédiate
+### 1. Erreur de Modification de Commande 
+- **Symptôme** : Toast rouge "Impossible de modifier la commande" 
+- **Cause Probable** : Problème de validation ou de permission sur le serveur
+- **Impact** : Les utilisateurs ne peuvent pas modifier les commandes existantes

-### Option 1 : Correction SQL Directe (Recommandée)
+### 2. Bouton de Validation Manquant
+- **Symptôme** : Pas de bouton "Valider Commande" visible sur les cartes
+- **Cause** : Modifications récentes non déployées sur le serveur de production
+- **Impact** : Impossible de valider CMD-55 directement depuis le calendrier

-Exécutez ce script SQL directement sur votre base de données de production :
+## Solutions Immédiates
+
+### A. Pour le Problème CMD-55 - Solution SQL Directe
+
+Si vous avez accès à votre base de données PostgreSQL en production, exécutez cette commande SQL immédiatement :

 ```sql
-- Corriger CMD-55 immédiatement
 UPDATE orders 
-SET status = 'delivered'
-WHERE id = 55 
-  AND status != 'delivered'
-  AND EXISTS (
-    SELECT 1 FROM deliveries d 
-    WHERE d."orderId" = 55 
-    AND d.status = 'delivered'
-  );
+SET status = 'delivered', updated_at = NOW() 
+WHERE id = 55;
 ```

-### Option 2 : Script Complet
+Cette commande marquera directement CMD-55 comme "delivered" dans la base de données.

-Utilisez le fichier `fix-cmd-55-immediate.sql` qui contient :
- Diagnostic de CMD-55
- Correction de CMD-55
- Correction de toutes les autres commandes similaires
- Vérification des résultats
+### B. Déploiement du Bouton de Validation

-### Option 3 : Via l'API (Si accessible)
+#### Fichiers à Modifier sur Votre Serveur de Production :
+
+1. **`client/src/components/CalendarGrid.tsx`** - Remplacer tout le contenu par :
+```typescript
+import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, isToday } from "date-fns";
+import { fr } from "date-fns/locale";
+import { safeDate } from "@/lib/dateUtils";
+import { Plus, Check, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import type { OrderWithRelations, DeliveryWithRelations } from "@shared/schema";
+
+interface CalendarGridProps {
+  currentDate: Date;
+  orders: OrderWithRelations[];
+  deliveries: DeliveryWithRelations[];
+  onDateClick: (date: Date) => void;
+  onItemClick: (item: any, type: 'order' | 'delivery') => void;
+  user?: { role: string } | null;
+  onOrderValidated?: () => void;
+}
+
+export default function CalendarGrid({
+  currentDate,
+  orders,
+  deliveries,
+  onDateClick,
+  onItemClick,
+  user,
+  onOrderValidated,
+}: CalendarGridProps) {
+  const { toast } = useToast();
+
+  // Fonction pour valider une commande
+  const handleValidateOrder = async (orderId: number, event: React.MouseEvent) => {
+    event.stopPropagation();
+    
+    try {
+      const response = await fetch(`/api/orders/${orderId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ status: 'delivered' })
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Erreur ${response.status}: ${await response.text()}`);
+      }
+      
+      toast({
+        title: "Commande validée",
+        description: `La commande CMD-${orderId} a été marquée comme livrée.`,
+      });
+      
+      // Rafraîchir les données
+      if (onOrderValidated) {
+        onOrderValidated();
+      }
+    } catch (error) {
+      console.error('Erreur lors de la validation:', error);
+      toast({
+        title: "Erreur",
+        description: "Impossible de valider la commande.",
+        variant: "destructive"
+      });
+    }
+  };
+
+  // ... (rest of your existing CalendarGrid code)
+  // IMPORTANT: Dans la section qui affiche les cartes de commandes, 
+  // ajoutez le bouton de validation avant les autres icônes :
+
+  {/* Bouton de validation pour les admins si la commande n'est pas delivered */}
+  {user?.role === 'admin' && order.status !== 'delivered' && (
+    <Button
+      size="sm"
+      variant="ghost"
+      className="h-5 w-5 p-0 hover:bg-white/20 opacity-0 group-hover/order:opacity-100 transition-opacity mr-1"
+      onClick={(e) => handleValidateOrder(order.id, e)}
+      title="Valider la commande"
+    >
+      <CheckCircle className="w-3 h-3 text-green-200" />
+    </Button>
+  )}
+```
+
+2. **`client/src/pages/Calendar.tsx`** - Modifier l'appel à CalendarGrid :
+```typescript
+<CalendarGrid
+  currentDate={currentDate}
+  orders={orders}
+  deliveries={deliveries}
+  onDateClick={handleDateClick}
+  onItemClick={handleItemClick}
+  user={user}
+  onOrderValidated={() => {
+    queryClient.invalidateQueries({ queryKey: ['/api/orders'] });
+    queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+  }}
+/>
+```
+
+#### Commandes de Déploiement :

 ```bash
-curl -X PUT "http://votre-serveur.com/api/orders/55" \
-  -H "Content-Type: application/json" \
-  -H "Cookie: votre-session-cookie" \
-  -d '{"status": "delivered"}'
+# 1. Sauvegarde
+cp -r client/src client/src.backup
+
+# 2. Appliquer les modifications aux fichiers mentionnés ci-dessus
+
+# 3. Reconstruction
+npm run build
+
+# 4. Redémarrage
+pm2 restart your-app-name
+# OU
+sudo systemctl restart your-service
+# OU  
+docker-compose restart
 ```

-## Vérification
+### C. Correction de l'Erreur de Modification

-Après correction, CMD-55 devrait :
-1. Avoir le statut "delivered" dans la base
-2. Apparaître en gris dans le calendrier
-3. Afficher "Date de livraison" au lieu de "Date prévue"
+Si l'erreur de modification persiste, ajoutez ces logs de debug dans votre `server/routes.ts` :

-## Connection à votre Base
+```javascript
+app.put('/api/orders/:id', isAuthenticated, async (req: any, res) => {
+  try {
+    console.log('🔧 [DEBUG] Order update request:', {
+      orderId: req.params.id,
+      body: req.body,
+      userId: req.user?.id || req.user?.claims?.sub
+    });
+    
+    // ... rest of existing code
+    
+  } catch (error) {
+    console.error("❌ [ERROR] Order update failed:", {
+      error: error.message,
+      stack: error.stack,
+      orderId: req.params.id,
+      body: req.body
+    });
+    res.status(500).json({ message: "Failed to update order" });
+  }
+});
+```
+
+## Test après Déploiement
+
+1. **Connectez-vous** avec un compte admin
+2. **Recherchez CMD-55** dans le calendrier
+3. **Passez la souris** sur la carte CMD-55
+4. **Cliquez** sur l'icône de cercle avec coche qui apparaît
+5. **Vérifiez** que CMD-55 passe en gris (delivered)
+
+## Rollback si Problème

 ```bash
-# PostgreSQL
-psql -h votre-host -U votre-user -d votre-database
-
-# Puis exécuter le script
-\i fix-cmd-55-immediate.sql
+cp -r client/src.backup client/src
+npm run build
+pm2 restart your-app-name
 ```

-## Résultat Attendu
-
-Après exécution, vous devriez voir :
-```
-UPDATE 1  -- CMD-55 corrigée
-UPDATE X  -- X autres commandes corrigées
-```
-
-CMD-55 apparaîtra alors immédiatement en gris dans votre calendrier de production.
-
 ---

-**Note**: Cette correction est immédiate et ne nécessite pas de redémarrage du serveur.
+**Priorité** : Appliquer la solution SQL directe (section A) immédiatement pour résoudre CMD-55, puis déployer le bouton de validation (section B) pour éviter les futurs problèmes similaires.
@@ -64,6 +64,8 @@ export default function CalendarGrid({
  const handleValidateOrder = async (orderId: number, event: React.MouseEvent) => {
    event.stopPropagation();
    
+    console.log('🔥 DEBUG: Validation clicked for order', orderId, 'User role:', user?.role);
+    
    try {
      const response = await fetch(`/api/orders/${orderId}`, {
        method: 'PUT',
@@ -72,8 +74,12 @@ export default function CalendarGrid({
        body: JSON.stringify({ status: 'delivered' })
      });
      
+      console.log('🔥 DEBUG: Response status:', response.status);
+      
      if (!response.ok) {
-        throw new Error(`Erreur ${response.status}: ${await response.text()}`);
+        const errorText = await response.text();
+        console.error('🔥 DEBUG: Response error:', errorText);
+        throw new Error(`Erreur ${response.status}: ${errorText}`);
      }
      
      toast({
@@ -86,7 +92,7 @@ export default function CalendarGrid({
        onOrderValidated();
      }
    } catch (error) {
-      console.error('Erreur lors de la validation:', error);
+      console.error('🔥 DEBUG: Validation error:', error);
      toast({
        title: "Erreur",
        description: "Impossible de valider la commande.",
@@ -227,19 +233,33 @@ export default function CalendarGrid({
                          {order.supplier.name}
                        </span>
                        <div className="flex items-center ml-1 flex-shrink-0">
-                          {/* Bouton de validation pour les admins si la commande n'est pas delivered */}
+                          {/* DEBUG: Affichage info utilisateur sur première commande */}
+                          {order.id === orders[0]?.id && (
+                            <div className="text-[8px] text-red-500 absolute -top-4 -left-2 bg-white px-1 rounded z-10">
+                              User: {user?.role || 'null'} | Status: {order.status}
+                            </div>
+                          )}
+                          
+                          {/* Bouton de validation pour les admins - VERSION VISIBLE POUR DEBUG */}
                          {user?.role === 'admin' && order.status !== 'delivered' && (
                            <Button
                              size="sm"
                              variant="ghost"
-                              className="h-5 w-5 p-0 hover:bg-white/20 opacity-0 group-hover/order:opacity-100 transition-opacity mr-1"
+                              className="h-5 w-5 p-0 bg-red-500 hover:bg-red-600 mr-1"
                              onClick={(e) => handleValidateOrder(order.id, e)}
                              title="Valider la commande"
                            >
-                              <CheckCircle className="w-3 h-3 text-green-200" />
+                              <CheckCircle className="w-3 h-3 text-white" />
                            </Button>
                          )}
                          
+                          {/* Bouton de test TOUJOURS VISIBLE */}
+                          {order.status !== 'delivered' && (
+                            <div className="text-[8px] bg-yellow-300 text-black px-1 rounded mr-1">
+                              V
+                            </div>
+                          )}
+                          
                          {order.status === 'planned' && (
                            <span className="w-2 h-2 bg-yellow-300 mr-1" title="Commande planifiée (liée à une livraison)" />
                          )}