UI/UX: Redesign the Bills unpaid vs recent payments sections with clear urgency

[Baskarayelu]

Description

The Bills page (app/bills/page.tsx) composes UnpaidBillsSection and RecentPaymentsSection plus BillPaymentsStatsCards, but the visual separation and urgency hierarchy between bills that are due soon, overdue, and already paid is weak. Users need to instantly see what needs action versus what is history. We need a redesign that establishes a strong urgency hierarchy for unpaid bills (overdue, due soon, upcoming) and visually de-emphasizes recent payments. This complements, but does not duplicate, the already-open "list vs card responsive pattern" issue.

Requirements and context

• UI/UX scope only; do not duplicate the open "Bill payments: list vs card responsive pattern" issue.
• Reference app/bills/page.tsx, components/Bills/UnpaidBillsSection.tsx, components/Bills/RecentPaymentsSection.tsx, components/Bills/BillsCard.tsx.
• Define urgency tiers (overdue, due soon, upcoming) with status tokens and labels.
• Visually separate "needs action" from "history."
• Reference docs/bills-state-inventory.md for existing states.

Suggested execution

• Branch: uiux/bills-urgency-hierarchy
• Redline urgency tiers in UnpaidBillsSection and de-emphasis in RecentPaymentsSection.
• Document tier thresholds and color/label mapping.
• Provide section ordering and spacing.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: urgency via text + icon, AA contrast.

Example commit message

feat(uiux): redesign bills urgency hierarchy for unpaid vs recent

Guidelines

• Document urgency tier thresholds.
• Avoid overlapping with the responsive list/card issue.
• Timeframe: 96 hours