Display all product details for sales in history

Modify the sales history component to correctly display the type, category, and quantity for each product within a sale, and update the storage to return sales with their associated products.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: a388004f-01c5-42b1-b1d1-f18daf8bdd0c
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/a388004f-01c5-42b1-b1d1-f18daf8bdd0c/pSitqax

client/src/components/SalesHistory.tsx

@@ -554,15 +554,47 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
                         <span>{sale.nom} {sale.prenom}</span>
                       </div>
                     </td>
-                    <td className="text-sm">{sale.typeArticle}</td>
+                    <td className="text-sm">
+                      {sale.products && sale.products.length > 0 ? (
+                        <div className="space-y-1">
+                          {sale.products.map((product, index) => (
+                            <div key={index} className="text-xs">
+                              {product.typeArticle}
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-gray-400">-</span>
+                      )}
+                    </td>
                     <td>
-                      <span className={`modern-badge ${
+                      {sale.products && sale.products.length > 0 ? (
-                        sale.categorie === 'F3' ? 'badge-destructive' : 'badge-secondary'
+                        <div className="space-y-1">
-                      }`}>
+                          {sale.products.map((product, index) => (
-                        {sale.categorie}
+                            <span key={index} className={`modern-badge block ${
-                      </span>
+                              product.categorie === 'F3' || product.categorie === 'F4' ? 'badge-destructive' : 'badge-secondary'
+                            }`}>
+                              {product.categorie}
+                            </span>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-gray-400">-</span>
+                      )}
+                    </td>
+                    <td className="text-center">
+                      {sale.products && sale.products.length > 0 ? (
+                        <div className="space-y-1">
+                          {sale.products.map((product, index) => (
+                            <div key={index} className="text-xs">
+                              {product.quantite}
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-gray-400">-</span>
+                      )}
                     </td>
-                    <td className="text-center">{sale.quantite}</td>
                     <td className="text-sm">{sale.modePaiement}</td>
                     <td>
                       <div className="flex items-center gap-2">

server/storage.ts

@@ -520,7 +520,7 @@ class MemStorage implements IStorage {
     return newSale;
   }
 
-  async getSalesByStore(storeId: number, startDate?: string, endDate?: string): Promise<Sale[]> {
+  async getSalesByStore(storeId: number, startDate?: string, endDate?: string): Promise<(Sale & { products: SaleProduct[] })[]> {
     let filteredSales = this.sales.filter(s => s.storeId === storeId);
     
     if (startDate) {
@@ -534,7 +534,13 @@ class MemStorage implements IStorage {
       filteredSales = filteredSales.filter(s => s.timestamp && s.timestamp <= end);
     }
     
-    return filteredSales.sort((a, b) => (b.timestamp?.getTime() || 0) - (a.timestamp?.getTime() || 0));
+    // Add products to each sale
+    const salesWithProducts = filteredSales.map(sale => ({
+      ...sale,
+      products: this.saleProducts.filter(p => p.saleId === sale.id)
+    }));
+    
+    return salesWithProducts.sort((a, b) => (b.timestamp?.getTime() || 0) - (a.timestamp?.getTime() || 0));
   }
 
   async getSaleWithProducts(id: number): Promise<(Sale & { products: SaleProduct[] }) | undefined> {