60 |
65 | {props.children}
66 |
67 |
68 | );
69 | };
70 |
71 | export default SortableItem;
72 |
--------------------------------------------------------------------------------
/client/src/helpers/accounts.ts:
--------------------------------------------------------------------------------
1 | import { IAccount } from "~/models/account";
2 |
3 | /**
4 | * Filters out accounts that are either hidden or marked as deleted.
5 | *
6 | * This function iterates through the provided array of accounts and excludes any account
7 | * that satisfies either of the following conditions:
8 | * - The account is marked as hidden (hideAccount is truthy).
9 | * - The account has a non-null deleted field.
10 | *
11 | * @param {IAccount[]} accounts - An array of account objects to filter.
12 | * @returns {IAccount[]} An array containing only the visible accounts.
13 | */
14 | export const filterVisibleAccounts = (accounts: IAccount[]): IAccount[] =>
15 | accounts.filter((a: IAccount) => !(a.hideAccount || a.deleted !== null));
16 |
17 | /**
18 | * Calculates and returns the total current balance from an array of account objects.
19 | *
20 | * @param accounts - An array of objects implementing the IAccount interface.
21 | * @returns The sum of the currentBalance properties of all accounts. If the accounts array is empty, the function returns 0.
22 | */
23 | export const sumAccountsTotalBalance = (accounts: IAccount[]) => {
24 | if (accounts.length > 0) {
25 | return accounts.reduce((n, { currentBalance }) => n + currentBalance, 0);
26 | }
27 |
28 | return 0;
29 | };
30 |
31 | /**
32 | * Returns accounts matching any of the given types.
33 | *
34 | * @param {IAccount[]} accounts - List of account objects.
35 | * @param {string[]} types - List of types or subtypes to match.
36 | * @returns {IAccount[]} Filtered list of matching accounts.
37 | */
38 | export const getAccountsOfTypes = (
39 | accounts: IAccount[],
40 | types: string[]
41 | ): IAccount[] =>
42 | accounts.filter((a) => types?.includes(a.type) || types?.includes(a.subtype));
43 |
--------------------------------------------------------------------------------
/client/src/helpers/currency.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Converts a number to a formatted USD currency string.
3 | *
4 | * This function formats the provided number as a USD currency string using the Intl.NumberFormat API.
5 | * It allows including cents in the formatted output if specified.
6 | * Adding 0 to the number ensures that negative zero (-0) is avoided.
7 | *
8 | * @param {number} number - The numeric value to convert.
9 | * @param {boolean} [shouldIncludeCents] - Optional boolean flag to include cents in the output.
10 | * @returns {string} The number formatted as USD currency.
11 | */
12 | export const convertNumberToCurrency = (
13 | number: number,
14 | shouldIncludeCents: boolean,
15 | currency: string
16 | ) => {
17 | // Adding 0 to avoid -0 for the output.
18 | return new Intl.NumberFormat("en-US", {
19 | style: "currency",
20 | currency,
21 | maximumFractionDigits: shouldIncludeCents ? 2 : 0,
22 | minimumFractionDigits: shouldIncludeCents ? 2 : 0,
23 | }).format(number + 0);
24 | };
25 |
26 | /**
27 | * Returns the currency symbol for a given currency code.
28 | *
29 | * @param currency - The ISO 4217 currency code (e.g., "USD", "EUR").
30 | * @returns The corresponding currency symbol if defined, otherwise returns the currency code itself.
31 | *
32 | * @example
33 | * getCurrencySymbol("USD"); // Returns "$"
34 | * getCurrencySymbol("EUR"); // Returns "€"
35 | * getCurrencySymbol("INR"); // Returns "INR"
36 | */
37 | export const getCurrencySymbol = (currency?: string): string => {
38 | switch (currency) {
39 | case "USD":
40 | return "$";
41 | case "EUR":
42 | return "€";
43 | case "GBP":
44 | return "£";
45 | case "JPY":
46 | return "¥";
47 | case "CNY":
48 | return "CN¥";
49 | case "AUD":
50 | return "A$";
51 | case "CAD":
52 | return "CA$";
53 | case "NZD":
54 | return "NZ$";
55 | case null:
56 | case undefined:
57 | return ""; // Return an empty string if no currency is provided
58 | default:
59 | return currency; // Return the currency code if no symbol is defined
60 | }
61 | };
62 |
--------------------------------------------------------------------------------
/client/src/helpers/goals.ts:
--------------------------------------------------------------------------------
1 | import { IGoalResponse } from "~/models/goal";
2 | import { ITransaction } from "~/models/transaction";
3 |
4 | /**
5 | * Determines the target amount for a financial goal based on the specified amount and initial amount.
6 | *
7 | * If the initial amount is less than zero, it indicates a debt goal,
8 | * and the target amount becomes the absolute value of that negative initial amount (representing debt payoff).
9 | * Otherwise, it simply uses the passed-in amount.
10 | *
11 | * @param {number} amount - The user-defined goal amount.
12 | * @param {number} initialAmount - The initial balance or debt amount.
13 | * @returns {number} The target amount for the goal.
14 | */
15 | export const getGoalTargetAmount = (
16 | amount: number,
17 | initialAmount: number
18 | ): number => {
19 | if (initialAmount < 0) {
20 | return Math.abs(initialAmount);
21 | }
22 | return amount;
23 | };
24 |
25 | /**
26 | * Summarizes transactions for a specific goal in a given month.
27 | *
28 | * The function filters the provided transactions to include only those belonging
29 | * to accounts associated with the specified goal, then sums up their amounts.
30 | *
31 | * @param {IGoalResponse} goal - The goal object containing the list of associated accounts.
32 | * @param {ITransaction[]} transactionsForMonth - Transactions to evaluate for the given month.
33 | * @returns {number} The total sum of transaction amounts matching the goal's accounts.
34 | */
35 | export const sumTransactionsForGoalForMonth = (
36 | goal: IGoalResponse,
37 | transactionsForMonth: ITransaction[]
38 | ): number =>
39 | transactionsForMonth
40 | .filter((t) => goal.accounts.some((a) => a.id === t.accountID))
41 | .reduce((n, { amount }) => n + amount, 0);
42 |
--------------------------------------------------------------------------------
/client/src/helpers/requests.ts:
--------------------------------------------------------------------------------
1 | import { AxiosError, AxiosResponse } from "axios";
2 |
3 | export interface ValidationError {
4 | title: string;
5 | type: string;
6 | status: number;
7 | errors: object;
8 | }
9 |
10 | /**
11 | * Retrieves a string error message from the provided Axios response.
12 | *
13 | * @param {AxiosResponse | undefined} error - The Axios response from which to extract the error message.
14 | * @returns {string} A string error message if available, or a default error message.
15 | */
16 | const getErrorString = (error: AxiosResponse | undefined): string => {
17 | if (typeof error?.data === "string" && error?.data.length > 0) {
18 | return error.data;
19 | }
20 | return "There was an error with your request.";
21 | };
22 |
23 | /**
24 | * Translates an AxiosError object into a human-readable error message.
25 | *
26 | * @param {AxiosError} error - The error object from an Axios request.
27 | * @returns {string} A human-readable error message.
28 | *
29 | * The function handles specific Axios error codes:
30 | * - "ERR_BAD_REQUEST"
31 | * - "ERR_NETWORK"
32 | * - "ERR_BAD_RESPONSE"
33 | *
34 | * For these error types, it extracts a detailed error message from the response data using getErrorString.
35 | * If none of these specific error codes are matched, it returns a generic unspecified error message.
36 | */
37 | export const translateAxiosError = (error: AxiosError): string => {
38 | if (error.code === "ERR_BAD_REQUEST") {
39 | return getErrorString(error.response);
40 | } else if (error.code === "ERR_NETWORK") {
41 | return getErrorString(error.response);
42 | } else if (error.code === "ERR_BAD_RESPONSE") {
43 | return getErrorString(error.response);
44 | }
45 | return "An unspecified error occurred.";
46 | };
47 |
--------------------------------------------------------------------------------
/client/src/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Checks if two strings are equal ignoring case.
3 | *
4 | * @param {string} string1 - The first string to compare.
5 | * @param {string} string2 - The second string to compare.
6 | * @returns {boolean} True if the strings are equal (ignoring case), false otherwise.
7 | */
8 | export const areStringsEqual = (string1: string, string2: string): boolean =>
9 | string1.toUpperCase() === string2.toUpperCase();
10 |
11 | /**
12 | * Calculates the progress percentage of an amount towards a total.
13 | *
14 | * @param {number} amount - The current amount achieved.
15 | * @param {number} total - The total goal amount.
16 | * @returns {number} The progress as a percentage, capped at 100 if exceeded.
17 | */
18 | export const getProgress = (amount: number, total: number): number => {
19 | const percentage = (amount / total) * 100;
20 | return percentage > 100 ? 100 : percentage;
21 | };
22 |
23 | /**
24 | * Returns the full name of a month given its index.
25 | */
26 | export const months = [...Array(12).keys()].map((key) =>
27 | new Date(0, key).toLocaleString("en", { month: "long" })
28 | );
29 |
30 | /**
31 | * Rounds a number away from zero. For positive numbers, it behaves like Math.round.
32 | * For negative numbers, it rounds away from zero instead of towards zero.
33 | *
34 | * @param {number} value - The number to round.
35 | */
36 | export const roundAwayFromZero = (value: number): number =>
37 | value >= 0 ? Math.round(value) : Math.round(value * -1) * -1;
38 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | place-items: center;
28 | min-width: 320px;
29 | min-height: 100vh;
30 | }
31 |
32 | h1 {
33 | font-size: 3.2em;
34 | line-height: 1.1;
35 | }
36 |
37 | button {
38 | border-radius: 8px;
39 | border: 1px solid transparent;
40 | padding: 0.6em 1.2em;
41 | font-size: 1em;
42 | font-weight: 500;
43 | font-family: inherit;
44 | background-color: #1a1a1a;
45 | cursor: pointer;
46 | transition: border-color 0.25s;
47 | }
48 | button:hover {
49 | border-color: #646cff;
50 | }
51 | button:focus,
52 | button:focus-visible {
53 | outline: 4px auto -webkit-focus-ring-color;
54 | }
55 |
56 | @media (prefers-color-scheme: light) {
57 | :root {
58 | color: #213547;
59 | background-color: #ffffff;
60 | }
61 | a:hover {
62 | color: #747bff;
63 | }
64 | button {
65 | background-color: #f9f9f9;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/client/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import "./index.css";
4 | import App from "~/App";
5 |
6 | createRoot(document.getElementById("root")!).render(
7 | 
3 | 
35 | 
36 |
37 | ## Configuration
38 |
39 | ### Setting up Docker Compose
40 |
41 | This project is deployed using Docker Compose.
42 |
43 | The `compose.yml` and `compose.override.yml` files are used to deploy the app.
44 | Both files are able to deploy the app as is, but it is recommended to at least update the database password.
45 |
46 | See the [wiki](https://github.com/teelur/budget-board/wiki/Deploying-via-Docker-Compose) for more details about configuring the compose override file.
47 |
48 | ### Deploy
49 |
50 | Deploy the app by running the following command:
51 |
52 | ```
53 | docker compose up -d
54 | ```
55 |
56 | You can now access the app at `localhost:6253`.
57 |
58 | Check out the [wiki](https://github.com/teelur/budget-board/wiki) for more details about configuration and using the app :)
59 |
--------------------------------------------------------------------------------
/client/.docker/nginx/conf/default.conf.template:
--------------------------------------------------------------------------------
1 | upstream backend_server {
2 | # This should be the name of the server container and it's configured port
3 | server budget-board-server:8080;
4 | }
5 |
6 | server {
7 | listen ${PORT};
8 |
9 | # You should configure this to the domain that points to this app.
10 | server_name ${VITE_API_URL};
11 |
12 | access_log /var/log/nginx/nginx.vhost.access.log;
13 | error_log /var/log/nginx/nginx.vhost.error.log;
14 |
15 | location / {
16 | # This would be the directory where your React app's static files are stored.
17 | root /usr/share/nginx/html;
18 | try_files ${DOLLAR}uri /index.html;
19 | }
20 |
21 | location /api/ {
22 | # This will redirect a request from this container to our backend container.
23 | proxy_pass http://backend_server/api/;
24 | proxy_set_header Host ${DOLLAR}proxy_host:${DOLLAR}proxy_port;
25 | # These are used to identify the original reverse proxied request
26 | proxy_set_header X-Forwarded-For ${DOLLAR}proxy_add_x_forwarded_for;
27 | proxy_set_header X-Forwarded-Host ${DOLLAR}http_host;
28 | proxy_set_header X-Forwarded-Proto ${DOLLAR}scheme;
29 | }
30 | }
--------------------------------------------------------------------------------
/client/.docker/nginx/conf/nginx-substitute.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | # Make sure your end of line is LF. Otherwise this will cause issues.
3 | export DOLLAR="$"
4 | envsubst < default.conf.template > /etc/nginx/conf.d/default.conf
5 | nginx -g "daemon off;"
--------------------------------------------------------------------------------
/client/.docker/nginx/init-scripts/100-init-project-env-variables.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | set -ex
4 |
5 | # Find the file where environment variables need to be replaced.
6 | projectEnvVariables=$(ls -t /usr/share/nginx/html/assets/projectEnvVariables*.js | head -n1)
7 |
8 | # Replace environment variables
9 | envsubst < "$projectEnvVariables" > ./projectEnvVariables_temp
10 | cp ./projectEnvVariables_temp "$projectEnvVariables"
11 | rm ./projectEnvVariables_temp
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | *.tsbuildinfo
15 |
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | .DS_Store
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 |
--------------------------------------------------------------------------------
/client/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 |
--------------------------------------------------------------------------------
/client/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:23 AS build-stage
2 |
3 | WORKDIR /app
4 |
5 | RUN corepack enable
6 |
7 | COPY ["./package.json", "./yarn.lock", "./.yarnrc.yml", "./"]
8 | RUN yarn install
9 |
10 | COPY . .
11 | RUN yarn run build
12 |
13 | # production stage
14 | FROM nginx:stable-alpine AS production-stage
15 |
16 | COPY --from=build-stage /app/dist /usr/share/nginx/html
17 | COPY .docker/nginx/init-scripts/ /docker-entrypoint.d/
18 |
19 | COPY .docker/nginx/conf/nginx-substitute.sh .
20 | COPY .docker/nginx/conf/default.conf.template .
21 |
22 | EXPOSE ${PORT}
23 | ENTRYPOINT [ "/bin/sh", "nginx-substitute.sh"]
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | export default tseslint.config({
18 | languageOptions: {
19 | // other options...
20 | parserOptions: {
21 | project: ['./tsconfig.node.json', './tsconfig.app.json'],
22 | tsconfigRootDir: import.meta.dirname,
23 | },
24 | },
25 | })
26 | ```
27 |
28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29 | - Optionally add `...tseslint.configs.stylisticTypeChecked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31 |
32 | ```js
33 | // eslint.config.js
34 | import react from 'eslint-plugin-react'
35 |
36 | export default tseslint.config({
37 | // Set the react version
38 | settings: { react: { version: '18.3' } },
39 | plugins: {
40 | // Add the react plugin
41 | react,
42 | },
43 | rules: {
44 | // other rules...
45 | // Enable its recommended rules
46 | ...react.configs.recommended.rules,
47 | ...react.configs['jsx-runtime'].rules,
48 | },
49 | })
50 | ```
51 |
--------------------------------------------------------------------------------
/client/eslint.config.js:
--------------------------------------------------------------------------------
1 | import mantine from "eslint-config-mantine";
2 | import tseslint from "typescript-eslint";
3 |
4 | export default tseslint.config(...mantine, {
5 | ignores: ["**/*.{mjs,cjs,js,d.ts,d.mts}", "./.storybook/main.ts"],
6 | });
7 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |