feat(site): replace account date inputs with shadcn calendar

[Orlando275]

Description

Fixes #748

The two date fields on /account/management-zones/[zone] — Rotation year and NPK last used — used native <input type="date">. They now open the shadcn calendar inside a popover. Since the trigger is a button rather than an input, they are wired through react-hook-form's Controller instead of register.

These were the only native date pickers under /account; the other two account route groups (/account/agreement and /account/reset-password) have no date UI.

Notes for review

• Timezone. The date columns round-trip at UTC midnight, while react-day-picker builds its dates at local midnight. Without converting on both ends, the stored day shifts by one for users east of UTC. toCalendarDate / fromCalendarDate handle this, and a test pins the submitted value to 2026-07-15T00:00:00.000Z.

• Year range. With captionLayout="dropdown", react-day-picker caps navigation at the end of the current year by default, which would make future rotation dates unreachable — a regression against the native input. The range is declared explicitly as 50 years back and 10 forward. Happy to change the window if you'd prefer different bounds; it's two constants.

• Tailwind v4. The shadcn CLI serves the Tailwind v3 flavour of calendar.tsx, because components.json declares a tailwind.config.ts. Its h-[--cell-size] classes compile to invalid CSS under v4 (height: --cell-size, which browsers drop), which would have left the calendar misaligned. They were converted to the v4 h-(--cell-size) syntax and verified against the compiled production CSS. Note that type-check, lint, test and build all pass either way, since none of them evaluate CSS.

• Accessibility. A <label for> does not name a <button>, so each trigger carries an aria-label combining its label and current value.

• calendar.tsx and popover.tsx are shadcn output kept as generated, apart from the Tailwind fix and the copyright header. They carry no stories or tests, matching the other 22 components in src/components/ui/.

Checklist

• You've included unit or integration tests for your change, where applicable.
• You've included inline docs for your change, where applicable.
• Any components that you've modified are accessible.
• You've used conventional commits where appropriate

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
internal-dashboard	Ready	Preview	Jul 31, 2026 1:23am
nightcrawler	Ready	Preview	Jul 31, 2026 1:23am

[Copilot]

Pull request overview

This PR updates the /account/management-zones/[zone] form to replace the two native date inputs (“Rotation year” and “NPK last used”) with a shadcn-style calendar popover, addressing the UI request in #748 while handling UTC-midnight date round-tripping safely.

Changes:

• Replaced native <input type="date"> fields with Radix Popover + shadcn Calendar, wired via react-hook-form Controller.
• Added timezone-safe conversion helpers to prevent day shifting when converting between DB date values (UTC midnight) and calendar selections (local midnight).
• Added unit tests to pin the submitted date value to UTC midnight and verify trigger display/disabled behavior.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
bun.lock	Adds lockfile entries for @radix-ui/react-popover and react-day-picker (plus a minor brace-expansion bump).
apps/site/package.json	Adds runtime deps needed for the popover calendar UI (@radix-ui/react-popover, react-day-picker).
apps/site/src/components/ui/popover.tsx	Introduces shadcn-style Popover wrapper used by the date fields.
apps/site/src/components/ui/calendar.tsx	Adds shadcn-style Calendar component (Tailwind v4-compatible sizing classes) backed by react-day-picker.
apps/site/src/app/(authenticated)/(no-sidebar)/account/(with-shell)/management-zones/[zone]/management-zone-form.tsx	Replaces the two date inputs with calendar popover triggers and UTC/local conversion helpers.
apps/site/src/app/(authenticated)/(no-sidebar)/account/(with-shell)/management-zones/[zone]/management-zone-form.test.tsx	Adds tests covering trigger display, UTC-midnight submission, and read-only disabling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.