# idontcoreqq-tech/salary architecture

> Architecture diagram of the GitHub repository idontcoreqq-tech/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/idontcoreqq-tech/salary
- Repository: https://github.com/idontcoreqq-tech/salary

## Overview

This is a browser-based personal salary and expense tracker. Users add income or expense entries, review and filter transaction history, and view a financial overview; the service layer persists entries in localStorage and computes balances and summary data. The sampled dashboard and history code show their data paths. Analytics and chart components are present in the tree, but their wiring was not sampled, so those links are not inferred.

Main entry points: [`src/pages/Dashboard/Dashboard.jsx`](https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/Dashboard/Dashboard.jsx) (Dashboard), [`src/pages/History/History.jsx`](https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/History/History.jsx) (Transaction history), [`src/App.jsx`](https://github.com/idontcoreqq-tech/salary/blob/master/src/App.jsx) (App routes), [`src/services/summaryService.js`](https://github.com/idontcoreqq-tech/salary/blob/master/src/services/summaryService.js) (Summary service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application navigation"]
  node_app["App routes<br/>[App.jsx]"]
  node_layout["Shared layout<br/>[Layout.jsx]"]
end

subgraph group_transactions["Transaction workflows"]
  node_history["Transaction history<br/>[History.jsx]"]
  node_transaction_list["Transaction list"]
  node_form["Transaction form"]
  node_modal["Modal<br/>[Modal.jsx]"]
  node_empty["Empty state<br/>[EmptyState.jsx]"]
end

subgraph group_insights["Financial views"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_analytics["Analytics<br/>[Analytics.jsx]"]
  node_balance["Balance cards<br/>[BalanceCard.jsx]"]
  node_bar_chart["Bar chart<br/>[BarChart.jsx]"]
  node_pie_chart["Pie chart<br/>[PieChart.jsx]"]
end

subgraph group_data["Persistence and summaries"]
  node_summary["Summary service<br/>[summaryService.js]"]
  node_income["Income service<br/>[incomeService.js]"]
  node_expense["Expense service<br/>[expenseService.js]"]
  node_storage["Storage helpers<br/>[storage.js]"]
end

node_user(("User"))
node_local_storage[("Browser localStorage")]

node_user -->|"opens"| node_app
node_app -->|"renders"| node_layout
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_history
node_app -->|"routes to"| node_analytics
node_dashboard -->|"requests totals"| node_summary
node_dashboard -->|"requests recent entries"| node_summary
node_dashboard -->|"renders"| node_balance
node_dashboard -->|"renders"| node_transaction_list
node_dashboard -->|"renders"| node_modal
node_dashboard -->|"renders"| node_form
node_dashboard -->|"adds income"| node_income
node_dashboard -->|"adds expense"| node_expense
node_history -->|"loads entries"| node_summary
node_history -->|"renders"| node_transaction_list
node_history -->|"renders"| node_modal
node_history -->|"renders"| node_form
node_history -->|"writes income"| node_income
node_history -->|"writes expense"| node_expense
node_transaction_list -->|"renders when empty"| node_empty
node_form -->|"submits entry"| node_history
node_summary -->|"reads income"| node_income
node_summary -->|"reads expenses"| node_expense
node_income -->|"reads and writes"| node_storage
node_expense -->|"reads and writes"| node_storage
node_storage -->|"reads and writes"| node_local_storage

click node_app "https://github.com/idontcoreqq-tech/salary/blob/master/src/App.jsx"
click node_layout "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/Layout/Layout.jsx"
click node_dashboard "https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/Dashboard/Dashboard.jsx"
click node_history "https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/History/History.jsx"
click node_analytics "https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/Analytics/Analytics.jsx"
click node_balance "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/BalanceCard/BalanceCard.jsx"
click node_transaction_list "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/TransactionList/TransactionList.jsx"
click node_form "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/TransactionForm/TransactionForm.jsx"
click node_modal "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/Modal/Modal.jsx"
click node_empty "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/EmptyState/EmptyState.jsx"
click node_bar_chart "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/BarChart/BarChart.jsx"
click node_pie_chart "https://github.com/idontcoreqq-tech/salary/blob/master/src/components/PieChart/PieChart.jsx"
click node_summary "https://github.com/idontcoreqq-tech/salary/blob/master/src/services/summaryService.js"
click node_income "https://github.com/idontcoreqq-tech/salary/blob/master/src/services/incomeService.js"
click node_expense "https://github.com/idontcoreqq-tech/salary/blob/master/src/services/expenseService.js"
click node_storage "https://github.com/idontcoreqq-tech/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_user toneBlue
class node_history,node_transaction_list,node_form,node_modal,node_empty,node_local_storage toneAmber
class node_dashboard,node_analytics,node_balance,node_bar_chart,node_pie_chart toneMint
class node_summary,node_income,node_expense,node_storage toneRose
```

## Components

### Application navigation

- [App routes](https://github.com/idontcoreqq-tech/salary/blob/master/src/App.jsx): `src/App.jsx`
- [Shared layout](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/Layout/Layout.jsx): `src/components/Layout/Layout.jsx`

### Transaction workflows

- [Transaction history](https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/History/History.jsx): `src/pages/History/History.jsx`
- [Transaction list](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/TransactionList/TransactionList.jsx): `src/components/TransactionList/TransactionList.jsx`
- [Transaction form](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/TransactionForm/TransactionForm.jsx): `src/components/TransactionForm/TransactionForm.jsx`
- [Modal](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/Modal/Modal.jsx): `src/components/Modal/Modal.jsx`
- [Empty state](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/EmptyState/EmptyState.jsx): `src/components/EmptyState/EmptyState.jsx`

### Financial views

- [Dashboard](https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/Dashboard/Dashboard.jsx): `src/pages/Dashboard/Dashboard.jsx`
- [Analytics](https://github.com/idontcoreqq-tech/salary/blob/master/src/pages/Analytics/Analytics.jsx): `src/pages/Analytics/Analytics.jsx`
- [Balance cards](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/BalanceCard/BalanceCard.jsx): `src/components/BalanceCard/BalanceCard.jsx`
- [Bar chart](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/BarChart/BarChart.jsx): `src/components/BarChart/BarChart.jsx`
- [Pie chart](https://github.com/idontcoreqq-tech/salary/blob/master/src/components/PieChart/PieChart.jsx): `src/components/PieChart/PieChart.jsx`

### Persistence and summaries

- [Summary service](https://github.com/idontcoreqq-tech/salary/blob/master/src/services/summaryService.js): `src/services/summaryService.js`
- [Income service](https://github.com/idontcoreqq-tech/salary/blob/master/src/services/incomeService.js): `src/services/incomeService.js`
- [Expense service](https://github.com/idontcoreqq-tech/salary/blob/master/src/services/expenseService.js): `src/services/expenseService.js`
- [Storage helpers](https://github.com/idontcoreqq-tech/salary/blob/master/src/services/storage.js): `src/services/storage.js`

### Other components

- **User**
- **Browser localStorage**

## Connections

- User → App routes: opens
- App routes → Shared layout: renders
- App routes → Dashboard: routes to
- App routes → Transaction history: routes to
- App routes → Analytics: routes to
- Dashboard → Summary service: requests totals
- Dashboard → Summary service: requests recent entries
- Dashboard → Balance cards: renders
- Dashboard → Transaction list: renders
- Dashboard → Modal: renders
- Dashboard → Transaction form: renders
- Dashboard → Income service: adds income
- Dashboard → Expense service: adds expense
- Transaction history → Summary service: loads entries
- Transaction history → Transaction list: renders
- Transaction history → Modal: renders
- Transaction history → Transaction form: renders
- Transaction history → Income service: writes income
- Transaction history → Expense service: writes expense
- Transaction list → Empty state: renders when empty
- Transaction form → Transaction history: submits entry
- Summary service → Income service: reads income
- Summary service → Expense service: reads expenses
- Income service → Storage helpers: reads and writes
- Expense service → Storage helpers: reads and writes
- Storage helpers → Browser localStorage: reads and writes