7281b610b5
## What & why The Cashflow "Money Flow" diagram was a bespoke SVG Sankey that laid out nodes and links by hand. It didn't hold up on small screens (fixed 400px min-width, cramped flows) and was ~950 lines of custom geometry to maintain. This replaces it with recharts' `<Sankey>` (already a dependency) inside a `ResponsiveContainer`, letting recharts own the layout. Net **−950 / +515** lines across the component. ## What's kept - Income → **Net** hub → expense flow. - Small-category **"Other"** grouping (`groupSmallCategories`). - Privacy-mode masking on every amount (hub + categories + subcategories). - Click-through to a category's transactions. - Category colors, resolved via `categoryBarColor` (same as the breakdown cards). ## What's new - **Drill-down (expense side):** click an expense category with children to expand its subcategories into their own column; recharts re-lays-out around it. One open at a time, a chevron marks expandable parents, and the expanded parent's label moves onto its bar. Subcategories and childless categories still click through to their transactions. Data comes from the existing `GET /api/cashflow/sankey?...&parent=<id>` endpoint, fetched lazily and reset when the period changes. - **Mobile:** the chart scrolls horizontally with a comfortable min-width (same pattern as the Trend chart) instead of crushing the flows; canvas height grows with the busiest column so labels don't collide. - `align="left"` so an expanded parent's subcategories line up beside it instead of collapsing into the last column and crossing every flow. ## What's dropped (intentional) - The "Other" popover breakdown — the per-category detail already lives in the breakdown cards below the chart. - Income-side drill-down — with the central hub, expanding an income source would split the income column across two depths (visually broken); income categories rarely have children. Income keeps click-through. ## Review Two parallel reviews (technical + bugs/side-effects) ran over the diff. Applied: - **Category colors:** resolve the `CategoryColor` keyword via `categoryBarColor` instead of using it raw as an SVG `fill` — non-CSS keywords (`slate`, `neutral`, `amber`, `rose`) were rendering **black**. (Pre-existing bug carried over from the old chart.) - Skip top-level categories with `amount <= 0` so they don't become stray unlinked nodes. - Keep an expanding parent's label beside its bar until subcategories load (no flicker); collapse again if the fetch fails. - Cap right-side label width so a parent left of an expanded column can't stretch its label across it. - Memoize the cashflow `period` so the drill-down fetch effect doesn't re-run on unrelated re-renders. Dropped (with reason): re-adding the "Other" popover and income drill-down (intentional, above); wrapping aria-labels in `__()` (would add i18n keys, and matches the prior behavior); the recharts node/link prop casts (version is pinned; params are hand-typed to document the fields used). ## Testing - 6 Vitest unit tests (render, "Other" grouping, empty state, drill-down with a mocked fetch, expand affordance, privacy masking) — green. - `tsc --noEmit` clean for the touched files; ESLint + Prettier clean. > **Note on browser QA:** I did not record an automated demo video. The local DB holds real user financial data (won't log in / record), and creating a synthetic test/demo account is currently blocked by pending Spaces migrations in the local DB (`current_space_id` column missing — unrelated to this change). The chart was verified interactively during development (desktop render, mobile layout, drill-down, and the black-color fix). Happy to record a walkthrough if we seed a safe demo account. |
||
|---|---|---|
| .agents/skills | ||
| .claude | ||
| .cursor | ||
| .github | ||
| .opencode/skills | ||
| .pi | ||
| app | ||
| bootstrap | ||
| config | ||
| database | ||
| docker | ||
| docs | ||
| experiments | ||
| lang | ||
| public | ||
| resources | ||
| routes | ||
| screenshots | ||
| scripts | ||
| src/lib/crypto | ||
| storage | ||
| templates/coolify | ||
| tests | ||
| .dockerignore | ||
| .editorconfig | ||
| .env.example | ||
| .env.production.example | ||
| .gitattributes | ||
| .gitignore | ||
| .mcp.json | ||
| .php-cs-fixer.dist.php | ||
| .php-version | ||
| .prettierignore | ||
| .prettierrc | ||
| .release-it.json | ||
| AGENTS.md | ||
| CHANGELOG.md | ||
| CLAUDE.md | ||
| Dockerfile | ||
| Dockerfile.production | ||
| LICENSE.md | ||
| LOCALIZATION.md | ||
| ONBOARDING.md | ||
| README.md | ||
| artisan | ||
| autoresearch-dashboard.md | ||
| autoresearch.jsonl | ||
| autoresearch.md | ||
| autoresearch.sh | ||
| boost.json | ||
| bun.lock | ||
| components.json | ||
| compose.yaml | ||
| composer.json | ||
| composer.lock | ||
| docker-compose.production.yml | ||
| eslint.config.js | ||
| falcode.json | ||
| opencode.json | ||
| package-lock.json | ||
| package.json | ||
| phpstan-baseline.neon | ||
| phpstan.neon | ||
| phpunit.xml | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
| vitest.setup.ts | ||
| whispermoney | ||
| worktree.sh | ||
README.md
Deutsch | Español | français | 日本語 | 한국어 | Português | Русский | 中文
Whisper Money
The most secure way to understand your finances.
Whisper Money is a privacy-first personal finance application that helps you track, categorize, and understand your spending—all while keeping your financial data encrypted and secure.
🎮 Try the Demo: Experience Whisper Money with our demo account - no registration required!
💬 Join our Community: Whether you're a user looking for help or a developer wanting to contribute, we'd love to have you in our Discord server! Share feedback, ask questions, discuss new features, or just hang out with fellow privacy enthusiasts.
Features
- 🔐 Privacy-first — Your data is never shared with third parties. You own it
- 🏦 Bank account management — Track multiple accounts in one place
- 📊 Transaction categorization — Automatic and manual categorization
- 🤖 Automation rules — Set up rules to auto-categorize transactions
- 📈 Financial insights — Understand your spending patterns
Tech Stack
- Backend: Laravel 12, PHP 8.4
- Frontend: React 19, Inertia.js v2, TypeScript
- Styling: Tailwind CSS v4
- Database: MySQL
- Cache/Queue: Redis
- Testing: Pest v4
Running Locally
Quick Start (Recommended)
The easiest way to get started is using our automated setup script:
bash <(curl -fsSL https://whisper.money/setup.sh)
After installation, just visit https://whisper.money.localhost in your browser.
Manual Setup
If you prefer to set up manually:
- Clone the repository:
git clone https://github.com/whisper-money/whisper-money.git
cd whisper-money
- Run the setup script:
whispermoney install
Available Commands
Important: You must run
whispermoney installbefore using any other command. If you skip the install step, commands likestartwill not work.
Once installed, you can use the whispermoney command for common tasks:
# Start all services
whispermoney start
# Stop all services
whispermoney stop
# Upgrade to latest version
whispermoney upgrade
# Interactive menu
whispermoney
Development Server
For active development with hot reloading:
composer run dev
This will concurrently start:
- PHP development server (via Portless HTTPS proxy)
- Queue worker
- Log viewer (Pail)
- Vite dev server
The application will be available at https://dev.whisper.money.localhost. In git worktrees, the branch name is automatically prepended (e.g. https://fix-ui.dev.whisper.money.localhost).
Running with Docker (Production Image)
For testing the production Docker image locally:
- Copy the production environment file:
cp .env.production.example .env
- Start the services:
docker compose -f docker-compose.production.yml up -d
The application will be available at http://localhost:8080.
To use a different port, set APP_PORT:
APP_PORT=3000 docker compose -f docker-compose.production.yml up -d
Deploying to Coolify
Whisper Money can be easily deployed to Coolify using our Docker Compose template.
Quick Deploy
- In Coolify, create a new resource and select Docker Compose
- Choose Empty Compose File as the source
- Paste the contents from our template: 👉 whisper-money.yaml
- Deploy!
The template includes:
- Whisper Money application container
- MySQL 8.0 database with health checks
- Persistent volumes for data and storage
- Auto-generated database credentials
Required Environment Variables
| Variable | Description |
|---|---|
RESEND_API_KEY |
Email service API key (for password resets, notifications) |
Note:
APP_KEYandAPP_URLare auto-configured. The container generates anAPP_KEYon first startup if not provided.
Optional Environment Variables
| Variable | Default | Description |
|---|---|---|
DRIP_EMAILS_ENABLED |
true |
Enable drip emails (welcome, onboarding, feedback) |
HIDE_AUTH_BUTTONS |
false |
Hide login/register buttons on landing page |
SUBSCRIPTIONS_ENABLED |
false |
Enable Stripe subscriptions |
STRIPE_KEY |
- | Stripe publishable key |
STRIPE_SECRET |
- | Stripe secret key |
STRIPE_WEBHOOK_SECRET |
- | Stripe webhook signing secret |
Star History
License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.