Add detailed logging for debugging task display issues

Adds console logs within the Avoirs component to help diagnose rendering problems by logging individual avoir data and potential errors during the rendering process.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9fcf4b21-eb0c-4e53-a567-e2ce4a6ad869
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/9fcf4b21-eb0c-4e53-a567-e2ce4a6ad869/H30E1Dv

client/src/pages/Avoirs.tsx

@@ -425,6 +425,20 @@ export default function Avoirs() {
     }
   };
 
+  // Debug: Log des avoirs reçus
+  useEffect(() => {
+    console.log('💰 Debug avoirs reçus:', { 
+      count: avoirs?.length || 0,
+      first: avoirs?.[0] ? {
+        id: avoirs[0].id,
+        keys: Object.keys(avoirs[0]),
+        hasSupplier: !!avoirs[0].supplier,
+        hasGroup: !!avoirs[0].group,
+        hasCreator: !!avoirs[0].creator
+      } : null
+    });
+  }, [avoirs]);
+
   // 🔍 FONCTION DE VÉRIFICATION DE FACTURE (comme rapprochement)
   const verifyAvoirInvoiceMutation = useMutation({
     mutationFn: async ({ avoirId, invoiceReference, forceRefresh }: { avoirId: number; invoiceReference?: string; forceRefresh?: boolean }) => {
@@ -1041,9 +1055,20 @@ export default function Avoirs() {
               </thead>
               <tbody className="bg-white divide-y divide-gray-200">
                 {filteredAvoirs?.filter(avoir => avoir && avoir.id).map((avoir) => {
-                  const canEditDelete = ['admin', 'directeur'].includes((user as any)?.role);
-                  
-                  return (
+                  try {
+                    // Debug: Log de l'avoir pour identifier le problème
+                    console.log('🔍 Render avoir:', { 
+                      id: avoir?.id, 
+                      hasSupplier: !!avoir?.supplier,
+                      hasGroup: !!avoir?.group,
+                      hasCreator: !!avoir?.creator,
+                      createdAt: avoir?.createdAt,
+                      status: avoir?.status 
+                    });
+                    
+                    const canEditDelete = ['admin', 'directeur'].includes((user as any)?.role);
+                    
+                    return (
                     <tr key={avoir?.id || Math.random()} className={`hover:bg-gray-50 ${avoir?.nocodbVerified ? 'bg-gray-100 opacity-75' : ''}`}>
                       <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                         {avoir.supplier?.name || 'Fournisseur non défini'}
@@ -1199,6 +1224,16 @@ export default function Avoirs() {
                       </td>
                     </tr>
                   );
+                  } catch (renderError) {
+                    console.error('❌ Erreur rendu avoir:', renderError, avoir);
+                    return (
+                      <tr key={avoir?.id || Math.random()} className="bg-red-50">
+                        <td colSpan={8} className="px-6 py-4 text-center text-red-600">
+                          Erreur d'affichage de l'avoir #{avoir?.id || 'inconnu'}
+                        </td>
+                      </tr>
+                    );
+                  }
                 })}
               </tbody>
             </table>