As a user I want to see the frontend with the correct color palette and visual structure so that all pages look identical to the mock-design pages. Apply design tokens: Background #F5F9FC, Surface #FFFFFF, Text #2D3748, Accent #4CAF50, Muted #A0AEC0. Set up global CSS variables, font family (Inter), spacing and border-radius conventions. Remove any scaffold pages not present in the design (e.g. welcome page, ai-assistant page, settings page if not in design). This task must be completed before any other page implementation tasks.
As a user I want to be able to use the frontend Login page so that I can securely sign in to silver-finanas. Implement the Login page based on the existing JSX design (v1). Page receives email/password inputs, triggers authentication and redirects to Dashboard. Follows design system tokens established in the theme task.
As a user I want to be able to use the frontend Dashboard page so that I can view my financial summary, interactive financial tree, KPI stats (income, expenses, net balance, budget utilization), spending/income charts, recent transactions, accounts overview, and quick actions. Implement based on existing JSX design (v1) including: TopBar, Sidebar, WelcomeBanner, FinancialTreeWidget, KPIStatsRow, SpendingIncomeChart, BudgetProgressPanel, RecentTransactions, AccountsOverview, QuickActions and Footer sections.
As a user I want to be able to use the backend API for accounts so that I can create, update, delete and retrieve bank accounts with current balances. Implement FastAPI endpoints: POST /accounts, GET /accounts, GET /accounts/{id}, PUT /accounts/{id}, DELETE /accounts/{id}. Uses MySQL via Alembic migrations.
As a user I want to be able to use the frontend Accounts page so that I can create and manage multiple bank accounts, view balances, and navigate to transaction history per account. Implement based on existing JSX design (v1). Linked from Dashboard and Sidebar; links to Transactions page.
As a user I want to be able to use the frontend CreditCards page so that I can add and manage credit cards, view statements, track available credit vs limit, and access payment reminders. Implement based on existing JSX design (v1). Linked from Dashboard Sidebar; links to Import page.
As a user I want to be able to use the frontend Reports page so that I can analyze spending and income trends through interactive charts, period comparisons, and category breakdowns. Implement based on existing JSX design (v1). Linked from Dashboard Sidebar.
As a user I want to be able to use the frontend Profile page so that I can manage my personal information, invite family members to share account access, and configure preferences such as language and currency. Implement based on existing JSX design (v1). Linked from Dashboard TopBar user avatar dropdown and Sidebar.
As a user I want to be able to use the backend API for transactions so that I can create, retrieve, update, delete and filter transactions by account, category, date range and type (income/expense). Implement FastAPI endpoints: POST /transactions, GET /transactions, GET /transactions/{id}, PUT /transactions/{id}, DELETE /transactions/{id}.
As a user I want to be able to use the backend API for categories so that I can create and manage hierarchical expense/income categories and subcategories. Implement FastAPI endpoints: POST /categories, GET /categories, PUT /categories/{id}, DELETE /categories/{id} with support for parent-child relationships.
As a user I want to be able to use the backend API for multi-user access so that I can invite family members or collaborators to share access to the same account with role-based permissions. Implement FastAPI endpoints: POST /users/invite, GET /users/members, DELETE /users/members/{id}, PUT /users/members/{id}/role.
As a user I want to be able to use the frontend Transactions page so that I can add, view, search and filter all income and expense transactions across all accounts, assign categories, and review imported transactions. Implement based on existing JSX design (v1). Linked from Dashboard, Accounts and Import pages.
As a user I want to be able to use the frontend Import page so that I can upload PDF bank statements, credit card invoices, and OFX files to import financial data automatically. Implement based on existing JSX design (v1). Linked from CreditCards and Sidebar; leads to Transactions review page after upload.
As a user I want to be able to use the backend API for budgets so that I can set, update and track budget goals per category and period. Implement FastAPI endpoints: POST /budgets, GET /budgets, PUT /budgets/{id}, DELETE /budgets/{id}, GET /budgets/utilization for progress calculations.
As a user I want to be able to use the backend API for credit cards so that I can add and manage credit cards, track statement balances, available credit, limits and payment due dates. Implement FastAPI endpoints: POST /credit-cards, GET /credit-cards, PUT /credit-cards/{id}, DELETE /credit-cards/{id}.
As a user I want to be able to manage accounts on the frontend Accounts page using live data so that create, update, delete and balance display operations call the real backend API.
As a user I want to be able to manage my profile and family access on the frontend Profile page using live data so that user info updates and member invitations call the real backend API.
As a user I want to be able to use the frontend Categories page so that I can create and manage expense/income categories and subcategories to organize my transactions. Implement based on existing JSX design (v1). Linked from Transactions and Budget pages.
As a user I want to be able to use the backend API for file imports so that I can upload PDF bank statements, credit card invoices and OFX files and have transactions automatically parsed and created. Implement FastAPI endpoints: POST /import/pdf, POST /import/ofx. Integrate PDF text extraction (pdfplumber) and OFX parsing libraries. Returns parsed transaction previews for user review.
As a user I want to be able to use the backend API for reports so that I can retrieve aggregated spending and income analytics, category breakdowns, period comparisons and trend data for charts. Implement FastAPI endpoints: GET /reports/summary, GET /reports/spending-by-category, GET /reports/income-vs-expenses with period query parameters.
As a user I want to be able to manage transactions on the frontend Transactions page using live data so that add, edit, delete, filter and search operations call the real backend API.
As a user I want to be able to manage credit cards on the frontend CreditCards page using live data so that add, edit and delete card operations and balance display call the real backend API.
As a user I want to be able to use the frontend Budget page so that I can set budget goals per category, monitor spending progress against those goals, and view period-based budget utilization. Implement based on existing JSX design (v1). Linked from Dashboard Sidebar; links to Categories page.
As a user I want to be able to see live data on the frontend Dashboard page so that KPI stats, financial tree, recent transactions, accounts overview and budget progress all load from real backend API responses. Wire up all Dashboard sections to their respective API endpoints using React Query or similar data-fetching strategy.
As a user I want to be able to manage categories on the frontend Categories page using live data so that create, update and delete of categories and subcategories call the real backend API.
As a user I want to be able to upload files on the frontend Import page using the real backend so that PDF and OFX uploads are processed and parsed transactions are shown for review before saving.
As a user I want to be able to see live analytics on the frontend Reports page so that spending charts, income vs expense graphs, and category breakdowns load from the real backend reports API.
As a user I want to be able to manage budgets on the frontend Budget page using live data so that goal creation, progress tracking and utilization display call the real backend API.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!