kerimatilgan/prov
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI redesign step 3: Provisionen in Stitch style

Browse Source 
- 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) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed 2026-05-15 18:18:59 +02:00
1 parent 45c0c0047f
commit b88938a1f6
2 files changed
+144 -91
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+98 -58
View File
@@ -982,77 +982,117 @@
<!-- Provisionen Tab -->
<div id="provisionen" class="tab-content">
<h2>Provisions-Übersicht</h2>
<!-- Filter für Provisionen -->
<div class="filter-section" style="margin-bottom: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<h3 style="margin-bottom: 15px; color: #2c3e50;">Filter</h3>
<div style="display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 15px; align-items: end;">
<div class="form-group" style="margin-bottom: 0;">
<label for="filterAnbieterProvisionen">Anbieter</label>
<select id="filterAnbieterProvisionen">
<div class="flex flex-col gap-lg">
<!-- Page header -->
<div class="flex justify-between items-end flex-wrap gap-md">
<div>
<h1 class="text-headline-md text-on-background mb-xs">Provisions-Übersicht</h1>
<p class="text-body-sm text-on-surface-variant">Auswertung der berechneten Shop- und Mitarbeiter-Provisionen.</p>
</div>
<button onclick="exportProvisionenToPdf()" class="bg-primary-container text-on-primary hover:bg-primary transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-sm shadow-sm">
<span class="material-symbols-outlined text-[18px]">download</span>
PDF-Export
</button>
</div>
<!-- Filter bar -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-md shadow-[0_2px_4px_rgba(0,0,0,0.04)] flex flex-wrap items-end gap-md">
<div class="flex flex-col gap-xs w-[180px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterAnbieterProvisionen">Anbieter</label>
<select id="filterAnbieterProvisionen" class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm text-body-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<option value="">Alle Anbieter</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterTarifProvisionen">Tarif</label>
<select id="filterTarifProvisionen">
<div class="flex flex-col gap-xs w-[180px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterTarifProvisionen">Tarif</label>
<select id="filterTarifProvisionen" class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm text-body-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<option value="">Alle Tarife</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterSchaltungsIdProvisionen">Schaltungs-ID</label>
<input type="text" id="filterSchaltungsIdProvisionen" placeholder="ID1, ID2, ID3... (kommagetrennt)">
<div class="flex flex-col gap-xs w-[160px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterSchaltungsIdProvisionen">Schaltungs-ID</label>
<input type="text" id="filterSchaltungsIdProvisionen" placeholder="ID1, ID2…"
class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-label-numeric text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterRufnummerProvisionen">Rufnummer</label>
<input type="text" id="filterRufnummerProvisionen" placeholder="Rufnummer suchen...">
<div class="flex flex-col gap-xs w-[160px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterRufnummerProvisionen">Rufnummer</label>
<input type="text" id="filterRufnummerProvisionen" placeholder="Suche…"
class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-label-numeric text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumVonProvisionen">Datum von</label>
<input type="date" id="filterDatumVonProvisionen">
<div class="flex flex-col gap-xs w-[320px]">
<label class="text-label-caps text-on-surface-variant uppercase">Zeitraum</label>
<div class="flex items-center gap-sm">
<input type="date" id="filterDatumVonProvisionen"
class="flex-1 min-w-0 bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-[12px] text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<span class="text-outline-variant shrink-0">–</span>
<input type="date" id="filterDatumBisProvisionen"
class="flex-1 min-w-0 bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-[12px] text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumBisProvisionen">Datum bis</label>
<input type="date" id="filterDatumBisProvisionen">
<button type="button" onclick="clearFiltersProvisionen()"
class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded px-md h-8 text-body-sm flex items-center gap-xs">
<span class="material-symbols-outlined text-[16px]">restart_alt</span>
Zurücksetzen
</button>
</div>
<!-- KPI cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-md">
<!-- Shop -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-md shadow-[0_2px_4px_rgba(0,0,0,0.04)] flex flex-col gap-sm relative overflow-hidden">
<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-low rounded-bl-full opacity-50 pointer-events-none"></div>
<h3 class="text-label-caps text-on-surface-variant uppercase tracking-widest flex items-center gap-xs">
<span class="material-symbols-outlined text-outline text-[14px]">storefront</span>
Shop-Provision gesamt
</h3>
<div class="flex justify-end items-baseline gap-xs">
<span id="totalShopProvision" class="font-label-numeric text-display-lg text-on-surface leading-none">0,00 €</span>
</div>
</div>
<div>
<button type="button" onclick="clearFiltersProvisionen()" class="btn-secondary" style="padding: 12px 20px;">Zurücksetzen</button>
<!-- Mitarbeiter -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-md shadow-[0_2px_4px_rgba(0,0,0,0.04)] flex flex-col gap-sm relative overflow-hidden">
<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-low rounded-bl-full opacity-50 pointer-events-none"></div>
<h3 class="text-label-caps text-on-surface-variant uppercase tracking-widest flex items-center gap-xs">
<span class="material-symbols-outlined text-outline text-[14px]">badge</span>
Mitarbeiter-Provision gesamt
</h3>
<div class="flex justify-end items-baseline gap-xs">
<span id="totalMitarbeiterProvision" class="font-label-numeric text-display-lg text-on-surface leading-none">0,00 €</span>
</div>
</div>
<!-- Gesamt highlighted -->
<div class="bg-surface-bright border-2 border-primary/20 rounded-lg p-md shadow-[0_4px_12px_rgba(37,99,235,0.08)] flex flex-col gap-sm relative overflow-hidden">
<div class="absolute right-0 top-0 w-24 h-24 bg-primary/5 rounded-bl-full pointer-events-none"></div>
<h3 class="text-label-caps text-primary uppercase tracking-widest flex items-center gap-xs">
<span class="material-symbols-outlined text-primary text-[14px]">account_balance_wallet</span>
Gesamt-Provision
</h3>
<div class="flex justify-end items-baseline gap-xs">
<span id="totalGesamtProvision" class="font-label-numeric text-display-lg text-primary leading-none font-bold">0,00 €</span>
</div>
</div>
</div>
</div>
<div class="admin-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<div>
<h3>Shop-Provision: <span id="totalShopProvision">0,00 €</span></h3>
<h3>Mitarbeiter-Provision: <span id="totalMitarbeiterProvision">0,00 €</span></h3>
<!-- Data table -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)] overflow-hidden">
<div class="overflow-x-auto">
<table id="provisionenTable" class="w-full text-left border-collapse">
<thead class="bg-surface-container-high border-b-2 border-outline-variant">
<tr>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[80px]">ID</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase w-[110px]">Datum</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Kunde</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Anbieter</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Tarif</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[140px]">Shop-Prov.</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[140px]">MA-Prov.</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-center w-[60px]">Quelle</th>
</tr>
</thead>
<tbody class="text-body-sm text-on-surface"></tbody>
</table>
</div>
<div>
<button onclick="exportProvisionenToPdf()" class="btn-success" style="padding: 12px 20px; font-size: 14px;">
📄 PDF Export
</button>
</div>
</div>
<div class="table-container">
<table id="provisionenTable">
<thead>
<tr>
<th rowspan="2">Schaltungs-ID</th>
<th rowspan="2">Datum</th>
<th rowspan="2">Kunde</th>
<th rowspan="2">Anbieter</th>
<th rowspan="2">Tarif</th>
<th style="text-align: center; border-bottom: 1px solid #ccc;">Shop-Provision</th>
<th style="text-align: center; border-bottom: 1px solid #ccc;">Mitarbeiter-Provision</th>
</tr>
<tr>
<th>Betrag</th>
<th>Betrag</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>