34555d1e36
- Added FastAPI router for time tracking views including dashboard, wizard, and orders. - Created HTML templates for the time tracking wizard with responsive design and Bootstrap integration. - Developed SQL migration script for the time tracking module, including tables for customers, cases, time entries, orders, and audit logs. - Introduced a script to list all registered routes, focusing on time tracking routes. - Added test script to verify route registration and specifically check for time tracking routes.
618 lines
24 KiB
HTML
618 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Godkend Tider - 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;
|
|
--success: #28a745;
|
|
--warning: #ffc107;
|
|
--danger: #dc3545;
|
|
--border-radius: 12px;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-body: #1a1a1a;
|
|
--bg-card: #2d2d2d;
|
|
--text-primary: #e4e4e4;
|
|
--text-secondary: #a0a0a0;
|
|
--accent-light: #1e3a52;
|
|
}
|
|
|
|
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.1);
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.progress-container {
|
|
position: relative;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.progress {
|
|
height: 8px;
|
|
border-radius: 10px;
|
|
background-color: var(--accent-light);
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.time-entry-card {
|
|
border-left: 4px solid var(--accent);
|
|
}
|
|
|
|
.time-entry-card .card-body {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--accent-light);
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.info-value {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.rounding-controls {
|
|
background: var(--accent-light);
|
|
padding: 1.5rem;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.btn-action {
|
|
padding: 0.8rem 2rem;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.completion-card {
|
|
text-align: center;
|
|
padding: 3rem 2rem;
|
|
}
|
|
|
|
.completion-card i {
|
|
font-size: 4rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.badge-large {
|
|
font-size: 1rem;
|
|
padding: 0.6rem 1.2rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.description-box {
|
|
background: var(--accent-light);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-top: 1rem;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/dashboard">
|
|
<i class="bi bi-grid-3x3-gap-fill"></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">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/dashboard">Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/customers">Kunder</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/timetracking">
|
|
<i class="bi bi-clock-history"></i> Tidsregistrering
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<button class="btn btn-link nav-link" onclick="toggleTheme()">
|
|
<i class="bi bi-moon-fill" id="theme-icon"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container py-4">
|
|
<!-- Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="mb-1">
|
|
<i class="bi bi-check2-circle text-primary"></i> Godkend Tidsregistreringer
|
|
</h1>
|
|
<p class="text-muted mb-0">Gennemgå og godkend tider én ad gangen</p>
|
|
</div>
|
|
<a href="/timetracking" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> Tilbage til oversigt
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0" id="progress-title">Indlæser...</h6>
|
|
<span class="badge bg-primary" id="progress-badge">0 / 0</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" id="progress-bar"
|
|
style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading-state" class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body text-center py-5">
|
|
<div class="spinner-border text-primary mb-3" role="status">
|
|
<span class="visually-hidden">Indlæser...</span>
|
|
</div>
|
|
<p class="text-muted">Henter næste tidsregistrering...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Entry Card -->
|
|
<div id="time-entry-container" class="row d-none">
|
|
<div class="col-lg-8">
|
|
<div class="card time-entry-card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<h4 class="mb-0" id="entry-title">Tidsregistrering</h4>
|
|
<span class="badge badge-large bg-info" id="entry-status">Afventer godkendelse</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">
|
|
<i class="bi bi-building"></i> Kunde
|
|
</span>
|
|
<span class="info-value" id="entry-customer">-</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">
|
|
<i class="bi bi-folder"></i> Case
|
|
</span>
|
|
<span class="info-value" id="entry-case">-</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">
|
|
<i class="bi bi-calendar-event"></i> Dato
|
|
</span>
|
|
<span class="info-value" id="entry-date">-</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">
|
|
<i class="bi bi-clock"></i> Original Timer
|
|
</span>
|
|
<span class="info-value" id="entry-hours-original">-</span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">
|
|
<i class="bi bi-person"></i> Udført af
|
|
</span>
|
|
<span class="info-value" id="entry-user">-</span>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<label class="info-label d-block mb-2">
|
|
<i class="bi bi-file-text"></i> Beskrivelse
|
|
</label>
|
|
<div class="description-box" id="entry-description">-</div>
|
|
</div>
|
|
|
|
<!-- Rounding Controls -->
|
|
<div class="rounding-controls">
|
|
<h6 class="mb-3">
|
|
<i class="bi bi-calculator"></i> Afrunding
|
|
</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Metode</label>
|
|
<select class="form-select" id="rounding-method">
|
|
<option value="none">Ingen afrunding</option>
|
|
<option value="nearest_quarter" selected>Nærmeste 0.25 time</option>
|
|
<option value="nearest_half">Nærmeste 0.5 time</option>
|
|
<option value="up_quarter">Afrund op til 0.25</option>
|
|
<option value="up_half">Afrund op til 0.5</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Minimum timer</label>
|
|
<input type="number" class="form-control" id="minimum-hours"
|
|
value="0" min="0" step="0.25">
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 p-3 bg-white rounded">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="fw-bold">Fakturerbare timer:</span>
|
|
<span class="fs-4 fw-bold text-primary" id="billable-hours">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="mb-3">Handlinger</h6>
|
|
|
|
<button class="btn btn-success btn-action w-100 mb-3"
|
|
onclick="approveEntry()">
|
|
<i class="bi bi-check-circle"></i> Godkend
|
|
</button>
|
|
|
|
<button class="btn btn-danger btn-action w-100 mb-3"
|
|
onclick="rejectEntry()">
|
|
<i class="bi bi-x-circle"></i> Afvis
|
|
</button>
|
|
|
|
<hr>
|
|
|
|
<div class="text-muted small">
|
|
<p class="mb-2">
|
|
<i class="bi bi-info-circle"></i>
|
|
Godkend for at inkludere i fakturering
|
|
</p>
|
|
<p class="mb-0">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
Afvisning kan ikke fortrydes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Context -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="mb-3">
|
|
<i class="bi bi-graph-up"></i> Kunde Status
|
|
</h6>
|
|
<div id="customer-context">
|
|
<div class="mb-2">
|
|
<small class="text-muted">Timepris:</small>
|
|
<div class="fw-bold" id="context-hourly-rate">-</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<small class="text-muted">Afventer godkendelse:</small>
|
|
<div class="fw-bold" id="context-pending">-</div>
|
|
</div>
|
|
<div>
|
|
<small class="text-muted">Godkendte timer:</small>
|
|
<div class="fw-bold text-success" id="context-approved">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion State -->
|
|
<div id="completion-state" class="row d-none">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body completion-card">
|
|
<i class="bi bi-check-circle text-success"></i>
|
|
<h3 class="mb-3">Alle tider gennemgået!</h3>
|
|
<p class="text-muted mb-4">
|
|
Der er ingen flere tidsregistreringer der afventer godkendelse.
|
|
</p>
|
|
<div class="d-flex gap-3 justify-content-center">
|
|
<a href="/timetracking" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-house"></i> Tilbage til Dashboard
|
|
</a>
|
|
<a href="/timetracking/orders" class="btn btn-success btn-lg">
|
|
<i class="bi bi-receipt"></i> Opret Ordrer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
let currentEntry = null;
|
|
let currentCustomerId = null;
|
|
|
|
// Theme toggle
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('theme-icon');
|
|
if (html.getAttribute('data-theme') === 'dark') {
|
|
html.removeAttribute('data-theme');
|
|
icon.className = 'bi bi-moon-fill';
|
|
localStorage.setItem('theme', 'light');
|
|
} else {
|
|
html.setAttribute('data-theme', 'dark');
|
|
icon.className = 'bi bi-sun-fill';
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
}
|
|
|
|
// Load saved theme
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
document.getElementById('theme-icon').className = 'bi bi-sun-fill';
|
|
}
|
|
|
|
// Get URL parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
currentCustomerId = urlParams.get('customer_id');
|
|
|
|
// Load next entry
|
|
async function loadNextEntry() {
|
|
document.getElementById('loading-state').classList.remove('d-none');
|
|
document.getElementById('time-entry-container').classList.add('d-none');
|
|
document.getElementById('completion-state').classList.add('d-none');
|
|
|
|
try {
|
|
const url = currentCustomerId
|
|
? `/api/v1/timetracking/wizard/next?customer_id=${currentCustomerId}`
|
|
: '/api/v1/timetracking/wizard/next';
|
|
|
|
const response = await fetch(url);
|
|
|
|
if (response.status === 404) {
|
|
// No more entries
|
|
showCompletion();
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
currentEntry = data.time_entry;
|
|
|
|
displayEntry(data);
|
|
await loadCustomerContext();
|
|
calculateBillableHours();
|
|
|
|
document.getElementById('loading-state').classList.add('d-none');
|
|
document.getElementById('time-entry-container').classList.remove('d-none');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading entry:', error);
|
|
alert('Fejl ved indlæsning: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Display entry
|
|
function displayEntry(data) {
|
|
const entry = data.time_entry;
|
|
|
|
document.getElementById('entry-customer').textContent = entry.customer_name;
|
|
document.getElementById('entry-case').textContent = entry.case_subject || 'Ingen case';
|
|
document.getElementById('entry-date').textContent = new Date(entry.time_date).toLocaleDateString('da-DK');
|
|
document.getElementById('entry-hours-original').textContent = entry.original_hours + ' timer';
|
|
document.getElementById('entry-user').textContent = entry.time_user_name || 'Ukendt';
|
|
document.getElementById('entry-description').textContent = entry.description || '(Ingen beskrivelse)';
|
|
|
|
// Progress
|
|
const total = data.customer_progress.total_entries;
|
|
const processed = data.customer_progress.approved_count + data.customer_progress.rejected_count;
|
|
const percent = Math.round((processed / total) * 100);
|
|
|
|
document.getElementById('progress-title').textContent = entry.customer_name;
|
|
document.getElementById('progress-badge').textContent = `${processed} / ${total}`;
|
|
document.getElementById('progress-bar').style.width = percent + '%';
|
|
}
|
|
|
|
// Load customer context
|
|
async function loadCustomerContext() {
|
|
try {
|
|
const response = await fetch(`/api/v1/timetracking/wizard/progress/${currentEntry.customer_id}`);
|
|
const progress = await response.json();
|
|
|
|
const hourlyRate = currentEntry.customer_hourly_rate || 850.00;
|
|
document.getElementById('context-hourly-rate').textContent = hourlyRate + ' DKK';
|
|
document.getElementById('context-pending').textContent = progress.pending_count + ' timer';
|
|
document.getElementById('context-approved').textContent =
|
|
progress.approved_count + ' (' + parseFloat(progress.total_approved_hours || 0).toFixed(1) + 'h)';
|
|
|
|
} catch (error) {
|
|
console.error('Error loading customer context:', error);
|
|
}
|
|
}
|
|
|
|
// Calculate billable hours
|
|
function calculateBillableHours() {
|
|
const method = document.getElementById('rounding-method').value;
|
|
const minHours = parseFloat(document.getElementById('minimum-hours').value) || 0;
|
|
const original = currentEntry.original_hours;
|
|
|
|
let billable = original;
|
|
|
|
// Apply rounding
|
|
if (method === 'nearest_quarter') {
|
|
billable = Math.round(billable * 4) / 4;
|
|
} else if (method === 'nearest_half') {
|
|
billable = Math.round(billable * 2) / 2;
|
|
} else if (method === 'up_quarter') {
|
|
billable = Math.ceil(billable * 4) / 4;
|
|
} else if (method === 'up_half') {
|
|
billable = Math.ceil(billable * 2) / 2;
|
|
}
|
|
|
|
// Apply minimum
|
|
billable = Math.max(billable, minHours);
|
|
|
|
document.getElementById('billable-hours').textContent = billable.toFixed(2) + ' timer';
|
|
currentEntry.calculated_billable_hours = billable;
|
|
}
|
|
|
|
// Approve entry
|
|
async function approveEntry() {
|
|
const billableHours = currentEntry.calculated_billable_hours;
|
|
const roundingMethod = document.getElementById('rounding-method').value;
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/timetracking/wizard/approve/${currentEntry.id}`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
billable_hours: billableHours,
|
|
rounding_method: roundingMethod
|
|
})
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Godkendelse fejlede');
|
|
|
|
// Load next
|
|
await loadNextEntry();
|
|
|
|
} catch (error) {
|
|
alert('Fejl ved godkendelse: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Reject entry
|
|
async function rejectEntry() {
|
|
if (!confirm('Er du sikker på at du vil afvise denne tidsregistrering?')) {
|
|
return;
|
|
}
|
|
|
|
const reason = prompt('Årsag til afvisning (valgfrit):');
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/timetracking/wizard/reject/${currentEntry.id}`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
rejection_reason: reason
|
|
})
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Afvisning fejlede');
|
|
|
|
// Load next
|
|
await loadNextEntry();
|
|
|
|
} catch (error) {
|
|
alert('Fejl ved afvisning: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Show completion
|
|
function showCompletion() {
|
|
document.getElementById('loading-state').classList.add('d-none');
|
|
document.getElementById('time-entry-container').classList.add('d-none');
|
|
document.getElementById('completion-state').classList.remove('d-none');
|
|
}
|
|
|
|
// Event listeners
|
|
document.getElementById('rounding-method').addEventListener('change', calculateBillableHours);
|
|
document.getElementById('minimum-hours').addEventListener('input', calculateBillableHours);
|
|
|
|
// Keyboard shortcuts
|
|
document.addEventListener('keydown', (e) => {
|
|
if (currentEntry && !e.target.matches('input, select, textarea')) {
|
|
if (e.key === 'a' || e.key === 'A') {
|
|
e.preventDefault();
|
|
approveEntry();
|
|
} else if (e.key === 'r' || e.key === 'R') {
|
|
e.preventDefault();
|
|
rejectEntry();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Load first entry
|
|
loadNextEntry();
|
|
</script>
|
|
</body>
|
|
</html>
|