feat(board): show upcoming deadline tasks

TaskTracker.Api/Pages/Partials/_KanbanBoard.cshtml

@@ -3,6 +3,7 @@
 
 <div id="board-content" class="board-page">
     <partial name="Partials/_FilterBar" model="Model" />
+    <partial name="Partials/_UpcomingTasks" model="Model" />
     <div id="kanban-board" class="kanban-grid">
         @foreach (var col in Model.Columns)
         {

TaskTracker.Api/Pages/Partials/_UpcomingTasks.cshtml

@@ -0,0 +1,37 @@
+@using TaskTracker.Api.Pages
+@using TaskTracker.Core.Enums
+@model BoardModel
+
+@if (Model.UpcomingTasks.Count > 0)
+{
+    <section class="upcoming-tasks" aria-labelledby="upcoming-tasks-heading">
+        <div class="upcoming-tasks-header">
+            <h2 id="upcoming-tasks-heading">Upcoming tasks</h2>
+            <span>@Model.UpcomingTasks.Count due soon</span>
+        </div>
+        <div class="upcoming-task-list">
+            @foreach (var task in Model.UpcomingTasks)
+            {
+                var categoryColor = BoardModel.GetCategoryColor(task.Category);
+                var dueAt = task.DueAt!.Value;
+                var dueAtUtc = dueAt.ToUniversalTime().ToString("O");
+                var localDueAt = dueAt.ToLocalTime().ToString("ddd, MMM d, h:mm tt");
+                <article class="upcoming-task"
+                         hx-get="/board?handler=TaskDetail&id=@task.Id"
+                         hx-target="#detail-panel"
+                         hx-swap="innerHTML">
+                    <div class="upcoming-task-title">@task.Title</div>
+                    <div class="upcoming-task-meta">
+                        <span class="upcoming-task-status upcoming-task-status--@task.Status.ToString().ToLowerInvariant()">@task.Status</span>
+                        @if (!string.IsNullOrEmpty(task.Category))
+                        {
+                            <span class="task-card-category-dot" style="background: @categoryColor"></span>
+                            <span>@task.Category</span>
+                        }
+                    </div>
+                    <time class="task-countdown" aria-live="off" data-due-at="@dueAtUtc" datetime="@dueAtUtc" title="@localDueAt">@localDueAt</time>
+                </article>
+            }
+        </div>
+    </section>
+}