sprint_planer_web/views/sprints/show.twig

{% extends "layout.twig" %}

{% set dayLabels = constant('App\\Domain\\SprintWeek::DAY_LABELS') %}

{% block content %}
<section class="space-y-6"
         data-sprint-root
         data-sprint-id="{{ sprint.id }}"
         data-csrf="{{ csrfToken }}">

    <header class="flex items-end justify-between gap-4">
        <div>
            <nav class="text-xs text-slate-500 dark:text-slate-400">
                <a href="/" class="hover:underline">Sprints</a> /
            </nav>
            <h1 class="text-2xl font-semibold tracking-tight">{{ sprint.name }}</h1>
            <p class="text-slate-600 mt-1 text-sm dark:text-slate-400">
                {{ sprint.startDate }} – {{ sprint.endDate }}
                · Reserve {{ (sprint.reserveFraction * 100)|number_format(0) }}%
                {% if sprint.isArchived %}
                    · <span class="inline-block px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded dark:bg-slate-700 dark:text-slate-300">archived</span>
                {% endif %}
            </p>
        </div>
        <div class="flex items-center gap-3">
            <div data-status
                 class="text-sm border rounded px-3 py-1 opacity-0 transition-opacity duration-200 border-slate-200 bg-slate-50 text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300">
            </div>
            <a href="/sprints/{{ sprint.id }}/present"
               target="_blank" rel="noopener"
               class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-2 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                Present
            </a>
            {% if currentUser.isAdmin %}
                <a href="/sprints/{{ sprint.id }}/settings"
                   class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-2 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                    Settings
                </a>
            {% endif %}
        </div>
    </header>

    {% if sprintWorkers is empty or weeks is empty %}
        <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200">
            {% if weeks is empty %}
                No weeks yet. <a href="/sprints/{{ sprint.id }}/settings" class="underline">Open settings</a> to add some.
            {% elseif sprintWorkers is empty %}
                No workers on this sprint yet. <a href="/sprints/{{ sprint.id }}/settings" class="underline">Open settings</a> to add some.
            {% endif %}
        </div>
    {% else %}

        {% macro capacity_table(sprintWorkers, capacity) %}
            <section class="rounded-lg border bg-white overflow-x-auto dark:bg-slate-800 dark:border-slate-700">
                <div class="px-4 py-2 border-b bg-slate-50 text-xs uppercase tracking-wider text-slate-600 font-semibold dark:bg-slate-700 dark:border-slate-700 dark:text-slate-300">
                    Capacity
                </div>
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="bg-slate-50 text-slate-600 text-xs dark:bg-slate-700 dark:text-slate-300">
                            <th class="text-left px-3 py-2 font-semibold sticky left-0 bg-slate-50 z-10 dark:bg-slate-700">&nbsp;</th>
                            {% for sw in sprintWorkers %}
                                <th class="text-center px-2 py-2 font-semibold whitespace-nowrap">
                                    {{ sw.workerName }}
                                </th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        <tr>
                            <th class="text-left px-3 py-2 text-slate-700 font-medium sticky left-0 bg-white dark:bg-slate-800 dark:text-slate-200">Ressourcen</th>
                            {% for sw in sprintWorkers %}
                                {% set c = capacity[sw.id]|default(null) %}
                                <td class="px-2 py-2 text-center font-mono"
                                    data-cap-ressourcen data-sw-id="{{ sw.id }}">
                                    {{ fmt_days(c.ressourcen|default(0.0)) }}
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th class="text-left px-3 py-2 text-slate-700 font-medium sticky left-0 bg-white dark:bg-slate-800 dark:text-slate-200">− Reserven</th>
                            {% for sw in sprintWorkers %}
                                {% set c = capacity[sw.id]|default(null) %}
                                <td class="px-2 py-2 text-center font-mono text-slate-600 dark:text-slate-400"
                                    data-cap-after-reserves data-sw-id="{{ sw.id }}">
                                    {{ fmt_days(c.after_reserves|default(0.0)) }}
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th class="text-left px-3 py-2 text-slate-700 font-semibold sticky left-0 bg-white dark:bg-slate-800 dark:text-slate-200">Available</th>
                            {% for sw in sprintWorkers %}
                                {% set c = capacity[sw.id]|default(null) %}
                                {% set av = c.available|default(0.0) %}
                                <td class="px-2 py-2 text-center font-mono font-semibold {{ av < 0 ? 'text-red-700 dark:text-red-400' : 'text-slate-900 dark:text-slate-100' }}"
                                    data-cap-available data-sw-id="{{ sw.id }}">
                                    {{ fmt_days(av) }}
                                </td>
                            {% endfor %}
                        </tr>
                    </tbody>
                </table>
            </section>
        {% endmacro %}

        <nav class="flex border-b border-slate-200 dark:border-slate-700" role="tablist" data-tab-nav>
            <button type="button" role="tab" data-tab-btn="arbeitstage"
                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-slate-400 data-[active=true]:border-slate-900 data-[active=true]:text-slate-900 data-[active=false]:border-transparent data-[active=false]:text-slate-500 data-[active=false]:hover:text-slate-700 dark:data-[active=true]:border-slate-100 dark:data-[active=true]:text-slate-100 dark:data-[active=false]:text-slate-400 dark:data-[active=false]:hover:text-slate-200"
                    data-active="true">
                Arbeitstage and capacity
            </button>
            <button type="button" role="tab" data-tab-btn="tasks"
                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-slate-400 data-[active=true]:border-slate-900 data-[active=true]:text-slate-900 data-[active=false]:border-transparent data-[active=false]:text-slate-500 data-[active=false]:hover:text-slate-700 dark:data-[active=true]:border-slate-100 dark:data-[active=true]:text-slate-100 dark:data-[active=false]:text-slate-400 dark:data-[active=false]:hover:text-slate-200"
                    data-active="false">
                Capacity and tasks
            </button>
        </nav>

        <div data-tab-panel="arbeitstage" class="space-y-6">

        <section class="rounded-lg border bg-white overflow-x-auto dark:bg-slate-800 dark:border-slate-700">
            <table class="min-w-full text-sm" data-arbeitstage>
                <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                    <tr>
                        <th class="text-left px-3 py-2 font-semibold sticky left-0 bg-slate-50 z-10 dark:bg-slate-700">&nbsp;</th>
                        {% for w in weeks %}
                            <th class="text-center px-2 py-2 font-semibold whitespace-nowrap">
                                <div class="font-mono">KW{{ w.isoWeek }}</div>
                                <div class="text-[10px] text-slate-500 font-normal dark:text-slate-400">{{ w.startDate }}</div>
                            </th>
                        {% endfor %}
                        <th class="text-center px-2 py-2 font-semibold">Σ</th>
                        <th class="text-center px-2 py-2 font-semibold">RTB</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700" data-tbody>
                    <tr class="bg-slate-50 dark:bg-slate-700">
                        <th class="text-left px-3 py-2 font-semibold text-slate-700 sticky left-0 bg-slate-50 dark:bg-slate-700 dark:text-slate-200">
                            Arbeitstage
                            {% if currentUser.isAdmin %}
                                <a href="/sprints/{{ sprint.id }}/settings"
                                   class="ml-1 text-[10px] font-normal text-slate-500 hover:underline dark:text-slate-400"
                                   title="Pick weekdays in Settings">(edit)</a>
                            {% endif %}
                        </th>
                        {% set sumMax = 0 %}
                        {% for w in weeks %}
                            {% set sumMax = sumMax + w.maxWorkingDays %}
                            <td class="px-1 py-1">
                                <div class="flex items-center justify-center gap-1"
                                     data-week-arbeitstage data-week-id="{{ w.id }}"
                                     title="{{ w.activeDays|join(' ') ?: '—' }}">
                                    {% for bit, label in dayLabels %}
                                        <span class="inline-block h-2.5 w-2.5 rounded-full {{ w.hasDay(label) ? 'bg-green-500 dark:bg-green-400' : 'bg-slate-300 dark:bg-slate-600' }}"></span>
                                    {% endfor %}
                                </div>
                            </td>
                        {% endfor %}
                        <td class="px-2 py-1 text-center font-mono font-semibold" data-sum-max>
                            {{ fmt_days(sumMax) }}
                        </td>
                        <td>&nbsp;</td>
                    </tr>

                    {% for sw in sprintWorkers %}
                        {% set rowDays = grid[sw.id]|default({}) %}
                        {% set rowSum = 0 %}
                        {% for v in rowDays %}{% set rowSum = rowSum + v %}{% endfor %}
                        <tr data-sw-row data-sw-id="{{ sw.id }}">
                            <th class="text-left px-3 py-2 font-medium sticky left-0 bg-white z-10 dark:bg-slate-800">
                                <span class="flex items-center gap-2">
                                    {% if currentUser.isAdmin %}
                                        <span class="handle cursor-grab text-slate-400 select-none dark:text-slate-500">&#8801;</span>
                                    {% endif %}
                                    {{ sw.workerName }}
                                </span>
                            </th>
                            {% for w in weeks %}
                                {% set v = rowDays[w.id]|default(0.0) %}
                                <td class="px-1 py-1 text-center">
                                    {% if currentUser.isAdmin %}
                                        <input type="number" min="0" max="5" step="0.5"
                                               value="{{ fmt_days(v) }}"
                                               data-day data-sw-id="{{ sw.id }}"
                                               data-week-id="{{ w.id }}"
                                               class="w-14 rounded border border-slate-200 px-1 py-1 text-center font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                                    {% else %}
                                        <span class="font-mono">{{ fmt_days(v) }}</span>
                                    {% endif %}
                                </td>
                            {% endfor %}
                            <td class="px-2 py-1 text-center font-mono font-semibold"
                                data-sum-days data-sw-id="{{ sw.id }}">
                                {{ fmt_days(rowSum) }}
                            </td>
                            <td class="px-1 py-1 text-center">
                                {% if currentUser.isAdmin %}
                                    <input type="number" min="0" max="1" step="0.05"
                                           value="{{ fmt_rtb(sw.rtb) }}"
                                           data-rtb data-sw-id="{{ sw.id }}"
                                           class="w-16 rounded border border-slate-200 px-1 py-1 text-center font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                                {% else %}
                                    <span class="font-mono">{{ fmt_rtb(sw.rtb) }}</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        {{ _self.capacity_table(sprintWorkers, capacity) }}

        <p class="text-xs text-slate-500 dark:text-slate-400">
            Numeric inputs snap to 0.5 (days) or 0.05 (RTB) on blur. Edits save automatically
            with a 400&nbsp;ms debounce; Available turns red if a worker is overcommitted.
        </p>

        </div>{# /tab-panel arbeitstage #}

        <div data-tab-panel="tasks" class="space-y-6 hidden">

            {{ _self.capacity_table(sprintWorkers, capacity) }}

            {% include "sprints/_task_list.twig" %}

            {# Spacer so the task list never sits flush against the viewport
               bottom — gives room for popovers anchored on the last row. #}
            <div aria-hidden="true" class="min-h-[100px]"></div>

        </div>{# /tab-panel tasks #}

    {% endif %}
</section>

<script src="/assets/js/sprint-planner.js" defer></script>
{% endblock %}