{/* Glossy specular sheen — the "liquid" highlight running across the top */}

{children}

); } function Phone({ children, dark = false, bg }) { // Document-flow wrapper: grows with its content so the PAGE scrolls // (no fixed height, no inner overflow clip). Stays position:relative as a // positioning context for in-flow decorations; full-screen overlays use // position:fixed so they pin to the viewport regardless of scroll. return (

{children}

); } // ───────────────────────────────────────────────────────────── // Tab bar (liquid glass floating) // ───────────────────────────────────────────────────────────── function TabBar({ active = 'home', dark = false, theme }) { const t = theme || lightTheme; const items = [ { id: 'home', d: 'M3 12L12 3l9 9M5 10v10h14V10' }, { id: 'cal', d: icons.cal }, { id: 'add', d: icons.plus, isAdd: true }, { id: 'eur', d: icons.euro }, { id: 'doc', d: icons.doc }]; return (

{items.map((i) => { if (i.isAdd) { return (

); } const isActive = i.id === active; return (

); })}

); } // ───────────────────────────────────────────────────────────── // 1. DASHBOARD // ───────────────────────────────────────────────────────────── function DashboardLight() { const t = lightTheme; const equipment = [ { name: 'JBL EON 712', cat: 'Aktivlautsprecher', status: 'Vermietet', until: 'bis Sa', color: t.green, ic: icons.speaker, photo: 'linear-gradient(135deg, #1c1c1e 0%, #3a3a3c 100%)' }, { name: 'Anhänger 750kg', cat: 'Kastenanhänger', status: 'Verfügbar', until: '', color: t.textSec, ic: icons.trailer, photo: 'linear-gradient(135deg, #c4d1de 0%, #8a9bb0 100%)' }, { name: 'Shure SM58 (×4)', cat: 'Mikrofon-Set', status: 'Vermietet', until: 'bis Mi', color: t.green, ic: icons.mic, photo: 'linear-gradient(135deg, #2a2a2a 0%, #555 100%)' }, { name: 'Yamaha MG10XU', cat: 'Mischpult', status: 'Wartung', until: '', color: t.orange, ic: icons.cable, photo: 'linear-gradient(135deg, #232c3a 0%, #4a5568 100%)' }]; return (

{/* Greeting + title */}

Mittwoch, 20. Mai

Übersicht

{/* Quick stats */}

Aktive Mieten

+2 diese Woche

Umsatz Mai

2.480 €

+18%

{/* Categories */}

Mein Equipment

Alle 23

{/* Category chips */}

{[['Alle', true], ['Tontechnik', false], ['Anhänger', false], ['Kabel', false]].map(([label, sel]) =>

{label}

)}

{/* Equipment cards */}

{equipment.map((e) =>

{e.name}

{e.cat}

{e.status}

{e.until &&

{e.until}

}

)}

); } // ───────────────────────────────────────────────────────────── // 2. KALENDER // ───────────────────────────────────────────────────────────── function KalenderLight() { const t = lightTheme; const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']; const items = [ { name: 'JBL EON 712', cat: 'Aktivlautsprecher', start: 1, span: 4, color: '#007AFF', who: 'Hochzeit Müller' }, { name: 'Shure SM58 ×4', cat: 'Mikrofon-Set', start: 2, span: 2, color: '#34C759', who: 'Vereinsfest' }, { name: 'Anhänger 750kg', cat: 'Kastenanhänger', start: 0, span: 1, color: '#FF9500', who: 'P. Schmidt' }, { name: 'Yamaha MG10XU', cat: 'Mischpult', start: 3, span: 3, color: '#AF52DE', who: 'Hochzeit Müller' }, { name: 'DJ Kabelset', cat: 'Zubehör', start: 4, span: 3, color: '#FF3B30', who: 'Geburtstag K.' }]; return (

Kalenderwoche 21

Mai 2026

Woche

{/* Day header */}

{days.map((d, i) =>

{d}

{18 + i}

)}

{/* Bookings */}

{items.map((it, idx) => { const cellW = (328 - 6 * 4) / 7; const left = it.start * (cellW + 4); const width = it.span * cellW + (it.span - 1) * 4; return (

{it.name}

{it.who}

); })}

{/* Today list */}

Heute · Mi 20.5

Abholung · JBL EON 712

14:00 · Hochzeit Müller

Rückgabe · Anhänger 750kg

17:30 · P. Schmidt

); } // ───────────────────────────────────────────────────────────── // 3. OBJEKT DETAIL // ───────────────────────────────────────────────────────────── function DetailLight() { const t = lightTheme; return ( {/* Hero photo area */}

{/* speaker silhouette */}

JBL

{/* Nav glass pills */}

{/* Photo counter */}

1 / 6

Aktivlautsprecher

● VERMIETET

JBL EON 712

1.300 W · 12″ · Bluetooth

{/* Quick stats grid */}

{[ ['Tagespreis', '45 €'], ['Auslastung', '78%'], ['Einsätze', '42']]. map(([k, v]) =>

{v}

{k}

)}

{/* Current rental */}

Aktuell vermietet

Hochzeit Müller

18. – 22. Mai · 4 Tage

180 €

Verlauf

{[['Vereinsfest TSV', 'Apr · 2 Tage', '90 €'], ['Konzert Open Air', 'Mär · 3 Tage', '135 €']].map(([w, d, p]) =>

{w}

{d}

{p}

)}

); } // ───────────────────────────────────────────────────────────── // 4. FINANZEN // ───────────────────────────────────────────────────────────── function FinanzenLight() { const t = lightTheme; const bars = [62, 78, 45, 88, 95, 110, 132, 98]; const months = ['O', 'N', 'D', 'J', 'F', 'M', 'A', 'M']; const max = Math.max(...bars); return (

Mai 2026

Finanzen

{/* Hero number */}

Umsatz dieses Jahr

14.820 €

+24%

ggü. Vorjahr

{/* Bar chart */}

{bars.map((v, i) =>

{months[i]}

)}

{/* Split */}

Offen

420 €

3 Rechnungen

Bezahlt

2.060 €

12 Rechnungen

{/* Transactions */}

Letzte Zahlungen

Alle

{[ ['Hochzeit Müller', 'JBL EON · 4 Tage', '180 €', t.green, 'Bezahlt'], ['Vereinsfest TSV', 'SM58 Set · 2 Tage', '60 €', t.green, 'Bezahlt'], ['Geburtstag K.', 'Anhänger · 1 Tag', '40 €', t.orange, 'Offen'], ['Open Air', 'Komplett-Set', '320 €', t.green, 'Bezahlt']]. map(([w, c, p, col, st], i, arr) =>

{w}

{c}

{p}

{st}

)}

); } // ───────────────────────────────────────────────────────────── // 5. DOKUMENTE / VERTRÄGE // ───────────────────────────────────────────────────────────── function DokumenteLight() { const t = lightTheme; return (

23 Dateien · 4 Verträge offen

Dokumente

{/* Search */}

Suchen

{/* Folder grid */}

{[ ['Mietverträge', 12, t.accent], ['Übergabe-Protokolle', 8, t.green], ['Rechnungen', 14, t.orange], ['Versicherungen', 3, '#AF52DE']]. map(([n, c, col]) =>

{n}

{c} Dateien

)}

{/* Pending action */}

Zu unterschreiben

Wartet auf Signatur

Mietvertrag · JBL EON 712

Hochzeit Müller · 18.–22. Mai · 180 €

Senden

Vorschau

{/* Recent files */}

Zuletzt

{[ ['Übergabeprotokoll_JBL.pdf', 'Heute · 9:42', 'PDF'], ['Rechnung_2026-042.pdf', 'Gestern', 'PDF'], ['Foto_Anhaenger_Schaden.heic', 'Mo, 18.5', 'IMG'], ['Versicherung_Anhaenger.pdf', '15.5.', 'PDF']]. map(([n, d, k], i, arr) =>

{k}

{n}

{d}

)}

); } Object.assign(window, { lightTheme, darkTheme, ThemeContext, useTheme, icons, Icon, ImgIcon, IMG_ICONS, Glass, Phone, TabBar, EqAvatar, EqGlyph, DashboardLight, KalenderLight, DetailLight, FinanzenLight, DokumenteLight });