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

UI redesign step 4: Gelöschte Schaltungen in Stitch style

Browse Source 
- Page header gets a title + subtitle stack that matches Übersicht /
  Provisionen.
- Same data-table shell: bordered white card, surface-container-high
  sticky header with label-caps column titles, zebra-striped 40px
  rows, hover highlight.
- Eingabe/Schaltungs-Datum merged into a single "Daten" cell (E:/A:)
  to match Übersicht. Anbieter as a primary pill, Löschgrund as a
  red error-tinted pill. Gelöscht am right-aligned in monospaced
  label-numeric.
- showTab('geloeschte') now always re-fetches: the old check looked
  up a non-existent #geloeschteList element so the call already
  happened on every tab switch; this just clarifies the intent.

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:30:33 +02:00
1 parent 9850a5b097
commit de10e3c901
2 files changed
+66 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+31 -20
View File
@@ -1088,26 +1088,37 @@
<!-- Gelöschte Schaltungen Tab -->
<div id="geloeschte" class="tab-content">
<h2>Gelöschte Schaltungen</h2>
<div class="table-container">
<table id="geloeschteSchaltungenTable">
<thead>
<tr>
<th>Schaltungs-ID</th>
<th>Eingabe-Datum</th>
<th>Schaltungs-Datum</th>
<th>Name</th>
<th>Firma</th>
<th>Rufnummer</th>
<th>Anbieter</th>
<th>Tarif</th>
<th>Hardware</th>
<th>Löschgrund</th>
<th>Gelöscht am</th>
</tr>
</thead>
<tbody></tbody>
</table>
<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">Gelöschte Schaltungen</h1>
<p class="text-body-sm text-on-surface-variant">Archiv aller soft-gelöschten Schaltungen mit Löschgrund und Zeitstempel.</p>
</div>
</div>
<!-- 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="geloeschteSchaltungenTable" 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">Daten</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Kunde / Firma</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Rufnummer</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">Hardware</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Löschgrund</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase w-[140px]">Gelöscht am</th>
</tr>
</thead>
<tbody class="text-body-sm text-on-surface"></tbody>
</table>
</div>
</div>
</div>
</div>