(null);
55 |
56 | const data = [
57 | {
58 | type: "Budget",
59 | amount: budget,
60 | color: "#4BDB6B",
61 | },
62 | { type: "Expenses", amount: expenses, color: "#FF6C6C" },
63 | ];
64 |
65 | useEffect(() => {
66 | const canvas = canvasRef.current;
67 | if (!canvas) {
68 | return;
69 | }
70 |
71 | const context = canvas.getContext("2d");
72 | if (!context) {
73 | return;
74 | }
75 |
76 | drawPie({ context, data });
77 | }, [budget, expenses]);
78 |
79 | return (
80 | // use HTML canvas API to draw a pie chart
81 | setOpened(false)}
32 | centered
33 | title={`Are you sure you want to reset your ${type.toLowerCase()} to 0?`}
34 | >
35 | ({
40 | color:
41 | theme.colorScheme === "dark"
42 | ? theme.colors.dark[1]
43 | : theme.colors.gray[9],
44 | lineHeight: 1.3,
45 | })}
46 | >
47 | This action can be later undone by deleting the transaction.{" "}
48 | {type === "Expenses" &&
49 | "However the expense categories will return and the amount will be put under Uncategorized"}
50 |
51 |
52 | {
55 | // sets the value of expenses/budget to 0
56 | resetAmount(type);
57 | setOpened(false);
58 | addHistoryElement({
59 | label: `${type} has been reset to 0`,
60 | amount: prevAmount,
61 | id: crypto.randomUUID(),
62 | type: `${type} Reset`,
63 | dateCreated: "", // dateCreated passes an empty string here as the actual date creation is handled in the addHisotyrElement function
64 | category: `${type} Reset`,
65 | });
66 | if (type === "Expenses") {
67 | // set the isused property on all items in the available categories array to false since all categories have 0 amounts now that the expenses have been reset
68 | setAvailableCategories((prev) => {
69 | const arr: AvailableCategories[] = JSON.parse(
70 | JSON.stringify(prev)
71 | );
72 | arr.forEach((c) => {
73 | c.isused = "false";
74 | });
75 | return arr;
76 | });
77 | }
78 | // navigates to home page
79 | navigate("/");
80 | }}
81 | >
82 | Reset {type}
83 |
84 | setOpened(false)}>Cancel
85 |
86 |
87 |
88 |
89 | ({
93 | color:
94 | theme.colorScheme === "dark"
95 | ? theme.colors.dark[0]
96 | : theme.colors.gray[9],
97 | })}
98 | >
99 | Reset Your {type}
100 |
101 | ({
104 | color:
105 | theme.colorScheme === "dark"
106 | ? theme.colors.dark[1]
107 | : theme.colors.gray[9],
108 | })}
109 | >
110 | Resets your {type.toLowerCase()} back to 0
111 |
112 | setOpened(true)}>
113 | Reset {type}
114 |
115 |
116 |
117 | );
118 | };
119 |
120 | export default ResetValueModal;
121 |
--------------------------------------------------------------------------------
/src/components/SetBudget.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { Button, TextInput } from "@mantine/core";
4 | import HistoryContext from "../store/HistoryContext";
5 | import CategoriesContext from "../store/CategoriesContext"
6 |
7 | const SetBudget = () => {
8 | const { addHistoryElement } = useContext(HistoryContext);
9 | const { addCategory, getTotalAmount } = useContext(CategoriesContext);
10 |
11 | const [value, setValue] = useState(0);
12 | const navigate = useNavigate();
13 | return (
14 |
15 | setValue(Number.parseFloat(e.currentTarget.value))}
17 | mt={20}
18 | size="md"
19 | w="40%"
20 | placeholder="Ex: 5000"
21 | label="Enter your budget"
22 | withAsterisk
23 | />
24 | {
27 | // checks that the user inputted valid values
28 | if (value <= 0 || Number.isNaN(value)) {
29 | alert("Invalid Entry. Make sure the amount is greater than zero.");
30 | } else {
31 | const budget = getTotalAmount("Budget");
32 | addCategory({
33 | label: "Budget",
34 | id: crypto.randomUUID(),
35 | amount: -1*budget,
36 | });
37 | addCategory({
38 | label: "Budget",
39 | id: crypto.randomUUID(),
40 | amount: value,
41 | });
42 | // navigates back to home page
43 | navigate("/");
44 | addHistoryElement({
45 | label: "Budget has been set to $" + value,
46 | id: crypto.randomUUID(),
47 | amount: value,
48 | type: "Budget",
49 | dateCreated: "", // dateCreated passes an empty string here as the actual date creation is handled in the addHisotyrElement function
50 | category: "Budget",
51 | });
52 | }
53 | }}
54 | >
55 | Set Budget
56 |
57 |
58 | );
59 | };
60 |
61 | export default SetBudget;
62 |
--------------------------------------------------------------------------------
/src/layout/PageContainer.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | type PageContainerProps = {
4 | children: ReactNode;
5 | };
6 |
7 | const PageContainer = ({ children }: PageContainerProps) => {
8 | return {children}
;
9 | };
10 |
11 | export default PageContainer;
12 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 |
5 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
6 |
7 | ,
9 | )
10 |
--------------------------------------------------------------------------------
/src/pages/AddBudgetPage.tsx:
--------------------------------------------------------------------------------
1 | import { Divider, Text } from "@mantine/core";
2 | import AddToBudget from "../components/AddToBudget";
3 | import SetBudget from "../components/SetBudget";
4 | import PageContainer from "../layout/PageContainer";
5 | import { useContext } from "react";
6 | import ResetValueModal from "../components/ResetValueModal";
7 | import CategoriesContext from "../store/CategoriesContext";
8 |
9 | const AddBudgetPage = () => {
10 | const { getTotalAmount } = useContext(CategoriesContext);
11 | const budget = getTotalAmount("Budget");
12 |
13 | return (
14 |
15 | ({
19 | color:
20 | theme.colorScheme === "dark"
21 | ? theme.colors.dark[0]
22 | : theme.colors.gray[9],
23 | })}
24 | >
25 | Set Your Income / Budget
26 |
27 | ({
30 | color:
31 | theme.colorScheme === "dark"
32 | ? theme.colors.dark[1]
33 | : theme.colors.gray[9],
34 | })}
35 | >
36 | Sets your income / budget to the entered value.
37 |
38 | ({
44 | color:
45 | theme.colorScheme === "dark"
46 | ? theme.colors.dark[0]
47 | : theme.colors.gray[9],
48 | })}
49 | >
50 | Add an Income Source
51 |
52 | ({
55 | color:
56 | theme.colorScheme === "dark"
57 | ? theme.colors.dark[1]
58 | : theme.colors.gray[9],
59 | })}
60 | >
61 | Adds on to your current income / budget amount.
62 |
63 |
67 | );
68 | };
69 |
70 | export default AddBudgetPage;
71 |
--------------------------------------------------------------------------------
/src/pages/AddExpensePage.tsx:
--------------------------------------------------------------------------------
1 | import { Divider, Text } from "@mantine/core";
2 | import AddToExpenses from "../components/AddToExpenses";
3 | import PageContainer from "../layout/PageContainer";
4 | import { useContext } from "react";
5 | import ResetValueModal from "../components/ResetValueModal";
6 | import CategoriesContext from "../store/CategoriesContext";
7 |
8 | const AddExpensePage = () => {
9 | const { getTotalAmount } = useContext(CategoriesContext);
10 | const expenses = getTotalAmount("Expenses");
11 |
12 | return (
13 |
14 | ({
18 | color:
19 | theme.colorScheme === "dark"
20 | ? theme.colors.dark[0]
21 | : theme.colors.gray[9],
22 | })}
23 | >
24 | Add an Expense
25 |
26 | ({
29 | color:
30 | theme.colorScheme === "dark"
31 | ? theme.colors.dark[1]
32 | : theme.colors.gray[9],
33 | })}
34 | >
35 | Adds on to your current expense amount.
36 |
37 |
41 | );
42 | };
43 |
44 | export default AddExpensePage;
45 |
--------------------------------------------------------------------------------
/src/pages/DisplayCategoriesPage.tsx:
--------------------------------------------------------------------------------
1 | import { Text } from "@mantine/core";
2 | import DisplayCategories from "../components/DisplayCategories";
3 | import PageContainer from "../layout/PageContainer";
4 |
5 | const DisplayCategoriesPage = () => {
6 | return (
7 |
8 | ({
13 | color:
14 | theme.colorScheme === "dark"
15 | ? theme.colors.dark[1]
16 | : theme.colors.gray[8],
17 | })}
18 | >
19 | Spending Categories
20 |
21 |
23 | );
24 | };
25 |
26 | export default DisplayCategoriesPage;
27 |
--------------------------------------------------------------------------------
/src/pages/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { SimpleGrid, Text } from "@mantine/core";
3 | import DisplayCard from "../components/DisplayCard";
4 | import HistoryStack from "../components/HistoryStack";
5 | import PageContainer from "../layout/PageContainer";
6 | import PieChart from "../components/PieChart";
7 | import CategoriesContext from "../store/CategoriesContext";
8 |
9 | const HomePage = () => {
10 | const { getTotalAmount } = useContext(CategoriesContext);
11 | const budget = getTotalAmount("Budget");
12 | const expenses = getTotalAmount("Expenses");
13 |
14 | return (
15 |
16 | {/* Displays the net balance of the user */}
17 | ({
22 | color:
23 | theme.colorScheme === "dark"
24 | ? theme.colors.dark[1]
25 | : theme.colors.gray[9],
26 | })}
27 | >
28 | YOUR BALANCE IS: ${budget - expenses}
29 |
30 |
31 |
37 |
38 | );
39 | };
40 |
41 | export default HomePage;
42 |
--------------------------------------------------------------------------------
/src/store/AvailableCategoriesContext.tsx:
--------------------------------------------------------------------------------
1 | import { useLocalStorage } from "@mantine/hooks";
2 | import { createContext, ReactNode } from "react";
3 |
4 | type AvailableCategoriesContextProps = {
5 | children: ReactNode;
6 | };
7 |
8 | type AvailableCategories = {
9 | label: string;
10 | value: string;
11 | isused: string;
12 | };
13 |
14 | type CallBack = (prev: AvailableCategories[]) => AvailableCategories[];
15 |
16 | type AvailableCategoriesContextType = {
17 | availableCategories: AvailableCategories[];
18 | setAvailableCategories: (callBack: CallBack) => void;
19 | };
20 |
21 | const AvailableCategoriesContext =
22 | createContext({
23 | availableCategories: [],
24 | setAvailableCategories: (callBack: CallBack) => {},
25 | });
26 |
27 | export function AvailableCategoriesContextProvider({
28 | children,
29 | }: AvailableCategoriesContextProps) {
30 | const [availableCategories, setAvailableCategories] = useLocalStorage<
31 | AvailableCategories[]
32 | >({
33 | key: "multiSelectCategories",
34 | defaultValue: [
35 | {
36 | label: "Entertainment",
37 | value: "Entertainment",
38 | isused: "false",
39 | },
40 | {
41 | label: "Groceries",
42 | value: "Groceries",
43 | isused: "false",
44 | },
45 | { label: "Uncategorized", value: "Uncategorized", isused: "false" },
46 | ],
47 | });
48 |
49 | function setAvailableCategoriesHandler(callBack: CallBack) {
50 | setAvailableCategories(callBack);
51 | }
52 |
53 | const context = {
54 | availableCategories: availableCategories,
55 | setAvailableCategories: setAvailableCategoriesHandler,
56 | };
57 |
58 | return (
59 |
60 | {children}
61 |
62 | );
63 | }
64 |
65 | export default AvailableCategoriesContext;
66 |
--------------------------------------------------------------------------------
/src/store/CategoriesContext.tsx:
--------------------------------------------------------------------------------
1 | import { useLocalStorage } from "@mantine/hooks";
2 | import { createContext, ReactNode, useContext } from "react";
3 | import AvailableCategoriesContext from "./AvailableCategoriesContext";
4 |
5 | type CategoriesContextProps = {
6 | children: ReactNode;
7 | };
8 |
9 | type Category = {
10 | label: string;
11 | id: string;
12 | amount: number;
13 | };
14 |
15 | type AvailableCategories = {
16 | label: string;
17 | value: string;
18 | isused: string;
19 | };
20 |
21 | type CategoriesContextType = {
22 | categories: Category[];
23 | getTotalAmount: (type: string) => number;
24 | resetAmount: (type: string) => void;
25 | setCategories: (categories: Category[]) => void;
26 | addCategory: (newCategory: Category) => void;
27 | deleteCategory: (label: string) => void;
28 | subtractCategoryAmount: (label: string, amount: number) => void;
29 | };
30 |
31 | const CategoriesContext = createContext({
32 | categories: [],
33 | getTotalAmount: (type: string) => {
34 | let total = 0;
35 | return total;
36 | },
37 | resetAmount: (type: string) => {},
38 | setCategories: (categories: Category[]) => {},
39 | addCategory: (newCategory: Category) => {},
40 | deleteCategory: (label: string) => {},
41 | subtractCategoryAmount: (label: string, amount: number) => {},
42 | });
43 |
44 | export function CategoriesContextProvider({
45 | children,
46 | }: CategoriesContextProps) {
47 | const [categories, setCategories] = useLocalStorage({
48 | key: "categories",
49 | defaultValue: [],
50 | });
51 | const { setAvailableCategories } = useContext(AvailableCategoriesContext);
52 |
53 | function setCategoriesHandler(categories: Category[]) {
54 | setCategories(categories);
55 | }
56 |
57 | function getTotalAmount(type: string) {
58 | let total = 0;
59 | if (type === "Expenses") {
60 | categories.forEach((category) => {
61 | if (category.label !== "Budget") total += category.amount;
62 | });
63 | } else {
64 | categories.forEach((category) => {
65 | if (category.label === "Budget") total += category.amount;
66 | });
67 | }
68 | return total;
69 | }
70 |
71 | function resetAmount(type: string) {
72 | setCategories((prev) => {
73 | const arr: Category[] = JSON.parse(JSON.stringify(prev));
74 | const arr2: Category[] = [];
75 | arr.forEach((c) => {
76 | if (type === "Budget") {
77 | if (c.label !== "Budget") {
78 | arr2.push(c);
79 | }
80 | } else {
81 | if (c.label === "Budget") {
82 | arr2.push(c);
83 | }
84 | }
85 | });
86 | return arr2;
87 | });
88 | }
89 |
90 | // Adds a category to the categories state.
91 | // If the category already exists the amount of the category will be adjusted accordingly
92 | function addCategoryHandler(newCategory: Category) {
93 | let arr: Category[] = [];
94 | let count = 0;
95 | setCategories((prev) => {
96 | // create a hard copy of previous categories array
97 | arr = JSON.parse(JSON.stringify(prev));
98 | // if this is the first category to be added then add the category
99 | if (arr.length === 0) {
100 | return [newCategory];
101 | }
102 | // if the category already exists only add the amount of the newCategory otherwise add the newCategory
103 | arr = arr.map((c) => {
104 | if (c.label === newCategory.label) {
105 | c.amount += newCategory.amount;
106 | count++; // used to track if the category already exists. if the category already exists count will get updated to 1
107 | }
108 | return c;
109 | });
110 |
111 | // if count is 0 then the category does not exist and we add it to the array of categories
112 | if (count === 0) {
113 | arr.push(newCategory);
114 | }
115 | return [...arr];
116 | });
117 | }
118 |
119 | // takes in a label and deletes the category with the given label
120 | function deleteCategory(label: string) {
121 | setCategories((prev) => {
122 | return prev.filter((cat) => cat.label !== label);
123 | });
124 | }
125 |
126 | function subtractCategoryAmount(label: string, amount: number) {
127 | setCategories((prev) => {
128 | // create a hard copy of the previous category state
129 | const arr: Category[] = JSON.parse(JSON.stringify(prev));
130 | // array to store cleaned version of categories
131 | const arr2: Category[] = [];
132 | arr.forEach((c) => {
133 | // if the label matches then subtract the amount
134 | if (c.label === label) {
135 | c.amount -= amount;
136 | }
137 | if (c.amount > 0) {
138 | arr2.push(c);
139 | } else {
140 | // if the amount is zero or less then that means the category is not being used therefore set isused for that category in available categories array to false
141 | setAvailableCategories((prev) => {
142 | // create a hard copy of the previous available categories state
143 | const arr3: AvailableCategories[] = JSON.parse(
144 | JSON.stringify(prev)
145 | );
146 | arr3.forEach((category) => {
147 | if (category.label === label) {
148 | category.isused = "false";
149 | }
150 | });
151 | return arr3;
152 | });
153 | }
154 | });
155 | return arr2;
156 | });
157 | }
158 |
159 | const context = {
160 | categories: categories,
161 | getTotalAmount: getTotalAmount,
162 | resetAmount: resetAmount,
163 | setCategories: setCategoriesHandler,
164 | addCategory: addCategoryHandler,
165 | deleteCategory: deleteCategory,
166 | subtractCategoryAmount: subtractCategoryAmount,
167 | };
168 |
169 | return (
170 |
171 | {children}
172 |
173 | );
174 | }
175 |
176 | export default CategoriesContext;
177 |
--------------------------------------------------------------------------------
/src/store/HistoryContext.tsx:
--------------------------------------------------------------------------------
1 | import { useLocalStorage } from "@mantine/hooks";
2 | import { createContext, ReactNode } from "react";
3 |
4 | type HistoryContextProps = {
5 | children: ReactNode;
6 | };
7 |
8 | type HistoryElement = {
9 | id: string;
10 | label: string;
11 | amount: number;
12 | type: string;
13 | dateCreated: string;
14 | category: string;
15 | };
16 |
17 | type HistoryContextType = {
18 | history: HistoryElement[];
19 | setHistory: (history: HistoryElement[]) => void;
20 | addHistoryElement: (element: HistoryElement) => void;
21 | deleteHistoryElement: (id: string) => void;
22 | };
23 |
24 | const HistoryContext = createContext({
25 | history: [],
26 | setHistory: (history: HistoryElement[]) => {},
27 | addHistoryElement: (element: HistoryElement) => {},
28 | deleteHistoryElement: (id: string) => {},
29 | });
30 |
31 | export function HistoryContextProvider({ children }: HistoryContextProps) {
32 | const [history, setHistory] = useLocalStorage({
33 | key: "History",
34 | defaultValue: [],
35 | });
36 |
37 | function setHistoryHandler(history: HistoryElement[]) {
38 | setHistory(history);
39 | }
40 |
41 | // takes in a historyElement item and adds it to the history
42 | function addHistoryElementHandler(element: HistoryElement) {
43 | // creates a new date
44 | var today = new Date();
45 | var date =
46 | today.getDate() +
47 | "/" +
48 | (today.getMonth() + 1) +
49 | "/" +
50 | today.getFullYear();
51 | setHistory((prev: HistoryElement[]) => {
52 | return [
53 | {
54 | label: element.label,
55 | amount: element.amount,
56 | type: element.type,
57 | id: element.id,
58 | dateCreated: date,
59 | category: element.category,
60 | },
61 | ...prev,
62 | ];
63 | });
64 | }
65 |
66 | // takes in an ID and deletes the history element with that ID
67 | function deleteHistoryElementHandler(id: string) {
68 | setHistory((prev) => {
69 | return prev.filter((h) => h.id !== id);
70 | });
71 | }
72 |
73 | const context = {
74 | history: history,
75 | setHistory: setHistoryHandler,
76 | addHistoryElement: addHistoryElementHandler,
77 | deleteHistoryElement: deleteHistoryElementHandler,
78 | };
79 |
80 | return (
81 |
82 | {children}
83 |
84 | );
85 | }
86 |
87 | export default HistoryContext;
88 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///