rutero/route-planner/src/app/private/home/home.component.html

<div class="glm-topbar">
  <img src="GLM_completo.png" alt="GomezLee Marketing" class="glm-topbar-logo" />
  <span class="glm-topbar-sep">|</span>
  <span class="glm-topbar-context">Route Planner</span>
</div>

<div class="home-container">
  <header class="home-header">
    <h1>Route Planner</h1>
    <p>Gestión de rutas asignadas y puntos de venta pendientes</p>
  </header>

  <section class="card upload-card">
    <h2 class="section-title">Subir archivos para optimización</h2>

    <div class="upload-grid">
      <div class="file-input-wrapper">
        <label class="file-label" for="pdvFile" [class.has-error]="pdvPreview && !pdvPreview.valid" [class.has-success]="pdvPreview?.valid">
          <i class="pi pi-file-excel"></i>
          <span>Archivo PDVs (Excel)</span>
          <span class="file-hint">.xlsx / .xls • máx 10MB • máx 2000 filas</span>
        </label>
        <input
          id="pdvFile"
          type="file"
          accept=".xlsx,.xls"
          (change)="onPdvFileChange($event)"
          class="file-input"
          [class.has-file]="pdvFile"
        />
        <div class="file-name" *ngIf="pdvFile">
          <i class="pi" [class.pi-check-circle]="pdvPreview?.valid" [class.pi-exclamation-circle]="pdvPreview && !pdvPreview.valid" [class.pi-spin]="pdvPreviewLoading"></i>
          {{ pdvFile.name }}
          <span *ngIf="pdvPreviewLoading" class="preview-loading">Validando...</span>
        </div>

        <div class="preview-card" *ngIf="pdvPreviewLoading">
          <div class="preview-loading-row"><span class="spinner-inline"></span> Analizando archivo PDV...</div>
        </div>

        <div class="preview-card preview-success" *ngIf="pdvPreview?.valid">
          <div class="preview-header"><i class="pi pi-check-circle"></i> PDV válido — {{ pdvPreview!.totalRows }} filas</div>
          <div class="preview-stats">{{ pdvPreview!.validRows }} filas válidas • Columnas: {{ pdvPreview!.headers.join(', ') }}</div>
        </div>

        <div class="preview-card preview-error" *ngIf="pdvPreview && !pdvPreview.valid">
          <div class="preview-header"><i class="pi pi-exclamation-triangle"></i> Errores en PDV ({{ pdvPreview.errors.length }})</div>
          <div class="preview-stats" *ngIf="pdvPreview.missingHeaders.length">Faltan: {{ pdvPreview.missingHeaders.join(', ') }}</div>
          <div class="preview-stats">{{ pdvPreview.totalRows }} filas leídas • {{ pdvPreview.validRows }} válidas</div>
          <ul class="preview-errors">
            <li *ngFor="let e of pdvPreview.errors.slice(0, 8)">
              <strong>Fila {{ e.row }} — {{ e.field }}:</strong> {{ e.message }}
              <span *ngIf="e.value !== undefined && e.value !== null" class="error-value">({{ e.value }})</span>
            </li>
            <li *ngIf="pdvPreview.errors.length > 8" class="more-errors">+ {{ pdvPreview.errors.length - 8 }} errores más...</li>
          </ul>
        </div>
      </div>

      <div class="file-input-wrapper">
        <label class="file-label" for="usuariosFile" [class.has-error]="usuariosPreview && !usuariosPreview.valid" [class.has-success]="usuariosPreview?.valid">
          <i class="pi pi-file-excel"></i>
          <span>Archivo Usuarios (Excel)</span>
          <span class="file-hint">.xlsx / .xls • máx 10MB • máx 50 filas</span>
        </label>
        <input
          id="usuariosFile"
          type="file"
          accept=".xlsx,.xls"
          (change)="onUsuariosFileChange($event)"
          class="file-input"
          [class.has-file]="usuariosFile"
        />
        <div class="file-name" *ngIf="usuariosFile">
          <i class="pi" [class.pi-check-circle]="usuariosPreview?.valid" [class.pi-exclamation-circle]="usuariosPreview && !usuariosPreview.valid"></i>
          {{ usuariosFile.name }}
          <span *ngIf="usuariosPreviewLoading" class="preview-loading">Validando...</span>
        </div>

        <div class="preview-card" *ngIf="usuariosPreviewLoading">
          <div class="preview-loading-row"><span class="spinner-inline"></span> Analizando archivo Usuarios...</div>
        </div>

        <div class="preview-card preview-success" *ngIf="usuariosPreview?.valid">
          <div class="preview-header"><i class="pi pi-check-circle"></i> Usuarios válido — {{ usuariosPreview!.totalRows }} filas</div>
          <div class="preview-stats">{{ usuariosPreview!.validRows }} filas válidas • Columnas: {{ usuariosPreview!.headers.join(', ') }}</div>
        </div>

        <div class="preview-card preview-error" *ngIf="usuariosPreview && !usuariosPreview.valid">
          <div class="preview-header"><i class="pi pi-exclamation-triangle"></i> Errores en Usuarios ({{ usuariosPreview.errors.length }})</div>
          <div class="preview-stats" *ngIf="usuariosPreview.missingHeaders.length">Faltan: {{ usuariosPreview.missingHeaders.join(', ') }}</div>
          <div class="preview-stats">{{ usuariosPreview.totalRows }} filas leídas • {{ usuariosPreview.validRows }} válidas</div>
          <ul class="preview-errors">
            <li *ngFor="let e of usuariosPreview.errors.slice(0, 8)">
              <strong>Fila {{ e.row }} — {{ e.field }}:</strong> {{ e.message }}
              <span *ngIf="e.value !== undefined && e.value !== null" class="error-value">({{ e.value }})</span>
            </li>
            <li *ngIf="usuariosPreview.errors.length > 8" class="more-errors">+ {{ usuariosPreview.errors.length - 8 }} errores más...</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="upload-actions">
      <div class="upload-error" *ngIf="uploadError">
        <i class="pi pi-exclamation-triangle"></i>
        {{ uploadError }}
      </div>
      <div class="actions-row">
        <button
          type="button"
          class="btn-primary"
          (click)="cargarRutas()"
          [disabled]="!canSubmit"
          [title]="submitDisabledReason || ''"
        >
          <span *ngIf="isLoading" class="spinner-inline"></span>
          <i *ngIf="!isLoading" class="pi pi-upload"></i>
          {{ isLoading ? 'Procesando...' : 'Cargar rutas' }}
        </button>
        <button
          type="button"
          class="btn-secondary"
          *ngIf="isLoading"
          (click)="cancelarCarga()"
        >
          <i class="pi pi-times"></i> Cancelar
        </button>
        <button
          type="button"
          class="btn-secondary"
          (click)="clearFiles()"
          [disabled]="!pdvFile && !usuariosFile"
        >
          <i class="pi pi-times"></i> Limpiar
        </button>
      </div>
      <small class="hint-text" *ngIf="submitDisabledReason && !isLoading">{{ submitDisabledReason }}</small>
    </div>
  </section>

  <section class="card kpis-card">
    <app-planning-kpis></app-planning-kpis>
  </section>

  <section class="card">
    <app-assigned-route></app-assigned-route>
  </section>

  <section class="card">
    <h2 class="section-title">PDVs sin ruta asignada</h2>
    <app-no-assigned-route></app-no-assigned-route>
  </section>
</div>