UI/UX: Design a recurring bill toggle and schedule presentation for bill payments

[Baskarayelu]

Description

The Bills flow copy references a "recurring toggle" in the create-bill stages (app/bills/page.tsx billStages), and docs/bill-reminders.md describes reminders, but there is no polished design for marking a bill recurring or presenting its schedule. We need a designed recurring toggle within the add-bill form, a clear way to display a bill's recurrence (e.g. "Monthly on the 1st"), and how recurring bills surface in the unpaid list. The toggle's on/off state must be obvious and keyboard accessible.

Requirements and context

• UI/UX scope only.
• Reference app/bills/page.tsx, components/Bills/BillsCard.tsx, components/Toggle.tsx, docs/bill-reminders.md.
• Design the recurring toggle and its expanded schedule options.
• Define how recurrence is displayed on bill cards.
• Reuse the shared Toggle component styling for consistency.

Suggested execution

• Branch: uiux/bills-recurring-toggle
• Redline the recurring toggle and schedule fields in the add-bill form.
• Document the recurrence label format on bill cards.
• Provide on/off and expanded states.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: toggle role/state, label association, keyboard operability.

Example commit message

feat(uiux): design recurring bill toggle and schedule presentation

Guidelines

• Document the recurrence label format.
• Reuse the shared Toggle styling.
• Timeframe: 96 hours