feat: add automated PDF invoice generation and storage in Supabase

shop/components/invoice-pdf.tsx

@@ -0,0 +1,168 @@
+import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer';
+
+// Create styles
+const styles = StyleSheet.create({
+  page: {
+    padding: 50,
+    fontSize: 10,
+    color: '#333',
+    fontFamily: 'Helvetica',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 40,
+  },
+  companyInfo: {
+    textAlign: 'right',
+  },
+  title: {
+    fontSize: 24,
+    color: '#000',
+    marginBottom: 20,
+  },
+  section: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 8,
+    color: '#999',
+    textTransform: 'uppercase',
+    marginBottom: 2,
+  },
+  table: {
+    display: 'table',
+    width: 'auto',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: '#eee',
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    marginBottom: 20,
+  },
+  tableRow: {
+    margin: 'auto',
+    flexDirection: 'row',
+  },
+  tableCol: {
+    width: '60%',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: '#eee',
+    borderLeftWidth: 0,
+    borderTopWidth: 0,
+    padding: 8,
+  },
+  tableColPrice: {
+    width: '40%',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: '#eee',
+    borderLeftWidth: 0,
+    borderTopWidth: 0,
+    padding: 8,
+    textAlign: 'right',
+  },
+  tableCell: {
+    margin: 'auto',
+    marginTop: 5,
+    fontSize: 10,
+  },
+  total: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 20,
+    borderTop: 1,
+    borderColor: '#000',
+    paddingTop: 10,
+  },
+  totalLabel: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 30,
+    left: 50,
+    right: 50,
+    textAlign: 'center',
+    color: '#999',
+    fontSize: 8,
+    borderTop: 1,
+    borderColor: '#eee',
+    paddingTop: 10,
+  },
+});
+
+export const InvoicePDF = ({ order, product, modules, customer }: any) => (
+  <Document>
+    <Page size="A4" style={styles.page}>
+      <View style={styles.header}>
+        <View>
+          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>CASPOS</Text>
+          <Text>Software Solutions</Text>
+        </View>
+        <View style={styles.companyInfo}>
+          <Text>CASPOS GmbH</Text>
+          <Text>Musterstraße 1</Text>
+          <Text>12345 Musterstadt</Text>
+          <Text>Deutschland</Text>
+        </View>
+      </View>
+
+      <Text style={styles.title}>Bestellbestätigung / Rechnung</Text>
+
+      <View style={styles.section}>
+        <Text style={styles.label}>Rechnungsempfänger</Text>
+        <Text>{customer.company_name}</Text>
+        <Text>{customer.first_name} {customer.last_name}</Text>
+        <Text>{customer.address}</Text>
+        <Text>{customer.zip_code} {customer.city}</Text>
+        <Text>USt-IdNr: {customer.vat_id}</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.label}>Bestelldetails</Text>
+        <Text>Bestellnummer: {order.id}</Text>
+        <Text>Datum: {new Date().toLocaleDateString('de-DE')}</Text>
+      </View>
+
+      <View style={styles.table}>
+        <View style={[styles.tableRow, { backgroundColor: '#f9f9f9' }]}>
+          <View style={styles.tableCol}><Text style={{ fontWeight: 'bold' }}>Beschreibung</Text></View>
+          <View style={styles.tableColPrice}><Text style={{ fontWeight: 'bold' }}>Preis (mtl.)</Text></View>
+        </View>
+        
+        <View style={styles.tableRow}>
+          <View style={styles.tableCol}><Text>{product.name} (Basispaket)</Text></View>
+          <View style={styles.tableColPrice}><Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}</Text></View>
+        </View>
+
+        {modules.map((mod: any) => (
+          <View key={mod.id} style={styles.tableRow}>
+            <View style={styles.tableCol}><Text>{mod.name}</Text></View>
+            <View style={styles.tableColPrice}><Text>+{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.additional_price)}</Text></View>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.total}>
+        <View style={{ width: '40%' }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <Text>Zwischensumme:</Text>
+            <Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_amount)}</Text>
+          </View>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+            <Text style={styles.totalLabel}>Gesamtbetrag:</Text>
+            <Text style={styles.totalLabel}>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_amount)}</Text>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <Text>Vielen Dank für Ihre Bestellung!</Text>
+        <Text>Dies ist ein automatisch generiertes Dokument.</Text>
+      </View>
+    </Page>
+  </Document>
+);