kerimatilganandClaude Opus 4.7
a535dcee38
Foundation - Pull in Tailwind via CDN with the full Stitch design tokens (palette, typography, spacing, radius) inline in <head>. Preflight disabled so the rest of the legacy inline CSS keeps applying until each screen is migrated. - Add Hanken Grotesk + JetBrains Mono + Material Symbols Outlined via Google Fonts. - Replace the page header with the Stitch dark-slate top bar: brand on the left, segmented tab nav in the middle, user pill + logout on the right. Floating userBadge removed; renderUserBadge() now writes the display name into #headerUserName and wires the existing logout button. Login - Single card mirroring the Stitch login mockup with icon-prefixed inputs (person/lock), focus ring, error banner and a primary CTA that includes the login glyph. Setup mode swaps the heading, shows the orange info bar with admin_panel_settings glyph and changes the button to "Administrator anlegen". Wizard (Schaltung erfassen) - Step 1: anbieter button grid in Stitch style — bordered cards with a material icon, hover lift and primary-coloured outline. - Step 2: white card with a "← Anbieter ändern" pill in the header, two-column layout (Aktivierungsdaten / Vertragsdaten), label-caps form labels, JetBrains-Mono numeric inputs for dates/ID/phone and a dashed file-drop zone. Save button gains the save glyph. Other screens (Übersicht, Provisionen, Gelöschte, Administration, Benutzer) still render in the legacy style — those migrations follow in the next steps. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Provisions-Tracker
Ein Tool zur Erfassung und Verwaltung von Mitarbeiter-Provisionen bei Schaltungen.
Funktionen
-
Schaltungen erfassen: Vollständige Erfassung aller relevanten Daten
- Schaltungs-ID, Eingabe-Datum, Schaltungs-/Aktivierungsdatum
- Kundendaten (Vorname, Nachname, optional Firma, Rufnummer)
- Anbieter und Tarif (konfigurierbar über Admin-Bereich)
- Hardware (15-stellige Eingabe)
- Dokumentenupload mit Drag & Drop
-
Übersicht: Tabelle aller erfassten Schaltungen mit Filtermöglichkeiten
-
Administration:
- Anbieter hinzufügen und verwalten
- Tarife pro Anbieter konfigurieren
Installation
-
Abhängigkeiten installieren:
npm install -
Server starten:
npm startOder für Entwicklung mit automatischem Neustart:
npm run dev -
Anwendung im Browser öffnen:
http://localhost:3000
Technische Details
- Backend: Node.js mit Express
- Datenbank: SQLite (wird automatisch erstellt)
- Frontend: Vanilla HTML/CSS/JavaScript
- Datei-Upload: Multer mit 10MB Limit
Datenbankstruktur
anbieter: Telekommunikationsanbietertarife: Tarife pro Anbieterschaltungen: Haupttabelle für Provisionserfassungdokumente: Hochgeladene Dateien pro Schaltung
Standarddaten
Die Anwendung wird mit folgenden Testdaten initialisiert:
- Anbieter: Telekom, Vodafone, O2, 1&1
- Beispiel-Tarife für jeden Anbieter
Sicherheitshinweise
- Dateien werden im
uploads/Verzeichnis gespeichert - Maximale Dateigröße: 10MB
- Unterstützte Dateitypen: PDF, JPG, JPEG, PNG, DOC, DOCX