Payroll: show per-session clock in/out times inline in the hours view

Objective

• Allow payroll reviewers to see individual punch-in and punch-out timestamps for each employee across a date range without opening each day individually.
• Reduce friction in the payroll approval workflow by surfacing session-level detail inline rather than requiring per-record navigation.

Background

• Tiffany Fisher reported via Google Chat that reviewing hours before approving payroll requires opening each day/record one at a time. No view currently shows individual session timestamps (clock-in/clock-out pairs) at a glance.
• The inspector/date range filter on the payroll hours view already exists and returns a daily total per employee — but only the aggregated hours value is surfaced, not the underlying sessions.
• The HoursData type (defined in ClockInOut.tsx) includes a sessions array of { clockIn: string, clockOut?: string } objects. The data is already returned from payroll/hours-history; this is a rendering gap, not a data gap.
• The ClockInOut dashboard widget already renders session-level history for the logged-in employee using this same sessions array — formatting clock-in/out times and per-session duration. That rendering logic is the direct reference for what needs to be added to the manager-facing hours view.
• Applies to all employee types (inspectors and office staff), not inspector-only.

Product Decisions

Locked

1. Scope — Manager/payroll-reviewer-facing view only; no changes to the employee-facing Time Clock widget.
2. Data source — HoursData.sessions is already returned from payroll/hours-history; no new backend endpoint needed.
3. Placement — Session timestamps expand inline as sub-rows beneath each day row. No click or hover required to reveal them.
4. Employee type — Applies to all employee types. The feature works the same whether one or multiple employees are displayed.

Scope

Frontend

• attik/apps/frontend/src/app/tools/hr/payroll/PayrollOverview.tsx — Primary manager-facing table. Inline session sub-rows would be added within the existing day-level row rendering.
• attik/apps/frontend/src/app/tools/hr/payroll/PayrollBase.tsx — Likely orchestrates the hours data fetch alongside payroll; relevant if data shape changes are threaded through.
• attik/apps/frontend/src/components/dashboard/ClockInOut/ClockInOut.tsx — Reference implementation. Contains the session rendering logic (sessions.map) using tzDayjs(session.clockIn).format('h:mm A') that can be extracted or adapted for the manager view.

References

• payroll/hours-history — existing endpoint returning HoursData[] with sessions array
• ClockSession type: { clockIn: string; clockOut?: string } defined in ClockInOut.tsx