Adding a Printable Monthly Report and SLA Indicators to Albaida‑Tickets (Next.js 14)

The requested addition of a printable monthly report and Service-Level Agreement (SLA) indicators to Albaida-Tickets, built with Next.js 14, was accomplished by implementing a client-side "Print / Save PDF" button and extending the library's priority time-outs for SLA calculations.

The problem was that the committee requested a direct printable PDF of ticket statistics but none existed on the existing panel page. Additionally, SLA was supposed to be visible, with clear indicators when tickets were nearing or surpassing their respective time limits.

First attempts at solving the problem involved generating a PDF server-side with Puppeteer, applying CSS to print media, and hard-coding SLA thresholds within the UI component. However, these methods either failed on Vercel's serverless environment, broke the layout, or violated the DRY principle. Consequently, the changes were reverted and a new approach was devised.

The solution included creating a client-side PrintButton component, adding print-friendly CSS to strip out interactive elements and tables for clean printing, centralizing SLA definitions in lib/catalog.ts, and calculating SLA in the panel page. The PrintButton component uses window.print() to generate the PDF, the CSS ensures tables break cleanly on each page and non-essential elements are hidden for a clean print layout, and the SLA constants are now available for reuse across different parts of the application, enhancing maintainability and extending functionality beyond just the monthly report.