# hunter547/max-payout-calculator architecture

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

- Interactive diagram: https://gitdiagram.com/hunter547/max-payout-calculator
- Repository: https://github.com/hunter547/max-payout-calculator

## Overview

Max Payout Calculator is a React app that guides a trader through account setup and payout-cycle inputs, then calculates a payout plan and presents it on a dashboard. The README documents two distinct data-entry paths—point-in-time figures and a day-by-day P&L ledger—plus firm-specific rules, payout schedules, account switching, and chart interactions. The graph uses documented behavior and sampled imports; wiring for unsampled modules is shown only where the README supports it.

Main entry points: [`src/App.tsx`](https://github.com/hunter547/max-payout-calculator/blob/main/src/App.tsx) (App orchestrator), [`src/components/Walkthrough.tsx`](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/Walkthrough.tsx) (Setup walkthrough), [`src/lib/setup.ts`](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/setup.ts) (Setup model), [`src/components/PnlChart.tsx`](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/PnlChart.tsx) (P&L chart)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_setup["Setup and accounts"]
  node_walkthrough["Setup walkthrough<br/>[Walkthrough.tsx]"]
  node_setupmodel["Setup model<br/>[setup.ts]"]
  node_accounts["Firm templates<br/>[accounts.ts]"]
  node_schedule["Payout schedule"]
  node_curated["Plan controls"]
end

subgraph group_domain["Payout calculation"]
  node_ledgerlib["Ledger utilities<br/>[ledger.ts]"]
  node_calculator["Payout calculator<br/>[calc.ts]"]
  node_plotview["Chart window math<br/>[plotView.ts]"]
end

subgraph group_dashboard["Dashboard"]
  node_ledgerui["Day ledger UI<br/>[Ledger.tsx]"]
  node_chart["P&amp;L chart<br/>[PnlChart.tsx]"]
  node_accountpanel["Account panel<br/>[AccountPanel.tsx]"]
  node_switcher["Account switcher"]
  node_payoutflow["Payout flow<br/>[PayoutFlow.tsx]"]
end

subgraph group_state["Application state"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App orchestrator<br/>[App.tsx]"]
  node_portfolio["Account state<br/>[portfolio.ts]"]
end

node_trader(("Trader"))
node_localstorage[("Browser storage")]

node_entry -->|"renders"| node_app
node_trader -->|"enters setup"| node_walkthrough
node_app -->|"shows setup"| node_walkthrough
node_walkthrough -->|"gets firm rules"| node_accounts
node_walkthrough -->|"builds setup"| node_setupmodel
node_setupmodel -->|"looks up templates"| node_accounts
node_walkthrough -->|"collects daily entries"| node_ledgerui
node_walkthrough -->|"collects schedule"| node_schedule
node_walkthrough -->|"collects strategy"| node_curated
node_app -->|"prepares inputs"| node_setupmodel
node_setupmodel -->|"summarizes ledger"| node_ledgerlib
node_app -->|"summarizes days"| node_ledgerlib
node_app -->|"calculates plan"| node_calculator
node_app -->|"manages account state"| node_portfolio
node_portfolio -->|"persists state"| node_localstorage
node_app -->|"supplies plan and days"| node_chart
node_chart -->|"clamps chart window"| node_plotview
node_app -->|"shows ledger"| node_ledgerui
node_app -->|"shows account rules"| node_accountpanel
node_app -->|"shows account choices"| node_switcher
node_app -->|"shows payout status"| node_payoutflow
node_trader -->|"reviews dashboard"| node_app

click node_entry "https://github.com/hunter547/max-payout-calculator/blob/main/src/main.tsx"
click node_app "https://github.com/hunter547/max-payout-calculator/blob/main/src/App.tsx"
click node_walkthrough "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/Walkthrough.tsx"
click node_setupmodel "https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/setup.ts"
click node_accounts "https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/accounts.ts"
click node_schedule "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/ScheduleControls.tsx"
click node_curated "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/CuratedControls.tsx"
click node_ledgerui "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/Ledger.tsx"
click node_ledgerlib "https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/ledger.ts"
click node_calculator "https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/calc.ts"
click node_portfolio "https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/portfolio.ts"
click node_chart "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/PnlChart.tsx"
click node_plotview "https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/plotView.ts"
click node_accountpanel "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/AccountPanel.tsx"
click node_switcher "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/AccountSwitcher.tsx"
click node_payoutflow "https://github.com/hunter547/max-payout-calculator/blob/main/src/components/PayoutFlow.tsx"

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_walkthrough,node_setupmodel,node_accounts,node_schedule,node_curated toneBlue
class node_ledgerlib,node_calculator,node_plotview,node_localstorage toneAmber
class node_ledgerui,node_chart,node_accountpanel,node_switcher,node_payoutflow toneMint
class node_entry,node_app,node_portfolio toneRose
class node_trader toneIndigo
```

## Components

### Setup and accounts

- [Setup walkthrough](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/Walkthrough.tsx): `src/components/Walkthrough.tsx`
- [Setup model](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/setup.ts): `src/lib/setup.ts`
- [Firm templates](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/accounts.ts): `src/lib/accounts.ts`
- [Payout schedule](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/ScheduleControls.tsx): `src/components/ScheduleControls.tsx`
- [Plan controls](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/CuratedControls.tsx): `src/components/CuratedControls.tsx`

### Payout calculation

- [Ledger utilities](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/ledger.ts): `src/lib/ledger.ts`
- [Payout calculator](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/calc.ts): `src/lib/calc.ts`
- [Chart window math](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/plotView.ts): `src/lib/plotView.ts`

### Dashboard

- [Day ledger UI](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/Ledger.tsx): `src/components/Ledger.tsx`
- [P&L chart](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/PnlChart.tsx): `src/components/PnlChart.tsx`
- [Account panel](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/AccountPanel.tsx): `src/components/AccountPanel.tsx`
- [Account switcher](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/AccountSwitcher.tsx): `src/components/AccountSwitcher.tsx`
- [Payout flow](https://github.com/hunter547/max-payout-calculator/blob/main/src/components/PayoutFlow.tsx): `src/components/PayoutFlow.tsx`

### Application state

- [React entry](https://github.com/hunter547/max-payout-calculator/blob/main/src/main.tsx): `src/main.tsx`
- [App orchestrator](https://github.com/hunter547/max-payout-calculator/blob/main/src/App.tsx): `src/App.tsx`
- [Account state](https://github.com/hunter547/max-payout-calculator/blob/main/src/lib/portfolio.ts): `src/lib/portfolio.ts`

### Other components

- **Trader**
- **Browser storage**

## Connections

- React entry → App orchestrator: renders
- Trader → Setup walkthrough: enters setup
- App orchestrator → Setup walkthrough: shows setup
- Setup walkthrough → Firm templates: gets firm rules
- Setup walkthrough → Setup model: builds setup
- Setup model → Firm templates: looks up templates
- Setup walkthrough → Day ledger UI: collects daily entries
- Setup walkthrough → Payout schedule: collects schedule
- Setup walkthrough → Plan controls: collects strategy
- App orchestrator → Setup model: prepares inputs
- Setup model → Ledger utilities: summarizes ledger
- App orchestrator → Ledger utilities: summarizes days
- App orchestrator → Payout calculator: calculates plan
- App orchestrator → Account state: manages account state
- Account state → Browser storage: persists state
- App orchestrator → P&L chart: supplies plan and days
- P&L chart → Chart window math: clamps chart window
- App orchestrator → Day ledger UI: shows ledger
- App orchestrator → Account panel: shows account rules
- App orchestrator → Account switcher: shows account choices
- App orchestrator → Payout flow: shows payout status
- Trader → App orchestrator: reviews dashboard