266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
|
{% extends "shared/frontend/base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Concept 1: Split Screen - BMC Hub{% endblock %}
|
||
|
|
|
||
|
|
{% block extra_css %}
|
||
|
|
<style>
|
||
|
|
/* Hide default footer if exists to maximize height */
|
||
|
|
footer { display: none; }
|
||
|
|
|
||
|
|
.split-layout {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Left Sidebar: Ticket List */
|
||
|
|
.ticket-list-sidebar {
|
||
|
|
width: 350px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
border-right: 1px solid rgba(0,0,0,0.1);
|
||
|
|
background: var(--bg-card);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-header {
|
||
|
|
padding: 1rem;
|
||
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ticket-list-scroll {
|
||
|
|
overflow-y: auto;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ticket-item {
|
||
|
|
padding: 1rem;
|
||
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.2s;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ticket-item:hover {
|
||
|
|
background-color: var(--accent-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ticket-item.active {
|
||
|
|
background-color: var(--accent-light);
|
||
|
|
border-left: 4px solid var(--accent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ticket-item.unread::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
right: 1rem;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
background-color: var(--accent);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Right Content: Detail View */
|
||
|
|
.ticket-detail-main {
|
||
|
|
flex-grow: 1;
|
||
|
|
background: var(--bg-body);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header {
|
||
|
|
background: var(--bg-card);
|
||
|
|
padding: 1rem 1.5rem;
|
||
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-scroll {
|
||
|
|
flex-grow: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-footer {
|
||
|
|
background: var(--bg-card);
|
||
|
|
padding: 1rem 1.5rem;
|
||
|
|
border-top: 1px solid rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Chat bubbles */
|
||
|
|
.message-bubble {
|
||
|
|
background: var(--bg-card);
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||
|
|
max-width: 85%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message-bubble.internal {
|
||
|
|
background: #fff3cd;
|
||
|
|
border: 1px solid #ffeeba;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message-bubble.me {
|
||
|
|
background: var(--accent-light);
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-text {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block content_wrapper %}
|
||
|
|
<div class="container-fluid p-0" style="height: calc(100vh - 80px); overflow: hidden;">
|
||
|
|
<div class="split-layout">
|
||
|
|
<!-- Left Sidebar -->
|
||
|
|
<div class="ticket-list-sidebar">
|
||
|
|
<div class="list-header">
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-text bg-transparent border-end-0"><i class="bi bi-search"></i></span>
|
||
|
|
<input type="text" class="form-control border-start-0" placeholder="Søg tickets...">
|
||
|
|
</div>
|
||
|
|
<div class="d-flex gap-2 mt-2 overflow-auto pb-1">
|
||
|
|
<span class="badge bg-primary rounded-pill">Alle</span>
|
||
|
|
<span class="badge bg-light text-dark border rounded-pill">Mine</span>
|
||
|
|
<span class="badge bg-light text-dark border rounded-pill">Uløste</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ticket-list-scroll">
|
||
|
|
<!-- Active Item -->
|
||
|
|
<div class="ticket-item active">
|
||
|
|
<div class="d-flex justify-content-between mb-1">
|
||
|
|
<span class="badge bg-warning text-dark">Høj</span>
|
||
|
|
<small class="text-muted">14:32</small>
|
||
|
|
</div>
|
||
|
|
<h6 class="mb-1 text-truncate">Netværksproblem i hovedkontoret</h6>
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<img src="https://ui-avatars.com/api/?name=Tech+Corp&background=random" class="rounded-circle" width="20">
|
||
|
|
<small class="text-muted">Tech Corp A/S</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Other Items -->
|
||
|
|
<div class="ticket-item unread">
|
||
|
|
<div class="d-flex justify-content-between mb-1">
|
||
|
|
<span class="badge bg-info text-white">Ny</span>
|
||
|
|
<small class="text-muted">12:15</small>
|
||
|
|
</div>
|
||
|
|
<h6 class="mb-1 text-truncate">Printer løbet tør for toner</h6>
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<img src="https://ui-avatars.com/api/?name=Advokat+Huset&background=random" class="rounded-circle" width="20">
|
||
|
|
<small class="text-muted">Advokathuset</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ticket-item">
|
||
|
|
<div class="d-flex justify-content-between mb-1">
|
||
|
|
<span class="badge bg-success">Løst</span>
|
||
|
|
<small class="text-muted">I går</small>
|
||
|
|
</div>
|
||
|
|
<h6 class="mb-1 text-truncate">Opsætning af ny bruger (Mette)</h6>
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<img src="https://ui-avatars.com/api/?name=Byg+Aps&background=random" class="rounded-circle" width="20">
|
||
|
|
<small class="text-muted">Byg ApS</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- More dummy items -->
|
||
|
|
{% for i in range(5) %}
|
||
|
|
<div class="ticket-item">
|
||
|
|
<div class="d-flex justify-content-between mb-1">
|
||
|
|
<span class="badge bg-secondary">Venter</span>
|
||
|
|
<small class="text-muted">2 dage siden</small>
|
||
|
|
</div>
|
||
|
|
<h6 class="mb-1 text-truncate">Licens fornyelse Office 365</h6>
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<img src="https://ui-avatars.com/api/?name=Kunde+{{i}}&background=random" class="rounded-circle" width="20">
|
||
|
|
<small class="text-muted">Kunde {{i}}</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right Content -->
|
||
|
|
<div class="ticket-detail-main">
|
||
|
|
<div class="detail-header">
|
||
|
|
<div>
|
||
|
|
<div class="d-flex align-items-center gap-2 mb-1">
|
||
|
|
<span class="badge bg-light text-dark border">#TKT-20251215-005</span>
|
||
|
|
<span class="badge bg-warning text-dark">I Gang</span>
|
||
|
|
</div>
|
||
|
|
<h5 class="mb-0">Netværksproblem i hovedkontoret</h5>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex gap-2">
|
||
|
|
<button class="btn btn-outline-secondary btn-sm"><i class="bi bi-person-plus"></i> Tildel</button>
|
||
|
|
<button class="btn btn-outline-secondary btn-sm"><i class="bi bi-clock"></i> Log Tid</button>
|
||
|
|
<button class="btn btn-primary btn-sm"><i class="bi bi-check-lg"></i> Løs Sag</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="detail-scroll">
|
||
|
|
<!-- Original Request -->
|
||
|
|
<div class="message-bubble">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<img src="https://ui-avatars.com/api/?name=Jens+Jensen&background=random" class="rounded-circle" width="24">
|
||
|
|
<span class="fw-bold">Jens Jensen</span>
|
||
|
|
<span class="text-muted small">via Email</span>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted">15. dec 14:32</small>
|
||
|
|
</div>
|
||
|
|
<p class="mb-0">Hej Support,<br><br>Vi har problemer med internettet på hovedkontoret. Ingen kan komme på Wi-Fi, og kablet forbindelse virker heller ikke. Det haster meget!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Internal Note -->
|
||
|
|
<div class="message-bubble internal">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<i class="bi bi-shield-lock text-warning"></i>
|
||
|
|
<span class="fw-bold text-warning-emphasis">Intern Note</span>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted">15. dec 14:45</small>
|
||
|
|
</div>
|
||
|
|
<p class="mb-0">Jeg har tjekket Unifi controlleren. Switch #3 svarer ikke. Det er nok den der er nede.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Reply -->
|
||
|
|
<div class="message-bubble me">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
|
|
<div class="d-flex align-items-center gap-2">
|
||
|
|
<img src="https://ui-avatars.com/api/?name=Christian&background=0f4c75&color=fff" class="rounded-circle" width="24">
|
||
|
|
<span class="fw-bold">Christian (Support)</span>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted">15. dec 14:50</small>
|
||
|
|
</div>
|
||
|
|
<p class="mb-0">Hej Jens,<br><br>Jeg kigger på det med det samme. Jeg kan se vi har mistet forbindelsen til en af jeres switche. Jeg prøver at genstarte den remote.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="detail-footer">
|
||
|
|
<div class="input-group">
|
||
|
|
<button class="btn btn-outline-secondary" type="button"><i class="bi bi-paperclip"></i></button>
|
||
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Svar Kunde</button>
|
||
|
|
<ul class="dropdown-menu">
|
||
|
|
<li><a class="dropdown-item" href="#">Svar Kunde</a></li>
|
||
|
|
<li><a class="dropdown-item" href="#"><i class="bi bi-shield-lock text-warning"></i> Intern Note</a></li>
|
||
|
|
</ul>
|
||
|
|
<input type="text" class="form-control" placeholder="Skriv et svar...">
|
||
|
|
<button class="btn btn-primary" type="button"><i class="bi bi-send"></i> Send</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|