Solidmark DTR and Payroll Analytics Refactor

Implementation report for the Solidmark repository

Summary

The DTR and Payroll audit interfaces were aggressively expanded from cramped inline components to maximized overlay modals. This architectural shift leverages the full DOM viewport to securely manage AM/PM punch arrays and dense payroll tabular data without restricting user navigation.

Implemented Updates

• Deprecated the inline DTR editor and migrated the state management logic to a dedicated, high-resolution modal architecture.
• Realigned the DOM grid for AM/PM punch inputs to isolate state changes and reduce accidental cross-field mutations.
• Scaled the payrollModal component width and height dynamically based on window.innerHeight and window.innerWidth to maximize tabular data visibility.
• Reconfigured CSS grid templates within the payroll modal to eliminate nested scrollbars and consolidate data auditing into a single vertical flow.

Responsive / Functional Behavior

• The modals now conditionally render with high z-index overlays, completely overriding background scroll events to enforce focus on the active data layer.
• Desktop users benefit from significantly expanded data grids; mobile behavior gracefully stacks input fields vertically.

Validation

• ESLint checks completed successfully.
• Production Vite build completed successfully.
• Manual state progression tests executed without encountering uncaught exceptions.
• Existing font-resolution warnings remain non-blocking and are unrelated to this update.

Source and Tracking

Source: Solidmark repository
Master Tracker: 🟩 feature and bugs to check and apply for each client

Screenshot Evidence — Solidmark

(Screenshots pending attachment)