Skip to content

Wire history button and audit sidebar into WorkSheet #7

@duchacekjan

Description

@duchacekjan

Description

Add a history icon button to every day row in WorkSheet.tsx and mount WorkEntryAuditSidebar. Blocked by #5 (TS contracts and hook) and #6 (WorkEntryAuditSidebar component must exist first).

Changes in src/uck26-frontend/src/features/work/WorkSheet.tsx:

  1. Add imports:
    import { History } from 'lucide-react';
    import { WorkEntryAuditSidebar } from './WorkEntryAuditSidebar';
  2. Add state: const [auditDate, setAuditDate] = useState<string | null>(null)
  3. Add extra <TableHead /> as last column header (no label)
  4. In each day <TableRow>, add last <TableCell>:
    <TableCell>
      <IconButton
        variant="ghost"
        size="mini"
        aria-label={`Show history for ${day.label}`}
        data-test-id={`work-history-${day.date}`}
        onClick={() => setAuditDate(prev => prev === day.date ? null : day.date)}
      >
        <History className={auditDate === day.date ? 'text-blue-500' : undefined} />
      </IconButton>
    </TableCell>
  5. Add extra <TableCell /> to the summary row to keep column count aligned
  6. Mount sidebar at bottom of return (outside table):
    <WorkEntryAuditSidebar
      open={auditDate !== null}
      date={auditDate}
      dateLabel={days.find(d => d.date === auditDate)?.label ?? ''}
      userId={worksheetUserId}
      year={year}
      month={month}
      onClose={() => setAuditDate(null)}
    />

Acceptance Criteria

  • Test coverage — add Playwright UI tests in src/UCK26.Ui.Tests/WorkPageTests.cs. Auth via POST /api/auth/login + JWT injected into localStorage. Locate all elements via data-test-id only. Required cases:
    • Click data-test-id="work-history-{date}" for day A, then click for day B → assert sidebar header shows day B's label
    • Click same data-test-id="work-history-{date}" button again → assert data-test-id="work-history-sidebar" is no longer visible
    • Assert history button exists on a weekend row (confirm weekends not excluded)
  • Update README.md — no README changes needed; no new commands or setup steps introduced. State: N/A — wiring is an internal component change.
  • Update CLAUDE.md — add data-test-id entries for work-history-{date} button and work-history-sidebar to the Testing conventions section (or a new data-test-id reference table if one exists).
  • History button present on every day row (including weekends)
  • Clicking a button opens sidebar for that date; clicking same button again closes it
  • Clicking a different date switches sidebar content
  • Active row button highlighted (blue icon)
  • Summary row column count remains correct
  • data-test-id={work-history-{date}} attribute present on each button
  • TypeScript strict mode passes (npm run lint)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions