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.
252 lines
9.0 KiB
HTML
252 lines
9.0 KiB
HTML
{% extends "shared/frontend/base.html" %}
|
|
|
|
{% block title %}Concept 2: Kanban Board - BMC Hub{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.kanban-board {
|
|
display: flex;
|
|
height: 100%;
|
|
padding: 1.5rem;
|
|
gap: 1.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.kanban-column {
|
|
width: 320px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: transparent;
|
|
height: 100%;
|
|
}
|
|
|
|
.column-header {
|
|
padding: 0.5rem 0.5rem 1rem 0.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.column-content {
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
padding-right: 0.5rem; /* Space for scrollbar */
|
|
}
|
|
|
|
.kanban-card {
|
|
background: var(--bg-card);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
cursor: grab;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.kanban-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.kanban-card:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Priority Borders */
|
|
.priority-high { border-left-color: var(--warning); }
|
|
.priority-critical { border-left-color: var(--danger); }
|
|
.priority-normal { border-left-color: var(--info); }
|
|
.priority-low { border-left-color: var(--text-secondary); }
|
|
|
|
.card-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.card-tags {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.tag {
|
|
background: var(--bg-body);
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.add-card-btn {
|
|
background: transparent;
|
|
border: 2px dashed rgba(0,0,0,0.1);
|
|
color: var(--text-secondary);
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
margin-top: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.add-card-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: rgba(15, 76, 117, 0.05);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content_wrapper %}
|
|
<div class="container-fluid p-0" style="height: calc(100vh - 80px); overflow: hidden;">
|
|
<div class="kanban-board">
|
|
<!-- Column: Ny -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<span><i class="bi bi-circle text-info me-2"></i>Ny</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary">3</span>
|
|
</div>
|
|
<div class="column-content">
|
|
<div class="kanban-card priority-critical">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">#TKT-005</small>
|
|
<i class="bi bi-three-dots text-muted"></i>
|
|
</div>
|
|
<h6 class="mb-2">Server nede i produktion</h6>
|
|
<div class="card-tags">
|
|
<span class="tag">Server</span>
|
|
<span class="tag">Kritisk</span>
|
|
</div>
|
|
<div class="card-meta">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<img src="https://ui-avatars.com/api/?name=Fabrik+A/S&background=random" class="rounded-circle" width="16">
|
|
<span>Fabrik A/S</span>
|
|
</div>
|
|
<span>10m</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kanban-card priority-normal">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">#TKT-008</small>
|
|
<i class="bi bi-three-dots text-muted"></i>
|
|
</div>
|
|
<h6 class="mb-2">Ny medarbejder oprettelse</h6>
|
|
<div class="card-meta">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<img src="https://ui-avatars.com/api/?name=Kontor+ApS&background=random" class="rounded-circle" width="16">
|
|
<span>Kontor ApS</span>
|
|
</div>
|
|
<span>2t</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="add-card-btn"><i class="bi bi-plus"></i> Tilføj kort</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column: I Gang -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<span><i class="bi bi-play-circle text-warning me-2"></i>I Gang</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary">2</span>
|
|
</div>
|
|
<div class="column-content">
|
|
<div class="kanban-card priority-high">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">#TKT-002</small>
|
|
<img src="https://ui-avatars.com/api/?name=Christian&background=0f4c75&color=fff" class="rounded-circle" width="20" title="Assigned to Christian">
|
|
</div>
|
|
<h6 class="mb-2">Netværksproblem hovedkontor</h6>
|
|
<div class="card-tags">
|
|
<span class="tag">Netværk</span>
|
|
</div>
|
|
<div class="card-meta">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<img src="https://ui-avatars.com/api/?name=Tech+Corp&background=random" class="rounded-circle" width="16">
|
|
<span>Tech Corp</span>
|
|
</div>
|
|
<span>1d</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kanban-card priority-normal">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">#TKT-004</small>
|
|
<img src="https://ui-avatars.com/api/?name=Morten&background=random" class="rounded-circle" width="20" title="Assigned to Morten">
|
|
</div>
|
|
<h6 class="mb-2">Opdatering af firewall</h6>
|
|
<div class="card-meta">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<img src="https://ui-avatars.com/api/?name=Sikkerhed+A/S&background=random" class="rounded-circle" width="16">
|
|
<span>Sikkerhed A/S</span>
|
|
</div>
|
|
<span>3d</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column: Venter på Kunde -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<span><i class="bi bi-pause-circle text-secondary me-2"></i>Venter</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary">4</span>
|
|
</div>
|
|
<div class="column-content">
|
|
{% for i in range(4) %}
|
|
<div class="kanban-card priority-low">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">#TKT-01{{i}}</small>
|
|
<i class="bi bi-three-dots text-muted"></i>
|
|
</div>
|
|
<h6 class="mb-2">Bestilling af hardware {{i}}</h6>
|
|
<div class="card-meta">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<img src="https://ui-avatars.com/api/?name=Kunde+{{i}}&background=random" class="rounded-circle" width="16">
|
|
<span>Kunde {{i}}</span>
|
|
</div>
|
|
<span>5d</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column: Løst -->
|
|
<div class="kanban-column">
|
|
<div class="column-header">
|
|
<span><i class="bi bi-check-circle text-success me-2"></i>Løst</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary">12</span>
|
|
</div>
|
|
<div class="column-content">
|
|
<div class="kanban-card priority-normal opacity-75">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">#TKT-001</small>
|
|
<i class="bi bi-check-lg text-success"></i>
|
|
</div>
|
|
<h6 class="mb-2 text-decoration-line-through">Printer installation</h6>
|
|
<div class="card-meta">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<img src="https://ui-avatars.com/api/?name=Advokat&background=random" class="rounded-circle" width="16">
|
|
<span>Advokat</span>
|
|
</div>
|
|
<span>1u</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|