Riddy21 / Riddy21/Friday_Budgeting_Pro
Convert dashboard page to HTMX + Tailwind
Open
Nobody has claimed this yet.
frontend
testing
- Dominant language
- Python
- Stars
- 1
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Summary
Rewrite dashboard.html to use Tailwind utilities and optionally replace JS doSync()/pollClassification() with HTMX polling.
Tasks
- Replace
<div class='card'>with Tailwind card component (bg-white rounded-xl border border-slate-200 p-8) - Replace
.action-rowinline flex with Tailwind (flex gap-3) - Replace
.alert-success/.alert-errorclasses with Tailwind variants - Consider replacing
doSync()fetch + polling withhx-post='/api/sync'+hx-trigger='click'+hx-swap='innerHTML'on result div - Consider replacing classification poll with
hx-get='/api/classify/status'+hx-trigger='every 2s'+hx-swap='outerHTML' - Ensure Sync Now button is ≥ 44px on mobile
Acceptance criteria
- Dashboard passes all
TestDashboardPagePlaywright tests - Sync polling works correctly
- Responsive at 390px
Part of epic #299. Closes part of #285.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with dashboard.html and the existing doSync() and pollClassification() entry points, then read the TestDashboardPage Playwright tests. Check the listed sync and classification endpoints and verify the dashboard behavior at 390px. Done means the tests pass, sync polling works, and the responsive button requirement is met.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, playwright, python, tailwindcss
- Domain
- frontend, testing
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100