From e259fabdaa99bf4063cc0ca9e28318f3275a6fc7 Mon Sep 17 00:00:00 2001 From: sonali Date: Mon, 7 Oct 2024 16:52:10 +0530 Subject: [PATCH] "ne changes " --- src/App.js | 4 +- .../pages/Expense/Common/ExpenseEditPage.css | 16 +++++ .../Common/TotalExpenseSuccessfully.css | 14 ++++ .../Expense/ExpenseAmount/ExpenseAmount.css | 70 +++++++++++++++---- .../Expense/ExpenseAmount/ExpenseAmount.js | 59 ++++++++++------ .../ExpenseAmount/TotalExpenseAmount.css | 21 +++--- .../ExpenseAmount/TotalExpenseAmount.js | 61 +++++++++++----- .../ExpenseCategory/ExpenseCategory.css | 45 +++++++++--- .../ExpenseCategory/ExpenseCategory.js | 2 +- .../pages/Expense/ExpensePage/ExpensePage.css | 5 +- .../Expense/ExpenseRecords/ExpenseRecords.css | 14 ++++ .../ExpenseSuccessfully.css | 32 ++++++++- .../pages/Income/Amount/AmountPage.js | 54 ++++++++++---- .../pages/Income/Amount/TotalAmount.js | 57 +++++++++++---- .../pages/Income/Category/Category.js | 2 +- src/components/pages/Income/Home.js | 4 +- 16 files changed, 352 insertions(+), 108 deletions(-) diff --git a/src/App.js b/src/App.js index 9fab73b..c55e4d7 100644 --- a/src/App.js +++ b/src/App.js @@ -33,7 +33,7 @@ function App() { } /> } /> }> - } /> + {/* } /> */} } /> } /> @@ -46,7 +46,7 @@ function App() { }/> }/> }> - }/> + {/* }/> */} }/> }/> diff --git a/src/components/pages/Expense/Common/ExpenseEditPage.css b/src/components/pages/Expense/Common/ExpenseEditPage.css index 91a85e2..fdf9402 100644 --- a/src/components/pages/Expense/Common/ExpenseEditPage.css +++ b/src/components/pages/Expense/Common/ExpenseEditPage.css @@ -110,6 +110,22 @@ align-items: center; margin-right: 10px; } +@media (max-width: 375px) { + + .backIcon { + position: absolute; + top: 13px; + margin: 35px; + left: 10px; + } + + .arrow-icon { + font-size: 18px; + cursor: pointer; + } + +} + @media (max-width: 768px) { .edit-titles h1 { diff --git a/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css b/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css index c7c81fe..ea4a24e 100644 --- a/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css +++ b/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css @@ -95,7 +95,21 @@ .success-date-time{ color: #fff; } +@media (max-width: 375px) { + .arrows { + position: absolute; + top: 13px; + margin: 35px; + left: 10px; + } + + .arrow-icon-1 { + font-size: 18px; + + cursor: pointer; + } +} @media (max-width: 768px) { .success-message h2 { diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css index 813729a..372e988 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css @@ -18,14 +18,12 @@ } - - .arrowbtn { position: absolute; left: 0; top: 50%; margin: 20px 10px; - font-size: 4vw; /* Responsive font-size */ + font-size: 4vw; color: #333; cursor: pointer; } @@ -53,6 +51,7 @@ border-radius: 24px; padding: 10px; border-radius: 8px; + /* margin: 10px; */ margin-bottom: 20px; } @@ -69,13 +68,13 @@ height: 30px; } - .rupess_section { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; - margin-top: 20px; + margin: 10px; + margin-top: 50%; } @@ -102,10 +101,18 @@ } + + + @media (max-width: 600px) { .amount-container { padding: 10px; - max-width: 100%; + max-width: 90%; + } + + .amount-display{ + width: 130px; + height: 20px; } .backarrow { @@ -116,7 +123,7 @@ position: absolute; /* left: 3%; */ top: 50%; - margin: 17px 30px; + margin: 25px 30px; /* transform: translateX(-20%); */ font-size: 18px; color: #333; @@ -128,8 +135,14 @@ } .rupess_section { - gap: 20px; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 25px; + margin: 10px; + margin-top: 100%; } + .coin { width: 50px; @@ -139,12 +152,12 @@ } .coin-value { - font-size: 26px; + font-size: 24px; } .Rupeesicon { - width: 33px; - height: 33px; + width: 25px; + height: 25px; } .total-amount { @@ -155,7 +168,15 @@ .coin:hover { background-color: #4caf50; } - + .btn-group{ + + justify-content: space-between; + margin-top: 20px; + position: relative; + display: flex; + direction: row; + gap: 25px; + } } @media (min-width: 1024px) { @@ -181,12 +202,22 @@ .Rupeesicon { width: 30px; height: 30px; - padding: 10px; + padding: 7px; } .total-amount { font-size: 40px; } + + .btn-group{ + + justify-content: space-between; + margin-top: 20px; + position: relative; + display: flex; + direction: row; + gap: 25px; + } } @media (max-width: 375px) { @@ -210,7 +241,7 @@ .rupess_section { gap: 20px; - margin-top: 10px; + margin-top: 90%; } .coin { @@ -230,4 +261,15 @@ .total-amount { font-size: 26px; } + +.btn-group{ + + justify-content: space-between; + margin-top: 20px; + position: relative; + display: flex; + direction: row; + gap: 25px; +} + } diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js index cee9b11..27a391e 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js @@ -1,27 +1,39 @@ - -import React from "react"; +import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; -import { useNavigate, useOutletContext ,useLocation } from "react-router-dom"; +import { useNavigate, useOutletContext, useLocation } from "react-router-dom"; import rupeeIcon from "../../../../assets/Rupees.png"; import "../ExpenseAmount/ExpenseAmount.css"; function ExpenseAmount() { - - const navigate = useNavigate(); - const location = useLocation(); - const { entryType } = location.state || {}; - - - const [totalAmount, setTotalAmount] = useOutletContext(); + const navigate = useNavigate(); + const location = useLocation(); + const { entryType } = location.state || {}; + const [totalAmount, setTotalAmount] = useOutletContext(); + + const [isClickable, setIsClickable] = useState(true); + const [lastAddedAmount, setLastAddedAmount] = useState(0); const handleCoinClick = (amount) => { - setTotalAmount((prevAmount) => prevAmount + amount); + if (isClickable) { + setTotalAmount((prevAmount) => prevAmount + amount); + setLastAddedAmount(amount); + setIsClickable(false); + setTimeout(() => { + setIsClickable(true); + }, 500); + } }; - const handleBackClick = () => { + const handleSubtractClick = (amount) => { + if (totalAmount >= amount) { // Ensure you do not go negative + setTotalAmount((prevAmount) => prevAmount - amount); + } + }; + + const handleBackClick = () => { console.log(entryType); - navigate("/expense", { state: { entryType } }); + navigate("/", { state: { entryType } }); }; return ( @@ -35,34 +47,41 @@ function ExpenseAmount() { /> -

Amount

Rupee Icon
-
handleCoinClick(50)}> +
handleCoinClick(50)}>
50
-
handleCoinClick(100)}> +
handleCoinClick(100)}>
100
-
handleCoinClick(200)}> +
handleCoinClick(200)}>
200
-
handleCoinClick(500)}> +
handleCoinClick(500)}>
500
-
handleCoinClick(1000)}> +
handleCoinClick(1000)}>
1000
-
+ +
+ + +
); } diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css index c731755..e9c07b4 100644 --- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css +++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css @@ -11,14 +11,15 @@ body { width: 80%; max-width: 500px; height: 340px; - top: 50%; + top: 32%; + left: 50%; transform: translate(-50%, -50%); color: white; font-family: 'Montserrat', sans-serif; background: #1e1e1e; box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, - inset -2px -2px 2px rgba(255, 255, 255, 0.64), + inset -2px -2px 2px rgba(50, 50, 51, 0.66), inset 2px 2px 2px rgba(39, 39, 44, 0.56); padding: 8px; box-sizing: border-box; @@ -88,8 +89,9 @@ body { @media (max-width: 768px) { .total-amount-container { - width: 90%; - top: 65%; + width: 80%; + height: 45%; + top: 35%; } .input-group { @@ -103,21 +105,24 @@ body { } .button-group { - flex-direction: column; + flex-direction: row; align-items: center; + gap: 15px; } .add-entry-1, .add-entry-2 { - width: 100%; - margin: 10px 0; + width: 50%; + margin: 5px 0; } } @media (max-width: 480px) { .total-amount-container { /* padding: 15px; */ - margin: 20px 0px 0px 0px ; + top: 35%; + margin: 0px 0px 0px 0px ; + height: auto; } .add-entry-1, diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js index d3c305c..c4a24f8 100644 --- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useNavigate , useLocation } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import '../ExpenseAmount/TotalExpenseAmount.css'; function TotalExpenseAmount({ totalAmount, category, setCategory }) { @@ -26,22 +26,20 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) { const handleAddEntry = () => { setCategoryError(''); - + // Ensure amount is a number and greater than zero if (amount <= 0) { - alert('Amount is required and must be greater than zero'); - return null; + alert('Amount is required and must be greater than zero'); + return null; } - if (!category) { - setCategoryError('Category is required'); - return null; + setCategoryError('Category is required'); + return null; } const now = new Date(); const formattedDateTime = now.toLocaleString(); - const newEntry = { id: Date.now(), amount: parseFloat(amount), @@ -49,24 +47,20 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) { dateTime: formattedDateTime, type: entryType }; - console.log(entryType) - if (!categories.includes(category)) { - setCategories([...categories, category]); + setCategories([...categories, category]); } const updatedEntries = [...entries, newEntry]; - if (updatedEntries.length > 5) { - updatedEntries.shift(); + updatedEntries.shift(); } setEntries(updatedEntries); localStorage.setItem('entries', JSON.stringify(updatedEntries)); - setCategory(''); setAmount(''); @@ -83,28 +77,62 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) { const handleSaveAndAddEntry = () => { const timestamp = handleAddEntry(); if (timestamp) { - navigate('/expense'); + navigate('/'); } }; + const handleCategoryFocus = () => { + navigate('/expenseCategory'); + }; + + const handleAmountFocus = () => { + navigate('/expenseAmount'); + }; + + const handleAmountMouseDown = (e) => { + e.preventDefault(); // Prevents the keyboard from opening + handleAmountFocus(); // Navigate on first click + }; + + const handleCategoryMouseDown = (e) => { + e.preventDefault(); // Prevents the keyboard from opening + handleCategoryFocus(); // Navigate on first click + }; + + const handleAmountDoubleClick = () => { + const input = document.getElementById("amount-input"); + input.focus(); + }; + + const handleCategoryDoubleClick = () => { + const input = document.getElementById("category-input"); + input.focus(); + }; + return (
setAmount(e.target.value)} + onMouseDown={handleAmountMouseDown} + onDoubleClick={handleAmountDoubleClick} placeholder="Enter Amount" />
setCategory(e.target.value)} + onMouseDown={handleCategoryMouseDown} + onDoubleClick={handleCategoryDoubleClick} placeholder="Add Category" /> {categoryError && {categoryError}} @@ -118,7 +146,4 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) { ); } - - - export default TotalExpenseAmount; diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css index d437270..2726ef1 100644 --- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css +++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css @@ -70,7 +70,7 @@ flex-wrap: wrap; justify-content: center; width: 100%; - margin-top: 0px; + margin-top: 20%; } .cat-item { @@ -139,7 +139,9 @@ transition: border-color 0.3s ease, background-color 0.3s ease; font-size: 20px; } - + .arrow{ + margin: 13px 10px; + } .category01 { width: 35px; @@ -158,17 +160,28 @@ transition: border-color 0.3s ease, background-color 0.3s ease; top: 40px; left: 40px; } + .category-display{ + width: 130px; + height: 20px; + } + .category-titles { - font-size: 18px; + font-size: 15px; color: #fff; } - + .category-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + margin-top: 90%; + } .category01 { - width: 30px; - margin: 7px; - height: 30px; + width: 25px; + margin: 5px; + height: 25px; } .cat-item { @@ -186,6 +199,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease; @media (max-width: 375px) { .category-container { padding: 0; + } .arrow-icon { @@ -201,20 +215,29 @@ transition: border-color 0.3s ease, background-color 0.3s ease; .category-display { width: 120px; - height: 25px; - margin: 35px auto; + height: 20px; + margin: 30px auto; font-size: 14px; } + .category-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + margin-top: 75%; + } + + .category-titles { font-size: 14px; margin-right: 2px; } .category01 { - width: 25px; + width: 25px; + margin: 4px; height: 25px; - margin: 5px; } .cat-item { diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js index 29a715d..b415553 100644 --- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js +++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js @@ -19,7 +19,7 @@ function ExpenseCategory() { const entryType = location.state?.entryType; const handleBackClick = () => { - navigate("/income", { state: { entryType } }); + navigate("/", { state: { entryType } }); console.log(entryType); } diff --git a/src/components/pages/Expense/ExpensePage/ExpensePage.css b/src/components/pages/Expense/ExpensePage/ExpensePage.css index c25bbc9..4f8bb5f 100644 --- a/src/components/pages/Expense/ExpensePage/ExpensePage.css +++ b/src/components/pages/Expense/ExpensePage/ExpensePage.css @@ -7,6 +7,7 @@ border-radius: 10px; /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ text-align: center; + } .arrow-container { @@ -48,9 +49,8 @@ .button-container { display: flex; - justify-content: center; - margin-top: 20px; + margin-top: 100%; } .amount-btn{ width: 37%; @@ -156,6 +156,7 @@ .category-btn { font-size: 18px; } + } diff --git a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css index 65abdb7..a107d9b 100644 --- a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css +++ b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css @@ -157,6 +157,20 @@ font-size: 14px; } + .back_arrows { + position: absolute; + top: 13px; + margin: 35px; + left: 10px; + } + + .arrow-icon { + font-size: 18px; + margin: 9px 0px 0px 0px; + cursor: pointer; + } + + } diff --git a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css index 4a3c4da..173253b 100644 --- a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css +++ b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css @@ -5,7 +5,10 @@ justify-content: center; align-items: center; height: 100vh; + /* margin-bottom: 5px; */ + overflow: hidden; position: relative; + font-family: 'Montserrat', sans-serif; } .arrow { @@ -15,7 +18,7 @@ .arr { position: absolute; - top: 10px; + top: 0px; left: 0px; } @@ -102,7 +105,17 @@ font-size: 14px; } + .arrow { + font-size: 18px; + cursor: pointer; + position: absolute; + top: 8px; + margin: 35px; + left: 5px; + } + .arr { + position: absolute; top: 0px; left: 0px; } @@ -135,6 +148,18 @@ } } +@media (max-width: 375px) { + .arrow { + font-size: 18px; + cursor: pointer; + } + + .arr { + position: absolute; + top: 0px; + left: 0px; + } +} /* Large screens (1025px and up) */ @media (min-width: 1025px) { .btn1, .bt_11 { @@ -142,7 +167,10 @@ height: 50px; font-size: 18px; } - + .arr { + top: 0px; + left: 0px; + } .payment-title h1 { font-size: 30px; } diff --git a/src/components/pages/Income/Amount/AmountPage.js b/src/components/pages/Income/Amount/AmountPage.js index c1f037a..e0b43f0 100644 --- a/src/components/pages/Income/Amount/AmountPage.js +++ b/src/components/pages/Income/Amount/AmountPage.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useState} from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import { useNavigate, useLocation , useOutletContext} from "react-router-dom"; @@ -7,18 +7,33 @@ import "../Amount/AmountPage.css"; function AmountPage() { const navigate = useNavigate(); - const location = useLocation(); - const { entryType } = location.state || {}; - - const [totalAmount, setTotalAmount] = useOutletContext(); + const location = useLocation(); + const { entryType } = location.state || {}; + const [totalAmount, setTotalAmount] = useOutletContext(); + + const [isClickable, setIsClickable] = useState(true); + const [lastAddedAmount, setLastAddedAmount] = useState(0); const handleCoinClick = (amount) => { - setTotalAmount((prevAmount) => prevAmount + amount); + if (isClickable) { + setTotalAmount((prevAmount) => prevAmount + amount); + setLastAddedAmount(amount); + setIsClickable(false); + setTimeout(() => { + setIsClickable(true); + }, 500); + } + }; + + const handleSubtractClick = (amount) => { + if (totalAmount >= amount) { // Ensure you do not go negative + setTotalAmount((prevAmount) => prevAmount - amount); + } }; const handleBackClick = () => { console.log(entryType); - navigate("/income", { state: { entryType } }); + navigate("/", { state: { entryType } }); }; return ( @@ -33,27 +48,40 @@ function AmountPage() {
-

Amount

+

Amount

Rupee Icon
-
handleCoinClick(50)}> +
handleCoinClick(50)}>
50
-
handleCoinClick(100)}> + +
handleCoinClick(100)}>
100
-
handleCoinClick(200)}> + +
handleCoinClick(200)}>
200
-
handleCoinClick(500)}> + +
handleCoinClick(500)}>
500
-
handleCoinClick(1000)}> + +
handleCoinClick(1000)}>
1000
+ +
+ + +
); } diff --git a/src/components/pages/Income/Amount/TotalAmount.js b/src/components/pages/Income/Amount/TotalAmount.js index 6f3970c..7841b08 100644 --- a/src/components/pages/Income/Amount/TotalAmount.js +++ b/src/components/pages/Income/Amount/TotalAmount.js @@ -5,7 +5,7 @@ import './TotalAmount.css'; function TotalAmount({ totalAmount, category, setCategory }) { const [amount, setAmount] = useState(totalAmount || ''); const location = useLocation(); - const { entryType } = location.state || {}; + const { entryType } = location.state || {}; const [entries, setEntries] = useState([]); const [categoryError, setCategoryError] = useState(''); const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); @@ -26,22 +26,20 @@ function TotalAmount({ totalAmount, category, setCategory }) { const handleAddEntry = () => { setCategoryError(''); - + // Ensure amount is a number and greater than zero if (amount <= 0) { - alert('Amount is required and must be greater than zero'); - return null; + alert('Amount is required and must be greater than zero'); + return null; } - if (!category) { - setCategoryError('Category is required'); - return null; + setCategoryError('Category is required'); + return null; } const now = new Date(); const formattedDateTime = now.toLocaleString(); - const newEntry = { id: Date.now(), amount: parseFloat(amount), @@ -49,23 +47,20 @@ function TotalAmount({ totalAmount, category, setCategory }) { dateTime: formattedDateTime, type: entryType }; - console.log(entryType) - if (!categories.includes(category)) { - setCategories([...categories, category]); + setCategories([...categories, category]); } const updatedEntries = [...entries, newEntry]; if (updatedEntries.length > 5) { - updatedEntries.shift(); + updatedEntries.shift(); } setEntries(updatedEntries); localStorage.setItem('entries', JSON.stringify(updatedEntries)); - // Reset input fields setCategory(''); setAmount(''); @@ -82,28 +77,62 @@ function TotalAmount({ totalAmount, category, setCategory }) { const handleSaveAndAddEntry = () => { const timestamp = handleAddEntry(); if (timestamp) { - navigate('/income'); + navigate('/'); } }; + const handleCategoryFocus = () => { + navigate('/category'); + }; + + const handleAmountFocus = () => { + navigate('/amount'); + }; + + const handleAmountMouseDown = (e) => { + e.preventDefault(); // Prevents the keyboard from opening + handleAmountFocus(); // Navigate on first click + }; + + const handleCategoryMouseDown = (e) => { + e.preventDefault(); // Prevents the keyboard from opening + handleCategoryFocus(); // Navigate on first click + }; + + const handleAmountDoubleClick = () => { + const input = document.getElementById("amount-input"); + input.focus(); + }; + + const handleCategoryDoubleClick = () => { + const input = document.getElementById("category-input"); + input.focus(); + }; + return (
setAmount(e.target.value)} + onMouseDown={handleAmountMouseDown} + onDoubleClick={handleAmountDoubleClick} placeholder="Enter Amount" />
setCategory(e.target.value)} + onMouseDown={handleCategoryMouseDown} + onDoubleClick={handleCategoryDoubleClick} placeholder="Add Category" /> {categoryError && {categoryError}} diff --git a/src/components/pages/Income/Category/Category.js b/src/components/pages/Income/Category/Category.js index 5d53d0f..5b77c80 100644 --- a/src/components/pages/Income/Category/Category.js +++ b/src/components/pages/Income/Category/Category.js @@ -17,7 +17,7 @@ function Category() { const entryType = location.state?.entryType; const handleBackClick = () => { - navigate("/income", { state: { entryType } }); + navigate("/", { state: { entryType } }); console.log(entryType); } diff --git a/src/components/pages/Income/Home.js b/src/components/pages/Income/Home.js index 1b77667..85f2dbe 100644 --- a/src/components/pages/Income/Home.js +++ b/src/components/pages/Income/Home.js @@ -20,13 +20,13 @@ function Home() { const handleIncomeClick = () => { setEntryType('income'); console.log(entryType) - navigate('/income', { state: { entryType: 'income' } }); + navigate('/amount', { state: { entryType: 'income' } }); }; const handleExpenseClick = () => { setEntryType('expense'); console.log(entryType) - navigate('/expense', { state: { entryType: 'expense' } }); + navigate('/expenseAmount', { state: { entryType: 'expense' } }); } return (