108 lines
5.1 KiB
HTML
108 lines
5.1 KiB
HTML
|
{% extends "shared/frontend/base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Tekniker Dashboard - Vælg Variant{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="container-fluid py-4">
|
||
|
|
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
|
||
|
|
<div>
|
||
|
|
<h1 class="h3 mb-1">🛠️ Tekniker Dashboard</h1>
|
||
|
|
<p class="text-muted mb-0">Vælg den visning der passer bedst til {{ technician_name }} (bruger #{{ technician_user_id }})</p>
|
||
|
|
</div>
|
||
|
|
<form method="get" action="/ticket/dashboard/technician" class="d-flex align-items-center gap-2">
|
||
|
|
<label for="technician_user_id" class="form-label mb-0 text-muted small">Bruger ID</label>
|
||
|
|
<input type="number" class="form-control form-control-sm" name="technician_user_id" id="technician_user_id" value="{{ technician_user_id }}" style="width: 100px;">
|
||
|
|
<button type="submit" class="btn btn-sm btn-outline-primary">Skift</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row g-3 mb-4">
|
||
|
|
<div class="col-6 col-md-2">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<div class="small text-muted">Nye sager</div>
|
||
|
|
<div class="h4 mb-0">{{ kpis.new_cases_count }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-md-2">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<div class="small text-muted">Mine sager</div>
|
||
|
|
<div class="h4 mb-0">{{ kpis.my_cases_count }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-md-2">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<div class="small text-muted">Dagens opgaver</div>
|
||
|
|
<div class="h4 mb-0">{{ kpis.today_tasks_count }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-md-2">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<div class="small text-muted">Haste / over SLA</div>
|
||
|
|
<div class="h4 mb-0 text-danger">{{ kpis.urgent_overdue_count }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-md-2">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<div class="small text-muted">Mine opportunities</div>
|
||
|
|
<div class="h4 mb-0">{{ kpis.my_opportunities_count }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row g-4">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body d-flex flex-column">
|
||
|
|
<h5 class="card-title mb-2">Version 1: Overblik</h5>
|
||
|
|
<p class="text-muted small mb-3">KPI-kort + kompakte lister. God til hurtig prioritering.</p>
|
||
|
|
<ul class="small text-muted mb-4">
|
||
|
|
<li>Fokus på status og antal</li>
|
||
|
|
<li>Hurtig scanning af nye/mine sager</li>
|
||
|
|
<li>Minimal støj</li>
|
||
|
|
</ul>
|
||
|
|
<a href="/ticket/dashboard/technician/v1?technician_user_id={{ technician_user_id }}" class="btn btn-primary mt-auto">Åbn Version 1</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body d-flex flex-column">
|
||
|
|
<h5 class="card-title mb-2">Version 2: Workboard</h5>
|
||
|
|
<p class="text-muted small mb-3">3 kolonner med arbejdsflow. God til daglig drift.</p>
|
||
|
|
<ul class="small text-muted mb-4">
|
||
|
|
<li>Visuel opdeling af arbejdsområder</li>
|
||
|
|
<li>Haste-emner centralt</li>
|
||
|
|
<li>God til standups</li>
|
||
|
|
</ul>
|
||
|
|
<a href="/ticket/dashboard/technician/v2?technician_user_id={{ technician_user_id }}" class="btn btn-primary mt-auto">Åbn Version 2</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card border-0 shadow-sm h-100">
|
||
|
|
<div class="card-body d-flex flex-column">
|
||
|
|
<h5 class="card-title mb-2">Version 3: Power Table</h5>
|
||
|
|
<p class="text-muted small mb-3">Tabel-fokuseret dashboard. God til hurtig sortering og detaljevisning.</p>
|
||
|
|
<ul class="small text-muted mb-4">
|
||
|
|
<li>Høj datatæthed</li>
|
||
|
|
<li>Nemt at sammenligne felter</li>
|
||
|
|
<li>Målrettet erfarne brugere</li>
|
||
|
|
</ul>
|
||
|
|
<a href="/ticket/dashboard/technician/v3?technician_user_id={{ technician_user_id }}" class="btn btn-primary mt-auto">Åbn Version 3</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|