134 lines
6.7 KiB
HTML
134 lines
6.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="breadcrumb">
|
|
<a href="/processes">Processes</a>
|
|
<span class="sep">/</span>
|
|
<a href="/processes/{{ run.process_id_ref }}">{{ run.process_name }}</a>
|
|
<span class="sep">/</span>
|
|
<span>{{ run.title }}</span>
|
|
</div>
|
|
|
|
<div class="detail-header">
|
|
<h1 class="detail-title">{{ run.title }}</h1>
|
|
<div class="flex gap-2">
|
|
{% if run.status != 'completed' %}
|
|
<form action="/processes/runs/{{ run.id }}/complete" method="post" data-confirm="Mark this run as complete?" style="display:inline">
|
|
<button type="submit" class="btn btn-primary btn-sm">Mark Complete</button>
|
|
</form>
|
|
{% endif %}
|
|
<form action="/processes/runs/{{ run.id }}/delete" method="post" data-confirm="Delete this run?" style="display:inline">
|
|
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-meta mt-2">
|
|
<span class="status-badge status-{{ run.status }}">{{ run.status|replace('_', ' ') }}</span>
|
|
<span class="row-tag">{{ run.process_type }}</span>
|
|
<span class="row-tag">{{ run.task_generation|replace('_', ' ') }}</span>
|
|
{% if run.project_name %}<span class="detail-meta-item">{{ run.project_name }}</span>{% endif %}
|
|
{% if run.contact_first %}<span class="detail-meta-item">{{ run.contact_first }} {{ run.contact_last or '' }}</span>{% endif %}
|
|
{% if run.started_at %}<span class="detail-meta-item">Started {{ run.started_at.strftime('%Y-%m-%d') }}</span>{% endif %}
|
|
{% if run.completed_at %}<span class="detail-meta-item">Completed {{ run.completed_at.strftime('%Y-%m-%d') }}</span>{% endif %}
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="card mt-3" style="padding: 16px;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<span style="font-weight: 600; font-size: 0.9rem;">Progress</span>
|
|
<div style="flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;">
|
|
<div style="width: {{ (completed_steps / total_steps * 100)|int if total_steps > 0 else 0 }}%; height: 100%; background: var(--green); border-radius: 4px; transition: width 0.3s;"></div>
|
|
</div>
|
|
<span style="font-weight: 600; font-size: 0.9rem;">{{ completed_steps }}/{{ total_steps }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Steps Checklist -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Steps</h3>
|
|
</div>
|
|
|
|
{% for step in steps %}
|
|
<div class="list-row {{ 'completed' if step.status == 'completed' }}" style="align-items: flex-start;">
|
|
<div class="row-check">
|
|
{% if step.status == 'completed' %}
|
|
<form action="/processes/runs/{{ run.id }}/steps/{{ step.id }}/uncomplete" method="post" style="display:inline">
|
|
<input type="checkbox" id="step-{{ step.id }}" checked onchange="this.form.submit()">
|
|
<label for="step-{{ step.id }}"></label>
|
|
</form>
|
|
{% else %}
|
|
<form action="/processes/runs/{{ run.id }}/steps/{{ step.id }}/complete" method="post" style="display:inline" id="complete-form-{{ step.id }}">
|
|
<input type="checkbox" id="step-{{ step.id }}" onchange="this.form.submit()">
|
|
<label for="step-{{ step.id }}"></label>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span class="row-meta" style="min-width: 20px; font-weight: 600;">{{ loop.index }}</span>
|
|
<span class="row-title" style="{{ 'text-decoration: line-through; opacity: 0.6;' if step.status == 'completed' }}">{{ step.title }}</span>
|
|
</div>
|
|
{% if step.instructions %}
|
|
<div style="color: var(--muted); font-size: 0.82rem; margin: 4px 0 0 28px;">{{ step.instructions }}</div>
|
|
{% endif %}
|
|
{% if step.completed_at %}
|
|
<div style="color: var(--green); font-size: 0.78rem; margin: 4px 0 0 28px;">
|
|
Completed {{ step.completed_at.strftime('%Y-%m-%d %H:%M') }}
|
|
</div>
|
|
{% endif %}
|
|
{% if step.notes %}
|
|
<div style="color: var(--muted); font-size: 0.82rem; margin: 2px 0 0 28px; font-style: italic;">{{ step.notes }}</div>
|
|
{% endif %}
|
|
{% if step.status != 'completed' %}
|
|
<div style="margin: 6px 0 0 28px;">
|
|
<button type="button" class="btn btn-ghost btn-xs" onclick="toggleNotes('{{ step.id }}')">Add Notes</button>
|
|
<div id="notes-{{ step.id }}" style="display: none; margin-top: 4px;">
|
|
<form action="/processes/runs/{{ run.id }}/steps/{{ step.id }}/complete" method="post" style="display: flex; gap: 6px; align-items: flex-end;">
|
|
<input type="text" name="notes" class="form-input" placeholder="Completion notes..." style="flex: 1; height: 32px; font-size: 0.82rem;">
|
|
<button type="submit" class="btn btn-primary btn-sm">Complete with Notes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<!-- Show linked tasks for this step -->
|
|
{% if step_tasks.get(step.id|string) %}
|
|
<div style="margin: 6px 0 0 28px;">
|
|
{% for task in step_tasks[step.id|string] %}
|
|
<div style="display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;">
|
|
<span class="status-badge status-{{ task.status }}" style="font-size: 0.72rem;">{{ task.status }}</span>
|
|
<a href="/tasks/{{ task.id }}" style="font-size: 0.82rem;">{{ task.title }}</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- All Generated Tasks -->
|
|
{% if tasks %}
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Generated Tasks<span class="page-count">{{ tasks|length }}</span></h3>
|
|
</div>
|
|
{% for task in tasks %}
|
|
<div class="list-row {{ 'completed' if task.status == 'done' }}">
|
|
<span class="priority-dot priority-{{ task.priority }}"></span>
|
|
<span class="row-title"><a href="/tasks/{{ task.id }}">{{ task.title }}</a></span>
|
|
{% if task.project_name %}<span class="row-tag">{{ task.project_name }}</span>{% endif %}
|
|
<span class="status-badge status-{{ task.status }}">{{ task.status|replace('_', ' ') }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
function toggleNotes(stepId) {
|
|
var el = document.getElementById('notes-' + stepId);
|
|
el.style.display = el.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
</script>
|
|
{% endblock %}
|