setShowLsManager(false)}
+ />
+ )}
+
+
+ );
+}
diff --git a/src/components/AssetDetail.jsx b/src/components/AssetDetail.jsx
new file mode 100644
index 0000000..06b4bca
--- /dev/null
+++ b/src/components/AssetDetail.jsx
@@ -0,0 +1,319 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { databases, DATABASE_ID } from '../lib/appwrite';
+import { useAuth } from '../context/AuthContext';
+import { useAuditLog } from '../hooks/useAuditLog';
+import { useLagerstandorte } from '../hooks/useLagerstandorte';
+import { useColleagues } from '../hooks/useColleagues';
+import { getDaysOld, isOverdue } from '../hooks/useAssets';
+
+const STATUS_LABEL = { offen: 'Offen', in_bearbeitung: 'In Bearbeitung', entsorgt: 'Entsorgt' };
+const STATUS_MAP = { offen: 'offen', in_bearbeitung: 'bearbeitung', entsorgt: 'entsorgt' };
+const PRIO_LABELS = { kritisch: 'Kritisch', hoch: 'Hoch', mittel: 'Mittel', niedrig: 'Niedrig' };
+const PRIO_OPTIONS = ['kritisch', 'hoch', 'mittel', 'niedrig'];
+const STATUS_OPTIONS = ['offen', 'in_bearbeitung', 'entsorgt'];
+
+function formatTimestamp(ts) {
+ if (!ts) return '–';
+ const d = new Date(ts);
+ return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+ + ' ' + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+export default function AssetDetail() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const { user, userMeta } = useAuth();
+ const { logs, loadingLogs, loadLogs, addLog } = useAuditLog();
+ const locationId = userMeta?.locationId || '';
+ const { activeLagerstandorte } = useLagerstandorte(locationId);
+ const { colleagues } = useColleagues(locationId);
+
+ const [asset, setAsset] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [editing, setEditing] = useState(false);
+ const [saving, setSaving] = useState(false);
+ const [form, setForm] = useState({});
+
+ const loadAsset = useCallback(async () => {
+ try {
+ const doc = await databases.getDocument(DATABASE_ID, 'assets', id);
+ setAsset(doc);
+ setForm({
+ erlNummer: doc.erlNummer || '',
+ seriennummer: doc.seriennummer || '',
+ artikelNr: doc.artikelNr || '',
+ bezeichnung: doc.bezeichnung || '',
+ defekt: doc.defekt || '',
+ lagerstandortId: doc.lagerstandortId || '',
+ zustaendig: doc.zustaendig || '',
+ status: doc.status || 'offen',
+ prio: doc.prio || 'mittel',
+ kommentar: doc.kommentar || '',
+ });
+ } catch (err) {
+ console.error('Asset laden fehlgeschlagen:', err);
+ setAsset(null);
+ } finally {
+ setLoading(false);
+ }
+ }, [id]);
+
+ useEffect(() => {
+ loadAsset();
+ loadLogs(id);
+ }, [loadAsset, loadLogs, id]);
+
+ const userName = user?.name || user?.email || 'Unbekannt';
+
+ function buildChangeDetails(oldAsset, newForm) {
+ const fields = [
+ { key: 'erlNummer', label: 'ERL-Nr.' },
+ { key: 'seriennummer', label: 'Seriennummer' },
+ { key: 'artikelNr', label: 'Artikelnr.' },
+ { key: 'bezeichnung', label: 'Bezeichnung' },
+ { key: 'defekt', label: 'Defekt' },
+ { key: 'lagerstandortId', label: 'Lagerstandort' },
+ { key: 'zustaendig', label: 'Zuständig' },
+ { key: 'status', label: 'Status' },
+ { key: 'prio', label: 'Priorität' },
+ { key: 'kommentar', label: 'Kommentar' },
+ ];
+ const changes = [];
+ for (const f of fields) {
+ const oldVal = oldAsset[f.key] || '';
+ const newVal = newForm[f.key] || '';
+ if (oldVal !== newVal) {
+ if (f.key === 'status') {
+ changes.push(`${f.label}: ${STATUS_LABEL[oldVal] || oldVal} → ${STATUS_LABEL[newVal] || newVal}`);
+ } else if (f.key === 'prio') {
+ changes.push(`${f.label}: ${PRIO_LABELS[oldVal] || oldVal} → ${PRIO_LABELS[newVal] || newVal}`);
+ } else {
+ changes.push(`${f.label}: "${oldVal}" → "${newVal}"`);
+ }
+ }
+ }
+ return changes.join('; ');
+ }
+
+ async function handleSave() {
+ if (!asset) return;
+ setSaving(true);
+ try {
+ const changeDetails = buildChangeDetails(asset, form);
+ if (!changeDetails) {
+ setEditing(false);
+ setSaving(false);
+ return;
+ }
+
+ const updated = await databases.updateDocument(DATABASE_ID, 'assets', id, {
+ ...form,
+ lastEditedBy: userName,
+ });
+ setAsset(updated);
+
+ let logDetails = changeDetails;
+ if (asset.zustaendig !== form.zustaendig && form.zustaendig) {
+ const isSelf = form.zustaendig === userName;
+ const reassignInfo = isSelf
+ ? `${userName} hat sich das Asset selbst zugewiesen`
+ : `${userName} hat das Asset ${form.zustaendig} zugewiesen`;
+ logDetails = reassignInfo + (changeDetails.replace(/Zuständig:[^;]*;?\s?/, '').trim()
+ ? '; ' + changeDetails.replace(/Zuständig:[^;]*;?\s?/, '').trim()
+ : '');
+ }
+
+ await addLog({
+ assetId: id,
+ action: 'bearbeitet',
+ details: logDetails,
+ userId: user.$id,
+ userName,
+ });
+
+ setEditing(false);
+ } catch (err) {
+ console.error('Speichern fehlgeschlagen:', err);
+ alert('Speichern fehlgeschlagen: ' + (err.message || err));
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (!asset) {
+ return (
+
+
+
Asset nicht gefunden
+
Das Asset mit der ID {id} existiert nicht.
+
+
+
+
+
+
+ Asset: {asset.erlNummer || '–'}
+
+
+ {STATUS_LABEL[asset.status]}
+ {PRIO_LABELS[asset.prio]}
+ {overdue && Überfällig ({days} Tage)}
+
+
+
+
+
+
Eigenschaften
+ {!editing ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
setForm(f => ({ ...f, erlNummer: v }))} />
+ setForm(f => ({ ...f, artikelNr: v }))} />
+ setForm(f => ({ ...f, bezeichnung: v }))} />
+ setForm(f => ({ ...f, seriennummer: v }))} mono />
+ setForm(f => ({ ...f, defekt: v }))} textarea />
+
+ Lagerstandort
+ {editing ? (
+
+ ) : (
+ {activeLagerstandorte.find(l => l.$id === asset.lagerstandortId)?.name || '–'}
+ )}
+
+
+ Zuständig
+ {editing ? (
+
+ ) : (
+ {asset.zustaendig || '–'}
+ )}
+
+
+ Status
+ {editing ? (
+
+ ) : (
+ {STATUS_LABEL[asset.status]}
+ )}
+
+
+ Priorität
+ {editing ? (
+
+ ) : (
+ {PRIO_LABELS[asset.prio]}
+ )}
+
+ setForm(f => ({ ...f, kommentar: v }))} textarea />
+
+
+
+ Erstellt am: {formatTimestamp(asset.$createdAt)}
+ Erstellt von: {asset.createdBy || '–'}
+ Zuletzt bearbeitet von: {asset.lastEditedBy || '–'}
+ Alter: {days === 0 ? 'Heute' : days === 1 ? '1 Tag' : `${days} Tage`}
+
+
+
+
+
Änderungsprotokoll
+
+ {loadingLogs &&
[System] Logs werden geladen…
}
+ {!loadingLogs && logs.length === 0 && (
+
[System] Keine Einträge vorhanden.
+ )}
+ {logs.map((log) => {
+ const ts = formatTimestamp(log.$createdAt);
+ const actionClass = log.action === 'erstellt' ? 'log-created'
+ : log.action === 'status_geaendert' ? 'log-status'
+ : 'log-edit';
+
+ return (
+
+ [{ts}]
+ {log.userName}
+ {log.action.toUpperCase()}
+ {log.details && {log.details}}
+
+ );
+ })}
+
+
+
+ {label}
+ {editing ? (
+ textarea ? (
+