1525 lines
48 KiB
HTML
1525 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Asset-Verwaltung — IT Nexus</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: #0f172a;
|
|
color: #f1f5f9;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 14px;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Topbar ── */
|
|
.topbar {
|
|
background: rgba(255,255,255,0.03);
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
padding: 0 24px;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
.topbar-logo {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0d9488;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.topbar-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.1); }
|
|
.topbar-title { color: #94a3b8; font-size: 13px; }
|
|
|
|
/* ── Main Layout ── */
|
|
.main {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Left Panel ── */
|
|
.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);
|
|
}
|
|
|
|
.left-header {
|
|
padding: 20px 16px 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.panel-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.panel-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
}
|
|
.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-box {
|
|
position: relative;
|
|
margin-bottom: 12px;
|
|
}
|
|
.search-box 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;
|
|
}
|
|
.search-box input::placeholder { color: #475569; }
|
|
.search-box input:focus { border-color: rgba(13,148,136,0.5); }
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #475569;
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pills-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
}
|
|
.pill {
|
|
padding: 4px 10px;
|
|
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;
|
|
}
|
|
.pill:hover { border-color: rgba(255,255,255,0.2); color: #f1f5f9; }
|
|
.pill.active {
|
|
background: rgba(13,148,136,0.2);
|
|
border-color: rgba(13,148,136,0.5);
|
|
color: #0d9488;
|
|
}
|
|
|
|
/* ── Stat-Grid ── */
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.stat-card {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
.stat-value {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
line-height: 1;
|
|
}
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 3px;
|
|
}
|
|
.stat-card.teal .stat-value { color: #0d9488; }
|
|
.stat-card.green .stat-value { color: #34d399; }
|
|
.stat-card.amber .stat-value { color: #f59e0b; }
|
|
|
|
/* ── Asset List ── */
|
|
.asset-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 8px;
|
|
}
|
|
.asset-list::-webkit-scrollbar { width: 4px; }
|
|
.asset-list::-webkit-scrollbar-track { background: transparent; }
|
|
.asset-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
|
|
|
.asset-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 10px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.12s;
|
|
border: 1px solid transparent;
|
|
margin-bottom: 3px;
|
|
}
|
|
.asset-item:hover { background: rgba(255,255,255,0.04); }
|
|
.asset-item.active {
|
|
background: rgba(13,148,136,0.1);
|
|
border-color: rgba(13,148,136,0.3);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.asset-item.active .asset-icon-wrap {
|
|
background: rgba(13,148,136,0.15);
|
|
}
|
|
|
|
.asset-info { flex: 1; min-width: 0; }
|
|
.asset-name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #f1f5f9;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.asset-sub {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.asset-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 2px 7px;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
.status-badge.assigned {
|
|
background: rgba(96,165,250,0.15);
|
|
color: #60a5fa;
|
|
border: 1px solid rgba(96,165,250,0.25);
|
|
}
|
|
.status-badge.available {
|
|
background: rgba(52,211,153,0.15);
|
|
color: #34d399;
|
|
border: 1px solid rgba(52,211,153,0.25);
|
|
}
|
|
.status-badge.maintenance {
|
|
background: rgba(245,158,11,0.15);
|
|
color: #f59e0b;
|
|
border: 1px solid rgba(245,158,11,0.25);
|
|
}
|
|
.status-badge.notebook {
|
|
background: rgba(13,148,136,0.15);
|
|
color: #0d9488;
|
|
border: 1px solid rgba(13,148,136,0.3);
|
|
}
|
|
.status-badge.monitor-badge {
|
|
background: rgba(139,92,246,0.15);
|
|
color: #a78bfa;
|
|
border: 1px solid rgba(139,92,246,0.25);
|
|
}
|
|
|
|
.online-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #475569;
|
|
flex-shrink: 0;
|
|
}
|
|
.online-dot.online { background: #34d399; box-shadow: 0 0 4px rgba(52,211,153,0.6); }
|
|
.online-dot.warning { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.6); }
|
|
|
|
/* ── Right Panel ── */
|
|
.right-panel {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
min-width: 0;
|
|
}
|
|
.right-panel::-webkit-scrollbar { width: 6px; }
|
|
.right-panel::-webkit-scrollbar-track { background: transparent; }
|
|
.right-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
|
|
|
|
/* ── Detail Header ── */
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.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;
|
|
}
|
|
.detail-title-area { flex: 1; }
|
|
.detail-name {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
margin-bottom: 4px;
|
|
}
|
|
.detail-sub {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
margin-bottom: 10px;
|
|
}
|
|
.detail-badges {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 4px;
|
|
}
|
|
.online-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 9px;
|
|
border-radius: 12px;
|
|
background: rgba(52,211,153,0.15);
|
|
color: #34d399;
|
|
border: 1px solid rgba(52,211,153,0.25);
|
|
}
|
|
|
|
.detail-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
align-items: flex-start;
|
|
padding-top: 4px;
|
|
}
|
|
.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;
|
|
}
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
color: #94a3b8;
|
|
}
|
|
.btn-outline:hover { border-color: rgba(255,255,255,0.3); color: #f1f5f9; }
|
|
.btn-teal {
|
|
background: #0d9488;
|
|
color: #fff;
|
|
}
|
|
.btn-teal:hover { background: #0f766e; }
|
|
.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;
|
|
}
|
|
.btn-icon:hover { background: rgba(255,255,255,0.1); }
|
|
|
|
/* ── Stat Row (4 Cards) ── */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.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);
|
|
}
|
|
.kpi-label {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.kpi-value {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
line-height: 1.1;
|
|
}
|
|
.kpi-sub {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 3px;
|
|
}
|
|
.kpi-card.amber .kpi-value { color: #f59e0b; }
|
|
.kpi-card.green .kpi-value { color: #34d399; }
|
|
.kpi-card.blue .kpi-value { color: #60a5fa; }
|
|
|
|
/* ── Tab Bar ── */
|
|
.tab-bar {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
margin-bottom: 20px;
|
|
}
|
|
.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;
|
|
}
|
|
.tab:hover { color: #94a3b8; }
|
|
.tab.active {
|
|
color: #0d9488;
|
|
border-bottom-color: #0d9488;
|
|
}
|
|
|
|
/* ── Detail Content Grid ── */
|
|
.content-grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
.card-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
margin-bottom: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.04);
|
|
}
|
|
.info-row:last-child { border-bottom: none; }
|
|
.info-label { color: #64748b; font-size: 12px; }
|
|
.info-value {
|
|
color: #f1f5f9;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.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;
|
|
}
|
|
.copy-btn:hover { background: rgba(255,255,255,0.1); color: #94a3b8; }
|
|
|
|
/* ── AfA Bar ── */
|
|
.afa-bar-wrap { margin-top: 4px; }
|
|
.afa-bar-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-bottom: 5px;
|
|
}
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.progress-fill.teal { background: linear-gradient(90deg, #0d9488, #14b8a6); }
|
|
.progress-fill.green { background: linear-gradient(90deg, #059669, #34d399); }
|
|
.progress-fill.amber { background: linear-gradient(90deg, #d97706, #f59e0b); }
|
|
.progress-fill.red { background: linear-gradient(90deg, #dc2626, #ef4444); }
|
|
|
|
/* ── User Card ── */
|
|
.user-card-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.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: 16px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
.user-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
}
|
|
.user-pos { font-size: 12px; color: #64748b; margin-top: 2px; }
|
|
|
|
.btn-sm {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
.btn-danger-outline {
|
|
background: transparent;
|
|
border: 1px solid rgba(239,68,68,0.3);
|
|
color: #ef4444;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.btn-danger-outline:hover {
|
|
background: rgba(239,68,68,0.1);
|
|
border-color: rgba(239,68,68,0.5);
|
|
}
|
|
|
|
/* ── Agent Status ── */
|
|
.agent-metric {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.agent-metric-label { font-size: 12px; color: #64748b; width: 40px; flex-shrink: 0; }
|
|
.agent-metric-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
|
|
.agent-metric-value { font-size: 12px; color: #94a3b8; width: 90px; text-align: right; flex-shrink: 0; }
|
|
|
|
/* ── Tabs Content ── */
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
|
|
/* ── Wartung Tab ── */
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 24px;
|
|
}
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: rgba(255,255,255,0.08);
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
}
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 4px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #0d9488;
|
|
border: 2px solid #0f172a;
|
|
}
|
|
.timeline-dot.planned { background: #f59e0b; }
|
|
.timeline-date { font-size: 11px; color: #64748b; margin-bottom: 3px; }
|
|
.timeline-title { font-size: 13px; font-weight: 500; color: #f1f5f9; }
|
|
.timeline-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
|
|
|
|
/* ── Responsive: Verlauf Tab ── */
|
|
.history-table { width: 100%; border-collapse: collapse; }
|
|
.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);
|
|
}
|
|
.history-table td {
|
|
padding: 10px 12px;
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
border-bottom: 1px solid rgba(255,255,255,0.04);
|
|
}
|
|
.history-table tr:last-child td { border-bottom: none; }
|
|
.history-table td:first-child { color: #f1f5f9; }
|
|
|
|
/* ── Agent-Daten Tab ── */
|
|
.agent-data-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ── Dokumente Tab ── */
|
|
.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;
|
|
}
|
|
.doc-item:hover { background: rgba(255,255,255,0.06); }
|
|
.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;
|
|
}
|
|
.doc-name { font-size: 13px; font-weight: 500; color: #f1f5f9; }
|
|
.doc-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #475569;
|
|
}
|
|
.empty-state-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }
|
|
.empty-state-text { font-size: 13px; }
|
|
|
|
/* ── Search Mode Toggle ── */
|
|
.search-toggle {
|
|
display: flex;
|
|
gap: 0;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 8px;
|
|
padding: 3px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.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;
|
|
}
|
|
.search-toggle-btn.active {
|
|
background: rgba(13,148,136,0.2);
|
|
color: #0d9488;
|
|
}
|
|
.search-toggle-btn:hover:not(.active) { color: #94a3b8; }
|
|
|
|
/* ── User Banner ── */
|
|
.user-filter-banner {
|
|
display: none;
|
|
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;
|
|
}
|
|
.user-filter-banner.visible { display: flex; }
|
|
.user-filter-banner-icon { font-size: 14px; flex-shrink: 0; }
|
|
.user-filter-banner-text {
|
|
flex: 1;
|
|
font-size: 11px;
|
|
color: #93c5fd;
|
|
min-width: 0;
|
|
}
|
|
.user-filter-banner-text strong { color: #bfdbfe; }
|
|
.user-filter-banner-clear {
|
|
background: none;
|
|
border: none;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
padding: 0 2px;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
transition: color 0.12s;
|
|
}
|
|
.user-filter-banner-clear:hover { color: #ef4444; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Topbar -->
|
|
<div class="topbar">
|
|
<div class="topbar-logo">IT Nexus</div>
|
|
<div class="topbar-sep"></div>
|
|
<div class="topbar-title">Asset-Verwaltung</div>
|
|
</div>
|
|
|
|
<!-- Main -->
|
|
<div class="main">
|
|
|
|
<!-- LEFT PANEL -->
|
|
<div class="left-panel">
|
|
<div class="left-header">
|
|
<div class="panel-title-row">
|
|
<span class="panel-title">Assets</span>
|
|
<span class="badge">47</span>
|
|
</div>
|
|
|
|
<!-- Search Mode Toggle -->
|
|
<div class="search-toggle">
|
|
<button class="search-toggle-btn active" id="toggleAsset" onclick="setSearchMode('asset')">🔍 Asset suchen</button>
|
|
<button class="search-toggle-btn" id="toggleUser" onclick="setSearchMode('user')">👤 Benutzer suchen</button>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<span class="search-icon" id="searchIcon">🔍</span>
|
|
<input type="text" placeholder="Suchen…" id="searchInput">
|
|
</div>
|
|
|
|
<div class="pills-row" id="typePills">
|
|
<span class="pill active" data-filter="all">Alle</span>
|
|
<span class="pill" data-filter="notebook">Notebook</span>
|
|
<span class="pill" data-filter="monitor">Monitor</span>
|
|
<span class="pill" data-filter="headset">Headset</span>
|
|
<span class="pill" data-filter="drucker">Drucker</span>
|
|
<span class="pill" data-filter="sonstiges">Sonstiges</span>
|
|
</div>
|
|
<div class="pills-row" id="statusPills">
|
|
<span class="pill active" data-status="all">Alle</span>
|
|
<span class="pill" data-status="verfügbar">Verfügbar</span>
|
|
<span class="pill" data-status="zugewiesen">Zugewiesen</span>
|
|
<span class="pill" data-status="wartung">In Wartung</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Filter Banner -->
|
|
<div class="user-filter-banner" id="userFilterBanner">
|
|
<span class="user-filter-banner-icon">👤</span>
|
|
<span class="user-filter-banner-text" id="userFilterBannerText"></span>
|
|
<button class="user-filter-banner-clear" onclick="clearUserFilter()" title="Filter aufheben">✕</button>
|
|
</div>
|
|
|
|
<!-- Stat Grid -->
|
|
<div class="stat-grid">
|
|
<div class="stat-card teal">
|
|
<div class="stat-value">47</div>
|
|
<div class="stat-label">Gesamt</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" style="color:#60a5fa">31</div>
|
|
<div class="stat-label">Zugewiesen</div>
|
|
</div>
|
|
<div class="stat-card green">
|
|
<div class="stat-value">12</div>
|
|
<div class="stat-label">Verfügbar</div>
|
|
</div>
|
|
<div class="stat-card amber">
|
|
<div class="stat-value">4</div>
|
|
<div class="stat-label">In Wartung</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Asset List -->
|
|
<div class="asset-list" id="assetList">
|
|
|
|
<div class="asset-item active" data-id="nb001" data-assigned-to="Max Mustermann" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">💻</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">ThinkPad X1 Carbon Gen 10</div>
|
|
<div class="asset-sub">NB-001 · SN: LRF291K</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge assigned">Zugewiesen</span>
|
|
<div class="online-dot online"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="nb002" data-assigned-to="" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">💻</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">Dell Latitude 5520</div>
|
|
<div class="asset-sub">NB-002 · SN: BX92JKL</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge available">Verfügbar</span>
|
|
<div class="online-dot"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="mon001" data-assigned-to="Sarah Schmidt" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">🖥️</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">LG 27" 4K Monitor</div>
|
|
<div class="asset-sub">MON-001 · SN: KJH8821</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge assigned">Zugewiesen</span>
|
|
<div class="online-dot"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="nb003" data-assigned-to="Max Mustermann" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">💻</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">MacBook Pro 14"</div>
|
|
<div class="asset-sub">NB-003 · SN: C02XK2L</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge assigned">Zugewiesen</span>
|
|
<div class="online-dot online"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="hd001" data-assigned-to="" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">🎧</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">Jabra Evolve2 85</div>
|
|
<div class="asset-sub">HD-001 · SN: JAB771</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge available">Verfügbar</span>
|
|
<div class="online-dot"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="nb004" data-assigned-to="Tim Weber" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">💻</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">HP EliteBook 840 G9</div>
|
|
<div class="asset-sub">NB-004 · SN: CZC992</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge maintenance">In Wartung</span>
|
|
<div class="online-dot warning"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="mon002" data-assigned-to="" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">🖥️</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">Dell UltraSharp U2722</div>
|
|
<div class="asset-sub">MON-002 · SN: DEL4421</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge available">Verfügbar</span>
|
|
<div class="online-dot"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="nb005" data-assigned-to="Sarah Schmidt" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">💻</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">Lenovo ThinkPad T14s</div>
|
|
<div class="asset-sub">NB-005 · SN: PF2KL91</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge assigned">Zugewiesen</span>
|
|
<div class="online-dot online"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="dr001" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">🖨️</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">HP LaserJet Pro MFP</div>
|
|
<div class="asset-sub">DR-001 · SN: VNC7712</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge assigned">Zugewiesen</span>
|
|
<div class="online-dot online"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-id="nb006" onclick="selectAsset(this)">
|
|
<div class="asset-icon-wrap">💻</div>
|
|
<div class="asset-info">
|
|
<div class="asset-name">Dell XPS 15 9530</div>
|
|
<div class="asset-sub">NB-006 · SN: DXP88GL</div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<span class="status-badge available">Verfügbar</span>
|
|
<div class="online-dot"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT PANEL -->
|
|
<div class="right-panel">
|
|
|
|
<!-- Detail Header -->
|
|
<div class="detail-header">
|
|
<div class="detail-icon-box">💻</div>
|
|
<div class="detail-title-area">
|
|
<div class="detail-name">ThinkPad X1 Carbon Gen 10</div>
|
|
<div class="detail-sub">NB-001 · SN: LRF291K · Lenovo</div>
|
|
<div class="detail-badges">
|
|
<span class="status-badge notebook">Notebook</span>
|
|
<span class="status-badge assigned">Zugewiesen</span>
|
|
<span class="online-badge">
|
|
<span style="width:7px;height:7px;background:#34d399;border-radius:50%;display:inline-block;box-shadow:0 0 4px rgba(52,211,153,0.6)"></span>
|
|
Online
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-actions">
|
|
<button class="btn btn-outline">✏️ Bearbeiten</button>
|
|
<button class="btn btn-teal">👤 Zuweisen</button>
|
|
<button class="btn-icon" title="Mehr Aktionen">···</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Row -->
|
|
<div class="kpi-grid">
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">💰 Buchwert</div>
|
|
<div class="kpi-value">1.247 €</div>
|
|
<div class="kpi-sub">Kaufpreis: 1.899 € (01.03.2023)</div>
|
|
</div>
|
|
<div class="kpi-card amber">
|
|
<div class="kpi-label">🔧 Nächste Wartung</div>
|
|
<div class="kpi-value">in 45 Tagen</div>
|
|
<div class="kpi-sub">Geplant: 15.07.2026</div>
|
|
</div>
|
|
<div class="kpi-card blue">
|
|
<div class="kpi-label">👤 Zugewiesen an</div>
|
|
<div class="kpi-value">Max Mustermann</div>
|
|
<div class="kpi-sub">seit 01.03.2023</div>
|
|
</div>
|
|
<div class="kpi-card green">
|
|
<div class="kpi-label">🤖 Agent-Sync</div>
|
|
<div class="kpi-value">vor 3 Min</div>
|
|
<div class="kpi-sub">v2.0.0 · aktiv</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Bar -->
|
|
<div class="tab-bar" id="tabBar">
|
|
<div class="tab active" onclick="switchTab('uebersicht', this)">Übersicht</div>
|
|
<div class="tab" onclick="switchTab('wartung', this)">Wartung</div>
|
|
<div class="tab" onclick="switchTab('verlauf', this)">Verlauf</div>
|
|
<div class="tab" onclick="switchTab('agent', this)">Agent-Daten</div>
|
|
<div class="tab" onclick="switchTab('dokumente', this)">Dokumente</div>
|
|
</div>
|
|
|
|
<!-- ═══ TAB: ÜBERSICHT ═══ -->
|
|
<div class="tab-content active" id="tab-uebersicht">
|
|
|
|
<div class="content-grid-2">
|
|
<!-- Geräteinformationen -->
|
|
<div class="card">
|
|
<div class="card-title">🖥️ Geräteinformationen</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Typ</span>
|
|
<span class="info-value">Notebook</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Hersteller</span>
|
|
<span class="info-value">Lenovo</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Modell</span>
|
|
<span class="info-value">ThinkPad X1 Carbon Gen 10</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Seriennummer</span>
|
|
<span class="info-value">LRF291K</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Betriebssystem</span>
|
|
<span class="info-value">Windows 11 Pro</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">IP-Adresse</span>
|
|
<span class="info-value">
|
|
192.168.0.45
|
|
<button class="copy-btn" onclick="copyText('192.168.0.45', this)">📋</button>
|
|
</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Inventarnummer</span>
|
|
<span class="info-value">INV-2023-041</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Abteilung</span>
|
|
<span class="info-value">IT</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Standort</span>
|
|
<span class="info-value">Büro Hauptgebäude</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Finanzdaten & AfA -->
|
|
<div class="card">
|
|
<div class="card-title">📊 Finanzdaten & AfA</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Kaufpreis</span>
|
|
<span class="info-value">1.899,00 €</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Kaufdatum</span>
|
|
<span class="info-value">01.03.2023</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Nutzungsdauer</span>
|
|
<span class="info-value">3 Jahre</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Buchwert aktuell</span>
|
|
<span class="info-value" style="color:#34d399">1.247,33 €</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Restwert</span>
|
|
<span class="info-value">0,00 €</span>
|
|
</div>
|
|
<div class="info-row" style="border-bottom:none">
|
|
<span class="info-label">Abschreibung/Monat</span>
|
|
<span class="info-value">52,75 €</span>
|
|
</div>
|
|
<div class="afa-bar-wrap" style="margin-top:12px">
|
|
<div class="afa-bar-label">
|
|
<span>Abgeschrieben</span>
|
|
<span style="color:#94a3b8">34,4 % (651,67 €)</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill teal" style="width:34.4%"></div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;font-size:10px;color:#475569;margin-top:4px">
|
|
<span>Kauf: 01.03.2023</span>
|
|
<span>Ende: 28.02.2026</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-grid-2">
|
|
<!-- Zuweisung -->
|
|
<div class="card">
|
|
<div class="card-title">👤 Zuweisung</div>
|
|
<div class="user-card-inner">
|
|
<div class="user-avatar">MM</div>
|
|
<div>
|
|
<div class="user-name">Max Mustermann</div>
|
|
<div class="user-pos">IT-Administrator</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">E-Mail</span>
|
|
<span class="info-value" style="font-size:12px">m.mustermann@cereda.de</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Zugewiesen seit</span>
|
|
<span class="info-value">01.03.2023</span>
|
|
</div>
|
|
<div class="info-row" style="border-bottom:none;margin-top:4px">
|
|
<span class="info-label"></span>
|
|
<button class="btn btn-sm btn-danger-outline" style="display:inline-flex;align-items:center;gap:5px">
|
|
✕ Zuweisung aufheben
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent-Status -->
|
|
<div class="card">
|
|
<div class="card-title">🤖 Agent-Status</div>
|
|
|
|
<div class="agent-metric">
|
|
<span class="agent-metric-label">CPU</span>
|
|
<div class="agent-metric-bar">
|
|
<div class="progress-fill green" style="width:23%"></div>
|
|
</div>
|
|
<span class="agent-metric-value">23%</span>
|
|
</div>
|
|
|
|
<div class="agent-metric">
|
|
<span class="agent-metric-label">RAM</span>
|
|
<div class="agent-metric-bar">
|
|
<div class="progress-fill teal" style="width:51.25%"></div>
|
|
</div>
|
|
<span class="agent-metric-value">8,2 / 16 GB</span>
|
|
</div>
|
|
|
|
<div class="agent-metric">
|
|
<span class="agent-metric-label">Disk</span>
|
|
<div class="agent-metric-bar">
|
|
<div class="progress-fill amber" style="width:45.7%"></div>
|
|
</div>
|
|
<span class="agent-metric-value">234 / 512 GB</span>
|
|
</div>
|
|
|
|
<div style="height:8px"></div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">Letzter Check-in</span>
|
|
<span class="info-value" style="color:#34d399">vor 3 Minuten</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Agent-Version</span>
|
|
<span class="info-value">v2.0.0</span>
|
|
</div>
|
|
<div class="info-row" style="border-bottom:none">
|
|
<span class="info-label">Hostname</span>
|
|
<span class="info-value">DESKTOP-MM01</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ TAB: WARTUNG ═══ -->
|
|
<div class="tab-content" id="tab-wartung">
|
|
<div class="content-grid-2">
|
|
<div class="card">
|
|
<div class="card-title">📅 Wartungsplan</div>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot planned"></div>
|
|
<div class="timeline-date">15.07.2026 · Geplant</div>
|
|
<div class="timeline-title">Jährliche Inspektion</div>
|
|
<div class="timeline-desc">Hardware-Check, Reinigung, BIOS-Update</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">12.03.2025 · Abgeschlossen</div>
|
|
<div class="timeline-title">Software-Update & Treiber</div>
|
|
<div class="timeline-desc">Windows 11 23H2, Lenovo-Treiber aktualisiert</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">05.09.2024 · Abgeschlossen</div>
|
|
<div class="timeline-title">Akku-Diagnose</div>
|
|
<div class="timeline-desc">Kapazität: 94% — kein Austausch nötig</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">01.03.2023 · Abgeschlossen</div>
|
|
<div class="timeline-title">Ersteinrichtung & Imaging</div>
|
|
<div class="timeline-desc">Windows-Image deployed, Intune-Enrollment</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">🔧 Wartung planen</div>
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<div>
|
|
<div style="font-size:11px;color:#64748b;margin-bottom:5px">Wartungstyp</div>
|
|
<select style="width:100%;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">
|
|
<option>Jährliche Inspektion</option>
|
|
<option>Software-Update</option>
|
|
<option>Hardware-Reparatur</option>
|
|
<option>Akku-Austausch</option>
|
|
<option>Sonstiges</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:11px;color:#64748b;margin-bottom:5px">Datum</div>
|
|
<input type="date" value="2026-07-15" style="width:100%;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">
|
|
</div>
|
|
<div>
|
|
<div style="font-size:11px;color:#64748b;margin-bottom:5px">Notizen</div>
|
|
<textarea rows="3" placeholder="Optionale Notizen…" style="width:100%;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;resize:vertical"></textarea>
|
|
</div>
|
|
<button class="btn btn-teal" style="align-self:flex-end">Wartung eintragen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ TAB: VERLAUF ═══ -->
|
|
<div class="tab-content" id="tab-verlauf">
|
|
<div class="card">
|
|
<div class="card-title">🕐 Änderungshistorie</div>
|
|
<table class="history-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Ereignis</th>
|
|
<th>Details</th>
|
|
<th>Benutzer</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>01.06.2026 09:14</td>
|
|
<td>Check-in</td>
|
|
<td>Agent-Sync erfolgreich</td>
|
|
<td style="color:#64748b">System</td>
|
|
</tr>
|
|
<tr>
|
|
<td>28.05.2026 14:22</td>
|
|
<td>Wartung geplant</td>
|
|
<td>Jährliche Inspektion (15.07.2026)</td>
|
|
<td>gruessing</td>
|
|
</tr>
|
|
<tr>
|
|
<td>12.03.2025 10:00</td>
|
|
<td>Wartung abgeschlossen</td>
|
|
<td>Software-Update & Treiber</td>
|
|
<td>gruessing</td>
|
|
</tr>
|
|
<tr>
|
|
<td>01.03.2023 08:30</td>
|
|
<td>Zuweisung</td>
|
|
<td>Zugewiesen an Max Mustermann</td>
|
|
<td>gruessing</td>
|
|
</tr>
|
|
<tr>
|
|
<td>01.03.2023 07:45</td>
|
|
<td>Asset angelegt</td>
|
|
<td>Ersterfassung NB-001</td>
|
|
<td>gruessing</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ TAB: AGENT-DATEN ═══ -->
|
|
<div class="tab-content" id="tab-agent">
|
|
<div class="agent-data-grid">
|
|
<div class="card">
|
|
<div class="card-title">💻 System</div>
|
|
<div class="info-row"><span class="info-label">Hostname</span><span class="info-value">DESKTOP-MM01</span></div>
|
|
<div class="info-row"><span class="info-label">OS</span><span class="info-value">Windows 11 Pro 23H2</span></div>
|
|
<div class="info-row"><span class="info-label">Build</span><span class="info-value">22631.3810</span></div>
|
|
<div class="info-row"><span class="info-label">Architektur</span><span class="info-value">x64</span></div>
|
|
<div class="info-row"><span class="info-label">Prozessor</span><span class="info-value">Intel Core i7-1265U</span></div>
|
|
<div class="info-row"><span class="info-label">Kerne</span><span class="info-value">10 (12 Threads)</span></div>
|
|
<div class="info-row" style="border-bottom:none"><span class="info-label">RAM gesamt</span><span class="info-value">16 GB</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">🌐 Netzwerk</div>
|
|
<div class="info-row"><span class="info-label">IPv4</span><span class="info-value">192.168.0.45</span></div>
|
|
<div class="info-row"><span class="info-label">IPv6</span><span class="info-value" style="font-size:11px">fe80::a1b2:c3d4:e5f6</span></div>
|
|
<div class="info-row"><span class="info-label">MAC</span><span class="info-value">54:E1:AD:F2:9C:3B</span></div>
|
|
<div class="info-row"><span class="info-label">Interface</span><span class="info-value">Intel Wi-Fi 6E AX211</span></div>
|
|
<div class="info-row"><span class="info-label">Gateway</span><span class="info-value">192.168.0.254</span></div>
|
|
<div class="info-row" style="border-bottom:none"><span class="info-label">DNS</span><span class="info-value">192.168.0.1</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">🛡️ Sicherheit</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Windows Defender</span>
|
|
<span class="info-value" style="color:#34d399">✓ Aktiv</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Signaturen</span>
|
|
<span class="info-value">1.415.132.0 (aktuell)</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">BitLocker</span>
|
|
<span class="info-value" style="color:#34d399">✓ Aktiv (C:)</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Firewall</span>
|
|
<span class="info-value" style="color:#34d399">✓ Aktiv</span>
|
|
</div>
|
|
<div class="info-row" style="border-bottom:none">
|
|
<span class="info-label">Pending Reboots</span>
|
|
<span class="info-value" style="color:#34d399">Keine</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">📦 Updates</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Status</span>
|
|
<span class="info-value" style="color:#34d399">Aktuell</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Letztes Update</span>
|
|
<span class="info-value">28.05.2026</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Ausstehend</span>
|
|
<span class="info-value">0 Updates</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Agent-Version</span>
|
|
<span class="info-value">v2.0.0</span>
|
|
</div>
|
|
<div class="info-row" style="border-bottom:none">
|
|
<span class="info-label">Letzter Check-in</span>
|
|
<span class="info-value" style="color:#34d399">vor 3 Minuten</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ TAB: DOKUMENTE ═══ -->
|
|
<div class="tab-content" id="tab-dokumente">
|
|
<div class="card" style="margin-bottom:12px">
|
|
<div class="card-title" style="margin-bottom:14px">📁 Dokumente</div>
|
|
<div class="doc-item">
|
|
<div class="doc-icon">📄</div>
|
|
<div>
|
|
<div class="doc-name">Kaufbeleg_ThinkPad_X1_2023.pdf</div>
|
|
<div class="doc-meta">PDF · 245 KB · hochgeladen 01.03.2023 von gruessing</div>
|
|
</div>
|
|
</div>
|
|
<div class="doc-item">
|
|
<div class="doc-icon" style="background:rgba(52,211,153,0.1)">📋</div>
|
|
<div>
|
|
<div class="doc-name">Übergabeprotokoll_Mustermann.pdf</div>
|
|
<div class="doc-meta">PDF · 128 KB · hochgeladen 01.03.2023 von gruessing</div>
|
|
</div>
|
|
</div>
|
|
<div class="doc-item">
|
|
<div class="doc-icon" style="background:rgba(245,158,11,0.1)">🔧</div>
|
|
<div>
|
|
<div class="doc-name">Wartungsprotokoll_2025-03.pdf</div>
|
|
<div class="doc-meta">PDF · 89 KB · hochgeladen 12.03.2025 von gruessing</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06)">
|
|
<button class="btn btn-outline" style="font-size:12px;padding:7px 14px">+ Dokument hochladen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /right-panel -->
|
|
</div><!-- /main -->
|
|
|
|
<script>
|
|
// ── Suchmodus ──
|
|
let searchMode = 'asset'; // 'asset' | 'user'
|
|
|
|
function setSearchMode(mode) {
|
|
searchMode = mode;
|
|
const input = document.getElementById('searchInput');
|
|
const icon = document.getElementById('searchIcon');
|
|
const toggleAsset = document.getElementById('toggleAsset');
|
|
const toggleUser = document.getElementById('toggleUser');
|
|
|
|
if (mode === 'asset') {
|
|
toggleAsset.classList.add('active');
|
|
toggleUser.classList.remove('active');
|
|
input.placeholder = 'Asset suchen…';
|
|
icon.textContent = '🔍';
|
|
} else {
|
|
toggleUser.classList.add('active');
|
|
toggleAsset.classList.remove('active');
|
|
input.placeholder = 'Name eingeben…';
|
|
icon.textContent = '👤';
|
|
}
|
|
|
|
// Eingabe zurücksetzen & Filter aufheben
|
|
input.value = '';
|
|
clearUserFilter();
|
|
applyAssetFilter('');
|
|
}
|
|
|
|
// ── Asset auswählen ──
|
|
function selectAsset(el) {
|
|
document.querySelectorAll('.asset-item').forEach(i => i.classList.remove('active'));
|
|
el.classList.add('active');
|
|
}
|
|
|
|
// ── Tab wechseln ──
|
|
function switchTab(tabId, el) {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
el.classList.add('active');
|
|
document.getElementById('tab-' + tabId).classList.add('active');
|
|
}
|
|
|
|
// ── Filter-Pills ──
|
|
document.getElementById('typePills').addEventListener('click', function(e) {
|
|
const pill = e.target.closest('.pill');
|
|
if (!pill) return;
|
|
this.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
|
|
pill.classList.add('active');
|
|
});
|
|
|
|
document.getElementById('statusPills').addEventListener('click', function(e) {
|
|
const pill = e.target.closest('.pill');
|
|
if (!pill) return;
|
|
this.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
|
|
pill.classList.add('active');
|
|
});
|
|
|
|
// ── Copy-Button ──
|
|
function copyText(text, btn) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
const orig = btn.textContent;
|
|
btn.textContent = '✓';
|
|
btn.style.color = '#34d399';
|
|
setTimeout(() => {
|
|
btn.textContent = orig;
|
|
btn.style.color = '';
|
|
}, 1500);
|
|
});
|
|
}
|
|
|
|
// ── Asset-Textsuche ──
|
|
function applyAssetFilter(q) {
|
|
document.querySelectorAll('.asset-item').forEach(item => {
|
|
const text = item.textContent.toLowerCase();
|
|
item.style.display = text.includes(q) ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
// ── User-Suche ──
|
|
function applyUserFilter(q) {
|
|
const banner = document.getElementById('userFilterBanner');
|
|
const bannerText = document.getElementById('userFilterBannerText');
|
|
|
|
if (!q) {
|
|
// Alle anzeigen, Banner ausblenden
|
|
document.querySelectorAll('.asset-item').forEach(item => {
|
|
item.style.display = '';
|
|
});
|
|
banner.classList.remove('visible');
|
|
return;
|
|
}
|
|
|
|
let count = 0;
|
|
let matchedName = '';
|
|
|
|
document.querySelectorAll('.asset-item').forEach(item => {
|
|
const assigned = (item.dataset.assignedTo || '').toLowerCase();
|
|
if (assigned.includes(q)) {
|
|
item.style.display = '';
|
|
count++;
|
|
// Exakten Namen aus dem ersten Match ermitteln
|
|
if (!matchedName && item.dataset.assignedTo) {
|
|
matchedName = item.dataset.assignedTo;
|
|
}
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
if (count > 0 && matchedName) {
|
|
bannerText.innerHTML = `Zeige Assets von: <strong>${matchedName}</strong> (${count} Asset${count !== 1 ? 's' : ''})`;
|
|
banner.classList.add('visible');
|
|
} else if (count === 0) {
|
|
bannerText.innerHTML = `Kein Benutzer gefunden für <strong>"${q}"</strong>`;
|
|
banner.classList.add('visible');
|
|
} else {
|
|
banner.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
function clearUserFilter() {
|
|
document.getElementById('userFilterBanner').classList.remove('visible');
|
|
document.querySelectorAll('.asset-item').forEach(item => {
|
|
item.style.display = '';
|
|
});
|
|
if (searchMode === 'user') {
|
|
document.getElementById('searchInput').value = '';
|
|
}
|
|
}
|
|
|
|
// ── Sucheingabe ──
|
|
document.getElementById('searchInput').addEventListener('input', function() {
|
|
const q = this.value.toLowerCase().trim();
|
|
if (searchMode === 'asset') {
|
|
applyAssetFilter(q);
|
|
} else {
|
|
applyUserFilter(q);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|