feat: a roadmap of epics over time

Tickets get a start date next to their due date, both editable on the
ticket page. The Hoja de ruta tab lays the epics out over the months as
bars filled with their progress, with sprints and releases as landmarks
and a line for today.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

libs/web/tracker/presenters/src/lib/pages/issue.page.ts

@@ -15,6 +15,7 @@ import { RouterLink } from '@angular/router';
 import {
   PiActionButtonComponent,
   PiCheckboxComponent,
+  PiDateFieldComponent,
   PiFileUploadComponent,
   PiIconButtonComponent,
   PiIconComponent,
@@ -73,6 +74,7 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
     AttachmentItem,
     PiActionButtonComponent,
     PiCheckboxComponent,
+    PiDateFieldComponent,
     PiFileUploadComponent,
     PiIconComponent,
     PiIconButtonComponent,
@@ -638,6 +640,20 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
           >
             <pi-label>Estimación</pi-label>
           </pi-select-field>
+          <pi-date-field
+            [disabled]="!project.canContribute()"
+            [value]="dateOf(issue.startDate)"
+            (valueChange)="setDate('startDate', $event)"
+          >
+            <pi-label>Empieza</pi-label>
+          </pi-date-field>
+          <pi-date-field
+            [disabled]="!project.canContribute()"
+            [value]="dateOf(issue.dueDate)"
+            (valueChange)="setDate('dueDate', $event)"
+          >
+            <pi-label>Fecha límite</pi-label>
+          </pi-date-field>
           <pi-select-field
             [options]="areaOptions()"
             [disabled]="!project.canContribute()"
@@ -983,11 +999,26 @@ export class IssuePage {
     this.facade.setRelease(releaseId || null);
   }
 
+  /** `YYYY-MM-DD` → the local date the picker shows. */
+  protected dateOf(day: string | null): Date | null {
+    return day ? new Date(`${day.slice(0, 10)}T00:00:00`) : null;
+  }
+
+  protected setDate(field: 'startDate' | 'dueDate', date: Date | null): void {
+    const day = date
+      ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+      : null;
+    if (day !== (this.facade.issue()?.[field]?.slice(0, 10) ?? null))
+      this.update({ [field]: day });
+  }
+
   protected update(changes: {
     type?: string;
     priority?: IssuePriority;
     area?: string | null;
     storyPoints?: number | null;
+    startDate?: string | null;
+    dueDate?: string | null;
   }): void {
     this.facade.update(changes);
   }