Compare commits
8 Commits
doc-drift/
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| d5326b359e | |||
| 2902b95800 | |||
| 6344a6f7d5 | |||
| 48dd5a51bc | |||
| 11476086cd | |||
| c69984898b | |||
| 9c3331090e | |||
| 963652bc61 |
@@ -24,7 +24,22 @@
|
|||||||
"Bash(npm run:*)",
|
"Bash(npm run:*)",
|
||||||
"Bash(/home/christian/.nvm/versions/node/v24.14.0/bin/npm run:*)",
|
"Bash(/home/christian/.nvm/versions/node/v24.14.0/bin/npm run:*)",
|
||||||
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm run build 2>&1)",
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm run build 2>&1)",
|
||||||
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npx vite build 2>&1)"
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npx vite build 2>&1)",
|
||||||
|
"Bash(sqlite3 /home/christian/projects/budget/.todos/issues.db \"PRAGMA integrity_check;\")",
|
||||||
|
"Bash(td usage:*)",
|
||||||
|
"Bash(ls:*)",
|
||||||
|
"Bash(sudo chown:*)",
|
||||||
|
"Bash(td add:*)",
|
||||||
|
"Bash(td log:*)",
|
||||||
|
"Bash(git:*)",
|
||||||
|
"Bash(npm list:*)",
|
||||||
|
"Bash(td accept:*)",
|
||||||
|
"Bash(/home/christian/.nvm/versions/node/v24.14.0/bin/npm test:*)",
|
||||||
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm test)",
|
||||||
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm --prefix /home/christian/projects/budget/server test 2>&1)",
|
||||||
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm --prefix /home/christian/projects/budget/client test 2>&1)",
|
||||||
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm --prefix /home/christian/projects/budget/client test)",
|
||||||
|
"Bash(PATH=\"/home/christian/.nvm/versions/node/v24.14.0/bin:$PATH\" npm --prefix /home/christian/projects/budget/client test -- --reporter=verbose)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -41,3 +41,5 @@ Thumbs.db
|
|||||||
|
|
||||||
# Coverage
|
# Coverage
|
||||||
coverage/
|
coverage/
|
||||||
|
# Nightshift plan artifacts (keep out of version control)
|
||||||
|
.nightshift-plan
|
||||||
|
|||||||
86
CLAUDE.md
86
CLAUDE.md
@@ -77,6 +77,8 @@ cd client && npm run test:watch
|
|||||||
- Export pure functions (validators, formatters, etc.) for direct testing
|
- Export pure functions (validators, formatters, etc.) for direct testing
|
||||||
- Run `npm test` in both `server/` and `client/` before committing
|
- Run `npm test` in both `server/` and `client/` before committing
|
||||||
|
|
||||||
|
**Callback prop naming convention:** React callback props follow `on[Noun][Verb]` (e.g., `onBillPaidToggle`, `onPaycheckAmountSave`, `onPaycheckGenerate`). Event handler functions in the parent component use the `handle[Action]` prefix (e.g., `handleAmountSave`, `handleBillPaidToggle`).
|
||||||
|
|
||||||
## Application Structure
|
## Application Structure
|
||||||
|
|
||||||
The default route `/` renders the paycheck-centric main view (`client/src/pages/PaycheckView.jsx`). It shows the current month's two paychecks side-by-side with bills, paid status, one-time expenses, and remaining balance. Month navigation (prev/next) fetches data via `GET /api/paychecks?year=&month=`.
|
The default route `/` renders the paycheck-centric main view (`client/src/pages/PaycheckView.jsx`). It shows the current month's two paychecks side-by-side with bills, paid status, one-time expenses, and remaining balance. Month navigation (prev/next) fetches data via `GET /api/paychecks?year=&month=`.
|
||||||
@@ -94,3 +96,87 @@ The default route `/` renders the paycheck-centric main view (`client/src/pages/
|
|||||||
**Financing:** `GET/POST /api/financing`, `PUT/DELETE /api/financing/:id`, `PATCH /api/financing-payments/:id/paid`. Plans track a total amount, payoff due date, and `start_date`. Payment per period is auto-calculated as `(remaining balance) / (remaining periods)`. Split plans (`assigned_paycheck = null`) divide each period's payment across both paychecks. Plans auto-close when fully paid. Financing payments are included in the paycheck remaining balance. `start_date` prevents a plan from appearing on paycheck months before it was created — both virtual previews and `generate` respect this guard.
|
**Financing:** `GET/POST /api/financing`, `PUT/DELETE /api/financing/:id`, `PATCH /api/financing-payments/:id/paid`. Plans track a total amount, payoff due date, and `start_date`. Payment per period is auto-calculated as `(remaining balance) / (remaining periods)`. Split plans (`assigned_paycheck = null`) divide each period's payment across both paychecks. Plans auto-close when fully paid. Financing payments are included in the paycheck remaining balance. `start_date` prevents a plan from appearing on paycheck months before it was created — both virtual previews and `generate` respect this guard.
|
||||||
|
|
||||||
**Migrations:** SQL files in `db/migrations/` are applied in filename order on server startup. Add new migrations as `00N_description.sql` — they run once and are tracked in the `migrations` table.
|
**Migrations:** SQL files in `db/migrations/` are applied in filename order on server startup. Add new migrations as `00N_description.sql` — they run once and are tracked in the `migrations` table.
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
Full DDL lives in `db/migrations/`. Key tables:
|
||||||
|
|
||||||
|
| Table | Description |
|
||||||
|
|---|---|
|
||||||
|
| `config` | Key/value store for app settings (paycheck days, gross/net amounts). |
|
||||||
|
| `bills` | Bill definitions: name, amount, due day, assigned paycheck, category, active flag. |
|
||||||
|
| `paychecks` | One row per paycheck per period (year + month + paycheck_number 1 or 2). |
|
||||||
|
| `paycheck_bills` | Junction between a paycheck instance and its bills; tracks paid status and amount_override. |
|
||||||
|
| `one_time_expenses` | Ad-hoc expenses attached to a specific paycheck instance. |
|
||||||
|
| `financing_plans` | Financing plans: total amount, due date, start_date, optional assigned_paycheck. |
|
||||||
|
| `financing_payments` | One payment record per plan per paycheck; tracks paid status. |
|
||||||
|
| `expense_categories` | Lookup table for variable-expense categories (Groceries, Gas, Dining, …). |
|
||||||
|
| `actuals` | Actual spending log entries linked to a paycheck, category, or bill. |
|
||||||
|
| `migrations` | Internal table tracking which migration files have been applied. |
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
All routes are prefixed with `/api`.
|
||||||
|
|
||||||
|
### Paychecks
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/paychecks?year=&month=` | Return both paychecks for a month. Returns virtual data (id: null) when no DB record exists. |
|
||||||
|
| `POST` | `/paychecks/generate?year=&month=` | Upsert paycheck records and sync bills/financing for the month. |
|
||||||
|
| `GET` | `/paychecks/months` | List all months that have generated paycheck records, newest first. |
|
||||||
|
| `PATCH` | `/paychecks/:id` | Update gross and net for a specific paycheck. |
|
||||||
|
| `PATCH` | `/paycheck-bills/:id/paid` | Toggle paid status; locks amount_override on pay. |
|
||||||
|
| `PATCH` | `/paycheck-bills/:id/amount` | Set amount_override for a variable-amount bill. |
|
||||||
|
|
||||||
|
### Bills
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/bills` | List all bills ordered by assigned_paycheck, name. |
|
||||||
|
| `POST` | `/bills` | Create a bill. |
|
||||||
|
| `GET` | `/bills/:id` | Fetch a single bill. |
|
||||||
|
| `PUT` | `/bills/:id` | Replace a bill's fields. |
|
||||||
|
| `DELETE` | `/bills/:id` | Hard-delete a bill. |
|
||||||
|
| `PATCH` | `/bills/:id/toggle` | Toggle the active flag. |
|
||||||
|
|
||||||
|
### Config
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/config` | Return all config values as a flat object with numeric values. |
|
||||||
|
| `PUT` | `/config` | Upsert one or more config keys. Unknown keys are silently ignored. |
|
||||||
|
|
||||||
|
### One-Time Expenses
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `POST` | `/one-time-expenses` | Add a one-time expense to a paycheck. |
|
||||||
|
| `DELETE` | `/one-time-expenses/:id` | Remove a one-time expense. |
|
||||||
|
| `PATCH` | `/one-time-expenses/:id/paid` | Toggle paid status. |
|
||||||
|
|
||||||
|
### Financing
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/financing` | List all financing plans with enriched progress fields. |
|
||||||
|
| `POST` | `/financing` | Create a financing plan. |
|
||||||
|
| `GET` | `/financing/:id` | Fetch a plan with its full payment history. |
|
||||||
|
| `PUT` | `/financing/:id` | Update a financing plan. |
|
||||||
|
| `DELETE` | `/financing/:id` | Delete a financing plan and its payments. |
|
||||||
|
| `PATCH` | `/financing-payments/:id/paid` | Toggle a payment's paid status; auto-closes the plan when fully paid. |
|
||||||
|
|
||||||
|
### Actuals & Categories
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/expense-categories` | List all expense categories. |
|
||||||
|
| `POST` | `/expense-categories` | Create a new expense category. |
|
||||||
|
| `GET` | `/actuals?paycheckId=` | List actual spending entries for a paycheck. |
|
||||||
|
| `POST` | `/actuals` | Log an actual spending entry. |
|
||||||
|
| `DELETE` | `/actuals/:id` | Remove an actual spending entry. |
|
||||||
|
|
||||||
|
### Summary
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/summary/monthly?year=&month=` | Spending breakdown and category totals for a single month. |
|
||||||
|
| `GET` | `/summary/annual?year=` | Income vs. spending, surplus/deficit trend, and stacked variable spending for a full year. |
|
||||||
|
|
||||||
|
### Health
|
||||||
|
| Method | Path | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET` | `/health` | Returns `{ ok: true }`. Used by Docker healthcheck. |
|
||||||
|
|||||||
@@ -2,6 +2,18 @@ import { createContext, useContext, useEffect, useState } from 'react';
|
|||||||
|
|
||||||
const ThemeContext = createContext(null);
|
const ThemeContext = createContext(null);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides light/dark theme state to the component tree.
|
||||||
|
*
|
||||||
|
* On mount, the active theme is read from `localStorage`; if absent it
|
||||||
|
* falls back to the OS `prefers-color-scheme` media query. The chosen
|
||||||
|
* theme is applied as a `data-theme` attribute on `<html>` and persisted
|
||||||
|
* to `localStorage` whenever it changes.
|
||||||
|
*
|
||||||
|
* Exposes `{ theme, toggle }` via {@link useTheme}.
|
||||||
|
*
|
||||||
|
* @param {{ children: React.ReactNode }} props
|
||||||
|
*/
|
||||||
export function ThemeProvider({ children }) {
|
export function ThemeProvider({ children }) {
|
||||||
const [theme, setTheme] = useState(() => {
|
const [theme, setTheme] = useState(() => {
|
||||||
const stored = localStorage.getItem('theme');
|
const stored = localStorage.getItem('theme');
|
||||||
@@ -25,6 +37,13 @@ export function ThemeProvider({ children }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the current theme context provided by {@link ThemeProvider}.
|
||||||
|
*
|
||||||
|
* @returns {{ theme: 'light'|'dark', toggle: () => void }}
|
||||||
|
* - `theme` — the active color scheme name
|
||||||
|
* - `toggle` — flips between `'light'` and `'dark'`
|
||||||
|
*/
|
||||||
export function useTheme() {
|
export function useTheme() {
|
||||||
return useContext(ThemeContext);
|
return useContext(ThemeContext);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,32 +3,10 @@ import {
|
|||||||
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
|
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
|
||||||
Cell, ResponsiveContainer, ReferenceLine,
|
Cell, ResponsiveContainer, ReferenceLine,
|
||||||
} from 'recharts';
|
} from 'recharts';
|
||||||
|
import { MONTH_NAMES, PALETTE, fmt, formatCurrencyShort } from '../utils/formatting.js';
|
||||||
const MONTH_NAMES = [
|
|
||||||
'January', 'February', 'March', 'April', 'May', 'June',
|
|
||||||
'July', 'August', 'September', 'October', 'November', 'December',
|
|
||||||
];
|
|
||||||
|
|
||||||
const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||||
|
|
||||||
const PALETTE = ['#3b82f6', '#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#14b8a6', '#eab308', '#64748b'];
|
|
||||||
|
|
||||||
function fmt(value) {
|
|
||||||
if (value == null) return '—';
|
|
||||||
const num = Number(value);
|
|
||||||
if (isNaN(num)) return '—';
|
|
||||||
const abs = Math.abs(num).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
||||||
return num < 0 ? `-$${abs}` : `$${abs}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatCurrencyShort(value) {
|
|
||||||
if (value == null || isNaN(value)) return '';
|
|
||||||
const abs = Math.abs(value);
|
|
||||||
const sign = value < 0 ? '-' : '';
|
|
||||||
if (abs >= 1000) return `${sign}$${(abs / 1000).toFixed(1)}k`;
|
|
||||||
return `${sign}$${abs.toFixed(0)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function surplusClass(value) {
|
function surplusClass(value) {
|
||||||
if (value == null || isNaN(Number(value))) return '';
|
if (value == null || isNaN(Number(value))) return '';
|
||||||
return Number(value) >= 0 ? 'text-success' : 'text-danger';
|
return Number(value) >= 0 ? 'text-success' : 'text-danger';
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
import { formatCurrency, ordinal } from '../utils/formatting.js';
|
||||||
|
|
||||||
const CATEGORIES = [
|
const CATEGORIES = [
|
||||||
'Housing', 'Utilities', 'Subscriptions', 'Insurance',
|
'Housing', 'Utilities', 'Subscriptions', 'Insurance',
|
||||||
@@ -14,19 +15,6 @@ const EMPTY_FORM = {
|
|||||||
variable_amount: false,
|
variable_amount: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
function formatCurrency(value) {
|
|
||||||
const num = parseFloat(value);
|
|
||||||
if (isNaN(num)) return '$0.00';
|
|
||||||
return num.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
|
||||||
}
|
|
||||||
|
|
||||||
function ordinal(n) {
|
|
||||||
const int = parseInt(n, 10);
|
|
||||||
if (isNaN(int)) return n;
|
|
||||||
const suffix = ['th', 'st', 'nd', 'rd'];
|
|
||||||
const v = int % 100;
|
|
||||||
return int + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Bills() {
|
function Bills() {
|
||||||
const [bills, setBills] = useState([]);
|
const [bills, setBills] = useState([]);
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
import { fmt } from '../utils/formatting.js';
|
||||||
function fmt(value) {
|
|
||||||
const num = parseFloat(value) || 0;
|
|
||||||
return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
||||||
}
|
|
||||||
|
|
||||||
function ProgressBar({ paid, total }) {
|
function ProgressBar({ paid, total }) {
|
||||||
const pct = total > 0 ? Math.min(100, (paid / total) * 100) : 0;
|
const pct = total > 0 ? Math.min(100, (paid / total) * 100) : 0;
|
||||||
|
|||||||
@@ -3,25 +3,7 @@ import {
|
|||||||
PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer,
|
PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer,
|
||||||
BarChart, Bar, XAxis, YAxis, CartesianGrid,
|
BarChart, Bar, XAxis, YAxis, CartesianGrid,
|
||||||
} from 'recharts';
|
} from 'recharts';
|
||||||
|
import { MONTH_NAMES, PALETTE, formatCurrency, formatCurrencyShort } from '../utils/formatting.js';
|
||||||
const MONTH_NAMES = [
|
|
||||||
'January', 'February', 'March', 'April', 'May', 'June',
|
|
||||||
'July', 'August', 'September', 'October', 'November', 'December',
|
|
||||||
];
|
|
||||||
|
|
||||||
function formatCurrency(value) {
|
|
||||||
const num = parseFloat(value) || 0;
|
|
||||||
return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatCurrencyShort(value) {
|
|
||||||
const num = parseFloat(value) || 0;
|
|
||||||
if (Math.abs(num) >= 1000) return '$' + (num / 1000).toFixed(1) + 'k';
|
|
||||||
return '$' + num.toFixed(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Accessible palette that works in light and dark
|
|
||||||
const PALETTE = ['#3b82f6', '#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#14b8a6', '#eab308', '#64748b'];
|
|
||||||
|
|
||||||
function StatCard({ label, value, valueClass }) {
|
function StatCard({ label, value, valueClass }) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,20 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
import { MONTH_NAMES, formatCurrency, ordinal } from '../utils/formatting.js';
|
||||||
const MONTH_NAMES = [
|
|
||||||
'January', 'February', 'March', 'April', 'May', 'June',
|
|
||||||
'July', 'August', 'September', 'October', 'November', 'December',
|
|
||||||
];
|
|
||||||
|
|
||||||
function ordinal(n) {
|
|
||||||
const s = ['th', 'st', 'nd', 'rd'];
|
|
||||||
const v = n % 100;
|
|
||||||
return n + (s[(v - 20) % 10] || s[v] || s[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatCurrency(value) {
|
|
||||||
const num = parseFloat(value) || 0;
|
|
||||||
return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatPayDate(dateStr) {
|
function formatPayDate(dateStr) {
|
||||||
const [year, month, day] = dateStr.split('-').map(Number);
|
const [year, month, day] = dateStr.split('-').map(Number);
|
||||||
@@ -29,7 +14,7 @@ export { ordinal, formatCurrency, formatPayDate };
|
|||||||
|
|
||||||
// ─── PaycheckColumn ───────────────────────────────────────────────────────────
|
// ─── PaycheckColumn ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggle, onOteDelete, onOteAdd, onGenerate, onAmountSave, onBillAmountSave, onFinancingPaidToggle }) {
|
function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggle, onOteDelete, onOteAdd, onPaycheckGenerate, onPaycheckAmountSave, onBillAmountSave, onFinancingPaidToggle }) {
|
||||||
const [newOteName, setNewOteName] = useState('');
|
const [newOteName, setNewOteName] = useState('');
|
||||||
const [newOteAmount, setNewOteAmount] = useState('');
|
const [newOteAmount, setNewOteAmount] = useState('');
|
||||||
const [actuals, setActuals] = useState([]);
|
const [actuals, setActuals] = useState([]);
|
||||||
@@ -95,7 +80,7 @@ function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggl
|
|||||||
// Lazy generate if this is a virtual paycheck
|
// Lazy generate if this is a virtual paycheck
|
||||||
let paycheckId = paycheck.id;
|
let paycheckId = paycheck.id;
|
||||||
if (!paycheckId) {
|
if (!paycheckId) {
|
||||||
const generated = await onGenerate();
|
const generated = await onPaycheckGenerate();
|
||||||
paycheckId = generated.find(p => p.paycheck_number === paycheck.paycheck_number).id;
|
paycheckId = generated.find(p => p.paycheck_number === paycheck.paycheck_number).id;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -151,7 +136,7 @@ function PaycheckColumn({ paycheck, onBillPaidToggle, categories, onOtePaidToggl
|
|||||||
setAmountSaving(true);
|
setAmountSaving(true);
|
||||||
setAmountError(null);
|
setAmountError(null);
|
||||||
try {
|
try {
|
||||||
await onAmountSave(paycheck.paycheck_number, parseFloat(editGross) || 0, parseFloat(editNet) || 0);
|
await onPaycheckAmountSave(paycheck.paycheck_number, parseFloat(editGross) || 0, parseFloat(editNet) || 0);
|
||||||
setEditingAmounts(false);
|
setEditingAmounts(false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setAmountError(err.message);
|
setAmountError(err.message);
|
||||||
@@ -755,8 +740,8 @@ function PaycheckView() {
|
|||||||
onOteDelete={handleOteDelete}
|
onOteDelete={handleOteDelete}
|
||||||
onOteAdd={handleOteAdd}
|
onOteAdd={handleOteAdd}
|
||||||
categories={categories}
|
categories={categories}
|
||||||
onGenerate={generateMonth}
|
onPaycheckGenerate={generateMonth}
|
||||||
onAmountSave={handleAmountSave}
|
onPaycheckAmountSave={handleAmountSave}
|
||||||
onBillAmountSave={handleBillAmountSave}
|
onBillAmountSave={handleBillAmountSave}
|
||||||
onFinancingPaidToggle={handleFinancingPaidToggle}
|
onFinancingPaidToggle={handleFinancingPaidToggle}
|
||||||
/>
|
/>
|
||||||
@@ -767,8 +752,8 @@ function PaycheckView() {
|
|||||||
onOteDelete={handleOteDelete}
|
onOteDelete={handleOteDelete}
|
||||||
onOteAdd={handleOteAdd}
|
onOteAdd={handleOteAdd}
|
||||||
categories={categories}
|
categories={categories}
|
||||||
onGenerate={generateMonth}
|
onPaycheckGenerate={generateMonth}
|
||||||
onAmountSave={handleAmountSave}
|
onPaycheckAmountSave={handleAmountSave}
|
||||||
onBillAmountSave={handleBillAmountSave}
|
onBillAmountSave={handleBillAmountSave}
|
||||||
onFinancingPaidToggle={handleFinancingPaidToggle}
|
onFinancingPaidToggle={handleFinancingPaidToggle}
|
||||||
/>
|
/>
|
||||||
|
|||||||
34
client/src/utils/formatting.js
Normal file
34
client/src/utils/formatting.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
export const MONTH_NAMES = [
|
||||||
|
'January', 'February', 'March', 'April', 'May', 'June',
|
||||||
|
'July', 'August', 'September', 'October', 'November', 'December',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Accessible palette that works in light and dark
|
||||||
|
export const PALETTE = ['#3b82f6', '#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#14b8a6', '#eab308', '#64748b'];
|
||||||
|
|
||||||
|
export function formatCurrency(value) {
|
||||||
|
const num = parseFloat(value) || 0;
|
||||||
|
return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatCurrencyShort(value) {
|
||||||
|
if (value == null || isNaN(value)) return '';
|
||||||
|
const abs = Math.abs(value);
|
||||||
|
const sign = value < 0 ? '-' : '';
|
||||||
|
if (abs >= 1000) return `${sign}$${(abs / 1000).toFixed(1)}k`;
|
||||||
|
return `${sign}$${abs.toFixed(0)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ordinal(n) {
|
||||||
|
const s = ['th', 'st', 'nd', 'rd'];
|
||||||
|
const v = n % 100;
|
||||||
|
return n + (s[(v - 20) % 10] || s[v] || s[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fmt(value) {
|
||||||
|
if (value == null) return '—';
|
||||||
|
const num = Number(value);
|
||||||
|
if (isNaN(num)) return '—';
|
||||||
|
const abs = Math.abs(num).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||||
|
return num < 0 ? `-$${abs}` : `$${abs}`;
|
||||||
|
}
|
||||||
12
server/src/constants.js
Normal file
12
server/src/constants.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const CONFIG_KEYS = [
|
||||||
|
'paycheck1_day',
|
||||||
|
'paycheck2_day',
|
||||||
|
'paycheck1_gross',
|
||||||
|
'paycheck1_net',
|
||||||
|
'paycheck2_gross',
|
||||||
|
'paycheck2_net',
|
||||||
|
];
|
||||||
|
|
||||||
|
module.exports = { CONFIG_KEYS };
|
||||||
@@ -2,6 +2,20 @@ const express = require('express');
|
|||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
const { pool } = require('../db');
|
const { pool } = require('../db');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validate the request body for bill create/update operations.
|
||||||
|
*
|
||||||
|
* Checks that all required fields are present and within acceptable ranges.
|
||||||
|
* Amount is optional when `variable_amount` is true (defaults to 0 on save).
|
||||||
|
*
|
||||||
|
* @param {object} body - Request body.
|
||||||
|
* @param {string} body.name - Bill name (non-empty).
|
||||||
|
* @param {number|string} [body.amount] - Bill amount; required when variable_amount is falsy.
|
||||||
|
* @param {number|string} body.due_day - Day of month (1–31).
|
||||||
|
* @param {number|string} body.assigned_paycheck - Which paycheck: 1 or 2.
|
||||||
|
* @param {boolean} [body.variable_amount] - Whether the bill amount varies each month.
|
||||||
|
* @returns {string|null} Validation error message, or null when valid.
|
||||||
|
*/
|
||||||
function validateBillFields(body) {
|
function validateBillFields(body) {
|
||||||
const { name, amount, due_day, assigned_paycheck, variable_amount } = body;
|
const { name, amount, due_day, assigned_paycheck, variable_amount } = body;
|
||||||
if (!name || name.toString().trim() === '') {
|
if (!name || name.toString().trim() === '') {
|
||||||
|
|||||||
@@ -1,21 +1,29 @@
|
|||||||
const express = require('express');
|
const express = require('express');
|
||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
const { pool } = require('../db');
|
const { pool } = require('../db');
|
||||||
|
const { CONFIG_KEYS } = require('../constants');
|
||||||
const CONFIG_KEYS = [
|
|
||||||
'paycheck1_day',
|
|
||||||
'paycheck2_day',
|
|
||||||
'paycheck1_gross',
|
|
||||||
'paycheck1_net',
|
|
||||||
'paycheck2_gross',
|
|
||||||
'paycheck2_net',
|
|
||||||
];
|
|
||||||
|
|
||||||
const DEFAULTS = {
|
const DEFAULTS = {
|
||||||
paycheck1_day: 1,
|
paycheck1_day: 1,
|
||||||
paycheck2_day: 15,
|
paycheck2_day: 15,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch all application config values from the database.
|
||||||
|
*
|
||||||
|
* Reads all known `CONFIG_KEYS` from the `config` table and coerces values
|
||||||
|
* to numbers. Keys missing from the DB fall back to hard-coded `DEFAULTS`
|
||||||
|
* (paycheck1_day = 1, paycheck2_day = 15); keys with no default are null.
|
||||||
|
*
|
||||||
|
* @returns {Promise<{
|
||||||
|
* paycheck1_day: number|null,
|
||||||
|
* paycheck2_day: number|null,
|
||||||
|
* paycheck1_gross: number|null,
|
||||||
|
* paycheck1_net: number|null,
|
||||||
|
* paycheck2_gross: number|null,
|
||||||
|
* paycheck2_net: number|null
|
||||||
|
* }>}
|
||||||
|
*/
|
||||||
async function getAllConfig() {
|
async function getAllConfig() {
|
||||||
const result = await pool.query(
|
const result = await pool.query(
|
||||||
'SELECT key, value FROM config WHERE key = ANY($1)',
|
'SELECT key, value FROM config WHERE key = ANY($1)',
|
||||||
|
|||||||
@@ -4,9 +4,20 @@ const { pool } = require('../db');
|
|||||||
|
|
||||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
// Count how many payment periods remain for a plan starting from (year, month),
|
/**
|
||||||
// including that month. Each month contributes 1 or 2 periods depending on
|
* Count the number of payment periods remaining for a plan, starting from
|
||||||
// whether the plan is split across both paychecks (assigned_paycheck = null).
|
* (and including) the given year/month.
|
||||||
|
*
|
||||||
|
* Each calendar month contributes 1 period for single-paycheck plans
|
||||||
|
* (`assigned_paycheck` = 1 or 2) or 2 periods for split plans
|
||||||
|
* (`assigned_paycheck` = null). Always returns at least 1 to prevent
|
||||||
|
* division-by-zero in {@link calcPaymentAmount}.
|
||||||
|
*
|
||||||
|
* @param {{ due_date: string, assigned_paycheck: number|null }} plan
|
||||||
|
* @param {number} year - Current year.
|
||||||
|
* @param {number} month - Current month (1–12).
|
||||||
|
* @returns {number} Number of remaining payment periods (≥ 1).
|
||||||
|
*/
|
||||||
function remainingPeriods(plan, year, month) {
|
function remainingPeriods(plan, year, month) {
|
||||||
const due = new Date(plan.due_date);
|
const due = new Date(plan.due_date);
|
||||||
const dueYear = due.getFullYear();
|
const dueYear = due.getFullYear();
|
||||||
@@ -19,7 +30,18 @@ function remainingPeriods(plan, year, month) {
|
|||||||
return monthsLeft * perMonth;
|
return monthsLeft * perMonth;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate the payment amount for one period.
|
/**
|
||||||
|
* Calculate the payment amount due for a single period.
|
||||||
|
*
|
||||||
|
* Formula: `(total_amount - paid_so_far) / remainingPeriods(plan, year, month)`.
|
||||||
|
* Returns 0 when the plan is already fully paid.
|
||||||
|
*
|
||||||
|
* @param {import('pg').PoolClient} client - Active DB client (read-only query).
|
||||||
|
* @param {{ id: number, total_amount: number|string, due_date: string, assigned_paycheck: number|null }} plan
|
||||||
|
* @param {number} year - Current year for period calculation.
|
||||||
|
* @param {number} month - Current month (1–12) for period calculation.
|
||||||
|
* @returns {Promise<number>} Payment amount rounded to 2 decimal places, or 0.
|
||||||
|
*/
|
||||||
async function calcPaymentAmount(client, plan, year, month) {
|
async function calcPaymentAmount(client, plan, year, month) {
|
||||||
const { rows } = await client.query(
|
const { rows } = await client.query(
|
||||||
`SELECT COALESCE(SUM(fp.amount), 0) AS paid_total
|
`SELECT COALESCE(SUM(fp.amount), 0) AS paid_total
|
||||||
@@ -35,7 +57,22 @@ async function calcPaymentAmount(client, plan, year, month) {
|
|||||||
return parseFloat((remaining / periods).toFixed(2));
|
return parseFloat((remaining / periods).toFixed(2));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enrich a plan row with computed progress fields.
|
/**
|
||||||
|
* Enrich a raw `financing_plans` row with computed progress fields.
|
||||||
|
*
|
||||||
|
* Aggregates payment records to derive `paid_total`, `remaining`,
|
||||||
|
* `paid_count`, `total_count`, and `overdue`. Used by every route that
|
||||||
|
* returns a plan to the client.
|
||||||
|
*
|
||||||
|
* @param {import('pg').Pool} pool - DB pool (runs a single SELECT).
|
||||||
|
* @param {object} plan - Raw row from the `financing_plans` table.
|
||||||
|
* @returns {Promise<object>} Plan object extended with:
|
||||||
|
* - `paid_total` {number} — sum of paid payment amounts
|
||||||
|
* - `remaining` {number} — total_amount minus paid_total (≥ 0)
|
||||||
|
* - `paid_count` {number} — number of paid financing_payments rows
|
||||||
|
* - `total_count` {number} — total financing_payments rows for the plan
|
||||||
|
* - `overdue` {boolean} — true when active, remaining > 0, and due_date is in the past
|
||||||
|
*/
|
||||||
async function enrichPlan(pool, plan) {
|
async function enrichPlan(pool, plan) {
|
||||||
const { rows } = await pool.query(
|
const { rows } = await pool.query(
|
||||||
`SELECT
|
`SELECT
|
||||||
|
|||||||
@@ -2,15 +2,7 @@ const express = require('express');
|
|||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
const { pool } = require('../db');
|
const { pool } = require('../db');
|
||||||
const { calcPaymentAmount } = require('./financing');
|
const { calcPaymentAmount } = require('./financing');
|
||||||
|
const { CONFIG_KEYS } = require('../constants');
|
||||||
const CONFIG_KEYS = [
|
|
||||||
'paycheck1_day',
|
|
||||||
'paycheck2_day',
|
|
||||||
'paycheck1_gross',
|
|
||||||
'paycheck1_net',
|
|
||||||
'paycheck2_gross',
|
|
||||||
'paycheck2_net',
|
|
||||||
];
|
|
||||||
|
|
||||||
const CONFIG_DEFAULTS = {
|
const CONFIG_DEFAULTS = {
|
||||||
paycheck1_day: 1,
|
paycheck1_day: 1,
|
||||||
@@ -43,9 +35,29 @@ function pad2(n) {
|
|||||||
return String(n).padStart(2, '0');
|
return String(n).padStart(2, '0');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Build virtual (unsaved) paycheck data from config + active bills.
|
/**
|
||||||
// Returns the same shape as fetchPaychecksForMonth but with id: null
|
* Build virtual (unsaved) paycheck data from config + active bills.
|
||||||
// and paycheck_bill_id: null — nothing is written to the DB.
|
*
|
||||||
|
* Returns the same shape as {@link fetchPaychecksForMonth} but with
|
||||||
|
* `id: null` and `paycheck_bill_id: null` — nothing is written to the DB.
|
||||||
|
* Financing payment previews are included with `financing_payment_id: null`.
|
||||||
|
* Plans whose `start_date` is after the requested period are excluded.
|
||||||
|
*
|
||||||
|
* @param {number} year - Full four-digit year (e.g. 2025).
|
||||||
|
* @param {number} month - Month number 1–12.
|
||||||
|
* @returns {Promise<Array<{
|
||||||
|
* id: null,
|
||||||
|
* period_year: number,
|
||||||
|
* period_month: number,
|
||||||
|
* paycheck_number: 1|2,
|
||||||
|
* pay_date: string,
|
||||||
|
* gross: number,
|
||||||
|
* net: number,
|
||||||
|
* bills: Array<object>,
|
||||||
|
* one_time_expenses: [],
|
||||||
|
* financing: Array<object>
|
||||||
|
* }>>}
|
||||||
|
*/
|
||||||
async function buildVirtualPaychecks(year, month) {
|
async function buildVirtualPaychecks(year, month) {
|
||||||
const config = await getConfig();
|
const config = await getConfig();
|
||||||
const paychecks = [];
|
const paychecks = [];
|
||||||
@@ -137,8 +149,19 @@ async function buildVirtualPaychecks(year, month) {
|
|||||||
return paychecks;
|
return paychecks;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate (upsert) paycheck records for the given year/month.
|
/**
|
||||||
// Returns the two paycheck IDs.
|
* Generate (upsert) paycheck records for the given year/month.
|
||||||
|
*
|
||||||
|
* Inserts or updates both `paychecks` rows, syncs `paycheck_bills` for all
|
||||||
|
* active bills, and inserts `financing_payments` for active plans that have
|
||||||
|
* started by this period. All writes run inside a single transaction.
|
||||||
|
* Split financing plans (assigned_paycheck = null) get half the per-period
|
||||||
|
* amount on each paycheck.
|
||||||
|
*
|
||||||
|
* @param {number} year - Full four-digit year.
|
||||||
|
* @param {number} month - Month number 1–12.
|
||||||
|
* @returns {Promise<number[]>} Two-element array of paycheck IDs `[id1, id2]`.
|
||||||
|
*/
|
||||||
async function generatePaychecks(year, month) {
|
async function generatePaychecks(year, month) {
|
||||||
const config = await getConfig();
|
const config = await getConfig();
|
||||||
|
|
||||||
@@ -221,7 +244,25 @@ async function generatePaychecks(year, month) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fetch both paycheck records for a month with full bill and one_time_expense data.
|
/**
|
||||||
|
* Fetch both persisted paycheck records for a month with full bill,
|
||||||
|
* one-time-expense, and financing-payment data joined in.
|
||||||
|
*
|
||||||
|
* @param {number} year - Full four-digit year.
|
||||||
|
* @param {number} month - Month number 1–12.
|
||||||
|
* @returns {Promise<Array<{
|
||||||
|
* id: number,
|
||||||
|
* period_year: number,
|
||||||
|
* period_month: number,
|
||||||
|
* paycheck_number: 1|2,
|
||||||
|
* pay_date: string,
|
||||||
|
* gross: number,
|
||||||
|
* net: number,
|
||||||
|
* bills: Array<object>,
|
||||||
|
* one_time_expenses: Array<object>,
|
||||||
|
* financing: Array<object>
|
||||||
|
* }>>} Empty array when no DB records exist for the given month.
|
||||||
|
*/
|
||||||
async function fetchPaychecksForMonth(year, month) {
|
async function fetchPaychecksForMonth(year, month) {
|
||||||
const pcResult = await pool.query(
|
const pcResult = await pool.query(
|
||||||
`SELECT id, period_year, period_month, paycheck_number, pay_date, gross, net
|
`SELECT id, period_year, period_month, paycheck_number, pay_date, gross, net
|
||||||
|
|||||||
Reference in New Issue
Block a user