# ddetrit91/salary architecture

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

- Interactive diagram: https://gitdiagram.com/ddetrit91/salary
- Repository: https://github.com/ddetrit91/salary
- Video tour (about a minute): https://gitdiagram.com/ddetrit91/salary/video

## Overview

This is a browser-based personal income-and-expense tracker: users record transactions, review balances and recent activity, browse and edit filtered history, and inspect analytics. Transaction services persist separate income and expense collections in browser local storage; a summary service derives balances, category totals, monthly summaries, and recent transactions. The sampled sources establish the dashboard and history wiring. Analytics modules are identified from the tree, but their internal wiring was not sampled.

Main entry points: [`src/pages/Dashboard/Dashboard.jsx`](https://github.com/ddetrit91/salary/blob/master/src/pages/Dashboard/Dashboard.jsx) (Dashboard), [`src/pages/History/History.jsx`](https://github.com/ddetrit91/salary/blob/master/src/pages/History/History.jsx) (Transaction History), [`src/components/Layout/Layout.jsx`](https://github.com/ddetrit91/salary/blob/master/src/components/Layout/Layout.jsx) (App Layout), [`src/pages/Analytics/Analytics.jsx`](https://github.com/ddetrit91/salary/blob/master/src/pages/Analytics/Analytics.jsx) (Analytics Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app_ui["Application UI"]
  node_app["Router<br/>[App.jsx]"]
  node_layout["App Layout<br/>[Layout.jsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_history["Transaction History<br/>[History.jsx]"]
  node_analytics["Analytics Page<br/>[Analytics.jsx]"]
  node_balance_card["Balance Cards<br/>[BalanceCard.jsx]"]
end

subgraph group_transactions["Transaction Management"]
  node_form["Transaction Form"]
  node_list["Transaction List"]
  node_income["Income Service<br/>[incomeService.js]"]
  node_expense["Expense Service<br/>[expenseService.js]"]
end

subgraph group_insights["Financial Insights"]
  node_bar_chart["Monthly Chart<br/>[BarChart.jsx]"]
  node_pie_chart["Category Chart<br/>[PieChart.jsx]"]
  node_summary["Summary Service<br/>[summaryService.js]"]
end

subgraph group_persistence["Local Persistence"]
  node_storage["Storage Helpers<br/>[storage.js]"]
  node_browser_storage[("Browser Storage")]
end

node_user(("User"))

node_user -->|"opens"| node_app
node_app -->|"routes through"| node_layout
node_layout -->|"renders route"| node_dashboard
node_layout -->|"renders route"| node_history
node_layout -->|"renders route"| node_analytics
node_dashboard -->|"requests balances"| node_summary
node_summary -->|"reads income"| node_income
node_summary -->|"reads expenses"| node_expense
node_dashboard -->|"renders"| node_balance_card
node_dashboard -->|"renders recent"| node_list
node_dashboard -->|"opens for entry"| node_form
node_dashboard -->|"adds income"| node_income
node_dashboard -->|"adds expense"| node_expense
node_history -->|"loads and edits"| node_income
node_history -->|"loads and edits"| node_expense
node_history -->|"renders filtered"| node_list
node_history -->|"opens for editing"| node_form
node_income -->|"reads and writes"| node_storage
node_expense -->|"reads and writes"| node_storage
node_storage -->|"serializes data"| node_browser_storage
node_analytics -->|"requests summaries"| node_summary
node_analytics -->|"renders monthly data"| node_bar_chart
node_analytics -->|"renders category data"| node_pie_chart

click node_app "https://github.com/ddetrit91/salary/blob/master/src/App.jsx"
click node_layout "https://github.com/ddetrit91/salary/blob/master/src/components/Layout/Layout.jsx"
click node_dashboard "https://github.com/ddetrit91/salary/blob/master/src/pages/Dashboard/Dashboard.jsx"
click node_history "https://github.com/ddetrit91/salary/blob/master/src/pages/History/History.jsx"
click node_analytics "https://github.com/ddetrit91/salary/blob/master/src/pages/Analytics/Analytics.jsx"
click node_form "https://github.com/ddetrit91/salary/blob/master/src/components/TransactionForm/TransactionForm.jsx"
click node_list "https://github.com/ddetrit91/salary/blob/master/src/components/TransactionList/TransactionList.jsx"
click node_balance_card "https://github.com/ddetrit91/salary/blob/master/src/components/BalanceCard/BalanceCard.jsx"
click node_bar_chart "https://github.com/ddetrit91/salary/blob/master/src/components/BarChart/BarChart.jsx"
click node_pie_chart "https://github.com/ddetrit91/salary/blob/master/src/components/PieChart/PieChart.jsx"
click node_summary "https://github.com/ddetrit91/salary/blob/master/src/services/summaryService.js"
click node_income "https://github.com/ddetrit91/salary/blob/master/src/services/incomeService.js"
click node_expense "https://github.com/ddetrit91/salary/blob/master/src/services/expenseService.js"
click node_storage "https://github.com/ddetrit91/salary/blob/master/src/services/storage.js"

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_layout,node_dashboard,node_history,node_analytics,node_balance_card,node_user toneBlue
class node_form,node_list,node_income,node_expense toneAmber
class node_bar_chart,node_pie_chart,node_summary toneMint
class node_storage,node_browser_storage toneRose
```

## Components

### Application UI

- [Router](https://github.com/ddetrit91/salary/blob/master/src/App.jsx): `src/App.jsx`
- [App Layout](https://github.com/ddetrit91/salary/blob/master/src/components/Layout/Layout.jsx): `src/components/Layout/Layout.jsx`
- [Dashboard](https://github.com/ddetrit91/salary/blob/master/src/pages/Dashboard/Dashboard.jsx): `src/pages/Dashboard/Dashboard.jsx`
- [Transaction History](https://github.com/ddetrit91/salary/blob/master/src/pages/History/History.jsx): `src/pages/History/History.jsx`
- [Analytics Page](https://github.com/ddetrit91/salary/blob/master/src/pages/Analytics/Analytics.jsx): `src/pages/Analytics/Analytics.jsx`
- [Balance Cards](https://github.com/ddetrit91/salary/blob/master/src/components/BalanceCard/BalanceCard.jsx): `src/components/BalanceCard/BalanceCard.jsx`

### Transaction Management

- [Transaction Form](https://github.com/ddetrit91/salary/blob/master/src/components/TransactionForm/TransactionForm.jsx): `src/components/TransactionForm/TransactionForm.jsx`
- [Transaction List](https://github.com/ddetrit91/salary/blob/master/src/components/TransactionList/TransactionList.jsx): `src/components/TransactionList/TransactionList.jsx`
- [Income Service](https://github.com/ddetrit91/salary/blob/master/src/services/incomeService.js): `src/services/incomeService.js`
- [Expense Service](https://github.com/ddetrit91/salary/blob/master/src/services/expenseService.js): `src/services/expenseService.js`

### Financial Insights

- [Monthly Chart](https://github.com/ddetrit91/salary/blob/master/src/components/BarChart/BarChart.jsx): `src/components/BarChart/BarChart.jsx`
- [Category Chart](https://github.com/ddetrit91/salary/blob/master/src/components/PieChart/PieChart.jsx): `src/components/PieChart/PieChart.jsx`
- [Summary Service](https://github.com/ddetrit91/salary/blob/master/src/services/summaryService.js): `src/services/summaryService.js`

### Local Persistence

- [Storage Helpers](https://github.com/ddetrit91/salary/blob/master/src/services/storage.js): `src/services/storage.js`
- **Browser Storage**

### Other components

- **User**

## Connections

- User → Router: opens
- Router → App Layout: routes through
- App Layout → Dashboard: renders route
- App Layout → Transaction History: renders route
- App Layout → Analytics Page: renders route
- Dashboard → Summary Service: requests balances
- Summary Service → Income Service: reads income
- Summary Service → Expense Service: reads expenses
- Dashboard → Balance Cards: renders
- Dashboard → Transaction List: renders recent
- Dashboard → Transaction Form: opens for entry
- Dashboard → Income Service: adds income
- Dashboard → Expense Service: adds expense
- Transaction History → Income Service: loads and edits
- Transaction History → Expense Service: loads and edits
- Transaction History → Transaction List: renders filtered
- Transaction History → Transaction Form: opens for editing
- Income Service → Storage Helpers: reads and writes
- Expense Service → Storage Helpers: reads and writes
- Storage Helpers → Browser Storage: serializes data
- Analytics Page → Summary Service: requests summaries
- Analytics Page → Monthly Chart: renders monthly data
- Analytics Page → Category Chart: renders category data