Add summary section with product breakdown

- Show total volume, total amount, and average price per product
- Include grand total row
- Products sorted alphabetically

templates/customer.html

@@ -43,6 +43,40 @@
             font-size: 11px;
             color: #666;
         }
+        .summary {
+            background: #f5f5f5;
+            border: 1px solid #ccc;
+            padding: 12px;
+            margin-bottom: 15px;
+        }
+        .summary h2 {
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 5px;
+        }
+        .summary-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 11px;
+        }
+        .summary-table th, .summary-table td {
+            padding: 5px 8px;
+            text-align: left;
+        }
+        .summary-table th {
+            background: #e0e0e0;
+            font-weight: bold;
+        }
+        .summary-table td:not(:first-child),
+        .summary-table th:not(:first-child) {
+            text-align: right;
+        }
+        .grand-total-row td {
+            font-weight: bold;
+            border-top: 2px solid #333;
+            background: #f0f0f0;
+        }
         .card-section {
             margin-bottom: 15px;
             border: 1px solid #ccc;
@@ -111,6 +145,36 @@
         </div>
     </div>
 
+    <div class="summary">
+        <h2>Sammanfattning</h2>
+        <table class="summary-table">
+            <thead>
+                <tr>
+                    <th>Produkt</th>
+                    <th>Volym (L)</th>
+                    <th>Belopp</th>
+                    <th>Snittpris/L</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for product in customer.summary.products %}
+                <tr>
+                    <td>{{ product.name }}</td>
+                    <td>{{ product.volume }}</td>
+                    <td>{{ product.amount }} Kr</td>
+                    <td>{{ product.avg_price }} Kr</td>
+                </tr>
+                {% endfor %}
+                <tr class="grand-total-row">
+                    <td>Totalt</td>
+                    <td>{{ customer.summary.total_volume }}</td>
+                    <td>{{ customer.summary.grand_total }} Kr</td>
+                    <td></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
     {% for card in customer.cards %}
     <div class="card-section">
         <div class="card-header">
@@ -154,7 +218,7 @@
     {% endfor %}
 
     <div class="grand-total">
-        Totalsumma:<span>{{ customer.grand_total }} Kr</span>
+        Totalsumma:<span>{{ customer.summary.grand_total }} Kr</span>
     </div>
 </body>
 </html>