webshop/shop/components/invoice-pdf.tsx

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: {

    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>
);