Design Bibliothek

UI Komponenten
KundenBindung

Navigation
Sidebar, Topbar, Tabs, Badges
Sidebar / Navigation
dashboard.php · analytics.php
Hauptnavigation links — Logo, Nav-Links, Footer mit Avatar
Übersicht
Dashboard
Analytics
Verwaltung
Neuer Kunde
Newsletter NEU
AD
Admin
Administrator
A — Syne + Indigo, aktive Linie links
Moderner SaaS-Look, klare Hierarchie
Übersicht
Dashboard
Analytics
Verwaltung
Newsletter
AD
Admin
Administrator
B — Dark Mode Sidebar
Premium-Ästhetik, OLED-freundlich
KK
AD
C — Icon-Only Collapsed
Platzsparend, Tooltips beim Hover
Topbar / Header
dashboard.php · staff_dashboard.php
Horizontaler Seitenkopf mit Titel und Aktionen
Dashboard
A — Weiß mit Aktions-Buttons
Klar, direkt, professionell
Dashboard
B — Dark mit inline Suche
Suche direkt im Header
Übersicht
Dashboard
Alle Kunden Aktiv Prämie fällig
C — Erweiterter Header mit Filter-Chips
Titel + Eyebrow + Quick-Filter
Nav-Badge
Sidebar-Links
Badge neben Nav-Links für Status, Neuigkeiten oder Anzahl
Scanner Live
Newsletter NEU
Kunden 48
Gutscheine 3
A — Farbige Pills
Grün=Live, Brand=Neu, Amber=Anzahl, Rot=Aktion
Scanner
Newsletter 2 ausstehend
B — Puls-Dot & Text-Badge
Animierter Dot für Live-Status
Scanner ·
Newsletter 1
C — Minimal / Dot-only
Sehr dezent, kein Ablenkung
Tab-Navigation
portal.php · analytics.php
Tabs für Wechsel zwischen Ansichten (Karten / Verlauf / Profil)
Tab-Inhalt erscheint hier
A — Underline Tabs
Klassisch, klare aktive Linie
B — Segmented Control
iOS-Stil, pill-förmig
Karten
Verlauf
Profil
C — Icon-Karten Tabs
Visueller, mobile-freundlich
Quick Actions
dashboard.php
Schnellzugriff auf wichtige Funktionen im Dashboard
Neuer Kunde
Scanner
Newsletter
Export
A — Icon-Grid 4 Spalten
Hover: Indigo-Highlight
QR-Code scannen
Stempel vergeben
Neuer Kunde
Registrierung
B — Horizontale Liste mit Pfeil
Primäre Aktion hervorgehoben
Scanner
Neuer Kunde
Newsletter
C — Dark Mode Glass-Cards
Glasmorphismus auf dunklem BG
FAB (Floating Action Button)
dashboard.php (Mobile)
Schwebender Button unten rechts für Schnellaktionen auf Mobile
Neuer Kunde
Scanner öffnen
A — Expandiert mit Untermenü
Klick Menü klappt auf
B — Einfacher FAB
Öffnet direkt Modal für neuen Kunden
C — Extended FAB mit Label
Sichtbarer, erklärender
Eingabe
Textfelder, Suche, Formulare
Suche / Search-Feld
dashboard.php · analytics.php
Kunden-Suche in der Tabelle und inline im Tabellenkopf
A — Standalone Suchfeld
Im Tabellenkopf, fokus hebt Indigo-Border
Kundenliste 48 Kunden
B — Inline im Tabellenkopf
Kompakt neben dem Titel
C — Suche + Filter-Button
Erweiterbar um Filteroptionen
Analytics Zeitraum-Filter
analytics.php
Zeitraum-Auswahl für Diagramme (7 Tage / 30 Tage / 90 Tage / 12 Monate)
A — Segmented Range Picker
Aktive Periode farbig hinterlegt
7 Tage 30 Tage 90 Tage 12 Monate
B — Filter-Chips
Pill-Form, mehrere wählbar
C — Dropdown Select
Platzsparend auf Mobile
Daten & Tabellen
Stat-Cards, KPIs, Tabellen, Charts, Badges
Stat-Cards (KPI)
dashboard.php · staff_dashboard.php · analytics.php
Kennzahlen-Karten: Kunden gesamt, Stempel heute, Prämien, usw.
Kunden
248
Registriert gesamt
Stempel heute
34
12% vs. gestern
A — Modern Icon-Cards
Farbige Icon-Box + Trend-Badge
Kunden
248
gesamt
Heute
34
Stempel
B — Dark Glass Cards
Glasmorphismus, Indigo-Akzent
248
Kunden
34
Heute
12
Prämien
C — Kompakte KPI-Leiste
Für staff_dashboard.php (Mobile-First)
Kundentabelle
dashboard.php
Haupttabelle mit Avatar, Name, Stempel, Aktions-Buttons
KundeStempelBesucheStatusAktionen
MK
Maria Koch
maria@example.at
12 Aktiv
TS
Thomas Steiner
tom@example.at
7 Inaktiv
A — Moderne Tabelle mit Stempel-Dots
Avatar, Status-Badge, direkte Aktionen
MK
Maria Koch
3 von 10 Stempel · 12 Besuche
Aktiv
TS
Thomas Steiner
2 von 10 Stempel · 7 Besuche
Inaktiv
B — Card-Liste (Mobile-First)
Besser auf kleinen Bildschirmen
Diagramme / Charts
dashboard.php · analytics.php
Stempel-Verlauf und Registrierungen als Linien- oder Balkendiagramm
Stempel pro Tag
Letzte 7 Tage
A — Liniendiagramm mit Füllung
Smooth, Gradient-Füllung, Indigo
Neue Registrierungen
Letzte 7 Tage
B — Balkendiagramm
Vergleich Tag für Tag
Stempel-Aktivität
Letzte 7 Tage
C — Dark Mode Chart
Lila-Akzent auf dunklem Hintergrund
Status-Badges
Überall in der App
Labels für Kunden-Status, Gutschein-Typ, Mitarbeiter-Rolle, usw.
Aktiv Inaktiv Gesperrt Scanner Manager Entwurf Eingelöst Läuft ab
A — Pill-Badges (aktueller Stil)
Farbcodiert, konsistent
Aktiv Inaktiv Gesperrt
B — Dot + Label (square border)
Klarer Dot, eckiger Radius
Scanner Hans Berger
Manager Anna Müller
C — Role-Badges in Kontext
Inline bei Mitarbeiterliste
Empty State
dashboard.php (leere Listen)
Wird angezeigt wenn keine Kunden, Gutscheine oder Daten vorhanden sind
Noch keine Kunden
Füge deinen ersten Kunden hinzu um zu starten
A — Dashed Border mit CTA
Icon + Titel + Subtitle + Button
Keine Ergebnisse
Versuche einen anderen Suchbegriff
B — Such-Empty-State
Nach Suche ohne Treffer
Bereit für den Start!
Dein Dashboard ist eingerichtet. Füge jetzt Kunden hinzu.
C — Onboarding Card
Positiv, motivierend für neue Accounts
Modals & Sheets
Dialoge, Bottom Sheets, Popups, Confirm
Modal-Dialog
Neuer Kunde · Bearbeiten · Löschen
Formular-Modals für Kunden anlegen, bearbeiten; Bestätigungsdialog zum Löschen
Neuen Kunden anlegen
A — Standard Formular-Modal
Klar gegliedert, Footer-Actions
️
Kunden löschen?
Maria Koch wird dauerhaft gelöscht. Alle Daten gehen verloren.
B — Bestätigungs-Dialog (Destructive)
Rot, mit Warnung, zentriert
Kunde bearbeiten
C — Dark Mode Modal
Für Dark-Theme konsistent
Kunden-Popup (Detail)
dashboard.php Zeile klicken
Schnellansicht eines Kunden: Stats, Stempel, Aktionen
MK
Maria Koch
maria@example.at · +43 664 123456
3
Aktuell
12
Gesamt
1
Prämien
7
Bis Prämie
Stempel-Fortschritt
A — Vollständiger Kunden-Popup
Stats + Stempel-Dots + Aktionen
MK
Maria Koch
Mitglied seit 3 Monaten
3
Stempel
12
Besuche
1
Prämien
B — Card mit Gradient-Header
Visuell ansprechender, Markenfarbe oben
Maria Koch
maria@example.at · +43 664 123456
3
Stempel
12
Besuche
1
Prämien
7
Rest
C — Bottom Sheet (Mobile)
Handle-Bar, gleitet von unten hoch
Feedback
Toast, Alerts, Reward-Tiers, Stempel-Dots
Toast / Snackbar
dashboard.php (nach Aktionen)
Kurze Rückmeldungen nach Stempel vergeben, Kunden anlegen, Fehler, usw.
Stempel vergeben! 3 von 10
Fehler beim Speichern
Newsletter wird gesendet...
A — Dot + Text, farbiger Border
Dezent, auf weißem Hintergrund
Stempel vergeben!
Prämie eingelöst!
Fehler — QR ungültig
B — Dark / Farbig gefüllt
Sehr sichtbar, für alle Hintergründe
Stempel vergeben!
Maria Koch · 3 von 10
C — Rich Toast mit Icon + Detail
Mehr Info, für wichtige Aktionen
Stempel-Dots / Fortschrittsanzeige
dashboard.php · card.php · portal.php
Visuelle Darstellung des Stempel-Fortschritts (3 von 10 = 3 gefüllte Dots)
3 von 10 Stempel
A — Runde Dots mit Icon
Aktueller Stil, interaktiver Hover
Stempel-Fortschritt 3/10
Noch 7 Stempel bis zur Prämie
B — Progress Bar mit Prozent
Linear, mit Gradient-Füllung
3 von 10 · noch 7 bis Gratis-Kaffee
C — Quadratische Tiles (Dark)
Für Wallet-Karte und Dark-UI
Reward-Tiers
dashboard.php Einstellungen
Stufen-Prämien: z.B. 5 Stempel = Rabatt, 10 Stempel = Gratis-Produkt
5
10% Rabatt
10
Gratis Kaffee
+ Stufe hinzufügen
A — Tier-Liste mit Add-Row
Hover zeigt Delete-Button
5
10% Rabatt
Coupon per E-Mail
10
Gratis Kaffee
Prämie einlösen
B — Farbige Akzentlinie links
Stufenweise Farben: Amber Indigo
5
Stempel
10% Rabatt
10
Stempel
Gratis Kaffee
C — Milestone-Cards
Visueller, für Kunden-Ansicht (Portal)
Alert / Systemmeldung
login.php · portal.php
Fehler beim Login, Erfolg beim Speichern, Warnungen
Falsche Zugangsdaten
E-Mail oder Passwort ungültig.
Gespeichert
Profil erfolgreich aktualisiert.
A — Alert mit Titel + Text
Icon + zweizeilig
Dein Passwort ist zu kurz (min. 6 Zeichen)
ℹ
Newsletter wird an 48 Kunden gesendet.
B — Einzeilig / Inline
Knapp, für einfache Meldungen
Login fehlgeschlagen
E-Mail oder Passwort ungültig.
C — Schwebende Alert-Card
Prominent, mit Shadow
Scanner
QR-Ring, Status, Bottom Sheet, Topbar
Scanner UI
scanner.php
Kamera-Ansicht mit QR-Ring, Scan-Linie, Status-Indikator
QR-Code ausrichten
Bereit
A — Klassischer Ring + Scan-Linie
Animierte Linie, grüner Puls-Status
Kamera auf Code richten
B — Eckige Rahmen-Marker
Moderner, tech-Look mit Corner-Brackets
Kunde gefunden
Maria Koch · Stempel wird vergeben
MK
Maria Koch
3 von 10 Stempel
+1 Stempel
C — Scanner Bottom Sheet (nach Scan)
Erscheint nach erfolgreichem Scan
Portal / Kunden-Ansicht
Karten-Übersicht, Verlauf, Profil
Portal-Topbar
portal.php
Kunden-seitige Navigation oben — Logo + Logout
KK
KundenKompass
Ausloggen
A — Minimal, Logo + Logout
Fokus auf den Inhalt
KK
KundenKompass
Ausloggen
B — Dark Topbar
Passt zu dark Portal-Theme
KK
KundenKompass
Ausloggen
C — Indigo-Topbar
Starkes Branding, Logout dezent
Treuekarten-Übersicht (Portal)
portal.php Meine Karten
Liste der Treuekarten des eingeloggten Kunden
Mein Café
Treuekarte · 3 von 10
Prämie: Gratis Kaffee7 noch
A — Portal Karten-Card
Logo + Stempel-Dots + Prämie
Mein Café
Treuekarte
10
Maria Koch
3 / 10
B — Wallet-Style Card
Wie echte Apple Wallet Karte
MC
Mein Café
3 von 10 · Gratis Kaffee
›
C — Kompakte Liste mit Progress Bar
Schnell scanbar, mehrere Karten überblickbar
Aktivitäts-Verlauf
portal.php Verlauf
Zeitlinie aller Transaktionen — Stempel, Prämien, Coupons
Stempel vergeben
Mein Café · 3 von 10
Heute, 14:32
Prämie eingelöst
Gratis Kaffee
Gestern
Gutschein verwendet
10% Rabatt · Code: SAVE10
Mo, 12.01
A — Zeitliste mit Icon
Icon farbcodiert nach Typ
Stempel vergeben
Heute, 14:32 · Mein Café
Prämie eingelöst
Gestern · Gratis Kaffee
B — Timeline mit vertikaler Linie
Farbige Dots je Ereignistyp
Verwaltung
Gutscheine, Newsletter, Export, Standorte, Mitarbeiter
Gutschein-Karte
dashboard.php Gutscheine
Darstellung von Gutscheinen: Typ (%, fixe €, Stempel, Produkt) + Code
Prozent-Rabatt
20%
Rabatt auf die nächste Bestellung bei Mein Café
SAVE20 Kopieren
Gültig bis 31.03.2025 5 Verwendungen
A — Coupon-Card mit gestricheltem Rand
Klassisches Coupon-Design, Perforierung
Bonus-Stempel
+3
Willkommens-Bonus für Neukunden
WELCOME3 Kopieren
B — Dark Coupon mit Akzentlinie
Premium-Look
10% Rabatt
SAVE10
Aktiv
Gratis Kaffee
FREECOFFEE
2/5 genutzt
C — Gutschein-Liste (kompakt)
Schnell überschaubar, Status-Badge
Newsletter-Modal
dashboard.php Newsletter
E-Mail an alle oder einzelne Kunden senden
A — Standard Newsletter-Modal
Indigo-Header, Empfänger-Badge
Newsletter
Alle (48) Aktiv (35) Einzeln
B — Mit Empfänger-Filter Chips
Alle / Aktiv / Einzelner Kunde
Export-Modal
dashboard.php Export
Kundendaten exportieren — Inhalt wählen, Format (CSV, Excel, PDF)
Daten exportieren
Inhalt, Zeitraum und Format wählen
Kundenliste
Name, E-Mail, Telefon
Stempel-Verlauf
Datum, Stempel, Prämien
Gutscheine
Codes, Nutzung, Status
A — Checkboxen + Format-Toggle
Alle Optionen auf einen Blick
Export
CSV
Excel
PDF
B — Format-Karten visuell
Icon-Cards für Formatauswahl
Standort-Karte
dashboard.php Standorte verwalten
Einzelne Filiale / Standort mit Stempel-Statistik
Filiale Wien 1
Aktiv
Mariahilfer Str. 22, 1060 Wien
234
Stempel gesamt
12
Heute
3h
Zuletzt aktiv
A — Standort-Card mit Stats
Name, Adresse, 3 KPIs
Filiale Wien 1
234 Stempel · zuletzt vor 3h
Filiale Wien 7
89 Stempel · heute inaktiv
B — Kompakte Liste
Mehrere Standorte übersichtlich
Mitarbeiter-Liste
dashboard.php Mitarbeiter verwalten
Scanner- und Manager-Accounts mit Rolle und Aktionen
HB
Hans Berger
hans@example.at
Scanner
AM
Anna Müller
anna@example.at
Manager
A — Mitarbeiter-Listenitem
Avatar + Rolle als farbiger Badge
HB
Hans Berger
Scanner
Wien 1
AM
Anna Müller
Manager
Alle Filialen
B — Mitarbeiter-Karten
Große Avatare, für wenige Mitarbeiter