# Native `<input type="date">` / `type="time"` sweep across the app

**Filed:** Batch 55, 2026-08-02.
**Status:** deferred to post-demo. Out of ABA scope, so not fixed tonight.

## Problem

The app already has two premium, brand-consistent picker components:

- `frontend/src/Components/DatePicker/AppDatePicker.tsx` — MUI X based,
  emits `YYYY-MM-DD`, replaces every `<input type="date">` /
  `<TextField type="date">`.
- `frontend/src/Components/PremiumTimePicker/` — emits 24h `HH:mm`,
  12-hour display with clock icon and popover, replaces every
  `<input type="time">` / `<TextField type="time">`.

Both have been the standard since Batch 49. The ABA module was migrated
in Batches 49 and 55 (all six native inputs swapped — see
`Pages/SessionData/Create/index.tsx` and
`Pages/ProgramLibrary/shared/StudentsStaffWorkspace.tsx`). The rest of
the app was not.

The remaining native inputs render Chrome's calendar/clock icons and
popups instead of the app's design language. On other browsers they
render whatever that browser's OS-native affordance looks like — Safari
mac shows a stepper, Firefox shows a text field with a small icon,
mobile browsers pop the OS wheel. So the same page looks different on
every device, and none of it matches the rest of the app.

## Files to migrate (grep as of 2026-08-02)

Native `<TextField type="date">`:

- `Pages/AcademicReports/RegularClassSchedule/index.tsx` (2 — From/To)
- `Pages/AcademicReports/StudentTimetable/components/FilterPanel.tsx` (3 — Week starting, From, To)
- `Pages/AcademicReports/StudentClasses/components/FilterPanel.tsx` (2 — From, To)
- `Pages/AcademicReports/StaffTimetable/components/FilterPanel.tsx` (3 — Week starting, From, To)
- `Pages/ClassSchedule/PendingMakeups/index.tsx` (2 — From, To)
- `Pages/ClassBackupImport/index.tsx` (1 — Cutoff date)
- `Pages/ClassMakeupImport/index.tsx` (2 — From, To)
- `Pages/Student/View/Components/ClassBillingSummarySection.tsx` (1)
- `Pages/Course/shared/CourseFormBody.tsx` (2)
- `Pages/Staff/View/Component/ClassScheduleActions/SwitchStaffDialog.tsx` (1 — Effective date)
- `Pages/Staff/View/Component/ClassScheduleActions/ReleaseStudentDialog.tsx` (1)
- `Pages/Staff/View/Component/ClassScheduleActions/AddStudentDialog.tsx` (1)
- `Pages/LeadSystem/LeadInquiries.tsx` (1 — comment acknowledges the OS-native fallback)

Native `<TextField type="time">`:

- `Pages/AcademicReports/StaffCapacity/components/FilterPanel.tsx` (2 — Start from, Start to)
- `Pages/Attendance/AdminEdit/editPunchInTime.tsx` (1)
- `Pages/Attendance/AdminEdit/editPunchOutTime.tsx` (1)
- `Pages/ScheduleList/Create/index.tsx` (2)
- `Pages/ScheduleList/Edit/RemovedEdited.tsx` (2)
- `Pages/Staff/Edit/scheduleEdit.tsx` (4)
- `Pages/Staff/Create/index copy.tsx` (2 — this file's name suggests it may itself be dead code; verify before migrating)

Rough total: 20+ files, ~35+ native inputs.

## Fix

Per-file: replace `<TextField type="date" ...>` with
`<AppDatePicker ...>` and `<TextField type="time" ...>` with
`<PremiumTimePicker ...>`. Both are drop-in for the common case
(value string + onChange emitting a string). Both accept `size`,
`fullWidth`, `disabled`, `required`, `helperText`, `label`.

Watch-outs:

- `AppDatePicker` emits `YYYY-MM-DD` — same as `<input type="date">`,
  so upstream code that treats the value as a date-only string should
  need no change. Verify per file.
- `PremiumTimePicker` emits 24h `HH:mm` — same as `<input type="time">`.
  Same story.
- A few call sites use `InputLabelProps={{ shrink: true }}` on the
  native input; drop it — both premium components own their own label
  behaviour.
- `Pages/LeadSystem/LeadInquiries.tsx` has a comment defending the
  native input. Read it before migrating; the author may have had a
  reason (some filter bars want a very compact affordance).
- `Pages/Staff/Create/index copy.tsx` — the filename is suspicious.
  Check whether it's routed before spending time on it; may be
  dead code left over from a duplication.

## Suggested order

1. Filter panels in Academic Reports (batch of 4 files, all trivial).
2. Class Schedule / Import pages (5 files).
3. Attendance and Schedule editors (4 files).
4. Staff-related dialogs (5 files).
5. Course, Student, Lead System stragglers (3 files).

## Related

- Precedent: `Pages/SessionData/Create/index.tsx` and
  `Pages/ProgramLibrary/shared/StudentsStaffWorkspace.tsx` migrations in
  Batch 55 §1 are the canonical examples of the swap.
- `docs/post-demo/team-destroy-audit-log.md` and
  `docs/post-demo/aba-staff-designation.md` — other post-demo tickets
  filed the same day.