Frontend & Printing Engine

The frontend client portal is built as a Single Page Application (SPA) using Next.js. It leverages reactive data tables and strictly typed endpoints to render complex analytical reports securely based on the active user's authorization tier.

Premium Document Preview & Live Canvas

A core requirement for enterprise HR departments is the generation of physical timesheets for wet-ink signatures. The interface features an interactive, high-fidelity sheet preview workspace designed to perfectly mirror the physical hardcopy layout before any export action occurs.

Native Browser A4 Portrait Printing

Rather than relying on heavy server-side PDF generation libraries, TitanGrid utilizes a highly optimized browser-native printing engine via CSS @media print queries.

This approach shifts the rendering workload to the client's local machine, ensuring the application server resources remain entirely dedicated to database ingestion and mathematical processing.

Print Configuration Directives

When a user triggers the print command, the Next.js application executes specific stylesheet directives:

• UI Component Stripping: Automatically hides elements like layout control sidebars, browser navigation wrappers, and download toolbars. Only the pure data matrix remains visible.
• Canvas Grid Scaling: Locks the React data grids into a fixed print width layout container (width: 210mm / standard A4 width), ensuring metrics display clearly without column truncation.
• Verification Footers: Automatically injects the standard supervisor and staff signature lines at the base of the layout sheet for HR compliance sign-offs.