Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/juanmatz/inspection-form-euroautos/llms.txt

Use this file to discover all available pages before exploring further.

InspectionReport renders a print-ready inspection report from a completed Inspection object. It can be used as a React component for in-app preview inside a modal or dedicated report page, or called programmatically via the generatePDF helper to produce a downloadable PDF Blob. The report layout includes the Euroautos workshop header, vehicle details, a per-section checklist summary with status indicators, inspector notes, photo evidence for critical and attention items, and the inspector’s signature.

​
Import

import { InspectionReport, generatePDF } from '@/components/InspectionReport';

​
Preview Usage

Render the report as a scrollable preview inside a modal or drawer. This is the recommended approach for the in-app “View Report” flow before the customer receives the final PDF. 
<InspectionReport
  inspection={inspection}
  workshop={{ name: 'Euroautos Medellín', logoUrl: '/logo.png' }}
  showPhotos
  language="es"
/>
A full example with a modal wrapper and a download button: 
import { InspectionReport, generatePDF } from '@/components/InspectionReport';
import { Dialog } from '@/components/ui/Dialog';

function ReportModal({ inspection, onClose }) {
  const workshop = {
    name: 'Euroautos Medellín',
    logoUrl: '/logo.png',
    address: 'Calle 10 # 43E-31, El Poblado, Medellín',
    phone: '+57 604 444 0000',
  };

  async function handleDownload() {
    const blob = await generatePDF(inspection, { workshop, showPhotos: true, language: 'es' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `inspeccion-${inspection.id}.pdf`;
    a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <Dialog onClose={onClose}>
      <div className="flex justify-end p-4">
        <button onClick={handleDownload}>Descargar PDF</button>
      </div>
      <InspectionReport
        inspection={inspection}
        workshop={workshop}
        showPhotos
        language="es"
        className="mx-auto max-w-3xl"
      />
    </Dialog>
  );
}

​
Programmatic PDF Export

Use generatePDF when you need a Blob directly — for example, to upload the PDF to cloud storage, attach it to an email, or trigger an immediate browser download without rendering the report in the DOM. 
const pdfBlob = await generatePDF(inspection, {
  workshop: { name: 'Euroautos Medellín', logoUrl: '/logo.png' },
  showPhotos: true,
  language: 'es',
});
const url = URL.createObjectURL(pdfBlob);
window.open(url);
generatePDF renders the report component into an off-screen container, applies print-optimised styles, then uses the browser’s PDF rendering pipeline to produce the Blob. Because it runs in-browser, no server-side PDF library is required.
generatePDF is an async function and may take 1–3 seconds for inspections with many photos. Show a loading indicator in your UI while awaiting the result.

​
Props — InspectionReport

​
inspection
Inspection
required
The completed inspection record to render. The component expects inspection.status to be 'submitted' or 'reviewed'. Passing a draft inspection (status 'in-progress') is supported but will render an DRAFT — NOT FINALISED watermark across every page of the report.
interface Inspection {
  id: string;
  vehicleId: string;
  inspectorId: string;
  status: 'in-progress' | 'submitted' | 'reviewed';
  createdAt: string;      // ISO 8601
  submittedAt?: string;   // ISO 8601
  vehicle: Vehicle;
  sections: InspectionSection[];
  signature: string | null; // base64 SVG
  overallStatus: 'ok' | 'attention' | 'critical';
}
​
workshop
WorkshopConfig
required
Workshop branding and contact details rendered in the report header. At minimum, name is required. See the WorkshopConfig type section below.
​
showPhotos
boolean
default:"true"
When true, photo evidence attached to Attention and Critical checklist items is included in the report after the relevant section summary. When false, the photos are omitted and only the status, label, and inspector notes are shown — producing a more compact report.
​
language
string
default:"'es'"
The language code used for all static report text — section headings, status labels, date formatting, and the signature declaration. Currently 'es' (Spanish) is the only fully supported value. Passing 'en' will render English labels; other values fall back to 'es'.
​
className
string
An optional CSS class applied to the outermost <div> wrapper of the report. Use this to control width, margins, or theme overrides without targeting internal component selectors.

​
generatePDF Options

generatePDF accepts the same options as the component props, minus className. It returns a Promise<Blob> that resolves to a PDF file. 
async function generatePDF(
  inspection: Inspection,
  options: {
    workshop: WorkshopConfig;
    showPhotos?: boolean;   // default: true
    language?: string;      // default: 'es'
  }
): Promise<Blob>
To upload the generated PDF directly to a storage bucket, pass the resolved Blob to your upload function without creating an object URL. For example: await uploadToStorage(pdfBlob, reports/$.pdf).

​
WorkshopConfig Type

The WorkshopConfig object controls the workshop identity block rendered at the top of every report page. All fields except name are optional — omitted fields are simply not rendered in the header. 
interface WorkshopConfig {
  /** Display name of the workshop. Rendered as the primary header. */
  name: string;
  /** Absolute URL or relative path to the workshop logo image. Recommended size: 200×60 px. */
  logoUrl?: string;
  /** Physical address, rendered beneath the workshop name. */
  address?: string;
  /** Contact phone number, rendered with a phone icon in the header. */
  phone?: string;
}
A minimal config with just a name: 
const workshop: WorkshopConfig = {
  name: 'Euroautos Bogotá',
};
A full config with all optional fields: 
const workshop: WorkshopConfig = {
  name: 'Euroautos Medellín',
  logoUrl: '/branding/logo-euroautos.png',
  address: 'Calle 10 # 43E-31, El Poblado, Medellín, Colombia',
  phone: '+57 604 444 0000',
};
If logoUrl points to an external URL, ensure the image is accessible from the client running generatePDF. Cross-origin image loading failures will cause the logo to be silently omitted from the PDF rather than throwing an error.

Build docs developers (and LLMs) love

Get started for freeTalk to us