1075 lines
32 KiB
HTML
1075 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IT Nexus — Tickets</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: #0f172a;
|
||
color: #f1f5f9;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* TOP NAV */
|
||
.topbar {
|
||
height: 56px;
|
||
background: rgba(255,255,255,0.03);
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
.topbar-logo {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #0d9488;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
.topbar-sep { color: rgba(255,255,255,0.2); }
|
||
.topbar-page { color: #94a3b8; font-size: 14px; }
|
||
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||
.avatar {
|
||
width: 32px; height: 32px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #0d9488, #0891b2);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 12px; font-weight: 600; color: #fff;
|
||
}
|
||
|
||
/* MAIN LAYOUT */
|
||
.main {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* LEFT PANEL */
|
||
.left-panel {
|
||
width: 360px;
|
||
flex-shrink: 0;
|
||
border-right: 1px solid rgba(255,255,255,0.08);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.left-header {
|
||
padding: 16px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.left-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.left-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #f1f5f9;
|
||
}
|
||
.badge-count {
|
||
background: rgba(13,148,136,0.2);
|
||
color: #0d9488;
|
||
border: 1px solid rgba(13,148,136,0.3);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 2px 8px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.search-input {
|
||
width: 100%;
|
||
background: rgba(255,255,255,0.06);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 8px;
|
||
color: #f1f5f9;
|
||
font-size: 13px;
|
||
padding: 8px 12px;
|
||
outline: none;
|
||
margin-bottom: 10px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.search-input::placeholder { color: #475569; }
|
||
.search-input:focus { border-color: rgba(13,148,136,0.5); }
|
||
|
||
.pill-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
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: rgba(255,255,255,0.04);
|
||
color: #94a3b8;
|
||
transition: all 0.15s;
|
||
user-select: none;
|
||
}
|
||
.pill:hover { background: rgba(255,255,255,0.08); color: #f1f5f9; }
|
||
.pill.active {
|
||
background: rgba(13,148,136,0.2);
|
||
border-color: rgba(13,148,136,0.4);
|
||
color: #0d9488;
|
||
}
|
||
|
||
/* STAT ROW */
|
||
.stat-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
flex-shrink: 0;
|
||
}
|
||
.stat-card {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.07);
|
||
border-radius: 8px;
|
||
padding: 8px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.stat-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.stat-value { font-size: 20px; font-weight: 700; }
|
||
.stat-value.teal { color: #0d9488; }
|
||
.stat-value.amber { color: #f59e0b; }
|
||
.stat-value.blue { color: #60a5fa; }
|
||
.stat-value.red { color: #ef4444; }
|
||
|
||
/* TICKET LIST */
|
||
.ticket-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 8px;
|
||
}
|
||
.ticket-list::-webkit-scrollbar { width: 4px; }
|
||
.ticket-list::-webkit-scrollbar-track { background: transparent; }
|
||
.ticket-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||
|
||
.ticket-item {
|
||
background: rgba(255,255,255,0.03);
|
||
border: 1px solid rgba(255,255,255,0.07);
|
||
border-radius: 10px;
|
||
padding: 11px 13px;
|
||
margin-bottom: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
position: relative;
|
||
}
|
||
.ticket-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
|
||
.ticket-item.active {
|
||
background: rgba(13,148,136,0.1);
|
||
border-color: rgba(13,148,136,0.35);
|
||
}
|
||
.ticket-item.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0; top: 12px; bottom: 12px;
|
||
width: 3px;
|
||
background: #0d9488;
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.ticket-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
.ticket-num {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 11px;
|
||
color: #0d9488;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.badge {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
padding: 2px 7px;
|
||
border-radius: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.badge-kritisch { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
|
||
.badge-hoch { background: rgba(245,158,11,0.2); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
|
||
.badge-mittel { background: rgba(96,165,250,0.2); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
|
||
.badge-niedrig { background: rgba(52,211,153,0.2); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
|
||
|
||
.badge-offen { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
|
||
.badge-in-bearbeitung { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
|
||
.badge-geloest { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
|
||
.badge-geschlossen { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
|
||
|
||
.ticket-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #e2e8f0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 5px;
|
||
}
|
||
.ticket-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.ticket-meta-left {
|
||
font-size: 11px;
|
||
color: #64748b;
|
||
}
|
||
.ticket-meta-left span { color: #475569; }
|
||
|
||
/* RIGHT PANEL */
|
||
.right-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.detail-scroll {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
}
|
||
.detail-scroll::-webkit-scrollbar { width: 4px; }
|
||
.detail-scroll::-webkit-scrollbar-track { background: transparent; }
|
||
.detail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||
|
||
/* DETAIL HEADER */
|
||
.detail-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.ticket-icon-box {
|
||
width: 56px; height: 56px;
|
||
background: rgba(245,158,11,0.15);
|
||
border: 1px solid rgba(245,158,11,0.3);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 26px;
|
||
flex-shrink: 0;
|
||
}
|
||
.detail-title-block { flex: 1; }
|
||
.detail-main-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #f1f5f9;
|
||
line-height: 1.3;
|
||
margin-bottom: 5px;
|
||
}
|
||
.detail-sub {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
margin-bottom: 8px;
|
||
}
|
||
.detail-sub span { color: #475569; }
|
||
.detail-badge-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.badge-source {
|
||
background: rgba(255,255,255,0.07);
|
||
color: #94a3b8;
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
padding: 2px 7px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.detail-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
margin-top: 4px;
|
||
}
|
||
.btn {
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border: none;
|
||
transition: all 0.15s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.btn-outline {
|
||
background: transparent;
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
color: #94a3b8;
|
||
}
|
||
.btn-outline:hover { background: rgba(255,255,255,0.06); color: #f1f5f9; border-color: rgba(255,255,255,0.25); }
|
||
.btn-teal {
|
||
background: rgba(13,148,136,0.2);
|
||
border: 1px solid rgba(13,148,136,0.4);
|
||
color: #0d9488;
|
||
}
|
||
.btn-teal:hover { background: rgba(13,148,136,0.3); }
|
||
.btn-icon {
|
||
background: rgba(255,255,255,0.05);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
color: #94a3b8;
|
||
padding: 8px 10px;
|
||
font-size: 16px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.btn-icon:hover { background: rgba(255,255,255,0.09); color: #f1f5f9; }
|
||
|
||
/* KPI 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: 10px;
|
||
color: #64748b;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.kpi-value {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #f1f5f9;
|
||
line-height: 1.3;
|
||
}
|
||
.kpi-sub { font-size: 11px; color: #64748b; margin-top: 3px; }
|
||
.kpi-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
.dot-amber { background: #f59e0b; }
|
||
.dot-red { background: #ef4444; }
|
||
.dot-blue { background: #60a5fa; }
|
||
.dot-green { background: #34d399; }
|
||
|
||
.avatar-sm {
|
||
width: 24px; height: 24px;
|
||
border-radius: 50%;
|
||
background: rgba(148,163,184,0.2);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 10px; color: #94a3b8; margin-right: 5px;
|
||
}
|
||
.kpi-red { color: #ef4444; }
|
||
|
||
/* TABS */
|
||
.tab-bar {
|
||
display: flex;
|
||
gap: 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
margin-bottom: 18px;
|
||
}
|
||
.tab {
|
||
padding: 10px 18px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #64748b;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
transition: all 0.15s;
|
||
user-select: none;
|
||
}
|
||
.tab:hover { color: #94a3b8; }
|
||
.tab.active { color: #0d9488; border-bottom-color: #0d9488; }
|
||
.tab-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(13,148,136,0.2);
|
||
color: #0d9488;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
width: 18px; height: 18px;
|
||
border-radius: 50%;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* TAB PANELS */
|
||
.tab-panel { display: none; }
|
||
.tab-panel.active { display: block; }
|
||
|
||
/* CONTENT CARDS */
|
||
.card {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
backdrop-filter: blur(10px);
|
||
margin-bottom: 14px;
|
||
}
|
||
.card-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.desc-text {
|
||
font-size: 14px;
|
||
color: #cbd5e1;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 7px 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||
font-size: 13px;
|
||
}
|
||
.detail-row:last-child { border-bottom: none; }
|
||
.detail-row-label { color: #64748b; }
|
||
.detail-row-value { color: #e2e8f0; font-weight: 500; }
|
||
|
||
/* SLA BAR */
|
||
.sla-bar-wrap {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: rgba(255,255,255,0.08);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
margin-top: 8px;
|
||
}
|
||
.sla-bar-fill {
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
background: #ef4444;
|
||
width: 100%;
|
||
}
|
||
|
||
/* COMMENTS */
|
||
.comment-item {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.comment-avatar {
|
||
width: 34px; height: 34px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #0d9488, #0891b2);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 12px; font-weight: 600; color: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
.comment-bubble {
|
||
flex: 1;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.07);
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
}
|
||
.comment-meta {
|
||
font-size: 11px;
|
||
color: #64748b;
|
||
margin-bottom: 6px;
|
||
}
|
||
.comment-meta strong { color: #94a3b8; font-weight: 600; }
|
||
.comment-text { font-size: 13px; color: #cbd5e1; line-height: 1.5; }
|
||
|
||
.comment-input-area {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 6px;
|
||
}
|
||
.comment-textarea {
|
||
flex: 1;
|
||
background: rgba(255,255,255,0.06);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 10px;
|
||
color: #f1f5f9;
|
||
font-size: 13px;
|
||
padding: 10px 14px;
|
||
outline: none;
|
||
resize: none;
|
||
height: 70px;
|
||
font-family: inherit;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.comment-textarea::placeholder { color: #475569; }
|
||
.comment-textarea:focus { border-color: rgba(13,148,136,0.5); }
|
||
.btn-send {
|
||
background: #0d9488;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 0 16px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
align-self: flex-end;
|
||
height: 38px;
|
||
}
|
||
.btn-send:hover { background: #0f766e; }
|
||
|
||
/* TIMELINE */
|
||
.timeline { position: relative; padding-left: 20px; }
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 6px; top: 0; bottom: 0;
|
||
width: 1px;
|
||
background: rgba(255,255,255,0.08);
|
||
}
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: 18px;
|
||
padding-left: 18px;
|
||
}
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -14px;
|
||
top: 5px;
|
||
width: 8px; height: 8px;
|
||
border-radius: 50%;
|
||
background: #0d9488;
|
||
border: 2px solid #0f172a;
|
||
}
|
||
.timeline-event { font-size: 13px; color: #cbd5e1; font-weight: 500; }
|
||
.timeline-date { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||
|
||
/* EMPTY STATE */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
.empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
|
||
.empty-text { color: #64748b; font-size: 14px; margin-bottom: 16px; }
|
||
|
||
/* STATUS DROPDOWN */
|
||
.status-dropdown-wrap { position: relative; }
|
||
.status-dropdown-menu {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
right: 0;
|
||
background: #1e293b;
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
border-radius: 10px;
|
||
min-width: 180px;
|
||
z-index: 100;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
|
||
display: none;
|
||
}
|
||
.status-dropdown-menu.open { display: block; }
|
||
.status-option {
|
||
padding: 10px 14px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
color: #cbd5e1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: background 0.1s;
|
||
}
|
||
.status-option:hover { background: rgba(255,255,255,0.06); }
|
||
|
||
/* EMPTY PANEL */
|
||
.right-empty {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
color: #475569;
|
||
}
|
||
.right-empty-icon { font-size: 48px; opacity: 0.3; }
|
||
.right-empty-text { font-size: 15px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- TOP BAR -->
|
||
<div class="topbar">
|
||
<div class="topbar-logo">IT Nexus</div>
|
||
<div class="topbar-sep">›</div>
|
||
<div class="topbar-page">Tickets</div>
|
||
<div class="topbar-right">
|
||
<div class="avatar">SG</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main">
|
||
|
||
<!-- LEFT PANEL -->
|
||
<div class="left-panel">
|
||
<div class="left-header">
|
||
<div class="left-title-row">
|
||
<span class="left-title">Tickets</span>
|
||
<span class="badge-count" id="totalBadge">851</span>
|
||
</div>
|
||
|
||
<input type="text" class="search-input" id="searchInput" placeholder="Ticket suchen...">
|
||
|
||
<div class="pill-row" id="statusFilter">
|
||
<span class="pill active" data-value="alle">Alle</span>
|
||
<span class="pill" data-value="offen">Offen</span>
|
||
<span class="pill" data-value="in bearbeitung">In Bearbeitung</span>
|
||
<span class="pill" data-value="gelöst">Gelöst</span>
|
||
<span class="pill" data-value="geschlossen">Geschlossen</span>
|
||
</div>
|
||
|
||
<div class="pill-row" id="prioFilter">
|
||
<span class="pill active" data-value="alle">Alle</span>
|
||
<span class="pill" data-value="kritisch">Kritisch</span>
|
||
<span class="pill" data-value="hoch">Hoch</span>
|
||
<span class="pill" data-value="mittel">Mittel</span>
|
||
<span class="pill" data-value="niedrig">Niedrig</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STAT ROW -->
|
||
<div class="stat-row">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Gesamt</div>
|
||
<div class="stat-value teal">851</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Offen</div>
|
||
<div class="stat-value amber">1</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">In Bearbeitung</div>
|
||
<div class="stat-value blue">0</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Kritisch</div>
|
||
<div class="stat-value red">0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TICKET LIST -->
|
||
<div class="ticket-list" id="ticketList"></div>
|
||
</div>
|
||
|
||
<!-- RIGHT PANEL -->
|
||
<div class="right-panel">
|
||
|
||
<!-- EMPTY STATE (hidden when ticket selected) -->
|
||
<div class="right-empty" id="rightEmpty" style="display:none;">
|
||
<div class="right-empty-icon">🎫</div>
|
||
<div class="right-empty-text">Kein Ticket ausgewählt</div>
|
||
</div>
|
||
|
||
<!-- DETAIL PANEL -->
|
||
<div class="detail-scroll" id="detailPanel">
|
||
|
||
<!-- HEADER -->
|
||
<div class="detail-header">
|
||
<div class="ticket-icon-box">🎫</div>
|
||
<div class="detail-title-block">
|
||
<div class="detail-main-title">Zugangsdaten - Drucker Zugänge und Passwort Pflege</div>
|
||
<div class="detail-sub">TK-2026-0001 · Allgemein · Erstellt vor 78 Tagen</div>
|
||
<div class="detail-badge-row">
|
||
<span class="badge badge-hoch">Hoch</span>
|
||
<span class="badge badge-offen" id="currentStatusBadge">Offen</span>
|
||
<span class="badge badge-source">Web</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-actions">
|
||
<button class="btn btn-outline">✏️ Bearbeiten</button>
|
||
<div class="status-dropdown-wrap">
|
||
<button class="btn btn-teal" id="statusDropBtn" onclick="toggleStatusDrop()">→ In Bearbeitung ▾</button>
|
||
<div class="status-dropdown-menu" id="statusDropMenu">
|
||
<div class="status-option" onclick="setStatus('offen')"><span style="color:#f59e0b">●</span> Offen</div>
|
||
<div class="status-option" onclick="setStatus('in bearbeitung')"><span style="color:#60a5fa">●</span> In Bearbeitung</div>
|
||
<div class="status-option" onclick="setStatus('gelöst')"><span style="color:#34d399">●</span> Gelöst</div>
|
||
<div class="status-option" onclick="setStatus('geschlossen')"><span style="color:#94a3b8">●</span> Geschlossen</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-icon">···</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI CARDS -->
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Erstellt</div>
|
||
<div class="kpi-value">15.03.2026</div>
|
||
<div class="kpi-sub">von Simon Grüßing</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Priorität</div>
|
||
<div class="kpi-value kpi-indicator"><span class="dot dot-amber"></span>Hoch</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Zugewiesen an</div>
|
||
<div class="kpi-value"><span class="avatar-sm">?</span> Nicht zugewiesen</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">SLA</div>
|
||
<div class="kpi-value kpi-red">78 Tage offen</div>
|
||
<div class="kpi-sub" style="color:#ef4444">⚠ Überfällig</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB BAR -->
|
||
<div class="tab-bar">
|
||
<div class="tab active" onclick="switchTab('beschreibung')">Beschreibung</div>
|
||
<div class="tab" onclick="switchTab('kommentare')">Kommentare <span class="tab-badge">2</span></div>
|
||
<div class="tab" onclick="switchTab('verlauf')">Verlauf</div>
|
||
<div class="tab" onclick="switchTab('assets')">Verknüpfte Assets</div>
|
||
</div>
|
||
|
||
<!-- TAB: BESCHREIBUNG -->
|
||
<div class="tab-panel active" id="tab-beschreibung">
|
||
<div class="card">
|
||
<div class="card-title">Beschreibung</div>
|
||
<div class="desc-text">
|
||
Zugangsdaten für Drucker müssen gepflegt werden. Aktuelle Passwörter sind nicht dokumentiert.
|
||
Bitte alle Drucker-Zugänge sammeln und im Passwort-Manager hinterlegen.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="two-col">
|
||
<div class="card">
|
||
<div class="card-title">Details</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Kategorie</span>
|
||
<span class="detail-row-value">Allgemein</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Quelle</span>
|
||
<span class="detail-row-value">Web</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Erstellt am</span>
|
||
<span class="detail-row-value">15.03.2026</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Zuletzt aktualisiert</span>
|
||
<span class="detail-row-value">12.04.2026</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Ticket-Nummer</span>
|
||
<span class="detail-row-value" style="font-family:monospace;color:#0d9488;">TK-2026-0001</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">Zuweisung & SLA</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Zugewiesen an</span>
|
||
<span class="detail-row-value" style="color:#64748b;">—</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">Ersteller</span>
|
||
<span class="detail-row-value">Simon Grüßing</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-row-label">SLA-Status</span>
|
||
<span class="detail-row-value kpi-red">⚠ 78 Tage überfällig</span>
|
||
</div>
|
||
<div style="padding-top:4px;">
|
||
<div style="font-size:11px;color:#64748b;margin-bottom:4px;">SLA-Auslastung</div>
|
||
<div class="sla-bar-wrap">
|
||
<div class="sla-bar-fill"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:#ef4444;margin-top:4px;text-align:right;">100% — Überschritten</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: KOMMENTARE -->
|
||
<div class="tab-panel" id="tab-kommentare">
|
||
<div class="card">
|
||
<div class="card-title">Kommentare (2)</div>
|
||
|
||
<div class="comment-item">
|
||
<div class="comment-avatar">SG</div>
|
||
<div class="comment-bubble">
|
||
<div class="comment-meta"><strong>Simon Grüßing</strong> · vor 45 Tagen</div>
|
||
<div class="comment-text">Habe die Drucker in der Produktion bereits überprüft. Passwörter werden noch gesammelt.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-item">
|
||
<div class="comment-avatar">SG</div>
|
||
<div class="comment-bubble">
|
||
<div class="comment-meta"><strong>Simon Grüßing</strong> · vor 20 Tagen</div>
|
||
<div class="comment-text">Drucker im Büro sind dokumentiert. Produktion steht noch aus.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-input-area">
|
||
<textarea class="comment-textarea" placeholder="Kommentar schreiben..."></textarea>
|
||
<button class="btn-send">Senden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: VERLAUF -->
|
||
<div class="tab-panel" id="tab-verlauf">
|
||
<div class="card">
|
||
<div class="card-title">Aktivitätsverlauf</div>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-event">Ticket erstellt</div>
|
||
<div class="timeline-date">15.03.2026 · von Simon Grüßing</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-event">Status geändert: <span style="color:#f59e0b">Offen</span> → <span style="color:#60a5fa">In Bearbeitung</span></div>
|
||
<div class="timeline-date">01.04.2026 · von Simon Grüßing</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-event">Status geändert: <span style="color:#60a5fa">In Bearbeitung</span> → <span style="color:#f59e0b">Offen</span> <span style="color:#64748b;font-size:11px;">(zurückgesetzt)</span></div>
|
||
<div class="timeline-date">15.04.2026 · von Simon Grüßing</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: ASSETS -->
|
||
<div class="tab-panel" id="tab-assets">
|
||
<div class="card">
|
||
<div class="card-title">Verknüpfte Assets</div>
|
||
<div class="empty-state">
|
||
<div class="empty-icon">🖥️</div>
|
||
<div class="empty-text">Keine Assets verknüpft</div>
|
||
<button class="btn btn-teal">+ Asset verknüpfen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /detail-scroll -->
|
||
</div><!-- /right-panel -->
|
||
</div><!-- /main -->
|
||
|
||
<script>
|
||
const tickets = [
|
||
{
|
||
id: 'TK-2026-0001',
|
||
title: 'Zugangsdaten - Drucker Zugänge',
|
||
status: 'offen',
|
||
prio: 'hoch',
|
||
kat: 'Allgemein',
|
||
ersteller: 'Simon Grüßing',
|
||
datum: 'vor 78 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260015',
|
||
title: 'Drucker funktioniert bei Lieferscheinen nicht',
|
||
status: 'geschlossen',
|
||
prio: 'hoch',
|
||
kat: 'Hardware',
|
||
ersteller: 'Sebastian Keiper',
|
||
datum: 'vor 120 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260191',
|
||
title: 'Dockingstation defekt, Jabra Update',
|
||
status: 'geschlossen',
|
||
prio: 'hoch',
|
||
kat: 'Allgemein',
|
||
ersteller: 'Simon Grüßing',
|
||
datum: 'vor 95 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260264',
|
||
title: 'Fileserver-Backup Barleben → Synology',
|
||
status: 'geschlossen',
|
||
prio: 'hoch',
|
||
kat: 'Allgemein',
|
||
ersteller: 'Simon Grüßing',
|
||
datum: 'vor 88 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260286',
|
||
title: 'Sxyx lässt sich nicht starten',
|
||
status: 'geschlossen',
|
||
prio: 'hoch',
|
||
kat: 'Allgemein',
|
||
ersteller: 'Sebastian Keiper',
|
||
datum: 'vor 82 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260312',
|
||
title: 'VPN Verbindung bricht ab',
|
||
status: 'in bearbeitung',
|
||
prio: 'mittel',
|
||
kat: 'Netzwerk',
|
||
ersteller: 'Tim Weber',
|
||
datum: 'vor 65 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260398',
|
||
title: 'Neues Notebook einrichten',
|
||
status: 'gelöst',
|
||
prio: 'niedrig',
|
||
kat: 'Hardware',
|
||
ersteller: 'Max Mustermann',
|
||
datum: 'vor 30 Tagen'
|
||
},
|
||
{
|
||
id: 'TKT-20260401',
|
||
title: 'Exchange Postfach voll',
|
||
status: 'offen',
|
||
prio: 'kritisch',
|
||
kat: 'Software',
|
||
ersteller: 'Sarah Schmidt',
|
||
datum: 'vor 12 Tagen'
|
||
}
|
||
];
|
||
|
||
let activeId = 'TK-2026-0001';
|
||
let statusFilter = 'alle';
|
||
let prioFilter = 'alle';
|
||
let searchVal = '';
|
||
|
||
function prioBadgeClass(p) {
|
||
return { kritisch: 'badge-kritisch', hoch: 'badge-hoch', mittel: 'badge-mittel', niedrig: 'badge-niedrig' }[p] || 'badge-hoch';
|
||
}
|
||
function statusBadgeClass(s) {
|
||
return { offen: 'badge-offen', 'in bearbeitung': 'badge-in-bearbeitung', 'gelöst': 'badge-geloest', geschlossen: 'badge-geschlossen' }[s] || 'badge-offen';
|
||
}
|
||
function statusLabel(s) {
|
||
return { offen: 'Offen', 'in bearbeitung': 'In Bearbeitung', 'gelöst': 'Gelöst', geschlossen: 'Geschlossen' }[s] || s;
|
||
}
|
||
function prioLabel(p) {
|
||
return { kritisch: 'Kritisch', hoch: 'Hoch', mittel: 'Mittel', niedrig: 'Niedrig' }[p] || p;
|
||
}
|
||
|
||
function renderList() {
|
||
const list = document.getElementById('ticketList');
|
||
const filtered = tickets.filter(t => {
|
||
if (statusFilter !== 'alle' && t.status !== statusFilter) return false;
|
||
if (prioFilter !== 'alle' && t.prio !== prioFilter) return false;
|
||
if (searchVal && !t.title.toLowerCase().includes(searchVal) && !t.id.toLowerCase().includes(searchVal)) return false;
|
||
return true;
|
||
});
|
||
|
||
list.innerHTML = filtered.map(t => `
|
||
<div class="ticket-item ${t.id === activeId ? 'active' : ''}" onclick="selectTicket('${t.id}')">
|
||
<div class="ticket-top">
|
||
<span class="ticket-num">${t.id}</span>
|
||
<span class="badge ${prioBadgeClass(t.prio)}">${prioLabel(t.prio)}</span>
|
||
</div>
|
||
<div class="ticket-title">${t.title}</div>
|
||
<div class="ticket-meta">
|
||
<div class="ticket-meta-left">${t.kat} · <span>${t.ersteller}</span> · ${t.datum}</div>
|
||
<span class="badge ${statusBadgeClass(t.status)}">${statusLabel(t.status)}</span>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function selectTicket(id) {
|
||
activeId = id;
|
||
renderList();
|
||
}
|
||
|
||
// Status filter pills
|
||
document.getElementById('statusFilter').addEventListener('click', e => {
|
||
const pill = e.target.closest('.pill');
|
||
if (!pill) return;
|
||
document.querySelectorAll('#statusFilter .pill').forEach(p => p.classList.remove('active'));
|
||
pill.classList.add('active');
|
||
statusFilter = pill.dataset.value;
|
||
renderList();
|
||
});
|
||
|
||
// Prio filter pills
|
||
document.getElementById('prioFilter').addEventListener('click', e => {
|
||
const pill = e.target.closest('.pill');
|
||
if (!pill) return;
|
||
document.querySelectorAll('#prioFilter .pill').forEach(p => p.classList.remove('active'));
|
||
pill.classList.add('active');
|
||
prioFilter = pill.dataset.value;
|
||
renderList();
|
||
});
|
||
|
||
// Search
|
||
document.getElementById('searchInput').addEventListener('input', e => {
|
||
searchVal = e.target.value.toLowerCase().trim();
|
||
renderList();
|
||
});
|
||
|
||
// Tabs
|
||
function switchTab(tab) {
|
||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
||
document.getElementById('tab-' + tab).classList.add('active');
|
||
// highlight correct tab button
|
||
const tabs = document.querySelectorAll('.tab');
|
||
const map = { beschreibung: 0, kommentare: 1, verlauf: 2, assets: 3 };
|
||
tabs[map[tab]].classList.add('active');
|
||
}
|
||
|
||
// Status dropdown
|
||
function toggleStatusDrop() {
|
||
document.getElementById('statusDropMenu').classList.toggle('open');
|
||
}
|
||
document.addEventListener('click', e => {
|
||
if (!e.target.closest('.status-dropdown-wrap')) {
|
||
document.getElementById('statusDropMenu').classList.remove('open');
|
||
}
|
||
});
|
||
|
||
function setStatus(s) {
|
||
const badge = document.getElementById('currentStatusBadge');
|
||
badge.className = 'badge ' + statusBadgeClass(s);
|
||
badge.textContent = statusLabel(s);
|
||
document.getElementById('statusDropMenu').classList.remove('open');
|
||
|
||
const labels = {
|
||
offen: '→ In Bearbeitung',
|
||
'in bearbeitung': '→ Gelöst',
|
||
gelöst: '→ Schließen',
|
||
geschlossen: '→ Wiedereröffnen'
|
||
};
|
||
document.getElementById('statusDropBtn').textContent = (labels[s] || '→ Bearbeiten') + ' ▾';
|
||
}
|
||
|
||
// Init
|
||
renderList();
|
||
</script>
|
||
</body>
|
||
</html>
|