Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: design-beautify of device sections in quotation confirmation pdf
All checks were successful
Staging Build / build (push) Successful in 2m49s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-10 00:10:45 +02:00
parent 3b16722fca
commit 90a5e17f2b
1 changed files with 21 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
shop/components/invoice-pdf.tsx
View File

@@ -171,44 +171,35 @@ export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
<Text>Datum: {new Date(order.created_at || Date.now()).toLocaleDateString('de-DE')}</Text> <Text>Datum: {new Date(order.created_at || Date.now()).toLocaleDateString('de-DE')}</Text>
</View> </View>
<View style={styles.table}> <View style={{ marginTop: 10, marginBottom: 15 }}>
<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 (netto)</Text></View>
</View>
{Object.entries(groupedItems).map(([deviceName, devItems], groupIdx) => ( {Object.entries(groupedItems).map(([deviceName, devItems], groupIdx) => (
<View key={groupIdx} style={{ marginBottom: 6 }}> <View key={groupIdx} style={{ marginBottom: 12, borderWidth: 1, borderColor: '#e2e8f0', borderRadius: 4, padding: 8, backgroundColor: '#f8fafc' }}>
<View style={{ backgroundColor: '#f1f5f9', padding: '4 8', marginTop: 6, borderBottomWidth: 1, borderBottomColor: '#cbd5e1' }}> <View style={{ borderBottomWidth: 1, borderBottomColor: '#cbd5e1', paddingBottom: 4, marginBottom: 6 }}>
<Text style={{ fontSize: 9, fontWeight: 'bold', color: '#1e293b' }}>Gerät: {deviceName}</Text> <Text style={{ fontSize: 10, fontWeight: 'bold', color: '#1e3a8a' }}>
Gerät: {deviceName}
</Text>
</View> </View>
{devItems.map((item: any, idx: number) => ( {devItems.map((item: any, idx: number) => (
<View key={idx}> <View key={idx} style={{ marginBottom: 6 }}>
<View style={styles.tableRow}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 2 }}>
<View style={styles.tableCol}> <Text style={{ fontSize: 9, fontWeight: 'bold', color: '#334155' }}>
<Text style={{ fontWeight: 'bold' }}>{item.product_name} ({item.category_name})</Text> {item.product_name} ({item.category_name})
</View> </Text>
<View style={styles.tableColPrice}> <Text style={{ fontSize: 9, fontWeight: 'bold', color: '#0f172a' }}>
<Text> {formattedPrice(item.base_price)} {item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}
{formattedPrice(item.base_price)} {item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'} </Text>
</Text>
</View>
</View> </View>
{item.selected_modules?.map((mod: any, mIdx: number) => { {item.selected_modules?.map((mod: any, mIdx: number) => {
const qty = mod.quantity || 1; const qty = mod.quantity || 1;
const price = mod.total_price ?? (mod.price * qty); const price = mod.total_price ?? (mod.price * qty);
return ( return (
<View key={mIdx} style={styles.tableRow}> <View key={mIdx} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingLeft: 12, marginBottom: 1 }}>
<View style={[styles.tableCol, { paddingLeft: 20 }]}> <Text style={{ fontSize: 8, color: '#64748b' }}>
<Text style={{ color: '#666' }}> + {mod.module_name} {qty > 1 ? `(x${qty})` : ''}
+ {mod.module_name} {qty > 1 ? `(x${qty})` : ''} </Text>
</Text> <Text style={{ fontSize: 8, color: '#64748b' }}>
</View> +{formattedPrice(price)} mtl.
<View style={styles.tableColPrice}> </Text>
<Text style={{ color: '#666' }}>
+{formattedPrice(price)} mtl.
</Text>
</View>
</View> </View>
); );
})} })}