React App

109 |

118 |

119 |

120 | setSearchTerm(e.target.value)} 123 | /> 124 |

125 | 136 |

137 | 138 | {/* */} 148 |

149 |

158 |

My Transactions

159 | 160 | setSortKey(e.target.value)} 163 | value={sortKey} 164 | > 165 | No Sort 166 | Sort by Date 167 | Sort by Amount 168 | 169 |

177 | 180 | 181 | Import from CSV 182 | 183 | 191 |

192 |

193 | 194 | 195 | 196 | 197 | ); 198 | }; 199 | 200 | export default TransactionSearch; 201 | -------------------------------------------------------------------------------- /src/components/Signup.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | import { auth, provider, db } from "../firebase"; 4 | import { 5 | createUserWithEmailAndPassword, 6 | signInWithEmailAndPassword, 7 | signInWithPopup, 8 | } from "firebase/auth"; 9 | import { doc, getDoc, setDoc } from "firebase/firestore"; 10 | import Header from "./Header"; 11 | import { toast } from "react-toastify"; 12 | 13 | const SignUpSignIn = () => { 14 | const [name, setName] = useState(""); 15 | const [email, setEmail] = useState(""); 16 | const [password, setPassword] = useState(""); 17 | const [confirmPassword, setConfirmPassword] = useState(""); 18 | const [loading, setLoading] = useState(false); 19 | const [flag, setFlag] = useState(false); 20 | const navigate = useNavigate(); 21 | 22 | const createUserDocument = async (user) => { 23 | setLoading(true); 24 | if (!user) return; 25 | 26 | const userRef = doc(db, "users", user.uid); 27 | const userData = await getDoc(userRef); 28 | 29 | if (!userData.exists()) { 30 | const { displayName, email, photoURL } = user; 31 | const createdAt = new Date(); 32 | 33 | try { 34 | await setDoc(userRef, { 35 | name: displayName ? displayName : name, 36 | email, 37 | photoURL: photoURL ? photoURL : "", 38 | createdAt, 39 | }); 40 | toast.success("Account Created!"); 41 | setLoading(false); 42 | } catch (error) { 43 | toast.error(error.message); 44 | console.error("Error creating user document: ", error); 45 | setLoading(false); 46 | } 47 | } 48 | }; 49 | 50 | const signUpWithEmail = async (e) => { 51 | setLoading(true); 52 | e.preventDefault(); 53 | try { 54 | const result = await createUserWithEmailAndPassword( 55 | auth, 56 | email, 57 | password 58 | ); 59 | const user = result.user; 60 | await createUserDocument(user); 61 | toast.success("Successfully Signed Up!"); 62 | setLoading(false); 63 | navigate("/dashboard"); 64 | } catch (error) { 65 | toast.error(error.message); 66 | console.error( 67 | "Error signing up with email and password: ", 68 | error.message 69 | ); 70 | setLoading(false); 71 | } 72 | }; 73 | 74 | const signInWithEmail = async (e) => { 75 | setLoading(true); 76 | e.preventDefault(); 77 | try { 78 | const result = await signInWithEmailAndPassword(auth, email, password); 79 | const user = result.user; 80 | navigate("/dashboard"); 81 | toast.success("Logged In Successfully!"); 82 | setLoading(false); 83 | } catch (error) { 84 | toast.error(error.message); 85 | console.error( 86 | "Error signing in with email and password: ", 87 | error.message 88 | ); 89 | setLoading(false); 90 | } 91 | }; 92 | 93 | const signInWithGoogle = async () => { 94 | setLoading(true); 95 | try { 96 | const result = await signInWithPopup(auth, provider); 97 | const user = result.user; 98 | await createUserDocument(user); 99 | toast.success("User Authenticated Successfully!"); 100 | setLoading(false); 101 | navigate("/dashboard"); 102 | } catch (error) { 103 | setLoading(false); 104 | toast.error(error.message); 105 | console.error("Error signing in with Google: ", error.message); 106 | } 107 | }; 108 | 109 | return ( 110 | <> 111 |

112 |

113 | {flag ? ( 114 |

115 |

116 | Log In on Financely. 117 |

118 | 119 |

120 |

121 | setEmail(e.target.value)} 126 | /> 127 |

128 | 129 |

130 |

Password

131 | setPassword(e.target.value)} 136 | /> 137 |

138 | 139 | 146 | 147 |

148 | 155 |

setFlag(!flag)} 157 | style={{ 158 | textAlign: "center", 159 | marginBottom: 0, 160 | marginTop: "0.5rem", 161 | cursor: "pointer", 162 | }} 163 | > 164 | Or Don't Have An Account? Click Here. 165 |

166 |

167 | ) : ( 168 |

169 |

170 | Sign Up on Financely. 171 |

172 | 173 |

174 |

Full Name

175 | setName(e.target.value)} 180 | /> 181 |

182 |

183 |

184 | setEmail(e.target.value)} 189 | /> 190 |

191 | 192 |

193 |

Password

194 | setPassword(e.target.value)} 199 | /> 200 |

201 | 202 |

203 |

Confirm Password

204 | setConfirmPassword(e.target.value)} 209 | /> 210 |

211 | 212 | 215 | 216 |

217 | 224 |

setFlag(!flag)} 226 | style={{ 227 | textAlign: "center", 228 | marginBottom: 0, 229 | marginTop: "0.5rem", 230 | cursor: "pointer", 231 | }} 232 | > 233 | Or Have An Account Already? Click Here 234 |

235 | {/* */} 238 |

239 | )} 240 |

241 | 242 | ); 243 | }; 244 | 245 | export default SignUpSignIn; 246 | -------------------------------------------------------------------------------- /src/components/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { Card, Row } from "antd"; 3 | import { Line, Pie } from "@ant-design/charts"; 4 | import moment from "moment"; 5 | import TransactionSearch from "./TransactionSearch"; 6 | import Header from "./Header"; 7 | import AddIncomeModal from "./Modals/AddIncome"; 8 | import AddExpenseModal from "./Modals/AddExpense"; 9 | import Cards from "./Cards"; 10 | import NoTransactions from "./NoTransactions"; 11 | import { useAuthState } from "react-firebase-hooks/auth"; 12 | import { auth, db } from "../firebase"; 13 | import { addDoc, collection, getDocs, query } from "firebase/firestore"; 14 | import Loader from "./Loader"; 15 | import { toast } from "react-toastify"; 16 | import { useNavigate } from "react-router-dom"; 17 | import { unparse } from "papaparse"; 18 | 19 | const Dashboard = () => { 20 | const [user] = useAuthState(auth); 21 | 22 | // const sampleTransactions = [ 23 | // { 24 | // name: "Pay day", 25 | // type: "income", 26 | // date: "2023-01-15", 27 | // amount: 2000, 28 | // tag: "salary", 29 | // }, 30 | // { 31 | // name: "Dinner", 32 | // type: "expense", 33 | // date: "2023-01-20", 34 | // amount: 500, 35 | // tag: "food", 36 | // }, 37 | // { 38 | // name: "Books", 39 | // type: "expense", 40 | // date: "2023-01-25", 41 | // amount: 300, 42 | // tag: "education", 43 | // }, 44 | // ]; 45 | const [isExpenseModalVisible, setIsExpenseModalVisible] = useState(false); 46 | const [isIncomeModalVisible, setIsIncomeModalVisible] = useState(false); 47 | const [transactions, setTransactions] = useState([]); 48 | const [loading, setLoading] = useState(false); 49 | const [currentBalance, setCurrentBalance] = useState(0); 50 | const [income, setIncome] = useState(0); 51 | const [expenses, setExpenses] = useState(0); 52 | 53 | const navigate = useNavigate(); 54 | 55 | const processChartData = () => { 56 | const balanceData = []; 57 | const spendingData = {}; 58 | 59 | transactions.forEach((transaction) => { 60 | const monthYear = moment(transaction.date).format("MMM YYYY"); 61 | const tag = transaction.tag; 62 | 63 | if (transaction.type === "income") { 64 | if (balanceData.some((data) => data.month === monthYear)) { 65 | balanceData.find((data) => data.month === monthYear).balance += 66 | transaction.amount; 67 | } else { 68 | balanceData.push({ month: monthYear, balance: transaction.amount }); 69 | } 70 | } else { 71 | if (balanceData.some((data) => data.month === monthYear)) { 72 | balanceData.find((data) => data.month === monthYear).balance -= 73 | transaction.amount; 74 | } else { 75 | balanceData.push({ month: monthYear, balance: -transaction.amount }); 76 | } 77 | 78 | if (spendingData[tag]) { 79 | spendingData[tag] += transaction.amount; 80 | } else { 81 | spendingData[tag] = transaction.amount; 82 | } 83 | } 84 | }); 85 | 86 | const spendingDataArray = Object.keys(spendingData).map((key) => ({ 87 | category: key, 88 | value: spendingData[key], 89 | })); 90 | 91 | return { balanceData, spendingDataArray }; 92 | }; 93 | 94 | const { balanceData, spendingDataArray } = processChartData(); 95 | const showExpenseModal = () => { 96 | setIsExpenseModalVisible(true); 97 | }; 98 | 99 | const showIncomeModal = () => { 100 | setIsIncomeModalVisible(true); 101 | }; 102 | 103 | const handleExpenseCancel = () => { 104 | setIsExpenseModalVisible(false); 105 | }; 106 | 107 | const handleIncomeCancel = () => { 108 | setIsIncomeModalVisible(false); 109 | }; 110 | 111 | useEffect(() => { 112 | fetchTransactions(); 113 | }, []); 114 | 115 | const onFinish = (values, type) => { 116 | const newTransaction = { 117 | type: type, 118 | date: moment(values.date).format("YYYY-MM-DD"), 119 | amount: parseFloat(values.amount), 120 | tag: values.tag, 121 | name: values.name, 122 | }; 123 | 124 | setTransactions([...transactions, newTransaction]); 125 | setIsExpenseModalVisible(false); 126 | setIsIncomeModalVisible(false); 127 | addTransaction(newTransaction); 128 | calculateBalance(); 129 | }; 130 | 131 | const calculateBalance = () => { 132 | let incomeTotal = 0; 133 | let expensesTotal = 0; 134 | 135 | transactions.forEach((transaction) => { 136 | if (transaction.type === "income") { 137 | incomeTotal += transaction.amount; 138 | } else { 139 | expensesTotal += transaction.amount; 140 | } 141 | }); 142 | 143 | setIncome(incomeTotal); 144 | setExpenses(expensesTotal); 145 | setCurrentBalance(incomeTotal - expensesTotal); 146 | }; 147 | 148 | // Calculate the initial balance, income, and expenses 149 | useEffect(() => { 150 | calculateBalance(); 151 | }, [transactions]); 152 | 153 | async function addTransaction(transaction, many) { 154 | try { 155 | const docRef = await addDoc( 156 | collection(db, `users/${user.uid}/transactions`), 157 | transaction 158 | ); 159 | console.log("Document written with ID: ", docRef.id); 160 | if (!many) { 161 | toast.success("Transaction Added!"); 162 | } 163 | } catch (e) { 164 | console.error("Error adding document: ", e); 165 | if (!many) { 166 | toast.error("Couldn't add transaction"); 167 | } 168 | } 169 | } 170 | 171 | async function fetchTransactions() { 172 | setLoading(true); 173 | if (user) { 174 | const q = query(collection(db, `users/${user.uid}/transactions`)); 175 | const querySnapshot = await getDocs(q); 176 | let transactionsArray = []; 177 | querySnapshot.forEach((doc) => { 178 | // doc.data() is never undefined for query doc snapshots 179 | transactionsArray.push(doc.data()); 180 | }); 181 | setTransactions(transactionsArray); 182 | toast.success("Transactions Fetched!"); 183 | } 184 | setLoading(false); 185 | } 186 | 187 | const balanceConfig = { 188 | data: balanceData, 189 | xField: "month", 190 | yField: "balance", 191 | }; 192 | 193 | const spendingConfig = { 194 | data: spendingDataArray, 195 | angleField: "value", 196 | colorField: "category", 197 | }; 198 | 199 | function reset() { 200 | console.log("resetting"); 201 | } 202 | const cardStyle = { 203 | boxShadow: "0px 0px 30px 8px rgba(227, 227, 227, 0.75)", 204 | margin: "2rem", 205 | borderRadius: "0.5rem", 206 | minWidth: "400px", 207 | flex: 1, 208 | }; 209 | 210 | function exportToCsv() { 211 | const csv = unparse(transactions, { 212 | fields: ["name", "type", "date", "amount", "tag"], 213 | }); 214 | const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }); 215 | const url = URL.createObjectURL(blob); 216 | const link = document.createElement("a"); 217 | link.href = url; 218 | link.download = "transactions.csv"; 219 | document.body.appendChild(link); 220 | link.click(); 221 | document.body.removeChild(link); 222 | } 223 | 224 | return ( 225 |

226 |

227 | {loading ? ( 228 | 229 | ) : ( 230 | <> 231 | 240 | 241 | 246 | 251 | {transactions.length === 0 ? ( 252 | 253 | ) : ( 254 | <> 255 | 256 | 257 |

Financial Statistics

258 | 259 | 260 | 261 | 262 |

Total Spending

263 | {spendingDataArray.length == 0 ? ( 264 |

Seems like you haven't spent anything till now...

265 | ) : ( 266 | 267 | )} 268 | 269 | 270 | 271 | )} 272 | 278 | 279 | )} 280 |

281 | ); 282 | }; 283 | 284 | export default Dashboard; 285 | --------------------------------------------------------------------------------

Current Balance

Total Income

Total Expenses

My Transactions

116 | Log In on Financely. 117 |

170 | Sign Up on Financely. 171 |

Financial Statistics

Total Spending