{
  "id": 11269876,
  "title": "Adding a Printable Monthly Report and SLA Indicators to Albaida‑Tickets (Next.js 14)",
  "url": "https://urgent.news/2026/10/01/adding-a-printable-monthly-report-and-sla-indicators-to-albaida",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-01T20:13:09.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/zaerohell/adding-a-printable-monthly-report-and-sla-indicators-to-albaida-tickets-nextjs-14-1jfp"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nFirst 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.\n\nThe 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.",
  "summary": "Adding a Printable Monthly Report and SLA Indicators to Albaida‑Tickets (Next.js 14) TL;DR: I added a client‑side “Print / Save PDF” button and a server‑side SLA calculation for ticket priorities. The changes involve a new PrintButton component, CSS tweaks for print media, and extending lib/catalog.ts with priority time‑outs that feed into the panel UI. The Problem The committee needed a monthly…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}