# aeknard-sieghart/financial-tracker architecture

> Architecture diagram of the GitHub repository aeknard-sieghart/financial-tracker, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aeknard-sieghart/financial-tracker
- Repository: https://github.com/aeknard-sieghart/financial-tracker

## Overview

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: [`src/App.jsx`](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/App.jsx) (Financial app), [`src/components/Sidebar.jsx`](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Sidebar.jsx) (Finance navigation), [`src/components/Debts.jsx`](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Debts.jsx) (Debt tracking), [`src/utils/incomePlans.js`](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/incomePlans.js) (Income calculations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_app["Financial app<br/>[App.jsx]"]
  node_workspace["Workspace shell<br/>[WorkspaceRoot.jsx]"]
  node_sidebar["Finance navigation<br/>[Sidebar.jsx]"]
end

subgraph group_finance["Finance management"]
  node_transactions["Transactions"]
  node_accounts["Accounts<br/>[Accounts.jsx]"]
  node_account_editor["Account editor"]
  node_account_rules["Account calculations<br/>[accounts.js]"]
  node_bills["Bills<br/>[Bills.jsx]"]
  node_bill_rules["Bill calculations<br/>[bills.js]"]
  node_debts["Debt tracking<br/>[Debts.jsx]"]
  node_debt_rules["Debt calculations<br/>[debts.js]"]
  node_categories["Categories"]
  node_category_state["Category state<br/>[useCategories.js]"]
  node_category_icons["Category icons<br/>[categoryIcons.js]"]
  node_recurring["Recurring schedules<br/>[recurring.js]"]
end

subgraph group_insights["Planning and review"]
  node_income["Income planning<br/>[IncomePlanner.jsx]"]
  node_income_rules["Income calculations<br/>[incomePlans.js]"]
  node_savings["Savings goals<br/>[SavingsGoals.jsx]"]
  node_dashboard["Dashboard snapshot"]
  node_charts["Charts and insights<br/>[Charts.jsx]"]
  node_budgets["Budgets<br/>[BudgetManager.jsx]"]
end

subgraph group_platform["Storage and sync"]
  node_storage["Workspace storage"]
  node_workspace_hook["Workspace access<br/>[useWorkspace.js]"]
  node_cloud["Cloud sync<br/>[CloudSync.jsx]"]
  node_supabase["Supabase service<br/>[supabase.js]"]
  node_backup["Data backup<br/>[DataBackup.jsx]"]
  node_browser_store[("Browser storage")]
end

node_user(("User"))

node_user -->|"uses"| node_workspace
node_workspace -.->|"renders"| node_app
node_app -->|"renders"| node_sidebar
node_app -.->|"renders"| node_transactions
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_charts
node_app -->|"renders"| node_savings
node_app -->|"renders"| node_debts
node_app -->|"renders"| node_income
node_sidebar -->|"opens"| node_transactions
node_sidebar -->|"opens"| node_accounts
node_sidebar -->|"opens"| node_bills
node_sidebar -->|"opens"| node_debts
node_sidebar -->|"opens"| node_categories
node_sidebar -->|"opens"| node_budgets
node_accounts -->|"uses"| node_account_rules
node_accounts -->|"renders"| node_account_editor
node_bills -->|"uses"| node_bill_rules
node_bills -->|"renders"| node_account_editor
node_debts -->|"uses"| node_debt_rules
node_debts -->|"uses"| node_account_rules
node_debts -->|"uses"| node_bill_rules
node_debts -->|"uses"| node_recurring
node_debts -->|"renders"| node_account_editor
node_categories -->|"uses"| node_category_state
node_categories -->|"uses"| node_category_icons
node_category_state -->|"uses"| node_workspace_hook
node_category_state -->|"uses"| node_category_icons
node_income -->|"uses"| node_income_rules
node_income_rules -->|"uses"| node_recurring
node_income_rules -->|"uses"| node_bill_rules
node_income_rules -->|"uses"| node_debt_rules
node_app -->|"applies schedules"| node_recurring
node_workspace_hook -->|"accesses"| node_browser_store
node_cloud -->|"uses"| node_supabase
node_cloud -.->|"syncs data"| node_browser_store
node_app -.->|"offers sync"| node_cloud
node_backup -.->|"backs up data"| node_browser_store

click node_app "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/App.jsx"
click node_workspace "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/WorkspaceRoot.jsx"
click node_sidebar "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Sidebar.jsx"
click node_transactions "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/TransactionForm.jsx"
click node_accounts "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Accounts.jsx"
click node_account_editor "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/AccountEditorSurface.jsx"
click node_account_rules "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/accounts.js"
click node_bills "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Bills.jsx"
click node_bill_rules "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/bills.js"
click node_debts "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Debts.jsx"
click node_debt_rules "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/debts.js"
click node_categories "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/CategoryManager.jsx"
click node_category_state "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/hooks/useCategories.js"
click node_category_icons "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/constants/categoryIcons.js"
click node_recurring "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/recurring.js"
click node_income "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/IncomePlanner.jsx"
click node_income_rules "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/incomePlans.js"
click node_savings "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/SavingsGoals.jsx"
click node_dashboard "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/DashboardSnapshot.jsx"
click node_charts "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Charts.jsx"
click node_budgets "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/BudgetManager.jsx"
click node_storage "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/workspaceStorage.js"
click node_workspace_hook "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/hooks/useWorkspace.js"
click node_cloud "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/CloudSync.jsx"
click node_supabase "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/lib/supabase.js"
click node_backup "https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/DataBackup.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_workspace,node_sidebar,node_user toneBlue
class node_transactions,node_accounts,node_account_editor,node_account_rules,node_bills,node_bill_rules,node_debts,node_debt_rules,node_categories,node_category_state,node_category_icons,node_recurring toneAmber
class node_income,node_income_rules,node_savings,node_dashboard,node_charts,node_budgets toneMint
class node_storage,node_workspace_hook,node_cloud,node_supabase,node_backup,node_browser_store toneRose
```

## Components

### Application flow

- [Financial app](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/App.jsx): `src/App.jsx`
- [Workspace shell](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/WorkspaceRoot.jsx): `src/components/WorkspaceRoot.jsx`
- [Finance navigation](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`

### Finance management

- [Transactions](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/TransactionForm.jsx): `src/components/TransactionForm.jsx`
- [Accounts](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Accounts.jsx): `src/components/Accounts.jsx`
- [Account editor](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/AccountEditorSurface.jsx): `src/components/AccountEditorSurface.jsx`
- [Account calculations](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/accounts.js): `src/utils/accounts.js`
- [Bills](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Bills.jsx): `src/components/Bills.jsx`
- [Bill calculations](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/bills.js): `src/utils/bills.js`
- [Debt tracking](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Debts.jsx): `src/components/Debts.jsx`
- [Debt calculations](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/debts.js): `src/utils/debts.js`
- [Categories](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/CategoryManager.jsx): `src/components/CategoryManager.jsx`
- [Category state](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/hooks/useCategories.js): `src/hooks/useCategories.js`
- [Category icons](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/constants/categoryIcons.js): `src/constants/categoryIcons.js`
- [Recurring schedules](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/recurring.js): `src/utils/recurring.js`

### Planning and review

- [Income planning](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/IncomePlanner.jsx): `src/components/IncomePlanner.jsx`
- [Income calculations](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/incomePlans.js): `src/utils/incomePlans.js`
- [Savings goals](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/SavingsGoals.jsx): `src/components/SavingsGoals.jsx`
- [Dashboard snapshot](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/DashboardSnapshot.jsx): `src/components/DashboardSnapshot.jsx`
- [Charts and insights](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/Charts.jsx): `src/components/Charts.jsx`
- [Budgets](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/BudgetManager.jsx): `src/components/BudgetManager.jsx`

### Storage and sync

- [Workspace storage](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/utils/workspaceStorage.js): `src/utils/workspaceStorage.js`
- [Workspace access](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/hooks/useWorkspace.js): `src/hooks/useWorkspace.js`
- [Cloud sync](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/CloudSync.jsx): `src/components/CloudSync.jsx`
- [Supabase service](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/lib/supabase.js): `src/lib/supabase.js`
- [Data backup](https://github.com/aeknard-sieghart/financial-tracker/blob/main/src/components/DataBackup.jsx): `src/components/DataBackup.jsx`
- **Browser storage**

### Other components

- **User**

## Connections

- User → Workspace shell: uses (evidence: `README.md`)
- Workspace shell → Financial app: renders
- Financial app → Finance navigation: renders (evidence: `src/App.jsx`)
- Financial app → Transactions: renders (evidence: `src/App.jsx`)
- Financial app → Dashboard snapshot: renders (evidence: `src/App.jsx`)
- Financial app → Charts and insights: renders (evidence: `src/App.jsx`)
- Financial app → Savings goals: renders (evidence: `src/App.jsx`)
- Financial app → Debt tracking: renders (evidence: `src/App.jsx`)
- Financial app → Income planning: renders (evidence: `src/App.jsx`)
- Finance navigation → Transactions: opens (evidence: `src/components/Sidebar.jsx`)
- Finance navigation → Accounts: opens (evidence: `src/components/Sidebar.jsx`)
- Finance navigation → Bills: opens (evidence: `src/components/Sidebar.jsx`)
- Finance navigation → Debt tracking: opens (evidence: `src/components/Sidebar.jsx`)
- Finance navigation → Categories: opens (evidence: `src/components/Sidebar.jsx`)
- Finance navigation → Budgets: opens (evidence: `src/components/Sidebar.jsx`)
- Accounts → Account calculations: uses (evidence: `src/components/Accounts.jsx`)
- Accounts → Account editor: renders (evidence: `src/components/Accounts.jsx`)
- Bills → Bill calculations: uses (evidence: `src/components/Bills.jsx`)
- Bills → Account editor: renders (evidence: `src/components/Bills.jsx`)
- Debt tracking → Debt calculations: uses (evidence: `src/components/Debts.jsx`)
- Debt tracking → Account calculations: uses (evidence: `src/components/Debts.jsx`)
- Debt tracking → Bill calculations: uses (evidence: `src/components/Debts.jsx`)
- Debt tracking → Recurring schedules: uses (evidence: `src/components/Debts.jsx`)
- Debt tracking → Account editor: renders (evidence: `src/components/Debts.jsx`)
- Categories → Category state: uses (evidence: `src/components/CategoryManager.jsx`)
- Categories → Category icons: uses (evidence: `src/components/CategoryManager.jsx`)
- Category state → Workspace access: uses (evidence: `src/hooks/useCategories.js`)
- Category state → Category icons: uses (evidence: `src/hooks/useCategories.js`)
- Income planning → Income calculations: uses (evidence: `src/components/IncomePlanner.jsx`)
- Income calculations → Recurring schedules: uses (evidence: `src/utils/incomePlans.js`)
- Income calculations → Bill calculations: uses (evidence: `src/utils/incomePlans.js`)
- Income calculations → Debt calculations: uses (evidence: `src/utils/incomePlans.js`)
- Financial app → Recurring schedules: applies schedules (evidence: `src/App.jsx`)
- Workspace access → Browser storage: accesses (evidence: `src/hooks/useWorkspace.js`)
- Cloud sync → Supabase service: uses (evidence: `src/components/CloudSync.jsx`)
- Cloud sync → Browser storage: syncs data (evidence: `README.md`)
- Financial app → Cloud sync: offers sync (evidence: `README.md`)
- Data backup → Browser storage: backs up data (evidence: `README.md`)