From ed7b3d0ea41b00e54dc7602b01d673eca05b1c26 Mon Sep 17 00:00:00 2001 From: Fidelis Huber Date: Fri, 21 Aug 2026 19:23:14 +0200 Subject: [PATCH] Redesign print/PDF export to match official BergVOLT invoice branding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Neuer Druck-Header mit dem Firmenlogo und der cyanen Diagonalfläche wie auf der Rechnung, Adress-/Infoblock im gleichen Tabellenstil, Materialtabelle mit durchgezogenen Rahmenlinien statt Karten-Optik, Firmenfußzeile (Adresse, Bank, Firmenbuch, Kontakt) am Ende. Die interaktiven Karten (Baustelle-Formular, Kabelrechner, Manuell-Eintrag) bleiben beim Drucken ausgeblendet, nur die neuen Print-only-Blöcke werden sichtbar. Co-Authored-By: Claude Sonnet 5 --- client/src/pages/ProjektDetail.tsx | 49 ++++++++++++++++++++++++--- client/src/styles.css | 54 +++++++++++++++++++++++++----- 2 files changed, 90 insertions(+), 13 deletions(-) diff --git a/client/src/pages/ProjektDetail.tsx b/client/src/pages/ProjektDetail.tsx index 8bfe010..1c140bf 100644 --- a/client/src/pages/ProjektDetail.tsx +++ b/client/src/pages/ProjektDetail.tsx @@ -7,6 +7,7 @@ import KabelOptions from '../components/KabelOptions'; const fmt1 = (v: number | string) => (Math.round((parseFloat(String(v)) || 0) * 10) / 10).toFixed(1); const num1 = (v: number | string) => Math.round((parseFloat(String(v)) || 0) * 10) / 10; +const ddDate = (s: string) => { if (!s) return '—'; const [y, m, d] = s.split('-'); return `${d}.${m}.${y}`; }; export default function ProjektDetail() { const { id } = useParams<{ id: string }>(); @@ -204,10 +205,30 @@ export default function ProjektDetail() { return (
-
-

Materialschein – BergVOLT Elektrotechnik – {titel}

-

Datum: {datum || '—'} | Monteur: {monteur || '—'} | Auftraggeber: {auftraggeber || '—'}

-
+
+
+
+
BergVOLT
+
ELEKTROTECHNIK
+
+
+
+
+
Baustelle / Projekt
+
{titel || '—'}
+ {auftraggeber &&
Auftraggeber: {auftraggeber}
} + {notiz &&
{notiz}
} +
+ + + + + + + +
Materialschein
Datum{ddDate(datum)}
Monteur{monteur || '—'}
Status{projekt.status}
+
+
Materialverbrauch – {titel || '(ohne Namen)'}
@@ -218,7 +239,7 @@ export default function ProjektDetail() {
-
+
Baustelle / Projekt
)} + + {matList.length > 0 && ( +
+
Positionen gesamt{matList.length}
+
+ )} + +
+ Materialschein erstellt über die BergVOLT Materialschein-App. Bei Rückfragen wende dich bitte + an den zuständigen Monteur. +
+
+ +
+
BergVOLT GmbHLudescherberg 26
AT-6713 Ludesch
+
BankRaiffeisenbank im Walgau eGen
IBAN: AT28 3745 8000 0106 0144
+
FirmenbuchFeldkirch
FN: 595938 f
+
KontaktTel: +43 699 17241249
office@bergvolt.at
diff --git a/client/src/styles.css b/client/src/styles.css index aafa5f2..c9c37fe 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -153,18 +153,56 @@ table.reftab tr:hover td{background:rgba(0,200,216,.06);cursor:pointer} @keyframes sp{to{transform:rotate(360deg)}} .print-bar{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(90deg,#081420,#0c1c30);border-top:1px solid var(--bor);padding:14px 20px;display:flex;gap:10px;justify-content:center;box-shadow:0 -2px 20px rgba(0,0,0,.4);z-index:99} -.print-header{display:none} + +/* ── Druck-Layout: BergVOLT-Briefdesign, angelehnt an die offizielle Rechnung ── */ +.print-doc{display:none} +.pbanner{position:relative;background:#0a0a0a;height:90px;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding:0 30px} +.pbanner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:62%;background:var(--cyan);clip-path:polygon(0 0,46% 0,14% 100%,0 100%)} +.pbanner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--cyan)} +.plogo-wrap{position:relative;z-index:1;text-align:right} +.plogo{color:#fff;font-size:28px;font-weight:800;letter-spacing:.5px;text-transform:uppercase} +.plogo span{color:var(--cyan)} +.plogo-sub{color:var(--cyan);font-size:8px;letter-spacing:5px;font-weight:700;margin-top:2px} + +.ptop{display:flex;justify-content:space-between;gap:24px;padding:24px 4px 20px} +.paddr{font-size:12px;line-height:1.6;color:#000} +.paddr .lbl{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px} +.paddr .name{font-weight:700;font-size:13px} +.paddr .pnote{color:#555;margin-top:4px} +table.pinfo{border:1px solid #ccc;border-collapse:collapse;min-width:250px;height:fit-content} +table.pinfo td{padding:5px 11px;border-bottom:1px solid #e2e2e2;font-size:11px;color:#000} +table.pinfo tr:first-child td{background:#eee;font-weight:800;font-size:13px;border-bottom:1px solid #ccc} +table.pinfo tr:last-child td{border-bottom:none} +table.pinfo td:first-child{color:#666} +table.pinfo td:last-child{text-align:right;font-weight:600} + +.psubject{font-weight:700;margin:0 4px 14px;font-size:13px;color:#000} + +.psum-line{display:flex;justify-content:flex-end;margin-top:6px} +.psum-line table{border-collapse:collapse;min-width:220px} +.psum-line td{padding:8px 12px;font-size:12px;border-top:1.5px solid #1a1a1a;background:#eee;font-weight:800;color:#000} +.psum-line td:last-child{text-align:right} + +.pfoot-note{margin:34px 4px 0;font-size:10.5px;color:#666;line-height:1.6} +.pfooter{display:none} @media print{ - header,.tabs,.print-bar,.detail-back,.kab-card,.manual-card,.del-btn,.qty-input,.notiz-input, + header,.tabs,.print-bar,.detail-back,.kab-card,.manual-card,.baustelle-card,.card-hint,.del-btn,.qty-input,.notiz-input, .chk-col,.retour-panel,.btn-retour-toggle{display:none!important} body{background:#fff;color:#000} - .card{box-shadow:none;border:1px solid #ccc;background:#fff;page-break-inside:avoid} - .print-header{display:block!important;margin-bottom:12px} - .table-wrap{border:none;overflow:visible} - .mat-table{min-width:0} - .mat-table th{background:#f0f0f0;color:#000} - .mat-table td{color:#000;border-bottom:1px solid #ddd} + main{max-width:none;padding:0;margin:0} + .card{box-shadow:none;border:none;background:#fff;padding:0 4px;page-break-inside:avoid} + .card-title{display:none} + + .print-doc{display:block} + .pfooter{display:flex;background:#0a0a0a;color:#fff;padding:14px 20px;justify-content:space-between;gap:16px;font-size:9.5px;line-height:1.7;margin-top:30px;position:relative} + .pfooter::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--cyan)} + .pfooter b{display:block;color:var(--cyan);font-size:9px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px} + + .table-wrap{border:none;overflow:visible;margin:0 4px} + .mat-table{min-width:0;width:100%} + .mat-table th{background:#fff;color:#000;border-top:1.5px solid #1a1a1a;border-bottom:1.5px solid #1a1a1a;font-size:10px;padding:7px 8px} + .mat-table td{color:#000;border-bottom:1px solid #e2e2e2;padding:7px 8px;font-size:11.5px} .art-cell,.pos-nr{color:#555} .print-only{display:inline} }