feat: group items by device name in pdf quotation confirmation

shop/app/actions/checkout.ts

@@ -149,7 +149,11 @@ export async function checkoutAction(params: {
         type === 'purchase' ? 'one_time' : 'monthly',
         item.moduleQuantities
       );
-      orderItemsList.push(...itemSnapshot.items);
+      const itemsWithDevice = itemSnapshot.items.map(i => ({
+        ...i,
+        device_name: item.deviceName
+      }));
+      orderItemsList.push(...itemsWithDevice);
       total += itemSnapshot.total;
     }
 

shop/components/invoice-pdf.tsx

@@ -106,6 +106,15 @@ export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
   const formattedPrice = (val: number) =>
     new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val);
 
+  const groupedItems: { [key: string]: any[] } = {};
+  items.forEach((item: any) => {
+    const devName = item.device_name || 'Kasse 1';
+    if (!groupedItems[devName]) {
+      groupedItems[devName] = [];
+    }
+    groupedItems[devName].push(item);
+  });
+
   return (
     <Document>
       <Page size="A4" style={styles.page}>
@@ -148,7 +157,12 @@ export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
             <View style={styles.tableColPrice}><Text style={{ fontWeight: 'bold' }}>Preis (netto)</Text></View>
           </View>
 
-          {items.map((item: any, idx: number) => (
+          {Object.entries(groupedItems).map(([deviceName, devItems], groupIdx) => (
+            <View key={groupIdx} style={{ marginBottom: 6 }}>
+              <View style={{ backgroundColor: '#f1f5f9', padding: '4 8', marginTop: 6, borderBottomWidth: 1, borderBottomColor: '#cbd5e1' }}>
+                <Text style={{ fontSize: 9, fontWeight: 'bold', color: '#1e293b' }}>Gerät: {deviceName}</Text>
+              </View>
+              {devItems.map((item: any, idx: number) => (
                 <View key={idx}>
                   <View style={styles.tableRow}>
                     <View style={styles.tableCol}>
@@ -181,6 +195,8 @@ export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
                 </View>
               ))}
             </View>
+          ))}
+        </View>
 
         <View style={styles.total}>
           <View style={{ width: '70%' }}>