feat: implement route assignment management and sequencing module with interactive data visualization and editing capabilities

route-planner/src/app/private/home/route-overview-map/route-overview-map.component.html

@@ -11,7 +11,7 @@
   </div>
 
   <div class="sidebar-header">
-    <button type="button" class="back-btn" (click)="goBack()">
+      <button type="button" class="back-btn" (click)="goBack()" aria-label="Volver a la planificación">
       <i class="pi pi-arrow-left"></i> Volver
     </button>
     <h2 class="sidebar-title">Mapa de rutas</h2>
@@ -98,7 +98,7 @@
       </dl>
       <div class="pending-edit-grid">
         <label>Usuario<select [(ngModel)]="assignmentUser[selectedUnassigned.pdv_id]"><option value="">Seleccionar</option><option *ngFor="let user of unassignedUserOptions" [value]="user.id">{{ user.name }}</option></select></label>
-        <label>Día<select [(ngModel)]="assignmentDay[selectedUnassigned.pdv_id]"><option value="">Seleccionar</option><option *ngFor="let day of unassignedDayOptions" [value]="day">{{ day }}</option></select></label>
+        <label>Días<div class="day-checkboxes"><label *ngFor="let day of unassignedDayOptions"><input type="checkbox" [checked]="(assignmentDays[selectedUnassigned.pdv_id] || []).includes(day)" (change)="toggleUnassignedDay(selectedUnassigned.pdv_id, day, $any($event.target).checked)">{{ day.substring(0, 3) }}</label></div></label>
       </div>
       <div class="pending-actions"><button type="button" class="btn-secondary" (click)="startUnassignedEdit(selectedUnassigned)"><i class="pi pi-pencil"></i> Editar</button><button type="button" class="btn-primary" (click)="assignUnassigned(selectedUnassigned)" [disabled]="assigningUnassignedId === selectedUnassigned.pdv_id"><span *ngIf="assigningUnassignedId === selectedUnassigned.pdv_id" class="spinner-inline"></span><i *ngIf="assigningUnassignedId !== selectedUnassigned.pdv_id" class="pi pi-user-plus"></i> Reasignar</button></div>
     </ng-template>
@@ -108,7 +108,7 @@
   <section class="info-card" *ngIf="selectedRouteDetail">
     <div class="info-card-header">
       <h3>Detalle de la ruta</h3>
-      <button type="button" class="btn-icon" (click)="clearSelection()" title="Cerrar detalle">
+      <button type="button" class="btn-icon" (click)="clearSelection()" title="Cerrar detalle" aria-label="Cerrar detalle de ruta">
         <i class="pi pi-times"></i>
       </button>
     </div>
@@ -135,6 +135,9 @@
         <div><dt>Duración tramo</dt><dd>{{ selectedSegmentDurationMinutes | number:'1.0-0' }} min</dd></div>
       </dl>
       <div class="reassign-actions" *ngIf="!showReassignForm">
+        <button type="button" class="btn-secondary" (click)="moveSelectedVisit(-1)" [disabled]="!canMoveSelectedVisitUp" aria-label="Mover visita anterior"><i class="pi pi-arrow-up"></i> Subir</button>
+        <button type="button" class="btn-secondary" (click)="moveSelectedVisit(1)" [disabled]="!canMoveSelectedVisitDown" aria-label="Mover visita posterior"><i class="pi pi-arrow-down"></i> Bajar</button>
+        <button type="button" class="btn-secondary" (click)="resetSelectedDayOrder()"><i class="pi pi-refresh"></i> Orden automático</button>
         <button type="button" class="btn-secondary" (click)="startReassignRoute()"><i class="pi pi-user-edit"></i> Reasignar ruta</button>
       </div>
       <div class="reassign-form" *ngIf="showReassignForm">
@@ -147,12 +150,21 @@
     </div>
   </section>
 
+  <section class="daily-routes-card" *ngIf="dailySummaries.length">
+    <h3>Rutas diarias</h3>
+    <article class="daily-route" *ngFor="let day of dailySummaries" [class.over-capacity]="day.exceedsCapacity">
+      <strong>{{ day.userName }} · {{ day.day }}</strong>
+      <span>{{ day.routes.length }} paradas · {{ day.distanceKm | number:'1.1-1' }} km · {{ (day.travelHours * 60) | number:'1.0-0' }} min</span>
+      <small [attr.aria-label]="day.exceedsCapacity ? 'Capacidad excedida' : 'Dentro de capacidad'">{{ day.totalHours | number:'1.1-1' }} / {{ day.capacityHours | number:'1.1-1' }} h {{ day.exceedsCapacity ? '· Excede capacidad' : '· Capacidad disponible' }}</small>
+    </article>
+  </section>
+
   <div class="routes-list" *ngIf="filteredRoutes.length">
      <h3>{{ selectedUsuarioId === 'Todos' ? 'PDVs de todos los usuarios' : 'PDVs del usuario' }} ({{ filteredRoutes.length }})</h3>
     <ul>
-      <li *ngFor="let r of filteredRoutes; let i = index"
+      <li *ngFor="let r of filteredRoutes; let i = index" tabindex="0" role="button"
           [class.selected]="selectedRouteDetail && selectedRouteDetail.json.pdv_id === r.json.pdv_id && selectedRouteDetail.json.usuario_id === r.json.usuario_id && selectedRouteDetail.json.dia === r.json.dia"
-           (click)="selectRouteFromList(r)">
+           (click)="selectRouteFromList(r)" (keydown.enter)="selectRouteFromList(r)" (keydown.space)="selectRouteFromList(r); $event.preventDefault()">
         <span class="idx">{{ routeVisitOrder(r) }}</span>
          <div class="li-main">
            <strong>{{ r.json.nombre_pdv }}</strong>