{/* ── Header ── */}

{e.name}

{e.cat}{e.sub ? ' · ' + e.sub : ''}

{e.kind} {e.price} €/Tag

{/* ── KPI strip — 4 compact tiles incl. embedded Buchungsanteil ── */}

0 ? t.green : t.textTer} sub={`von ${total}`}/>

0 ? t.accent : t.textTer} sub="aktiv"/>

0 ? t.orange : t.textTer} sub="rausgenommen"/>

Auslastung

{util}

{/* ── Details card ── */}

{/* ── Reparatur Stepper (compact inline) ── */}

Für Reparatur rausnehmen

Reduziert die verfügbare Menge automatisch.

onUpdateRepair(Math.max(0, repairQty - 1))} scale={0.9}>

{repairQty}

onUpdateRepair(Math.min(total, repairQty + 1))} scale={0.9}>

= total ? 0.4 : 1 }}>

{/* ── Wartung · TÜV · Defekte ── */}

setMaintOpen((v) => !v)}>Eintrag}> {maintOpen &&

{MAINT_TYPES.map((ty) => { const mm = maintMeta(ty); const sel = draft.type === ty; return ( setDraft((d) => ({ ...d, type: ty }))} scale={0.94}>

{mm.icon} {mm.label}

); })}

setDraft((d) => ({ ...d, title: ev.target.value }))} placeholder="z.B. Nächster TÜV / HU" />

setDraft((d) => ({ ...d, date: ev.target.value }))} /> setDraft((d) => ({ ...d, note: ev.target.value }))} placeholder="Notiz" />

}

{(!e.maint || e.maint.length === 0) && !maintOpen &&

Keine Einträge.

} {(e.maint || []).map((m) => { const mm = maintMeta(m.type); return (

onToggleMaint(m.id)} scale={0.85}>

{m.done && }

{mm.icon} {m.title}

{mm.label} · {fmtDateDE(m.date)}{m.note ? ' · ' + m.note : ''}

onRemoveMaint(m.id)} scale={0.8}>

); })}

{/* ── Zubehör ── */} {e.accessories && e.accessories.length > 0 &&

{e.accessories.map((a, i) => {a} )}

} {/* ── Mietverlauf ── */} {related.length > 0 &&

{related.map((r, i) => go('rentals', { rentalId: r.id })} scale={0.998} hoverBg={t.cardAlt}>

{r.tenantName}

{fmtRange(r.start, r.end)}

{rentalTotal(r)} €

)}

}

); } // ── Editable kind chip ── function EditableKindChip({ name, onRename, onDelete }) { const t = useTheme(); const [val, setVal] = useState(name); const [focus, setFocus] = useState(false); useEffect(() => {setVal(name);}, [name]); const inputRef = useRef(null); const commit = () => {if (val.trim() && val !== name) onRename(val.trim());else setVal(name);}; return (

setVal(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => {setFocus(false);commit();}} onKeyDown={(e) => {if (e.key === 'Enter') {commit();inputRef.current && inputRef.current.blur();}if (e.key === 'Escape') {setVal(name);inputRef.current && inputRef.current.blur();}}} style={{ background: 'transparent', border: 'none', outline: 'none', fontSize: 12.5, fontWeight: 600, color: t.text, width: Math.max(40, val.length * 7.5 + 6), padding: '4px 0' }} />

); } // ── Screen ── function ScreenEquipment({ go, nav, equipment, setEquipment, categories, setCategories, rentals }) { const t = useTheme(); const toast = useToast(); const [query, setQuery] = useState(''); const [kind, setKind] = useState('alle'); const [selId, setSelId] = useState(equipment[0] ? equipment[0].id : null); const [sheet, setSheet] = useState(null); const [confirmDel, setConfirmDel] = useState(null); const [editKinds, setEditKinds] = useState(false); const [addingKind, setAddingKind] = useState(false); const [newKindName, setNewKindName] = useState(''); const [analyseOpen, setAnalyseOpen] = useState(false); const renameCategory = (oldName, newName) => { const v = (newName || '').trim(); if (!v || v === oldName) return; if (categories.includes(v)) {toast('Typ existiert bereits');return;} setCategories((prev) => prev.map((c) => c === oldName ? v : c)); setEquipment((prev) => prev.map((e) => e.kind === oldName ? { ...e, kind: v } : e)); if (kind === oldName) setKind(v); toast('Umbenannt'); }; const deleteCategory = (name) => { const inUse = equipment.filter((e) => e.kind === name).length; if (inUse > 0) {toast(`„${name}" wird von ${inUse} Objekt(en) genutzt`);return;} setCategories((prev) => prev.filter((c) => c !== name)); if (kind === name) setKind('alle'); toast('Typ entfernt'); }; const addCategory = () => { const v = newKindName.trim(); if (!v) {setAddingKind(false);return;} if (categories.includes(v)) {toast('Typ existiert bereits');return;} setCategories((prev) => [...prev, v]); setNewKindName(''); setAddingKind(false); toast('Typ hinzugefügt'); }; useEffect(() => {if (nav && nav.equipmentId) setSelId(nav.equipmentId);if (nav && nav.newEquipment) setSheet({});}, [nav]); const filtered = equipment. filter((e) => kind === 'alle' || e.kind === kind). filter((e) => !query || (e.name + ' ' + e.cat + ' ' + e.sub).toLowerCase().includes(query.toLowerCase())); const selected = equipment.find((e) => e.id === selId); const saveEq = (e) => {setEquipment((prev) => {const ex = prev.find((x) => x.id === e.id);return ex ? prev.map((x) => x.id === e.id ? e : x) : [...prev, e];});setSelId(e.id);toast(equipment.find((x) => x.id === e.id) ? 'Gespeichert' : 'Equipment angelegt');}; const del = (e) => {setEquipment((prev) => prev.filter((x) => x.id !== e.id));if (selId === e.id) setSelId(null);toast('Gelöscht');}; const patchMaint = (fn) => setEquipment((prev) => prev.map((x) => x.id === selId ? { ...x, maint: fn(x.maint || []) } : x)); return ( <>

{/* grid */}

setKind('alle')} scale={0.95}>

Alle

{categories.map((k) => editKinds ? renameCategory(k, v)} onDelete={() => deleteCategory(k)} /> : setKind(k)} scale={0.95}>

{k}

)} {editKinds && (addingKind ?

setNewKindName(e.target.value)} onKeyDown={(e) => {if (e.key === 'Enter') addCategory();if (e.key === 'Escape') {setAddingKind(false);setNewKindName('');}}} onBlur={addCategory} placeholder="Neuer Typ" style={{ background: 'transparent', border: 'none', outline: 'none', fontSize: 12.5, fontWeight: 600, color: t.text, width: 90, padding: '4px 0' }} />

: setAddingKind(true)} scale={0.94}>

Typ

)}

{setEditKinds((v) => !v);setAddingKind(false);setNewKindName('');}} scale={0.94}>

{filtered.map((e) => { const st = eqStock(e, rentals); const sel = e.id === selId; return ( setSelId(e.id)} scale={0.997}>

{e.name}

{e.cat}

{e.price} €/Tag

{st.verfuegbar}/{st.total} verfügbar

); })}

{filtered.length === 0 &&

Keine Treffer.

}

{/* detail */}

{selected ? setSheet(selected)} onDelete={() => setConfirmDel(selected)} onUpdateRepair={(n) => setEquipment((prev) => prev.map((x) => x.id === selected.id ? { ...x, repairQty: n } : x))} onAddMaint={(m) => patchMaint((list) => [m, ...list])} onToggleMaint={(id) => patchMaint((list) => list.map((m) => m.id === id ? { ...m, done: !m.done } : m))} onRemoveMaint={(id) => patchMaint((list) => list.filter((m) => m.id !== id))} /> : setSheet({})} /> }

setSheet(null)} onSave={saveEq} /> setAnalyseOpen(false)} equipment={equipment} rentals={rentals} go={go} /> del(confirmDel)} onClose={() => setConfirmDel(null)} /> ); } Object.assign(window, { ScreenEquipment, EquipmentSheet, EquipmentDetail, EditableKindChip, EQ_GLYPHS, MAINT_TYPES, maintMeta });