ffb3d335bc
docs: Create vTiger & Simply-CRM integration setup guide with credential requirements feat: Implement ticket system enhancements including relations, calendar events, templates, and AI suggestions refactor: Update ticket system migration to include audit logging and enhanced email metadata
561 lines
21 KiB
HTML
561 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Worklog Godkendelse - BMC Hub</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<style>
|
|
:root {
|
|
--bg-body: #f8f9fa;
|
|
--bg-card: #ffffff;
|
|
--text-primary: #2c3e50;
|
|
--text-secondary: #6c757d;
|
|
--accent: #0f4c75;
|
|
--accent-light: #eef2f5;
|
|
--border-radius: 12px;
|
|
--success: #28a745;
|
|
--danger: #dc3545;
|
|
--warning: #ffc107;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-body: #1a1d23;
|
|
--bg-card: #252a31;
|
|
--text-primary: #e4e6eb;
|
|
--text-secondary: #b0b3b8;
|
|
--accent: #4a9eff;
|
|
--accent-light: #2d3748;
|
|
--success: #48bb78;
|
|
--danger: #f56565;
|
|
--warning: #ed8936;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-body);
|
|
color: var(--text-primary);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
padding-top: 80px;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
.navbar {
|
|
background: var(--bg-card);
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-secondary);
|
|
padding: 0.6rem 1.2rem !important;
|
|
border-radius: var(--border-radius);
|
|
transition: all 0.2s;
|
|
font-weight: 500;
|
|
margin: 0 0.2rem;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
background-color: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
|
|
background: var(--bg-card);
|
|
margin-bottom: 1.5rem;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.stats-row {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-card p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.worklog-table {
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.worklog-table th {
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid var(--accent-light);
|
|
padding: 1rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.worklog-table td {
|
|
padding: 1rem 0.75rem;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid var(--accent-light);
|
|
}
|
|
|
|
.worklog-row {
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.worklog-row:hover {
|
|
background-color: var(--accent-light);
|
|
}
|
|
|
|
.badge {
|
|
padding: 0.4rem 0.8rem;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.badge-invoice {
|
|
background-color: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.badge-prepaid {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.badge-support {
|
|
background-color: #cce5ff;
|
|
color: #004085;
|
|
}
|
|
|
|
.badge-development {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.btn-approve {
|
|
background-color: var(--success);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.4rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-approve:hover {
|
|
background-color: #218838;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-reject {
|
|
background-color: var(--danger);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.4rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-reject:hover {
|
|
background-color: #c82333;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.theme-toggle {
|
|
cursor: pointer;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--border-radius);
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
transition: all 0.2s;
|
|
border: none;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.filter-bar {
|
|
background: var(--bg-card);
|
|
padding: 1.5rem;
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.hours-display {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.ticket-number {
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|
background: var(--accent-light);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.customer-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.work-description {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-group-actions {
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="bi bi-boxes"></i> BMC Hub
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/ticket/dashboard">
|
|
<i class="bi bi-speedometer2"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/api/v1/ticket/tickets">
|
|
<i class="bi bi-ticket-detailed"></i> Tickets
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/ticket/worklog/review">
|
|
<i class="bi bi-clock-history"></i> Worklog Godkendelse
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/api/v1/prepaid-cards">
|
|
<i class="bi bi-credit-card"></i> Klippekort
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Dark Mode">
|
|
<i class="bi bi-moon-stars-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid px-4">
|
|
<!-- Page Header -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1 class="mb-2">
|
|
<i class="bi bi-clock-history"></i> Worklog Godkendelse
|
|
</h1>
|
|
<p class="text-muted">Godkend eller afvis enkelt-entries fra draft worklog</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Row -->
|
|
<div class="row stats-row">
|
|
<div class="col-md-4">
|
|
<div class="card stat-card">
|
|
<h3>{{ total_entries }}</h3>
|
|
<p>Entries til godkendelse</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card stat-card">
|
|
<h3>{{ "%.2f"|format(total_hours) }}t</h3>
|
|
<p>Total timer</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card stat-card">
|
|
<h3>{{ "%.2f"|format(total_billable_hours) }}t</h3>
|
|
<p>Fakturerbare timer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Bar -->
|
|
<div class="filter-bar">
|
|
<form method="get" action="/ticket/worklog/review" class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="customer_id" class="form-label">Filtrer efter kunde:</label>
|
|
<select name="customer_id" id="customer_id" class="form-select" onchange="this.form.submit()">
|
|
<option value="">Alle kunder</option>
|
|
{% for customer in customers %}
|
|
<option value="{{ customer.id }}" {% if customer.id == selected_customer_id %}selected{% endif %}>
|
|
{{ customer.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="status" class="form-label">Status:</label>
|
|
<select name="status" id="status" class="form-select" onchange="this.form.submit()">
|
|
<option value="draft" {% if selected_status == 'draft' %}selected{% endif %}>Draft</option>
|
|
<option value="billable" {% if selected_status == 'billable' %}selected{% endif %}>Billable</option>
|
|
<option value="rejected" {% if selected_status == 'rejected' %}selected{% endif %}>Rejected</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-funnel"></i> Filtrer
|
|
</button>
|
|
<a href="/ticket/worklog/review" class="btn btn-outline-secondary ms-2">
|
|
<i class="bi bi-x-circle"></i> Ryd filtre
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Worklog Table -->
|
|
{% if worklogs %}
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="table worklog-table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Ticket</th>
|
|
<th>Kunde</th>
|
|
<th>Dato</th>
|
|
<th>Timer</th>
|
|
<th>Type</th>
|
|
<th>Fakturering</th>
|
|
<th>Beskrivelse</th>
|
|
<th>Medarbejder</th>
|
|
<th style="text-align: right;">Handlinger</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for worklog in worklogs %}
|
|
<tr class="worklog-row">
|
|
<td>
|
|
<span class="ticket-number">{{ worklog.ticket_number }}</span>
|
|
<br>
|
|
<small class="text-muted">{{ worklog.ticket_subject[:30] }}...</small>
|
|
</td>
|
|
<td>
|
|
{% if worklog.customer_name %}
|
|
<span class="customer-name">{{ worklog.customer_name }}</span>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{{ worklog.work_date.strftime('%d-%m-%Y') if worklog.work_date else '-' }}
|
|
</td>
|
|
<td>
|
|
<span class="hours-display">{{ "%.2f"|format(worklog.hours) }}t</span>
|
|
</td>
|
|
<td>
|
|
{% if worklog.work_type == 'support' %}
|
|
<span class="badge badge-support">Support</span>
|
|
{% elif worklog.work_type == 'development' %}
|
|
<span class="badge badge-development">Udvikling</span>
|
|
{% else %}
|
|
<span class="badge">{{ worklog.work_type }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if worklog.billing_method == 'invoice' %}
|
|
<span class="badge badge-invoice">
|
|
<i class="bi bi-file-earmark-text"></i> Faktura
|
|
</span>
|
|
{% elif worklog.billing_method == 'prepaid' %}
|
|
<span class="badge badge-prepaid">
|
|
<i class="bi bi-credit-card"></i> Klippekort
|
|
</span>
|
|
{% if worklog.card_number %}
|
|
<br><small class="text-muted">{{ worklog.card_number }}</small>
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="work-description" title="{{ worklog.description or '-' }}">
|
|
{{ worklog.description or '-' }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{{ worklog.user_name or 'N/A' }}
|
|
</td>
|
|
<td>
|
|
{% if worklog.status == 'draft' %}
|
|
<div class="btn-group-actions">
|
|
<form method="post" action="/ticket/worklog/{{ worklog.id }}/approve" style="display: inline;">
|
|
<input type="hidden" name="redirect_to" value="{{ request.url }}">
|
|
<button type="submit" class="btn btn-approve btn-sm">
|
|
<i class="bi bi-check-circle"></i> Godkend
|
|
</button>
|
|
</form>
|
|
<button
|
|
type="button"
|
|
class="btn btn-reject btn-sm ms-1"
|
|
onclick="rejectWorklog({{ worklog.id }}, '{{ request.url }}')">
|
|
<i class="bi bi-x-circle"></i> Afvis
|
|
</button>
|
|
</div>
|
|
{% else %}
|
|
<span class="badge">{{ worklog.status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="card">
|
|
<div class="empty-state">
|
|
<i class="bi bi-inbox"></i>
|
|
<h3>Ingen worklog entries</h3>
|
|
<p>Der er ingen entries med status "{{ selected_status }}" {% if selected_customer_id %}for denne kunde{% endif %}.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Reject Modal -->
|
|
<div class="modal fade" id="rejectModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content" style="background: var(--bg-card); color: var(--text-primary);">
|
|
<div class="modal-header" style="border-bottom: 1px solid var(--accent-light);">
|
|
<h5 class="modal-title">Afvis Worklog Entry</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="rejectForm" method="post">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="rejectReason" class="form-label">Årsag til afvisning (valgfrit):</label>
|
|
<textarea
|
|
class="form-control"
|
|
id="rejectReason"
|
|
name="reason"
|
|
rows="3"
|
|
placeholder="Forklar hvorfor denne entry afvises..."
|
|
style="background: var(--bg-body); color: var(--text-primary); border-color: var(--accent-light);"></textarea>
|
|
</div>
|
|
<input type="hidden" name="redirect_to" id="rejectRedirectTo">
|
|
</div>
|
|
<div class="modal-footer" style="border-top: 1px solid var(--accent-light);">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
|
|
<button type="submit" class="btn btn-reject">
|
|
<i class="bi bi-x-circle"></i> Afvis Entry
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Theme Toggle
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const currentTheme = html.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
|
|
// Update icon
|
|
const icon = document.querySelector('.theme-toggle i');
|
|
if (newTheme === 'dark') {
|
|
icon.className = 'bi bi-sun-fill';
|
|
} else {
|
|
icon.className = 'bi bi-moon-stars-fill';
|
|
}
|
|
}
|
|
|
|
// Load saved theme
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
|
|
const icon = document.querySelector('.theme-toggle i');
|
|
if (savedTheme === 'dark') {
|
|
icon.className = 'bi bi-sun-fill';
|
|
}
|
|
});
|
|
|
|
// Reject worklog with modal
|
|
function rejectWorklog(worklogId, redirectUrl) {
|
|
const form = document.getElementById('rejectForm');
|
|
form.action = `/ticket/worklog/${worklogId}/reject`;
|
|
document.getElementById('rejectRedirectTo').value = redirectUrl;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('rejectModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Auto-refresh indicator (optional)
|
|
let lastRefresh = Date.now();
|
|
setInterval(() => {
|
|
const elapsed = Math.floor((Date.now() - lastRefresh) / 1000);
|
|
if (elapsed > 300) { // 5 minutes
|
|
const badge = document.createElement('span');
|
|
badge.className = 'badge bg-warning position-fixed';
|
|
badge.style.bottom = '20px';
|
|
badge.style.right = '20px';
|
|
badge.style.cursor = 'pointer';
|
|
badge.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Opdater siden';
|
|
badge.onclick = () => location.reload();
|
|
document.body.appendChild(badge);
|
|
}
|
|
}, 60000);
|
|
</script>
|
|
</body>
|
|
</html>
|