3806c7d011
- Added migration 025 for the Ticket System, creating tables for tickets, comments, attachments, worklogs, prepaid cards, and audit logs. - Introduced migration 026 to add ticket-related permissions to the auth system and assign them to user groups. - Developed a test suite for the Ticket Module, validating database schema, ticket number generation, prepaid card constraints, service logic, worklog creation, audit logging, and views.
240 lines
8.9 KiB
HTML
240 lines
8.9 KiB
HTML
{% extends "shared/frontend/base.html" %}
|
|
|
|
{% block title %}Concept 3: Power Table - BMC Hub{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.power-table-container {
|
|
background: var(--bg-card);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filter-bar {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
background: var(--bg-body);
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.power-table {
|
|
width: 100%;
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.power-table th {
|
|
background: var(--bg-body);
|
|
padding: 0.75rem 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.power-table td {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.power-table tr:hover td {
|
|
background-color: var(--accent-light);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.col-checkbox { width: 40px; text-align: center; }
|
|
.col-id { width: 120px; font-family: monospace; color: var(--accent); }
|
|
.col-status { width: 100px; }
|
|
.col-priority { width: 100px; }
|
|
.col-subject { min-width: 300px; font-weight: 500; }
|
|
.col-customer { width: 200px; }
|
|
.col-assigned { width: 150px; }
|
|
.col-updated { width: 150px; color: var(--text-secondary); }
|
|
|
|
.status-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.status-open { background-color: var(--info); }
|
|
.status-in-progress { background-color: var(--warning); }
|
|
.status-resolved { background-color: var(--success); }
|
|
.status-closed { background-color: var(--text-secondary); }
|
|
|
|
.priority-badge {
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.priority-high { background: #fff3cd; color: #856404; }
|
|
.priority-critical { background: #f8d7da; color: #721c24; }
|
|
.priority-normal { background: #e2e3e5; color: #383d41; }
|
|
|
|
.avatar-sm {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.bulk-actions {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
background: var(--accent);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.bulk-actions.show {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4 py-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h4 mb-0">Alle Tickets</h2>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-secondary"><i class="bi bi-download"></i> Eksportér</button>
|
|
<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Ny Ticket</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="power-table-container">
|
|
<!-- Filter Bar -->
|
|
<div class="filter-bar">
|
|
<div class="input-group" style="width: 300px;">
|
|
<span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
|
|
<input type="text" class="form-control border-start-0" placeholder="Søg...">
|
|
</div>
|
|
|
|
<select class="form-select" style="width: 150px;">
|
|
<option selected>Status: Alle</option>
|
|
<option>Ny</option>
|
|
<option>I Gang</option>
|
|
<option>Løst</option>
|
|
</select>
|
|
|
|
<select class="form-select" style="width: 150px;">
|
|
<option selected>Prioritet: Alle</option>
|
|
<option>Kritisk</option>
|
|
<option>Høj</option>
|
|
<option>Normal</option>
|
|
</select>
|
|
|
|
<select class="form-select" style="width: 150px;">
|
|
<option selected>Tildelt: Alle</option>
|
|
<option>Mig</option>
|
|
<option>Ufordelt</option>
|
|
</select>
|
|
|
|
<div class="ms-auto text-muted small">
|
|
Viser 1-50 af 142 tickets
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions Bar (Hidden by default) -->
|
|
<div class="bg-light p-2 border-bottom d-none" id="bulkActions">
|
|
<div class="d-flex align-items-center gap-3 px-2">
|
|
<span class="fw-bold text-primary">3 valgt</span>
|
|
<div class="vr"></div>
|
|
<button class="btn btn-sm btn-outline-secondary">Sæt Status</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Tildel</button>
|
|
<button class="btn btn-sm btn-outline-danger">Slet</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="power-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-checkbox"><input type="checkbox" class="form-check-input"></th>
|
|
<th class="col-id">ID</th>
|
|
<th class="col-subject">Emne</th>
|
|
<th class="col-customer">Kunde</th>
|
|
<th class="col-status">Status</th>
|
|
<th class="col-priority">Prioritet</th>
|
|
<th class="col-assigned">Tildelt</th>
|
|
<th class="col-updated">Opdateret</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="col-checkbox"><input type="checkbox" class="form-check-input"></td>
|
|
<td class="col-id">#TKT-005</td>
|
|
<td class="col-subject">Netværksproblem i hovedkontoret</td>
|
|
<td class="col-customer">
|
|
<img src="https://ui-avatars.com/api/?name=Tech+Corp&background=random" class="avatar-sm">
|
|
Tech Corp A/S
|
|
</td>
|
|
<td class="col-status"><span class="status-dot status-in-progress"></span>I Gang</td>
|
|
<td class="col-priority"><span class="priority-badge priority-high">Høj</span></td>
|
|
<td class="col-assigned">
|
|
<img src="https://ui-avatars.com/api/?name=Christian&background=0f4c75&color=fff" class="avatar-sm">
|
|
Christian
|
|
</td>
|
|
<td class="col-updated">10 min siden</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="col-checkbox"><input type="checkbox" class="form-check-input"></td>
|
|
<td class="col-id">#TKT-004</td>
|
|
<td class="col-subject">Server nede i produktion</td>
|
|
<td class="col-customer">
|
|
<img src="https://ui-avatars.com/api/?name=Fabrik+A/S&background=random" class="avatar-sm">
|
|
Fabrik A/S
|
|
</td>
|
|
<td class="col-status"><span class="status-dot status-open"></span>Ny</td>
|
|
<td class="col-priority"><span class="priority-badge priority-critical">Kritisk</span></td>
|
|
<td class="col-assigned"><span class="text-muted fst-italic">Ufordelt</span></td>
|
|
<td class="col-updated">1 time siden</td>
|
|
</tr>
|
|
|
|
{% for i in range(10) %}
|
|
<tr>
|
|
<td class="col-checkbox"><input type="checkbox" class="form-check-input"></td>
|
|
<td class="col-id">#TKT-00{{i}}</td>
|
|
<td class="col-subject">Support sag vedrørende faktura {{i}}</td>
|
|
<td class="col-customer">
|
|
<img src="https://ui-avatars.com/api/?name=Kunde+{{i}}&background=random" class="avatar-sm">
|
|
Kunde {{i}} ApS
|
|
</td>
|
|
<td class="col-status"><span class="status-dot status-resolved"></span>Løst</td>
|
|
<td class="col-priority"><span class="priority-badge priority-normal">Normal</span></td>
|
|
<td class="col-assigned">
|
|
<img src="https://ui-avatars.com/api/?name=Morten&background=random" class="avatar-sm">
|
|
Morten
|
|
</td>
|
|
<td class="col-updated">{{i}} dage siden</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|