sprint_planer_web/views/home.twig

{% extends "layout.twig" %}

{% block content %}
<section class="space-y-6">
    {% if authError|default(false) %}
        <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200">
            Sign-in failed. Check the server logs or the audit log for details.
        </div>
    {% endif %}

    {% if deletedSprintName|default('') != '' %}
        <div class="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200">
            Sprint <b>{{ deletedSprintName }}</b> was deleted.
        </div>
    {% endif %}

    {% if currentUser is null %}
        <div class="max-w-md mx-auto mt-6">
            <div class="rounded-lg border bg-white p-6 dark:bg-slate-800 dark:border-slate-700">
                <div class="flex justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="144" height="144" aria-hidden="true" class="block" fill="none">
                        <defs>
                            <radialGradient id="brand-cycle-glow-card" cx="32" cy="32" r="20" gradientUnits="userSpaceOnUse">
                                <stop offset="0"   stop-color="#6366f1" stop-opacity="0.55"/>
                                <stop offset="0.6" stop-color="#6366f1" stop-opacity="0.12"/>
                                <stop offset="1"   stop-color="#6366f1" stop-opacity="0"/>
                            </radialGradient>
                        </defs>
                        <circle cx="32" cy="32" r="20" fill="url(#brand-cycle-glow-card)"/>
                        <path d="M52 32 A20 20 0 1 1 32 12" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
                        <path d="M44 8 L52 12 L48 20" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="32" cy="32" r="5"  fill="#6366f1"/>
                        <circle cx="48" cy="20" r="2.5" fill="currentColor" opacity="0.55"/>
                        <circle cx="52" cy="40" r="2.5" fill="currentColor" opacity="0.55"/>
                        <circle cx="40" cy="50" r="2.5" fill="currentColor" opacity="0.55"/>
                        <circle cx="20" cy="48" r="2.5" fill="currentColor" opacity="0.55"/>
                        <circle cx="14" cy="32" r="2.5" fill="#10b981"/>
                    </svg>
                </div>
                <h1 class="text-xl font-semibold tracking-tight">Sprint Planner</h1>
                <p class="text-slate-600 text-sm mt-1 dark:text-slate-400">
                    Sign in with your Microsoft account to get started. The first
                    person to sign in becomes the admin automatically.
                </p>
                <div class="mt-4 space-y-2">
                    {% if oidcConfigured %}
                        <a href="/auth/login"
                           class="flex items-center justify-center w-full rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                            Sign in with Microsoft
                        </a>
                    {% endif %}
                    {% if localAdminEnabled %}
                        <a href="/auth/local"
                           class="flex items-center justify-center w-full rounded-md border border-slate-300 bg-white text-slate-700 px-4 py-2 text-sm font-medium hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                            Sign in as local admin
                        </a>
                    {% endif %}
                    {% if not oidcConfigured and not localAdminEnabled %}
                        <span class="block rounded-md bg-slate-100 text-slate-600 px-3 py-2 text-sm dark:bg-slate-700 dark:text-slate-300">
                            No sign-in method configured. Set <code>ENTRA_*</code> (with
                            <code>OIDC_ENABLED</code> not set to <code>false</code>) or
                            <code>LOCAL_ADMIN_*</code> in <code>.env</code>.
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="flex items-end justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight">Sprints</h1>
                <p class="text-slate-600 mt-1 text-sm dark:text-slate-400">
                    {{ sprintRows|length }} sprint{{ sprintRows|length == 1 ? '' : 's' }}.
                </p>
            </div>
            {% if currentUser.isAdmin %}
                <a href="/sprints/new"
                   class="inline-flex items-center gap-2 rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                    New sprint
                </a>
            {% endif %}
        </div>

        <div class="rounded-lg border bg-white overflow-hidden dark:bg-slate-800 dark:border-slate-700">
            {% if sprintRows is empty %}
                <div class="p-8 text-center text-slate-500 text-sm dark:text-slate-400">
                    No sprints yet.
                    {% if currentUser.isAdmin %}
                        <a href="/sprints/new" class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Create the first one</a>.
                    {% endif %}
                </div>
            {% else %}
                <table class="min-w-full text-sm">
                    <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-4 py-2 font-semibold">Name</th>
                            <th class="text-left px-4 py-2 font-semibold">Dates</th>
                            <th class="text-right px-4 py-2 font-semibold">Workers</th>
                            <th class="text-right px-4 py-2 font-semibold">Tasks</th>
                            <th class="text-right px-4 py-2 font-semibold">Reserve</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        {% for row in sprintRows %}
                            {% set s = row.sprint %}
                            <tr class="hover:bg-slate-50 cursor-pointer dark:hover:bg-slate-700"
                                data-href="/sprints/{{ s.id }}">
                                <td class="px-4 py-2 font-medium">
                                    <a href="/sprints/{{ s.id }}" class="hover:underline">{{ s.name }}</a>
                                </td>
                                <td class="px-4 py-2 text-slate-600 dark:text-slate-400">
                                    {{ s.startDate }} – {{ s.endDate }}
                                </td>
                                <td class="px-4 py-2 text-right font-mono">{{ row.nWorkers }}</td>
                                <td class="px-4 py-2 text-right font-mono">{{ row.nTasks }}</td>
                                <td class="px-4 py-2 text-right font-mono">
                                    {{ (s.reserveFraction * 100)|number_format(0) }}%
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
    {% endif %}

    {% if currentUser is not null and currentUser.isAdmin %}
    <details class="rounded-lg border bg-white p-4 dark:bg-slate-800 dark:border-slate-700">
        <summary class="text-sm font-semibold text-slate-700 uppercase tracking-wider cursor-pointer dark:text-slate-200">Runtime</summary>
        <dl class="mt-3 grid grid-cols-[max-content_1fr] gap-x-6 gap-y-1 text-sm">
            <dt class="text-slate-500 dark:text-slate-400">App version</dt>
            <dd class="font-mono">{{ appVersion }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">Creator</dt>
            <dd class="font-mono">{{ appCreator }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">APP_ENV</dt>
            <dd class="font-mono">{{ appEnv }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">SQLite file</dt>
            <dd class="font-mono break-all">{{ dbPath }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">Schema version</dt>
            <dd class="font-mono">{{ schemaVersion }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">OIDC</dt>
            <dd class="font-mono">{{ oidcConfigured ? 'enabled' : 'disabled' }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">Local admin</dt>
            <dd class="font-mono">{{ localAdminEnabled ? 'enabled' : 'disabled' }}</dd>
        </dl>
        <p class="mt-4 text-xs text-slate-500 dark:text-slate-400">
            Liveness probe: <a class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300" href="/healthz"><code>/healthz</code></a>
        </p>
    </details>
    {% endif %}
</section>
{% endblock %}