Compare commits
5 Commits
1e79ada6d8
...
3cf67f6e2a
| Author | SHA1 | Date | |
|---|---|---|---|
 siddharthd
|
3cf67f6e2a | ||
|
siddharthd
|
90d8db4abe | ||
|
siddharthd
|
d1a0eedf03 | ||
|
siddharthd
|
5dbeb0cb87 | ||
|
siddharthd
|
30a7857d13 |
Generated
+395
-2
@@ -15,7 +15,8 @@
|
||||
"pg": "^8.20.0",
|
||||
"prisma": "^7.4.2",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
"react-dom": "19.2.3",
|
||||
"recharts": "^3.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
@@ -1490,6 +1491,42 @@
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
|
||||
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@standard-schema/utils": "^0.3.0",
|
||||
"immer": "^11.0.0",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit/node_modules/immer": {
|
||||
"version": "11.1.4",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
|
||||
"integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/@rtsao/scc": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||
@@ -1503,6 +1540,12 @@
|
||||
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
||||
@@ -1820,6 +1863,69 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
|
||||
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
|
||||
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
|
||||
"integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -1882,6 +1988,12 @@
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.56.1",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz",
|
||||
@@ -2987,6 +3099,15 @@
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@@ -3056,6 +3177,127 @@
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
|
||||
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||
@@ -3135,6 +3377,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@@ -3482,6 +3730,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.45.1",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.45.1.tgz",
|
||||
"integrity": "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"benchmarks"
|
||||
]
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
@@ -3935,6 +4193,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
|
||||
"integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/exsolve": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
|
||||
@@ -4509,6 +4773,16 @@
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immer": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||
@@ -4551,6 +4825,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-array-buffer": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
|
||||
@@ -6386,9 +6669,31 @@
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.25 || ^19",
|
||||
"react": "^18.0 || ^19",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
@@ -6402,6 +6707,51 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "3.8.0",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.0.tgz",
|
||||
"integrity": "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"www"
|
||||
],
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.0 || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
@@ -6461,6 +6811,12 @@
|
||||
"url": "https://github.com/sponsors/remeda"
|
||||
}
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
@@ -7104,6 +7460,12 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
|
||||
@@ -7450,6 +7812,15 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/valibot": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/valibot/-/valibot-1.2.0.tgz",
|
||||
@@ -7464,6 +7835,28 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
+2
-1
@@ -16,7 +16,8 @@
|
||||
"pg": "^8.20.0",
|
||||
"prisma": "^7.4.2",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
"react-dom": "19.2.3",
|
||||
"recharts": "^3.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
CREATE TABLE IF NOT EXISTS participants (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name TEXT NOT NULL UNIQUE,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
INSERT INTO participants (name) VALUES ('Me') ON CONFLICT DO NOTHING;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS transaction_splits (
|
||||
id SERIAL PRIMARY KEY,
|
||||
transaction_id INTEGER NOT NULL REFERENCES transactions(id) ON DELETE CASCADE,
|
||||
participant_id INTEGER NOT NULL REFERENCES participants(id) ON DELETE CASCADE,
|
||||
share_percent NUMERIC(5,2) NOT NULL CHECK (share_percent > 0 AND share_percent <= 100),
|
||||
settled BOOLEAN DEFAULT FALSE,
|
||||
settled_at TIMESTAMPTZ,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE (transaction_id, participant_id)
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_splits_txn ON transaction_splits(transaction_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_splits_participant ON transaction_splits(participant_id);
|
||||
@@ -0,0 +1,17 @@
|
||||
-- Add email to participants for OAuth identity mapping
|
||||
ALTER TABLE participants ADD COLUMN IF NOT EXISTS email TEXT UNIQUE;
|
||||
|
||||
-- Add owner_id and account_holder_name to statements
|
||||
ALTER TABLE statements ADD COLUMN IF NOT EXISTS owner_id INTEGER NOT NULL DEFAULT 1 REFERENCES participants(id);
|
||||
ALTER TABLE statements ADD COLUMN IF NOT EXISTS account_holder_name TEXT;
|
||||
CREATE INDEX IF NOT EXISTS idx_statements_owner_id ON statements(owner_id);
|
||||
|
||||
-- Auto-assignment mapping table: (bank_name, account_number) -> owner
|
||||
CREATE TABLE IF NOT EXISTS account_owner_mappings (
|
||||
id SERIAL PRIMARY KEY,
|
||||
bank_name TEXT NOT NULL,
|
||||
account_number TEXT NOT NULL,
|
||||
owner_id INTEGER NOT NULL REFERENCES participants(id),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(bank_name, account_number)
|
||||
);
|
||||
@@ -0,0 +1,7 @@
|
||||
-- Add FX conversion support
|
||||
ALTER TABLE statements ADD COLUMN IF NOT EXISTS exchange_rate_to_aud NUMERIC(10,6);
|
||||
ALTER TABLE transactions ADD COLUMN IF NOT EXISTS amount_aud NUMERIC(12,2);
|
||||
|
||||
-- Backfill: all existing data is AUD
|
||||
UPDATE transactions SET amount_aud = amount WHERE amount_aud IS NULL;
|
||||
UPDATE statements SET exchange_rate_to_aud = 1.000000 WHERE exchange_rate_to_aud IS NULL;
|
||||
@@ -16,6 +16,7 @@ export async function GET(req: NextRequest) {
|
||||
const startStr = startDate.toISOString().slice(0, 10);
|
||||
const endStr = endDate.toISOString().slice(0, 10);
|
||||
|
||||
// Expenses: debits excluding transfers and investments, split-adjusted
|
||||
const spendRows = await queryRaw<{
|
||||
month: string;
|
||||
category: string;
|
||||
@@ -25,13 +26,20 @@ export async function GET(req: NextRequest) {
|
||||
`SELECT
|
||||
TO_CHAR(DATE_TRUNC('month', t.transaction_date::date), 'YYYY-MM') as month,
|
||||
COALESCE(o.category_override, t.category) as category,
|
||||
SUM(t.amount)::numeric(12,2) as total_spent,
|
||||
SUM(
|
||||
CASE
|
||||
WHEN ts.share_percent IS NOT NULL THEN COALESCE(t.amount_aud, t.amount) * ts.share_percent / 100
|
||||
ELSE COALESCE(t.amount_aud, t.amount)
|
||||
END
|
||||
)::numeric(12,2) as total_spent,
|
||||
COUNT(*)::int as transaction_count
|
||||
FROM transactions t
|
||||
LEFT JOIN transaction_overrides o ON o.transaction_id = t.id
|
||||
LEFT JOIN transaction_splits ts ON ts.transaction_id = t.id AND ts.participant_id = $1
|
||||
JOIN statements s ON s.id = t.statement_id
|
||||
WHERE s.owner_id = $1
|
||||
AND t.transaction_type = 'debit'
|
||||
AND COALESCE(o.category_override, t.category) NOT IN ('transfers', 'investment')
|
||||
AND t.transaction_date >= $2
|
||||
AND t.transaction_date < $3
|
||||
GROUP BY 1, 2
|
||||
@@ -39,10 +47,48 @@ export async function GET(req: NextRequest) {
|
||||
[user.id, startStr, endStr]
|
||||
);
|
||||
|
||||
const budgetRows = await queryRaw<{ month: string; category: string; amount_limit: number }>(
|
||||
`SELECT TO_CHAR(month, 'YYYY-MM') as month, category, amount_limit::numeric
|
||||
FROM budgets
|
||||
WHERE owner_id = $1 AND month >= $2::date AND month < $3::date`,
|
||||
// Income: credits/payments categorised as income
|
||||
const incomeRows = await queryRaw<{
|
||||
month: string;
|
||||
total_income: number;
|
||||
transaction_count: number;
|
||||
}>(
|
||||
`SELECT
|
||||
TO_CHAR(DATE_TRUNC('month', t.transaction_date::date), 'YYYY-MM') as month,
|
||||
SUM(COALESCE(t.amount_aud, t.amount))::numeric(12,2) as total_income,
|
||||
COUNT(*)::int as transaction_count
|
||||
FROM transactions t
|
||||
LEFT JOIN transaction_overrides o ON o.transaction_id = t.id
|
||||
JOIN statements s ON s.id = t.statement_id
|
||||
WHERE s.owner_id = $1
|
||||
AND t.transaction_type IN ('credit', 'payment')
|
||||
AND COALESCE(o.category_override, t.category) = 'income'
|
||||
AND t.transaction_date >= $2
|
||||
AND t.transaction_date < $3
|
||||
GROUP BY 1
|
||||
ORDER BY 1 DESC`,
|
||||
[user.id, startStr, endStr]
|
||||
);
|
||||
|
||||
// Investments: any transaction categorised as investment
|
||||
const investmentRows = await queryRaw<{
|
||||
month: string;
|
||||
total_invested: number;
|
||||
transaction_count: number;
|
||||
}>(
|
||||
`SELECT
|
||||
TO_CHAR(DATE_TRUNC('month', t.transaction_date::date), 'YYYY-MM') as month,
|
||||
SUM(COALESCE(t.amount_aud, t.amount))::numeric(12,2) as total_invested,
|
||||
COUNT(*)::int as transaction_count
|
||||
FROM transactions t
|
||||
LEFT JOIN transaction_overrides o ON o.transaction_id = t.id
|
||||
JOIN statements s ON s.id = t.statement_id
|
||||
WHERE s.owner_id = $1
|
||||
AND COALESCE(o.category_override, t.category) = 'investment'
|
||||
AND t.transaction_date >= $2
|
||||
AND t.transaction_date < $3
|
||||
GROUP BY 1
|
||||
ORDER BY 1 DESC`,
|
||||
[user.id, startStr, endStr]
|
||||
);
|
||||
|
||||
@@ -56,50 +102,46 @@ export async function GET(req: NextRequest) {
|
||||
|
||||
const spendMap = new Map<string, number>();
|
||||
const countMap = new Map<string, number>();
|
||||
const budgetMap = new Map<string, number>();
|
||||
const incomeMap = new Map<string, number>();
|
||||
const investMap = new Map<string, number>();
|
||||
|
||||
for (const r of spendRows) {
|
||||
spendMap.set(`${r.category}:${r.month}`, Number(r.total_spent));
|
||||
countMap.set(`${r.category}:${r.month}`, r.transaction_count);
|
||||
}
|
||||
for (const r of budgetRows) {
|
||||
budgetMap.set(`${r.category}:${r.month}`, Number(r.amount_limit));
|
||||
}
|
||||
for (const r of incomeRows) incomeMap.set(r.month, Number(r.total_income));
|
||||
for (const r of investmentRows) investMap.set(r.month, Number(r.total_invested));
|
||||
|
||||
const allCategories = new Set<string>();
|
||||
for (const r of spendRows) allCategories.add(r.category);
|
||||
for (const r of budgetRows) allCategories.add(r.category);
|
||||
|
||||
const rows = Array.from(allCategories)
|
||||
.sort()
|
||||
.map((cat) => {
|
||||
const spent: Record<string, number> = {};
|
||||
const budget: Record<string, number> = {};
|
||||
const txCount: Record<string, number> = {};
|
||||
for (const m of months) {
|
||||
const s = spendMap.get(`${cat}:${m}`);
|
||||
const b = budgetMap.get(`${cat}:${m}`);
|
||||
const c = countMap.get(`${cat}:${m}`);
|
||||
if (s !== undefined) spent[m] = s;
|
||||
if (b !== undefined) budget[m] = b;
|
||||
if (c !== undefined) txCount[m] = c;
|
||||
}
|
||||
return { category: cat, spent, budget, txCount };
|
||||
return { category: cat, spent, txCount };
|
||||
});
|
||||
|
||||
const totals: Record<string, { spent: number; budget: number }> = {};
|
||||
const totals: Record<string, { spent: number; income: number; investments: number; net: number }> = {};
|
||||
for (const m of months) {
|
||||
let s = 0;
|
||||
let b = 0;
|
||||
for (const row of rows) {
|
||||
s += row.spent[m] || 0;
|
||||
b += row.budget[m] || 0;
|
||||
}
|
||||
let spent = 0;
|
||||
for (const row of rows) spent += row.spent[m] || 0;
|
||||
const income = incomeMap.get(m) || 0;
|
||||
const investments = investMap.get(m) || 0;
|
||||
totals[m] = {
|
||||
spent: Math.round(s * 100) / 100,
|
||||
budget: Math.round(b * 100) / 100,
|
||||
spent: Math.round(spent * 100) / 100,
|
||||
income: Math.round(income * 100) / 100,
|
||||
investments: Math.round(investments * 100) / 100,
|
||||
net: Math.round((income - spent - investments) * 100) / 100,
|
||||
};
|
||||
}
|
||||
|
||||
return NextResponse.json({ months, rows, totals });
|
||||
return NextResponse.json({ months, rows, income: Object.fromEntries(incomeMap), investments: Object.fromEntries(investMap), totals });
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getCurrentUser } from "@/lib/auth";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const user = await getCurrentUser(req);
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
return NextResponse.json(user);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { queryRaw } from "@/lib/db";
|
||||
|
||||
interface BalanceRow {
|
||||
participant_id: number;
|
||||
name: string;
|
||||
total_owed: number;
|
||||
transaction_count: number;
|
||||
}
|
||||
|
||||
export async function GET(
|
||||
_req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const { id } = await params;
|
||||
|
||||
const rows = await queryRaw<BalanceRow>(
|
||||
`SELECT ts.participant_id, p.name,
|
||||
SUM(t.amount * ts.share_percent / 100)::numeric(12,2) as total_owed,
|
||||
COUNT(*)::int as transaction_count
|
||||
FROM transaction_splits ts
|
||||
JOIN transactions t ON t.id = ts.transaction_id
|
||||
JOIN participants p ON p.id = ts.participant_id
|
||||
WHERE ts.participant_id = $1 AND ts.settled = false
|
||||
GROUP BY ts.participant_id, p.name`,
|
||||
[Number(id)]
|
||||
);
|
||||
|
||||
return NextResponse.json(
|
||||
rows[0] ?? { participant_id: Number(id), total_owed: 0, transaction_count: 0 }
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getParticipantBalances } from "@/lib/queries";
|
||||
import { getCurrentUser } from "@/lib/auth";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const user = await getCurrentUser(req);
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
const balances = await getParticipantBalances(user.id);
|
||||
return NextResponse.json(balances);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { queryRaw } from "@/lib/db";
|
||||
|
||||
export async function GET() {
|
||||
const participants = await prisma.participants.findMany({
|
||||
orderBy: { name: "asc" },
|
||||
});
|
||||
return NextResponse.json(participants);
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const { name, email } = await req.json();
|
||||
if (!name?.trim()) {
|
||||
return NextResponse.json({ error: "name required" }, { status: 400 });
|
||||
}
|
||||
const participant = await prisma.participants.create({
|
||||
data: { name: name.trim(), email: email?.trim() || null },
|
||||
});
|
||||
return NextResponse.json(participant, { status: 201 });
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getSharedTransactions } from "@/lib/queries";
|
||||
import { getCurrentUser } from "@/lib/auth";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const user = await getCurrentUser(req);
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
const transactions = await getSharedTransactions(user.id);
|
||||
return NextResponse.json(transactions);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const body = await req.json();
|
||||
const { participant_id, split_ids } = body as {
|
||||
participant_id?: number;
|
||||
split_ids?: number[];
|
||||
};
|
||||
|
||||
const now = new Date();
|
||||
|
||||
if (participant_id) {
|
||||
const result = await prisma.transaction_splits.updateMany({
|
||||
where: { participant_id, settled: false },
|
||||
data: { settled: true, settled_at: now },
|
||||
});
|
||||
return NextResponse.json({ settled: result.count });
|
||||
}
|
||||
|
||||
if (split_ids?.length) {
|
||||
const result = await prisma.transaction_splits.updateMany({
|
||||
where: { id: { in: split_ids }, settled: false },
|
||||
data: { settled: true, settled_at: now },
|
||||
});
|
||||
return NextResponse.json({ settled: result.count });
|
||||
}
|
||||
|
||||
return NextResponse.json({ error: "participant_id or split_ids required" }, { status: 400 });
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { queryRaw } from "@/lib/db";
|
||||
|
||||
interface SplitInput {
|
||||
participant_id: number;
|
||||
share_percent: number;
|
||||
}
|
||||
|
||||
interface SplitRow {
|
||||
id: number;
|
||||
transaction_id: number;
|
||||
participant_id: number;
|
||||
name: string;
|
||||
share_percent: number;
|
||||
settled: boolean;
|
||||
settled_at: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export async function GET(
|
||||
_req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const { id } = await params;
|
||||
const splits = await queryRaw<SplitRow>(
|
||||
`SELECT ts.*, p.name
|
||||
FROM transaction_splits ts
|
||||
JOIN participants p ON p.id = ts.participant_id
|
||||
WHERE ts.transaction_id = $1
|
||||
ORDER BY p.name`,
|
||||
[Number(id)]
|
||||
);
|
||||
return NextResponse.json(splits);
|
||||
}
|
||||
|
||||
export async function POST(
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const { id } = await params;
|
||||
const transactionId = Number(id);
|
||||
const { splits } = (await req.json()) as { splits: SplitInput[] };
|
||||
|
||||
if (!splits || !Array.isArray(splits) || splits.length === 0) {
|
||||
return NextResponse.json({ error: "splits array required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const total = splits.reduce((sum, s) => sum + Number(s.share_percent), 0);
|
||||
if (Math.abs(total - 100) > 0.01) {
|
||||
return NextResponse.json(
|
||||
{ error: `Shares must sum to 100%, got ${total}%` },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Replace all splits for this transaction atomically
|
||||
await prisma.$transaction([
|
||||
prisma.transaction_splits.deleteMany({ where: { transaction_id: transactionId } }),
|
||||
...splits.map((s) =>
|
||||
prisma.transaction_splits.create({
|
||||
data: {
|
||||
transaction_id: transactionId,
|
||||
participant_id: s.participant_id,
|
||||
share_percent: s.share_percent,
|
||||
},
|
||||
})
|
||||
),
|
||||
]);
|
||||
|
||||
const result = await queryRaw<SplitRow>(
|
||||
`SELECT ts.*, p.name FROM transaction_splits ts
|
||||
JOIN participants p ON p.id = ts.participant_id
|
||||
WHERE ts.transaction_id = $1 ORDER BY p.name`,
|
||||
[transactionId]
|
||||
);
|
||||
|
||||
return NextResponse.json(result);
|
||||
}
|
||||
+596
-247
@@ -2,17 +2,23 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
useBudgets,
|
||||
useUpsertBudget,
|
||||
useDeleteBudget,
|
||||
useMonthlyAnalytics,
|
||||
} from "@/lib/hooks";
|
||||
import { CATEGORIES, formatCategory } from "@/lib/categories";
|
||||
ComposedChart,
|
||||
BarChart,
|
||||
Bar,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Cell,
|
||||
} from "recharts";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useMonthlyAnalytics, useTransactions, useUpdateTransaction } from "@/lib/hooks";
|
||||
import { formatCategory, CATEGORIES } from "@/lib/categories";
|
||||
|
||||
function formatMonth(m: string): string {
|
||||
const [year, month] = m.split("-");
|
||||
const date = new Date(Number(year), Number(month) - 1, 1);
|
||||
return date.toLocaleString("default", { month: "long", year: "numeric" });
|
||||
function currentMonthStr(): string {
|
||||
const now = new Date();
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function prevMonth(m: string): string {
|
||||
@@ -27,66 +33,261 @@ function nextMonth(m: string): string {
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function currentMonthStr(): string {
|
||||
const now = new Date();
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
|
||||
function formatMonth(m: string): string {
|
||||
const [year, month] = m.split("-");
|
||||
const date = new Date(Number(year), Number(month) - 1, 1);
|
||||
return date.toLocaleString("default", { month: "long", year: "numeric" });
|
||||
}
|
||||
|
||||
function barColor(pct: number): string {
|
||||
if (pct > 100) return "bg-red-500";
|
||||
if (pct > 80) return "bg-yellow-400";
|
||||
return "bg-emerald-500";
|
||||
function formatShortMonth(m: string): string {
|
||||
const [year, month] = m.split("-");
|
||||
const date = new Date(Number(year), Number(month) - 1, 1);
|
||||
return date.toLocaleString("default", { month: "short" });
|
||||
}
|
||||
|
||||
export default function BudgetPage() {
|
||||
const [selectedMonth, setSelectedMonth] = useState(currentMonthStr);
|
||||
const [editingCategory, setEditingCategory] = useState<string | null>(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
function fmt(n: number): string {
|
||||
return `$${n.toFixed(0)}`;
|
||||
}
|
||||
|
||||
const { data: budgets = [], isLoading: budgetsLoading } = useBudgets(selectedMonth);
|
||||
const { data: analytics, isLoading: analyticsLoading } = useMonthlyAnalytics(6);
|
||||
const upsertBudget = useUpsertBudget();
|
||||
const deleteBudget = useDeleteBudget();
|
||||
function fmtExact(n: number): string {
|
||||
return `$${n.toFixed(2)}`;
|
||||
}
|
||||
|
||||
const budgetMap = new Map(budgets.map((b) => [b.category, b]));
|
||||
function deltaColor(n: number): string {
|
||||
if (n > 0) return "text-red-400";
|
||||
if (n < 0) return "text-emerald-400";
|
||||
return "";
|
||||
}
|
||||
|
||||
// Categories with spend this month or a budget set
|
||||
const currentMonthRows = analytics?.rows.filter((r) => r.spent[selectedMonth] !== undefined) || [];
|
||||
const allCategories = new Set<string>([
|
||||
...currentMonthRows.map((r) => r.category),
|
||||
...budgets.map((b) => b.category),
|
||||
]);
|
||||
const TOOLTIP_STYLE = {
|
||||
background: "#18181b",
|
||||
border: "1px solid #3f3f46",
|
||||
borderRadius: 8,
|
||||
fontSize: 12,
|
||||
};
|
||||
|
||||
const tableRows = Array.from(allCategories)
|
||||
.sort()
|
||||
.map((cat) => {
|
||||
const analyticsRow = analytics?.rows.find((r) => r.category === cat);
|
||||
const spent = analyticsRow?.spent[selectedMonth] || 0;
|
||||
const txCount = analyticsRow?.txCount[selectedMonth] || 0;
|
||||
const budget = budgetMap.get(cat);
|
||||
const limit = budget ? Number(budget.amount_limit) : null;
|
||||
const remaining = limit !== null ? limit - spent : null;
|
||||
const pct = limit !== null && limit > 0 ? (spent / limit) * 100 : null;
|
||||
return { cat, spent, txCount, budget, limit, remaining, pct };
|
||||
});
|
||||
const CATEGORY_COLORS: Record<string, string> = {
|
||||
groceries: "#22c55e",
|
||||
dining: "#f97316",
|
||||
transport: "#06b6d4",
|
||||
fuel: "#eab308",
|
||||
shopping: "#ec4899",
|
||||
utilities: "#8b5cf6",
|
||||
entertainment: "#f43f5e",
|
||||
travel: "#0ea5e9",
|
||||
health: "#10b981",
|
||||
insurance: "#64748b",
|
||||
subscriptions: "#a78bfa",
|
||||
cash_advance: "#dc2626",
|
||||
government: "#78716c",
|
||||
education: "#3b82f6",
|
||||
rent: "#d97706",
|
||||
transfers: "#6b7280",
|
||||
income: "#34d399",
|
||||
investment: "#818cf8",
|
||||
personal_care: "#fb7185",
|
||||
pets: "#86efac",
|
||||
gifts: "#fcd34d",
|
||||
charity: "#a3e635",
|
||||
other: "#71717a",
|
||||
};
|
||||
|
||||
const totalBudgeted = budgets.reduce((s, b) => s + Number(b.amount_limit), 0);
|
||||
const totalSpent = tableRows.reduce((s, r) => s + r.spent, 0);
|
||||
const overBudgetCount = tableRows.filter((r) => r.pct !== null && r.pct > 100).length;
|
||||
interface TooltipPayload {
|
||||
name: string;
|
||||
value: number;
|
||||
fill?: string;
|
||||
stroke?: string;
|
||||
}
|
||||
|
||||
async function handleBudgetSave(cat: string) {
|
||||
const val = parseFloat(editValue);
|
||||
if (isNaN(val) || val < 0) return;
|
||||
await upsertBudget.mutateAsync({ category: cat, month: selectedMonth, amount_limit: val });
|
||||
setEditingCategory(null);
|
||||
setEditValue("");
|
||||
function CashflowTooltip({
|
||||
active,
|
||||
payload,
|
||||
label,
|
||||
}: {
|
||||
active?: boolean;
|
||||
payload?: TooltipPayload[];
|
||||
label?: string;
|
||||
}) {
|
||||
if (!active || !payload) return null;
|
||||
const items = payload.filter((p) => p.value && Math.abs(p.value) > 0.01);
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div style={TOOLTIP_STYLE} className="p-2.5 text-xs min-w-36">
|
||||
<p className="text-zinc-400 mb-2 font-medium">{label}</p>
|
||||
{items.map((item) => {
|
||||
const name = item.name;
|
||||
let label = name;
|
||||
let valueStr = fmtExact(Number(item.value));
|
||||
const color = item.fill || item.stroke || "#71717a";
|
||||
|
||||
if (name === "income") label = "Income";
|
||||
else if (name === "savingsRate") {
|
||||
label = "Savings Rate";
|
||||
valueStr = `${Number(item.value).toFixed(1)}%`;
|
||||
} else if (name.startsWith("cat_")) {
|
||||
label = formatCategory(name.slice(4));
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={name} className="flex items-center gap-2 mb-0.5">
|
||||
<span className="w-2 h-2 rounded-sm shrink-0" style={{ background: color }} />
|
||||
<span className="text-zinc-400">{label}:</span>
|
||||
<span className="text-zinc-100 tabular-nums ml-auto pl-2">{valueStr}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CategoryPanel({
|
||||
category,
|
||||
selectedMonth,
|
||||
}: {
|
||||
category: string;
|
||||
selectedMonth: string;
|
||||
}) {
|
||||
const qc = useQueryClient();
|
||||
const updateTx = useUpdateTransaction();
|
||||
|
||||
const from = `${selectedMonth}-01`;
|
||||
const [year, month] = selectedMonth.split("-").map(Number);
|
||||
const nextDate = new Date(year, month, 1);
|
||||
const to = `${nextDate.getFullYear()}-${String(nextDate.getMonth() + 1).padStart(2, "0")}-01`;
|
||||
|
||||
const { data, isLoading } = useTransactions({ category, from, to, limit: 200 });
|
||||
const txns = data?.data || [];
|
||||
|
||||
const handleCategoryChange = (id: number, newCategory: string) => {
|
||||
updateTx.mutate(
|
||||
{ id, category: newCategory },
|
||||
{
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["analytics"] });
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-0 pb-2 bg-zinc-950/60 border-b border-zinc-800">
|
||||
{isLoading ? (
|
||||
<p className="text-xs text-zinc-500 px-6 py-2">Loading transactions...</p>
|
||||
) : txns.length === 0 ? (
|
||||
<p className="text-xs text-zinc-600 px-6 py-2">No transactions found</p>
|
||||
) : (
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="text-zinc-600">
|
||||
<th className="text-left px-6 py-1 font-normal w-24">Date</th>
|
||||
<th className="text-left px-2 py-1 font-normal">Description</th>
|
||||
<th className="text-right px-2 py-1 font-normal w-24">Amount</th>
|
||||
<th className="text-right px-4 py-1 font-normal w-36">Category</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{txns.map((tx) => (
|
||||
<tr key={tx.id} className="border-t border-zinc-800/30 hover:bg-zinc-800/20">
|
||||
<td className="px-6 py-1.5 text-zinc-500 tabular-nums">
|
||||
{tx.transaction_date.slice(5).replace("-", "/")}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-zinc-300 max-w-xs truncate">
|
||||
{tx.effective_merchant || tx.description}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right tabular-nums text-zinc-300">
|
||||
{fmtExact(tx.amount)}
|
||||
</td>
|
||||
<td className="px-4 py-1.5 text-right">
|
||||
<select
|
||||
className="bg-zinc-800 border border-zinc-700 rounded px-2 py-0.5 text-xs text-zinc-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
|
||||
defaultValue={tx.effective_category}
|
||||
onChange={(e) => handleCategoryChange(tx.id, e.target.value)}
|
||||
>
|
||||
{CATEGORIES.map((cat) => (
|
||||
<option key={cat} value={cat}>
|
||||
{formatCategory(cat)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const [selectedMonth, setSelectedMonth] = useState(currentMonthStr);
|
||||
const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
|
||||
const { data: analytics, isLoading } = useMonthlyAnalytics(6);
|
||||
|
||||
if (isLoading || !analytics) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Month selector */}
|
||||
<h2 className="text-xl font-semibold">Analytics</h2>
|
||||
<p className="text-zinc-500 text-sm">Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const months = [...analytics.months].reverse(); // chronological
|
||||
|
||||
const totals = analytics.totals[selectedMonth] ?? { spent: 0, income: 0, investments: 0, net: 0 };
|
||||
const lastTotals = analytics.totals[prevMonth(selectedMonth)] ?? { spent: 0, income: 0, investments: 0, net: 0 };
|
||||
|
||||
const spentDelta = totals.spent - lastTotals.spent;
|
||||
|
||||
// Category rows for selected month
|
||||
const categoryRows = analytics.rows
|
||||
.filter((r) => (r.spent[selectedMonth] || 0) > 0)
|
||||
.map((r) => ({
|
||||
category: r.category,
|
||||
spent: r.spent[selectedMonth] || 0,
|
||||
txCount: r.txCount[selectedMonth] || 0,
|
||||
}))
|
||||
.sort((a, b) => b.spent - a.spent);
|
||||
|
||||
const largestCategory = categoryRows[0];
|
||||
|
||||
const hasIncome = months.some((m) => (analytics.totals[m]?.income || 0) > 0);
|
||||
const hasInvestments = months.some((m) => (analytics.totals[m]?.investments || 0) > 0);
|
||||
|
||||
// Categories that appear in expense data
|
||||
const expenseCategories = analytics.rows.map((r) => r.category);
|
||||
|
||||
// Cashflow chart data (chronological) — per-category amounts for stacking
|
||||
const cashflowData = months.map((m) => {
|
||||
const entry: Record<string, unknown> = {
|
||||
month: m,
|
||||
label: formatShortMonth(m),
|
||||
income: analytics.income[m] || 0,
|
||||
};
|
||||
analytics.rows.forEach((row) => {
|
||||
entry[`cat_${row.category}`] = row.spent[m] || 0;
|
||||
});
|
||||
const income = analytics.income[m] || 0;
|
||||
const spent = analytics.totals[m]?.spent || 0;
|
||||
const invested = analytics.investments[m] || 0;
|
||||
entry.savingsRate =
|
||||
income > 0 ? Math.round(((income - spent - invested) / income) * 100) : null;
|
||||
return entry;
|
||||
});
|
||||
|
||||
// Horizontal category bar chart for selected month
|
||||
const categoryChartData = [...categoryRows].reverse();
|
||||
const chartHeight = Math.max(categoryChartData.length * 36, 120);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header + month selector */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Budget</h2>
|
||||
<h2 className="text-xl font-semibold">Analytics</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedMonth(prevMonth(selectedMonth))}
|
||||
@@ -94,7 +295,9 @@ export default function BudgetPage() {
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<span className="text-sm font-medium min-w-36 text-center">{formatMonth(selectedMonth)}</span>
|
||||
<span className="text-sm font-medium min-w-36 text-center">
|
||||
{formatMonth(selectedMonth)}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setSelectedMonth(nextMonth(selectedMonth))}
|
||||
className="p-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm leading-none"
|
||||
@@ -105,211 +308,294 @@ export default function BudgetPage() {
|
||||
</div>
|
||||
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className={`grid gap-4 ${hasIncome ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-3"}`}>
|
||||
{hasIncome && (
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
|
||||
<p className="text-xs text-zinc-500 mb-1">Total Budgeted</p>
|
||||
<p className="text-2xl font-semibold">${totalBudgeted.toFixed(2)}</p>
|
||||
<p className="text-xs text-zinc-500 mb-1">Income</p>
|
||||
<p className="text-2xl font-semibold text-emerald-400">{fmtExact(totals.income)}</p>
|
||||
<p className="text-xs text-zinc-500 mt-1">received</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
|
||||
<p className="text-xs text-zinc-500 mb-1">Total Spent</p>
|
||||
<p
|
||||
className={`text-2xl font-semibold ${
|
||||
totalBudgeted > 0 && totalSpent > totalBudgeted ? "text-red-400" : ""
|
||||
}`}
|
||||
>
|
||||
${totalSpent.toFixed(2)}
|
||||
<p className="text-xs text-zinc-500 mb-1">Expenses</p>
|
||||
<p className="text-2xl font-semibold">{fmtExact(totals.spent)}</p>
|
||||
<p className={`text-xs mt-1 ${deltaColor(spentDelta)}`}>
|
||||
{spentDelta === 0 || lastTotals.spent === 0 ? (
|
||||
<span className="text-zinc-500">split-adjusted</span>
|
||||
) : (
|
||||
`${spentDelta > 0 ? "+" : ""}${fmtExact(spentDelta)} vs ${formatShortMonth(prevMonth(selectedMonth))}`
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{(hasInvestments || totals.investments > 0) && (
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
|
||||
<p className="text-xs text-zinc-500 mb-1">Over Budget</p>
|
||||
<p className="text-xs text-zinc-500 mb-1">Invested</p>
|
||||
<p className="text-2xl font-semibold text-indigo-400">{fmtExact(totals.investments)}</p>
|
||||
<p className="text-xs text-zinc-500 mt-1">shares / ETFs</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
|
||||
<p className="text-xs text-zinc-500 mb-1">{hasIncome ? "Net Cash" : "Largest Category"}</p>
|
||||
{hasIncome ? (
|
||||
<>
|
||||
<p
|
||||
className={`text-2xl font-semibold ${
|
||||
overBudgetCount > 0 ? "text-red-400" : "text-emerald-400"
|
||||
}`}
|
||||
className={`text-2xl font-semibold ${totals.net >= 0 ? "text-emerald-400" : "text-red-400"}`}
|
||||
>
|
||||
{overBudgetCount} {overBudgetCount === 1 ? "category" : "categories"}
|
||||
{totals.net >= 0 ? "+" : ""}
|
||||
{fmtExact(totals.net)}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500 mt-1">income − expenses − invested</p>
|
||||
</>
|
||||
) : largestCategory ? (
|
||||
<>
|
||||
<p className="text-2xl font-semibold">{fmtExact(largestCategory.spent)}</p>
|
||||
<p className="text-xs text-zinc-400 mt-1">{formatCategory(largestCategory.category)}</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-2xl font-semibold text-zinc-600">—</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Budget table for current month */}
|
||||
{/* Cashflow chart — stacked expense categories + optional savings rate line */}
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium">
|
||||
{hasIncome ? "Cashflow — 6 Months" : "Monthly Spending by Category"}
|
||||
</h3>
|
||||
{hasIncome && (
|
||||
<div className="flex items-center gap-3 text-xs text-zinc-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-0.5 bg-amber-400 inline-block" />
|
||||
Savings Rate
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-2.5 h-2.5 rounded-sm bg-emerald-500 inline-block" />
|
||||
Income
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={240}>
|
||||
<ComposedChart
|
||||
data={cashflowData}
|
||||
margin={{ top: 4, right: hasIncome ? 48 : 8, bottom: 0, left: 8 }}
|
||||
onClick={(data) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const month = (data as any)?.activePayload?.[0]?.payload?.month as string | undefined;
|
||||
if (month) setSelectedMonth(month);
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fill: "#71717a", fontSize: 12 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
tick={{ fill: "#71717a", fontSize: 11 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `$${v}`}
|
||||
width={56}
|
||||
/>
|
||||
{hasIncome && (
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
tick={{ fill: "#71717a", fontSize: 11 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `${v}%`}
|
||||
domain={[-20, 100]}
|
||||
width={36}
|
||||
/>
|
||||
)}
|
||||
<Tooltip content={<CashflowTooltip />} cursor={{ fill: "rgba(255,255,255,0.04)" }} />
|
||||
|
||||
{/* Income bar (ungrouped, green) */}
|
||||
{hasIncome && (
|
||||
<Bar
|
||||
yAxisId="left"
|
||||
dataKey="income"
|
||||
fill="#22c55e"
|
||||
radius={[3, 3, 0, 0]}
|
||||
maxBarSize={32}
|
||||
opacity={0.85}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Stacked expense category bars */}
|
||||
{expenseCategories.map((cat, i) => (
|
||||
<Bar
|
||||
key={cat}
|
||||
yAxisId="left"
|
||||
dataKey={`cat_${cat}`}
|
||||
stackId="expenses"
|
||||
fill={CATEGORY_COLORS[cat] || "#71717a"}
|
||||
radius={i === expenseCategories.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0]}
|
||||
maxBarSize={32}
|
||||
>
|
||||
{cashflowData.map((entry) => (
|
||||
<Cell
|
||||
key={entry.month as string}
|
||||
fill={
|
||||
entry.month === selectedMonth
|
||||
? CATEGORY_COLORS[cat] || "#71717a"
|
||||
: `${CATEGORY_COLORS[cat] || "#71717a"}99`
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
))}
|
||||
|
||||
{/* Savings rate line */}
|
||||
{hasIncome && (
|
||||
<Line
|
||||
yAxisId="right"
|
||||
dataKey="savingsRate"
|
||||
stroke="#fbbf24"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#fbbf24", r: 3 }}
|
||||
activeDot={{ r: 5 }}
|
||||
connectNulls={false}
|
||||
/>
|
||||
)}
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Category color legend */}
|
||||
{expenseCategories.length > 0 && (
|
||||
<div className="flex flex-wrap gap-x-3 gap-y-1 mt-3 pt-3 border-t border-zinc-800">
|
||||
{expenseCategories.map((cat) => (
|
||||
<span key={cat} className="flex items-center gap-1 text-xs text-zinc-500">
|
||||
<span
|
||||
className="w-2 h-2 rounded-sm shrink-0"
|
||||
style={{ background: CATEGORY_COLORS[cat] || "#71717a" }}
|
||||
/>
|
||||
{formatCategory(cat)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Spending by category — horizontal bar chart */}
|
||||
{categoryChartData.length > 0 && (
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
|
||||
<h3 className="text-sm font-medium mb-4">
|
||||
Spending by Category — {formatMonth(selectedMonth)}
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={chartHeight}>
|
||||
<BarChart
|
||||
data={categoryChartData}
|
||||
layout="vertical"
|
||||
margin={{ top: 0, right: 8, bottom: 0, left: 8 }}
|
||||
>
|
||||
<XAxis
|
||||
type="number"
|
||||
tick={{ fill: "#71717a", fontSize: 11 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `$${v}`}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="category"
|
||||
width={120}
|
||||
tick={{ fill: "#a1a1aa", fontSize: 12 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={formatCategory}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value) => [fmtExact(Number(value)), "Spent"]}
|
||||
contentStyle={TOOLTIP_STYLE}
|
||||
labelFormatter={(label) => formatCategory(String(label))}
|
||||
labelStyle={{ color: "#a1a1aa" }}
|
||||
cursor={{ fill: "rgba(255,255,255,0.04)" }}
|
||||
/>
|
||||
<Bar dataKey="spent" radius={[0, 4, 4, 0]}>
|
||||
{categoryChartData.map((entry) => (
|
||||
<Cell
|
||||
key={entry.category}
|
||||
fill={CATEGORY_COLORS[entry.category] || "#6366f1"}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category breakdown table — with expandable rows */}
|
||||
{categoryRows.length > 0 && (
|
||||
<div className="bg-zinc-900 border border-zinc-700 rounded-xl overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-zinc-800">
|
||||
<h3 className="text-sm font-medium">
|
||||
Spending Breakdown — {formatMonth(selectedMonth)}
|
||||
</h3>
|
||||
</div>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-800">
|
||||
<th className="text-left px-4 py-3 text-xs text-zinc-500 font-medium">Category</th>
|
||||
<th className="text-right px-4 py-3 text-xs text-zinc-500 font-medium">Budget</th>
|
||||
<th className="text-right px-4 py-3 text-xs text-zinc-500 font-medium">Spent</th>
|
||||
<th className="text-right px-4 py-3 text-xs text-zinc-500 font-medium">Remaining</th>
|
||||
<th className="px-4 py-3 text-xs text-zinc-500 font-medium w-36">Progress</th>
|
||||
<th className="text-right px-4 py-3 text-xs text-zinc-500 font-medium"># Txns</th>
|
||||
<th className="text-left px-4 py-2 text-xs text-zinc-500 font-medium">Category</th>
|
||||
<th className="text-right px-4 py-2 text-xs text-zinc-500 font-medium">Spent</th>
|
||||
<th className="text-right px-4 py-2 text-xs text-zinc-500 font-medium"># Txns</th>
|
||||
<th className="text-right px-4 py-2 text-xs text-zinc-500 font-medium">% of Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{budgetsLoading || analyticsLoading ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-8 text-center text-zinc-500">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : tableRows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-8 text-center text-zinc-500">
|
||||
No spending data for this month. Set a budget for any category below.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
tableRows.map(({ cat, spent, txCount, budget, limit, remaining, pct }) => (
|
||||
<tr key={cat} className="border-b border-zinc-800/50 hover:bg-zinc-800/30">
|
||||
<td className="px-4 py-3 font-medium">{formatCategory(cat)}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
{editingCategory === cat ? (
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<input
|
||||
autoFocus
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleBudgetSave(cat);
|
||||
if (e.key === "Escape") {
|
||||
setEditingCategory(null);
|
||||
setEditValue("");
|
||||
}
|
||||
}}
|
||||
className="w-24 bg-zinc-800 border border-zinc-600 rounded px-2 py-1 text-right text-sm"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleBudgetSave(cat)}
|
||||
className="text-xs text-emerald-400 hover:text-emerald-300 px-1"
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingCategory(null);
|
||||
setEditValue("");
|
||||
}}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300 px-1"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingCategory(cat);
|
||||
setEditValue(limit?.toString() || "");
|
||||
}}
|
||||
className="text-zinc-300 hover:text-white underline-offset-2 hover:underline"
|
||||
>
|
||||
{limit !== null ? (
|
||||
`$${limit.toFixed(2)}`
|
||||
) : (
|
||||
<span className="text-zinc-600 italic">Set...</span>
|
||||
)}
|
||||
</button>
|
||||
{budget && (
|
||||
<button
|
||||
onClick={() => deleteBudget.mutate(budget.id)}
|
||||
className="text-zinc-600 hover:text-red-400 text-xs ml-1"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">${spent.toFixed(2)}</td>
|
||||
<td
|
||||
className={`px-4 py-3 text-right ${
|
||||
remaining !== null
|
||||
? remaining < 0
|
||||
? "text-red-400"
|
||||
: "text-emerald-400"
|
||||
: "text-zinc-600"
|
||||
{categoryRows.map(({ category, spent, txCount }) => {
|
||||
const isExpanded = expandedCategory === category;
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
key={category}
|
||||
className={`border-b border-zinc-800/50 cursor-pointer select-none transition-colors ${
|
||||
isExpanded ? "bg-zinc-800/40" : "hover:bg-zinc-800/30"
|
||||
}`}
|
||||
onClick={() =>
|
||||
setExpandedCategory(isExpanded ? null : category)
|
||||
}
|
||||
>
|
||||
{remaining !== null ? `$${remaining.toFixed(2)}` : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{pct !== null ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-zinc-800 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${barColor(pct)}`}
|
||||
style={{ width: `${Math.min(pct, 100)}%` }}
|
||||
<td className="px-4 py-2.5 font-medium">
|
||||
<span className="flex items-center gap-2">
|
||||
<span
|
||||
className="w-2 h-2 rounded-sm shrink-0"
|
||||
style={{ background: CATEGORY_COLORS[category] || "#71717a" }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-zinc-400 w-10 text-right">
|
||||
{pct.toFixed(0)}%
|
||||
{formatCategory(category)}
|
||||
<span className="text-zinc-600 text-xs ml-1">
|
||||
{isExpanded ? "▲" : "▼"}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-zinc-600 text-xs">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-zinc-400">{txCount}</td>
|
||||
<td className="px-4 py-2.5 text-right tabular-nums">{fmtExact(spent)}</td>
|
||||
<td className="px-4 py-2.5 text-right text-zinc-400">{txCount}</td>
|
||||
<td className="px-4 py-2.5 text-right text-zinc-400 tabular-nums">
|
||||
{totals.spent > 0 ? ((spent / totals.spent) * 100).toFixed(1) : "0.0"}%
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
{isExpanded && (
|
||||
<CategoryPanel
|
||||
key={`panel-${category}`}
|
||||
category={category}
|
||||
selectedMonth={selectedMonth}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Add budget for any category not yet shown */}
|
||||
<div>
|
||||
<p className="text-xs text-zinc-500 mb-2">Set budget for another category:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{CATEGORIES.filter((c) => !allCategories.has(c)).map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => {
|
||||
setEditingCategory(cat);
|
||||
setEditValue("");
|
||||
}}
|
||||
className="px-3 py-1.5 text-xs rounded-lg border border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-zinc-200"
|
||||
>
|
||||
{formatCategory(cat)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{editingCategory && !allCategories.has(editingCategory) && (
|
||||
<div className="flex items-center gap-2 mt-3">
|
||||
<span className="text-sm font-medium">{formatCategory(editingCategory)}</span>
|
||||
<input
|
||||
autoFocus
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleBudgetSave(editingCategory);
|
||||
if (e.key === "Escape") {
|
||||
setEditingCategory(null);
|
||||
setEditValue("");
|
||||
}
|
||||
}}
|
||||
className="w-28 bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
|
||||
placeholder="Budget amount"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleBudgetSave(editingCategory)}
|
||||
className="px-3 py-1.5 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 6-month trend table */}
|
||||
{analytics && analytics.months.length > 0 && (
|
||||
{analytics.months.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-zinc-400 mb-3">6-Month Trend</h3>
|
||||
<div className="overflow-x-auto rounded-xl border border-zinc-700">
|
||||
@@ -322,9 +608,12 @@ export default function BudgetPage() {
|
||||
{analytics.months.map((m) => (
|
||||
<th
|
||||
key={m}
|
||||
className="text-right px-3 py-2 text-zinc-500 font-medium whitespace-nowrap"
|
||||
className={`text-right px-3 py-2 font-medium whitespace-nowrap cursor-pointer hover:text-zinc-300 ${
|
||||
m === selectedMonth ? "text-indigo-400" : "text-zinc-500"
|
||||
}`}
|
||||
onClick={() => setSelectedMonth(m)}
|
||||
>
|
||||
{m}
|
||||
{formatShortMonth(m)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
@@ -333,45 +622,105 @@ export default function BudgetPage() {
|
||||
{analytics.rows.map((row) => (
|
||||
<tr key={row.category} className="border-b border-zinc-800/40 hover:bg-zinc-900/30">
|
||||
<td className="px-3 py-2 font-medium sticky left-0 bg-zinc-950">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span
|
||||
className="w-1.5 h-1.5 rounded-sm shrink-0"
|
||||
style={{ background: CATEGORY_COLORS[row.category] || "#71717a" }}
|
||||
/>
|
||||
{formatCategory(row.category)}
|
||||
</span>
|
||||
</td>
|
||||
{analytics.months.map((m) => {
|
||||
const spent = row.spent[m];
|
||||
const budget = row.budget[m];
|
||||
const overBudget =
|
||||
spent !== undefined && budget !== undefined && spent > budget;
|
||||
return (
|
||||
<td
|
||||
key={m}
|
||||
className={`px-3 py-2 text-right tabular-nums ${
|
||||
spent === undefined
|
||||
? "text-zinc-700"
|
||||
: overBudget
|
||||
? "text-red-300 bg-red-950/40"
|
||||
: "text-zinc-300"
|
||||
}`}
|
||||
spent === undefined ? "text-zinc-700" : "text-zinc-300"
|
||||
} ${m === selectedMonth ? "bg-zinc-800/30" : ""}`}
|
||||
>
|
||||
{spent !== undefined ? `$${Number(spent).toFixed(0)}` : "—"}
|
||||
{spent !== undefined ? fmt(spent) : "—"}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
<tr className="border-t-2 border-zinc-700 font-semibold bg-zinc-900/50">
|
||||
<td className="px-3 py-2 sticky left-0 bg-zinc-900">Total</td>
|
||||
{hasIncome && (
|
||||
<tr className="border-b border-zinc-800/40">
|
||||
<td className="px-3 py-2 font-medium sticky left-0 bg-zinc-950 text-emerald-600">
|
||||
Income
|
||||
</td>
|
||||
{analytics.months.map((m) => {
|
||||
const t = analytics.totals[m];
|
||||
const over = t && t.budget > 0 && t.spent > t.budget;
|
||||
const inc = analytics.income[m];
|
||||
return (
|
||||
<td
|
||||
key={m}
|
||||
className={`px-3 py-2 text-right tabular-nums ${over ? "text-red-300" : ""}`}
|
||||
className={`px-3 py-2 text-right tabular-nums text-emerald-500 ${
|
||||
m === selectedMonth ? "bg-zinc-800/30" : ""
|
||||
}`}
|
||||
>
|
||||
${(t?.spent || 0).toFixed(0)}
|
||||
{inc ? fmt(inc) : "—"}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
)}
|
||||
{hasInvestments && (
|
||||
<tr className="border-b border-zinc-800/40">
|
||||
<td className="px-3 py-2 font-medium sticky left-0 bg-zinc-950 text-indigo-500">
|
||||
Invested
|
||||
</td>
|
||||
{analytics.months.map((m) => {
|
||||
const inv = analytics.investments[m];
|
||||
return (
|
||||
<td
|
||||
key={m}
|
||||
className={`px-3 py-2 text-right tabular-nums text-indigo-400 ${
|
||||
m === selectedMonth ? "bg-zinc-800/30" : ""
|
||||
}`}
|
||||
>
|
||||
{inv ? fmt(inv) : "—"}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
)}
|
||||
<tr className="border-t-2 border-zinc-700 font-semibold bg-zinc-900/50">
|
||||
<td className="px-3 py-2 sticky left-0 bg-zinc-900">Expenses</td>
|
||||
{analytics.months.map((m) => {
|
||||
const t = analytics.totals[m];
|
||||
return (
|
||||
<td
|
||||
key={m}
|
||||
className={`px-3 py-2 text-right tabular-nums ${
|
||||
m === selectedMonth ? "bg-zinc-800/30 text-indigo-300" : ""
|
||||
}`}
|
||||
>
|
||||
{fmt(t?.spent || 0)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
{hasIncome && (
|
||||
<tr className="font-semibold bg-zinc-900/50">
|
||||
<td className="px-3 py-2 sticky left-0 bg-zinc-900">Net Cash</td>
|
||||
{analytics.months.map((m) => {
|
||||
const t = analytics.totals[m];
|
||||
const net = t?.net || 0;
|
||||
return (
|
||||
<td
|
||||
key={m}
|
||||
className={`px-3 py-2 text-right tabular-nums ${
|
||||
net >= 0 ? "text-emerald-400" : "text-red-400"
|
||||
} ${m === selectedMonth ? "bg-zinc-800/30" : ""}`}
|
||||
>
|
||||
{net >= 0 ? "+" : ""}
|
||||
{fmt(net)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ const NAV_ITEMS = [
|
||||
{ href: "/transactions", label: "Transactions", icon: "receipt" },
|
||||
{ href: "/statements", label: "Statements", icon: "file-text" },
|
||||
{ href: "/shared", label: "Shared", icon: "users" },
|
||||
{ href: "/budget", label: "Budget", icon: "bar-chart" },
|
||||
{ href: "/budget", label: "Analytics", icon: "bar-chart" },
|
||||
{ href: "/tags", label: "Tags", icon: "tag" },
|
||||
{ href: "/rules", label: "Rules", icon: "settings" },
|
||||
];
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParticipants, useSetSplits, useTransactionSplits, useBulkAction } from "@/lib/hooks";
|
||||
|
||||
interface Split {
|
||||
participant_id: number;
|
||||
share_percent: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
transactionId?: number;
|
||||
transactionIds?: number[];
|
||||
amount?: number;
|
||||
description: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function SplitModal({ transactionId, transactionIds, amount, description, onClose }: Props) {
|
||||
const isBulk = !!transactionIds && transactionIds.length > 0;
|
||||
const singleId = transactionId ?? 0;
|
||||
|
||||
const { data: participants } = useParticipants();
|
||||
const { data: existingSplits } = useTransactionSplits(isBulk ? 0 : singleId);
|
||||
const setSplits = useSetSplits();
|
||||
const bulkAction = useBulkAction();
|
||||
|
||||
const [splits, setSplitsState] = useState<Split[]>([]);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Initialise: bulk always defaults to 100% Me; single loads existing splits
|
||||
useEffect(() => {
|
||||
if (!participants || participants.length === 0) return;
|
||||
const me = participants.find((p) => p.name === "Me");
|
||||
if (isBulk) {
|
||||
if (me) setSplitsState([{ participant_id: me.id, share_percent: 100 }]);
|
||||
} else if (existingSplits && existingSplits.length > 0) {
|
||||
setSplitsState(
|
||||
existingSplits.map((s: { participant_id: number; share_percent: number }) => ({
|
||||
participant_id: s.participant_id,
|
||||
share_percent: Number(s.share_percent),
|
||||
}))
|
||||
);
|
||||
} else if (me) {
|
||||
setSplitsState([{ participant_id: me.id, share_percent: 100 }]);
|
||||
}
|
||||
}, [existingSplits, participants, isBulk]);
|
||||
|
||||
const total = splits.reduce((sum, s) => sum + s.share_percent, 0);
|
||||
|
||||
const toggleParticipant = (id: number) => {
|
||||
setSplitsState((prev) => {
|
||||
const exists = prev.find((s) => s.participant_id === id);
|
||||
if (exists) {
|
||||
return prev.filter((s) => s.participant_id !== id);
|
||||
}
|
||||
// Add with equal split
|
||||
const count = prev.length + 1;
|
||||
const equal = Math.floor(100 / count);
|
||||
const remainder = 100 - equal * count;
|
||||
return [
|
||||
...prev.map((s, i) => ({ ...s, share_percent: equal + (i === 0 ? remainder : 0) })),
|
||||
{ participant_id: id, share_percent: equal },
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
const updateShare = (id: number, value: number) => {
|
||||
setSplitsState((prev) =>
|
||||
prev.map((s) => (s.participant_id === id ? { ...s, share_percent: value } : s))
|
||||
);
|
||||
};
|
||||
|
||||
const splitEvenly = () => {
|
||||
if (splits.length === 0) return;
|
||||
const each = Math.floor(100 / splits.length);
|
||||
const remainder = 100 - each * splits.length;
|
||||
setSplitsState((prev) =>
|
||||
prev.map((s, i) => ({ ...s, share_percent: each + (i === 0 ? remainder : 0) }))
|
||||
);
|
||||
};
|
||||
|
||||
const isPending = isBulk ? bulkAction.isPending : setSplits.isPending;
|
||||
|
||||
const handleSave = async () => {
|
||||
setError("");
|
||||
if (Math.abs(total - 100) > 0.01) {
|
||||
setError(`Shares must sum to 100% (currently ${total.toFixed(1)}%)`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (isBulk) {
|
||||
await bulkAction.mutateAsync({ action: "split", ids: transactionIds!, splits });
|
||||
} else {
|
||||
await setSplits.mutateAsync({ transactionId: singleId, splits });
|
||||
}
|
||||
onClose();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to save splits");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div
|
||||
className="bg-zinc-900 border border-zinc-700 rounded-xl p-6 w-full max-w-md mx-4 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-lg font-semibold mb-1">
|
||||
{isBulk ? `Split ${transactionIds!.length} Transactions` : "Split Transaction"}
|
||||
</h3>
|
||||
<p className="text-sm text-zinc-400 mb-4 truncate">{description}</p>
|
||||
{!isBulk && amount !== undefined && (
|
||||
<p className="text-2xl font-mono font-semibold mb-6">
|
||||
${Number(amount).toFixed(2)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Participant toggles */}
|
||||
<div className="space-y-3 mb-4">
|
||||
{participants?.map((p) => {
|
||||
const split = splits.find((s) => s.participant_id === p.id);
|
||||
const active = !!split;
|
||||
return (
|
||||
<div key={p.id} className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => toggleParticipant(p.id)}
|
||||
className={`w-8 h-8 rounded-full text-sm font-medium flex-shrink-0 transition-colors ${
|
||||
active
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-zinc-800 text-zinc-500 hover:bg-zinc-700"
|
||||
}`}
|
||||
>
|
||||
{p.name.charAt(0).toUpperCase()}
|
||||
</button>
|
||||
<span className="flex-1 text-sm">{p.name}</span>
|
||||
{active && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={99}
|
||||
value={split.share_percent}
|
||||
onChange={(e) => updateShare(p.id, Number(e.target.value))}
|
||||
className="w-24 accent-blue-600"
|
||||
/>
|
||||
<span className="w-12 text-right text-sm font-mono">
|
||||
{split.share_percent}%
|
||||
</span>
|
||||
{!isBulk && amount !== undefined && (
|
||||
<span className="w-20 text-right text-sm text-zinc-400 font-mono">
|
||||
${((amount * split.share_percent) / 100).toFixed(2)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Total indicator */}
|
||||
<div className="flex items-center justify-between mb-4 text-sm">
|
||||
<span className={`font-mono ${Math.abs(total - 100) > 0.01 ? "text-red-400" : "text-green-400"}`}>
|
||||
Total: {total.toFixed(1)}%
|
||||
</span>
|
||||
<button
|
||||
onClick={splitEvenly}
|
||||
className="text-blue-400 hover:text-blue-300 text-xs"
|
||||
>
|
||||
Split evenly
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-sm mb-3">{error}</p>}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isPending || Math.abs(total - 100) > 0.01}
|
||||
className="flex-1 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
{isPending ? "Saving..." : "Save splits"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { NextRequest } from "next/server";
|
||||
import { queryRaw } from "./db";
|
||||
|
||||
export interface CurrentUser {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export async function getCurrentUser(req: NextRequest): Promise<CurrentUser | null> {
|
||||
const email = req.headers.get("x-forwarded-user");
|
||||
|
||||
// Dev fallback: no Traefik header → use participant id=1
|
||||
if (!email) {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
const rows = await queryRaw<CurrentUser>(`SELECT id, name, email FROM participants WHERE id = 1`);
|
||||
return rows[0] || null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const rows = await queryRaw<CurrentUser>(
|
||||
`SELECT id, name, COALESCE(email, '') as email FROM participants WHERE email = $1`,
|
||||
[email]
|
||||
);
|
||||
return rows[0] || null;
|
||||
}
|
||||
@@ -16,6 +16,7 @@ export const CATEGORIES = [
|
||||
"rent",
|
||||
"transfers",
|
||||
"income",
|
||||
"investment",
|
||||
"personal_care",
|
||||
"pets",
|
||||
"gifts",
|
||||
|
||||
+3
-1
@@ -451,7 +451,9 @@ export interface MonthlyAnalyticsRow {
|
||||
export interface MonthlyAnalytics {
|
||||
months: string[];
|
||||
rows: MonthlyAnalyticsRow[];
|
||||
totals: Record<string, { spent: number; budget: number }>;
|
||||
income: Record<string, number>;
|
||||
investments: Record<string, number>;
|
||||
totals: Record<string, { spent: number; income: number; investments: number; net: number }>;
|
||||
}
|
||||
|
||||
export function useBudgets(month: string) {
|
||||
|
||||
Reference in New Issue
Block a user