From d9d5e4f6180ab159a886bda6356418e3f1bc05ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Gr=C3=BCssing?= <gruessing@cereda-systems.de>
Date: Mon, 1 Jun 2026 22:02:21 +0200
Subject: [PATCH] Add: AssetsPage Master-Detail Redesign + API-Response Fix

---
 frontend/src/pages/AssetsPage.jsx | 1805 +++++++++++++++++++----------
 frontend/src/styles/App.css       |  847 ++++++++++++++
 2 files changed, 2032 insertions(+), 620 deletions(-)

diff --git a/frontend/src/pages/AssetsPage.jsx b/frontend/src/pages/AssetsPage.jsx
index 9d3db12..6e740b9 100644
--- a/frontend/src/pages/AssetsPage.jsx
+++ b/frontend/src/pages/AssetsPage.jsx
@@ -1,671 +1,1236 @@
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useAuth } from '../context/AuthContext';
-import assetService from '../services/assetService';
-import LoadingSpinner from '../components/common/LoadingSpinner';
-import AssetModal from '../components/assets/AssetModal';
-import AssetAssignModal from '../components/assets/AssetAssignModal';
-import InspectionSection from '../components/assets/InspectionSection';
 import { toast } from 'react-toastify';
 
-const DEPT_COLORS = {
-    'IT':         { bg: 'rgba(59,130,246,0.12)',  text: '#3b82f6', border: '#3b82f6' },
-    'Produktion': { bg: 'rgba(245,158,11,0.12)',  text: '#f59e0b', border: '#f59e0b' },
-    'Techniker':  { bg: 'rgba(34,197,94,0.12)',   text: '#22c55e', border: '#22c55e' },
+/* ── helpers ── */
+const authFetch = (url, opts = {}) => {
+    const token = localStorage.getItem('token');
+    return fetch(url, {
+        ...opts,
+        headers: {
+            ...(opts.headers || {}),
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+        },
+    });
+};
+const API = process.env.REACT_APP_API_URL || '/api';
+
+const TYPE_ICONS = {
+    notebook: '💻',
+    monitor: '🖥️',
+    headset: '🎧',
+    drucker: '🖨️',
+    sonstiges: '📦',
 };
 
-const PAGE_SIZE = 25;
+const getTypeIcon = (type) => {
+    if (!type) return '📦';
+    const t = type.toLowerCase();
+    return TYPE_ICONS[t] || '📦';
+};
 
-const AssetsPage = () => {
-    const { isAdmin, isSuperAdmin, isTechniker } = useAuth();
-    const [assets, setAssets] = useState([]);
-    const [filteredAssets, setFilteredAssets] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [statusFilter, setStatusFilter] = useState('all');
-    const [typeFilter, setTypeFilter] = useState('all');
-    const [deptFilter, setDeptFilter] = useState('all');
-    const [maintenanceFilter, setMaintenanceFilter] = useState(false);
-    const [sortField, setSortField] = useState('name');
-    const [sortDir, setSortDir] = useState('asc');
-    const [currentPage, setCurrentPage] = useState(1);
-    const [assetTypes, setAssetTypes] = useState([]);
-    const [showAssetModal, setShowAssetModal] = useState(false);
-    const [showAssignModal, setShowAssignModal] = useState(false);
-    const [editingAsset, setEditingAsset] = useState(null);
-    const [assigningAsset, setAssigningAsset] = useState(null);
-    const [labelModal, setLabelModal] = useState(null);
-    const [labelCopies, setLabelCopies] = useState(1);
-    const [labelSize, setLabelSize] = useState('medium');
-    const [labelLoading, setLabelLoading] = useState(false);
-    const [intuneLoading, setIntuneLoading] = useState(false);
-    const [showCsvImport, setShowCsvImport] = useState(false);
-    const [csvFile, setCsvFile] = useState(null);
-    const [csvPreview, setCsvPreview] = useState(null);
-    const [csvImporting, setCsvImporting] = useState(false);
-    const [inspectionAsset, setInspectionAsset] = useState(null);
-    const [openMenuId, setOpenMenuId] = useState(null);
-    const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
+const STATUS_LABELS = {
+    verfuegbar: 'Verfügbar',
+    zugewiesen: 'Zugewiesen',
+    inaktiv: 'Inaktiv',
+    beschaedigt: 'Beschädigt',
+};
+
+const STATUS_CSS = {
+    verfuegbar: 'ap-badge-available',
+    zugewiesen: 'ap-badge-assigned',
+    inaktiv: 'ap-badge-inactive',
+    beschaedigt: 'ap-badge-damaged',
+};
+
+const fmtDate = (d) => {
+    if (!d) return '—';
+    try { return new Date(d).toLocaleDateString('de-DE'); } catch { return d; }
+};
+
+const fmtCurrency = (n) => {
+    if (n === null || n === undefined || n === '') return '—';
+    return parseFloat(n).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
+};
+
+const calcBookValue = (asset) => {
+    if (!asset.purchase_price || !asset.purchase_date || !asset.useful_life_years) return null;
+    const price = parseFloat(asset.purchase_price);
+    const residual = parseFloat(asset.residual_value || 0);
+    const lifeMonths = parseFloat(asset.useful_life_years) * 12;
+    const depPerMonth = (price - residual) / lifeMonths;
+    const months = Math.max(0, (Date.now() - new Date(asset.purchase_date).getTime()) / (1000 * 60 * 60 * 24 * 30.44));
+    const depreciated = Math.min(price - residual, depPerMonth * months);
+    return Math.max(residual, price - depreciated);
+};
+
+const calcDepPercent = (asset) => {
+    if (!asset.purchase_price || !asset.purchase_date || !asset.useful_life_years) return 0;
+    const price = parseFloat(asset.purchase_price);
+    const residual = parseFloat(asset.residual_value || 0);
+    const lifeMonths = parseFloat(asset.useful_life_years) * 12;
+    const depPerMonth = (price - residual) / lifeMonths;
+    const months = Math.max(0, (Date.now() - new Date(asset.purchase_date).getTime()) / (1000 * 60 * 60 * 24 * 30.44));
+    const depreciated = Math.min(price - residual, depPerMonth * months);
+    return Math.round((depreciated / (price - residual || 1)) * 100);
+};
+
+const calcMonthlyDep = (asset) => {
+    if (!asset.purchase_price || !asset.useful_life_years) return null;
+    const price = parseFloat(asset.purchase_price);
+    const residual = parseFloat(asset.residual_value || 0);
+    const lifeMonths = parseFloat(asset.useful_life_years) * 12;
+    return (price - residual) / lifeMonths;
+};
+
+const relativeTime = (d) => {
+    if (!d) return '—';
+    const diff = Date.now() - new Date(d).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 2) return 'gerade eben';
+    if (mins < 60) return `vor ${mins} Min`;
+    const h = Math.floor(mins / 60);
+    if (h < 24) return `vor ${h} Std`;
+    return `vor ${Math.floor(h / 24)} Tag(en)`;
+};
+
+const isOnline = (agent) => {
+    if (!agent || !agent.last_seen) return false;
+    const diff = Date.now() - new Date(agent.last_seen).getTime();
+    return diff < 5 * 60 * 1000;
+};
+
+const initials = (name) => {
+    if (!name) return '??';
+    const parts = name.trim().split(' ');
+    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    return name.slice(0, 2).toUpperCase();
+};
+
+/* ═══════════════════════════════════════════════════════════════
+   EDIT MODAL
+═══════════════════════════════════════════════════════════════ */
+const EditModal = ({ asset, onClose, onSaved }) => {
+    const [form, setForm] = useState({
+        name: asset.name || '',
+        type: asset.type || '',
+        model: asset.model || '',
+        serial_number: asset.serial_number || '',
+        manufacturer: asset.manufacturer || '',
+        os: asset.os || '',
+        ip_address: asset.ip_address || '',
+        inventory_number: asset.inventory_number || '',
+        department: asset.department || '',
+        purchase_date: asset.purchase_date ? asset.purchase_date.slice(0, 10) : '',
+        purchase_price: asset.purchase_price || '',
+        useful_life_years: asset.useful_life_years || '',
+        residual_value: asset.residual_value || '',
+        next_maintenance_date: asset.next_maintenance_date ? asset.next_maintenance_date.slice(0, 10) : '',
+        maintenance_interval_months: asset.maintenance_interval_months || '',
+        maintenance_notes: asset.maintenance_notes || '',
+        teamviewer_id: asset.teamviewer_id || '',
+        description: asset.description || '',
+    });
+    const [saving, setSaving] = useState(false);
+
+    const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
+
+    const save = async () => {
+        setSaving(true);
+        try {
+            const res = await authFetch(`${API}/assets/${asset.id}`, {
+                method: 'PUT',
+                body: JSON.stringify(form),
+            });
+            if (!res.ok) throw new Error(await res.text());
+            toast.success('Asset gespeichert');
+            onSaved();
+        } catch (e) {
+            toast.error('Fehler beim Speichern: ' + e.message);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const Field = ({ label, k, type = 'text', placeholder }) => (
+        <div className="ap-form-row">
+            <label className="ap-form-label">{label}</label>
+            <input
+                className="ap-form-input"
+                type={type}
+                placeholder={placeholder || ''}
+                value={form[k]}
+                onChange={e => set(k, e.target.value)}
+            />
+        </div>
+    );
+
+    return (
+        <div className="ap-modal-overlay" onClick={onClose}>
+            <div className="ap-modal" style={{ maxWidth: 640 }} onClick={e => e.stopPropagation()}>
+                <div className="ap-modal-head">
+                    <span className="ap-modal-title">✏️ Asset bearbeiten — {asset.name}</span>
+                    <button className="ap-modal-close" onClick={onClose}>×</button>
+                </div>
+                <div className="ap-modal-body">
+                    <div className="ap-modal-section-title">Gerätedaten</div>
+                    <div className="ap-form-grid2">
+                        <Field label="Name" k="name" />
+                        <div className="ap-form-row">
+                            <label className="ap-form-label">Typ</label>
+                            <select className="ap-form-input" value={form.type} onChange={e => set('type', e.target.value)}>
+                                <option value="">— Typ wählen —</option>
+                                <option value="notebook">Notebook</option>
+                                <option value="monitor">Monitor</option>
+                                <option value="headset">Headset</option>
+                                <option value="drucker">Drucker</option>
+                                <option value="sonstiges">Sonstiges</option>
+                            </select>
+                        </div>
+                        <Field label="Hersteller" k="manufacturer" />
+                        <Field label="Modell" k="model" />
+                        <Field label="Seriennummer" k="serial_number" />
+                        <Field label="Betriebssystem" k="os" />
+                        <Field label="IP-Adresse" k="ip_address" />
+                        <Field label="Inventarnummer" k="inventory_number" />
+                        <Field label="Abteilung" k="department" />
+                        <Field label="TeamViewer-ID" k="teamviewer_id" />
+                    </div>
+                    <div className="ap-modal-section-title" style={{ marginTop: 20 }}>Finanzen & Wartung</div>
+                    <div className="ap-form-grid2">
+                        <Field label="Kaufdatum" k="purchase_date" type="date" />
+                        <Field label="Kaufpreis (€)" k="purchase_price" type="number" placeholder="0.00" />
+                        <Field label="Nutzungsdauer (Jahre)" k="useful_life_years" type="number" placeholder="3" />
+                        <Field label="Restwert (€)" k="residual_value" type="number" placeholder="0.00" />
+                        <Field label="Nächste Wartung" k="next_maintenance_date" type="date" />
+                        <Field label="Wartungsintervall (Monate)" k="maintenance_interval_months" type="number" placeholder="12" />
+                    </div>
+                    <div className="ap-form-row" style={{ marginTop: 10 }}>
+                        <label className="ap-form-label">Wartungsnotizen</label>
+                        <textarea
+                            className="ap-form-input"
+                            rows={3}
+                            value={form.maintenance_notes}
+                            onChange={e => set('maintenance_notes', e.target.value)}
+                        />
+                    </div>
+                </div>
+                <div className="ap-modal-foot">
+                    <button className="ap-btn ap-btn-outline" onClick={onClose}>Abbrechen</button>
+                    <button className="ap-btn ap-btn-teal" onClick={save} disabled={saving}>
+                        {saving ? 'Speichern…' : '✓ Speichern'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+   ASSIGN MODAL
+═══════════════════════════════════════════════════════════════ */
+const AssignModal = ({ asset, onClose, onAssigned }) => {
+    const [users, setUsers] = useState([]);
+    const [selectedUser, setSelectedUser] = useState('');
+    const [notes, setNotes] = useState('');
+    const [saving, setSaving] = useState(false);
 
     useEffect(() => {
-        loadAssets();
-        assetService.getTypes().then(setAssetTypes).catch(() => {});
+        authFetch(`${API}/users`)
+            .then(r => r.json())
+            .then(data => setUsers(Array.isArray(data) ? data : (data.users || [])))
+            .catch(() => {});
     }, []);
 
-    useEffect(() => {
-        if (openMenuId === null) return;
-        const close = () => setOpenMenuId(null);
-        window.addEventListener('click', close);
-        return () => window.removeEventListener('click', close);
-    }, [openMenuId]);
-
-    useEffect(() => {
-        filterAssets();
-        setCurrentPage(1);
-    }, [assets, searchTerm, statusFilter, typeFilter, deptFilter, maintenanceFilter]);
-
-    const canModifyAssets = () => {
-        return isSuperAdmin() || isAdmin() || isTechniker();
-    };
-
-    const handleSort = (field) => {
-        if (sortField === field) {
-            setSortDir(d => d === 'asc' ? 'desc' : 'asc');
-        } else {
-            setSortField(field);
-            setSortDir('asc');
-        }
-        setCurrentPage(1);
-    };
-
-    const SortIcon = ({ field }) => {
-        if (sortField !== field) return <span style={{ opacity: 0.3, marginLeft: 4 }}>↕</span>;
-        return <span style={{ marginLeft: 4, color: 'var(--cereda-primary)' }}>{sortDir === 'asc' ? '↑' : '↓'}</span>;
-    };
-
-    const loadAssets = async () => {
+    const assign = async () => {
+        if (!selectedUser) { toast.error('Bitte Benutzer wählen'); return; }
+        setSaving(true);
         try {
-            const data = await assetService.getAll();
-            setAssets(data);
-        } catch (error) {
+            const res = await authFetch(`${API}/assets/${asset.id}/assign`, {
+                method: 'POST',
+                body: JSON.stringify({ user_id: selectedUser, notes }),
+            });
+            if (!res.ok) throw new Error(await res.text());
+            toast.success('Asset zugewiesen');
+            onAssigned();
+        } catch (e) {
+            toast.error('Fehler: ' + e.message);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className="ap-modal-overlay" onClick={onClose}>
+            <div className="ap-modal" style={{ maxWidth: 440 }} onClick={e => e.stopPropagation()}>
+                <div className="ap-modal-head">
+                    <span className="ap-modal-title">👤 Asset zuweisen — {asset.name}</span>
+                    <button className="ap-modal-close" onClick={onClose}>×</button>
+                </div>
+                <div className="ap-modal-body">
+                    <div className="ap-form-row">
+                        <label className="ap-form-label">Benutzer</label>
+                        <select className="ap-form-input" value={selectedUser} onChange={e => setSelectedUser(e.target.value)}>
+                            <option value="">— Benutzer wählen —</option>
+                            {users.map(u => (
+                                <option key={u.id} value={u.id}>
+                                    {u.display_name || u.username} {u.email ? `(${u.email})` : ''}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <div className="ap-form-row">
+                        <label className="ap-form-label">Notizen (optional)</label>
+                        <textarea
+                            className="ap-form-input"
+                            rows={3}
+                            placeholder="z.B. Übergabe am Empfang"
+                            value={notes}
+                            onChange={e => setNotes(e.target.value)}
+                        />
+                    </div>
+                </div>
+                <div className="ap-modal-foot">
+                    <button className="ap-btn ap-btn-outline" onClick={onClose}>Abbrechen</button>
+                    <button className="ap-btn ap-btn-teal" onClick={assign} disabled={saving}>
+                        {saving ? 'Zuweisen…' : '✓ Zuweisen'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+   MAIN PAGE
+═══════════════════════════════════════════════════════════════ */
+const AssetsPage = () => {
+    const { user, isAdmin, isSuperAdmin, isSupport } = useAuth();
+
+    /* ── State: Liste ── */
+    const [assets, setAssets] = useState([]);
+    const [agents, setAgents] = useState([]);
+    const [stats, setStats] = useState({ total: 0, assigned: 0, available: 0, maintenance: 0 });
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [searchMode, setSearchMode] = useState('asset'); // 'asset' | 'user'
+    const [typeFilter, setTypeFilter] = useState('all');
+    const [statusFilter, setStatusFilter] = useState('all');
+
+    /* ── State: Auswahl ── */
+    const [selectedId, setSelectedId] = useState(null);
+    const [detail, setDetail] = useState(null);
+    const [detailLoading, setDetailLoading] = useState(false);
+    const [history, setHistory] = useState([]);
+    const [inspections, setInspections] = useState([]);
+    const [activeTab, setActiveTab] = useState('uebersicht');
+
+    /* ── State: Modals ── */
+    const [showEdit, setShowEdit] = useState(false);
+    const [showAssign, setShowAssign] = useState(false);
+    const [showMoreMenu, setShowMoreMenu] = useState(false);
+    const moreMenuRef = useRef(null);
+
+    /* ── State: Wartungsformular ── */
+    const [maintForm, setMaintForm] = useState({ type: 'Jährliche Inspektion', date: '', notes: '', result: '' });
+    const [maintSaving, setMaintSaving] = useState(false);
+
+    /* ── Permissions ── */
+    const canWrite = () => isAdmin() || isSuperAdmin() || isSupport();
+
+    /* ── Load ── */
+    const loadAssets = useCallback(async () => {
+        setLoading(true);
+        try {
+            const [aRes, agRes, stRes] = await Promise.all([
+                authFetch(`${API}/assets`),
+                authFetch(`${API}/monitoring/agents`),
+                authFetch(`${API}/assets/stats`),
+            ]);
+            const aData = aRes.ok ? await aRes.json() : {};
+            const agData = agRes.ok ? await agRes.json() : {};
+            const stData = stRes.ok ? await stRes.json() : {};
+            const aList = aData.data ?? aData.assets ?? (Array.isArray(aData) ? aData : []);
+            const agList = agData.data ?? agData.agents ?? (Array.isArray(agData) ? agData : []);
+            const st = stData.data ?? stData;
+            setAssets(aList);
+            setAgents(agList);
+            setStats({
+                total: st.total ?? aList.length,
+                assigned: st.assigned ?? aList.filter(a => a.status === 'zugewiesen').length,
+                available: st.available ?? aList.filter(a => a.status === 'verfuegbar').length,
+                maintenance: st.maintenance ?? aList.filter(a => a.status === 'inaktiv').length,
+            });
+        } catch {
             toast.error('Fehler beim Laden der Assets');
         } finally {
             setLoading(false);
         }
-    };
+    }, []);
 
-    const filterAssets = () => {
-        let filtered = [...assets];
+    useEffect(() => { loadAssets(); }, [loadAssets]);
 
-        // Search filter
-        if (searchTerm) {
-            filtered = filtered.filter(
-                (asset) =>
-                    asset.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    asset.serial_number?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    asset.inventory_number?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                    asset.model?.toLowerCase().includes(searchTerm.toLowerCase())
-            );
-        }
+    /* ── Load Detail ── */
+    useEffect(() => {
+        if (!selectedId) { setDetail(null); return; }
+        setDetailLoading(true);
+        setHistory([]);
+        setInspections([]);
+        setActiveTab('uebersicht');
+        Promise.all([
+            authFetch(`${API}/assets/${selectedId}`).then(r => r.ok ? r.json() : null),
+            authFetch(`${API}/assets/${selectedId}/history`).then(r => r.ok ? r.json() : []),
+            authFetch(`${API}/assets/${selectedId}/inspections`).then(r => r.ok ? r.json() : []),
+        ]).then(([d, h, ins]) => {
+            setDetail(d);
+            setHistory(Array.isArray(h) ? h : (h?.history || []));
+            setInspections(Array.isArray(ins) ? ins : (ins?.inspections || []));
+        }).catch(() => toast.error('Fehler beim Laden der Details'))
+          .finally(() => setDetailLoading(false));
+    }, [selectedId]);
 
-        // Status filter
-        if (statusFilter !== 'all') {
-            filtered = filtered.filter((asset) => asset.status === statusFilter);
-        }
-
-        // Type filter
-        if (typeFilter !== 'all') {
-            filtered = filtered.filter((asset) => asset.type === typeFilter);
-        }
-
-        // Department filter
-        if (deptFilter !== 'all') {
-            filtered = filtered.filter((asset) => (asset.department || 'IT') === deptFilter);
-        }
-
-        // Maintenance filter
-        if (maintenanceFilter) {
-            const today = new Date().toISOString().slice(0, 10);
-            filtered = filtered.filter(
-                (asset) => asset.next_maintenance_date && asset.next_maintenance_date <= today
-            );
-        }
-
-        setFilteredAssets(filtered);
-    };
-
-    const handleCreate = () => {
-        setEditingAsset(null);
-        setShowAssetModal(true);
-    };
-
-    const handleEdit = (asset) => {
-        setEditingAsset(asset);
-        setShowAssetModal(true);
-    };
-
-    const handleAssetModalClose = () => {
-        setShowAssetModal(false);
-        setEditingAsset(null);
-    };
-
-    const handleAssetSaved = () => {
-        loadAssets();
-        handleAssetModalClose();
-    };
-
-    const handleAssign = (asset) => {
-        setAssigningAsset(asset);
-        setShowAssignModal(true);
-    };
-
-    const handleUnassign = async (asset) => {
-        if (!window.confirm('Möchten Sie die Zuweisung dieses Assets wirklich aufheben?')) {
-            return;
-        }
-
-        try {
-            await assetService.unassign(asset.id, 'verfuegbar');
-            toast.success('Zuweisung erfolgreich aufgehoben');
-            loadAssets();
-        } catch (error) {
-            toast.error(error.message || 'Fehler beim Aufheben der Zuweisung');
-        }
-    };
-
-    const handleAssignModalClose = () => {
-        setShowAssignModal(false);
-        setAssigningAsset(null);
-    };
-
-    const handleAssigned = () => {
-        loadAssets();
-        handleAssignModalClose();
-    };
-
-    const handlePrintLabel = async () => {
-        setLabelLoading(true);
-        try {
-            await assetService.printLabel(labelModal.id, labelCopies, labelSize);
-            setLabelModal(null);
-        } catch (error) {
-            toast.error('Fehler beim Erstellen des Labels');
-        } finally {
-            setLabelLoading(false);
-        }
-    };
-
-    const handleIntuneImport = async () => {
-        setIntuneLoading(true);
-        try {
-            const result = await assetService.importFromIntune();
-            toast.success(
-                `Intune-Import abgeschlossen: ${result.imported} importiert, ${result.skipped} übersprungen` +
-                (result.errors.length > 0 ? `, ${result.errors.length} Fehler` : '')
-            );
-            if (result.imported > 0) loadAssets();
-        } catch (error) {
-            toast.error(error.message || 'Fehler beim Intune-Import');
-        } finally {
-            setIntuneLoading(false);
-        }
-    };
-
-    const handleExportCsv = () => {
-        const headers = ['Name', 'Typ', 'Seriennummer', 'Modell', 'Status', 'Zugewiesen an', 'Kaufdatum', 'Nächste Prüfung', 'TeamViewer-ID'];
-        const rows = filteredAssets.map(a => [
-            a.name, a.type, a.serial_number, a.model || '', a.status,
-            a.assigned_to_username || '', a.purchase_date || '', a.next_maintenance_date || '', a.teamviewer_id || '',
-        ].map(v => `"${String(v).replace(/"/g, '""')}"`).join(';'));
-        const csv = [headers.join(';'), ...rows].join('\n');
-        const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url; a.download = `assets_${new Date().toISOString().slice(0,10)}.csv`;
-        a.click(); URL.revokeObjectURL(url);
-        toast.success(`${filteredAssets.length} Assets exportiert`);
-    };
-
-    const handleCsvFileChange = (e) => {
-        const file = e.target.files[0];
-        if (!file) return;
-        setCsvFile(file);
-        const reader = new FileReader();
-        reader.onload = (ev) => {
-            const text = ev.target.result.replace(/^\uFEFF/, '');
-            const lines = text.split(/\r?\n/).filter(l => l.trim());
-            const sep = lines[0].includes(';') ? ';' : ',';
-            const headers = lines[0].split(sep).map(h => h.replace(/^"|"$/g, '').trim().toLowerCase());
-            const rows = lines.slice(1).map(line => {
-                const vals = line.split(sep).map(v => v.replace(/^"|"$/g, '').trim());
-                const obj = {};
-                headers.forEach((h, i) => { obj[h] = vals[i] || ''; });
-                return obj;
-            }).filter(r => r.name || r['name']);
-            setCsvPreview({ headers, rows: rows.slice(0, 5), total: rows.length, allRows: rows });
+    /* ── Close more-menu on outside click ── */
+    useEffect(() => {
+        if (!showMoreMenu) return;
+        const handler = (e) => {
+            if (moreMenuRef.current && !moreMenuRef.current.contains(e.target)) {
+                setShowMoreMenu(false);
+            }
         };
-        reader.readAsText(file, 'UTF-8');
-    };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [showMoreMenu]);
 
-    const handleCsvImport = async () => {
-        if (!csvPreview) return;
-        setCsvImporting(true);
-        let imported = 0, errors = 0;
-        for (const row of csvPreview.allRows) {
-            try {
-                await assetService.create({
-                    name: row.name || row['name'] || '',
-                    type: row.typ || row.type || 'Other',
-                    serial_number: row.seriennummer || row['serial_number'] || row['serialnumber'] || '',
-                    model: row.modell || row.model || '',
-                    status: row.status || 'verfuegbar',
-                    purchase_date: row.kaufdatum || row['purchase_date'] || '',
-                    teamviewer_id: row['teamviewer-id'] || row.teamviewer_id || '',
-                });
-                imported++;
-            } catch { errors++; }
+    /* ── Filtered list ── */
+    const filteredAssets = assets.filter(a => {
+        if (typeFilter !== 'all' && a.type?.toLowerCase() !== typeFilter) return false;
+        if (statusFilter !== 'all' && a.status !== statusFilter) return false;
+        if (!searchTerm) return true;
+        const q = searchTerm.toLowerCase();
+        if (searchMode === 'asset') {
+            return (
+                a.name?.toLowerCase().includes(q) ||
+                a.serial_number?.toLowerCase().includes(q) ||
+                a.inventory_number?.toLowerCase().includes(q) ||
+                a.model?.toLowerCase().includes(q)
+            );
+        } else {
+            return a.assigned_to_username?.toLowerCase().includes(q) ||
+                   a.assigned_to_name?.toLowerCase().includes(q);
         }
-        toast.success(`CSV-Import: ${imported} importiert${errors > 0 ? `, ${errors} Fehler` : ''}`);
-        setShowCsvImport(false); setCsvFile(null); setCsvPreview(null);
-        loadAssets();
-        setCsvImporting(false);
-    };
-
-    const handleDelete = async (id) => {
-        if (!window.confirm('Möchten Sie dieses Asset wirklich löschen?')) {
-            return;
-        }
-
-        try {
-            await assetService.delete(id);
-            toast.success('Asset erfolgreich gelöscht');
-            loadAssets();
-        } catch (error) {
-            toast.error(error.message || 'Fehler beim Löschen');
-        }
-    };
-
-    if (loading) {
-        return (
-            <div className="main-content">
-                <LoadingSpinner />
-            </div>
-        );
-    }
-
-    // Sort + paginate in render
-    const sorted = [...filteredAssets].sort((a, b) => {
-        let va = (a[sortField] || '').toString().toLowerCase();
-        let vb = (b[sortField] || '').toString().toLowerCase();
-        return sortDir === 'asc' ? va.localeCompare(vb, 'de') : vb.localeCompare(va, 'de');
     });
-    const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
-    const pagedAssets = sorted.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
-    const hasAnyMaintenanceDate = assets.some(a => a.next_maintenance_date);
 
-    return (
-        <div className="main-content">
-            <div className="container">
-                <div className="flex justify-between items-center mb-3">
-                    <div>
-                        <h1 style={{ marginBottom: 0 }}>Assets</h1>
-                        <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{filteredAssets.length} von {assets.length}</span>
-                    </div>
-                    <div className="flex" style={{ gap: '0.5rem' }}>
-                        <button onClick={handleExportCsv} className="btn btn-secondary" title="Aktuell gefilterte Assets als CSV exportieren">
-                            ⬇️ CSV Export
-                        </button>
-                        {canModifyAssets() && (
-                            <>
-                                <button onClick={() => setShowCsvImport(true)} className="btn btn-secondary" title="Assets aus CSV-Datei importieren">
-                                    ⬆️ CSV Import
-                                </button>
-                                {!isTechniker() && (
-                                    <button onClick={handleIntuneImport} className="btn btn-secondary" disabled={intuneLoading} title="Geräte aus Microsoft Intune importieren">
-                                        {intuneLoading ? 'Importiere...' : '☁️ Aus Intune importieren'}
-                                    </button>
-                                )}
-                                <button onClick={handleCreate} className="btn btn-primary">+ Neues Asset</button>
-                            </>
-                        )}
-                    </div>
+    /* ── Agent lookup by asset name ── */
+    const getAgent = (assetName) => {
+        if (!assetName || !agents.length) return null;
+        return agents.find(ag =>
+            ag.hostname?.toLowerCase() === assetName.toLowerCase() ||
+            ag.computer_name?.toLowerCase() === assetName.toLowerCase()
+        ) || null;
+    };
+
+    /* ── Actions ── */
+    const handleUnassign = async () => {
+        if (!detail) return;
+        if (!window.confirm('Zuweisung wirklich aufheben?')) return;
+        try {
+            const res = await authFetch(`${API}/assets/${detail.id}/unassign`, { method: 'POST' });
+            if (!res.ok) throw new Error(await res.text());
+            toast.success('Zuweisung aufgehoben');
+            loadAssets();
+            setSelectedId(null);
+        } catch (e) {
+            toast.error('Fehler: ' + e.message);
+        }
+    };
+
+    const handleDelete = async () => {
+        if (!detail) return;
+        if (!window.confirm(`Asset "${detail.name}" wirklich löschen?`)) return;
+        setShowMoreMenu(false);
+        try {
+            const res = await authFetch(`${API}/assets/${detail.id}`, { method: 'DELETE' });
+            if (!res.ok) throw new Error(await res.text());
+            toast.success('Asset gelöscht');
+            setSelectedId(null);
+            loadAssets();
+        } catch (e) {
+            toast.error('Fehler: ' + e.message);
+        }
+    };
+
+    const handleMaintSubmit = async () => {
+        if (!maintForm.date) { toast.error('Bitte Datum angeben'); return; }
+        setMaintSaving(true);
+        try {
+            const res = await authFetch(`${API}/assets/${detail.id}/inspections`, {
+                method: 'POST',
+                body: JSON.stringify(maintForm),
+            });
+            if (!res.ok) throw new Error(await res.text());
+            toast.success('Wartung eingetragen');
+            const ins = await authFetch(`${API}/assets/${detail.id}/inspections`).then(r => r.json());
+            setInspections(Array.isArray(ins) ? ins : (ins?.inspections || []));
+            setMaintForm({ type: 'Jährliche Inspektion', date: '', notes: '', result: '' });
+        } catch (e) {
+            toast.error('Fehler: ' + e.message);
+        } finally {
+            setMaintSaving(false);
+        }
+    };
+
+    const copyToClipboard = (text, btn) => {
+        navigator.clipboard.writeText(text || '').then(() => {
+            if (btn) { const o = btn.textContent; btn.textContent = '✓'; setTimeout(() => btn.textContent = o, 1500); }
+        });
+    };
+
+    /* ─────────────────────────────────────────────────────────
+       RENDER DETAIL
+    ───────────────────────────────────────────────────────── */
+    const renderDetail = () => {
+        if (!selectedId) {
+            return (
+                <div className="ap-empty-state">
+                    <div className="ap-empty-icon">📦</div>
+                    <div className="ap-empty-text">Asset auswählen</div>
+                    <div className="ap-empty-sub">Wähle ein Asset aus der Liste</div>
                 </div>
+            );
+        }
+        if (detailLoading) {
+            return <div className="ap-empty-state"><div className="ap-empty-icon">⏳</div><div className="ap-empty-text">Laden…</div></div>;
+        }
+        if (!detail) return null;
 
-                {/* Search and Filter — kompakte einzeilige Leiste */}
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
-                    <input
-                        type="text"
-                        className="search-input"
-                        placeholder="Suche nach Name, Seriennummer oder Modell..."
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        style={{ flex: '1 1 220px', minWidth: 180, maxWidth: 340 }}
-                    />
-                    <select className="form-select" value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)} style={{ flex: '0 0 auto', width: 'auto' }}>
-                        <option value="all">Alle Typen</option>
-                        {assetTypes.map(t => (
-                            <option key={t.id} value={t.name}>{t.name}</option>
-                        ))}
-                    </select>
-                    {(isAdmin() || isSuperAdmin()) && (
-                        <select className="form-select" value={deptFilter} onChange={(e) => setDeptFilter(e.target.value)} style={{ flex: '0 0 auto', width: 'auto' }}>
-                            <option value="all">Alle Bereiche</option>
-                            <option value="IT">IT</option>
-                            <option value="Produktion">Produktion</option>
-                            <option value="Techniker">Techniker</option>
-                        </select>
-                    )}
-                    <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
-                        {[
-                            { key: 'all',          label: 'Alle',        cls: statusFilter === 'all' ? 'btn-primary' : 'btn-secondary' },
-                            { key: 'verfuegbar',   label: 'Verfügbar',   cls: statusFilter === 'verfuegbar' ? 'btn-success' : 'btn-secondary' },
-                            { key: 'zugewiesen',   label: 'Zugewiesen',  cls: statusFilter === 'zugewiesen' ? 'btn-primary' : 'btn-secondary' },
-                            { key: 'inaktiv',      label: 'Inaktiv',     cls: statusFilter === 'inaktiv' ? 'btn-secondary active' : 'btn-secondary' },
-                            { key: 'beschaedigt',  label: 'Beschädigt',  cls: statusFilter === 'beschaedigt' ? 'btn-danger' : 'btn-secondary' },
-                        ].map(s => (
-                            <button key={s.key} className={`btn ${s.cls} btn-small`} onClick={() => setStatusFilter(s.key)}>{s.label}</button>
-                        ))}
-                        <button
-                            className={`btn ${maintenanceFilter ? 'btn-warning' : 'btn-secondary'} btn-small`}
-                            onClick={() => setMaintenanceFilter(!maintenanceFilter)}
-                            title="Nur Assets anzeigen, deren Prüftermin überschritten ist"
-                        >⚠️ Wartung fällig</button>
+        const agent = getAgent(detail.name);
+        const online = isOnline(agent);
+        const bookValue = calcBookValue(detail);
+        const depPercent = calcDepPercent(detail);
+        const monthlyDep = calcMonthlyDep(detail);
+
+        const nextMaint = detail.next_maintenance_date;
+        const maintSoon = nextMaint && (new Date(nextMaint) - Date.now()) < 30 * 24 * 60 * 60 * 1000;
+        const maintOverdue = nextMaint && new Date(nextMaint) < new Date();
+
+        return (
+            <>
+                {/* Header */}
+                <div className="ap-detail-header">
+                    <div className="ap-detail-icon-box">
+                        {getTypeIcon(detail.type)}
                     </div>
-                </div>
-
-                {/* Table */}
-                <div className="card" style={{ overflowX: 'auto' }}>
-                    <table className="table" style={{ tableLayout: 'fixed', width: '100%', minWidth: hasAnyMaintenanceDate ? '1020px' : '860px' }}>
-                        <colgroup>
-                            <col style={{ width: hasAnyMaintenanceDate ? '17%' : '19%' }} />
-                            <col style={{ width: '8%' }} />
-                            <col style={{ width: '9%' }} />
-                            <col style={{ width: hasAnyMaintenanceDate ? '13%' : '15%' }} />
-                            <col style={{ width: hasAnyMaintenanceDate ? '12%' : '13%' }} />
-                            <col style={{ width: '10%' }} />
-                            <col style={{ width: hasAnyMaintenanceDate ? '12%' : '15%' }} />
-                            {hasAnyMaintenanceDate && <col style={{ width: '11%' }} />}
-                            <col style={{ width: hasAnyMaintenanceDate ? '8%' : '11%' }} />
-                        </colgroup>
-                        <thead>
-                            <tr>
-                                {[
-                                    { field: 'name',         label: 'Name' },
-                                    { field: 'type',         label: 'Typ' },
-                                    { field: 'department',   label: 'Bereich' },
-                                    { field: 'inventory_number', label: 'Inventarnummer' },
-                                    { field: 'model',        label: 'Modell' },
-                                    { field: 'status',       label: 'Status' },
-                                    { field: 'assigned_to_username', label: 'Zugewiesen an' },
-                                ].map(col => (
-                                    <th key={col.field} onClick={() => handleSort(col.field)} style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}>
-                                        {col.label}<SortIcon field={col.field} />
-                                    </th>
-                                ))}
-                                {hasAnyMaintenanceDate && (
-                                    <th onClick={() => handleSort('next_maintenance_date')} style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }} title="Nächste Prüfung">
-                                        Prüfung<SortIcon field="next_maintenance_date" />
-                                    </th>
-                                )}
-                                <th>Aktionen</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {pagedAssets.length === 0 ? (
-                                <tr>
-                                    <td colSpan={hasAnyMaintenanceDate ? 9 : 8} className="text-center">
-                                        Keine Assets gefunden
-                                    </td>
-                                </tr>
-                            ) : (
-                                pagedAssets.map((asset) => {
-                                    const today = new Date().toISOString().slice(0, 10);
-                                    const maintenanceOverdue = asset.next_maintenance_date && asset.next_maintenance_date <= today;
-                                    const dept = asset.department || 'IT';
-                                    const dc = DEPT_COLORS[dept] || DEPT_COLORS['IT'];
-                                    return (
-                                    <tr key={asset.id} style={maintenanceOverdue ? { backgroundColor: 'rgba(245,158,11,0.08)' } : {}}>
-                                        <td style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={asset.name}>
-                                            <Link to={`/monitoring/device/host/${encodeURIComponent(asset.name)}`} style={{ color: 'inherit', textDecoration: 'none', borderBottom: '1px dotted var(--text-muted)' }} title="Agent-Details öffnen">
-                                                {asset.name}
-                                            </Link>
-                                        </td>
-                                        <td style={{ whiteSpace: 'nowrap' }}>{asset.type}</td>
-                                        <td>
-                                            <span style={{ background: dc.bg, color: dc.text, border: `1px solid ${dc.border}`, borderRadius: '20px', padding: '2px 10px', fontSize: '11px', fontWeight: 600 }}>
-                                                {dept}
-                                            </span>
-                                        </td>
-                                        <td style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={asset.inventory_number || ''}>{asset.inventory_number || '—'}</td>
-                                        <td style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={asset.model || ''}>{asset.model || '—'}</td>
-                                        <td>
-                                            <span className={`status-badge status-${asset.status}`}>
-                                                {{ verfuegbar: 'Verfügbar', zugewiesen: 'Zugewiesen', inaktiv: 'Inaktiv', beschaedigt: 'Beschädigt' }[asset.status] || asset.status}
-                                            </span>
-                                        </td>
-                                        <td style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={asset.assigned_to_username || ''}>{asset.assigned_to_username || '—'}</td>
-                                        {hasAnyMaintenanceDate && (
-                                            <td>
-                                                {asset.next_maintenance_date ? (
-                                                    <span style={{ color: maintenanceOverdue ? 'var(--warning)' : 'inherit', fontWeight: maintenanceOverdue ? 600 : 400 }}>
-                                                        {maintenanceOverdue && '⚠️ '}
-                                                        {new Date(asset.next_maintenance_date).toLocaleDateString('de-DE')}
-                                                    </span>
-                                                ) : '—'}
-                                            </td>
-                                        )}
-                                        <td>
-                                            <button
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    const rect = e.currentTarget.getBoundingClientRect();
-                                                    setMenuPos({ top: rect.bottom + 4, left: rect.right - 180 });
-                                                    setOpenMenuId(openMenuId === asset.id ? null : asset.id);
-                                                }}
-                                                style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-color)', borderRadius: 6, padding: '4px 10px', cursor: 'pointer', color: 'var(--text-primary)', fontSize: 18, lineHeight: 1 }}
-                                                title="Aktionen"
-                                            >⋮</button>
-                                        </td>
-                                    </tr>
-                                    );
-                                })
+                    <div className="ap-detail-title-area">
+                        <div className="ap-detail-name">{detail.name}</div>
+                        <div className="ap-detail-sub">
+                            {detail.inventory_number && <>{detail.inventory_number} &nbsp;·&nbsp;</>}
+                            {detail.serial_number && <>SN: {detail.serial_number} &nbsp;·&nbsp;</>}
+                            {detail.manufacturer || '—'}
+                        </div>
+                        <div className="ap-detail-badges">
+                            {detail.type && (
+                                <span className="ap-type-badge">{detail.type}</span>
                             )}
-                        </tbody>
-                    </table>
+                            <span className={`ap-status-badge ${STATUS_CSS[detail.status] || ''}`}>
+                                {STATUS_LABELS[detail.status] || detail.status}
+                            </span>
+                            {agent && (
+                                <span className={`ap-online-badge ${online ? 'ap-online-badge--on' : 'ap-online-badge--off'}`}>
+                                    <span className={`ap-online-dot ${online ? 'ap-online-dot--on' : ''}`} />
+                                    {online ? 'Online' : 'Offline'}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                    <div className="ap-detail-actions">
+                        {canWrite() && (
+                            <button className="ap-btn ap-btn-outline" onClick={() => setShowEdit(true)}>
+                                ✏️ Bearbeiten
+                            </button>
+                        )}
+                        {canWrite() && detail.status === 'verfuegbar' && (
+                            <button className="ap-btn ap-btn-teal" onClick={() => setShowAssign(true)}>
+                                👤 Zuweisen
+                            </button>
+                        )}
+                        {canWrite() && detail.status === 'zugewiesen' && (
+                            <button className="ap-btn ap-btn-outline" onClick={() => setShowAssign(true)}>
+                                🔄 Neu zuweisen
+                            </button>
+                        )}
+                        <div className="ap-more-wrap" ref={moreMenuRef}>
+                            <button className="ap-btn-icon" onClick={() => setShowMoreMenu(v => !v)}>···</button>
+                            {showMoreMenu && (
+                                <div className="ap-more-menu">
+                                    <button className="ap-more-item" onClick={() => {
+                                        window.open(`${API}/assets/${detail.id}/label`, '_blank');
+                                        setShowMoreMenu(false);
+                                    }}>🏷️ Label drucken</button>
+                                    {detail.status === 'zugewiesen' && (
+                                        <button className="ap-more-item" onClick={() => {
+                                            window.open(`${API}/assets/${detail.id}/handover-protocol`, '_blank');
+                                            setShowMoreMenu(false);
+                                        }}>📄 Übergabeprotokoll</button>
+                                    )}
+                                    {detail.status === 'zugewiesen' && canWrite() && (
+                                        <button className="ap-more-item ap-more-item--danger" onClick={() => { setShowMoreMenu(false); handleUnassign(); }}>
+                                            🔓 Zuweisung aufheben
+                                        </button>
+                                    )}
+                                    {canWrite() && (
+                                        <button className="ap-more-item ap-more-item--danger" onClick={handleDelete}>
+                                            🗑️ Löschen
+                                        </button>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
                 </div>
 
-                {/* Pagination */}
-                {totalPages > 1 && (
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '0.75rem', fontSize: 13, color: 'var(--text-muted)' }}>
-                        <span>{((currentPage - 1) * PAGE_SIZE) + 1}–{Math.min(currentPage * PAGE_SIZE, sorted.length)} von {sorted.length} Assets</span>
-                        <div style={{ display: 'flex', gap: '0.375rem' }}>
-                            <button className="btn btn-secondary btn-small" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>«</button>
-                            <button className="btn btn-secondary btn-small" onClick={() => setCurrentPage(p => p - 1)} disabled={currentPage === 1}>‹</button>
-                            {Array.from({ length: totalPages }, (_, i) => i + 1)
-                                .filter(p => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 1)
-                                .reduce((acc, p, idx, arr) => {
-                                    if (idx > 0 && p - arr[idx - 1] > 1) acc.push('...');
-                                    acc.push(p);
-                                    return acc;
-                                }, [])
-                                .map((p, i) => p === '...'
-                                    ? <span key={`e${i}`} style={{ padding: '0 4px' }}>…</span>
-                                    : <button key={p} className={`btn btn-small ${currentPage === p ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setCurrentPage(p)}>{p}</button>
-                                )
-                            }
-                            <button className="btn btn-secondary btn-small" onClick={() => setCurrentPage(p => p + 1)} disabled={currentPage === totalPages}>›</button>
-                            <button className="btn btn-secondary btn-small" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>»</button>
+                {/* KPI-Karten */}
+                <div className="ap-kpi-grid">
+                    <div className="ap-kpi-card">
+                        <div className="ap-kpi-label">💰 Buchwert</div>
+                        <div className="ap-kpi-value">{bookValue !== null ? fmtCurrency(bookValue) : '—'}</div>
+                        <div className="ap-kpi-sub">
+                            {detail.purchase_price ? `Kauf: ${fmtCurrency(detail.purchase_price)}` : 'Kein Kaufpreis'}
+                            {detail.purchase_date ? ` (${fmtDate(detail.purchase_date)})` : ''}
                         </div>
                     </div>
-                )}
+                    <div className={`ap-kpi-card ${maintOverdue ? 'ap-kpi-card--red' : maintSoon ? 'ap-kpi-card--amber' : ''}`}>
+                        <div className="ap-kpi-label">🔧 Nächste Wartung</div>
+                        <div className="ap-kpi-value">
+                            {nextMaint ? fmtDate(nextMaint) : '—'}
+                        </div>
+                        <div className="ap-kpi-sub">
+                            {maintOverdue ? '⚠️ Überfällig' : maintSoon ? '⚠️ In < 30 Tagen' : nextMaint ? 'Geplant' : 'Kein Termin'}
+                        </div>
+                    </div>
+                    <div className={`ap-kpi-card ${detail.assigned_to_name || detail.assigned_to_username ? 'ap-kpi-card--blue' : ''}`}>
+                        <div className="ap-kpi-label">👤 Zugewiesen an</div>
+                        <div className="ap-kpi-value" style={{ fontSize: 15 }}>
+                            {detail.assigned_to_name || detail.assigned_to_username || '—'}
+                        </div>
+                        <div className="ap-kpi-sub">
+                            {detail.assigned_since ? `seit ${fmtDate(detail.assigned_since)}` : detail.status === 'zugewiesen' ? 'Zugewiesen' : 'Nicht zugewiesen'}
+                        </div>
+                    </div>
+                    <div className={`ap-kpi-card ${online ? 'ap-kpi-card--green' : ''}`}>
+                        <div className="ap-kpi-label">🤖 Agent-Sync</div>
+                        <div className="ap-kpi-value" style={{ fontSize: 15 }}>
+                            {agent ? relativeTime(agent.last_seen) : '—'}
+                        </div>
+                        <div className="ap-kpi-sub">
+                            {agent ? `v${agent.agent_version || '?'} · ${online ? 'aktiv' : 'offline'}` : 'Kein Agent'}
+                        </div>
+                    </div>
+                </div>
 
-                {/* Asset Modal */}
-                {showAssetModal && (
-                    <AssetModal
-                        asset={editingAsset}
-                        onClose={handleAssetModalClose}
-                        onSaved={handleAssetSaved}
-                    />
-                )}
+                {/* Tab-Bar */}
+                <div className="ap-tab-bar">
+                    {['uebersicht', 'wartung', 'verlauf', 'agent', 'dokumente'].map(tab => (
+                        <div
+                            key={tab}
+                            className={`ap-tab ${activeTab === tab ? 'ap-tab--active' : ''}`}
+                            onClick={() => setActiveTab(tab)}
+                        >
+                            {{ uebersicht: 'Übersicht', wartung: 'Wartung', verlauf: 'Verlauf', agent: 'Agent-Daten', dokumente: 'Dokumente' }[tab]}
+                        </div>
+                    ))}
+                </div>
 
-                {/* Assign Modal */}
-                {showAssignModal && (
-                    <AssetAssignModal
-                        asset={assigningAsset}
-                        onClose={handleAssignModalClose}
-                        onAssigned={handleAssigned}
-                    />
-                )}
-
-                {/* Label Modal */}
-                {labelModal && (
-                    <div className="modal-overlay" onClick={() => setLabelModal(null)}>
-                        <div className="modal" onClick={(e) => e.stopPropagation()}>
-                            <div className="modal-header">
-                                <h2>Label drucken</h2>
-                                <button className="modal-close" onClick={() => setLabelModal(null)}>×</button>
-                            </div>
-                            <div className="modal-body">
-                                <p><strong>{labelModal.name}</strong> — {labelModal.serial_number}</p>
-
-                                <div className="form-group" style={{ marginTop: '1rem' }}>
-                                    <label className="form-label">Größe</label>
-                                    <select
-                                        className="form-select"
-                                        value={labelSize}
-                                        onChange={(e) => setLabelSize(e.target.value)}
-                                    >
-                                        <option value="small">Klein (50×25 mm) – A4</option>
-                                        <option value="medium">Mittel (62×29 mm) – A4</option>
-                                        <option value="large">Groß (90×38 mm) – A4</option>
-                                        <option value="ptouch12">Brother P700 – 12 mm Band</option>
-                                    </select>
-                                </div>
-
-                                <div className="form-group">
-                                    <label className="form-label">Anzahl Kopien</label>
-                                    <div className="flex items-center" style={{ gap: '0.5rem' }}>
-                                        <button
-                                            className="btn btn-secondary btn-small"
-                                            onClick={() => setLabelCopies(Math.max(1, labelCopies - 1))}
-                                        >−</button>
-                                        <span style={{ minWidth: '2rem', textAlign: 'center' }}>{labelCopies}</span>
-                                        <button
-                                            className="btn btn-secondary btn-small"
-                                            onClick={() => setLabelCopies(Math.min(100, labelCopies + 1))}
-                                        >+</button>
+                {/* ── TAB: ÜBERSICHT ── */}
+                {activeTab === 'uebersicht' && (
+                    <>
+                        <div className="ap-content-grid2">
+                            {/* Geräteinformationen */}
+                            <div className="ap-card">
+                                <div className="ap-card-title">🖥️ Geräteinformationen</div>
+                                {[
+                                    ['Typ', detail.type],
+                                    ['Hersteller', detail.manufacturer],
+                                    ['Modell', detail.model],
+                                    ['Seriennummer', detail.serial_number],
+                                    ['Betriebssystem', detail.os],
+                                    ['Inventarnummer', detail.inventory_number],
+                                    ['Abteilung', detail.department],
+                                ].map(([label, val]) => (
+                                    <div key={label} className="ap-info-row">
+                                        <span className="ap-info-label">{label}</span>
+                                        <span className="ap-info-value">{val || '—'}</span>
                                     </div>
+                                ))}
+                                <div className="ap-info-row">
+                                    <span className="ap-info-label">IP-Adresse</span>
+                                    <span className="ap-info-value">
+                                        {detail.ip_address || '—'}
+                                        {detail.ip_address && (
+                                            <button className="ap-copy-btn" onClick={e => copyToClipboard(detail.ip_address, e.target)}>📋</button>
+                                        )}
+                                    </span>
                                 </div>
                             </div>
-                            <div className="modal-footer">
-                                <button className="btn btn-secondary" onClick={() => setLabelModal(null)}>
-                                    Abbrechen
-                                </button>
-                                <button
-                                    className="btn btn-primary"
-                                    onClick={handlePrintLabel}
-                                    disabled={labelLoading}
-                                >
-                                    {labelLoading ? 'Wird erstellt...' : 'PDF öffnen'}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                )}
-                {/* CSV Import Modal */}
-                {showCsvImport && (
-                    <div className="modal-overlay" onClick={() => { setShowCsvImport(false); setCsvFile(null); setCsvPreview(null); }}>
-                        <div className="modal-content modal-large" onClick={(e) => e.stopPropagation()}>
-                            <div className="modal-header">
-                                <h2 className="modal-title">⬆️ Assets per CSV importieren</h2>
-                                <button className="modal-close" onClick={() => { setShowCsvImport(false); setCsvFile(null); setCsvPreview(null); }}>×</button>
-                            </div>
-                            <div style={{ padding: '20px 24px' }}>
-                                <p style={{ fontSize: '13px', color: 'var(--text-muted)', marginBottom: '16px' }}>
-                                    CSV-Spalten (Semikolon oder Komma getrennt):<br />
-                                    <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px', fontSize: '12px' }}>
-                                        Name;Typ;Seriennummer;Modell;Status;Kaufdatum;TeamViewer-ID
-                                    </code>
-                                </p>
-                                <input type="file" accept=".csv,.txt" onChange={handleCsvFileChange}
-                                    style={{ display: 'block', marginBottom: '16px', fontSize: '13px', color: 'var(--text-primary)' }} />
 
-                                {csvPreview && (
-                                    <div>
-                                        <p style={{ fontWeight: 600, fontSize: '13px', color: 'var(--text-primary)', marginBottom: '8px' }}>
-                                            Vorschau ({csvPreview.total} Assets erkannt, erste 5):
-                                        </p>
-                                        <div style={{ overflowX: 'auto', border: '1px solid var(--border-color)', borderRadius: '8px' }}>
-                                            <table className="table" style={{ margin: 0, fontSize: '12px' }}>
-                                                <thead>
-                                                    <tr>{csvPreview.headers.map(h => <th key={h}>{h}</th>)}</tr>
-                                                </thead>
-                                                <tbody>
-                                                    {csvPreview.rows.map((row, i) => (
-                                                        <tr key={i}>{csvPreview.headers.map(h => <td key={h}>{row[h]}</td>)}</tr>
-                                                    ))}
-                                                </tbody>
-                                            </table>
+                            {/* Finanzen & AfA */}
+                            <div className="ap-card">
+                                <div className="ap-card-title">📊 Finanzdaten &amp; AfA</div>
+                                {[
+                                    ['Kaufpreis', fmtCurrency(detail.purchase_price)],
+                                    ['Kaufdatum', fmtDate(detail.purchase_date)],
+                                    ['Nutzungsdauer', detail.useful_life_years ? `${detail.useful_life_years} Jahre` : '—'],
+                                    ['Buchwert aktuell', bookValue !== null ? fmtCurrency(bookValue) : '—', bookValue !== null ? '#34d399' : null],
+                                    ['Restwert', fmtCurrency(detail.residual_value)],
+                                    ['Abschreibung/Monat', monthlyDep !== null ? fmtCurrency(monthlyDep) : '—'],
+                                ].map(([label, val, color]) => (
+                                    <div key={label} className="ap-info-row">
+                                        <span className="ap-info-label">{label}</span>
+                                        <span className="ap-info-value" style={color ? { color } : {}}>{val}</span>
+                                    </div>
+                                ))}
+                                {detail.purchase_price && detail.useful_life_years && (
+                                    <div className="ap-afa-bar-wrap">
+                                        <div className="ap-afa-bar-label">
+                                            <span>Abgeschrieben</span>
+                                            <span>{depPercent} %</span>
+                                        </div>
+                                        <div className="ap-progress-bar">
+                                            <div
+                                                className={`ap-progress-fill ${depPercent > 80 ? 'ap-fill-red' : depPercent > 50 ? 'ap-fill-amber' : 'ap-fill-teal'}`}
+                                                style={{ width: `${Math.min(100, depPercent)}%` }}
+                                            />
+                                        </div>
+                                        <div className="ap-afa-dates">
+                                            <span>Kauf: {fmtDate(detail.purchase_date)}</span>
+                                            {detail.purchase_date && detail.useful_life_years && (
+                                                <span>Ende: {fmtDate(new Date(new Date(detail.purchase_date).setFullYear(new Date(detail.purchase_date).getFullYear() + parseInt(detail.useful_life_years))))}</span>
+                                            )}
                                         </div>
                                     </div>
                                 )}
                             </div>
-                            <div className="card-footer">
-                                <button className="btn btn-secondary" onClick={() => { setShowCsvImport(false); setCsvFile(null); setCsvPreview(null); }}>
-                                    Abbrechen
-                                </button>
-                                <button className="btn btn-primary" onClick={handleCsvImport}
-                                    disabled={!csvPreview || csvImporting}>
-                                    {csvImporting ? '⏳ Importiere…' : `✅ ${csvPreview?.total || 0} Assets importieren`}
-                                </button>
-                            </div>
                         </div>
-                    </div>
-                )}
-                {/* Actions Dropdown (fixed position to escape overflow) */}
-                {openMenuId !== null && (() => {
-                    const asset = filteredAssets.find(a => a.id === openMenuId);
-                    if (!asset) return null;
-                    return (
-                        <div
-                            style={{ position: 'fixed', top: menuPos.top, left: menuPos.left, zIndex: 9999, background: 'var(--bg-card, #1e293b)', border: '1px solid var(--border-color)', borderRadius: 8, boxShadow: '0 8px 24px rgba(0,0,0,0.4)', minWidth: 200, overflow: 'hidden' }}
-                            onClick={(e) => e.stopPropagation()}
-                        >
-                            {[
-                                { label: '🔍 Prüfprotokoll', action: () => { setInspectionAsset(asset); setOpenMenuId(null); } },
-                                { label: '🏷️ Label', action: () => { setLabelModal(asset); setLabelCopies(1); setLabelSize('medium'); setOpenMenuId(null); } },
-                                canModifyAssets() && { label: '✏️ Bearbeiten', action: () => { handleEdit(asset); setOpenMenuId(null); } },
-                                canModifyAssets() && asset.status === 'verfuegbar' && { label: '👤 Zuweisen', action: () => { handleAssign(asset); setOpenMenuId(null); } },
-                                canModifyAssets() && asset.status === 'zugewiesen' && { label: '🔓 Freigeben', action: () => { handleUnassign(asset); setOpenMenuId(null); } },
-                                canModifyAssets() && asset.status === 'zugewiesen' && { label: '📄 Übergabeprotokoll', action: () => { assetService.printHandoverProtocol(asset.id).catch(() => toast.error('Fehler')); setOpenMenuId(null); } },
-                                canModifyAssets() && { label: '🗑️ Löschen', action: () => { handleDelete(asset.id); setOpenMenuId(null); }, danger: true },
-                            ].filter(Boolean).map((item, i) => (
-                                <button key={i} onClick={item.action} style={{ display: 'block', width: '100%', textAlign: 'left', padding: '10px 16px', background: 'none', border: 'none', borderBottom: '1px solid var(--border-color)', cursor: 'pointer', fontSize: 13, color: item.danger ? '#ef4444' : 'var(--text-primary)' }}
-                                    onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-secondary)'}
-                                    onMouseLeave={(e) => e.currentTarget.style.background = 'none'}
-                                >{item.label}</button>
-                            ))}
-                        </div>
-                    );
-                })()}
 
-                {/* Inspection Modal */}
-                {inspectionAsset && (
-                    <div className="modal-overlay" onClick={() => setInspectionAsset(null)}>
-                        <div className="modal-content modal-large" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 640 }}>
-                            <div className="modal-header">
-                                <h2 className="modal-title">Prüfprotokoll – {inspectionAsset.name}</h2>
-                                <button className="modal-close" onClick={() => setInspectionAsset(null)}>×</button>
+                        <div className="ap-content-grid2">
+                            {/* Zuweisung */}
+                            <div className="ap-card">
+                                <div className="ap-card-title">👤 Zuweisung</div>
+                                {(detail.assigned_to_name || detail.assigned_to_username) ? (
+                                    <>
+                                        <div className="ap-user-card-inner">
+                                            <div className="ap-user-avatar">
+                                                {initials(detail.assigned_to_name || detail.assigned_to_username)}
+                                            </div>
+                                            <div>
+                                                <div className="ap-user-name">{detail.assigned_to_name || detail.assigned_to_username}</div>
+                                                {detail.assigned_to_email && (
+                                                    <div className="ap-user-pos">{detail.assigned_to_email}</div>
+                                                )}
+                                            </div>
+                                        </div>
+                                        {detail.assigned_since && (
+                                            <div className="ap-info-row">
+                                                <span className="ap-info-label">Zugewiesen seit</span>
+                                                <span className="ap-info-value">{fmtDate(detail.assigned_since)}</span>
+                                            </div>
+                                        )}
+                                        {canWrite() && (
+                                            <div className="ap-info-row" style={{ borderBottom: 'none', marginTop: 6 }}>
+                                                <span />
+                                                <button className="ap-btn ap-btn-sm ap-btn-danger-outline" onClick={handleUnassign}>
+                                                    ✕ Zuweisung aufheben
+                                                </button>
+                                            </div>
+                                        )}
+                                    </>
+                                ) : (
+                                    <div style={{ color: '#64748b', fontSize: 13, padding: '12px 0' }}>Kein Benutzer zugewiesen</div>
+                                )}
                             </div>
-                            <div style={{ padding: '8px 24px 24px' }}>
-                                <InspectionSection
-                                    assetId={inspectionAsset.id}
-                                    onUpdated={loadAssets}
-                                />
+
+                            {/* Agent-Status */}
+                            <div className="ap-card">
+                                <div className="ap-card-title">🤖 Agent-Status</div>
+                                {agent ? (
+                                    <>
+                                        {agent.cpu_usage !== undefined && agent.cpu_usage !== null && (
+                                            <div className="ap-agent-metric">
+                                                <span className="ap-agent-metric-label">CPU</span>
+                                                <div className="ap-agent-metric-bar">
+                                                    <div className="ap-progress-fill ap-fill-green" style={{ height: '100%', width: `${agent.cpu_usage}%` }} />
+                                                </div>
+                                                <span className="ap-agent-metric-value">{agent.cpu_usage}%</span>
+                                            </div>
+                                        )}
+                                        {agent.ram_used !== undefined && agent.ram_total !== undefined && (
+                                            <div className="ap-agent-metric">
+                                                <span className="ap-agent-metric-label">RAM</span>
+                                                <div className="ap-agent-metric-bar">
+                                                    <div className="ap-progress-fill ap-fill-teal" style={{ height: '100%', width: `${Math.round((agent.ram_used / agent.ram_total) * 100)}%` }} />
+                                                </div>
+                                                <span className="ap-agent-metric-value">{(agent.ram_used / 1024).toFixed(1)} / {(agent.ram_total / 1024).toFixed(0)} GB</span>
+                                            </div>
+                                        )}
+                                        {agent.disk_used !== undefined && agent.disk_total !== undefined && (
+                                            <div className="ap-agent-metric">
+                                                <span className="ap-agent-metric-label">Disk</span>
+                                                <div className="ap-agent-metric-bar">
+                                                    <div className="ap-progress-fill ap-fill-amber" style={{ height: '100%', width: `${Math.round((agent.disk_used / agent.disk_total) * 100)}%` }} />
+                                                </div>
+                                                <span className="ap-agent-metric-value">{Math.round(agent.disk_used)} / {Math.round(agent.disk_total)} GB</span>
+                                            </div>
+                                        )}
+                                        <div style={{ height: 8 }} />
+                                        {[
+                                            ['Letzter Check-in', relativeTime(agent.last_seen), online ? '#34d399' : null],
+                                            ['Agent-Version', agent.agent_version ? `v${agent.agent_version}` : '—'],
+                                            ['Hostname', agent.hostname || agent.computer_name || '—'],
+                                        ].map(([label, val, color]) => (
+                                            <div key={label} className="ap-info-row">
+                                                <span className="ap-info-label">{label}</span>
+                                                <span className="ap-info-value" style={color ? { color } : {}}>{val}</span>
+                                            </div>
+                                        ))}
+                                    </>
+                                ) : (
+                                    <div style={{ color: '#64748b', fontSize: 13, padding: '12px 0' }}>Kein Agent-Datensatz gefunden</div>
+                                )}
                             </div>
                         </div>
+                    </>
+                )}
+
+                {/* ── TAB: WARTUNG ── */}
+                {activeTab === 'wartung' && (
+                    <div className="ap-content-grid2">
+                        <div className="ap-card">
+                            <div className="ap-card-title">📅 Wartungsplan</div>
+                            {inspections.length === 0 ? (
+                                <div style={{ color: '#64748b', fontSize: 13 }}>Noch keine Wartungen erfasst</div>
+                            ) : (
+                                <div className="ap-timeline">
+                                    {inspections.map((ins, i) => (
+                                        <div key={i} className="ap-timeline-item">
+                                            <div className={`ap-timeline-dot ${ins.result === 'geplant' ? 'ap-timeline-dot--planned' : ''}`} />
+                                            <div className="ap-timeline-date">
+                                                {fmtDate(ins.date || ins.inspection_date)} · {ins.result || 'Abgeschlossen'}
+                                            </div>
+                                            <div className="ap-timeline-title">{ins.type || ins.inspection_type || 'Wartung'}</div>
+                                            {ins.notes && <div className="ap-timeline-desc">{ins.notes}</div>}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                        {canWrite() && (
+                            <div className="ap-card">
+                                <div className="ap-card-title">🔧 Wartung eintragen</div>
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                                    <div>
+                                        <div className="ap-form-label" style={{ marginBottom: 5 }}>Wartungstyp</div>
+                                        <select className="ap-form-input" value={maintForm.type} onChange={e => setMaintForm(f => ({ ...f, type: e.target.value }))}>
+                                            <option>Jährliche Inspektion</option>
+                                            <option>Software-Update</option>
+                                            <option>Hardware-Reparatur</option>
+                                            <option>Akku-Austausch</option>
+                                            <option>Reinigung</option>
+                                            <option>Sonstiges</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <div className="ap-form-label" style={{ marginBottom: 5 }}>Ergebnis</div>
+                                        <select className="ap-form-input" value={maintForm.result} onChange={e => setMaintForm(f => ({ ...f, result: e.target.value }))}>
+                                            <option value="">Abgeschlossen</option>
+                                            <option value="geplant">Geplant</option>
+                                            <option value="in_arbeit">In Arbeit</option>
+                                            <option value="abgeschlossen">Abgeschlossen</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <div className="ap-form-label" style={{ marginBottom: 5 }}>Datum</div>
+                                        <input
+                                            type="date"
+                                            className="ap-form-input"
+                                            value={maintForm.date}
+                                            onChange={e => setMaintForm(f => ({ ...f, date: e.target.value }))}
+                                        />
+                                    </div>
+                                    <div>
+                                        <div className="ap-form-label" style={{ marginBottom: 5 }}>Notizen</div>
+                                        <textarea
+                                            rows={3}
+                                            className="ap-form-input"
+                                            placeholder="Optionale Notizen…"
+                                            value={maintForm.notes}
+                                            onChange={e => setMaintForm(f => ({ ...f, notes: e.target.value }))}
+                                        />
+                                    </div>
+                                    <button
+                                        className="ap-btn ap-btn-teal"
+                                        style={{ alignSelf: 'flex-end' }}
+                                        onClick={handleMaintSubmit}
+                                        disabled={maintSaving}
+                                    >
+                                        {maintSaving ? 'Speichern…' : 'Wartung eintragen'}
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {/* ── TAB: VERLAUF ── */}
+                {activeTab === 'verlauf' && (
+                    <div className="ap-card">
+                        <div className="ap-card-title">🕐 Zuweisungshistorie</div>
+                        {history.length === 0 ? (
+                            <div style={{ color: '#64748b', fontSize: 13 }}>Keine Historiendaten vorhanden</div>
+                        ) : (
+                            <table className="ap-history-table">
+                                <thead>
+                                    <tr>
+                                        <th>Benutzer</th>
+                                        <th>Von</th>
+                                        <th>Bis</th>
+                                        <th>Notizen</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {history.map((h, i) => (
+                                        <tr key={i}>
+                                            <td>{h.username || h.user_name || h.assigned_to_username || '—'}</td>
+                                            <td>{fmtDate(h.assigned_at || h.from_date)}</td>
+                                            <td>{h.unassigned_at || h.to_date ? fmtDate(h.unassigned_at || h.to_date) : <span style={{ color: '#64748b' }}>Aktiv</span>}</td>
+                                            <td style={{ color: '#64748b' }}>{h.notes || '—'}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        )}
+                    </div>
+                )}
+
+                {/* ── TAB: AGENT-DATEN ── */}
+                {activeTab === 'agent' && (
+                    <div className="ap-agent-data-grid">
+                        {/* System */}
+                        <div className="ap-card">
+                            <div className="ap-card-title">💻 System</div>
+                            {agent ? (
+                                [
+                                    ['Hostname', agent.hostname || agent.computer_name],
+                                    ['OS', agent.os_version || agent.os],
+                                    ['Build', agent.os_build],
+                                    ['Architektur', agent.architecture],
+                                    ['Prozessor', agent.cpu_model],
+                                    ['Kerne', agent.cpu_cores ? `${agent.cpu_cores} Kerne` : undefined],
+                                    ['RAM gesamt', agent.ram_total ? `${(agent.ram_total / 1024).toFixed(0)} GB` : undefined],
+                                ].map(([label, val]) => val ? (
+                                    <div key={label} className="ap-info-row">
+                                        <span className="ap-info-label">{label}</span>
+                                        <span className="ap-info-value">{val}</span>
+                                    </div>
+                                ) : null)
+                            ) : <div style={{ color: '#64748b', fontSize: 13 }}>Kein Agent verbunden</div>}
+                        </div>
+                        {/* Netzwerk */}
+                        <div className="ap-card">
+                            <div className="ap-card-title">🌐 Netzwerk</div>
+                            {agent ? (
+                                [
+                                    ['IPv4', agent.ip_address],
+                                    ['IPv6', agent.ipv6_address],
+                                    ['MAC', agent.mac_address],
+                                    ['Interface', agent.network_interface],
+                                    ['Gateway', agent.gateway],
+                                    ['DNS', agent.dns_server],
+                                ].map(([label, val]) => val ? (
+                                    <div key={label} className="ap-info-row">
+                                        <span className="ap-info-label">{label}</span>
+                                        <span className="ap-info-value" style={{ fontSize: 12 }}>{val}</span>
+                                    </div>
+                                ) : null)
+                            ) : <div style={{ color: '#64748b', fontSize: 13 }}>Kein Agent verbunden</div>}
+                        </div>
+                        {/* Sicherheit */}
+                        <div className="ap-card">
+                            <div className="ap-card-title">🛡️ Sicherheit</div>
+                            {agent ? (
+                                <>
+                                    <div className="ap-info-row">
+                                        <span className="ap-info-label">Windows Defender</span>
+                                        <span className="ap-info-value" style={{ color: agent.defender_enabled ? '#34d399' : '#ef4444' }}>
+                                            {agent.defender_enabled ? '✓ Aktiv' : '✗ Inaktiv'}
+                                        </span>
+                                    </div>
+                                    {agent.defender_signatures && (
+                                        <div className="ap-info-row">
+                                            <span className="ap-info-label">Signaturen</span>
+                                            <span className="ap-info-value">{agent.defender_signatures}</span>
+                                        </div>
+                                    )}
+                                    <div className="ap-info-row">
+                                        <span className="ap-info-label">BitLocker</span>
+                                        <span className="ap-info-value" style={{ color: agent.bitlocker_enabled ? '#34d399' : '#94a3b8' }}>
+                                            {agent.bitlocker_enabled ? '✓ Aktiv' : '— Nicht aktiv'}
+                                        </span>
+                                    </div>
+                                    <div className="ap-info-row">
+                                        <span className="ap-info-label">Firewall</span>
+                                        <span className="ap-info-value" style={{ color: agent.firewall_enabled ? '#34d399' : '#ef4444' }}>
+                                            {agent.firewall_enabled ? '✓ Aktiv' : '✗ Inaktiv'}
+                                        </span>
+                                    </div>
+                                    {agent.pending_reboot !== undefined && (
+                                        <div className="ap-info-row">
+                                            <span className="ap-info-label">Pending Reboot</span>
+                                            <span className="ap-info-value" style={{ color: agent.pending_reboot ? '#f59e0b' : '#34d399' }}>
+                                                {agent.pending_reboot ? '⚠️ Ja' : 'Keine'}
+                                            </span>
+                                        </div>
+                                    )}
+                                </>
+                            ) : <div style={{ color: '#64748b', fontSize: 13 }}>Kein Agent verbunden</div>}
+                        </div>
+                        {/* Updates */}
+                        <div className="ap-card">
+                            <div className="ap-card-title">📦 Updates</div>
+                            {agent ? (
+                                [
+                                    ['Ausstehend', agent.pending_updates !== undefined ? `${agent.pending_updates} Updates` : undefined, agent.pending_updates > 0 ? '#f59e0b' : '#34d399'],
+                                    ['Letztes Update', agent.last_update_date ? fmtDate(agent.last_update_date) : undefined],
+                                    ['Agent-Version', agent.agent_version ? `v${agent.agent_version}` : undefined],
+                                    ['Letzter Check-in', relativeTime(agent.last_seen), online ? '#34d399' : null],
+                                ].map(([label, val, color]) => val !== undefined ? (
+                                    <div key={label} className="ap-info-row">
+                                        <span className="ap-info-label">{label}</span>
+                                        <span className="ap-info-value" style={color ? { color } : {}}>{val}</span>
+                                    </div>
+                                ) : null)
+                            ) : <div style={{ color: '#64748b', fontSize: 13 }}>Kein Agent verbunden</div>}
+                        </div>
                     </div>
                 )}
+
+                {/* ── TAB: DOKUMENTE ── */}
+                {activeTab === 'dokumente' && (
+                    <div className="ap-card">
+                        <div className="ap-card-title">📁 Dokumente &amp; Aktionen</div>
+                        <div
+                            className="ap-doc-item"
+                            onClick={() => window.open(`${API}/assets/${detail.id}/label`, '_blank')}
+                        >
+                            <div className="ap-doc-icon">🏷️</div>
+                            <div>
+                                <div className="ap-doc-name">Asset-Label drucken</div>
+                                <div className="ap-doc-meta">QR-Code Label als PDF öffnen</div>
+                            </div>
+                        </div>
+                        {detail.status === 'zugewiesen' && (
+                            <div
+                                className="ap-doc-item"
+                                onClick={() => window.open(`${API}/assets/${detail.id}/handover-protocol`, '_blank')}
+                            >
+                                <div className="ap-doc-icon" style={{ background: 'rgba(52,211,153,0.1)' }}>📋</div>
+                                <div>
+                                    <div className="ap-doc-name">Übergabeprotokoll</div>
+                                    <div className="ap-doc-meta">PDF mit Gerätedaten und Unterschriftenfeld</div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {/* Modals */}
+                {showEdit && (
+                    <EditModal
+                        asset={detail}
+                        onClose={() => setShowEdit(false)}
+                        onSaved={() => {
+                            setShowEdit(false);
+                            loadAssets();
+                            // Reload detail
+                            authFetch(`${API}/assets/${detail.id}`).then(r => r.json()).then(setDetail).catch(() => {});
+                        }}
+                    />
+                )}
+                {showAssign && (
+                    <AssignModal
+                        asset={detail}
+                        onClose={() => setShowAssign(false)}
+                        onAssigned={() => {
+                            setShowAssign(false);
+                            loadAssets();
+                            authFetch(`${API}/assets/${detail.id}`).then(r => r.json()).then(setDetail).catch(() => {});
+                        }}
+                    />
+                )}
+            </>
+        );
+    };
+
+    /* ─────────────────────────────────────────────────────────
+       MAIN RENDER
+    ───────────────────────────────────────────────────────── */
+    if (loading) {
+        return (
+            <div className="ap-page">
+                <div className="ap-empty-state" style={{ margin: 'auto' }}>
+                    <div className="ap-empty-icon">⏳</div>
+                    <div className="ap-empty-text">Laden…</div>
+                </div>
+            </div>
+        );
+    }
+
+    const userFilterActive = searchMode === 'user' && searchTerm;
+    const userFilterMatches = userFilterActive
+        ? [...new Set(filteredAssets.map(a => a.assigned_to_name || a.assigned_to_username).filter(Boolean))]
+        : [];
+
+    return (
+        <div className="ap-page">
+            {/* ── LEFT PANEL ── */}
+            <div className="ap-left-panel">
+                <div className="ap-left-header">
+                    <div className="ap-panel-title-row">
+                        <span className="ap-panel-title">Assets</span>
+                        <span className="ap-panel-badge">{assets.length}</span>
+                    </div>
+
+                    {/* Suchmodus Toggle */}
+                    <div className="ap-search-toggle">
+                        <button
+                            className={`ap-search-toggle-btn ${searchMode === 'asset' ? 'ap-search-toggle-btn--active' : ''}`}
+                            onClick={() => { setSearchMode('asset'); setSearchTerm(''); }}
+                        >🔍 Asset suchen</button>
+                        <button
+                            className={`ap-search-toggle-btn ${searchMode === 'user' ? 'ap-search-toggle-btn--active' : ''}`}
+                            onClick={() => { setSearchMode('user'); setSearchTerm(''); }}
+                        >👤 Benutzer suchen</button>
+                    </div>
+
+                    {/* Suchfeld */}
+                    <div className="ap-search-box">
+                        <span className="ap-search-icon">{searchMode === 'user' ? '👤' : '🔍'}</span>
+                        <input
+                            className="ap-search-input"
+                            type="text"
+                            placeholder={searchMode === 'user' ? 'Benutzername…' : 'Suchen…'}
+                            value={searchTerm}
+                            onChange={e => setSearchTerm(e.target.value)}
+                        />
+                    </div>
+
+                    {/* Typ-Pills */}
+                    <div className="ap-pills-row">
+                        {[
+                            ['all', 'Alle'],
+                            ['notebook', 'Notebook'],
+                            ['monitor', 'Monitor'],
+                            ['headset', 'Headset'],
+                            ['drucker', 'Drucker'],
+                            ['sonstiges', 'Sonstiges'],
+                        ].map(([val, label]) => (
+                            <span
+                                key={val}
+                                className={`ap-pill ${typeFilter === val ? 'ap-pill--active' : ''}`}
+                                onClick={() => setTypeFilter(val)}
+                            >{label}</span>
+                        ))}
+                    </div>
+
+                    {/* Status-Pills */}
+                    <div className="ap-pills-row">
+                        {[
+                            ['all', 'Alle'],
+                            ['verfuegbar', 'Verfügbar'],
+                            ['zugewiesen', 'Zugewiesen'],
+                            ['inaktiv', 'Inaktiv'],
+                            ['beschaedigt', 'Beschädigt'],
+                        ].map(([val, label]) => (
+                            <span
+                                key={val}
+                                className={`ap-pill ${statusFilter === val ? 'ap-pill--active' : ''}`}
+                                onClick={() => setStatusFilter(val)}
+                            >{label}</span>
+                        ))}
+                    </div>
+                </div>
+
+                {/* User-Filter-Banner */}
+                {userFilterActive && (
+                    <div className="ap-user-filter-banner">
+                        <span>👤</span>
+                        <span className="ap-user-filter-text">
+                            {userFilterMatches.length > 0
+                                ? <>Assets von: <strong>{userFilterMatches.join(', ')}</strong> ({filteredAssets.length})</>
+                                : <>Kein Treffer für <strong>"{searchTerm}"</strong></>}
+                        </span>
+                        <button className="ap-user-filter-clear" onClick={() => setSearchTerm('')}>✕</button>
+                    </div>
+                )}
+
+                {/* Stat-Grid */}
+                <div className="ap-stat-grid">
+                    <div className="ap-stat-card ap-stat-card--teal">
+                        <div className="ap-stat-value">{stats.total || assets.length}</div>
+                        <div className="ap-stat-label">Gesamt</div>
+                    </div>
+                    <div className="ap-stat-card">
+                        <div className="ap-stat-value" style={{ color: '#60a5fa' }}>{stats.assigned}</div>
+                        <div className="ap-stat-label">Zugewiesen</div>
+                    </div>
+                    <div className="ap-stat-card ap-stat-card--green">
+                        <div className="ap-stat-value">{stats.available}</div>
+                        <div className="ap-stat-label">Verfügbar</div>
+                    </div>
+                    <div className="ap-stat-card ap-stat-card--amber">
+                        <div className="ap-stat-value">{stats.maintenance}</div>
+                        <div className="ap-stat-label">In Wartung</div>
+                    </div>
+                </div>
+
+                {/* Asset-Liste */}
+                <div className="ap-asset-list">
+                    {filteredAssets.length === 0 && (
+                        <div style={{ padding: '20px 12px', textAlign: 'center', color: '#475569', fontSize: 13 }}>
+                            Keine Assets gefunden
+                        </div>
+                    )}
+                    {filteredAssets.map(asset => {
+                        const agent = getAgent(asset.name);
+                        const online = isOnline(agent);
+                        return (
+                            <div
+                                key={asset.id}
+                                className={`ap-asset-item ${selectedId === asset.id ? 'ap-asset-item--active' : ''}`}
+                                onClick={() => setSelectedId(asset.id)}
+                            >
+                                <div className="ap-asset-icon-wrap">{getTypeIcon(asset.type)}</div>
+                                <div className="ap-asset-info">
+                                    <div className="ap-asset-name">{asset.name}</div>
+                                    <div className="ap-asset-sub">
+                                        {asset.inventory_number && `${asset.inventory_number} · `}
+                                        {asset.serial_number ? `SN: ${asset.serial_number}` : asset.model || ''}
+                                    </div>
+                                </div>
+                                <div className="ap-asset-meta">
+                                    <span className={`ap-status-badge ${STATUS_CSS[asset.status] || ''}`}>
+                                        {STATUS_LABELS[asset.status] || asset.status}
+                                    </span>
+                                    <div className={`ap-online-dot ${online ? 'ap-online-dot--on' : ''}`} />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* ── RIGHT PANEL ── */}
+            <div className="ap-right-panel">
+                {renderDetail()}
             </div>
         </div>
     );
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index fbcb0e5..c53c1ce 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -3209,3 +3209,850 @@ mark {
   .bv-contract-grid { grid-template-columns: 1fr; }
   .bv-lic-summary { grid-template-columns: 1fr; }
 }
+
+/* ============================================================================
+   ASSETS PAGE — Master-Detail Layout (.ap-*)
+   ============================================================================ */
+
+/* ── Page wrapper ── */
+.ap-page {
+  display: flex;
+  height: calc(100vh - var(--topbar-height, 60px));
+  overflow: hidden;
+  background: transparent;
+}
+
+/* ── Left Panel ── */
+.ap-left-panel {
+  width: 340px;
+  flex-shrink: 0;
+  border-right: 1px solid rgba(255,255,255,0.08);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(255,255,255,0.015);
+}
+
+.ap-left-header {
+  padding: 20px 16px 12px;
+  flex-shrink: 0;
+}
+
+.ap-panel-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.ap-panel-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f1f5f9;
+}
+.ap-panel-badge {
+  background: rgba(13,148,136,0.2);
+  color: #0d9488;
+  border: 1px solid rgba(13,148,136,0.3);
+  border-radius: 12px;
+  padding: 2px 9px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* ── Search Toggle ── */
+.ap-search-toggle {
+  display: flex;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px;
+  padding: 3px;
+  margin-bottom: 10px;
+}
+.ap-search-toggle-btn {
+  flex: 1;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  text-align: center;
+}
+.ap-search-toggle-btn--active {
+  background: rgba(13,148,136,0.2);
+  color: #0d9488;
+}
+.ap-search-toggle-btn:hover:not(.ap-search-toggle-btn--active) { color: #94a3b8; }
+
+/* ── Search Box ── */
+.ap-search-box {
+  position: relative;
+  margin-bottom: 12px;
+}
+.ap-search-input {
+  width: 100%;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px;
+  padding: 8px 12px 8px 34px;
+  color: #f1f5f9;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s;
+  font-family: inherit;
+}
+.ap-search-input::placeholder { color: #475569; }
+.ap-search-input:focus { border-color: rgba(13,148,136,0.5); }
+.ap-search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #475569;
+  font-size: 13px;
+  pointer-events: none;
+}
+
+/* ── Filter Pills ── */
+.ap-pills-row {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin-bottom: 7px;
+}
+.ap-pill {
+  padding: 3px 9px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid rgba(255,255,255,0.1);
+  background: transparent;
+  color: #94a3b8;
+  transition: all 0.15s;
+  white-space: nowrap;
+  user-select: none;
+}
+.ap-pill:hover { border-color: rgba(255,255,255,0.2); color: #f1f5f9; }
+.ap-pill--active {
+  background: rgba(13,148,136,0.2);
+  border-color: rgba(13,148,136,0.5);
+  color: #0d9488;
+}
+
+/* ── Stat Grid ── */
+.ap-stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 10px 16px;
+  flex-shrink: 0;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+.ap-stat-card {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+.ap-stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #f1f5f9;
+  line-height: 1;
+}
+.ap-stat-label {
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 3px;
+}
+.ap-stat-card--teal .ap-stat-value { color: #0d9488; }
+.ap-stat-card--green .ap-stat-value { color: #34d399; }
+.ap-stat-card--amber .ap-stat-value { color: #f59e0b; }
+
+/* ── User Filter Banner ── */
+.ap-user-filter-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(96,165,250,0.1);
+  border: 1px solid rgba(96,165,250,0.25);
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 0 16px 8px;
+  flex-shrink: 0;
+  font-size: 11px;
+  color: #93c5fd;
+}
+.ap-user-filter-text { flex: 1; min-width: 0; }
+.ap-user-filter-text strong { color: #bfdbfe; }
+.ap-user-filter-clear {
+  background: none;
+  border: none;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 0 2px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color 0.12s;
+}
+.ap-user-filter-clear:hover { color: #ef4444; }
+
+/* ── Asset List ── */
+.ap-asset-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 8px;
+}
+.ap-asset-list::-webkit-scrollbar { width: 4px; }
+.ap-asset-list::-webkit-scrollbar-track { background: transparent; }
+.ap-asset-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
+
+.ap-asset-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.12s;
+  border: 1px solid transparent;
+  margin-bottom: 3px;
+}
+.ap-asset-item:hover { background: rgba(255,255,255,0.04); }
+.ap-asset-item--active {
+  background: rgba(13,148,136,0.1);
+  border-color: rgba(13,148,136,0.3);
+}
+
+.ap-asset-icon-wrap {
+  width: 36px;
+  height: 36px;
+  background: rgba(255,255,255,0.06);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+.ap-asset-item--active .ap-asset-icon-wrap { background: rgba(13,148,136,0.15); }
+
+.ap-asset-info { flex: 1; min-width: 0; }
+.ap-asset-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #f1f5f9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ap-asset-sub {
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ap-asset-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* ── Status Badges ── */
+.ap-status-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.ap-badge-available { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
+.ap-badge-assigned  { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
+.ap-badge-inactive  { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
+.ap-badge-damaged   { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
+
+.ap-type-badge {
+  background: rgba(13,148,136,0.15);
+  color: #0d9488;
+  border: 1px solid rgba(13,148,136,0.3);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 10px;
+}
+
+/* ── Online Dot ── */
+.ap-online-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #475569;
+  flex-shrink: 0;
+}
+.ap-online-dot--on { background: #34d399; box-shadow: 0 0 4px rgba(52,211,153,0.6); }
+
+/* ── Online Badge ── */
+.ap-online-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: 12px;
+}
+.ap-online-badge--on { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
+.ap-online-badge--off { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
+
+/* ── Right Panel ── */
+.ap-right-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  min-width: 0;
+}
+.ap-right-panel::-webkit-scrollbar { width: 6px; }
+.ap-right-panel::-webkit-scrollbar-track { background: transparent; }
+.ap-right-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+
+/* ── Empty State ── */
+.ap-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  color: #475569;
+  text-align: center;
+}
+.ap-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
+.ap-empty-text { font-size: 15px; font-weight: 600; color: #64748b; }
+.ap-empty-sub { font-size: 13px; color: #475569; margin-top: 5px; }
+
+/* ── Detail Header ── */
+.ap-detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+.ap-detail-icon-box {
+  width: 64px;
+  height: 64px;
+  background: rgba(13,148,136,0.15);
+  border: 1px solid rgba(13,148,136,0.3);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  flex-shrink: 0;
+}
+.ap-detail-title-area { flex: 1; }
+.ap-detail-name {
+  font-size: 22px;
+  font-weight: 700;
+  color: #f1f5f9;
+  margin-bottom: 4px;
+}
+.ap-detail-sub {
+  font-size: 13px;
+  color: #64748b;
+  margin-bottom: 10px;
+}
+.ap-detail-badges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+}
+.ap-detail-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  align-items: flex-start;
+  padding-top: 4px;
+}
+
+/* ── Buttons ── */
+.ap-btn {
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  font-family: inherit;
+}
+.ap-btn-outline {
+  background: transparent;
+  border: 1px solid rgba(255,255,255,0.15);
+  color: #94a3b8;
+}
+.ap-btn-outline:hover { border-color: rgba(255,255,255,0.3); color: #f1f5f9; }
+.ap-btn-teal { background: #0d9488; color: #fff; }
+.ap-btn-teal:hover { background: #0f766e; }
+.ap-btn-teal:disabled { opacity: 0.5; cursor: not-allowed; }
+.ap-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
+.ap-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
+.ap-btn-danger-outline {
+  background: transparent;
+  border: 1px solid rgba(239,68,68,0.3);
+  color: #ef4444;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: inherit;
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 6px;
+}
+.ap-btn-danger-outline:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.5); }
+.ap-btn-icon {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: #94a3b8;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+.ap-btn-icon:hover { background: rgba(255,255,255,0.1); }
+
+/* ── More Menu ── */
+.ap-more-wrap { position: relative; }
+.ap-more-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  background: #1e293b;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  min-width: 200px;
+  overflow: hidden;
+  z-index: 200;
+}
+.ap-more-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  cursor: pointer;
+  font-size: 13px;
+  color: #f1f5f9;
+  transition: background 0.12s;
+  font-family: inherit;
+}
+.ap-more-item:last-child { border-bottom: none; }
+.ap-more-item:hover { background: rgba(255,255,255,0.06); }
+.ap-more-item--danger { color: #ef4444; }
+.ap-more-item--danger:hover { background: rgba(239,68,68,0.08); }
+
+/* ── KPI Grid ── */
+.ap-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.ap-kpi-card {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 10px;
+  padding: 14px 16px;
+  backdrop-filter: blur(10px);
+}
+.ap-kpi-label {
+  font-size: 11px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+.ap-kpi-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #f1f5f9;
+  line-height: 1.1;
+}
+.ap-kpi-sub { font-size: 11px; color: #64748b; margin-top: 3px; }
+.ap-kpi-card--amber .ap-kpi-value { color: #f59e0b; }
+.ap-kpi-card--amber { border-color: rgba(245,158,11,0.2); }
+.ap-kpi-card--red .ap-kpi-value { color: #ef4444; }
+.ap-kpi-card--red { border-color: rgba(239,68,68,0.2); }
+.ap-kpi-card--green .ap-kpi-value { color: #34d399; }
+.ap-kpi-card--blue .ap-kpi-value { color: #60a5fa; }
+
+/* ── Tab Bar ── */
+.ap-tab-bar {
+  display: flex;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  margin-bottom: 20px;
+}
+.ap-tab {
+  padding: 10px 18px;
+  font-size: 13px;
+  color: #64748b;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  margin-bottom: -1px;
+  white-space: nowrap;
+}
+.ap-tab:hover { color: #94a3b8; }
+.ap-tab--active { color: #0d9488; border-bottom-color: #0d9488; }
+
+/* ── Content Grid ── */
+.ap-content-grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+/* ── Card ── */
+.ap-card {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 10px;
+  padding: 18px;
+  backdrop-filter: blur(10px);
+}
+.ap-card-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  margin-bottom: 14px;
+}
+
+/* ── Info Row ── */
+.ap-info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+.ap-info-row:last-child { border-bottom: none; }
+.ap-info-label { color: #64748b; font-size: 12px; }
+.ap-info-value {
+  color: #f1f5f9;
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ap-copy-btn {
+  background: rgba(255,255,255,0.05);
+  border: none;
+  border-radius: 4px;
+  color: #64748b;
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 11px;
+  transition: all 0.12s;
+  font-family: inherit;
+}
+.ap-copy-btn:hover { background: rgba(255,255,255,0.1); color: #94a3b8; }
+
+/* ── AfA Bar ── */
+.ap-afa-bar-wrap { margin-top: 10px; }
+.ap-afa-bar-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: #64748b;
+  margin-bottom: 5px;
+}
+.ap-progress-bar {
+  height: 6px;
+  background: rgba(255,255,255,0.08);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.ap-progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+.ap-fill-teal { background: linear-gradient(90deg, #0d9488, #14b8a6); }
+.ap-fill-green { background: linear-gradient(90deg, #059669, #34d399); }
+.ap-fill-amber { background: linear-gradient(90deg, #d97706, #f59e0b); }
+.ap-fill-red { background: linear-gradient(90deg, #dc2626, #ef4444); }
+.ap-afa-dates {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: #475569;
+  margin-top: 4px;
+}
+
+/* ── User Card ── */
+.ap-user-card-inner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.ap-user-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0d9488, #0891b2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  flex-shrink: 0;
+}
+.ap-user-name { font-size: 14px; font-weight: 600; color: #f1f5f9; }
+.ap-user-pos { font-size: 12px; color: #64748b; margin-top: 2px; }
+
+/* ── Agent Metric ── */
+.ap-agent-metric {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.ap-agent-metric-label { font-size: 12px; color: #64748b; width: 40px; flex-shrink: 0; }
+.ap-agent-metric-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
+.ap-agent-metric-value { font-size: 12px; color: #94a3b8; width: 90px; text-align: right; flex-shrink: 0; }
+
+/* ── Timeline ── */
+.ap-timeline { position: relative; padding-left: 24px; }
+.ap-timeline::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: rgba(255,255,255,0.08);
+}
+.ap-timeline-item { position: relative; margin-bottom: 16px; }
+.ap-timeline-dot {
+  position: absolute;
+  left: -20px;
+  top: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #0d9488;
+  border: 2px solid #0f172a;
+}
+.ap-timeline-dot--planned { background: #f59e0b; }
+.ap-timeline-date { font-size: 11px; color: #64748b; margin-bottom: 3px; }
+.ap-timeline-title { font-size: 13px; font-weight: 500; color: #f1f5f9; }
+.ap-timeline-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
+
+/* ── History Table ── */
+.ap-history-table { width: 100%; border-collapse: collapse; }
+.ap-history-table th {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 8px 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+.ap-history-table td {
+  padding: 10px 12px;
+  font-size: 13px;
+  color: #94a3b8;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+.ap-history-table tr:last-child td { border-bottom: none; }
+.ap-history-table td:first-child { color: #f1f5f9; }
+
+/* ── Agent Data Grid ── */
+.ap-agent-data-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+/* ── Document Items ── */
+.ap-doc-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.ap-doc-item:hover { background: rgba(255,255,255,0.06); }
+.ap-doc-icon {
+  width: 36px;
+  height: 36px;
+  background: rgba(96,165,250,0.1);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+.ap-doc-name { font-size: 13px; font-weight: 500; color: #f1f5f9; }
+.ap-doc-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
+
+/* ── Modal ── */
+.ap-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.ap-modal {
+  background: #1e293b;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 14px;
+  width: 90vw;
+  max-height: calc(100vh - 60px);
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+}
+.ap-modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 0;
+  margin-bottom: 16px;
+}
+.ap-modal-title { font-size: 16px; font-weight: 700; color: #f1f5f9; }
+.ap-modal-close {
+  background: none;
+  border: none;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 22px;
+  line-height: 1;
+  font-family: inherit;
+}
+.ap-modal-body { padding: 0 24px 16px; }
+.ap-modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 24px;
+  border-top: 1px solid rgba(255,255,255,0.08);
+}
+.ap-modal-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #64748b;
+  margin-bottom: 12px;
+}
+
+/* ── Form in Modal ── */
+.ap-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
+.ap-form-row { display: flex; flex-direction: column; gap: 5px; }
+.ap-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.ap-form-input {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 7px;
+  padding: 8px 10px;
+  color: #f1f5f9;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s;
+  font-family: inherit;
+  width: 100%;
+  resize: vertical;
+}
+.ap-form-input:focus { border-color: rgba(13,148,136,0.5); }
+.ap-form-input::placeholder { color: #475569; }
+.ap-form-input option { background: #1e293b; color: #f1f5f9; }
+
+/* ── Light Theme Overrides ── */
+html[data-theme="light"] .ap-left-panel {
+  background: rgba(0,0,0,0.02);
+  border-right-color: #e2e8f0;
+}
+html[data-theme="light"] .ap-panel-title { color: #1d1d1f; }
+html[data-theme="light"] .ap-search-input { background: #ffffff; border-color: #e2e8f0; color: #1d1d1f; }
+html[data-theme="light"] .ap-search-input:focus { border-color: #008487; }
+html[data-theme="light"] .ap-search-input::placeholder { color: #94a3b8; }
+html[data-theme="light"] .ap-asset-item:hover { background: rgba(0,0,0,0.03); }
+html[data-theme="light"] .ap-asset-item--active { background: rgba(0,132,135,0.07); border-color: rgba(0,132,135,0.3); }
+html[data-theme="light"] .ap-asset-name { color: #1d1d1f; }
+html[data-theme="light"] .ap-asset-sub { color: #6e6e73; }
+html[data-theme="light"] .ap-stat-card { background: rgba(0,0,0,0.03); border-color: #e2e8f0; }
+html[data-theme="light"] .ap-stat-value { color: #1d1d1f; }
+html[data-theme="light"] .ap-detail-name { color: #1d1d1f; }
+html[data-theme="light"] .ap-card { background: #ffffff; border-color: #e2e8f0; }
+html[data-theme="light"] .ap-kpi-card { background: #ffffff; border-color: #e2e8f0; }
+html[data-theme="light"] .ap-kpi-value { color: #1d1d1f; }
+html[data-theme="light"] .ap-info-value { color: #1d1d1f; }
+html[data-theme="light"] .ap-info-row { border-bottom-color: #f1f5f9; }
+html[data-theme="light"] .ap-modal { background: #ffffff; border-color: #e2e8f0; }
+html[data-theme="light"] .ap-modal-title { color: #1d1d1f; }
+html[data-theme="light"] .ap-form-input { background: #ffffff; border-color: #e2e8f0; color: #1d1d1f; }
+html[data-theme="light"] .ap-form-input option { background: #ffffff; color: #1d1d1f; }
+html[data-theme="light"] .ap-more-menu { background: #ffffff; border-color: #e2e8f0; }
+html[data-theme="light"] .ap-more-item { color: #1d1d1f; border-bottom-color: #f1f5f9; }
+html[data-theme="light"] .ap-more-item:hover { background: #f5f5f7; }
+html[data-theme="light"] .ap-timeline::before { background: #e2e8f0; }
+html[data-theme="light"] .ap-timeline-title { color: #1d1d1f; }
+html[data-theme="light"] .ap-asset-icon-wrap { background: rgba(0,0,0,0.05); }
+html[data-theme="light"] .ap-detail-icon-box { background: rgba(0,132,135,0.08); border-color: rgba(0,132,135,0.2); }
+html[data-theme="light"] .ap-search-toggle { background: rgba(0,0,0,0.04); border-color: #e2e8f0; }
+html[data-theme="light"] .ap-pill { color: #6e6e73; border-color: #e2e8f0; }
+html[data-theme="light"] .ap-pill:hover { color: #1d1d1f; border-color: #94a3b8; }
+
+/* ── Responsive ── */
+@media (max-width: 1100px) {
+  .ap-kpi-grid { grid-template-columns: repeat(2, 1fr); }
+  .ap-content-grid2 { grid-template-columns: 1fr; }
+  .ap-agent-data-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 800px) {
+  .ap-left-panel { display: none; }
+  .ap-right-panel { padding: 16px; }
+}