From b88938a1f62e68e22a6928e0539f87a0f4e40bad Mon Sep 17 00:00:00 2001 From: Kerim Atilgan Date: Fri, 15 May 2026 18:18:59 +0200 Subject: [PATCH] UI redesign step 3: Provisionen in Stitch style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Page header with title/subtitle on the left, primary PDF-Export pill on the right. - Filter bar matches the Übersicht layout: fixed-width fields with label-caps labels, mono inputs for IDs/phone/date, range picker in a 320px slot, Zurücksetzen pill on the right. - Three KPI cards above the table: Shop-Provision and Mitarbeiter-Provision in plain surface cards, total highlighted with a primary-tinted border, shadow and bold accent number. All use the JetBrains-Mono display-lg numeric font. - Data table follows the same shell as Übersicht: sticky surface- container-high header, label-caps column titles, 40px rows with zebra stripes and hover. Anbieter renders as a primary pill. Shop- and MA-amounts right-aligned and monospaced; "Quelle" replaced with a single info glyph tooltip showing the source description. - New formatEuro() helper renders amounts as "1.234,56 €" using toLocaleString('de-DE'), so the totals and the cells share a consistent German currency format. Co-Authored-By: Claude Opus 4.7 (1M context) --- public/index.html | 156 +++++++++++++++++++++++++++++----------------- public/script.js | 79 +++++++++++++---------- 2 files changed, 144 insertions(+), 91 deletions(-) diff --git a/public/index.html b/public/index.html index c9d0f09..0a0a666 100644 --- a/public/index.html +++ b/public/index.html @@ -982,77 +982,117 @@
-

Provisions-Übersicht

- - -
-

Filter

-
-
- -
-
- -
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
+ + – + +
-
- - + +
+ + +
+ +
+
+

+ storefront + Shop-Provision gesamt +

+
+ 0,00 € +
-
- + +
+
+

+ badge + Mitarbeiter-Provision gesamt +

+
+ 0,00 € +
+
+ +
+
+

+ account_balance_wallet + Gesamt-Provision +

+
+ 0,00 € +
-
- -
-
-
-

Shop-Provision: 0,00 €

-

Mitarbeiter-Provision: 0,00 €

+ + +
+
+ + + + + + + + + + + + + + +
IDDatumKundeAnbieterTarifShop-Prov.MA-Prov.Quelle
-
- -
-
-
- - - - - - - - - - - - - - - - - -
Schaltungs-IDDatumKundeAnbieterTarifShop-ProvisionMitarbeiter-Provision
BetragBetrag
diff --git a/public/script.js b/public/script.js index 592f4f1..3db4440 100644 --- a/public/script.js +++ b/public/script.js @@ -2285,50 +2285,63 @@ function updateSchaltungenTable(schaltungen) { renderSchaltungenRows(schaltungen); } -// Update Provisionen table with filtered data +// Format a number as German currency: 1234.5 -> "1.234,50 €" +function formatEuro(value) { + const n = Number(value) || 0; + return n.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €'; +} + +// Update Provisionen table with filtered data (Stitch style). function updateProvisionenTable(schaltungen, totalShopProvision, totalMitarbeiterProvision) { const tbody = document.querySelector('#provisionenTable tbody'); const totalShopSpan = document.getElementById('totalShopProvision'); const totalMitarbeiterSpan = document.getElementById('totalMitarbeiterProvision'); - + const totalGesamtSpan = document.getElementById('totalGesamtProvision'); + if (!tbody) return; - + tbody.innerHTML = ''; - - if (schaltungen.length === 0) { - // Show "no results" message - const row = document.createElement('tr'); - row.innerHTML = ` - - 💰 Keine Provisionen entsprechen den gewählten Filterkriterien - - `; - tbody.appendChild(row); - - // Reset totals to 0 - if (totalShopSpan) totalShopSpan.textContent = '0,00 €'; - if (totalMitarbeiterSpan) totalMitarbeiterSpan.textContent = '0,00 €'; + + if (!schaltungen || schaltungen.length === 0) { + const tr = document.createElement('tr'); + tr.innerHTML = 'Keine Provisionen entsprechen den Filterkriterien'; + tbody.appendChild(tr); + if (totalShopSpan) totalShopSpan.textContent = formatEuro(0); + if (totalMitarbeiterSpan) totalMitarbeiterSpan.textContent = formatEuro(0); + if (totalGesamtSpan) totalGesamtSpan.textContent = formatEuro(0); return; } - - schaltungen.forEach(s => { - const row = document.createElement('tr'); - row.innerHTML = ` - ${escapeHtml(s.schaltungs_id)} - ${escapeHtml(formatDate(s.schaltungs_datum))} - ${escapeHtml(s.vorname)} ${escapeHtml(s.nachname)} - ${escapeHtml(s.anbieter_name)} - ${escapeHtml(s.tarif_name)} - ${escapeHtml(s.berechnete_shop_provision || '0.00')} € - ${escapeHtml(s.berechnete_mitarbeiter_provision || '0.00')} € + schaltungen.forEach(s => { + const shop = Number(s.berechnete_shop_provision) || 0; + const ma = Number(s.berechnete_mitarbeiter_provision) || 0; + const quelle = s.shop_quelle || s.quelle || ''; + const tr = document.createElement('tr'); + tr.className = 'border-b border-outline-variant/30 even:bg-surface-container-low/50 hover:bg-surface-variant/30 transition-colors'; + tr.innerHTML = ` + ${escapeHtml(s.schaltungs_id)} + ${escapeHtml(formatDate(s.schaltungs_datum))} + +
${escapeHtml((s.vorname || '') + ' ' + (s.nachname || ''))}
+
${escapeHtml(s.firma || '–')}
+ + + ${escapeHtml(s.anbieter_name || '')} + + ${escapeHtml(s.tarif_name || '')} + ${escapeHtml(formatEuro(shop))} + ${escapeHtml(formatEuro(ma))} + + info + `; - tbody.appendChild(row); + tbody.appendChild(tr); }); - - // Update totals - if (totalShopSpan) totalShopSpan.textContent = `${totalShopProvision.toFixed(2)} €`; - if (totalMitarbeiterSpan) totalMitarbeiterSpan.textContent = `${totalMitarbeiterProvision.toFixed(2)} €`; + + const totalGesamt = (totalShopProvision || 0) + (totalMitarbeiterProvision || 0); + if (totalShopSpan) totalShopSpan.textContent = formatEuro(totalShopProvision); + if (totalMitarbeiterSpan) totalMitarbeiterSpan.textContent = formatEuro(totalMitarbeiterProvision); + if (totalGesamtSpan) totalGesamtSpan.textContent = formatEuro(totalGesamt); } // Clear filters functions