├── .gitignore
├── frontend
    ├── src
    │   ├── index.css
    │   ├── utils
    │   │   ├── cn.js
    │   │   └── formatDate.js
    │   ├── components
    │   │   ├── ui
    │   │   │   ├── GridBackgroun.jsx
    │   │   │   └── Header.jsx
    │   │   ├── InputField.jsx
    │   │   ├── skeletons
    │   │   │   └── TransactionFormSkeleton.jsx
    │   │   ├── Cards.jsx
    │   │   ├── RadioButton.jsx
    │   │   ├── Card.jsx
    │   │   └── TransactionForm.jsx
    │   ├── graphql
    │   │   ├── mutations
    │   │   │   ├── user.mutation.js
    │   │   │   └── transcation.mutation.js
    │   │   └── queries
    │   │   │   ├── user.query.js
    │   │   │   └── transaction.query.js
    │   ├── pages
    │   │   ├── NotFoundPage.jsx
    │   │   ├── LoginPage.jsx
    │   │   ├── SignUpPage.jsx
    │   │   ├── HomePage.jsx
    │   │   └── TransactionPage.jsx
    │   ├── main.jsx
    │   └── App.jsx
    ├── postcss.config.js
    ├── vite.config.js
    ├── .gitignore
    ├── index.html
    ├── README.md
    ├── .eslintrc.cjs
    ├── package.json
    ├── public
    │   ├── vite.svg
    │   └── 404.svg
    └── tailwind.config.js
├── backend
    ├── resolvers
    │   ├── index.js
    │   ├── user.resolver.js
    │   └── transaction.resolver.js
    ├── db
    │   └── connectDB.js
    ├── models
    │   ├── user.model.js
    │   └── transaction.model.js
    ├── typeDefs
    │   ├── user.typeDef.js
    │   ├── index.js
    │   └── transaction.typeDef.js
    ├── cron.js
    ├── passport
    │   └── passport.config.js
    ├── dummyData
    │   └── data.js
    └── index.js
├── package.json
├── README.md
├── NOTES.md
└── COPY-PASTE.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .env


--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/frontend/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/frontend/src/utils/cn.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs) {
5 | 	return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/frontend/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 | 	plugins: [react()],
 7 | 	server: {
 8 | 		port: 3000,
 9 | 	},
10 | });
11 | 


--------------------------------------------------------------------------------
/backend/resolvers/index.js:
--------------------------------------------------------------------------------
1 | import { mergeResolvers } from "@graphql-tools/merge";
2 | 
3 | import userResolver from "./user.resolver.js";
4 | import transactionResolver from "./transaction.resolver.js";
5 | 
6 | const mergedResolvers = mergeResolvers([userResolver, transactionResolver]);
7 | 
8 | export default mergedResolvers;
9 | 


--------------------------------------------------------------------------------
/backend/db/connectDB.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | export const connectDB = async () => {
 4 | 	try {
 5 | 		const conn = await mongoose.connect(process.env.MONGO_URI);
 6 | 		console.log(`MongoDB Connected: ${conn.connection.host}`);
 7 | 	} catch (err) {
 8 | 		console.error(`Error: ${err.message}`);
 9 | 		process.exit(1);
10 | 	}
11 | };
12 | 


--------------------------------------------------------------------------------
/frontend/.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 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/frontend/src/components/ui/GridBackgroun.jsx:
--------------------------------------------------------------------------------
 1 | const GridBackground = ({ children }) => {
 2 | 	return (
 3 | 		<div className='w-full bg-black text-white bg-grid-white/[0.2] relative'>
 4 | 			<div className='absolute pointer-events-none inset-0 bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]'></div>
 5 | 			{children}
 6 | 		</div>
 7 | 	);
 8 | };
 9 | export default GridBackground;
10 | 


--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # React + 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 | 


--------------------------------------------------------------------------------
/frontend/src/utils/formatDate.js:
--------------------------------------------------------------------------------
 1 | export function formatDate(timestamp) {
 2 | 	const date = new Date(parseInt(timestamp)); // Parse the timestamp to ensure it's an integer representing milliseconds
 3 | 	const options = { day: "2-digit", month: "short", year: "numeric" };
 4 | 	return date.toLocaleDateString("en-US", options);
 5 | }
 6 | 
 7 | // Example usage:
 8 | const timestamp = 1704067200000;
 9 | const formattedDate = formatDate(timestamp);
10 | console.log(formattedDate); // Output: "12 Dec 2023"
11 | 


--------------------------------------------------------------------------------
/frontend/src/graphql/mutations/user.mutation.js:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | 
 3 | export const SIGN_UP = gql`
 4 | 	mutation SignUp($input: SignUpInput!) {
 5 | 		signUp(input: $input) {
 6 | 			_id
 7 | 			name
 8 | 			username
 9 | 		}
10 | 	}
11 | `;
12 | 
13 | export const LOGIN = gql`
14 | 	mutation Login($input: LoginInput!) {
15 | 		login(input: $input) {
16 | 			_id
17 | 			name
18 | 			username
19 | 		}
20 | 	}
21 | `;
22 | 
23 | export const LOGOUT = gql`
24 | 	mutation Logout {
25 | 		logout {
26 | 			message
27 | 		}
28 | 	}
29 | `;
30 | 


--------------------------------------------------------------------------------
/frontend/src/components/InputField.jsx:
--------------------------------------------------------------------------------
 1 | const InputField = ({ label, id, name, type = "text", onChange, value }) => {
 2 | 	return (
 3 | 		<div>
 4 | 			<label htmlFor={id} className='block text-sm font-medium text-gray-700'>
 5 | 				{label}
 6 | 			</label>
 7 | 			<input
 8 | 				className='mt-1 p-2 w-full border rounded-md text-black focus:border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition-colors duration-300'
 9 | 				id={id}
10 | 				type={type}
11 | 				name={name}
12 | 				value={value}
13 | 				onChange={onChange}
14 | 			/>
15 | 		</div>
16 | 	);
17 | };
18 | 
19 | export default InputField;
20 | 


--------------------------------------------------------------------------------
/backend/models/user.model.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const userSchema = new mongoose.Schema(
 4 | 	{
 5 | 		username: {
 6 | 			type: String,
 7 | 			required: true,
 8 | 			unique: true,
 9 | 		},
10 | 		name: {
11 | 			type: String,
12 | 			required: true,
13 | 		},
14 | 		password: {
15 | 			type: String,
16 | 			required: true,
17 | 		},
18 | 		profilePicture: {
19 | 			type: String,
20 | 			default: "",
21 | 		},
22 | 		gender: {
23 | 			type: String,
24 | 			enum: ["male", "female"],
25 | 		},
26 | 	},
27 | 	{ timestamps: true }
28 | );
29 | 
30 | const User = mongoose.model("User", userSchema);
31 | 
32 | export default User;
33 | 


--------------------------------------------------------------------------------
/frontend/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	env: { browser: true, es2020: true },
 4 | 	extends: [
 5 | 		"eslint:recommended",
 6 | 		"plugin:react/recommended",
 7 | 		"plugin:react/jsx-runtime",
 8 | 		"plugin:react-hooks/recommended",
 9 | 	],
10 | 	ignorePatterns: ["dist", ".eslintrc.cjs"],
11 | 	parserOptions: { ecmaVersion: "latest", sourceType: "module" },
12 | 	settings: { react: { version: "18.2" } },
13 | 	plugins: ["react-refresh"],
14 | 	rules: {
15 | 		"react/jsx-no-target-blank": "off",
16 | 		"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
17 | 		"react/prop-types": "off",
18 | 	},
19 | };
20 | 


--------------------------------------------------------------------------------
/frontend/src/graphql/queries/user.query.js:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | 
 3 | export const GET_AUTHENTICATED_USER = gql`
 4 | 	query GetAuthenticatedUser {
 5 | 		authUser {
 6 | 			_id
 7 | 			username
 8 | 			name
 9 | 			profilePicture
10 | 		}
11 | 	}
12 | `;
13 | 
14 | export const GET_USER_AND_TRANSACTIONS = gql`
15 | 	query GetUserAndTransactions($userId: ID!) {
16 | 		user(userId: $userId) {
17 | 			_id
18 | 			name
19 | 			username
20 | 			profilePicture
21 | 			# relationships
22 | 			transactions {
23 | 				_id
24 | 				description
25 | 				paymentType
26 | 				category
27 | 				amount
28 | 				location
29 | 				date
30 | 			}
31 | 		}
32 | 	}
33 | `;
34 | 


--------------------------------------------------------------------------------
/frontend/src/pages/NotFoundPage.jsx:
--------------------------------------------------------------------------------
 1 | const NotFound = () => {
 2 | 	return (
 3 | 		<section>
 4 | 			<div className=' text-white'>
 5 | 				<div className='flex h-screen'>
 6 | 					<div className='m-auto text-center'>
 7 | 						<div>
 8 | 							<img src='/404.svg' alt='404' />
 9 | 						</div>
10 | 						<p className='text-sm md:text-base text-[#F6009B] p-2 mb-4'>
11 | 							The stuff you were looking for {"doesn't"} exist
12 | 						</p>
13 | 						<a
14 | 							href='/'
15 | 							className='bg-transparent hover:bg-[#F6009B] text-[#F6009B] hover:text-white rounded shadow hover:shadow-lg py-2 px-4 border border-[#F6009B] hover:border-transparent'
16 | 						>
17 | 							Take me home
18 | 						</a>
19 | 					</div>
20 | 				</div>
21 | 			</div>
22 | 		</section>
23 | 	);
24 | };
25 | export default NotFound;
26 | 


--------------------------------------------------------------------------------
/frontend/src/graphql/queries/transaction.query.js:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | 
 3 | export const GET_TRANSACTIONS = gql`
 4 | 	query GetTransactions {
 5 | 		transactions {
 6 | 			_id
 7 | 			description
 8 | 			paymentType
 9 | 			category
10 | 			amount
11 | 			location
12 | 			date
13 | 		}
14 | 	}
15 | `;
16 | 
17 | export const GET_TRANSACTION = gql`
18 | 	query GetTransaction($id: ID!) {
19 | 		transaction(transactionId: $id) {
20 | 			_id
21 | 			description
22 | 			paymentType
23 | 			category
24 | 			amount
25 | 			location
26 | 			date
27 | 			user {
28 | 				name
29 | 				username
30 | 				profilePicture
31 | 			}
32 | 		}
33 | 	}
34 | `;
35 | 
36 | export const GET_TRANSACTION_STATISTICS = gql`
37 | 	query GetTransactionStatistics {
38 | 		categoryStatistics {
39 | 			category
40 | 			totalAmount
41 | 		}
42 | 	}
43 | `;
44 | 


--------------------------------------------------------------------------------
/backend/models/transaction.model.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const transactionSchema = new mongoose.Schema({
 4 | 	userId: {
 5 | 		type: mongoose.Schema.Types.ObjectId,
 6 | 		ref: "User",
 7 | 		required: true,
 8 | 	},
 9 | 	description: {
10 | 		type: String,
11 | 		required: true,
12 | 	},
13 | 	paymentType: {
14 | 		type: String,
15 | 		enum: ["cash", "card"],
16 | 		required: true,
17 | 	},
18 | 	category: {
19 | 		type: String,
20 | 		enum: ["saving", "expense", "investment"],
21 | 		required: true,
22 | 	},
23 | 	amount: {
24 | 		type: Number,
25 | 		required: true,
26 | 	},
27 | 	location: {
28 | 		type: String,
29 | 		default: "Unknown",
30 | 	},
31 | 	date: {
32 | 		type: Date,
33 | 		required: true,
34 | 	},
35 | });
36 | 
37 | const Transaction = mongoose.model("Transaction", transactionSchema);
38 | 
39 | export default Transaction;
40 | 


--------------------------------------------------------------------------------
/backend/typeDefs/user.typeDef.js:
--------------------------------------------------------------------------------
 1 | const userTypeDef = `#graphql
 2 |   type User {
 3 |     _id: ID!
 4 |     username: String!
 5 |     name: String!
 6 |     password: String!
 7 |     profilePicture: String
 8 |     gender: String!
 9 |     transactions: [Transaction!]
10 |   }
11 | 
12 |   type Query {
13 |     authUser: User
14 |     user(userId:ID!): User
15 |   }
16 | 
17 |   type Mutation {
18 |     signUp(input: SignUpInput!): User
19 |     login(input: LoginInput!): User
20 |     logout: LogoutResponse
21 |   }
22 | 
23 |   input SignUpInput {
24 |     username: String!
25 |     name: String!
26 |     password: String!
27 |     gender: String!
28 |   }
29 | 
30 |   input LoginInput {
31 |     username: String!
32 |     password: String!
33 |   }
34 | 
35 |   type LogoutResponse {
36 |     message: String!
37 |   }
38 | `;
39 | 
40 | export default userTypeDef;
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "expense-tracker-gql",
 3 | 	"version": "1.0.0",
 4 | 	"description": "",
 5 | 	"main": "index.js",
 6 | 	"scripts": {
 7 | 		"start": "NODE_ENV=production node backend/index.js",
 8 | 		"dev": "NODE_ENV=development nodemon backend/index.js",
 9 | 		"build": "npm install && npm install --prefix frontend && npm run build --prefix frontend"
10 | 	},
11 | 	"type": "module",
12 | 	"keywords": [],
13 | 	"author": "",
14 | 	"license": "ISC",
15 | 	"dependencies": {
16 | 		"@apollo/server": "^4.10.0",
17 | 		"@graphql-tools/merge": "^9.0.3",
18 | 		"bcryptjs": "^2.4.3",
19 | 		"connect-mongodb-session": "^5.0.0",
20 | 		"cron": "^3.1.6",
21 | 		"dotenv": "^16.4.5",
22 | 		"express": "^4.18.2",
23 | 		"express-session": "^1.18.0",
24 | 		"graphql": "^16.8.1",
25 | 		"graphql-passport": "^0.6.8",
26 | 		"mongoose": "^8.2.0",
27 | 		"passport": "^0.7.0"
28 | 	},
29 | 	"devDependencies": {
30 | 		"nodemon": "^3.1.0"
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/frontend/src/graphql/mutations/transcation.mutation.js:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | 
 3 | export const CREATE_TRANSACTION = gql`
 4 | 	mutation CreateTransaction($input: CreateTransactionInput!) {
 5 | 		createTransaction(input: $input) {
 6 | 			_id
 7 | 			description
 8 | 			paymentType
 9 | 			category
10 | 			amount
11 | 			location
12 | 			date
13 | 		}
14 | 	}
15 | `;
16 | 
17 | export const UPDATE_TRANSACTION = gql`
18 | 	mutation UpdateTransaction($input: UpdateTransactionInput!) {
19 | 		updateTransaction(input: $input) {
20 | 			_id
21 | 			description
22 | 			paymentType
23 | 			category
24 | 			amount
25 | 			location
26 | 			date
27 | 		}
28 | 	}
29 | `;
30 | export const DELETE_TRANSACTION = gql`
31 | 	mutation DeleteTransaction($transactionId: ID!) {
32 | 		deleteTransaction(transactionId: $transactionId) {
33 | 			_id
34 | 			description
35 | 			paymentType
36 | 			category
37 | 			amount
38 | 			location
39 | 			date
40 | 		}
41 | 	}
42 | `;
43 | 


--------------------------------------------------------------------------------
/backend/typeDefs/index.js:
--------------------------------------------------------------------------------
 1 | import { mergeTypeDefs } from "@graphql-tools/merge";
 2 | 
 3 | // typeDefs
 4 | import userTypeDef from "./user.typeDef.js";
 5 | import transactionTypeDef from "./transaction.typeDef.js";
 6 | 
 7 | const mergedTypeDefs = mergeTypeDefs([userTypeDef, transactionTypeDef]);
 8 | 
 9 | export default mergedTypeDefs;
10 | 
11 | // Why Merge Type Definitions? 🤔
12 | 
13 | // Modularity: Merging type definitions allows you to keep related schema components in separate files, promoting modularity and organization.
14 | 
15 | // Easier Collaboration: If multiple developers are working on different parts of the schema, merging separate type definitions can make it easier to collaborate without conflicts.
16 | 
17 | // Reuse: You can reuse type definitions across different parts of the schema, potentially reducing duplication.
18 | 
19 | // Clear Separation of Concerns: Each file can focus on a specific domain or type of data, making it easier to understand and maintain.
20 | 


--------------------------------------------------------------------------------
/frontend/src/components/ui/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | const Header = () => {
 4 | 	return (
 5 | 		<div className='mb-10'>
 6 | 			<h1 className='md:text-6xl text-4xl lg:text-8xl font-bold text-center  relative z-50 text-white pt-10'>
 7 | 				Expense <Link to='/'>GQL</Link>
 8 | 			</h1>
 9 | 			<div className='relative mb-10 w-1/2 mx-auto hidden md:block'>
10 | 				{/* Gradients */}
11 | 				<div className='absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm' />
12 | 				<div className='absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4' />
13 | 				<div className='absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm' />
14 | 				<div className='absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4' />
15 | 			</div>
16 | 		</div>
17 | 	);
18 | };
19 | export default Header;
20 | 


--------------------------------------------------------------------------------
/frontend/src/components/skeletons/TransactionFormSkeleton.jsx:
--------------------------------------------------------------------------------
 1 | const TransactionFormSkeleton = () => {
 2 | 	return (
 3 | 		<div className='h-screen max-w-xl mx-auto py-10'>
 4 | 			<h3 className='h-6 bg-gray-200 rounded animate-pulse'></h3>
 5 | 
 6 | 			<ul className='mt-5 flex gap-3'>
 7 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
 8 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
 9 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
10 | 			</ul>
11 | 			<ul className='mt-5 flex gap-3'>
12 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
13 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
14 | 			</ul>
15 | 			<ul className='mt-5 flex gap-3'>
16 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
17 | 			</ul>
18 | 		</div>
19 | 	);
20 | };
21 | export default TransactionFormSkeleton;
22 | 


--------------------------------------------------------------------------------
/frontend/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | import { BrowserRouter } from "react-router-dom";
 6 | import GridBackground from "./components/ui/GridBackgroun.jsx";
 7 | import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
 8 | 
 9 | const client = new ApolloClient({
10 | 	// TODO => Update the uri on production
11 | 	uri: import.meta.env.VITE_NODE_ENV === "development" ? "http://localhost:4000/graphql" : "/graphql", // the URL of our GraphQL server.
12 | 	cache: new InMemoryCache(), // Apollo Client uses to cache query results after fetching them.
13 | 	credentials: "include", // This tells Apollo Client to send cookies along with every request to the server.
14 | });
15 | 
16 | ReactDOM.createRoot(document.getElementById("root")).render(
17 | 	<React.StrictMode>
18 | 		<BrowserRouter>
19 | 			<GridBackground>
20 | 				<ApolloProvider client={client}>
21 | 					<App />
22 | 				</ApolloProvider>
23 | 			</GridBackground>
24 | 		</BrowserRouter>
25 | 	</React.StrictMode>
26 | );
27 | 


--------------------------------------------------------------------------------
/backend/cron.js:
--------------------------------------------------------------------------------
 1 | import cron from "cron";
 2 | import https from "https";
 3 | 
 4 | const URL = "https://graphql-crash-course.onrender.com";
 5 | 
 6 | const job = new cron.CronJob("*/14 * * * *", function () {
 7 | 	https
 8 | 		.get(URL, (res) => {
 9 | 			if (res.statusCode === 200) {
10 | 				console.log("GET request sent successfully");
11 | 			} else {
12 | 				console.log("GET request failed", res.statusCode);
13 | 			}
14 | 		})
15 | 		.on("error", (e) => {
16 | 			console.error("Error while sending request", e);
17 | 		});
18 | });
19 | 
20 | export default job;
21 | 
22 | // CRON JOB EXPLANATION:
23 | // Cron jobs are scheduled tasks that run periodically at fixed intervals or specific times
24 | // send 1 GET request for every 14 minutes
25 | 
26 | // Schedule:
27 | // You define a schedule using a cron expression, which consists of five fields representing:
28 | 
29 | //! MINUTE, HOUR, DAY OF THE MONTH, MONTH, DAY OF THE WEEK
30 | 
31 | //? EXAMPLES && EXPLANATION:
32 | //* 14 * * * * - Every 14 minutes
33 | //* 0 0 * * 0 - At midnight on every Sunday
34 | //* 30 3 15 * * - At 3:30 AM, on the 15th of every month
35 | //* 0 0 1 1 * - At midnight, on January 1st
36 | //* 0 * * * * - Every hour
37 | 


--------------------------------------------------------------------------------
/backend/passport/passport.config.js:
--------------------------------------------------------------------------------
 1 | import passport from "passport";
 2 | import bcrypt from "bcryptjs";
 3 | 
 4 | import User from "../models/user.model.js";
 5 | import { GraphQLLocalStrategy } from "graphql-passport";
 6 | 
 7 | export const configurePassport = async () => {
 8 | 	passport.serializeUser((user, done) => {
 9 | 		console.log("Serializing user");
10 | 		done(null, user.id);
11 | 	});
12 | 
13 | 	passport.deserializeUser(async (id, done) => {
14 | 		console.log("Deserializing user");
15 | 		try {
16 | 			const user = await User.findById(id);
17 | 			done(null, user);
18 | 		} catch (err) {
19 | 			done(err);
20 | 		}
21 | 	});
22 | 
23 | 	passport.use(
24 | 		new GraphQLLocalStrategy(async (username, password, done) => {
25 | 			try {
26 | 				const user = await User.findOne({ username });
27 | 				if (!user) {
28 | 					throw new Error("Invalid username or password");
29 | 				}
30 | 				const validPassword = await bcrypt.compare(password, user.password);
31 | 
32 | 				if (!validPassword) {
33 | 					throw new Error("Invalid username or password");
34 | 				}
35 | 
36 | 				return done(null, user);
37 | 			} catch (err) {
38 | 				return done(err);
39 | 			}
40 | 		})
41 | 	);
42 | };
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GraphQL Crash Course - Build an Expense Tracker App
 2 | 
 3 | ![Demo App](https://i.ibb.co/WHyMscm/Screenshot-42.png)
 4 | 
 5 | [Video Tutorial on Youtube](https://youtu.be/Vr-QHtbmd38)
 6 | 
 7 | Welcome to the MERN GraphQL Expense Tracker App! This project is designed to help you manage your expenses efficiently using a modern tech stack and GraphQL.
 8 | 
 9 | ## Features:
10 | 
11 | -   🌟 Tech stack: MERN (MongoDB, Express.js, React.js, Node.js) + Apollo GraphQL
12 | -   📝 Learn type definitions and resolvers for defining GraphQL schema and data fetching logic
13 | -   🔄 Mutations for modifying data in the GraphQL API and establishing graph relations
14 | -   🎃 Authentication with Passport.js and MongoDB session store
15 | -   🚀 Global state management with Apollo Client
16 | -   🐞 Error handling both on the server and on the client
17 | -   ⭐ Deployment made easy with a platform called Render
18 | -   👾 Cron jobs for scheduled tasks and automation
19 | -   ⏳ And much more!
20 | 
21 | ### Setup .env file
22 | 
23 | ```js
24 | MONGO_URI=...
25 | SESSION_SECRET=...
26 | ```
27 | 
28 | ### Build the app
29 | 
30 | ```shell
31 | npm run build
32 | ```
33 | 
34 | ### Start the app
35 | 
36 | ```shell
37 | npm start
38 | ```
39 | 


--------------------------------------------------------------------------------
/backend/typeDefs/transaction.typeDef.js:
--------------------------------------------------------------------------------
 1 | const transactionTypeDef = `#graphql
 2 |   type Transaction {
 3 |     _id: ID!
 4 |     userId: ID!
 5 |     description: String!
 6 |     paymentType: String!
 7 |     category: String!
 8 |     amount: Float!
 9 |     location: String
10 |     date: String!
11 |     user: User!
12 |   }
13 | 
14 |   type Query {
15 |     transactions: [Transaction!]
16 |     transaction(transactionId:ID!): Transaction
17 |     categoryStatistics: [CategoryStatistics!]
18 |   }
19 | 
20 |   type Mutation {
21 |     createTransaction(input: CreateTransactionInput!): Transaction!
22 |     updateTransaction(input: UpdateTransactionInput!): Transaction!
23 |     deleteTransaction(transactionId:ID!): Transaction!
24 |   }
25 | 
26 |   type CategoryStatistics {
27 |     category: String!
28 |     totalAmount: Float!
29 |   }
30 | 
31 |   input CreateTransactionInput {
32 |     description: String!
33 |     paymentType: String!
34 |     category: String!
35 |     amount: Float!
36 |     date: String!
37 |     location: String
38 |   }
39 | 
40 |   input UpdateTransactionInput {
41 |     transactionId: ID!
42 |     description: String
43 |     paymentType: String
44 |     category: String
45 |     amount: Float
46 |     location: String
47 |     date: String
48 |   }
49 | `;
50 | 
51 | export default transactionTypeDef;
52 | 


--------------------------------------------------------------------------------
/frontend/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { Navigate, Route, Routes } from "react-router-dom";
 2 | import HomePage from "./pages/HomePage";
 3 | import LoginPage from "./pages/LoginPage";
 4 | import SignUpPage from "./pages/SignUpPage";
 5 | import TransactionPage from "./pages/TransactionPage";
 6 | import NotFoundPage from "./pages/NotFoundPage";
 7 | import Header from "./components/ui/Header";
 8 | import { useQuery } from "@apollo/client";
 9 | import { GET_AUTHENTICATED_USER } from "./graphql/queries/user.query";
10 | import { Toaster } from "react-hot-toast";
11 | 
12 | function App() {
13 | 	const { loading, data } = useQuery(GET_AUTHENTICATED_USER);
14 | 
15 | 	if (loading) return null;
16 | 
17 | 	return (
18 | 		<>
19 | 			{data?.authUser && <Header />}
20 | 			<Routes>
21 | 				<Route path='/' element={data.authUser ? <HomePage /> : <Navigate to='/login' />} />
22 | 				<Route path='/login' element={!data.authUser ? <LoginPage /> : <Navigate to='/' />} />
23 | 				<Route path='/signup' element={!data.authUser ? <SignUpPage /> : <Navigate to='/' />} />
24 | 				<Route
25 | 					path='/transaction/:id'
26 | 					element={data.authUser ? <TransactionPage /> : <Navigate to='/login' />}
27 | 				/>
28 | 				<Route path='*' element={<NotFoundPage />} />
29 | 			</Routes>
30 | 			<Toaster />
31 | 		</>
32 | 	);
33 | }
34 | 
35 | export default App;
36 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@apollo/client": "^3.9.5",
14 |     "@tailwindcss/aspect-ratio": "^0.4.2",
15 |     "chart.js": "^4.4.1",
16 |     "clsx": "^2.1.0",
17 |     "expense-tracker-gql": "file:..",
18 |     "framer-motion": "^11.0.6",
19 |     "graphql": "^16.8.1",
20 |     "mini-svg-data-uri": "^1.4.4",
21 |     "react": "^18.2.0",
22 |     "react-chartjs-2": "^5.2.0",
23 |     "react-dom": "^18.2.0",
24 |     "react-hot-toast": "^2.4.1",
25 |     "react-icons": "^5.0.1",
26 |     "react-router-dom": "^6.22.1",
27 |     "tailwind-merge": "^2.2.1"
28 |   },
29 |   "devDependencies": {
30 |     "@types/react": "^18.2.56",
31 |     "@types/react-dom": "^18.2.19",
32 |     "@vitejs/plugin-react": "^4.2.1",
33 |     "autoprefixer": "^10.4.17",
34 |     "eslint": "^8.56.0",
35 |     "eslint-plugin-react": "^7.33.2",
36 |     "eslint-plugin-react-hooks": "^4.6.0",
37 |     "eslint-plugin-react-refresh": "^0.4.5",
38 |     "postcss": "^8.4.35",
39 |     "tailwindcss": "^3.4.1",
40 |     "vite": "^5.1.4"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/frontend/src/components/Cards.jsx:
--------------------------------------------------------------------------------
 1 | import { useQuery } from "@apollo/client";
 2 | import Card from "./Card";
 3 | import { GET_TRANSACTIONS } from "../graphql/queries/transaction.query";
 4 | import { GET_AUTHENTICATED_USER, GET_USER_AND_TRANSACTIONS } from "../graphql/queries/user.query";
 5 | 
 6 | const Cards = () => {
 7 | 	const { data, loading } = useQuery(GET_TRANSACTIONS);
 8 | 	const { data: authUser } = useQuery(GET_AUTHENTICATED_USER);
 9 | 
10 | 	const { data: userAndTransactions } = useQuery(GET_USER_AND_TRANSACTIONS, {
11 | 		variables: {
12 | 			userId: authUser?.authUser?._id,
13 | 		},
14 | 	});
15 | 
16 | 	console.log("userAndTransactions:", userAndTransactions);
17 | 
18 | 	console.log("cards:", data);
19 | 
20 | 	// TODO => ADD RELATIONSHIPS
21 | 	return (
22 | 		<div className='w-full px-10 min-h-[40vh]'>
23 | 			<p className='text-5xl font-bold text-center my-10'>History</p>
24 | 			<div className='w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 justify-start mb-20'>
25 | 				{!loading &&
26 | 					data.transactions.map((transaction) => (
27 | 						<Card key={transaction._id} transaction={transaction} authUser={authUser.authUser} />
28 | 					))}
29 | 			</div>
30 | 			{!loading && data?.transactions?.length === 0 && (
31 | 				<p className='text-2xl font-bold text-center w-full'>No transaction history found.</p>
32 | 			)}
33 | 		</div>
34 | 	);
35 | };
36 | export default Cards;
37 | 


--------------------------------------------------------------------------------
/frontend/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/frontend/src/components/RadioButton.jsx:
--------------------------------------------------------------------------------
 1 | const RadioButton = ({ id, label, onChange, value, checked }) => {
 2 | 	return (
 3 | 		<div className='inline-flex items-center'>
 4 | 			<label className='relative flex items-center p-3 rounded-full cursor-pointer' htmlFor={id}>
 5 | 				<input
 6 | 					name='type'
 7 | 					type='radio'
 8 | 					className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border border-black text-gray-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
 9 | 					id={id}
10 | 					value={value}
11 | 					onChange={onChange}
12 | 					checked={checked}
13 | 				/>
14 | 				<span className='absolute text-gray-900 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100'>
15 | 					<svg
16 | 						xmlns='http://www.w3.org/2000/svg'
17 | 						className='h-3.5 w-3.5'
18 | 						viewBox='0 0 16 16'
19 | 						fill='currentColor'
20 | 					>
21 | 						<circle data-name='ellipse' cx='8' cy='8' r='8'></circle>
22 | 					</svg>
23 | 				</span>
24 | 			</label>
25 | 			<label className='mt-px font-light text-gray-700 cursor-pointer select-none' htmlFor={id}>
26 | 				{label}
27 | 			</label>
28 | 		</div>
29 | 	);
30 | };
31 | 
32 | export default RadioButton;
33 | 


--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import svgToDataUri from "mini-svg-data-uri";
 2 | import { default as flattenColorPalette } from "tailwindcss/lib/util/flattenColorPalette";
 3 | 
 4 | /** @type {import('tailwindcss').Config} */
 5 | export default {
 6 | 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 7 | 	darkMode: "class",
 8 | 	theme: {
 9 | 		// rest of the code
10 | 	},
11 | 	plugins: [
12 | 		addVariablesForColors,
13 | 		function ({ matchUtilities, theme }) {
14 | 			matchUtilities(
15 | 				{
16 | 					"bg-grid": (value) => ({
17 | 						backgroundImage: `url("${svgToDataUri(
18 | 							`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
19 | 						)}")`,
20 | 					}),
21 | 					"bg-grid-small": (value) => ({
22 | 						backgroundImage: `url("${svgToDataUri(
23 | 							`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
24 | 						)}")`,
25 | 					}),
26 | 					"bg-dot": (value) => ({
27 | 						backgroundImage: `url("${svgToDataUri(
28 | 							`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
29 | 						)}")`,
30 | 					}),
31 | 				},
32 | 				{ values: flattenColorPalette(theme("backgroundColor")), type: "color" }
33 | 			);
34 | 		},
35 | 	],
36 | };
37 | 
38 | function addVariablesForColors({ addBase, theme }) {
39 | 	let allColors = flattenColorPalette(theme("colors"));
40 | 	let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]));
41 | 
42 | 	addBase({
43 | 		":root": newVars,
44 | 	});
45 | }
46 | 


--------------------------------------------------------------------------------
/backend/dummyData/data.js:
--------------------------------------------------------------------------------
  1 | // Hardcoded array of 5 users
  2 | const users = [
  3 | 	{
  4 | 		_id: "1",
  5 | 		username: "user1",
  6 | 		name: "User One",
  7 | 		password: "password1",
  8 | 		profilePicture: "profile1.jpg",
  9 | 		gender: "male",
 10 | 	},
 11 | 	{
 12 | 		_id: "2",
 13 | 		username: "user2",
 14 | 		name: "User Two",
 15 | 		password: "password2",
 16 | 		profilePicture: "profile2.jpg",
 17 | 		gender: "female",
 18 | 	},
 19 | 	{
 20 | 		_id: "3",
 21 | 		username: "user3",
 22 | 		name: "User Three",
 23 | 		password: "password3",
 24 | 		profilePicture: "profile3.jpg",
 25 | 		gender: "male",
 26 | 	},
 27 | 	{
 28 | 		_id: "4",
 29 | 		username: "user4",
 30 | 		name: "User Four",
 31 | 		password: "password4",
 32 | 		profilePicture: "profile4.jpg",
 33 | 		gender: "female",
 34 | 	},
 35 | 	{
 36 | 		_id: "5",
 37 | 		username: "user5",
 38 | 		name: "User Five",
 39 | 		password: "password5",
 40 | 		profilePicture: "profile5.jpg",
 41 | 		gender: "male",
 42 | 	},
 43 | ];
 44 | 
 45 | // Hardcoded array of 5 transactions
 46 | const transactions = [
 47 | 	{
 48 | 		_id: "1",
 49 | 		userId: "1",
 50 | 		description: "Transaction One",
 51 | 		paymentType: "CASH",
 52 | 		category: "Category One",
 53 | 		amount: 100.0,
 54 | 		location: "Location One",
 55 | 		date: "2024-01-01",
 56 | 	},
 57 | 	{
 58 | 		_id: "2",
 59 | 		userId: "2",
 60 | 		description: "Transaction Two",
 61 | 		paymentType: "CARD",
 62 | 		category: "Category Two",
 63 | 		amount: 200.0,
 64 | 		location: "Location Two",
 65 | 		date: "2024-01-02",
 66 | 	},
 67 | 	{
 68 | 		_id: "3",
 69 | 		userId: "3",
 70 | 		description: "Transaction Three",
 71 | 		paymentType: "CASH",
 72 | 		category: "Category Three",
 73 | 		amount: 300.0,
 74 | 		location: "Location Three",
 75 | 		date: "2024-01-03",
 76 | 	},
 77 | 	{
 78 | 		_id: "4",
 79 | 		userId: "4",
 80 | 		description: "Transaction Four",
 81 | 		paymentType: "CARD",
 82 | 		category: "Category Four",
 83 | 		amount: 400.0,
 84 | 		location: "Location Four",
 85 | 		date: "2024-01-04",
 86 | 	},
 87 | 	{
 88 | 		_id: "5",
 89 | 		userId: "5",
 90 | 		description: "Transaction Five",
 91 | 		paymentType: "CASH",
 92 | 		category: "Category Five",
 93 | 		amount: 500.0,
 94 | 		location: "Location Five",
 95 | 		date: "2024-01-05",
 96 | 	},
 97 | ];
 98 | 
 99 | // Export the arrays
100 | export { users, transactions };
101 | 


--------------------------------------------------------------------------------
/frontend/src/pages/LoginPage.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import { useState } from "react";
 3 | import InputField from "../components/InputField";
 4 | import { useMutation } from "@apollo/client";
 5 | import { LOGIN } from "../graphql/mutations/user.mutation";
 6 | import toast from "react-hot-toast";
 7 | 
 8 | const LoginPage = () => {
 9 | 	const [loginData, setLoginData] = useState({
10 | 		username: "",
11 | 		password: "",
12 | 	});
13 | 
14 | 	const [login, { loading }] = useMutation(LOGIN, {
15 | 		refetchQueries: ["GetAuthenticatedUser"],
16 | 	});
17 | 
18 | 	const handleChange = (e) => {
19 | 		const { name, value } = e.target;
20 | 		setLoginData((prevData) => ({
21 | 			...prevData,
22 | 			[name]: value,
23 | 		}));
24 | 	};
25 | 
26 | 	const handleSubmit = async (e) => {
27 | 		e.preventDefault();
28 | 		if (!loginData.username || !loginData.password) return toast.error("Please fill in all fields");
29 | 		try {
30 | 			await login({ variables: { input: loginData } });
31 | 		} catch (error) {
32 | 			console.error("Error logging in:", error);
33 | 			toast.error(error.message);
34 | 		}
35 | 	};
36 | 
37 | 	return (
38 | 		<div className='flex justify-center items-center h-screen'>
39 | 			<div className='flex rounded-lg overflow-hidden z-50 bg-gray-300'>
40 | 				<div className='w-full bg-gray-100 min-w-80 sm:min-w-96 flex items-center justify-center'>
41 | 					<div className='max-w-md w-full p-6'>
42 | 						<h1 className='text-3xl font-semibold mb-6 text-black text-center'>Login</h1>
43 | 						<h1 className='text-sm font-semibold mb-6 text-gray-500 text-center'>
44 | 							Welcome back! Log in to your account
45 | 						</h1>
46 | 						<form className='space-y-4' onSubmit={handleSubmit}>
47 | 							<InputField
48 | 								label='Username'
49 | 								id='username'
50 | 								name='username'
51 | 								value={loginData.username}
52 | 								onChange={handleChange}
53 | 							/>
54 | 
55 | 							<InputField
56 | 								label='Password'
57 | 								id='password'
58 | 								name='password'
59 | 								type='password'
60 | 								value={loginData.password}
61 | 								onChange={handleChange}
62 | 							/>
63 | 							<div>
64 | 								<button
65 | 									type='submit'
66 | 									className='w-full bg-black text-white p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:bg-black  focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed
67 | 									'
68 | 									disabled={loading}
69 | 								>
70 | 									{loading ? "Loading..." : "Login"}
71 | 								</button>
72 | 							</div>
73 | 						</form>
74 | 						<div className='mt-4 text-sm text-gray-600 text-center'>
75 | 							<p>
76 | 								{"Don't"} have an account?{" "}
77 | 								<Link to='/signup' className='text-black hover:underline'>
78 | 									Sign Up
79 | 								</Link>
80 | 							</p>
81 | 						</div>
82 | 					</div>
83 | 				</div>
84 | 			</div>
85 | 		</div>
86 | 	);
87 | };
88 | export default LoginPage;
89 | 


--------------------------------------------------------------------------------
/backend/index.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import http from "http";
 3 | import cors from "cors";
 4 | import dotenv from "dotenv";
 5 | import path from "path";
 6 | import passport from "passport";
 7 | import session from "express-session";
 8 | import connectMongo from "connect-mongodb-session";
 9 | 
10 | import { ApolloServer } from "@apollo/server";
11 | import { expressMiddleware } from "@apollo/server/express4";
12 | import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
13 | 
14 | import { buildContext } from "graphql-passport";
15 | 
16 | import mergedResolvers from "./resolvers/index.js";
17 | import mergedTypeDefs from "./typeDefs/index.js";
18 | 
19 | import { connectDB } from "./db/connectDB.js";
20 | import { configurePassport } from "./passport/passport.config.js";
21 | 
22 | import job from "./cron.js";
23 | 
24 | dotenv.config();
25 | configurePassport();
26 | 
27 | job.start();
28 | 
29 | const __dirname = path.resolve();
30 | const app = express();
31 | 
32 | const httpServer = http.createServer(app);
33 | 
34 | const MongoDBStore = connectMongo(session);
35 | 
36 | const store = new MongoDBStore({
37 | 	uri: process.env.MONGO_URI,
38 | 	collection: "sessions",
39 | });
40 | 
41 | store.on("error", (err) => console.log(err));
42 | 
43 | app.use(
44 | 	session({
45 | 		secret: process.env.SESSION_SECRET,
46 | 		resave: false, // this option specifies whether to save the session to the store on every request
47 | 		saveUninitialized: false, // option specifies whether to save uninitialized sessions
48 | 		cookie: {
49 | 			maxAge: 1000 * 60 * 60 * 24 * 7,
50 | 			httpOnly: true, // this option prevents the Cross-Site Scripting (XSS) attacks
51 | 		},
52 | 		store: store,
53 | 	})
54 | );
55 | 
56 | app.use(passport.initialize());
57 | app.use(passport.session());
58 | 
59 | const server = new ApolloServer({
60 | 	typeDefs: mergedTypeDefs,
61 | 	resolvers: mergedResolvers,
62 | 	plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
63 | });
64 | 
65 | // Ensure we wait for our server to start
66 | await server.start();
67 | 
68 | // Set up our Express middleware to handle CORS, body parsing,
69 | // and our expressMiddleware function.
70 | app.use(
71 | 	"/graphql",
72 | 	cors({
73 | 		origin: "http://localhost:3000",
74 | 		credentials: true,
75 | 	}),
76 | 	express.json(),
77 | 	// expressMiddleware accepts the same arguments:
78 | 	// an Apollo Server instance and optional configuration options
79 | 	expressMiddleware(server, {
80 | 		context: async ({ req, res }) => buildContext({ req, res }),
81 | 	})
82 | );
83 | 
84 | // npm run build will build your frontend app, and it will the optimized version of your app
85 | app.use(express.static(path.join(__dirname, "frontend/dist")));
86 | 
87 | app.get("*", (req, res) => {
88 | 	res.sendFile(path.join(__dirname, "frontend/dist", "index.html"));
89 | });
90 | 
91 | // Modified server startup
92 | await new Promise((resolve) => httpServer.listen({ port: 4000 }, resolve));
93 | await connectDB();
94 | 
95 | console.log(`🚀 Server ready at http://localhost:4000/graphql`);
96 | 


--------------------------------------------------------------------------------
/frontend/src/components/Card.jsx:
--------------------------------------------------------------------------------
 1 | import { FaLocationDot } from "react-icons/fa6";
 2 | import { BsCardText } from "react-icons/bs";
 3 | import { MdOutlinePayments } from "react-icons/md";
 4 | import { FaSackDollar } from "react-icons/fa6";
 5 | import { FaTrash } from "react-icons/fa";
 6 | import { HiPencilAlt } from "react-icons/hi";
 7 | import { Link } from "react-router-dom";
 8 | import { formatDate } from "../utils/formatDate";
 9 | import toast from "react-hot-toast";
10 | import { useMutation } from "@apollo/client";
11 | import { DELETE_TRANSACTION } from "../graphql/mutations/transcation.mutation";
12 | 
13 | const categoryColorMap = {
14 | 	saving: "from-green-700 to-green-400",
15 | 	expense: "from-pink-800 to-pink-600",
16 | 	investment: "from-blue-700 to-blue-400",
17 | 	// Add more categories and corresponding color classes as needed
18 | };
19 | 
20 | const Card = ({ transaction, authUser }) => {
21 | 	let { category, amount, location, date, paymentType, description } = transaction;
22 | 	const cardClass = categoryColorMap[category];
23 | 	const [deleteTransaction, { loading }] = useMutation(DELETE_TRANSACTION, {
24 | 		refetchQueries: ["GetTransactions", "GetTransactionStatistics"],
25 | 	});
26 | 
27 | 	// Capitalize the first letter of the description
28 | 	description = description[0]?.toUpperCase() + description.slice(1);
29 | 	category = category[0]?.toUpperCase() + category.slice(1);
30 | 	paymentType = paymentType[0]?.toUpperCase() + paymentType.slice(1);
31 | 
32 | 	const formattedDate = formatDate(date);
33 | 
34 | 	const handleDelete = async () => {
35 | 		try {
36 | 			await deleteTransaction({ variables: { transactionId: transaction._id } });
37 | 			toast.success("Transaction deleted successfully");
38 | 		} catch (error) {
39 | 			console.error("Error deleting transaction:", error);
40 | 			toast.error(error.message);
41 | 		}
42 | 	};
43 | 
44 | 	return (
45 | 		<div className={`rounded-md p-4 bg-gradient-to-br ${cardClass}`}>
46 | 			<div className='flex flex-col gap-3'>
47 | 				<div className='flex flex-row items-center justify-between'>
48 | 					<h2 className='text-lg font-bold text-white'>{category}</h2>
49 | 					<div className='flex items-center gap-2'>
50 | 						{!loading && <FaTrash className={"cursor-pointer"} onClick={handleDelete} />}
51 | 						{loading && <div className='w-6 h-6 border-t-2 border-b-2  rounded-full animate-spin'></div>}
52 | 						<Link to={`/transaction/${transaction._id}`}>
53 | 							<HiPencilAlt className='cursor-pointer' size={20} />
54 | 						</Link>
55 | 					</div>
56 | 				</div>
57 | 				<p className='text-white flex items-center gap-1'>
58 | 					<BsCardText />
59 | 					Description: {description}
60 | 				</p>
61 | 				<p className='text-white flex items-center gap-1'>
62 | 					<MdOutlinePayments />
63 | 					Payment Type: {paymentType}
64 | 				</p>
65 | 				<p className='text-white flex items-center gap-1'>
66 | 					<FaSackDollar />
67 | 					Amount: ${amount}
68 | 				</p>
69 | 				<p className='text-white flex items-center gap-1'>
70 | 					<FaLocationDot />
71 | 					Location: {location || "N/A"}
72 | 				</p>
73 | 				<div className='flex justify-between items-center'>
74 | 					<p className='text-xs text-black font-bold'>{formattedDate}</p>
75 | 					<img src={authUser?.profilePicture} className='h-8 w-8 border rounded-full' alt='' />
76 | 				</div>
77 | 			</div>
78 | 		</div>
79 | 	);
80 | };
81 | export default Card;
82 | 


--------------------------------------------------------------------------------
/backend/resolvers/user.resolver.js:
--------------------------------------------------------------------------------
  1 | import Transaction from "../models/transaction.model.js";
  2 | import User from "../models/user.model.js";
  3 | import bcrypt from "bcryptjs";
  4 | 
  5 | const userResolver = {
  6 | 	Mutation: {
  7 | 		signUp: async (_, { input }, context) => {
  8 | 			try {
  9 | 				const { username, name, password, gender } = input;
 10 | 
 11 | 				if (!username || !name || !password || !gender) {
 12 | 					throw new Error("All fields are required");
 13 | 				}
 14 | 				const existingUser = await User.findOne({ username });
 15 | 				if (existingUser) {
 16 | 					throw new Error("User already exists");
 17 | 				}
 18 | 
 19 | 				const salt = await bcrypt.genSalt(10);
 20 | 				const hashedPassword = await bcrypt.hash(password, salt);
 21 | 
 22 | 				// https://avatar-placeholder.iran.liara.run/
 23 | 				const boyProfilePic = `https://avatar.iran.liara.run/public/boy?username=${username}`;
 24 | 				const girlProfilePic = `https://avatar.iran.liara.run/public/girl?username=${username}`;
 25 | 
 26 | 				const newUser = new User({
 27 | 					username,
 28 | 					name,
 29 | 					password: hashedPassword,
 30 | 					gender,
 31 | 					profilePicture: gender === "male" ? boyProfilePic : girlProfilePic,
 32 | 				});
 33 | 
 34 | 				await newUser.save();
 35 | 				await context.login(newUser);
 36 | 				return newUser;
 37 | 			} catch (err) {
 38 | 				console.error("Error in signUp: ", err);
 39 | 				throw new Error(err.message || "Internal server error");
 40 | 			}
 41 | 		},
 42 | 
 43 | 		login: async (_, { input }, context) => {
 44 | 			try {
 45 | 				const { username, password } = input;
 46 | 				if (!username || !password) throw new Error("All fields are required");
 47 | 				const { user } = await context.authenticate("graphql-local", { username, password });
 48 | 
 49 | 				await context.login(user);
 50 | 				return user;
 51 | 			} catch (err) {
 52 | 				console.error("Error in login:", err);
 53 | 				throw new Error(err.message || "Internal server error");
 54 | 			}
 55 | 		},
 56 | 		logout: async (_, __, context) => {
 57 | 			try {
 58 | 				await context.logout();
 59 | 				context.req.session.destroy((err) => {
 60 | 					if (err) throw err;
 61 | 				});
 62 | 				context.res.clearCookie("connect.sid");
 63 | 
 64 | 				return { message: "Logged out successfully" };
 65 | 			} catch (err) {
 66 | 				console.error("Error in logout:", err);
 67 | 				throw new Error(err.message || "Internal server error");
 68 | 			}
 69 | 		},
 70 | 	},
 71 | 	Query: {
 72 | 		authUser: async (_, __, context) => {
 73 | 			try {
 74 | 				const user = await context.getUser();
 75 | 				return user;
 76 | 			} catch (err) {
 77 | 				console.error("Error in authUser: ", err);
 78 | 				throw new Error("Internal server error");
 79 | 			}
 80 | 		},
 81 | 		user: async (_, { userId }) => {
 82 | 			try {
 83 | 				const user = await User.findById(userId);
 84 | 				return user;
 85 | 			} catch (err) {
 86 | 				console.error("Error in user query:", err);
 87 | 				throw new Error(err.message || "Error getting user");
 88 | 			}
 89 | 		},
 90 | 	},
 91 | 	User: {
 92 | 		transactions: async (parent) => {
 93 | 			try {
 94 | 				const transactions = await Transaction.find({ userId: parent._id });
 95 | 				return transactions;
 96 | 			} catch (err) {
 97 | 				console.log("Error in user.transactions resolver: ", err);
 98 | 				throw new Error(err.message || "Internal server error");
 99 | 			}
100 | 		},
101 | 	},
102 | };
103 | 
104 | export default userResolver;
105 | 


--------------------------------------------------------------------------------
/backend/resolvers/transaction.resolver.js:
--------------------------------------------------------------------------------
  1 | import Transaction from "../models/transaction.model.js";
  2 | import User from "../models/user.model.js";
  3 | 
  4 | const transactionResolver = {
  5 | 	Query: {
  6 | 		transactions: async (_, __, context) => {
  7 | 			try {
  8 | 				if (!context.getUser()) throw new Error("Unauthorized");
  9 | 				const userId = await context.getUser()._id;
 10 | 
 11 | 				const transactions = await Transaction.find({ userId });
 12 | 				return transactions;
 13 | 			} catch (err) {
 14 | 				console.error("Error getting transactions:", err);
 15 | 				throw new Error("Error getting transactions");
 16 | 			}
 17 | 		},
 18 | 		transaction: async (_, { transactionId }) => {
 19 | 			try {
 20 | 				const transaction = await Transaction.findById(transactionId);
 21 | 				return transaction;
 22 | 			} catch (err) {
 23 | 				console.error("Error getting transaction:", err);
 24 | 				throw new Error("Error getting transaction");
 25 | 			}
 26 | 		},
 27 | 		categoryStatistics: async (_, __, context) => {
 28 | 			if (!context.getUser()) throw new Error("Unauthorized");
 29 | 
 30 | 			const userId = context.getUser()._id;
 31 | 			const transactions = await Transaction.find({ userId });
 32 | 			const categoryMap = {};
 33 | 
 34 | 			// const transactions = [
 35 | 			// 	{ category: "expense", amount: 50 },
 36 | 			// 	{ category: "expense", amount: 75 },
 37 | 			// 	{ category: "investment", amount: 100 },
 38 | 			// 	{ category: "saving", amount: 30 },
 39 | 			// 	{ category: "saving", amount: 20 }
 40 | 			// ];
 41 | 
 42 | 			transactions.forEach((transaction) => {
 43 | 				if (!categoryMap[transaction.category]) {
 44 | 					categoryMap[transaction.category] = 0;
 45 | 				}
 46 | 				categoryMap[transaction.category] += transaction.amount;
 47 | 			});
 48 | 
 49 | 			// categoryMap = { expense: 125, investment: 100, saving: 50 }
 50 | 
 51 | 			return Object.entries(categoryMap).map(([category, totalAmount]) => ({ category, totalAmount }));
 52 | 			// return [ { category: "expense", totalAmount: 125 }, { category: "investment", totalAmount: 100 }, { category: "saving", totalAmount: 50 } ]
 53 | 		},
 54 | 	},
 55 | 	Mutation: {
 56 | 		createTransaction: async (_, { input }, context) => {
 57 | 			try {
 58 | 				const newTransaction = new Transaction({
 59 | 					...input,
 60 | 					userId: context.getUser()._id,
 61 | 				});
 62 | 				await newTransaction.save();
 63 | 				return newTransaction;
 64 | 			} catch (err) {
 65 | 				console.error("Error creating transaction:", err);
 66 | 				throw new Error("Error creating transaction");
 67 | 			}
 68 | 		},
 69 | 		updateTransaction: async (_, { input }) => {
 70 | 			try {
 71 | 				const updatedTransaction = await Transaction.findByIdAndUpdate(input.transactionId, input, {
 72 | 					new: true,
 73 | 				});
 74 | 				return updatedTransaction;
 75 | 			} catch (err) {
 76 | 				console.error("Error updating transaction:", err);
 77 | 				throw new Error("Error updating transaction");
 78 | 			}
 79 | 		},
 80 | 		deleteTransaction: async (_, { transactionId }) => {
 81 | 			try {
 82 | 				const deletedTransaction = await Transaction.findByIdAndDelete(transactionId);
 83 | 				return deletedTransaction;
 84 | 			} catch (err) {
 85 | 				console.error("Error deleting transaction:", err);
 86 | 				throw new Error("Error deleting transaction");
 87 | 			}
 88 | 		},
 89 | 	},
 90 | 	Transaction: {
 91 | 		user: async (parent) => {
 92 | 			const userId = parent.userId;
 93 | 			try {
 94 | 				const user = await User.findById(userId);
 95 | 				return user;
 96 | 			} catch (err) {
 97 | 				console.error("Error getting user:", err);
 98 | 				throw new Error("Error getting user");
 99 | 			}
100 | 		},
101 | 	},
102 | };
103 | 
104 | export default transactionResolver;
105 | 


--------------------------------------------------------------------------------
/NOTES.md:
--------------------------------------------------------------------------------
 1 | # graphql package =>
 2 | 
 3 | -   It is the core GraphQL implementation in **JavaScript**.
 4 | -   It provides the functionality to define GraphQL schemas, parse and validate GraphQL queries, execute queries against a schema, and format responses.
 5 | -   graphql is not tied to any specific server or client framework; it's a standalone library that can be used in various JavaScript environments.
 6 | 
 7 | # @apollo/server =>
 8 | 
 9 | -   This package is part of the Apollo ecosystem and is used for building GraphQL servers in Node.js.
10 | -   It provides tools and utilities to create and manage GraphQL schemas, handle incoming GraphQL requests, execute queries, and send responses.
11 | -   @apollo/server is built on top of the popular express framework, making it easy to integrate GraphQL into existing Node.js web applications.
12 | -   Overall, @apollo/server simplifies the process of creating and maintaining GraphQL servers in Node.js environments.
13 | 
14 | # What is GraphQL Schema?
15 | 
16 | -   A GraphQL schema is a fundamental concept in GraphQL.
17 | -   It defines the structure of the data that clients can query and the operations they can perform. A schema in GraphQL typically consists of two main parts: typeDefs and resolvers.
18 | 
19 | # What are TypeDefs? (or Type Definitions)
20 | 
21 | -   Type definitions define the shape of the data available in the GraphQL API. They specify the types of objects that can be queried and the relationships between them.
22 | 
23 | # What are Resolvers?
24 | 
25 | -   Resolvers are functions that determine how to fetch the data associated with each field in the schema.
26 | 
27 | ## Apollo Client
28 | 
29 | -   Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
30 | 
31 | # Features
32 | 
33 | -   Declarative data fetching: Write a query and receive data without manually tracking loading states.
34 | -   Excellent developer experience: Enjoy helpful tooling for TypeScript, Chrome / Firefox devtools, and VS Code.
35 | -   Designed for modern React: Take advantage of the latest React features, such as hooks.
36 | -   Incrementally adoptable: Drop Apollo into any JavaScript app and incorporate it feature by feature.
37 | -   Universally compatible: Use any build setup and any GraphQL API.
38 | -   Community driven: Share knowledge with thousands of developers in the GraphQL community.
39 | 
40 | ### Declarative Data Fetching
41 | 
42 | -   Apollo Client handles the request cycle from start to finish, including tracking loading and error states. There's no middleware or boilerplate code to set up before making your first request, and you don't need to worry about transforming or caching responses. All you have to do is describe the data your component needs and let Apollo Client do the heavy lifting.
43 | 
44 | ```jsx
45 | function ShowDogs() {
46 | 	//  The useQuery hook supports advanced features like an optimistic UI, refetching, and pagination.
47 | 	const { loading, error, data } = useQuery(GET_DOGS);
48 | 	if (error) return <Error />;
49 | 	if (loading) return <Fetching />;
50 | 
51 | 	return <DogList dogs={data.dogs} />;
52 | }
53 | ```
54 | 
55 | ### Caching a graph is not an easy task, but they have spent years solving this problem.
56 | 
57 | ```jsx
58 | import { ApolloClient, InMemoryCache } from "@apollo/client";
59 | 
60 | const client = new ApolloClient({
61 | 	cache: new InMemoryCache(),
62 | });
63 | ```
64 | 
65 | # Installation
66 | 
67 | ```bash
68 | npm install @apollo/client graphql
69 | ```
70 | 
71 | -   **@apollo/client:** This single package contains virtually everything you need to set up Apollo Client. It includes the in-memory cache, local state management, error handling, and a React-based view layer.
72 | 
73 | -   **graphql:** This package provides logic for parsing GraphQL queries.
74 | 


--------------------------------------------------------------------------------
/frontend/src/pages/SignUpPage.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Link } from "react-router-dom";
  3 | import RadioButton from "../components/RadioButton";
  4 | import InputField from "../components/InputField";
  5 | import { useMutation } from "@apollo/client";
  6 | import { SIGN_UP } from "../graphql/mutations/user.mutation";
  7 | import toast from "react-hot-toast";
  8 | 
  9 | const SignUpPage = () => {
 10 | 	const [signUpData, setSignUpData] = useState({
 11 | 		name: "",
 12 | 		username: "",
 13 | 		password: "",
 14 | 		gender: "",
 15 | 	});
 16 | 
 17 | 	const [signup, { loading }] = useMutation(SIGN_UP, {
 18 | 		refetchQueries: ["GetAuthenticatedUser"],
 19 | 	});
 20 | 
 21 | 	const handleSubmit = async (e) => {
 22 | 		e.preventDefault();
 23 | 		try {
 24 | 			await signup({
 25 | 				variables: {
 26 | 					input: signUpData,
 27 | 				},
 28 | 			});
 29 | 		} catch (error) {
 30 | 			console.error("Error:", error);
 31 | 			toast.error(error.message);
 32 | 		}
 33 | 	};
 34 | 
 35 | 	const handleChange = (e) => {
 36 | 		const { name, value, type } = e.target;
 37 | 
 38 | 		if (type === "radio") {
 39 | 			setSignUpData((prevData) => ({
 40 | 				...prevData,
 41 | 				gender: value,
 42 | 			}));
 43 | 		} else {
 44 | 			setSignUpData((prevData) => ({
 45 | 				...prevData,
 46 | 				[name]: value,
 47 | 			}));
 48 | 		}
 49 | 	};
 50 | 
 51 | 	return (
 52 | 		<div className='h-screen flex justify-center items-center'>
 53 | 			<div className='flex rounded-lg overflow-hidden z-50 bg-gray-300'>
 54 | 				<div className='w-full bg-gray-100 min-w-80 sm:min-w-96 flex items-center justify-center'>
 55 | 					<div className='max-w-md w-full p-6'>
 56 | 						<h1 className='text-3xl font-semibold mb-6 text-black text-center'>Sign Up</h1>
 57 | 						<h1 className='text-sm font-semibold mb-6 text-gray-500 text-center'>
 58 | 							Join to keep track of your expenses
 59 | 						</h1>
 60 | 						<form className='space-y-4' onSubmit={handleSubmit}>
 61 | 							<InputField
 62 | 								label='Full Name'
 63 | 								id='name'
 64 | 								name='name'
 65 | 								value={signUpData.name}
 66 | 								onChange={handleChange}
 67 | 							/>
 68 | 							<InputField
 69 | 								label='Username'
 70 | 								id='username'
 71 | 								name='username'
 72 | 								value={signUpData.username}
 73 | 								onChange={handleChange}
 74 | 							/>
 75 | 
 76 | 							<InputField
 77 | 								label='Password'
 78 | 								id='password'
 79 | 								name='password'
 80 | 								type='password'
 81 | 								value={signUpData.password}
 82 | 								onChange={handleChange}
 83 | 							/>
 84 | 							<div className='flex gap-10'>
 85 | 								<RadioButton
 86 | 									id='male'
 87 | 									label='Male'
 88 | 									name='gender'
 89 | 									value='male'
 90 | 									onChange={handleChange}
 91 | 									checked={signUpData.gender === "male"}
 92 | 								/>
 93 | 								<RadioButton
 94 | 									id='female'
 95 | 									label='Female'
 96 | 									name='gender'
 97 | 									value='female'
 98 | 									onChange={handleChange}
 99 | 									checked={signUpData.gender === "female"}
100 | 								/>
101 | 							</div>
102 | 
103 | 							<div>
104 | 								<button
105 | 									type='submit'
106 | 									className='w-full bg-black text-white p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:bg-black  focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed'
107 | 									disabled={loading}
108 | 								>
109 | 									{loading ? "Loading..." : "Sign Up"}
110 | 								</button>
111 | 							</div>
112 | 						</form>
113 | 						<div className='mt-4 text-sm text-gray-600 text-center'>
114 | 							<p>
115 | 								Already have an account?{" "}
116 | 								<Link to='/login' className='text-black hover:underline'>
117 | 									Login here
118 | 								</Link>
119 | 							</p>
120 | 						</div>
121 | 					</div>
122 | 				</div>
123 | 			</div>
124 | 		</div>
125 | 	);
126 | };
127 | 
128 | export default SignUpPage;
129 | 


--------------------------------------------------------------------------------
/frontend/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
  1 | import { Doughnut } from "react-chartjs-2";
  2 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
  3 | 
  4 | import Cards from "../components/Cards";
  5 | import TransactionForm from "../components/TransactionForm";
  6 | 
  7 | import { MdLogout } from "react-icons/md";
  8 | import toast from "react-hot-toast";
  9 | import { useMutation, useQuery } from "@apollo/client";
 10 | import { LOGOUT } from "../graphql/mutations/user.mutation";
 11 | import { GET_TRANSACTION_STATISTICS } from "../graphql/queries/transaction.query";
 12 | import { GET_AUTHENTICATED_USER } from "../graphql/queries/user.query";
 13 | import { useEffect, useState } from "react";
 14 | 
 15 | // const chartData = {
 16 | // 	labels: ["Saving", "Expense", "Investment"],
 17 | // 	datasets: [
 18 | // 		{
 19 | // 			label: "%",
 20 | // 			data: [13, 8, 3],
 21 | // 			backgroundColor: ["rgba(75, 192, 192)", "rgba(255, 99, 132)", "rgba(54, 162, 235)"],
 22 | // 			borderColor: ["rgba(75, 192, 192)", "rgba(255, 99, 132)", "rgba(54, 162, 235, 1)"],
 23 | // 			borderWidth: 1,
 24 | // 			borderRadius: 30,
 25 | // 			spacing: 10,
 26 | // 			cutout: 130,
 27 | // 		},
 28 | // 	],
 29 | // };
 30 | 
 31 | ChartJS.register(ArcElement, Tooltip, Legend);
 32 | 
 33 | const HomePage = () => {
 34 | 	const { data } = useQuery(GET_TRANSACTION_STATISTICS);
 35 | 	const { data: authUserData } = useQuery(GET_AUTHENTICATED_USER);
 36 | 
 37 | 	const [logout, { loading, client }] = useMutation(LOGOUT, {
 38 | 		refetchQueries: ["GetAuthenticatedUser"],
 39 | 	});
 40 | 
 41 | 	const [chartData, setChartData] = useState({
 42 | 		labels: [],
 43 | 		datasets: [
 44 | 			{
 45 | 				label: "$",
 46 | 				data: [],
 47 | 				backgroundColor: [],
 48 | 				borderColor: [],
 49 | 				borderWidth: 1,
 50 | 				borderRadius: 30,
 51 | 				spacing: 10,
 52 | 				cutout: 130,
 53 | 			},
 54 | 		],
 55 | 	});
 56 | 
 57 | 	useEffect(() => {
 58 | 		if (data?.categoryStatistics) {
 59 | 			const categories = data.categoryStatistics.map((stat) => stat.category);
 60 | 			const totalAmounts = data.categoryStatistics.map((stat) => stat.totalAmount);
 61 | 
 62 | 			const backgroundColors = [];
 63 | 			const borderColors = [];
 64 | 
 65 | 			categories.forEach((category) => {
 66 | 				if (category === "saving") {
 67 | 					backgroundColors.push("rgba(75, 192, 192)");
 68 | 					borderColors.push("rgba(75, 192, 192)");
 69 | 				} else if (category === "expense") {
 70 | 					backgroundColors.push("rgba(255, 99, 132)");
 71 | 					borderColors.push("rgba(255, 99, 132)");
 72 | 				} else if (category === "investment") {
 73 | 					backgroundColors.push("rgba(54, 162, 235)");
 74 | 					borderColors.push("rgba(54, 162, 235)");
 75 | 				}
 76 | 			});
 77 | 
 78 | 			setChartData((prev) => ({
 79 | 				labels: categories,
 80 | 				datasets: [
 81 | 					{
 82 | 						...prev.datasets[0],
 83 | 						data: totalAmounts,
 84 | 						backgroundColor: backgroundColors,
 85 | 						borderColor: borderColors,
 86 | 					},
 87 | 				],
 88 | 			}));
 89 | 		}
 90 | 	}, [data]);
 91 | 
 92 | 	const handleLogout = async () => {
 93 | 		try {
 94 | 			await logout();
 95 | 			// Clear the Apollo Client cache FROM THE DOCS
 96 | 			// https://www.apollographql.com/docs/react/caching/advanced-topics/#:~:text=Resetting%20the%20cache,any%20of%20your%20active%20queries
 97 | 			client.resetStore();
 98 | 		} catch (error) {
 99 | 			console.error("Error logging out:", error);
100 | 			toast.error(error.message);
101 | 		}
102 | 	};
103 | 
104 | 	return (
105 | 		<>
106 | 			<div className='flex flex-col gap-6 items-center max-w-7xl mx-auto z-20 relative justify-center'>
107 | 				<div className='flex items-center'>
108 | 					<p className='md:text-4xl text-2xl lg:text-4xl font-bold text-center relative z-50 mb-4 mr-4 bg-gradient-to-r from-pink-600 via-indigo-500 to-pink-400 inline-block text-transparent bg-clip-text'>
109 | 						Spend wisely, track wisely
110 | 					</p>
111 | 					<img
112 | 						src={authUserData?.authUser.profilePicture}
113 | 						className='w-11 h-11 rounded-full border cursor-pointer'
114 | 						alt='Avatar'
115 | 					/>
116 | 					{!loading && <MdLogout className='mx-2 w-5 h-5 cursor-pointer' onClick={handleLogout} />}
117 | 					{/* loading spinner */}
118 | 					{loading && <div className='w-6 h-6 border-t-2 border-b-2 mx-2 rounded-full animate-spin'></div>}
119 | 				</div>
120 | 				<div className='flex flex-wrap w-full justify-center items-center gap-6'>
121 | 					{data?.categoryStatistics.length > 0 && (
122 | 						<div className='h-[330px] w-[330px] md:h-[360px] md:w-[360px]  '>
123 | 							<Doughnut data={chartData} />
124 | 						</div>
125 | 					)}
126 | 
127 | 					<TransactionForm />
128 | 				</div>
129 | 				<Cards />
130 | 			</div>
131 | 		</>
132 | 	);
133 | };
134 | export default HomePage;
135 | 


--------------------------------------------------------------------------------
/frontend/src/components/TransactionForm.jsx:
--------------------------------------------------------------------------------
  1 | import { useMutation } from "@apollo/client";
  2 | import { CREATE_TRANSACTION } from "../graphql/mutations/transcation.mutation";
  3 | import toast from "react-hot-toast";
  4 | 
  5 | const TransactionForm = () => {
  6 | 	// TODO => WHEN RELATIONSHIPS ARE ADDED, CHANGE THE REFETCH QUERY A BIT
  7 | 	const [createTransaction, { loading }] = useMutation(CREATE_TRANSACTION, {
  8 | 		refetchQueries: ["GetTransactions", "GetTransactionStatistics"],
  9 | 	});
 10 | 
 11 | 	const handleSubmit = async (e) => {
 12 | 		e.preventDefault();
 13 | 
 14 | 		const form = e.target;
 15 | 		const formData = new FormData(form);
 16 | 		const transactionData = {
 17 | 			description: formData.get("description"),
 18 | 			paymentType: formData.get("paymentType"),
 19 | 			category: formData.get("category"),
 20 | 			amount: parseFloat(formData.get("amount")),
 21 | 			location: formData.get("location"),
 22 | 			date: formData.get("date"),
 23 | 		};
 24 | 
 25 | 		try {
 26 | 			await createTransaction({ variables: { input: transactionData } });
 27 | 
 28 | 			form.reset();
 29 | 			toast.success("Transaction created successfully");
 30 | 		} catch (error) {
 31 | 			toast.error(error.message);
 32 | 		}
 33 | 	};
 34 | 
 35 | 	return (
 36 | 		<form className='w-full max-w-lg flex flex-col gap-5 px-3' onSubmit={handleSubmit}>
 37 | 			{/* TRANSACTION */}
 38 | 			<div className='flex flex-wrap'>
 39 | 				<div className='w-full'>
 40 | 					<label
 41 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
 42 | 						htmlFor='description'
 43 | 					>
 44 | 						Transaction
 45 | 					</label>
 46 | 					<input
 47 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
 48 | 						id='description'
 49 | 						name='description'
 50 | 						type='text'
 51 | 						required
 52 | 						placeholder='Rent, Groceries, Salary, etc.'
 53 | 					/>
 54 | 				</div>
 55 | 			</div>
 56 | 			{/* PAYMENT TYPE */}
 57 | 			<div className='flex flex-wrap gap-3'>
 58 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
 59 | 					<label
 60 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
 61 | 						htmlFor='paymentType'
 62 | 					>
 63 | 						Payment Type
 64 | 					</label>
 65 | 					<div className='relative'>
 66 | 						<select
 67 | 							className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
 68 | 							id='paymentType'
 69 | 							name='paymentType'
 70 | 						>
 71 | 							<option value={"card"}>Card</option>
 72 | 							<option value={"cash"}>Cash</option>
 73 | 						</select>
 74 | 						<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
 75 | 							<svg
 76 | 								className='fill-current h-4 w-4'
 77 | 								xmlns='http://www.w3.org/2000/svg'
 78 | 								viewBox='0 0 20 20'
 79 | 							>
 80 | 								<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
 81 | 							</svg>
 82 | 						</div>
 83 | 					</div>
 84 | 				</div>
 85 | 
 86 | 				{/* CATEGORY */}
 87 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
 88 | 					<label
 89 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
 90 | 						htmlFor='category'
 91 | 					>
 92 | 						Category
 93 | 					</label>
 94 | 					<div className='relative'>
 95 | 						<select
 96 | 							className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
 97 | 							id='category'
 98 | 							name='category'
 99 | 						>
100 | 							<option value={"saving"}>Saving</option>
101 | 							<option value={"expense"}>Expense</option>
102 | 							<option value={"investment"}>Investment</option>
103 | 						</select>
104 | 						<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
105 | 							<svg
106 | 								className='fill-current h-4 w-4'
107 | 								xmlns='http://www.w3.org/2000/svg'
108 | 								viewBox='0 0 20 20'
109 | 							>
110 | 								<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
111 | 							</svg>
112 | 						</div>
113 | 					</div>
114 | 				</div>
115 | 
116 | 				{/* AMOUNT */}
117 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
118 | 					<label className='block uppercase text-white text-xs font-bold mb-2' htmlFor='amount'>
119 | 						Amount($)
120 | 					</label>
121 | 					<input
122 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
123 | 						id='amount'
124 | 						name='amount'
125 | 						type='number'
126 | 						placeholder='150'
127 | 					/>
128 | 				</div>
129 | 			</div>
130 | 
131 | 			{/* LOCATION */}
132 | 			<div className='flex flex-wrap gap-3'>
133 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
134 | 					<label
135 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
136 | 						htmlFor='location'
137 | 					>
138 | 						Location
139 | 					</label>
140 | 					<input
141 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white'
142 | 						id='location'
143 | 						name='location'
144 | 						type='text'
145 | 						placeholder='New York'
146 | 					/>
147 | 				</div>
148 | 
149 | 				{/* DATE */}
150 | 				<div className='w-full flex-1'>
151 | 					<label className='block uppercase tracking-wide text-white text-xs font-bold mb-2' htmlFor='date'>
152 | 						Date
153 | 					</label>
154 | 					<input
155 | 						type='date'
156 | 						name='date'
157 | 						id='date'
158 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-[11px] px-4 mb-3 leading-tight focus:outline-none
159 | 						 focus:bg-white'
160 | 						placeholder='Select date'
161 | 					/>
162 | 				</div>
163 | 			</div>
164 | 			{/* SUBMIT BUTTON */}
165 | 			<button
166 | 				className='text-white font-bold w-full rounded px-4 py-2 bg-gradient-to-br
167 |           from-pink-500 to-pink-500 hover:from-pink-600 hover:to-pink-600
168 | 						disabled:opacity-70 disabled:cursor-not-allowed'
169 | 				type='submit'
170 | 				disabled={loading}
171 | 			>
172 | 				{loading ? "Loading..." : "Add Transaction"}
173 | 			</button>
174 | 		</form>
175 | 	);
176 | };
177 | 
178 | export default TransactionForm;
179 | 


--------------------------------------------------------------------------------
/frontend/src/pages/TransactionPage.jsx:
--------------------------------------------------------------------------------
  1 | import { useMutation, useQuery } from "@apollo/client";
  2 | import { useEffect, useState } from "react";
  3 | import { useParams } from "react-router-dom";
  4 | import { GET_TRANSACTION, GET_TRANSACTION_STATISTICS } from "../graphql/queries/transaction.query";
  5 | import { UPDATE_TRANSACTION } from "../graphql/mutations/transcation.mutation";
  6 | import toast from "react-hot-toast";
  7 | import TransactionFormSkeleton from "../components/skeletons/TransactionFormSkeleton";
  8 | 
  9 | const TransactionPage = () => {
 10 | 	const { id } = useParams();
 11 | 	const { loading, data } = useQuery(GET_TRANSACTION, {
 12 | 		variables: { id: id },
 13 | 	});
 14 | 
 15 | 	console.log("Transaction", data);
 16 | 
 17 | 	const [updateTransaction, { loading: loadingUpdate }] = useMutation(UPDATE_TRANSACTION, {
 18 | 		// https://github.com/apollographql/apollo-client/issues/5419 => refetchQueries is not working, and here is how we fixed it
 19 | 		refetchQueries: [{ query: GET_TRANSACTION_STATISTICS }],
 20 | 	});
 21 | 
 22 | 	const [formData, setFormData] = useState({
 23 | 		description: data?.transaction?.description || "",
 24 | 		paymentType: data?.transaction?.paymentType || "",
 25 | 		category: data?.transaction?.category || "",
 26 | 		amount: data?.transaction?.amount || "",
 27 | 		location: data?.transaction?.location || "",
 28 | 		date: data?.transaction?.date || "",
 29 | 	});
 30 | 
 31 | 	const handleSubmit = async (e) => {
 32 | 		e.preventDefault();
 33 | 		const amount = parseFloat(formData.amount); // convert amount to number bc by default it is string
 34 | 		// and the reason it's coming from an input field
 35 | 		try {
 36 | 			await updateTransaction({
 37 | 				variables: {
 38 | 					input: {
 39 | 						...formData,
 40 | 						amount,
 41 | 						transactionId: id,
 42 | 					},
 43 | 				},
 44 | 			});
 45 | 			toast.success("Transaction updated successfully");
 46 | 		} catch (error) {
 47 | 			toast.error(error.message);
 48 | 		}
 49 | 	};
 50 | 
 51 | 	const handleInputChange = (e) => {
 52 | 		const { name, value } = e.target;
 53 | 		setFormData((prevFormData) => ({
 54 | 			...prevFormData,
 55 | 			[name]: value,
 56 | 		}));
 57 | 	};
 58 | 
 59 | 	useEffect(() => {
 60 | 		if (data) {
 61 | 			setFormData({
 62 | 				description: data?.transaction?.description,
 63 | 				paymentType: data?.transaction?.paymentType,
 64 | 				category: data?.transaction?.category,
 65 | 				amount: data?.transaction?.amount,
 66 | 				location: data?.transaction?.location,
 67 | 				date: new Date(+data.transaction.date).toISOString().substr(0, 10),
 68 | 			});
 69 | 		}
 70 | 	}, [data]);
 71 | 
 72 | 	if (loading) return <TransactionFormSkeleton />;
 73 | 
 74 | 	return (
 75 | 		<div className='h-screen max-w-4xl mx-auto flex flex-col items-center'>
 76 | 			<p className='md:text-4xl text-2xl lg:text-4xl font-bold text-center relative z-50 mb-4 mr-4 bg-gradient-to-r from-pink-600 via-indigo-500 to-pink-400 inline-block text-transparent bg-clip-text'>
 77 | 				Update this transaction
 78 | 			</p>
 79 | 			<form className='w-full max-w-lg flex flex-col gap-5 px-3 ' onSubmit={handleSubmit}>
 80 | 				{/* TRANSACTION */}
 81 | 				<div className='flex flex-wrap'>
 82 | 					<div className='w-full'>
 83 | 						<label
 84 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
 85 | 							htmlFor='description'
 86 | 						>
 87 | 							Transaction
 88 | 						</label>
 89 | 						<input
 90 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
 91 | 							id='description'
 92 | 							name='description'
 93 | 							type='text'
 94 | 							placeholder='Rent, Groceries, Salary, etc.'
 95 | 							value={formData.description}
 96 | 							onChange={handleInputChange}
 97 | 						/>
 98 | 					</div>
 99 | 				</div>
100 | 				{/* PAYMENT TYPE */}
101 | 				<div className='flex flex-wrap gap-3'>
102 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
103 | 						<label
104 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
105 | 							htmlFor='paymentType'
106 | 						>
107 | 							Payment Type
108 | 						</label>
109 | 						<div className='relative'>
110 | 							<select
111 | 								className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
112 | 								id='paymentType'
113 | 								name='paymentType'
114 | 								onChange={handleInputChange}
115 | 								defaultValue={formData.paymentType}
116 | 							>
117 | 								<option value={"card"}>Card</option>
118 | 								<option value={"cash"}>Cash</option>
119 | 							</select>
120 | 							<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
121 | 								<svg
122 | 									className='fill-current h-4 w-4'
123 | 									xmlns='http://www.w3.org/2000/svg'
124 | 									viewBox='0 0 20 20'
125 | 								>
126 | 									<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
127 | 								</svg>
128 | 							</div>
129 | 						</div>
130 | 					</div>
131 | 
132 | 					{/* CATEGORY */}
133 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
134 | 						<label
135 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
136 | 							htmlFor='category'
137 | 						>
138 | 							Category
139 | 						</label>
140 | 						<div className='relative'>
141 | 							<select
142 | 								className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
143 | 								id='category'
144 | 								name='category'
145 | 								onChange={handleInputChange}
146 | 								defaultValue={formData.category}
147 | 							>
148 | 								<option value={"saving"}>Saving</option>
149 | 								<option value={"expense"}>Expense</option>
150 | 								<option value={"investment"}>Investment</option>
151 | 							</select>
152 | 							<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
153 | 								<svg
154 | 									className='fill-current h-4 w-4'
155 | 									xmlns='http://www.w3.org/2000/svg'
156 | 									viewBox='0 0 20 20'
157 | 								>
158 | 									<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
159 | 								</svg>
160 | 							</div>
161 | 						</div>
162 | 					</div>
163 | 
164 | 					{/* AMOUNT */}
165 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
166 | 						<label className='block uppercase text-white text-xs font-bold mb-2' htmlFor='amount'>
167 | 							Amount($)
168 | 						</label>
169 | 						<input
170 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
171 | 							id='amount'
172 | 							name='amount'
173 | 							type='number'
174 | 							placeholder='150'
175 | 							value={formData.amount}
176 | 							onChange={handleInputChange}
177 | 						/>
178 | 					</div>
179 | 				</div>
180 | 
181 | 				{/* LOCATION */}
182 | 				<div className='flex flex-wrap gap-3'>
183 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
184 | 						<label
185 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
186 | 							htmlFor='location'
187 | 						>
188 | 							Location
189 | 						</label>
190 | 						<input
191 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white'
192 | 							id='location'
193 | 							name='location'
194 | 							type='text'
195 | 							placeholder='New York'
196 | 							value={formData.location}
197 | 							onChange={handleInputChange}
198 | 						/>
199 | 					</div>
200 | 
201 | 					{/* DATE */}
202 | 					<div className='w-full flex-1'>
203 | 						<label
204 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
205 | 							htmlFor='date'
206 | 						>
207 | 							Date
208 | 						</label>
209 | 						<input
210 | 							type='date'
211 | 							name='date'
212 | 							id='date'
213 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-[11px] px-4 mb-3 leading-tight focus:outline-none
214 | 						 focus:bg-white'
215 | 							placeholder='Select date'
216 | 							value={formData.date}
217 | 							onChange={handleInputChange}
218 | 						/>
219 | 					</div>
220 | 				</div>
221 | 				{/* SUBMIT BUTTON */}
222 | 				<button
223 | 					className='text-white font-bold w-full rounded px-4 py-2 bg-gradient-to-br
224 |           from-pink-500 to-pink-500 hover:from-pink-600 hover:to-pink-600'
225 | 					type='submit'
226 | 					disabled={loadingUpdate}
227 | 				>
228 | 					{loadingUpdate ? "Updating..." : "Update Transaction"}
229 | 				</button>
230 | 			</form>
231 | 		</div>
232 | 	);
233 | };
234 | export default TransactionPage;
235 | 


--------------------------------------------------------------------------------
/COPY-PASTE.md:
--------------------------------------------------------------------------------
  1 | # COPY && PASTE LIST IF YOU FOLLOW ALONG THE TUTORIAL
  2 | 
  3 | # Backend Dependencies
  4 | 
  5 | ```bash
  6 | npm install express express-session graphql @apollo/server @graphql-tools/merge bcryptjs connect-mongodb-session dotenv graphql-passport passport mongoose
  7 | ```
  8 | 
  9 | # Frontend Dependencies
 10 | 
 11 | ```bash
 12 | npm install graphql @apollo/client react-router-dom react-icons react-hot-toast tailwind-merge @tailwindcss/aspect-ratio clsx chart.js react-chartjs-2 mini-svg-data-uri framer-motion
 13 | ```
 14 | 
 15 | # Main.jsx
 16 | 
 17 | ```jsx
 18 | ReactDOM.createRoot(document.getElementById("root")).render(
 19 | 	<React.StrictMode>
 20 | 		<BrowserRouter>
 21 | 			<GridBackground>
 22 | 				<App />
 23 | 			</GridBackground>
 24 | 		</BrowserRouter>
 25 | 	</React.StrictMode>
 26 | );
 27 | ```
 28 | 
 29 | # GridBackground.jsx
 30 | 
 31 | ```jsx
 32 | const GridBackground = ({ children }) => {
 33 | 	return (
 34 | 		<div className='w-full bg-black text-white bg-grid-white/[0.2] relative'>
 35 | 			<div className='absolute pointer-events-none inset-0 bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]'></div>
 36 | 			{children}
 37 | 		</div>
 38 | 	);
 39 | };
 40 | export default GridBackground;
 41 | ```
 42 | 
 43 | # App.jsx
 44 | 
 45 | ```jsx
 46 | function App() {
 47 | 	const authUser = true;
 48 | 	return (
 49 | 		<>
 50 | 			{authUser && <Header />}
 51 | 			<Routes>
 52 | 				<Route path='/' element={<HomePage />} />
 53 | 				<Route path='/login' element={<LoginPage />} />
 54 | 				<Route path='/signup' element={<SignUpPage />} />
 55 | 				<Route path='/transaction/:id' element={<TransactionPage />} />
 56 | 				<Route path='*' element={<NotFound />} />
 57 | 			</Routes>
 58 | 		</>
 59 | 	);
 60 | }
 61 | export default App;
 62 | ```
 63 | 
 64 | # Header.jsx
 65 | 
 66 | ```jsx
 67 | import { Link } from "react-router-dom";
 68 | 
 69 | const Header = () => {
 70 | 	return (
 71 | 		<div className='mb-10'>
 72 | 			<h1 className='md:text-6xl text-4xl lg:text-8xl font-bold text-center  relative z-50 text-white pt-10'>
 73 | 				Expense <Link to='/'>GQL</Link>
 74 | 			</h1>
 75 | 			<div className='relative mb-10 w-1/2 mx-auto hidden md:block'>
 76 | 				{/* Gradients */}
 77 | 				<div className='absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm' />
 78 | 				<div className='absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4' />
 79 | 				<div className='absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm' />
 80 | 				<div className='absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4' />
 81 | 			</div>
 82 | 		</div>
 83 | 	);
 84 | };
 85 | export default Header;
 86 | ```
 87 | 
 88 | # SignUpPage.jsx
 89 | 
 90 | ```jsx
 91 | import { useState } from "react";
 92 | import { Link } from "react-router-dom";
 93 | import RadioButton from "../components/RadioButton";
 94 | import InputField from "../components/InputField";
 95 | 
 96 | const SignUpPage = () => {
 97 | 	const [signUpData, setSignUpData] = useState({
 98 | 		name: "",
 99 | 		username: "",
100 | 		password: "",
101 | 		gender: "",
102 | 	});
103 | 
104 | 	const handleChange = (e) => {
105 | 		const { name, value, type } = e.target;
106 | 
107 | 		if (type === "radio") {
108 | 			setSignUpData((prevData) => ({
109 | 				...prevData,
110 | 				gender: value,
111 | 			}));
112 | 		} else {
113 | 			setSignUpData((prevData) => ({
114 | 				...prevData,
115 | 				[name]: value,
116 | 			}));
117 | 		}
118 | 	};
119 | 
120 | 	const handleSubmit = async (e) => {
121 | 		e.preventDefault();
122 | 		console.log(signUpData);
123 | 	};
124 | 
125 | 	return (
126 | 		<div className='h-screen flex justify-center items-center'>
127 | 			<div className='flex rounded-lg overflow-hidden z-50 bg-gray-300'>
128 | 				<div className='w-full bg-gray-100 min-w-80 sm:min-w-96 flex items-center justify-center'>
129 | 					<div className='max-w-md w-full p-6'>
130 | 						<h1 className='text-3xl font-semibold mb-6 text-black text-center'>Sign Up</h1>
131 | 						<h1 className='text-sm font-semibold mb-6 text-gray-500 text-center'>
132 | 							Join to keep track of your expenses
133 | 						</h1>
134 | 						<form className='space-y-4' onSubmit={handleSubmit}>
135 | 							<InputField
136 | 								label='Full Name'
137 | 								id='name'
138 | 								name='name'
139 | 								value={signUpData.name}
140 | 								onChange={handleChange}
141 | 							/>
142 | 							<InputField
143 | 								label='Username'
144 | 								id='username'
145 | 								name='username'
146 | 								value={signUpData.username}
147 | 								onChange={handleChange}
148 | 							/>
149 | 
150 | 							<InputField
151 | 								label='Password'
152 | 								id='password'
153 | 								name='password'
154 | 								type='password'
155 | 								value={signUpData.password}
156 | 								onChange={handleChange}
157 | 							/>
158 | 							<div className='flex gap-10'>
159 | 								<RadioButton
160 | 									id='male'
161 | 									label='Male'
162 | 									name='gender'
163 | 									value='male'
164 | 									onChange={handleChange}
165 | 									checked={signUpData.gender === "male"}
166 | 								/>
167 | 								<RadioButton
168 | 									id='female'
169 | 									label='Female'
170 | 									name='gender'
171 | 									value='female'
172 | 									onChange={handleChange}
173 | 									checked={signUpData.gender === "female"}
174 | 								/>
175 | 							</div>
176 | 
177 | 							<div>
178 | 								<button
179 | 									type='submit'
180 | 									className='w-full bg-black text-white p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:bg-black  focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed'
181 | 								>
182 | 									Sign Up
183 | 								</button>
184 | 							</div>
185 | 						</form>
186 | 						<div className='mt-4 text-sm text-gray-600 text-center'>
187 | 							<p>
188 | 								Already have an account?{" "}
189 | 								<Link to='/login' className='text-black hover:underline'>
190 | 									Login here
191 | 								</Link>
192 | 							</p>
193 | 						</div>
194 | 					</div>
195 | 				</div>
196 | 			</div>
197 | 		</div>
198 | 	);
199 | };
200 | 
201 | export default SignUpPage;
202 | ```
203 | 
204 | # InputField.jsx
205 | 
206 | ```jsx
207 | const InputField = ({ label, id, name, type = "text", onChange, value }) => {
208 | 	return (
209 | 		<div>
210 | 			<label htmlFor={id} className='block text-sm font-medium text-gray-700'>
211 | 				{label}
212 | 			</label>
213 | 			<input
214 | 				className='mt-1 p-2 w-full border rounded-md text-black focus:border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition-colors duration-300'
215 | 				id={id}
216 | 				type={type}
217 | 				name={name}
218 | 				value={value}
219 | 				onChange={onChange}
220 | 			/>
221 | 		</div>
222 | 	);
223 | };
224 | 
225 | export default InputField;
226 | ```
227 | 
228 | # RadioButton.jsx
229 | 
230 | ```jsx
231 | const RadioButton = ({ id, label, onChange, value, checked }) => {
232 | 	return (
233 | 		<div className='inline-flex items-center'>
234 | 			<label className='relative flex items-center p-3 rounded-full cursor-pointer' htmlFor={id}>
235 | 				<input
236 | 					name='type'
237 | 					type='radio'
238 | 					className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border border-black text-gray-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
239 | 					id={id}
240 | 					value={value}
241 | 					onChange={onChange}
242 | 					checked={checked}
243 | 				/>
244 | 				<span className='absolute text-gray-900 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100'>
245 | 					<svg
246 | 						xmlns='http://www.w3.org/2000/svg'
247 | 						className='h-3.5 w-3.5'
248 | 						viewBox='0 0 16 16'
249 | 						fill='currentColor'
250 | 					>
251 | 						<circle data-name='ellipse' cx='8' cy='8' r='8'></circle>
252 | 					</svg>
253 | 				</span>
254 | 			</label>
255 | 			<label className='mt-px font-light text-gray-700 cursor-pointer select-none' htmlFor={id}>
256 | 				{label}
257 | 			</label>
258 | 		</div>
259 | 	);
260 | };
261 | 
262 | export default RadioButton;
263 | ```
264 | 
265 | # LoginPage.jsx
266 | 
267 | ```jsx
268 | import { Link } from "react-router-dom";
269 | import { useState } from "react";
270 | import InputField from "../components/InputField";
271 | 
272 | const LoginPage = () => {
273 | 	const [loginData, setLoginData] = useState({
274 | 		username: "",
275 | 		password: "",
276 | 	});
277 | 
278 | 	const handleChange = (e) => {
279 | 		const { name, value } = e.target;
280 | 		setLoginData((prevData) => ({
281 | 			...prevData,
282 | 			[name]: value,
283 | 		}));
284 | 	};
285 | 
286 | 	const handleSubmit = (e) => {
287 | 		e.preventDefault();
288 | 		console.log(loginData);
289 | 	};
290 | 
291 | 	return (
292 | 		<div className='flex justify-center items-center h-screen'>
293 | 			<div className='flex rounded-lg overflow-hidden z-50 bg-gray-300'>
294 | 				<div className='w-full bg-gray-100 min-w-80 sm:min-w-96 flex items-center justify-center'>
295 | 					<div className='max-w-md w-full p-6'>
296 | 						<h1 className='text-3xl font-semibold mb-6 text-black text-center'>Login</h1>
297 | 						<h1 className='text-sm font-semibold mb-6 text-gray-500 text-center'>
298 | 							Welcome back! Log in to your account
299 | 						</h1>
300 | 						<form className='space-y-4' onSubmit={handleSubmit}>
301 | 							<InputField
302 | 								label='Username'
303 | 								id='username'
304 | 								name='username'
305 | 								value={loginData.username}
306 | 								onChange={handleChange}
307 | 							/>
308 | 
309 | 							<InputField
310 | 								label='Password'
311 | 								id='password'
312 | 								name='password'
313 | 								type='password'
314 | 								value={loginData.password}
315 | 								onChange={handleChange}
316 | 							/>
317 | 							<div>
318 | 								<button
319 | 									type='submit'
320 | 									className='w-full bg-black text-white p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:bg-black  focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-300
321 | 										disabled:opacity-50 disabled:cursor-not-allowed
322 | 									'
323 | 								>
324 | 									Login
325 | 								</button>
326 | 							</div>
327 | 						</form>
328 | 						<div className='mt-4 text-sm text-gray-600 text-center'>
329 | 							<p>
330 | 								{"Don't"} have an account?{" "}
331 | 								<Link to='/signup' className='text-black hover:underline'>
332 | 									Sign Up
333 | 								</Link>
334 | 							</p>
335 | 						</div>
336 | 					</div>
337 | 				</div>
338 | 			</div>
339 | 		</div>
340 | 	);
341 | };
342 | export default LoginPage;
343 | ```
344 | 
345 | # TransactionPage.jsx
346 | 
347 | ```jsx
348 | import { useState } from "react";
349 | 
350 | const TransactionPage = () => {
351 | 	const [formData, setFormData] = useState({
352 | 		description: "",
353 | 		paymentType: "",
354 | 		category: "",
355 | 		amount: "",
356 | 		location: "",
357 | 		date: "",
358 | 	});
359 | 
360 | 	const handleSubmit = async (e) => {
361 | 		e.preventDefault();
362 | 		console.log("formData", formData);
363 | 	};
364 | 	const handleInputChange = (e) => {
365 | 		const { name, value } = e.target;
366 | 		setFormData((prevFormData) => ({
367 | 			...prevFormData,
368 | 			[name]: value,
369 | 		}));
370 | 	};
371 | 
372 | 	// if (loading) return <TransactionFormSkeleton />;
373 | 
374 | 	return (
375 | 		<div className='h-screen max-w-4xl mx-auto flex flex-col items-center'>
376 | 			<p className='md:text-4xl text-2xl lg:text-4xl font-bold text-center relative z-50 mb-4 mr-4 bg-gradient-to-r from-pink-600 via-indigo-500 to-pink-400 inline-block text-transparent bg-clip-text'>
377 | 				Update this transaction
378 | 			</p>
379 | 			<form className='w-full max-w-lg flex flex-col gap-5 px-3 ' onSubmit={handleSubmit}>
380 | 				{/* TRANSACTION */}
381 | 				<div className='flex flex-wrap'>
382 | 					<div className='w-full'>
383 | 						<label
384 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
385 | 							htmlFor='description'
386 | 						>
387 | 							Transaction
388 | 						</label>
389 | 						<input
390 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
391 | 							id='description'
392 | 							name='description'
393 | 							type='text'
394 | 							placeholder='Rent, Groceries, Salary, etc.'
395 | 							value={formData.description}
396 | 							onChange={handleInputChange}
397 | 						/>
398 | 					</div>
399 | 				</div>
400 | 				{/* PAYMENT TYPE */}
401 | 				<div className='flex flex-wrap gap-3'>
402 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
403 | 						<label
404 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
405 | 							htmlFor='paymentType'
406 | 						>
407 | 							Payment Type
408 | 						</label>
409 | 						<div className='relative'>
410 | 							<select
411 | 								className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
412 | 								id='paymentType'
413 | 								name='paymentType'
414 | 								onChange={handleInputChange}
415 | 								defaultValue={formData.paymentType}
416 | 							>
417 | 								<option value={"card"}>Card</option>
418 | 								<option value={"cash"}>Cash</option>
419 | 							</select>
420 | 							<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
421 | 								<svg
422 | 									className='fill-current h-4 w-4'
423 | 									xmlns='http://www.w3.org/2000/svg'
424 | 									viewBox='0 0 20 20'
425 | 								>
426 | 									<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
427 | 								</svg>
428 | 							</div>
429 | 						</div>
430 | 					</div>
431 | 
432 | 					{/* CATEGORY */}
433 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
434 | 						<label
435 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
436 | 							htmlFor='category'
437 | 						>
438 | 							Category
439 | 						</label>
440 | 						<div className='relative'>
441 | 							<select
442 | 								className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
443 | 								id='category'
444 | 								name='category'
445 | 								onChange={handleInputChange}
446 | 								defaultValue={formData.category}
447 | 							>
448 | 								<option value={"saving"}>Saving</option>
449 | 								<option value={"expense"}>Expense</option>
450 | 								<option value={"investment"}>Investment</option>
451 | 							</select>
452 | 							<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
453 | 								<svg
454 | 									className='fill-current h-4 w-4'
455 | 									xmlns='http://www.w3.org/2000/svg'
456 | 									viewBox='0 0 20 20'
457 | 								>
458 | 									<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
459 | 								</svg>
460 | 							</div>
461 | 						</div>
462 | 					</div>
463 | 
464 | 					{/* AMOUNT */}
465 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
466 | 						<label className='block uppercase text-white text-xs font-bold mb-2' htmlFor='amount'>
467 | 							Amount($)
468 | 						</label>
469 | 						<input
470 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
471 | 							id='amount'
472 | 							name='amount'
473 | 							type='number'
474 | 							placeholder='150'
475 | 							value={formData.amount}
476 | 							onChange={handleInputChange}
477 | 						/>
478 | 					</div>
479 | 				</div>
480 | 
481 | 				{/* LOCATION */}
482 | 				<div className='flex flex-wrap gap-3'>
483 | 					<div className='w-full flex-1 mb-6 md:mb-0'>
484 | 						<label
485 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
486 | 							htmlFor='location'
487 | 						>
488 | 							Location
489 | 						</label>
490 | 						<input
491 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white'
492 | 							id='location'
493 | 							name='location'
494 | 							type='text'
495 | 							placeholder='New York'
496 | 							value={formData.location}
497 | 							onChange={handleInputChange}
498 | 						/>
499 | 					</div>
500 | 
501 | 					{/* DATE */}
502 | 					<div className='w-full flex-1'>
503 | 						<label
504 | 							className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
505 | 							htmlFor='date'
506 | 						>
507 | 							Date
508 | 						</label>
509 | 						<input
510 | 							type='date'
511 | 							name='date'
512 | 							id='date'
513 | 							className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-[11px] px-4 mb-3 leading-tight focus:outline-none
514 | 						 focus:bg-white'
515 | 							placeholder='Select date'
516 | 							value={formData.date}
517 | 							onChange={handleInputChange}
518 | 						/>
519 | 					</div>
520 | 				</div>
521 | 				{/* SUBMIT BUTTON */}
522 | 				<button
523 | 					className='text-white font-bold w-full rounded px-4 py-2 bg-gradient-to-br
524 |           from-pink-500 to-pink-500 hover:from-pink-600 hover:to-pink-600'
525 | 					type='submit'
526 | 				>
527 | 					Update Transaction
528 | 				</button>
529 | 			</form>
530 | 		</div>
531 | 	);
532 | };
533 | export default TransactionPage;
534 | ```
535 | 
536 | # TransactionFormSkeleton.jsx
537 | 
538 | ```jsx
539 | const TransactionFormSkeleton = () => {
540 | 	return (
541 | 		<div className='h-screen max-w-xl mx-auto py-10'>
542 | 			<h3 className='h-6 bg-gray-200 rounded animate-pulse'></h3>
543 | 
544 | 			<ul className='mt-5 flex gap-3'>
545 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
546 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
547 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
548 | 			</ul>
549 | 			<ul className='mt-5 flex gap-3'>
550 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
551 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
552 | 			</ul>
553 | 			<ul className='mt-5 flex gap-3'>
554 | 				<li className='w-full h-6 bg-gray-200 rounded dark:bg-gray-700 animate-pulse'></li>
555 | 			</ul>
556 | 		</div>
557 | 	);
558 | };
559 | export default TransactionFormSkeleton;
560 | ```
561 | 
562 | # NotFound.jsx
563 | 
564 | ```jsx
565 | const NotFound = () => {
566 | 	return (
567 | 		<section>
568 | 			<div className=' text-white'>
569 | 				<div className='flex h-screen'>
570 | 					<div className='m-auto text-center'>
571 | 						<div>
572 | 							<img src='/404.svg' alt='404' />
573 | 						</div>
574 | 						<p className='text-sm md:text-base text-[#F6009B] p-2 mb-4'>
575 | 							The stuff you were looking for doesn't exist
576 | 						</p>
577 | 						<a
578 | 							href='/'
579 | 							className='bg-transparent hover:bg-[#F6009B] text-[#F6009B] hover:text-white rounded shadow hover:shadow-lg py-2 px-4 border border-[#F6009B] hover:border-transparent'
580 | 						>
581 | 							Take me home
582 | 						</a>
583 | 					</div>
584 | 				</div>
585 | 			</div>
586 | 		</section>
587 | 	);
588 | };
589 | export default NotFound;
590 | ```
591 | 
592 | # HomePage.jsx
593 | 
594 | ```jsx
595 | import { Doughnut } from "react-chartjs-2";
596 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
597 | 
598 | import Cards from "../components/Cards";
599 | import TransactionForm from "../components/TransactionForm";
600 | 
601 | import { MdLogout } from "react-icons/md";
602 | 
603 | ChartJS.register(ArcElement, Tooltip, Legend);
604 | 
605 | const HomePage = () => {
606 | 	const chartData = {
607 | 		labels: ["Saving", "Expense", "Investment"],
608 | 		datasets: [
609 | 			{
610 | 				label: "%",
611 | 				data: [13, 8, 3],
612 | 				backgroundColor: ["rgba(75, 192, 192)", "rgba(255, 99, 132)", "rgba(54, 162, 235)"],
613 | 				borderColor: ["rgba(75, 192, 192)", "rgba(255, 99, 132)", "rgba(54, 162, 235, 1)"],
614 | 				borderWidth: 1,
615 | 				borderRadius: 30,
616 | 				spacing: 10,
617 | 				cutout: 130,
618 | 			},
619 | 		],
620 | 	};
621 | 
622 | 	const handleLogout = () => {
623 | 		console.log("Logging out...");
624 | 	};
625 | 
626 | 	const loading = false;
627 | 
628 | 	return (
629 | 		<>
630 | 			<div className='flex flex-col gap-6 items-center max-w-7xl mx-auto z-20 relative justify-center'>
631 | 				<div className='flex items-center'>
632 | 					<p className='md:text-4xl text-2xl lg:text-4xl font-bold text-center relative z-50 mb-4 mr-4 bg-gradient-to-r from-pink-600 via-indigo-500 to-pink-400 inline-block text-transparent bg-clip-text'>
633 | 						Spend wisely, track wisely
634 | 					</p>
635 | 					<img
636 | 						src={"https://tecdn.b-cdn.net/img/new/avatars/2.webp"}
637 | 						className='w-11 h-11 rounded-full border cursor-pointer'
638 | 						alt='Avatar'
639 | 					/>
640 | 					{!loading && <MdLogout className='mx-2 w-5 h-5 cursor-pointer' onClick={handleLogout} />}
641 | 					{/* loading spinner */}
642 | 					{loading && <div className='w-6 h-6 border-t-2 border-b-2 mx-2 rounded-full animate-spin'></div>}
643 | 				</div>
644 | 				<div className='flex flex-wrap w-full justify-center items-center gap-6'>
645 | 					<div className='h-[330px] w-[330px] md:h-[360px] md:w-[360px]  '>
646 | 						<Doughnut data={chartData} />
647 | 					</div>
648 | 
649 | 					<TransactionForm />
650 | 				</div>
651 | 				<Cards />
652 | 			</div>
653 | 		</>
654 | 	);
655 | };
656 | export default HomePage;
657 | ```
658 | 
659 | # TransactionForm.jsx
660 | 
661 | ```jsx
662 | const TransactionForm = () => {
663 | 	const handleSubmit = async (e) => {
664 | 		e.preventDefault();
665 | 
666 | 		const form = e.target;
667 | 		const formData = new FormData(form);
668 | 		const transactionData = {
669 | 			description: formData.get("description"),
670 | 			paymentType: formData.get("paymentType"),
671 | 			category: formData.get("category"),
672 | 			amount: parseFloat(formData.get("amount")),
673 | 			location: formData.get("location"),
674 | 			date: formData.get("date"),
675 | 		};
676 | 		console.log("transactionData", transactionData);
677 | 	};
678 | 
679 | 	return (
680 | 		<form className='w-full max-w-lg flex flex-col gap-5 px-3' onSubmit={handleSubmit}>
681 | 			{/* TRANSACTION */}
682 | 			<div className='flex flex-wrap'>
683 | 				<div className='w-full'>
684 | 					<label
685 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
686 | 						htmlFor='description'
687 | 					>
688 | 						Transaction
689 | 					</label>
690 | 					<input
691 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
692 | 						id='description'
693 | 						name='description'
694 | 						type='text'
695 | 						required
696 | 						placeholder='Rent, Groceries, Salary, etc.'
697 | 					/>
698 | 				</div>
699 | 			</div>
700 | 			{/* PAYMENT TYPE */}
701 | 			<div className='flex flex-wrap gap-3'>
702 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
703 | 					<label
704 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
705 | 						htmlFor='paymentType'
706 | 					>
707 | 						Payment Type
708 | 					</label>
709 | 					<div className='relative'>
710 | 						<select
711 | 							className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
712 | 							id='paymentType'
713 | 							name='paymentType'
714 | 						>
715 | 							<option value={"card"}>Card</option>
716 | 							<option value={"cash"}>Cash</option>
717 | 						</select>
718 | 						<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
719 | 							<svg
720 | 								className='fill-current h-4 w-4'
721 | 								xmlns='http://www.w3.org/2000/svg'
722 | 								viewBox='0 0 20 20'
723 | 							>
724 | 								<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
725 | 							</svg>
726 | 						</div>
727 | 					</div>
728 | 				</div>
729 | 
730 | 				{/* CATEGORY */}
731 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
732 | 					<label
733 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
734 | 						htmlFor='category'
735 | 					>
736 | 						Category
737 | 					</label>
738 | 					<div className='relative'>
739 | 						<select
740 | 							className='block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
741 | 							id='category'
742 | 							name='category'
743 | 						>
744 | 							<option value={"saving"}>Saving</option>
745 | 							<option value={"expense"}>Expense</option>
746 | 							<option value={"investment"}>Investment</option>
747 | 						</select>
748 | 						<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
749 | 							<svg
750 | 								className='fill-current h-4 w-4'
751 | 								xmlns='http://www.w3.org/2000/svg'
752 | 								viewBox='0 0 20 20'
753 | 							>
754 | 								<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
755 | 							</svg>
756 | 						</div>
757 | 					</div>
758 | 				</div>
759 | 
760 | 				{/* AMOUNT */}
761 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
762 | 					<label className='block uppercase text-white text-xs font-bold mb-2' htmlFor='amount'>
763 | 						Amount($)
764 | 					</label>
765 | 					<input
766 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500'
767 | 						id='amount'
768 | 						name='amount'
769 | 						type='number'
770 | 						placeholder='150'
771 | 					/>
772 | 				</div>
773 | 			</div>
774 | 
775 | 			{/* LOCATION */}
776 | 			<div className='flex flex-wrap gap-3'>
777 | 				<div className='w-full flex-1 mb-6 md:mb-0'>
778 | 					<label
779 | 						className='block uppercase tracking-wide text-white text-xs font-bold mb-2'
780 | 						htmlFor='location'
781 | 					>
782 | 						Location
783 | 					</label>
784 | 					<input
785 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white'
786 | 						id='location'
787 | 						name='location'
788 | 						type='text'
789 | 						placeholder='New York'
790 | 					/>
791 | 				</div>
792 | 
793 | 				{/* DATE */}
794 | 				<div className='w-full flex-1'>
795 | 					<label className='block uppercase tracking-wide text-white text-xs font-bold mb-2' htmlFor='date'>
796 | 						Date
797 | 					</label>
798 | 					<input
799 | 						type='date'
800 | 						name='date'
801 | 						id='date'
802 | 						className='appearance-none block w-full bg-gray-200 text-gray-700 border  rounded py-[11px] px-4 mb-3 leading-tight focus:outline-none
803 | 						 focus:bg-white'
804 | 						placeholder='Select date'
805 | 					/>
806 | 				</div>
807 | 			</div>
808 | 			{/* SUBMIT BUTTON */}
809 | 			<button
810 | 				className='text-white font-bold w-full rounded px-4 py-2 bg-gradient-to-br
811 |           from-pink-500 to-pink-500 hover:from-pink-600 hover:to-pink-600
812 | 						disabled:opacity-70 disabled:cursor-not-allowed'
813 | 				type='submit'
814 | 			>
815 | 				Add Transaction
816 | 			</button>
817 | 		</form>
818 | 	);
819 | };
820 | 
821 | export default TransactionForm;
822 | ```
823 | 
824 | # Cards.jsx
825 | 
826 | ```jsx
827 | import Card from "./Card";
828 | 
829 | const Cards = () => {
830 | 	return (
831 | 		<div className='w-full px-10 min-h-[40vh]'>
832 | 			<p className='text-5xl font-bold text-center my-10'>History</p>
833 | 			<div className='w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 justify-start mb-20'>
834 | 				<Card cardType={"saving"} />
835 | 				<Card cardType={"expense"} />
836 | 				<Card cardType={"investment"} />
837 | 				<Card cardType={"investment"} />
838 | 				<Card cardType={"saving"} />
839 | 				<Card cardType={"expense"} />
840 | 			</div>
841 | 		</div>
842 | 	);
843 | };
844 | export default Cards;
845 | ```
846 | 
847 | # Card.jsx
848 | 
849 | ```jsx
850 | import { FaLocationDot } from "react-icons/fa6";
851 | import { BsCardText } from "react-icons/bs";
852 | import { MdOutlinePayments } from "react-icons/md";
853 | import { FaSackDollar } from "react-icons/fa6";
854 | import { FaTrash } from "react-icons/fa";
855 | import { HiPencilAlt } from "react-icons/hi";
856 | import { Link } from "react-router-dom";
857 | 
858 | const categoryColorMap = {
859 | 	saving: "from-green-700 to-green-400",
860 | 	expense: "from-pink-800 to-pink-600",
861 | 	investment: "from-blue-700 to-blue-400",
862 | 	// Add more categories and corresponding color classes as needed
863 | };
864 | 
865 | const Card = ({ cardType }) => {
866 | 	const cardClass = categoryColorMap[cardType];
867 | 
868 | 	return (
869 | 		<div className={`rounded-md p-4 bg-gradient-to-br ${cardClass}`}>
870 | 			<div className='flex flex-col gap-3'>
871 | 				<div className='flex flex-row items-center justify-between'>
872 | 					<h2 className='text-lg font-bold text-white'>Saving</h2>
873 | 					<div className='flex items-center gap-2'>
874 | 						<FaTrash className={"cursor-pointer"} />
875 | 						<Link to={`/transaction/123`}>
876 | 							<HiPencilAlt className='cursor-pointer' size={20} />
877 | 						</Link>
878 | 					</div>
879 | 				</div>
880 | 				<p className='text-white flex items-center gap-1'>
881 | 					<BsCardText />
882 | 					Description: Salary
883 | 				</p>
884 | 				<p className='text-white flex items-center gap-1'>
885 | 					<MdOutlinePayments />
886 | 					Payment Type: Cash
887 | 				</p>
888 | 				<p className='text-white flex items-center gap-1'>
889 | 					<FaSackDollar />
890 | 					Amount: $150
891 | 				</p>
892 | 				<p className='text-white flex items-center gap-1'>
893 | 					<FaLocationDot />
894 | 					Location: New York
895 | 				</p>
896 | 				<div className='flex justify-between items-center'>
897 | 					<p className='text-xs text-black font-bold'>21 Sep, 2001</p>
898 | 					<img
899 | 						src={"https://tecdn.b-cdn.net/img/new/avatars/2.webp"}
900 | 						className='h-8 w-8 border rounded-full'
901 | 						alt=''
902 | 					/>
903 | 				</div>
904 | 			</div>
905 | 		</div>
906 | 	);
907 | };
908 | export default Card;
909 | ```
910 | 


--------------------------------------------------------------------------------
/frontend/public/404.svg:
--------------------------------------------------------------------------------
  1 | 							<svg
  2 | 								width='631'
  3 | 								height='379'
  4 | 								viewBox='0 0 631 379'
  5 | 								fill='none'
  6 | 								xmlns='http://www.w3.org/2000/svg'
  7 | 							>
  8 | 								<g clip-path='url(#clip0)'>
  9 | 									<path
 10 | 										d='M317.524 379C488.625 379 627.33 368.857 627.33 356.346C627.33 343.834 488.625 333.692 317.524 333.692C146.423 333.692 7.71875 343.834 7.71875 356.346C7.71875 368.857 146.423 379 317.524 379Z'
 11 | 										fill='#F2F2F2'
 12 | 									/>
 13 | 									<path
 14 | 										d='M305.65 108.342C255.175 108.342 218.934 144.112 218.934 227.575C218.934 322.166 255.175 347.205 305.65 347.205C356.126 347.205 394.526 319.781 394.526 227.575C394.526 129.009 356.126 108.342 305.65 108.342ZM305.982 315.807C271.021 315.807 252.757 293.152 252.757 227.636C252.757 169.827 271.769 139.342 306.73 139.342C341.691 139.342 360.703 159.367 360.703 227.636C360.703 291.5 340.943 315.807 305.982 315.807Z'
 15 | 										fill='#2F2E41'
 16 | 									/>
 17 | 									<path
 18 | 										d='M188.708 281.229H167.839V213.348C167.839 209.743 166.542 206.285 164.234 203.735C161.926 201.186 158.795 199.754 155.531 199.754H150.641C149.025 199.754 147.424 200.105 145.931 200.788C144.438 201.472 143.081 202.473 141.938 203.735C140.796 204.998 139.889 206.496 139.27 208.146C138.652 209.795 138.334 211.563 138.334 213.348V281.229H79.4676C78.2566 281.229 77.0661 280.884 76.0117 280.226C74.9573 279.568 74.0748 278.62 73.4497 277.474C72.8246 276.329 72.4783 275.024 72.4442 273.687C72.4101 272.35 72.6895 271.026 73.2552 269.843L135.558 139.594C136.335 137.97 136.806 136.189 136.942 134.358C137.079 132.528 136.878 130.686 136.352 128.944C135.826 127.201 134.986 125.595 133.883 124.221C132.779 122.847 131.435 121.734 129.932 120.95L126.254 119.032C123.398 117.542 120.133 117.322 117.134 118.417C114.136 119.513 111.633 121.839 110.144 124.916L34.1574 281.926C32.8635 284.6 32.1865 287.585 32.1865 290.616C32.1865 293.037 32.6182 295.434 33.4569 297.671C34.2956 299.907 35.5249 301.939 37.0746 303.651C38.6243 305.363 40.4641 306.721 42.4888 307.647C44.5136 308.573 46.6838 309.05 48.8754 309.05H138.334V351.974C138.334 354.114 138.715 356.233 139.457 358.21C140.198 360.187 141.285 361.983 142.655 363.496C144.024 365.009 145.651 366.21 147.441 367.029C149.23 367.848 151.149 368.269 153.086 368.269H153.086C155.024 368.269 156.942 367.848 158.732 367.029C160.522 366.21 162.148 365.009 163.518 363.496C164.888 361.983 165.974 360.187 166.716 358.21C167.457 356.233 167.839 354.114 167.839 351.974V309.05H188.708C192.049 309.05 195.252 307.585 197.614 304.976C199.975 302.367 201.302 298.829 201.302 295.14C201.302 291.45 199.975 287.912 197.614 285.304C195.252 282.695 192.049 281.229 188.708 281.229Z'
 19 | 										fill='#F6009B'
 20 | 									/>
 21 | 									<path
 22 | 										d='M575.157 281.229H554.287V213.348C554.287 209.743 552.99 206.285 550.682 203.735C548.374 201.186 545.244 199.754 541.98 199.754H537.089C535.473 199.754 533.873 200.105 532.379 200.788C530.886 201.472 529.529 202.473 528.387 203.735C527.244 204.998 526.337 206.496 525.719 208.146C525.1 209.795 524.782 211.563 524.782 213.348V281.229H465.916C464.705 281.229 463.514 280.884 462.46 280.226C461.406 279.568 460.523 278.62 459.898 277.474C459.273 276.329 458.926 275.024 458.892 273.687C458.858 272.35 459.138 271.026 459.703 269.843L522.007 139.594C522.783 137.97 523.254 136.189 523.391 134.358C523.527 132.528 523.326 130.686 522.8 128.944C522.275 127.201 521.435 125.595 520.331 124.221C519.228 122.847 517.883 121.734 516.38 120.95L512.702 119.032C509.846 117.542 506.581 117.322 503.583 118.417C500.584 119.513 498.081 121.839 496.593 124.916L420.606 281.926C419.312 284.6 418.635 287.585 418.635 290.616C418.635 295.505 420.393 300.194 423.523 303.651C426.653 307.108 430.897 309.05 435.324 309.05H524.782V351.974C524.782 356.296 526.336 360.44 529.103 363.496C531.869 366.552 535.622 368.269 539.534 368.269C543.447 368.269 547.199 366.552 549.966 363.496C552.733 360.44 554.287 356.296 554.287 351.974V309.05H575.157C578.497 309.05 581.7 307.585 584.062 304.976C586.423 302.367 587.75 298.829 587.75 295.14C587.75 291.45 586.423 287.912 584.062 285.304C581.7 282.695 578.497 281.229 575.157 281.229Z'
 23 | 										fill='#F6009B'
 24 | 									/>
 25 | 									<path
 26 | 										d='M194.466 273.28H173.597V205.399C173.597 203.614 173.278 201.846 172.66 200.197C172.041 198.547 171.135 197.049 169.992 195.786C168.849 194.524 167.492 193.523 165.999 192.84C164.506 192.156 162.905 191.805 161.289 191.805H156.399C153.135 191.805 150.004 193.237 147.696 195.786C145.388 198.336 144.091 201.794 144.091 205.399V273.28H85.2254C84.0144 273.28 82.8239 272.935 81.7695 272.277C80.7151 271.619 79.8326 270.671 79.2075 269.525C78.5825 268.38 78.2361 267.075 78.202 265.738C78.1679 264.401 78.4473 263.077 79.013 261.894L141.316 131.645C142.093 130.021 142.564 128.24 142.7 126.41C142.837 124.579 142.636 122.737 142.11 120.995C141.584 119.252 140.744 117.646 139.641 116.272C138.537 114.898 137.193 113.786 135.69 113.001L132.012 111.083C129.156 109.593 125.891 109.373 122.892 110.469C119.894 111.564 117.391 113.89 115.902 116.967L39.9153 273.977C38.6213 276.651 37.9443 279.636 37.9443 282.668V282.668C37.9443 287.556 39.7026 292.245 42.8324 295.702C45.9622 299.159 50.207 301.101 54.6332 301.101H144.091V344.025C144.091 346.165 144.473 348.284 145.214 350.261C145.956 352.238 147.042 354.034 148.412 355.547C149.782 357.061 151.409 358.261 153.198 359.08C154.988 359.899 156.907 360.32 158.844 360.32H158.844C162.757 360.32 166.509 358.603 169.276 355.547C172.042 352.492 173.597 348.347 173.597 344.025V301.101H194.466C196.12 301.101 197.758 300.742 199.286 300.042C200.814 299.343 202.202 298.319 203.371 297.027C204.541 295.735 205.468 294.202 206.101 292.514C206.734 290.827 207.06 289.018 207.06 287.191V287.191C207.06 285.364 206.734 283.555 206.101 281.868C205.468 280.18 204.541 278.646 203.371 277.355C202.202 276.063 200.814 275.038 199.286 274.339C197.758 273.64 196.12 273.28 194.466 273.28V273.28Z'
 27 | 										stroke='#3F3D56'
 28 | 										stroke-miterlimit='10'
 29 | 									/>
 30 | 									<path
 31 | 										d='M585.951 273.28H565.081V205.399C565.081 201.794 563.784 198.336 561.476 195.786C559.168 193.237 556.038 191.805 552.773 191.805H547.883C546.267 191.805 544.667 192.156 543.173 192.84C541.68 193.523 540.323 194.524 539.181 195.786C538.038 197.049 537.131 198.547 536.513 200.197C535.894 201.846 535.576 203.614 535.576 205.399V273.28H476.71C475.499 273.28 474.308 272.935 473.254 272.277C472.2 271.619 471.317 270.671 470.692 269.525C470.067 268.38 469.72 267.075 469.686 265.738C469.652 264.401 469.932 263.077 470.497 261.894L532.8 131.645C533.577 130.021 534.048 128.24 534.185 126.41C534.321 124.579 534.12 122.737 533.594 120.995C533.069 119.252 532.228 117.646 531.125 116.272C530.021 114.898 528.677 113.786 527.174 113.001L523.496 111.083C520.64 109.593 517.375 109.373 514.377 110.469C511.378 111.564 508.875 113.89 507.386 116.967L431.4 273.977C430.106 276.651 429.429 279.636 429.429 282.668C429.429 287.556 431.187 292.245 434.317 295.702C437.447 299.159 441.691 301.101 446.118 301.101H535.576V344.025C535.576 348.347 537.13 352.492 539.897 355.547C542.663 358.603 546.416 360.32 550.328 360.32V360.32C554.241 360.32 557.993 358.603 560.76 355.547C563.527 352.492 565.081 348.347 565.081 344.025V301.101H585.951C587.604 301.101 589.242 300.742 590.77 300.042C592.298 299.343 593.686 298.319 594.856 297.027C596.025 295.735 596.953 294.202 597.586 292.514C598.219 290.827 598.544 289.018 598.544 287.191V287.191C598.544 283.502 597.217 279.963 594.856 277.355C592.494 274.746 589.291 273.28 585.951 273.28V273.28Z'
 32 | 										stroke='#3F3D56'
 33 | 										stroke-miterlimit='10'
 34 | 									/>
 35 | 									<path
 36 | 										d='M317.165 101.188C266.689 101.188 230.448 136.958 230.448 220.421C230.448 315.012 266.689 340.051 317.165 340.051C367.641 340.051 406.041 312.627 406.041 220.421C406.041 121.855 367.641 101.188 317.165 101.188ZM317.497 308.653C282.536 308.653 264.271 285.998 264.271 220.482C264.271 162.673 283.284 132.188 318.245 132.188C353.205 132.188 372.218 152.213 372.218 220.482C372.218 284.346 352.457 308.653 317.497 308.653V308.653Z'
 37 | 										stroke='#3F3D56'
 38 | 										stroke-miterlimit='10'
 39 | 									/>
 40 | 									<path
 41 | 										d='M276.705 20.2086C280.89 20.2086 284.282 16.4615 284.282 11.8394C284.282 7.21717 280.89 3.47015 276.705 3.47015C272.52 3.47015 269.128 7.21717 269.128 11.8394C269.128 16.4615 272.52 20.2086 276.705 20.2086Z'
 42 | 										fill='#2F2E41'
 43 | 									/>
 44 | 									<path
 45 | 										d='M295.186 60.8298C306.923 60.8298 316.439 47.2126 316.439 30.4149C316.439 13.6172 306.923 0 295.186 0C283.449 0 273.934 13.6172 273.934 30.4149C273.934 47.2126 283.449 60.8298 295.186 60.8298Z'
 46 | 										fill='#2F2E41'
 47 | 									/>
 48 | 									<path
 49 | 										opacity='0.1'
 50 | 										d='M295.186 51.6441C284.54 51.6441 275.722 40.4404 274.175 25.822C274.014 27.3465 273.933 28.8801 273.934 30.4149C273.934 47.2126 283.449 60.8298 295.186 60.8298C306.923 60.8298 316.439 47.2126 316.439 30.4149C316.439 28.8801 316.358 27.3465 316.197 25.822C314.65 40.4404 305.833 51.6441 295.186 51.6441Z'
 51 | 										fill='black'
 52 | 									/>
 53 | 									<path
 54 | 										d='M338.432 119.486C337.976 121.558 336.008 123.217 333.829 124.376C329.247 126.813 323.595 127.541 318.112 127.785C316.714 127.879 315.311 127.85 313.916 127.699C311.214 127.41 308.679 126.123 306.722 124.046C306.582 123.945 306.467 123.807 306.389 123.644C306.311 123.482 306.271 123.3 306.274 123.116C306.276 122.931 306.321 122.751 306.404 122.591C306.487 122.431 306.605 122.297 306.747 122.201C309.666 118.66 314.536 116.488 319.443 114.925C323.163 113.739 329.651 110.669 333.708 111.083C337.639 111.485 339.009 116.87 338.432 119.486Z'
 55 | 										fill='#3F3D56'
 56 | 									/>
 57 | 									<path
 58 | 										opacity='0.1'
 59 | 										d='M338.432 119.486C337.976 121.558 336.008 123.217 333.829 124.376C329.247 126.813 323.595 127.541 318.112 127.785C316.714 127.879 315.311 127.85 313.916 127.699C311.214 127.41 308.679 126.123 306.722 124.046C306.582 123.945 306.467 123.807 306.389 123.644C306.311 123.482 306.271 123.3 306.274 123.116C306.276 122.931 306.321 122.751 306.404 122.591C306.487 122.431 306.605 122.297 306.747 122.201C309.666 118.66 314.536 116.488 319.443 114.925C323.163 113.739 329.651 110.669 333.708 111.083C337.639 111.485 339.009 116.87 338.432 119.486Z'
 60 | 										fill='black'
 61 | 									/>
 62 | 									<path
 63 | 										d='M280.172 104.003C278.773 107.031 278.52 110.548 279.468 113.782C280.432 116.992 282.237 119.813 284.653 121.889C290.582 127.138 298.742 127.861 306.34 127.788C312.998 127.724 319.648 127.22 326.252 126.28C328.466 126.064 330.641 125.506 332.714 124.623C335.194 123.438 337.373 121.264 338.256 118.444C339.138 115.623 338.512 112.169 336.415 110.287C334.573 108.633 332.032 108.405 329.662 108.248L316.103 107.348C317.442 105.85 319.226 105.003 320.857 103.915C323.022 102.47 324.46 100.045 326.034 97.859C328.458 94.658 331.097 91.6619 333.926 88.8957C334.367 91.6919 335.969 93.9881 337.854 95.9174C339.738 97.8468 341.911 99.4 343.87 101.237C348.615 105.686 352.031 111.725 357.021 115.833C360.454 114.837 363.663 113.067 366.447 110.636L364.507 106.755C364.346 106.356 364.094 106.009 363.776 105.748C363.227 105.375 362.52 105.567 361.882 105.462C360.179 105.18 359.435 103.007 358.766 101.253C356.931 96.4387 353.417 92.7033 350.416 88.6657C348.201 85.6853 346.236 82.4885 344.545 79.1148C343.537 77.1027 342.614 75.0077 341.246 73.2743C339.878 71.5408 337.961 70.178 335.879 70.1731C334.039 70.1688 332.342 71.2003 330.761 72.238C325.944 75.3986 321.309 78.8865 316.883 82.6816C314.566 84.6678 312.265 86.7662 309.548 87.9842C308.404 88.4969 307.198 88.8473 306.1 89.4712C304.178 90.5639 302.719 92.4127 301.149 94.0538C295.547 99.9073 287.878 103.7 280.172 104.003Z'
 64 | 										fill='#3F3D56'
 65 | 									/>
 66 | 									<path
 67 | 										d='M308.525 62.3403C308.462 64.1296 308.118 65.893 307.507 67.5517C307.197 68.3789 306.737 69.1269 306.154 69.7488C305.571 70.3708 304.879 70.8535 304.12 71.1668C303.042 71.4858 301.911 71.5263 300.817 71.2851C299.863 71.175 298.943 70.829 298.126 70.2727C296.855 69.3072 296.221 67.5843 295.99 65.8982C295.759 64.2142 295.862 62.4934 295.715 60.7971C295.571 59.427 295.335 58.0706 295.009 56.7391C294.909 56.2961 294.807 55.8552 294.707 55.4143C294.609 54.9734 294.513 54.5325 294.425 54.0916C294.343 53.6772 294.268 53.2608 294.203 52.8423C294.149 52.4892 294.101 52.134 294.066 51.7768C294.034 50.7177 293.874 49.6682 293.591 48.6557C293.326 47.999 292.993 47.3779 292.601 46.8042C292.432 46.5389 292.27 46.2735 292.12 45.9979C291.687 45.2818 291.486 44.4251 291.549 43.5668C291.567 43.4341 291.596 43.3036 291.636 43.1769C291.651 43.1279 291.667 43.079 291.686 43.032C291.852 42.9821 292.005 42.8882 292.131 42.7583C292.257 42.6285 292.352 42.4667 292.408 42.2869C292.472 41.9007 292.442 41.5028 292.322 41.1336C292.183 40.6176 291.994 40.1199 291.758 39.6496C291.603 39.3393 291.076 38.78 291.072 38.4248C291.065 37.7103 292.329 37.1347 292.841 36.853C294.403 35.9887 296.146 35.5985 297.89 35.7221C299.008 35.8058 300.22 36.1855 300.837 37.2204C301.392 38.1533 301.318 39.3617 301.554 40.4456C301.579 40.6032 301.64 40.7513 301.73 40.8763C301.851 40.9977 302.002 41.0748 302.164 41.0968C302.438 41.1569 302.719 41.1694 302.996 41.1335H302.998C303.071 41.1271 303.144 41.1155 303.216 41.0988C303.648 41.0108 304.056 40.8162 304.41 40.5293C304.639 40.462 304.87 40.4068 305.103 40.364C305.112 40.3629 305.121 40.3609 305.13 40.3579C306.056 43.5851 306.176 47.045 306.934 50.3315C307.309 51.9665 307.847 53.5812 307.923 55.2632C307.928 55.3367 307.93 55.4122 307.932 55.4877C307.943 56.0287 307.904 56.5737 307.925 57.1126C307.932 57.3553 307.956 57.5969 307.999 57.8352C308.081 58.2185 308.185 58.5961 308.307 58.9661L308.313 58.9844C308.348 59.1028 308.381 59.2233 308.409 59.3437C308.429 59.4315 308.448 59.5172 308.462 59.605L308.464 59.6111C308.601 60.5131 308.622 61.432 308.525 62.3403Z'
 68 | 										fill='#FBBEBE'
 69 | 									/>
 70 | 									<path
 71 | 										d='M295.555 41.2336C301.577 41.2336 306.458 35.8416 306.458 29.1901C306.458 22.5387 301.577 17.1467 295.555 17.1467C289.533 17.1467 284.651 22.5387 284.651 29.1901C284.651 35.8416 289.533 41.2336 295.555 41.2336Z'
 72 | 										fill='#FBBEBE'
 73 | 									/>
 74 | 									<path
 75 | 										d='M364.779 94.8087C364.463 91.523 363.406 88.3773 361.704 85.6598C361.987 87.5173 362.27 89.3742 362.554 91.2304C362.201 91.3432 361.826 91.3398 361.475 91.2205C361.124 91.1012 360.812 90.8712 360.577 90.5588C360.118 89.9256 359.767 89.2056 359.54 88.4339C358.301 85.0372 356.682 81.8257 354.719 78.8746C347.777 78.2357 340.916 75.0574 334.811 71.3525C328.706 67.6497 322.991 63.2099 316.967 59.3499C315.922 58.6525 314.834 58.0386 313.71 57.5127C311.825 56.6778 309.709 56.2451 307.922 55.2632C307.802 55.1979 307.682 55.1285 307.564 55.0571C307.16 54.8145 306.778 54.5309 306.422 54.2099C306.229 54.0374 306.047 53.8519 305.875 53.6547C304.983 52.5089 304.276 51.2026 303.785 49.7926C302.826 47.4493 302.484 44.6221 301.526 42.2787C301.966 41.8245 302.461 41.4392 302.996 41.1336H302.997C303.075 41.0887 303.153 41.0458 303.232 41.005C303.611 40.8079 304.005 40.6488 304.409 40.5294C304.638 40.462 304.869 40.4069 305.102 40.364C305.112 40.363 305.121 40.3609 305.13 40.3579C306.21 40.1636 307.316 40.2602 308.355 40.6396C309.874 41.2071 311.155 42.34 312.432 43.4116C314.506 45.026 316.496 46.7693 318.392 48.6332C319.445 49.7477 320.406 50.9725 321.539 51.985C322.48 52.7875 323.473 53.514 324.509 54.1589C330.639 58.1924 336.769 62.2253 342.9 66.2575C344.976 67.6231 347.053 68.9887 349.082 70.4339C352.165 72.6303 355.136 75.0104 358.106 77.3885C359.856 78.7888 361.606 80.1898 363.355 81.5915C363.928 81.9958 364.432 82.5101 364.842 83.1102C365.204 83.7915 365.43 84.5511 365.502 85.3372C365.941 88.5132 365.693 91.7588 364.779 94.8087Z'
 76 | 										fill='#FBBEBE'
 77 | 									/>
 78 | 									<path
 79 | 										d='M311.229 71.3974C310.493 75.0411 307.159 77.2436 305.417 80.4443C303.251 84.4166 304.134 89.034 304.947 93.584C303.461 94.9986 301.975 96.4132 300.488 97.8278C299.667 98.6055 298.847 99.3873 297.963 100.075C296.675 101.028 295.329 101.882 293.935 102.631C292.619 103.378 291.303 104.126 289.987 104.874C288.764 105.634 287.468 106.241 286.123 106.683C283.53 107.418 280.777 106.903 278.212 106.052C277.909 105.964 277.618 105.833 277.347 105.662C277.187 105.557 277.047 105.417 276.936 105.252C276.684 104.751 276.592 104.17 276.676 103.605C276.936 98.8362 277.992 94.1678 279.043 89.5341C279.605 86.7542 280.361 84.0264 281.303 81.3751C282.228 79.1033 283.29 76.9033 284.484 74.79C285.801 72.1311 287.362 69.6284 289.141 67.321C290.007 66.4329 290.736 65.3946 291.299 64.2469C291.956 62.5934 291.702 60.6971 291.835 58.8967C291.937 57.544 292.262 56.2233 292.795 54.9999V54.9979C293.079 54.3389 293.422 53.7126 293.818 53.1281C293.998 53.5894 294.177 54.05 294.356 54.51C294.474 54.8121 294.591 55.1136 294.707 55.4143C294.859 55.8022 295.009 56.1886 295.158 56.5738C295.589 57.6801 296.019 58.7858 296.448 59.8908C296.912 61.2826 297.573 62.5841 298.407 63.7468C298.788 64.3421 299.302 64.8181 299.9 65.1283C300.497 65.4385 301.157 65.5722 301.815 65.5165C302.474 65.4608 303.107 65.2175 303.655 64.8103C304.203 64.4032 304.645 63.8461 304.94 63.1936C305.561 61.9755 306.011 60.6602 306.274 59.2927C306.639 57.6277 306.689 55.8975 306.422 54.21C305.977 50.9603 304.725 47.6412 303.816 44.6221C303.446 43.6155 303.232 42.5473 303.182 41.4622C303.184 41.3403 303.195 41.2188 303.216 41.0989C303.221 41.0683 303.227 41.0356 303.232 41.005C303.611 40.808 304.005 40.6488 304.409 40.5294C304.639 40.462 304.87 40.4069 305.102 40.364C305.903 45.1488 306.704 49.9335 307.507 54.7182C307.525 54.8305 307.546 54.9428 307.564 55.0571C307.679 55.743 307.795 56.4288 307.924 57.1126C308.041 57.7332 308.167 58.3517 308.307 58.9661L308.313 58.9845C308.361 59.1927 308.41 59.3989 308.462 59.605L308.464 59.6112C308.606 60.1746 308.765 60.7339 308.945 61.285C310.031 64.6061 311.925 67.9497 311.229 71.3974Z'
 80 | 										fill='#F6009B'
 81 | 									/>
 82 | 									<path
 83 | 										d='M355.479 122.602C355.445 123.304 355.568 124.005 355.838 124.642C356.52 126.019 358.157 126.332 359.574 126.461C367.851 127.213 376.177 126.932 384.397 125.626C384.843 125.592 385.276 125.444 385.661 125.193C386.829 124.288 386.109 122.082 384.833 121.376C383.557 120.67 382.042 120.84 380.642 120.534C379.251 120.147 377.927 119.513 376.72 118.655C373.881 116.853 371.083 114.975 368.326 113.019C366.685 111.855 364.748 110.613 362.899 111.303C357.892 113.174 355.446 116.637 355.479 122.602Z'
 84 | 										fill='#3F3D56'
 85 | 									/>
 86 | 									<path
 87 | 										d='M294.467 53.8364V53.8384C294.454 53.9242 294.441 54.0079 294.424 54.0916C294.404 54.2304 294.38 54.3712 294.356 54.51C294.127 55.8062 293.846 57.0963 293.522 58.3782C292.635 61.9198 291.447 65.4042 290.268 68.8377C287.104 78.0438 283.94 87.2506 280.775 96.458C279.976 98.7769 279.18 101.098 278.272 103.37C277.969 104.127 277.657 104.89 277.347 105.662C276.234 108.424 275.166 111.276 274.811 114.215C274.48 116.15 274.442 118.131 274.698 120.08C275.053 122.007 276.112 123.889 277.77 124.601C278.579 124.95 279.738 125.418 279.516 126.346C279.396 126.857 278.871 127.106 278.4 127.191C277.778 127.301 277.141 127.258 276.536 127.065C275.93 126.873 275.37 126.535 274.896 126.077C274.011 125.209 273.331 123.86 272.154 123.715C271.339 123.617 270.588 124.156 269.842 124.534C266.796 126.071 263.248 124.995 260.049 123.903C260.3 122.472 261.601 121.529 262.893 121.243C264.185 120.955 265.521 121.159 266.839 121.121C267.26 121.146 267.679 121.027 268.038 120.78C268.359 120.454 268.585 120.028 268.685 119.559C269.533 116.781 270.165 113.928 270.572 111.031C270.997 108.003 271.174 104.929 271.78 101.939C272.251 99.6057 272.98 97.346 273.604 95.0557C274.812 90.3401 275.804 85.5602 276.576 80.7342C276.966 78.7292 277.246 76.6998 277.413 74.6573C277.518 72.9631 277.468 71.2606 277.616 69.5725C277.864 67.3762 278.279 65.2069 278.856 63.0874C279.422 60.7747 279.987 58.4633 280.551 56.1532C281.388 52.7341 282.286 49.1823 284.408 46.5246C285.145 45.5889 286.048 44.8304 287.061 44.296C288.074 43.7616 289.176 43.4627 290.298 43.4178C290.718 43.4172 291.138 43.4672 291.549 43.5668C291.617 43.5851 291.685 43.6035 291.754 43.6239C292.202 43.7532 292.631 43.9497 293.031 44.2077C293.685 43.7484 294.018 43.9097 294.452 44.618C294.833 45.3676 295.012 46.2216 294.969 47.0798C295.006 49.3449 294.838 51.6083 294.467 53.8364Z'
 88 | 										fill='#FBBEBE'
 89 | 									/>
 90 | 									<path
 91 | 										d='M295.186 56.5431L295.158 56.5737L295.009 56.7391L293.523 58.3782L292.795 54.9999L290.298 43.4178C290.719 43.4172 291.138 43.4671 291.549 43.5668C291.567 43.4341 291.596 43.3035 291.636 43.1769L291.754 43.6239L292.6 46.8042L294.203 52.8423L294.467 53.8364V53.8384L295.186 56.5431Z'
 92 | 										fill='#F6009B'
 93 | 									/>
 94 | 									<path
 95 | 										d='M304.615 19.593C304.613 20.6655 304.421 21.7272 304.048 22.7174C303.675 23.7076 303.129 24.6069 302.441 25.3639C302.192 25.6394 301.925 25.8945 301.642 26.127C300.367 27.1889 298.814 27.7637 297.217 27.7645H288.351C286.392 27.7611 284.514 26.8992 283.129 25.3678C281.745 23.8365 280.968 21.761 280.968 19.597C280.968 17.4331 281.745 15.3575 283.129 13.8262C284.514 12.2949 286.392 11.4329 288.351 11.4296H297.217C299.176 11.4352 301.054 12.2968 302.44 13.8263C303.826 15.3558 304.608 17.429 304.615 19.593Z'
 96 | 										fill='#2F2E41'
 97 | 									/>
 98 | 									<path
 99 | 										d='M312.927 20.2086C317.111 20.2086 320.504 16.4615 320.504 11.8394C320.504 7.21717 317.111 3.47015 312.927 3.47015C308.742 3.47015 305.35 7.21717 305.35 11.8394C305.35 16.4615 308.742 20.2086 312.927 20.2086Z'
100 | 										fill='#2F2E41'
101 | 									/>
102 | 									<path
103 | 										opacity='0.1'
104 | 										d='M312.742 3.47015C312.649 3.47015 312.557 3.47423 312.465 3.47789C314.425 3.5566 316.281 4.472 317.642 6.03147C319.004 7.59095 319.765 9.67293 319.765 11.8394C319.765 14.0058 319.004 16.0878 317.642 17.6472C316.281 19.2067 314.425 20.1221 312.465 20.2008C312.557 20.2045 312.649 20.2086 312.742 20.2086C314.752 20.2086 316.679 19.3268 318.1 17.7573C319.521 16.1877 320.319 14.059 320.319 11.8394C320.319 9.61971 319.521 7.49097 318.1 5.92144C316.679 4.35191 314.752 3.47015 312.742 3.47015Z'
105 | 										fill='black'
106 | 									/>
107 | 									<path
108 | 										opacity='0.1'
109 | 										d='M276.705 3.47015C276.798 3.47015 276.89 3.47423 276.982 3.47789C275.022 3.5566 273.166 4.472 271.805 6.03147C270.443 7.59095 269.683 9.67293 269.683 11.8394C269.683 14.0058 270.443 16.0878 271.805 17.6472C273.166 19.2067 275.022 20.1221 276.982 20.2008C276.89 20.2045 276.798 20.2086 276.705 20.2086C274.697 20.2066 272.771 19.324 271.352 17.7547C269.932 16.1853 269.135 14.0577 269.135 11.8394C269.135 9.62099 269.932 7.49336 271.352 5.92404C272.771 4.35472 274.697 3.47211 276.705 3.47015Z'
110 | 										fill='black'
111 | 									/>
112 | 									<path
113 | 										opacity='0.1'
114 | 										d='M301.642 26.127C300.367 27.1889 298.814 27.7637 297.217 27.7645H288.351C286.754 27.7637 285.2 27.1889 283.925 26.127H301.642Z'
115 | 										fill='black'
116 | 									/>
117 | 									<path
118 | 										d='M358.896 86.7696C358.896 86.7696 360.806 92.8491 362.554 91.2304L361.16 83.2837L358.896 86.7696Z'
119 | 										fill='#FBBEBE'
120 | 									/>
121 | 									<path
122 | 										d='M591.34 272.169C593.119 272.883 595.024 273.131 596.905 272.894C598.786 272.656 600.591 271.939 602.178 270.8C603.765 269.66 605.091 268.129 606.051 266.327C607.011 264.525 607.579 262.501 607.711 260.415C607.842 258.329 607.532 256.238 606.807 254.306C606.082 252.375 604.96 250.656 603.531 249.285C602.101 247.914 600.403 246.929 598.57 246.406C596.737 245.884 594.819 245.839 592.968 246.275L593.274 253.224L590.297 247.269C587.376 248.785 585.119 251.52 584.023 254.873C583.633 256.048 583.397 257.277 583.32 258.525C583.132 261.453 583.813 264.369 585.26 266.831C586.708 269.293 588.842 271.167 591.34 272.169Z'
123 | 										fill='#57B894'
124 | 									/>
125 | 									<path
126 | 										d='M606.068 352.767C605.018 346.857 609.571 341.618 614.068 338.212C618.565 334.807 623.82 331.461 625.355 325.681C627.56 317.375 620.991 309.768 615.878 303.209C612.085 298.34 608.827 292.993 606.174 287.278C605.11 284.986 604.132 282.591 603.853 280.034C603.449 276.352 604.52 272.689 605.599 269.177C609.193 257.477 613.036 245.876 617.127 234.373'
127 | 										stroke='#3F3D56'
128 | 										stroke-miterlimit='10'
129 | 									/>
130 | 									<path
131 | 										d='M591.843 270.379C593.622 271.094 595.527 271.342 597.408 271.105C599.289 270.867 601.094 270.15 602.681 269.011C604.268 267.871 605.594 266.34 606.554 264.538C607.514 262.736 608.082 260.712 608.213 258.626C608.345 256.54 608.035 254.449 607.31 252.517C606.585 250.586 605.463 248.867 604.034 247.496C602.604 246.125 600.906 245.14 599.073 244.617C597.24 244.095 595.322 244.05 593.471 244.486L593.777 251.435L590.8 245.479C587.879 246.996 585.622 249.731 584.526 253.084C584.136 254.259 583.9 255.488 583.823 256.736C583.635 259.664 584.316 262.58 585.763 265.042C587.211 267.504 589.345 269.378 591.843 270.379V270.379Z'
132 | 										stroke='#3F3D56'
133 | 										stroke-miterlimit='10'
134 | 									/>
135 | 									<path
136 | 										d='M604.575 231.973C605.273 229.845 606.445 227.946 607.982 226.449C609.52 224.953 611.374 223.909 613.373 223.412L614.379 230.018L616.245 223.08C618.836 223.122 621.347 224.073 623.417 225.795C625.486 227.516 627.007 229.92 627.759 232.659C628.511 235.397 628.456 238.329 627.602 241.031C626.747 243.733 625.137 246.064 623.004 247.69C620.872 249.315 618.327 250.149 615.737 250.073C613.147 249.996 610.646 249.012 608.595 247.264C606.544 245.515 605.049 243.091 604.327 240.343C603.604 237.594 603.691 234.663 604.575 231.973H604.575Z'
137 | 										fill='#57B894'
138 | 									/>
139 | 									<path
140 | 										d='M605.246 229.588C605.944 227.46 607.116 225.56 608.653 224.064C610.191 222.568 612.044 221.523 614.044 221.026L615.05 227.633L616.916 220.694C619.507 220.737 622.018 221.687 624.088 223.409C626.157 225.131 627.678 227.535 628.43 230.273C629.182 233.012 629.127 235.944 628.272 238.645C627.418 241.347 625.808 243.679 623.675 245.304C621.543 246.929 618.998 247.764 616.408 247.687C613.817 247.611 611.316 246.627 609.266 244.878C607.215 243.129 605.72 240.705 604.998 237.957C604.275 235.209 604.362 232.278 605.246 229.588H605.246Z'
141 | 										stroke='#3F3D56'
142 | 										stroke-miterlimit='10'
143 | 									/>
144 | 									<path
145 | 										d='M613.732 303.342C616.554 304.473 619.653 304.417 622.44 303.186C625.227 301.954 627.506 299.633 628.842 296.665C630.179 293.697 630.481 290.289 629.689 287.091C628.897 283.893 627.068 281.129 624.55 279.325L623.116 284.657L622.1 277.973C622.089 277.968 622.079 277.963 622.068 277.96C620.559 277.354 618.957 277.083 617.353 277.161C615.749 277.24 614.174 277.666 612.719 278.417C611.265 279.168 609.958 280.228 608.874 281.537C607.791 282.846 606.951 284.377 606.404 286.045C605.856 287.712 605.611 289.482 605.683 291.254C605.755 293.026 606.143 294.764 606.823 296.371C607.504 297.977 608.464 299.42 609.65 300.616C610.835 301.812 612.222 302.739 613.732 303.342H613.732Z'
146 | 										fill='#57B894'
147 | 									/>
148 | 									<path
149 | 										d='M614.314 300.926C617.136 302.057 620.235 302.001 623.022 300.769C625.809 299.538 628.088 297.217 629.424 294.249C630.761 291.28 631.063 287.873 630.271 284.675C629.479 281.477 627.65 278.713 625.132 276.909L623.698 282.241L622.682 275.557C622.672 275.551 622.661 275.547 622.65 275.544C621.141 274.938 619.539 274.666 617.935 274.745C616.331 274.823 614.756 275.25 613.301 276.001C611.847 276.752 610.54 277.812 609.456 279.121C608.373 280.429 607.533 281.961 606.986 283.628C606.438 285.296 606.193 287.066 606.265 288.837C606.337 290.609 606.725 292.348 607.405 293.954C608.086 295.561 609.046 297.003 610.232 298.2C611.417 299.396 612.804 300.322 614.314 300.926H614.314Z'
150 | 										stroke='#3F3D56'
151 | 										stroke-miterlimit='10'
152 | 									/>
153 | 									<path
154 | 										d='M601.007 325.764C601.492 328.813 602.912 331.585 605.028 333.615C607.144 335.645 609.827 336.81 612.628 336.915C615.429 337.019 618.178 336.056 620.413 334.188C622.647 332.319 624.233 329.659 624.902 326.653C625.572 323.646 625.286 320.477 624.091 317.677C622.897 314.876 620.867 312.615 618.342 311.271C615.816 309.927 612.95 309.584 610.223 310.297C607.495 311.011 605.073 312.739 603.363 315.191L608.808 324.245L601.367 319.44C600.79 321.485 600.667 323.654 601.007 325.764Z'
155 | 										fill='#57B894'
156 | 									/>
157 | 									<path
158 | 										d='M601.511 323.975C601.996 327.024 603.416 329.796 605.532 331.826C607.647 333.856 610.331 335.021 613.132 335.125C615.933 335.23 618.682 334.267 620.917 332.398C623.151 330.53 624.736 327.87 625.406 324.863C626.076 321.857 625.789 318.688 624.595 315.888C623.4 313.087 621.37 310.825 618.845 309.482C616.32 308.138 613.454 307.795 610.727 308.508C607.999 309.222 605.577 310.95 603.866 313.402L609.312 322.456L601.871 317.651C601.294 319.696 601.171 321.865 601.511 323.975V323.975Z'
159 | 										stroke='#3F3D56'
160 | 										stroke-miterlimit='10'
161 | 									/>
162 | 									<path
163 | 										d='M5.28973 305.058C6.45865 305.527 7.71029 305.69 8.946 305.534C10.1817 305.378 11.3677 304.907 12.4105 304.159C13.4534 303.41 14.3245 302.404 14.9553 301.22C15.586 300.036 15.9592 298.706 16.0453 297.336C16.1315 295.965 15.9283 294.591 15.4517 293.322C14.9752 292.053 14.2383 290.924 13.2992 290.023C12.36 289.122 11.2443 288.475 10.04 288.132C8.83569 287.788 7.57565 287.759 6.35922 288.045L6.56024 292.611L4.60457 288.698C2.6852 289.694 1.20241 291.491 0.482041 293.695C0.226208 294.466 0.0706801 295.274 0.0200981 296.094C-0.103344 298.018 0.344308 299.934 1.29522 301.551C2.24612 303.169 3.64846 304.4 5.28973 305.058Z'
164 | 										fill='#57B894'
165 | 									/>
166 | 									<path
167 | 										d='M14.967 358.013C14.2767 354.13 17.2681 350.687 20.2229 348.45C23.1778 346.212 26.6303 344.014 27.6385 340.217C29.0875 334.759 24.7715 329.762 21.4122 325.452C18.92 322.253 16.7797 318.74 15.0362 314.985C14.2783 313.51 13.762 311.899 13.5112 310.226C13.2463 307.807 13.9499 305.4 14.6587 303.092C17.0201 295.406 19.5448 287.783 22.2328 280.226'
168 | 										stroke='#3F3D56'
169 | 										stroke-miterlimit='10'
170 | 									/>
171 | 									<path
172 | 										d='M5.62079 303.882C6.78971 304.352 8.04135 304.515 9.27706 304.359C10.5128 304.203 11.6988 303.732 12.7416 302.983C13.7844 302.234 14.6555 301.228 15.2863 300.044C15.9171 298.86 16.2902 297.531 16.3764 296.16C16.4625 294.789 16.2593 293.416 15.7828 292.147C15.3062 290.878 14.5693 289.748 13.6302 288.848C12.6911 287.947 11.5754 287.299 10.3711 286.956C9.16674 286.613 7.90671 286.583 6.69028 286.87L6.8913 291.436L4.93563 287.523C3.01626 288.519 1.53346 290.316 0.813095 292.519C0.557265 293.291 0.40174 294.099 0.351155 294.919C0.227705 296.842 0.675354 298.758 1.62626 300.376C2.57717 301.993 3.97952 303.224 5.62079 303.882V303.882Z'
173 | 										stroke='#3F3D56'
174 | 										stroke-miterlimit='10'
175 | 									/>
176 | 									<path
177 | 										d='M13.9855 278.649C14.4442 277.251 15.2141 276.003 16.2243 275.02C17.2345 274.037 18.4524 273.35 19.7658 273.024L20.4271 277.364L21.653 272.806C23.3551 272.833 25.0052 273.458 26.365 274.589C27.7247 275.721 28.7238 277.3 29.2181 279.099C29.7123 280.898 29.676 282.825 29.1145 284.6C28.553 286.375 27.4953 287.907 26.0941 288.975C24.6929 290.043 23.0207 290.591 21.319 290.541C19.6173 290.49 17.9741 289.844 16.6267 288.695C15.2792 287.546 14.2972 285.953 13.8225 284.148C13.3477 282.342 13.4048 280.416 13.9855 278.649Z'
178 | 										fill='#57B894'
179 | 									/>
180 | 									<path
181 | 										d='M14.4259 277.081C14.8846 275.683 15.6546 274.435 16.6647 273.452C17.6749 272.469 18.8928 271.783 20.2062 271.456L20.8675 275.797L22.0934 271.238C23.7955 271.266 25.4456 271.891 26.8054 273.022C28.1652 274.153 29.1643 275.733 29.6585 277.532C30.1527 279.331 30.1164 281.257 29.5549 283.032C28.9934 284.808 27.9357 286.34 26.5345 287.407C25.1333 288.475 23.4612 289.024 21.7595 288.973C20.0577 288.923 18.4145 288.277 17.0671 287.127C15.7196 285.978 14.7376 284.386 14.2629 282.58C13.7882 280.775 13.8453 278.849 14.4259 277.081V277.081Z'
182 | 										stroke='#3F3D56'
183 | 										stroke-miterlimit='10'
184 | 									/>
185 | 									<path
186 | 										d='M20.0019 325.54C21.8557 326.282 23.8921 326.246 25.723 325.437C27.5539 324.628 29.0512 323.103 29.9296 321.152C30.8079 319.202 31.0059 316.963 30.4858 314.862C29.9657 312.761 28.7638 310.945 27.1093 309.76L26.1673 313.263L25.4993 308.871C25.4927 308.868 25.4859 308.865 25.4789 308.863C24.4873 308.465 23.4344 308.286 22.3804 308.337C21.3263 308.389 20.2917 308.669 19.3358 309.162C18.3798 309.656 17.5213 310.352 16.8091 311.212C16.097 312.072 15.5453 313.079 15.1855 314.174C14.8257 315.27 14.6648 316.433 14.7122 317.597C14.7595 318.761 15.0141 319.904 15.4614 320.959C15.9087 322.015 16.54 322.963 17.319 323.749C18.0981 324.534 19.0098 325.143 20.0019 325.54Z'
187 | 										fill='#57B894'
188 | 									/>
189 | 									<path
190 | 										d='M20.3847 323.952C22.2385 324.695 24.2749 324.658 26.1058 323.849C27.9367 323.04 29.434 321.515 30.3124 319.565C31.1907 317.615 31.3887 315.376 30.8686 313.275C30.3485 311.174 29.1466 309.358 27.4921 308.172L26.5501 311.676L25.8822 307.284C25.8756 307.28 25.8687 307.278 25.8617 307.275C24.8704 306.878 23.8179 306.7 22.7644 306.753C21.7108 306.805 20.6769 307.085 19.7216 307.579C17.7923 308.575 16.3004 310.377 15.5741 312.589C14.8478 314.8 14.9466 317.24 15.8488 319.371C16.751 321.502 18.3826 323.15 20.3847 323.952V323.952Z'
191 | 										stroke='#3F3D56'
192 | 										stroke-miterlimit='10'
193 | 									/>
194 | 									<path
195 | 										d='M11.6419 340.271C11.9607 342.274 12.8933 344.096 14.2835 345.429C15.6737 346.763 17.4369 347.529 19.2773 347.597C21.1177 347.666 22.9235 347.033 24.3918 345.805C25.86 344.578 26.9015 342.83 27.3416 340.855C27.7816 338.88 27.5934 336.798 26.8086 334.958C26.0237 333.118 24.6899 331.632 23.0309 330.749C21.3719 329.866 19.4886 329.64 17.6967 330.109C15.9049 330.578 14.3135 331.714 13.1895 333.325L16.7676 339.273L11.8786 336.116C11.4995 337.46 11.4183 338.885 11.6419 340.271Z'
196 | 										fill='#57B894'
197 | 									/>
198 | 									<path
199 | 										d='M11.972 339.095C12.2907 341.099 13.2234 342.92 14.6136 344.254C16.0038 345.588 17.7669 346.353 19.6074 346.422C21.4478 346.49 23.2536 345.858 24.7218 344.63C26.1901 343.402 27.2316 341.654 27.6716 339.679C28.1117 337.704 27.9235 335.622 27.1386 333.782C26.3538 331.942 25.02 330.456 23.361 329.573C21.702 328.691 19.8186 328.465 18.0268 328.934C16.2349 329.403 14.6436 330.538 13.5196 332.149L17.0976 338.098L12.2086 334.94C11.8296 336.284 11.7484 337.709 11.972 339.095V339.095Z'
200 | 										stroke='#3F3D56'
201 | 										stroke-miterlimit='10'
202 | 									/>
203 | 									<path
204 | 										d='M282.464 221.287C287.978 221.287 292.448 214.897 292.448 207.015C292.448 199.133 287.978 192.744 282.464 192.744C276.95 192.744 272.479 199.133 272.479 207.015C272.479 214.897 276.95 221.287 282.464 221.287Z'
205 | 										fill='#2F2E41'
206 | 									/>
207 | 									<path
208 | 										d='M336.79 221.611C342.304 221.611 346.774 215.222 346.774 207.34C346.774 199.458 342.304 193.068 336.79 193.068C331.276 193.068 326.806 199.458 326.806 207.34C326.806 215.222 331.276 221.611 336.79 221.611Z'
209 | 										fill='#2F2E41'
210 | 									/>
211 | 									<path
212 | 										d='M329.155 249.506C329.155 255.954 321.003 261.183 310.949 261.183C300.894 261.183 292.742 255.954 292.742 249.506C292.742 243.921 298.856 239.25 307.026 238.108C308.326 237.919 309.637 237.826 310.949 237.829C313.147 237.822 315.339 238.083 317.485 238.608C324.31 240.288 329.155 244.537 329.155 249.506Z'
213 | 										fill='#2F2E41'
214 | 									/>
215 | 									<path
216 | 										d='M284.813 218.044C290.328 218.044 294.798 211.654 294.798 203.772C294.798 195.89 290.328 189.5 284.813 189.5C279.299 189.5 274.829 195.89 274.829 203.772C274.829 211.654 279.299 218.044 284.813 218.044Z'
217 | 										stroke='#3F3D56'
218 | 										stroke-miterlimit='10'
219 | 									/>
220 | 									<path
221 | 										d='M339.139 218.368C344.653 218.368 349.123 211.978 349.123 204.096C349.123 196.214 344.653 189.824 339.139 189.824C333.624 189.824 329.154 196.214 329.154 204.096C329.154 211.978 333.624 218.368 339.139 218.368Z'
222 | 										stroke='#3F3D56'
223 | 										stroke-miterlimit='10'
224 | 									/>
225 | 									<path
226 | 										d='M313.297 257.94C323.353 257.94 331.504 252.712 331.504 246.263C331.504 239.814 323.353 234.586 313.297 234.586C303.242 234.586 295.091 239.814 295.091 246.263C295.091 252.712 303.242 257.94 313.297 257.94Z'
227 | 										stroke='#3F3D56'
228 | 										stroke-miterlimit='10'
229 | 									/>
230 | 									<path
231 | 										d='M317.702 239.581C317.707 240.397 317.43 241.184 316.927 241.781C316.689 242.068 316.401 242.297 316.079 242.454C315.758 242.611 315.411 242.693 315.059 242.695H309.186C308.462 242.667 307.778 242.324 307.283 241.74C306.788 241.157 306.522 240.38 306.543 239.581C306.54 238.948 306.708 238.329 307.025 237.803C308.324 237.601 309.636 237.501 310.948 237.505C313.149 237.497 315.343 237.776 317.485 238.335C317.63 238.731 317.704 239.154 317.702 239.581Z'
232 | 										fill='white'
233 | 									/>
234 | 									<path
235 | 										d='M284.814 203.123C286.435 203.123 287.75 201.671 287.75 199.879C287.75 198.088 286.435 196.636 284.814 196.636C283.192 196.636 281.877 198.088 281.877 199.879C281.877 201.671 283.192 203.123 284.814 203.123Z'
236 | 										fill='white'
237 | 									/>
238 | 									<path
239 | 										d='M339.433 203.123C341.054 203.123 342.369 201.671 342.369 199.879C342.369 198.088 341.054 196.636 339.433 196.636C337.811 196.636 336.496 198.088 336.496 199.879C336.496 201.671 337.811 203.123 339.433 203.123Z'
240 | 										fill='white'
241 | 									/>
242 | 									<path
243 | 										opacity='0.3'
244 | 										d='M342.369 233.613C343.991 233.613 345.306 232.16 345.306 230.369C345.306 228.578 343.991 227.126 342.369 227.126C340.747 227.126 339.433 228.578 339.433 230.369C339.433 232.16 340.747 233.613 342.369 233.613Z'
245 | 										fill='#E7D040'
246 | 									/>
247 | 									<path
248 | 										opacity='0.3'
249 | 										d='M270.718 233.613C272.34 233.613 273.654 232.16 273.654 230.369C273.654 228.578 272.34 227.126 270.718 227.126C269.096 227.126 267.781 228.578 267.781 230.369C267.781 232.16 269.096 233.613 270.718 233.613Z'
250 | 										fill='#E7D040'
251 | 									/>
252 | 								</g>
253 | 								<defs>
254 | 									<clipPath id='clip0'>
255 | 										<rect width='631' height='379' fill='white' />
256 | 									</clipPath>
257 | 								</defs>
258 | 							</svg>


--------------------------------------------------------------------------------