How aeknard-sieghart/financial-tracker works
Financial Tracker is a browser-based personal-finance application: users record transactions and manage accounts, then review period-based budgets, charts, and financial plans. The main app coordinates dashboard and finance-management components, with recurring transactions and bill, debt, and income-plan calculations supporting those workflows. Browser storage is the default; Supabase sync and data backup are additional capabilities. The graph uses README and SOURCE INDEX evidence for unsampled branches, so their internal call paths are not inferred.
Main entry points: App.jsx Financial app · Sidebar.jsx Finance navigation · Debts.jsx Debt tracking · incomePlans.js Income calculations
Components 28
Application flow
- Financial app
src/App.jsx - Workspace shell
src/components/WorkspaceRoot.jsx - Finance navigation
src/components/Sidebar.jsx
Finance management
- Transactions
src/components/TransactionForm.jsx - Accounts
src/components/Accounts.jsx - Account editor
src/components/AccountEditorSurface.jsx - Account calculations
src/utils/accounts.js - Bills
src/components/Bills.jsx - Bill calculations
src/utils/bills.js - Debt tracking
src/components/Debts.jsx - Debt calculations
src/utils/debts.js - Categories
src/components/CategoryManager.jsx - Category state
src/hooks/useCategories.js - Category icons
src/constants/categoryIcons.js - Recurring schedules
src/utils/recurring.js
Planning and review
- Income planning
src/components/IncomePlanner.jsx - Income calculations
src/utils/incomePlans.js - Savings goals
src/components/SavingsGoals.jsx - Dashboard snapshot
src/components/DashboardSnapshot.jsx - Charts and insights
src/components/Charts.jsx - Budgets
src/components/BudgetManager.jsx
Storage and sync
- Workspace storage
src/utils/workspaceStorage.js - Workspace access
src/hooks/useWorkspace.js - Cloud sync
src/components/CloudSync.jsx - Supabase service
src/lib/supabase.js - Data backup
src/components/DataBackup.jsx - Browser storage
Other components
- User
Connections 38
- User → Workspace shell: uses
README.md - Workspace shell → Financial app: renders
- Financial app → Finance navigation: renders
src/App.jsx - Financial app → Transactions: renders
src/App.jsx - Financial app → Dashboard snapshot: renders
src/App.jsx - Financial app → Charts and insights: renders
src/App.jsx - Financial app → Savings goals: renders
src/App.jsx - Financial app → Debt tracking: renders
src/App.jsx - Financial app → Income planning: renders
src/App.jsx - Finance navigation → Transactions: opens
src/components/Sidebar.jsx - Finance navigation → Accounts: opens
src/components/Sidebar.jsx - Finance navigation → Bills: opens
src/components/Sidebar.jsx - Finance navigation → Debt tracking: opens
src/components/Sidebar.jsx - Finance navigation → Categories: opens
src/components/Sidebar.jsx - Finance navigation → Budgets: opens
src/components/Sidebar.jsx - Accounts → Account calculations: uses
src/components/Accounts.jsx - Accounts → Account editor: renders
src/components/Accounts.jsx - Bills → Bill calculations: uses
src/components/Bills.jsx - Bills → Account editor: renders
src/components/Bills.jsx - Debt tracking → Debt calculations: uses
src/components/Debts.jsx - Debt tracking → Account calculations: uses
src/components/Debts.jsx - Debt tracking → Bill calculations: uses
src/components/Debts.jsx - Debt tracking → Recurring schedules: uses
src/components/Debts.jsx - Debt tracking → Account editor: renders
src/components/Debts.jsx - Categories → Category state: uses
src/components/CategoryManager.jsx - Categories → Category icons: uses
src/components/CategoryManager.jsx - Category state → Workspace access: uses
src/hooks/useCategories.js - Category state → Category icons: uses
src/hooks/useCategories.js - Income planning → Income calculations: uses
src/components/IncomePlanner.jsx - Income calculations → Recurring schedules: uses
src/utils/incomePlans.js - Income calculations → Bill calculations: uses
src/utils/incomePlans.js - Income calculations → Debt calculations: uses
src/utils/incomePlans.js - Financial app → Recurring schedules: applies schedules
src/App.jsx - Workspace access → Browser storage: accesses
src/hooks/useWorkspace.js - Cloud sync → Supabase service: uses
src/components/CloudSync.jsx - Cloud sync → Browser storage: syncs data
README.md - Financial app → Cloud sync: offers sync
README.md - Data backup → Browser storage: backs up data
README.md