📊 Comparativo por Renglón (`comparativo`)

🧠 Concepto general

El bloque comparativo representa el análisis de cada renglón de la licitación desde el punto de vista del cliente logueado.

👉 Cada elemento del array corresponde a un renglón
👉 Dentro de cada renglón ya vienen calculadas todas las métricas necesarias para comparar contra la competencia

🧱 Estructura de cada renglón

{
  "idRenglon": 15,
  "numeroRenglon": 1,
  "descripcion": "Producto X",

  "miOferta": {
    "ofertaTotal": 10000,
    "mejorOferta": false,
    "posicion": 2,
    "diferenciaConMejor": 500,
    "diferenciaPctConMejor": 5
  },

  "mejorOfertaGeneral": 9500,
  "cantidadOferentes": 4,

  "ofertas": [
    {
      "oferente": "Proveedor A",
      "ofertaTotal": 9500,
      "posicion": 1,
      "mejorOferta": true,
      "esCliente": false
    },
    {
      "oferente": "Mi Empresa",
      "ofertaTotal": 10000,
      "posicion": 2,
      "mejorOferta": false,
      "esCliente": true
    }
  ]
}

🔑 Campos principales

`miOferta`

Es el campo más importante.

Puede ser null si el cliente no ofertó ese renglón.

Contiene:

ofertaTotal: importe ofertado por el cliente
posicion: ranking en ese renglón (1 = mejor precio)
mejorOferta: indica si el cliente tiene la mejor oferta
diferenciaConMejor: diferencia en dinero contra la mejor oferta
diferenciaPctConMejor: diferencia porcentual

👉 Todos estos valores ya vienen calculados desde el backend.

`mejorOfertaGeneral`

Es el menor precio ofertado en ese renglón.

👉 Se usa como referencia para comparar rápidamente contra la oferta del cliente.

`cantidadOferentes`

Cantidad total de oferentes que participaron en ese renglón.

`ofertas`

Listado completo de ofertas del renglón.

Ya viene ordenado por ofertaTotal ASC
Cada elemento incluye:
- posicion
- mejorOferta
- esCliente

👉 Este array sirve para mostrar el ranking completo en el detalle.

🖥️ Uso en la interfaz

Tabla principal (vista compacta)

Mostrar una fila por renglón con:

Número de renglón
Descripción
Mi oferta
Mejor oferta
Diferencia en $
Diferencia en %
Posición
Cantidad de oferentes

🎯 Lógica visual recomendada

Si el cliente ofertó (`miOferta != null`)

posicion == 1 → estado GANANDO (verde)
posicion > 1 → estado PERDIENDO

Opcional (según diferencia):

diferenciaPctConMejor < 2% → cerca (amarillo)
diferenciaPctConMejor > 5% → lejos (rojo)

Si el cliente NO ofertó (`miOferta == null`)

Mostrar:

"No ofertado"
Estilo visual atenuado (gris)

🔍 Detalle expandible

Al expandir un renglón:

Usar ofertas para mostrar:

Posición
Oferente
Importe

Y marcar:

Cliente (esCliente = true)
Mejor oferta (mejorOferta = true)

🚫 Importante

El frontend NO debe recalcular:

posiciones
orden de ofertas
diferencias
mejor oferta

👉 Todo eso ya viene resuelto desde el backend.

🧩 Resumen rápido

comparativo = lista de renglones
miOferta = desempeño del cliente en ese renglón
ofertas = ranking completo ya ordenado
mejorOfertaGeneral = mejor precio del renglón

👉 El frontend solo debe renderizar la información.

📘 Tipos TypeScript

🧱 Interface principal

export interface ComparativoClienteResponse {
  cliente: ClienteResumen | null;
  comparativoCliente: RenglonComparativo[];
}

👤 Resumen del cliente

export interface ClienteResumen {
  cuit: string;
  nombre: string | null;
  renglonesOfertados: number;
  renglonesMejorOferta: number;
  importeTotalOfertado: number;
  importeMejorOferta: number;
  tasaEfectividad: number;
  posicionPromedio: number;
}

📦 Renglón comparativo

export interface RenglonComparativo {
  idRenglon: number;
  numeroRenglon: number;
  descripcion: string;
  cantidad: number;
  unidad: string;

  miOferta: OfertaCliente | null;

  mejorOfertaGeneral: number;
  cantidadOferentes: number;

  ofertas: OfertaRenglon[];
}

🧠 Oferta del cliente

export interface OfertaCliente {
  oferente: string;
  cuit: string;

  ofertaTotal: number;

  mejorOferta: boolean;
  posicion: number;

  diferenciaConMejor: number;
  diferenciaPctConMejor: number;
}

🏁 Oferta general del renglón

export interface OfertaRenglon {
  oferente: string;
  cuit: string;

  ofertaTotal: number;

  mejorOferta: boolean;
  posicion: number;

  esCliente: boolean;
}

⚠️ Notas importantes

`miOferta`

Puede ser null → significa que el cliente no ofertó ese renglón
Siempre validar antes de acceder

if (r.miOferta) {
  console.log(r.miOferta.posicion);
}

`ofertas`

Siempre viene ordenado por ofertaTotal ASC
No es necesario ordenar en el frontend

`mejorOfertaGeneral`

Es el menor precio del renglón
Puede usarse como referencia directa en UI

🧩 Ejemplo de uso

comparativoCliente.forEach((r) => {
  if (r.miOferta) {
    console.log(
      `Renglón ${r.numeroRenglon}: posición ${r.miOferta.posicion}`
    );
  } else {
    console.log(`Renglón ${r.numeroRenglon}: no ofertado`);
  }
});

Documentación del Sistema