From 2680c8eaf6854941309ee6b41129a245b2d3396e Mon Sep 17 00:00:00 2001 From: ankitaNioclass Date: Thu, 20 Jun 2024 22:25:13 +0530 Subject: [PATCH 1/2] added expense tracker with bar graph --- App.js | 63 ++++---- package-lock.json | 29 ++++ package.json | 1 + src/screens/ExpenseTracker/AddExpense.js | 90 +++++++++++ src/screens/ExpenseTracker/Dasboard.js | 182 +++++++++++++++++++++++ src/screens/Home/home.js | 52 +++++-- 6 files changed, 377 insertions(+), 40 deletions(-) create mode 100644 src/screens/ExpenseTracker/AddExpense.js create mode 100644 src/screens/ExpenseTracker/Dasboard.js diff --git a/App.js b/App.js index cf16d9a1..5e189b41 100644 --- a/App.js +++ b/App.js @@ -22,7 +22,7 @@ import BookFinder from "./src/screens/BookFinder/BookFinder"; import ToDoList from "./src/screens/ToDoList/toDoList"; import AddTaskScreen from "./src/screens/ToDoList/addTask"; import QRScanner from "./src/screens/QRScanner/qrScanner"; -import MovieFinder from './src/screens/MovieFinder/MovieFinder'; +import MovieFinder from "./src/screens/MovieFinder/MovieFinder"; import HexColorGeneratorScreen from "./src/screens/HexColorGenerator/HexColorGeneratorScreen"; import QRCodeGenerator from "./src/screens/QRGenerator/QRGenerator"; import RecipeFinder from "./src/screens/RecipeFinder/RecipeFinder"; @@ -32,7 +32,8 @@ import AnimeFinder from "./src/screens/AnimeFinder/AnimeFinder"; import Pokedex from "./src/screens/Pokedex/Pokedex"; import AddWorkout from "./src/screens/FitnessTracker/AddWorkout"; import WorkoutOverview from "./src/screens/FitnessTracker/WorkoutOverview"; - +import AddExpense from "./src/screens/ExpenseTracker/AddExpense"; +import Dashboard from "./src/screens/ExpenseTracker/Dasboard"; export default function App() { const Stack = createNativeStackNavigator(); @@ -71,15 +72,15 @@ export default function App() { /> - + + - + ); -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 238f8020..40282097 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.10", + "react-native-chart-kit": "^6.12.0", "react-native-dropdown-picker": "^5.4.6", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "~2.12.0", @@ -12777,6 +12778,14 @@ "node": ">=8" } }, + "node_modules/paths-js": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz", + "integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA==", + "engines": { + "node": ">=0.11.0" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -12980,6 +12989,11 @@ "node": ">=4.0.0" } }, + "node_modules/point-in-polygon": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz", + "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==" + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -13662,6 +13676,21 @@ "react": "18.2.0" } }, + "node_modules/react-native-chart-kit": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.12.0.tgz", + "integrity": "sha512-nZLGyCFzZ7zmX0KjYeeSV1HKuPhl1wOMlTAqa0JhlyW62qV/1ZPXHgT8o9s8mkFaGxdqbspOeuaa6I9jUQDgnA==", + "dependencies": { + "lodash": "^4.17.13", + "paths-js": "^0.4.10", + "point-in-polygon": "^1.0.1" + }, + "peerDependencies": { + "react": "> 16.7.0", + "react-native": ">= 0.50.0", + "react-native-svg": "> 6.4.1" + } + }, "node_modules/react-native-dropdown-picker": { "version": "5.4.6", "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz", diff --git a/package.json b/package.json index 4c77845f..950f5e40 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.10", + "react-native-chart-kit": "^6.12.0", "react-native-dropdown-picker": "^5.4.6", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "~2.12.0", diff --git a/src/screens/ExpenseTracker/AddExpense.js b/src/screens/ExpenseTracker/AddExpense.js new file mode 100644 index 00000000..4f25b4cf --- /dev/null +++ b/src/screens/ExpenseTracker/AddExpense.js @@ -0,0 +1,90 @@ +import React, { useState } from "react"; +import { + View, + Text, + TextInput, + Button, + StyleSheet, + TouchableOpacity, +} from "react-native"; + +const AddExpense = ({ navigation }) => { + const [amount, setAmount] = useState(""); + const [category, setCategory] = useState(""); + const [date, setDate] = useState(""); + + const handleAddExpense = () => { + if (amount && category && date) { + const newExpense = { amount, category, date }; + navigation.navigate("Dashboard", { newExpense }); + } else { + alert("Please fill in all fields"); + } + }; + + return ( + + Add Expense + + + + handleAddExpense()} + > + + Add Expense + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 16, + backgroundColor: "#fff", + }, + header: { + fontSize: 24, + fontWeight: "bold", + marginBottom: 16, + }, + input: { + height: 40, + borderColor: "gray", + borderWidth: 1, + marginBottom: 12, + paddingHorizontal: 8, + borderRadius: 8, + width: "95%", + alignSelf: "center", + }, +}); + +export default AddExpense; diff --git a/src/screens/ExpenseTracker/Dasboard.js b/src/screens/ExpenseTracker/Dasboard.js new file mode 100644 index 00000000..1f3c3338 --- /dev/null +++ b/src/screens/ExpenseTracker/Dasboard.js @@ -0,0 +1,182 @@ +import React, { useState, useEffect } from "react"; +import { + View, + Text, + TextInput, + Button, + StyleSheet, + TouchableOpacity, +} from "react-native"; +import { BarChart, PieChart } from "react-native-chart-kit"; +import { Dimensions } from "react-native"; + +const Dashboard = ({ navigation, route }) => { + const defaultExpenses = [ + { amount: 50, category: "Food", date: new Date().toISOString() }, + { amount: 100, category: "Transport", date: new Date().toISOString() }, + ]; + const [expenses, setExpenses] = useState(defaultExpenses); + const [totalExpenses, setTotalExpenses] = useState(100); + const [salary, setSalary] = useState(3000); // Initial salary value + const [isEditingSalary, setIsEditingSalary] = useState(false); + const [tempSalary, setTempSalary] = useState(salary); + + useEffect(() => { + if (route.params?.newExpense) { + const updatedExpenses = [...expenses, route.params.newExpense]; + setExpenses(updatedExpenses); + const updatedTotalExpenses = updatedExpenses.reduce( + (sum, expense) => sum + parseFloat(expense.amount), + 0 + ); + setTotalExpenses(updatedTotalExpenses); + } + }, [route.params?.newExpense]); + + const expenseData = expenses.reduce((acc, expense) => { + acc[expense.category] = + (acc[expense.category] || 0) + parseFloat(expense.amount); + return acc; + }, {}); + + const chartData = { + labels: Object.keys(expenseData), + datasets: [ + { + data: Object.values(expenseData), + }, + ], + }; + + const handleSaveSalary = () => { + setSalary(tempSalary); + setIsEditingSalary(false); + }; + + const chartConfig = { + backgroundGradientFrom: "#3F8782", + backgroundGradientFromOpacity: 0, + backgroundGradientTo: "#3F8782", + backgroundGradientToOpacity: 0.5, + color: (opacity = 1) => `rgba(41, 117, 111, ${opacity})`, + strokeWidth: 2, + barPercentage: 0.5, + useShadowColorFromDataset: false, + }; + + return ( + + Expense Tracker + Total Expenses: ₹ {totalExpenses} + + {isEditingSalary ? ( + setTempSalary(parseFloat(text) || 0)} + keyboardType="numeric" + style={styles.input} + /> + ) : ( + {`Total Income: ₹ ${salary}`} + )} + + + + + + { + isEditingSalary ? handleSaveSalary : () => setIsEditingSalary(true); + }} + > + + {isEditingSalary ? "Save" : "Edit Salary"} + + + navigation.navigate("Add Expense")} + > + + Add Expense + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 16, + backgroundColor: "#fff", + }, + header: { + fontSize: 24, + fontWeight: "bold", + marginBottom: 16, + }, + salaryContainer: { + // flexDirection: "row", + // alignItems: "center", + marginBottom: 16, + }, + salaryText: { + // fontSize: 1, + // marginLeft: 8, + // marginRight: 8, + }, + input: { + height: 40, + borderColor: "gray", + borderWidth: 1, + paddingHorizontal: 8, + marginLeft: 8, + marginRight: 8, + }, +}); + +export default Dashboard; diff --git a/src/screens/Home/home.js b/src/screens/Home/home.js index 80f18276..b323ee75 100644 --- a/src/screens/Home/home.js +++ b/src/screens/Home/home.js @@ -81,21 +81,35 @@ export default function Home() { Calculator + { + console.log("Button to Calculator is Pressed!"); + navigation.navigate("Calculator"); + }} + > + Calculator + - { - console.log("Button to Calculator is Pressed!") - navigation.navigate("Calculator") - })}>Calculator - - { - console.log("Button to Movie Finder is Pressed!") - navigation.navigate("Movie Finder") - })}>Movie Finder + { + console.log("Button to Movie Finder is Pressed!"); + navigation.navigate("Movie Finder"); + }} + > + Movie Finder + - { - console.log("Button to Color Generate is Pressed!") - navigation.navigate("Hex Color") - })}>Color Generator + { + console.log("Button to Color Generate is Pressed!"); + navigation.navigate("Hex Color"); + }} + > + Color Generator + + { + console.log("Button to Add Expense is Pressed!"); + navigation.navigate("Dashboard"); + }} + > + Add Expense + + { @@ -232,4 +256,4 @@ const styles = StyleSheet.create({ margin: 20, width: "100%", }, -}); \ No newline at end of file +}); From 12c6c8a5fd7b37457f4a2044fd811f2134643bf5 Mon Sep 17 00:00:00 2001 From: ankitaNioclass Date: Fri, 21 Jun 2024 21:12:43 +0530 Subject: [PATCH 2/2] conflict resolved --- package-lock.json | 165 ---------------------------------------------- 1 file changed, 165 deletions(-) diff --git a/package-lock.json b/package-lock.json index 92c33f65..c8fea7b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8365,19 +8365,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -10020,158 +10007,6 @@ "lightningcss-win32-x64-msvc": "1.19.0" } }, - "node_modules/lightningcss-darwin-arm64": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.19.0.tgz", - "integrity": "sha512-wIJmFtYX0rXHsXHSr4+sC5clwblEMji7HHQ4Ub1/CznVRxtCFha6JIt5JZaNf8vQrfdZnBxLLC6R8pC818jXqg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-x64": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.19.0.tgz", - "integrity": "sha512-Lif1wD6P4poaw9c/4Uh2z+gmrWhw/HtXFoeZ3bEsv6Ia4tt8rOJBdkfVaUJ6VXmpKHALve+iTyP2+50xY1wKPw==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm-gnueabihf": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.19.0.tgz", - "integrity": "sha512-P15VXY5682mTXaiDtbnLYQflc8BYb774j2R84FgDLJTN6Qp0ZjWEFyN1SPqyfTj2B2TFjRHRUvQSSZ7qN4Weig==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-gnu": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.19.0.tgz", - "integrity": "sha512-zwXRjWqpev8wqO0sv0M1aM1PpjHz6RVIsBcxKszIG83Befuh4yNysjgHVplF9RTU7eozGe3Ts7r6we1+Qkqsww==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-musl": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.19.0.tgz", - "integrity": "sha512-vSCKO7SDnZaFN9zEloKSZM5/kC5gbzUjoJQ43BvUpyTFUX7ACs/mDfl2Eq6fdz2+uWhUh7vf92c4EaaP4udEtA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-gnu": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.19.0.tgz", - "integrity": "sha512-0AFQKvVzXf9byrXUq9z0anMGLdZJS+XSDqidyijI5njIwj6MdbvX2UZK/c4FfNmeRa2N/8ngTffoIuOUit5eIQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-musl": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.19.0.tgz", - "integrity": "sha512-SJoM8CLPt6ECCgSuWe+g0qo8dqQYVcPiW2s19dxkmSI5+Uu1GIRzyKA0b7QqmEXolA+oSJhQqCmJpzjY4CuZAg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-x64-msvc": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.19.0.tgz", - "integrity": "sha512-C+VuUTeSUOAaBZZOPT7Etn/agx/MatzJzGRkeV+zEABmPuntv1zihncsi+AyGmjkkzq3wVedEy7h0/4S84mUtg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/lilconfig": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",