feat: Add workflow history timeline to admin membership detail

Show same workflow history on admin side as users see, with sub-workflow
arrows (↓ for admin proposals, ↑ for user responses).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-02-01 17:07:56 +01:00
parent f71b12eeba
commit 8e2235b0ce

View File

@ -463,6 +463,81 @@
.legend-text {
color: var(--text-secondary);
}
/* Workflow History Timeline */
.workflow-timeline {
position: relative;
padding-left: var(--spacing-xl);
}
.workflow-timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border);
}
.workflow-event {
position: relative;
padding-bottom: var(--spacing-md);
}
.workflow-event::before {
content: '';
position: absolute;
left: calc(-1 * var(--spacing-xl) + 4px);
top: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--success);
}
.workflow-event.pending::before {
background: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}
.workflow-event.sub-event {
margin-left: var(--spacing-lg);
padding-left: var(--spacing-md);
border-left: 2px dashed rgba(14, 165, 233, 0.3);
}
.workflow-event.sub-event::before {
left: calc(-1 * var(--spacing-xl) - var(--spacing-lg) + 4px);
background: #0ea5e9;
}
.workflow-arrow {
color: #0ea5e9;
font-weight: bold;
margin-right: var(--spacing-xs);
}
.workflow-event-title {
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.workflow-event-meta {
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.workflow-event-comment {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-style: italic;
margin-top: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--background);
border-radius: var(--radius);
}
</style>
{% endblock %}
@ -810,6 +885,81 @@
</div>
</div>
</div>
<!-- Historia workflow -->
{% if application.workflow_history %}
<div class="section">
<h2>Historia workflow</h2>
<div class="workflow-timeline">
{% for event in application.workflow_history %}
{% if event.event == 'admin_proposed_changes' %}
<div class="workflow-event sub-event">
<div class="workflow-event-title">
<span class="workflow-arrow"></span>
Propozycja zmian
</div>
<div class="workflow-event-meta">
Od: <strong>{{ event.user_name }}</strong>
<br>{{ event.timestamp[:16].replace('T', ' ') }}
{% if event.details.source %}
<br>Źródło: {{ event.details.source }}
{% endif %}
</div>
{% if event.details.comment %}
<div class="workflow-event-comment">
„{{ event.details.comment }}"
</div>
{% endif %}
{% if event.details.changes %}
<div style="font-size: var(--font-size-xs); margin-top: var(--spacing-xs); color: var(--text-secondary);">
{% for change in event.details.changes %}
<div>{{ change }}</div>
{% endfor %}
</div>
{% endif %}
</div>
{% elif event.event == 'user_accepted_changes' %}
<div class="workflow-event sub-event">
<div class="workflow-event-title">
<span class="workflow-arrow"></span>
Zmiany zaakceptowane
</div>
<div class="workflow-event-meta">
Przez: <strong>{{ event.user_name }}</strong>
<br>{{ event.timestamp[:16].replace('T', ' ') }}
</div>
</div>
{% elif event.event == 'user_rejected_changes' %}
<div class="workflow-event sub-event" style="border-color: var(--warning);">
<div class="workflow-event-title" style="color: var(--warning);">
<span class="workflow-arrow" style="color: var(--warning);"></span>
Zmiany odrzucone
</div>
<div class="workflow-event-meta">
Przez: <strong>{{ event.user_name }}</strong>
<br>{{ event.timestamp[:16].replace('T', ' ') }}
</div>
{% if event.details.reason %}
<div class="workflow-event-comment">
„{{ event.details.reason }}"
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{# Current pending status #}
{% if application.status == 'pending_user_approval' %}
<div class="workflow-event sub-event pending">
<div class="workflow-event-title">
<span class="workflow-arrow"></span>
Oczekuje na akceptację użytkownika
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>