Generating Inspection Reports

After completing all vehicle inspections, the system generates a comprehensive report displaying client information, ITV results, observations, and total costs.

Overview

The report generation process validates all data, performs cost calculations, and presents results in an organized, professional format. The report includes multiple sections that provide complete inspection documentation.

Report Generation Process

Complete All Forms

Ensure all required fields are filled:

Client registration information (nombre, apellidos, razonSocial, nAutos)
Motorization selection for each vehicle
ITV status (Aprobado/No Aprobado) for each vehicle
Observations (optional but recommended)

Click Calculate Results

Click the “Calcular Resultados” button at the bottom of the vehicle forms.The system will:

Validate all forms
Process vehicle data
Calculate costs
Hide input forms
Display results section

Function: calcularYMostrar() (script.js:693-704)

View Generated Report

The results section appears with a smooth animation, displaying:

Client information card
Total cost breakdown
ITV status for each vehicle
Vehicle observations
Action buttons (Print, Export, New Form)

Report Sections

The generated report contains several key sections:

1. Client Information Card

Section ID: informacion Displays the basic client data entered during registration:

👤 Información del Cliente
Nombre: [Client Name]
Apellidos: [Client Surname]
Razón Social: [Business Name]
Nº de Vehículos: [Vehicle Count]

This section is generated by mostrarInformacionCliente(datos) (script.js:210-218).

2. Total Cost Breakdown

Section ID: total Displays detailed cost calculation by motorization type:

Cost Calculation Logic

The system uses a rate table to calculate costs:

const tarifas = {
    "Diesel": 50,
    "Gasolina": 45,
    "Hibrido": 35,
    "Electrico": 30
};

For each motorization type:

Count vehicles of that type
Multiply count by rate
Sum all costs for total

Breakdown Display Format

🛢️ [count] Diesel: [cost]€
⛽ [count] Gasolina: [cost]€
🔋 [count] Híbrido: [cost]€
⚡ [count] Eléctrico: [cost]€
─────────────────────
💰 Total: [total]€

Only motorization types present in the inspection are displayed.

Example Output:

💰 Total a Pagar

🛢️ 2 Diesel: 100€
⛽ 1 Gasolina: 45€
🔋 1 Híbrido: 35€

💰 Total: 180€

3. ITV Status Section

Section ID: raprobado Shows approval status for each vehicle with color-coded indicators:

Approved Status

✅ Vehículo Nº [N]: Aprobado

Displayed with green styling (.aprobado class)

Failed Status

❌ Vehículo Nº [N]: No Aprobado

Displayed with red styling (.no-aprobado class)

Generated by mostrarEstadosITV() (script.js:223-239).

4. Observations Section

Section ID: robservaciones Displays all vehicle observations in formatted blocks:

📝 Observaciones

🚗 Vehículo Nº 1:
[Observation text for vehicle 1]

🚗 Vehículo Nº 2:
[Observation text for vehicle 2]

If no observations were entered:

Sin observaciones registradas

Generated by mostrarObservaciones() (script.js:244-263).

Report Animation and Display

The report appears with smooth transitions:

Hide Forms Animation

// Forms fade out and slide up
formularios.style.opacity = "0";
formularios.style.transform = "translateY(-20px)";
formSection.style.opacity = "0";
formSection.style.transform = "translateY(-20px)";

Show Results Animation

// Results fade in and slide into place
resultados.style.opacity = "1";
resultados.style.transform = "translateY(0)";

The page automatically scrolls to the results section with smooth behavior.

Action Buttons

After the report is generated, three action buttons appear:

Print
Export
New Form

🖨️ ImprimirFunction: imprimirResultados()Creates a print-friendly version of the report:

Removes action buttons
Formats content for paper
Adds timestamp
Opens browser print dialog
Restores original content after printing

📥 Exportar JSONFunction: exportarResultados()Downloads inspection data as JSON:

{
  "cliente": {
    "nombre": "...",
    "apellidos": "...",
    "razonSocial": "...",
    "nAutos": 3
  },
  "vehiculos": [
    {
      "numero": 1,
      "motorizacion": "Diesel",
      "estadoITV": "Aprobo",
      "observaciones": "..."
    }
  ],
  "fecha": "DD/MM/YYYY",
  "hora": "HH:MM:SS"
}

Filename format: ITV_[Apellidos]_[Timestamp].json

🔄 Nuevo FormularioFunction: reiniciarFormulario()Reloads the page to start a new inspection:

Shows confirmation dialog
Clears all data
Returns to initial registration form
Prevents accidental data loss

Report Styling

The results section uses a card-based layout:

.info-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.full-width {
    grid-column: 1 / -1;
}

Status indicators have conditional styling:

Approved: Green background, green border
Failed: Red background, red border

Data Validation Before Report

The system performs comprehensive validation:

const datosCliente = obtenerDatosCliente();
// Returns: { nombre, apellidos, razonSocial, nAutos }

Technical Reference

Key functions for report generation:

Function	Purpose	Location
`calcularYMostrar()`	Main report generation	script.js:693-704
`calcular()`	Data processing	script.js:119-148
`mostrarInformacionCliente()`	Client info display	script.js:210-218
`mostrarEstadosITV()`	Status display	script.js:223-239
`mostrarObservaciones()`	Observations display	script.js:244-263
`calcularYMostrarTotal()`	Cost calculation	script.js:268-319
`agregarBotonesAccion()`	Action buttons	script.js:578-605

Best Practices

Always review the generated report for accuracy before printing or exporting. Ensure all vehicle statuses and observations are correct.

Use the Export JSON feature to maintain digital records of all inspections. The JSON files can be imported into other systems or databases for long-term storage.

Next Steps

After generating the report, you can:

Print the report for physical records
Export the data for digital archiving
Start a new form for the next client

Get Started

Core Features

User Guide

Customization

Generating Reports

Generating Inspection Reports

Overview

Report Generation Process

Report Sections

1. Client Information Card

2. Total Cost Breakdown

3. ITV Status Section

Approved Status

Failed Status

4. Observations Section

Report Animation and Display

Hide Forms Animation

Show Results Animation

Action Buttons

Report Styling

Data Validation Before Report

Technical Reference

Best Practices

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Features

User Guide

Customization

​Generating Inspection Reports

​Overview

​Report Generation Process

​Report Sections

​1. Client Information Card

​2. Total Cost Breakdown

​3. ITV Status Section

Approved Status

Failed Status

​4. Observations Section

​Report Animation and Display

​Hide Forms Animation

​Show Results Animation

​Action Buttons

​Report Styling

​Data Validation Before Report

​Technical Reference

​Best Practices

​Next Steps

Build docs developers (and LLMs) love

Generating Inspection Reports

Overview

Report Generation Process

Report Sections

1. Client Information Card

2. Total Cost Breakdown

3. ITV Status Section

4. Observations Section

Report Animation and Display

Hide Forms Animation

Show Results Animation

Action Buttons

Report Styling

Data Validation Before Report

Technical Reference

Best Practices

Next Steps