zyruspogi2006/remix-of-bright-bills-and-budgets

How zyruspogi2006/remix-of-bright-bills-and-budgets works

Pennywise is a browser-based personal budgeting app. Users navigate from the overview to manage transactions, budgets, savings goals, bills, reports, and settings; app state is loaded and saved in localStorage. The graph reflects documented features and shown imports/calls. Several route implementations are unsampled, so their internal interactions are represented only where the source index or README supports them.

Main entry points: store.tsx App state · finance.ts Finance calculations · TransactionDialog.tsx Transaction dialog · AppShell.tsx Navigation shell

Components 18

App experience

Application root src/routes/__root.tsx
Navigation shell src/components/pw/AppShell.tsx

Finance features

Monthly overview src/routes/index.tsx
Transactions src/routes/transactions.tsx
Transaction dialog src/components/pw/TransactionDialog.tsx
Budgets src/routes/budgets.tsx
Savings goals src/routes/goals.tsx
Bills src/routes/bills.tsx
Reports and exports src/routes/reports.tsx
Settings and backup src/routes/settings.tsx

State and persistence

App state src/lib/store.tsx
Local persistence src/lib/storage.ts
Demo data src/lib/demo.ts

Shared foundations

Finance calculations src/lib/finance.ts
Finance data types src/lib/types.ts
Shared UI components src/components/pw/shared.tsx
UI primitives src/components/ui

Other components

Everyday user

Connections 30

Everyday user → Application root: opens app
Application root → Navigation shell: renders shell src/routes/__root.tsx
Navigation shell → Transaction dialog: opens dialog src/components/pw/AppShell.tsx
Navigation shell → App state: reads app state src/components/pw/AppShell.tsx
Monthly overview → App state: reads app state src/routes/index.tsx
Monthly overview → Finance calculations: uses calculations src/routes/index.tsx
Transactions → App state: uses app state src/routes/transactions.tsx
Transactions → Finance calculations: uses calculations src/routes/transactions.tsx
Transactions → Transaction dialog: uses dialog src/routes/transactions.tsx
Transaction dialog → App state: uses app state src/components/pw/TransactionDialog.tsx
Budgets → App state: uses app state src/routes/budgets.tsx
Budgets → Finance calculations: uses calculations src/routes/budgets.tsx
Savings goals → App state: uses app state src/routes/goals.tsx
Savings goals → Finance calculations: uses calculations src/routes/goals.tsx
Bills → App state: uses app state src/routes/bills.tsx
Bills → Finance calculations: uses calculations src/routes/bills.tsx
Reports and exports → App state: uses app state src/routes/reports.tsx
Reports and exports → Finance calculations: uses calculations src/routes/reports.tsx
Settings and backup → App state: uses app state src/routes/settings.tsx
Settings and backup → Local persistence: validates backup src/routes/settings.tsx
App state → Local persistence: loads and saves src/lib/store.tsx
App state → Demo data: manages demo data src/lib/store.tsx
Local persistence → Demo data: seeds fresh data src/lib/storage.ts
Local persistence → Finance data types: validates data src/lib/storage.ts
App state → Finance calculations: uses date helpers src/lib/store.tsx
Finance calculations → Finance data types: uses domain types src/lib/finance.ts
Application root → App state: provides state src/routes/__root.tsx
Transaction dialog → Shared UI components: uses form helpers src/components/pw/TransactionDialog.tsx
Navigation shell → UI primitives: uses controls src/components/pw/AppShell.tsx
Transaction dialog → UI primitives: uses controls src/components/pw/TransactionDialog.tsx

Drawn by GitDiagram on November 13, 2026 from the repository's file tree, README and source files. Read as Markdown ·