skills.rest
Aurelian1974
Aurelian1974COMMUNITY
Explore all skills by this author →
GitHub

ui-print-layout

Implements A4 print layouts and audit trail timelines for ERP detail pages.

Updated Aug 18, 2026
Search Tags:#react#print layout#audit trail#erp#sql server#a4#media print
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-print-layout-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-print-layout
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/ui-print-layout
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-print-layout-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? ERP detail pages need printable document output (invoices, orders) that hides UI chrome and follows A4 print standards, plus a history view showing who changed what. This Skill provides the PrintLayout component rules and the AuditTrail component with its backing SQL procedure. ## Core Features & Use Cases - PrintLayout: Wraps document content with @media print rules — A4 page size, 15mm/20mm margins, repeated table headers, row break avoidance, and hiding navigation, buttons, and filters via the .print:hidden class. - AuditTrail: Renders a timeline of changes from audit.audit_log for any entity, backed by the administration.usp_GetAuditTrail stored procedure returning the last 100 actions with old and new values. - Use Case: On an invoice detail page, wrap the invoice content in PrintLayout so users can print a clean A4 document, and add an "Istoric" tab with AuditTrail to show the full change history. ## Quick Start Add a printable A4 layout and an audit history tab to my invoice detail page using PrintLayout and AuditTrail.

Frequently Asked Questions about ui-print-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a React page printable in A4 format?▼

Wrap the document content in the PrintLayout component, which applies @page rules for A4 size with 15mm/20mm margins. It also sets 11pt print font size, repeats table headers on each page, and prevents table rows from splitting across pages.

How to hide navigation and buttons when printing a web page?▼

Apply the .print:hidden class to nav, aside, header, buttons, and filters. PrintLayout's @media print rules hide these UI chrome elements so only the document content appears on the printed page.

How do I show a change history timeline for a database record?▼

Use the AuditTrail component with entityType and entityId props, typically in a history tab on the detail page. It reads from audit.audit_log through the administration.usp_GetAuditTrail procedure, returning the last 100 actions with old and new values.

What SQL is required for the AuditTrail component?▼

Create the administration.usp_GetAuditTrail stored procedure taking TenantId, EntityType, and EntityId parameters. It selects the top 100 rows from audit.audit_log filtered by tenant and entity, ordered by created_at descending.

Why do table rows split across pages when printing?▼

Browsers break tables at page boundaries by default. PrintLayout applies page-break-inside: avoid on table rows and display: table-header-group on thead so rows stay intact and headers repeat on every printed page.

Related Skills

Explore More Software Engineering Skills→
nayukatanayukata

manage-swr-data

Create SWR hooks for fetching and mutating server state with typed keys.

Community
Advanced
maximoseomaximoseo

PDF Report

Convert HTML and structured data into downloadable PDF files.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-form-flow

Detect validation, navigation, and state-preservation failures in multi-step forms.

Community
Advanced
cosmicstack-labscosmicstack-labs
364

markdown-to-pdf

Convert Markdown documents into PDF files using Pandoc, WeasyPrint, or ReportLab.

Official
Advanced