sheets

scripts/pdf/react-pdf/components/Footer.tsx

@@ -14,9 +14,9 @@ export function Footer(props: { locale: 'en' | 'de'; siteUrl?: string }): React.
 
   return (
     <View style={styles.footer} fixed>
-      <Text>{siteUrl}</Text>
-      <Text>{date}</Text>
-      <Text render={({ pageNumber, totalPages }) => `${pageNumber}/${totalPages}`} />
+      <Text style={styles.footerBrand}>KLZ CABLES</Text>
+      <Text style={styles.footerText}>{date}</Text>
+      <Text style={styles.footerText} render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`} />
     </View>
   );
 }

scripts/pdf/react-pdf/components/Header.tsx

@@ -3,17 +3,16 @@ import { Image, Text, View } from '@react-pdf/renderer';
 
 import { styles } from '../styles';
 
-export function Header(props: { title: string; logoDataUrl?: string | null; qrDataUrl?: string | null }): React.ReactElement {
+export function Header(props: { title: string; logoDataUrl?: string | null; qrDataUrl?: string | null; isHero?: boolean }): React.ReactElement {
+  const { isHero = false } = props;
+  
   return (
-    <View style={styles.header} fixed>
+    <View style={isHero ? styles.header : [styles.header, { paddingHorizontal: 0, backgroundColor: 'transparent', borderBottomWidth: 0, marginBottom: 24, paddingTop: 40 }]}>
       <View style={styles.headerLeft}>
         {props.logoDataUrl ? (
           <Image src={props.logoDataUrl} style={styles.logo} />
         ) : (
-          <View style={styles.brandFallback}>
-            <Text style={styles.brandFallbackKlz}>KLZ</Text>
-            <Text style={styles.brandFallbackCables}>Cables</Text>
-          </View>
+          <Text style={styles.brandFallback}>KLZ</Text>
         )}
       </View>
       <View style={styles.headerRight}>

scripts/pdf/react-pdf/components/KeyValueGrid.tsx

@@ -8,37 +8,25 @@ export function KeyValueGrid(props: { items: KeyValueItem[] }): React.ReactEleme
   const items = (props.items || []).filter(i => i.label && i.value);
   if (!items.length) return null;
 
-  // 4-column layout: (label, value, label, value)
-  const rows: Array<[KeyValueItem, KeyValueItem | null]> = [];
-  for (let i = 0; i < items.length; i += 2) {
-    rows.push([items[i], items[i + 1] || null]);
-  }
-
+  // 2-column layout: (label, value)
   return (
     <View style={styles.kvGrid}>
-      {rows.map(([left, right], rowIndex) => {
-        const isLast = rowIndex === rows.length - 1;
-        const leftValue = left.unit ? `${left.value} ${left.unit}` : left.value;
-        const rightValue = right ? (right.unit ? `${right.value} ${right.unit}` : right.value) : '';
+      {items.map((item, rowIndex) => {
+        const isLast = rowIndex === items.length - 1;
+        const value = item.unit ? `${item.value} ${item.unit}` : item.value;
 
         return (
           <View
-            key={`${left.label}-${rowIndex}`}
+            key={`${item.label}-${rowIndex}`}
             style={[styles.kvRow, rowIndex % 2 === 0 ? styles.kvRowAlt : null, isLast ? styles.kvRowLast : null]}
             wrap={false}
             minPresenceAhead={12}
           >
-            <View style={[styles.kvCell, { width: '18%' }]}>
-              <Text style={styles.kvLabelText}>{left.label}</Text>
+            <View style={[styles.kvCell, { width: '50%' }]}>
+              <Text style={styles.kvLabelText}>{item.label}</Text>
             </View>
-            <View style={[styles.kvCell, styles.kvMidDivider, { width: '32%' }]}>
-              <Text style={styles.kvValueText}>{leftValue}</Text>
-            </View>
-            <View style={[styles.kvCell, { width: '18%' }]}>
-              <Text style={styles.kvLabelText}>{right?.label || ''}</Text>
-            </View>
-            <View style={[styles.kvCell, { width: '32%' }]}>
-              <Text style={styles.kvValueText}>{rightValue}</Text>
+            <View style={[styles.kvCell, { width: '50%' }]}>
+              <Text style={styles.kvValueText}>{value}</Text>
             </View>
           </View>
         );

scripts/pdf/react-pdf/components/Section.tsx

@@ -11,8 +11,9 @@ export function Section(props: {
 }): React.ReactElement {
   const boxed = props.boxed ?? true;
   return (
-    <View style={boxed ? styles.section : styles.sectionPlain} minPresenceAhead={props.minPresenceAhead}>
+    <View style={styles.section} minPresenceAhead={props.minPresenceAhead}>
       <Text style={styles.sectionTitle}>{props.title}</Text>
+      <View style={styles.sectionAccent} />
       {props.children}
     </View>
   );