122 lines
6.2 KiB
Plaintext
122 lines
6.2 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title><%= engagement.title %> — Mek-Tech Consulting</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<link rel="stylesheet" href="/css/dynamic.css">
|
||
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
|
||
</head>
|
||
<body>
|
||
<nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>
|
||
|
||
<div class="container">
|
||
<a href="javascript:history.back()" class="back-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> Terug</a>
|
||
<div class="page-header">
|
||
<div>
|
||
<h1><%= engagement.title %></h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
<a href="/engagements/<%= engagement.id %>/edit" class="btn btn-primary">Bewerk</a>
|
||
<a href="/assess/<%= engagement.client_id %>/<%= engagement.id %>" class="btn btn-accent">Assessment koppelen</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-grid">
|
||
<div class="detail-card">
|
||
<h3>Details</h3>
|
||
<table class="info-table">
|
||
<tr><td>Cliënt</td><td><a href="/clients/<%= engagement.client_id %>" class="link"><%= engagement.client_name %></a></td></tr>
|
||
<tr><td>Type</td><td><span class="engagement-type <%= engagement.type %>"><%= engagement.type %></span></td></tr>
|
||
<tr><td>Status</td><td><span class="status-badge <%= engagement.status %>"><%= engagement.status %></span></td></tr>
|
||
<tr><td>Start</td><td><%= engagement.start_date ? new Date(engagement.start_date).toLocaleDateString('nl-NL') : '-' %></td></tr>
|
||
<tr><td>Eind</td><td><%= engagement.end_date ? new Date(engagement.end_date).toLocaleDateString('nl-NL') : '-' %></td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="detail-card">
|
||
<h3>Status wijzigen</h3>
|
||
<form action="/engagements/<%= engagement.id %>/status" method="POST" class="status-form">
|
||
<select name="status">
|
||
<option value="planned" <%= engagement.status === 'planned' ? 'selected' : '' %>>Gepland</option>
|
||
<option value="in_progress" <%= engagement.status === 'in_progress' ? 'selected' : '' %>>Bezig</option>
|
||
<option value="completed" <%= engagement.status === 'completed' ? 'selected' : '' %>>Afgerond</option>
|
||
<option value="on_hold" <%= engagement.status === 'on_hold' ? 'selected' : '' %>>On Hold</option>
|
||
</select>
|
||
<button type="submit" class="btn btn-primary">Update</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<% if (engagement.description) { %>
|
||
<section class="section">
|
||
<h3 class="section-title">Omschrijving</h3>
|
||
<div class="card"><p style="white-space:pre-wrap"><%= engagement.description %></p></div>
|
||
</section>
|
||
<% } %>
|
||
|
||
<% if (engagement.outcome) { %>
|
||
<section class="section">
|
||
<h3 class="section-title">Resultaat</h3>
|
||
<div class="card"><p style="white-space:pre-wrap"><%= engagement.outcome %></p></div>
|
||
</section>
|
||
<% } %>
|
||
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h3 class="section-title">Taken (<%= tasks.length %>)</h3>
|
||
<button class="btn btn-small btn-primary" onclick="document.getElementById('taskForm').style.display='block'">+ Taak</button>
|
||
</div>
|
||
|
||
<form id="taskForm" action="/tasks/new" method="POST" class="task-form" style="display:none">
|
||
<input type="hidden" name="engagement_id" value="<%= engagement.id %>">
|
||
<div class="task-form-grid">
|
||
<input type="text" name="title" placeholder="Taak titel" required>
|
||
<input type="text" name="description" placeholder="Omschrijving (optioneel)">
|
||
<select name="priority">
|
||
<option value="low">Low</option>
|
||
<option value="medium" selected>Medium</option>
|
||
<option value="high">High</option>
|
||
<option value="critical">Critical</option>
|
||
</select>
|
||
<input type="date" name="due_date">
|
||
<button type="submit" class="btn btn-accent">Toevoegen</button>
|
||
</div>
|
||
</form>
|
||
|
||
<% if (tasks.length === 0) { %>
|
||
<div class="empty-state"><p>Nog geen taken.</p></div>
|
||
<% } else { %>
|
||
<div class="task-list">
|
||
<% tasks.forEach(function(t) { %>
|
||
<div class="task-item <%= t.status %>">
|
||
<form action="/tasks/<%= t.id %>/status" method="POST" class="task-status-form">
|
||
<select name="status" onchange="this.form.submit()">
|
||
<option value="todo" <%= t.status === 'todo' ? 'selected' : '' %>>Todo</option>
|
||
<option value="in_progress" <%= t.status === 'in_progress' ? 'selected' : '' %>>Bezig</option>
|
||
<option value="done" <%= t.status === 'done' ? 'selected' : '' %>>Done</option>
|
||
</select>
|
||
</form>
|
||
<div class="task-body">
|
||
<span class="task-title"><%= t.title %></span>
|
||
<% if (t.description) { %><span class="task-desc"><%= t.description %></span><% } %>
|
||
</div>
|
||
<span class="task-prio <%= t.priority %>"><%= t.priority %></span>
|
||
<% if (t.due_date) { %>
|
||
<span class="task-due <%= new Date(t.due_date) < new Date() && t.status !== 'done' ? 'overdue' : '' %>">
|
||
<%= new Date(t.due_date).toLocaleDateString('nl-NL') %>
|
||
</span>
|
||
<% } %>
|
||
<form action="/tasks/<%= t.id %>/delete" method="POST" style="display:inline">
|
||
<button class="btn-small danger" type="submit">×</button>
|
||
</form>
|
||
</div>
|
||
<% }) %>
|
||
</div>
|
||
<% } %>
|
||
</section>
|
||
</div>
|
||
<script src="/js/theme.js"></script></body>
|
||
</html>
|