Compare commits
15 Commits
| Author | SHA1 | Date |
|---|---|---|
 sonali
|
b388d94347 | |
|
sonali
|
6ec3574a2d | |
|
sonali
|
bbdcf4b3d5 | |
|
sonali
|
b7e0e14e25 | |
|
sonali
|
cba9f8565a | |
|
sonali
|
b7be589ee7 | |
|
sonali
|
e50026b7a2 | |
|
sonali
|
b9bcc584dd | |
|
sonali
|
8e3f11218d | |
|
sonali
|
e259fabdaa | |
|
sonali
|
0dbced87d1 | |
|
sonali
|
544705f96a | |
|
sonali
|
33d5b93a9c | |
|
sonali
|
56edbb76b5 | |
|
sonali
|
ea5f145e98 |
38
src/App.css
38
src/App.css
|
|
@ -1,38 +0,0 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ function App() {
|
|||
<Route path="/successPage" element={<IncomeSuccessfully />} />
|
||||
<Route path="/records" element={<Records />} />
|
||||
<Route element={<Layout />}>
|
||||
<Route path="/income" element={<IncomePage />} />
|
||||
{/* <Route path="/income" element={<IncomePage />} /> */}
|
||||
<Route path="/amount" element={<AmountPage />} />
|
||||
<Route path="/category" element={<Category />} />
|
||||
</Route>
|
||||
|
|
@ -46,7 +46,7 @@ function App() {
|
|||
<Route path="/expense-records" element={<ExpenseRecords/>}/>
|
||||
<Route path="/expense-successfully" element={<ExpenseSuccessfully/>}/>
|
||||
<Route element={<ExpenseLayout />}>
|
||||
<Route path="/expense" element={<ExpensePage/>}/>
|
||||
{/* <Route path="/expense" element={<ExpensePage/>}/> */}
|
||||
<Route path="/expenseAmount" element={<ExpenseAmount/>}/>
|
||||
<Route path="/expenseCategory" element={<ExpenseCategory/>}/>
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -4,32 +4,36 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.backIcon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
margin: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
|
||||
padding: 20px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 8px;
|
||||
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.edit-titles h1 {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 30px;
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
|
|
@ -37,6 +41,7 @@
|
|||
|
||||
.edit-datetime {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -44,6 +49,7 @@
|
|||
|
||||
.edit-fields {
|
||||
color: #fff;
|
||||
padding: 10px 10px;
|
||||
margin-bottom: 15px;
|
||||
width: 93%;
|
||||
}
|
||||
|
|
@ -51,14 +57,15 @@
|
|||
.edit-fields label {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
|
||||
}
|
||||
|
||||
.edit-fields input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #555;
|
||||
/* border: 1px solid #555; */
|
||||
border-radius: 4px;
|
||||
background-color: #3A3A3A;
|
||||
/* background-color: #3A3A3A; */
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -68,14 +75,14 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -90,8 +97,8 @@
|
|||
|
||||
.edit-btn-2 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -104,16 +111,94 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.select {
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.425);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 375px) {
|
||||
|
||||
.backIcon {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
margin: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.select {
|
||||
width: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.425);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.edit-titles h1 {
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.edit-datetime {
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.edit-buttons div {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.425);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.edit-btn, .edit-btn-2 {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.425);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,22 +2,58 @@ import React, { useEffect, useState } from "react";
|
|||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import "../Common/ExpenseEditPage.css"
|
||||
import "../Common/ExpenseEditPage.css";
|
||||
|
||||
function ExpenseEditPage() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentDateTime, setCurrentDateTime] = useState("");
|
||||
const [amount, setAmount] = useState(location.state?.amount || "");
|
||||
const [category, setCategory] = useState(location.state?.category || "");
|
||||
|
||||
// Initial categories
|
||||
const [defaultCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
const [categories, setCategories] = useState(defaultCategories);
|
||||
|
||||
const [selectedCategories, setSelectedCategories] = useState(
|
||||
Array.isArray(location.state?.category)
|
||||
? location.state.category
|
||||
: location.state?.category
|
||||
? [location.state.category]
|
||||
: []
|
||||
);
|
||||
|
||||
const [error, setError] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
const formattedDateTime = now.toLocaleString();
|
||||
setCurrentDateTime(formattedDateTime);
|
||||
}, []);
|
||||
|
||||
// Retrieve stored categories from local storage and update categories
|
||||
const storedCategories = JSON.parse(localStorage.getItem("categories")) || [];
|
||||
const uniqueCategories = [...new Set([...defaultCategories, ...storedCategories])];
|
||||
setCategories(uniqueCategories);
|
||||
|
||||
if (!location.state?.id) {
|
||||
const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
|
||||
const entryToEdit = storedEntries.find(
|
||||
(entry) => entry.id === location.state?.id
|
||||
);
|
||||
|
||||
if (entryToEdit) {
|
||||
setAmount(entryToEdit.amount);
|
||||
setSelectedCategories(
|
||||
Array.isArray(entryToEdit.category)
|
||||
? entryToEdit.category
|
||||
: entryToEdit.category
|
||||
? [entryToEdit.category]
|
||||
: []
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [location.state]);
|
||||
|
||||
const handleBackClick = () => {
|
||||
navigate("/expense-records");
|
||||
|
|
@ -31,22 +67,32 @@ function ExpenseEditPage() {
|
|||
id: location.state?.id,
|
||||
amount: amount,
|
||||
dateTime: currentDateTime,
|
||||
category: category,
|
||||
category: selectedCategories.join(", "),
|
||||
};
|
||||
|
||||
|
||||
const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
|
||||
const updatedEntries = storedEntries.map((entry) =>
|
||||
entry.id === updatedEntry.id ? updatedEntry : entry
|
||||
);
|
||||
localStorage.setItem("entries", JSON.stringify(updatedEntries));
|
||||
|
||||
|
||||
console.log("Entry updated in local storage:", updatedEntry);
|
||||
navigate("/expense-successfully");
|
||||
navigate("/expense-successfully", { state: updatedEntry });
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const toggleDropdown = () => {
|
||||
setDropdownVisible(!dropdownVisible);
|
||||
};
|
||||
|
||||
const handleCategorySelect = (category) => {
|
||||
// Toggle category selection
|
||||
if (selectedCategories.includes(category)) {
|
||||
setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
|
||||
} else {
|
||||
setSelectedCategories([...selectedCategories, category]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="incomeedit-containers">
|
||||
<div className="backIcon">
|
||||
|
|
@ -79,11 +125,27 @@ function ExpenseEditPage() {
|
|||
|
||||
<div className="edit-fields">
|
||||
<label>Category:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
/>
|
||||
<div className="dropdown" onClick={toggleDropdown}>
|
||||
<input
|
||||
type="text"
|
||||
value={selectedCategories.join(", ") || ""}
|
||||
placeholder="Select Categories"
|
||||
readOnly
|
||||
/>
|
||||
{dropdownVisible && (
|
||||
<div className="dropdown-list">
|
||||
{categories.map((category) => (
|
||||
<div
|
||||
key={category}
|
||||
className={`dropdown-item ${selectedCategories.includes(category) ? "select" : ""}`}
|
||||
onClick={() => handleCategorySelect(category)}
|
||||
>
|
||||
{category}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="edit-buttons">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.layout-container {
|
||||
display: flex;
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: 100vh; */
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
import '../Common/ExpenseLayout.css';
|
||||
import TotalExpenseAmount from '../ExpenseAmount/TotalExpenseAmount';
|
||||
|
||||
|
|
@ -8,14 +7,26 @@ const ExpenseLayout = () => {
|
|||
const [totalAmount, setTotalAmount] = useState(0);
|
||||
const [category, setCategory] = useState('');
|
||||
|
||||
const handleManualAmountChange = (value) => {
|
||||
const numericValue = parseFloat(value);
|
||||
if (!isNaN(numericValue)) {
|
||||
setTotalAmount(numericValue);
|
||||
} else {
|
||||
setTotalAmount(0);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="layout-container">
|
||||
<div className="page-content">
|
||||
|
||||
<Outlet context={[totalAmount, setTotalAmount, category, setCategory]} />
|
||||
</div>
|
||||
|
||||
<TotalExpenseAmount totalAmount={totalAmount} category={category} setCategory={setCategory} />
|
||||
<TotalExpenseAmount
|
||||
totalAmount={totalAmount}
|
||||
category={category}
|
||||
setCategory={setCategory}
|
||||
handleManualAmountChange={handleManualAmountChange} // Pass the function here
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,17 +5,21 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
margin: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-icon-1 {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -30,13 +34,13 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.success-title h1 {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin-top: 10px;
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -52,14 +56,14 @@
|
|||
.success-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -73,8 +77,8 @@
|
|||
}
|
||||
.btn-back {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -88,24 +92,25 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.success-date-time{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.btn-view, .btn-back {
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
@media (max-width: 375px) {
|
||||
.arrows {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
margin: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-icon-1 {
|
||||
font-size: 18px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.success-message h2 {
|
||||
font-size: 20px;
|
||||
|
|
@ -114,4 +119,21 @@
|
|||
.success-title h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.btn-view, .btn-back {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.success-title h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.success-message h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ function TotalExpenseSuccessfully() {
|
|||
const dataToStore = {
|
||||
incomeRecord: {
|
||||
dateTime: formattedDateTime,
|
||||
entryId: entryId || "Not provided", // Fallback in case entryId is undefined
|
||||
entryId: entryId || "Not provided",
|
||||
},
|
||||
};
|
||||
console.log(JSON.stringify(dataToStore));
|
||||
|
|
@ -33,7 +33,7 @@ function TotalExpenseSuccessfully() {
|
|||
};
|
||||
|
||||
const handleViewRecordsClick = () => {
|
||||
// Pass entryId to the /records route when navigating
|
||||
|
||||
navigate("/expense-records", { state: { entryId } });
|
||||
console.log(entryId);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,191 +1,296 @@
|
|||
|
||||
.amount-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 90vw;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
|
||||
.backarrow {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateY(-50%); */
|
||||
font-size: 24px;
|
||||
margin: 20px 10px;
|
||||
font-size: 4vw;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.amount-titles {
|
||||
font-size: 24px;
|
||||
width: 100px;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.amount-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
.amount-display {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
/* margin: 10px; */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin: 10px;
|
||||
margin-top: 50%;
|
||||
}
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #E335DC;
|
||||
box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
/* border: 2px solid #fff; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-group{
|
||||
display: flex;
|
||||
/* margin-top: 5px; */
|
||||
position: relative;
|
||||
}
|
||||
.minus{
|
||||
width: 60px;
|
||||
background-color: #1E1E1E;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
|
||||
8px 8px 16px rgba(4, 4, 4, 0.8),
|
||||
inset -2px -2px 2px rgba(41, 37, 41, 0.64),
|
||||
inset 2px 2px 2px #181618;
|
||||
|
||||
}
|
||||
.plus{
|
||||
width: 60px;
|
||||
margin-top: 5px;
|
||||
background-color: #1E1E1E;
|
||||
color: #fff;
|
||||
box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
|
||||
8px 8px 16px rgba(4, 4, 4, 0.8),
|
||||
inset -2px -2px 2px rgba(41, 37, 41, 0.64),
|
||||
inset 2px 2px 2px #181618;
|
||||
}
|
||||
|
||||
.coin.selected {
|
||||
background: #4caf50;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.amount-container {
|
||||
padding: 10px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.amount-display{
|
||||
width: 130px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
/* left: 3%; */
|
||||
top: 50%;
|
||||
margin: 25px 30px;
|
||||
/* transform: translateX(-20%); */
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
gap: 25px;
|
||||
margin: 10px;
|
||||
margin-top: 90%;
|
||||
}
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
background: #E335DC;
|
||||
box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
/* border: 2px solid #fff; */
|
||||
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.coin-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.amount-container {
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.amount-container {
|
||||
padding: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateX(-20%); */
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
||||
.coin:hover {
|
||||
background-color: #4caf50;
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.amount-container {
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
}
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 40px;
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
.amount-container {
|
||||
padding: 0px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
gap: 20px;
|
||||
margin-top: 80%;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,45 @@
|
|||
|
||||
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 navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { entryType } = location.state || {};
|
||||
|
||||
|
||||
const [totalAmount, setTotalAmount] = useOutletContext();
|
||||
|
||||
const handleCoinClick = (amount) => {
|
||||
setTotalAmount((prevAmount) => prevAmount + amount);
|
||||
const [isClickable, setIsClickable] = useState(true);
|
||||
const [lastAddedAmount, setLastAddedAmount] = useState(0);
|
||||
|
||||
const handleCoinClick = (coinAmount) => {
|
||||
if (isClickable) {
|
||||
|
||||
const currentAmount = totalAmount ? parseFloat(totalAmount) : 0;
|
||||
const newAmount = currentAmount + coinAmount;
|
||||
|
||||
setTotalAmount(newAmount);
|
||||
setLastAddedAmount(coinAmount);
|
||||
setIsClickable(false);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
setIsClickable(true);
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
const handleSubtractClick = (amount) => {
|
||||
if (totalAmount >= amount) {
|
||||
setTotalAmount((prevAmount) => prevAmount - amount);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
console.log(entryType);
|
||||
navigate("/expense", { state: { entryType } });
|
||||
navigate("/", { state: { entryType } });
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -35,34 +53,49 @@ function ExpenseAmount() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="amount-display">
|
||||
<h3 className="amount-titles">Amount</h3>
|
||||
<img src={rupeeIcon} alt="Rupee Icon" className="Rupeesicon" />
|
||||
</div>
|
||||
|
||||
<section className="rupess_section">
|
||||
<div className="coin" onClick={() => handleCoinClick(50)}>
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(50)}>
|
||||
<div className="coin-value">50</div>
|
||||
</div>
|
||||
|
||||
<div className="coin" onClick={() => handleCoinClick(100)}>
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(100)}>
|
||||
<div className="coin-value">100</div>
|
||||
</div>
|
||||
|
||||
<div className="coin" onClick={() => handleCoinClick(200)}>
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(200)}>
|
||||
<div className="coin-value">200</div>
|
||||
</div>
|
||||
|
||||
<div className="coin" onClick={() => handleCoinClick(500)}>
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(500)}>
|
||||
<div className="coin-value">500</div>
|
||||
</div>
|
||||
|
||||
<div className="coin" onClick={() => handleCoinClick(1000)}>
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(1000)}>
|
||||
<div className="coin-value">1000</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="minus"
|
||||
onClick={() => handleSubtractClick(lastAddedAmount)}
|
||||
disabled={lastAddedAmount === 0}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<button
|
||||
className="plus"
|
||||
onClick={() => handleCoinClick(lastAddedAmount)}
|
||||
disabled={lastAddedAmount === 0}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,28 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.total-amount-container {
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
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(39, 39, 44, 0.56);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
max-width: 900px;
|
||||
height: 340px;
|
||||
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(50, 50, 51, 0.66),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
|
|
@ -55,7 +62,7 @@
|
|||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
width: 40%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
|
|
@ -81,8 +88,9 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.total-amount-container {
|
||||
width: 90%;
|
||||
top: 60%;
|
||||
width: 80%;
|
||||
height: 45%;
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -95,22 +103,41 @@
|
|||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.add-entry-1,
|
||||
.add-entry-2 {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
width: 50%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
.total-amount-container {
|
||||
/* padding: 15px; */
|
||||
top: auto;
|
||||
margin: 0px 0px 0px 0px ;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.total-amount-container {
|
||||
/* padding: 15px; */
|
||||
margin: 40px 0px ;
|
||||
top: 30%;
|
||||
margin: 0px 0px 0px 0px ;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.add-entry-1,
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
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 }) {
|
||||
const [amount, setAmount] = useState(totalAmount || '');
|
||||
function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAmountChange }) {
|
||||
const [amount, setAmount] = useState(totalAmount !== undefined ? totalAmount : 0);
|
||||
const location = useLocation();
|
||||
const { entryType } = location.state || {};
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [categoryError, setCategoryError] = useState('');
|
||||
const [amountError, setAmountError] = useState('');
|
||||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -25,23 +26,21 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
|
|||
|
||||
const handleAddEntry = () => {
|
||||
setCategoryError('');
|
||||
|
||||
setAmountError('');
|
||||
|
||||
if (amount <= 0) {
|
||||
alert('Amount is required and must be greater than zero');
|
||||
return null;
|
||||
setAmountError('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 +48,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 +78,76 @@ 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();
|
||||
handleAmountFocus();
|
||||
};
|
||||
|
||||
const handleCategoryMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
handleCategoryFocus();
|
||||
};
|
||||
|
||||
const handleAmountDoubleClick = () => {
|
||||
const input = document.getElementById("amount-input");
|
||||
input.focus();
|
||||
};
|
||||
|
||||
const handleCategoryDoubleClick = () => {
|
||||
const input = document.getElementById("category-input");
|
||||
input.focus();
|
||||
};
|
||||
|
||||
|
||||
const handleAmountChange = (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
|
||||
if (value.startsWith('0') && value.length > 1) {
|
||||
value = value.slice(1);
|
||||
}
|
||||
|
||||
setAmount(value);
|
||||
handleManualAmountChange(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="total-amount-container">
|
||||
<div className="input-group">
|
||||
<div className="amount-input">
|
||||
<label>Total:</label>
|
||||
<input
|
||||
id="amount-input"
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
onChange={handleAmountChange}
|
||||
onMouseDown={handleAmountMouseDown}
|
||||
onDoubleClick={handleAmountDoubleClick}
|
||||
placeholder="Enter Amount"
|
||||
/>
|
||||
{amountError && <span className="error-message">{amountError}</span>}
|
||||
</div>
|
||||
<div className="category-input">
|
||||
<label>Category:</label>
|
||||
<input
|
||||
id="category-input"
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
onMouseDown={handleCategoryMouseDown}
|
||||
onDoubleClick={handleCategoryDoubleClick}
|
||||
placeholder="Add Category"
|
||||
/>
|
||||
{categoryError && <span className="error-message">{categoryError}</span>}
|
||||
|
|
@ -118,7 +161,4 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default TotalExpenseAmount;
|
||||
|
|
|
|||
|
|
@ -1,158 +1,257 @@
|
|||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
/*
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
color: #fff;
|
||||
margin-bottom: 20px; /* Add 10px space below category titles */
|
||||
}
|
||||
|
||||
.category-display {
|
||||
margin: 35px 0 10px 0; /* 10px space below the display box */
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.category01 {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.cat-item.selected {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.add-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.texts {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 10px 14px;
|
||||
margin: 15px;
|
||||
background-color: #2a2a2a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow{
|
||||
margin: 13px 10px;
|
||||
}
|
||||
|
||||
.category01 {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
.category-display{
|
||||
width: 130px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.category-titles {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 90%;
|
||||
}
|
||||
.category01 {
|
||||
width: 25px;
|
||||
margin: 5px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.category-container {
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
|
||||
}
|
||||
/*
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-display {
|
||||
margin: 30px;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
/* left: calc(50% - 207px / 2 - 0.5px); */
|
||||
top: 90px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
margin: 30px auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 24px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* margin: 2px; */
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-top: 75%;
|
||||
}
|
||||
|
||||
|
||||
.category-titles {
|
||||
font-size: 14px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.category01 {
|
||||
width: 25px;
|
||||
margin: 4px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cat-item.selected {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
min-width: 50px;
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
.texts {
|
||||
width: 50%;
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,21 +8,18 @@ import '../ExpenseCategory/ExpenseCategory.css';
|
|||
|
||||
|
||||
function ExpenseCategory() {
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext();
|
||||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
const [selectedCategories, setSelectedCategories] = useState([]);
|
||||
const [customCategoryCount, setCustomCategoryCount] = useState(0);
|
||||
const [newCategory, setNewCategory] = useState('');
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
const entryType = location.state?.entryType;
|
||||
|
||||
const handleBackClick = () => {
|
||||
|
||||
navigate("/expense", { state: { entryType } });
|
||||
navigate("/", { state: { entryType } });
|
||||
console.log(entryType);
|
||||
}
|
||||
|
||||
|
|
@ -38,16 +35,18 @@ function ExpenseCategory() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleAddCategory = (newCategory) => {
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim() === '') return;
|
||||
if (!categories.includes(newCategory)) {
|
||||
if (customCategoryCount < 3) {
|
||||
const updatedCategories = [...categories, newCategory];
|
||||
setCategories(updatedCategories);
|
||||
setCustomCategoryCount(customCategoryCount + 1);
|
||||
localStorage.setItem('categories', JSON.stringify(updatedCategories));
|
||||
alert(`Category "${newCategory}" added!`);
|
||||
// alert(`Category "${newCategory}" added!`);
|
||||
setNewCategory('');
|
||||
} else {
|
||||
alert('You can only add up to three custom categories!');
|
||||
// alert('You can only add up to three custom categories!');
|
||||
}
|
||||
} else {
|
||||
alert('Category already exists!');
|
||||
|
|
@ -75,7 +74,7 @@ function ExpenseCategory() {
|
|||
|
||||
<div className='category-display'>
|
||||
<h3 className="category-titles">Categories</h3>
|
||||
<img src={categoryImage} alt="categoryIcon" className="category-icon" />
|
||||
<img src={categoryImage} alt="categoryIcon" className="category01" />
|
||||
</div>
|
||||
|
||||
<section className='category-list'>
|
||||
|
|
@ -91,19 +90,23 @@ function ExpenseCategory() {
|
|||
</section>
|
||||
|
||||
{customCategoryCount < 3 && (
|
||||
<input className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddCategory(e.target.value);
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="add-category">
|
||||
<input
|
||||
className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={handleAddCategory}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExpenseCategory;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
|
||||
.expense-container {
|
||||
max-width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
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%;
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.amount-icon, .category-icon {
|
||||
.amount-icon, .category{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 2px;
|
||||
|
|
@ -156,5 +156,38 @@
|
|||
.category-btn {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Styles for screens with a width of 375px */
|
||||
@media (max-width: 375px) {
|
||||
.arrow-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expense-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.expense-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount-btn, .category-btn {
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.category{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back_arrows {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
margin: 35px;
|
||||
left: 10px;;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
margin: 9px 0px 0px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -29,9 +29,9 @@
|
|||
}
|
||||
|
||||
.success-titles h1 {
|
||||
color: #fff;
|
||||
color: #4CAF50;
|
||||
font-size: 30px;
|
||||
margin: 10px 0;
|
||||
margin: 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -45,35 +45,39 @@
|
|||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
margin: 0px 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin-top: 10px;
|
||||
|
||||
.categories {
|
||||
margin-top: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.categories h3 {
|
||||
.categories h3 {
|
||||
font-size: 15px;
|
||||
color: #9e9696;
|
||||
/* margin: 0px 0px 0px 0px; */
|
||||
/* padding: 5px; */
|
||||
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
.categories p {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.categories li {
|
||||
.categories li {
|
||||
font-size: 16px;
|
||||
color: #deb1b1;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -84,47 +88,32 @@
|
|||
.success-datetime {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.total-amount {
|
||||
color: #4CAF50;
|
||||
font-size: 12px;
|
||||
margin: 0px 0;
|
||||
}
|
||||
|
||||
.categories {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
margin: 10px 0;
|
||||
.categories {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
.btn-home,
|
||||
.btn-edit {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -135,7 +124,96 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.btn-edit, .btn-home {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #4CAF50;
|
||||
font-size: 12px;
|
||||
margin: 0px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Screen size 375px */
|
||||
@media screen and (max-width: 375px) {
|
||||
.success-titles h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.success-datetime {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 18px;
|
||||
/* padding: 20px; */
|
||||
}
|
||||
|
||||
.categories li {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Screen size 687px */
|
||||
@media screen and (max-width: 687px) {
|
||||
.success-titles h1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.success-datetime {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 20px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.categories li {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Screen size 745px */
|
||||
@media screen and (max-width: 745px) {
|
||||
.success-titles h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.success-datetime {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
|
||||
.categories li {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,9 +45,11 @@ function ExpenseRecords() {
|
|||
}, [entry, lastEntry]);
|
||||
|
||||
const handleBackClick = () => {
|
||||
navigate("/");
|
||||
navigate("/expense-totalsuccessfully");
|
||||
};
|
||||
|
||||
const handleBackHomeClick = () => {
|
||||
navigate("/")
|
||||
}
|
||||
const handleEditClick = () => {
|
||||
const idToEdit = entryId || (lastEntry ? lastEntry.id : null);
|
||||
|
||||
|
|
@ -85,16 +87,12 @@ function ExpenseRecords() {
|
|||
|
||||
<div className="categories">
|
||||
<h3>Selected Categories:</h3>
|
||||
<ul>
|
||||
{categories.map((category, index) => (
|
||||
<li key={index}>{category}</li>
|
||||
))}
|
||||
</ul>
|
||||
<p>{categories.join(',')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="success-buttons">
|
||||
<div className="btn-home" onClick={handleBackClick}>Home</div>
|
||||
<div className="btn-home" onClick={handleBackHomeClick}>Home</div>
|
||||
<div className="btn-edit" onClick={handleEditClick}>Edit</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
body {
|
||||
background-color: #1E1E1E;
|
||||
margin: 20px;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.Payment-container {
|
||||
display: flex;
|
||||
|
|
@ -12,44 +5,44 @@ body {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
/* margin-bottom: 5px; */
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
margin: 15px;
|
||||
margin-top: 35px ;
|
||||
}
|
||||
|
||||
|
||||
.arr {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
.income-date {
|
||||
.expense-date {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title h1 {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin: 10px 0;
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -57,7 +50,6 @@ body {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-animation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -65,7 +57,6 @@ body {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.payment-message h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
|
|
@ -73,7 +64,6 @@ body {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.payment-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -81,11 +71,10 @@ body {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.btn1 {
|
||||
.btn1, .bt_11 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -98,85 +87,92 @@ body {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.bt_11 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Small screens (up to 600px) */
|
||||
@media (max-width: 600px) {
|
||||
.payment-title h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.expense-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
margin: 35px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.payment-title h1 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 140px;
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.btn1, .bt_11 {
|
||||
width: 160px;
|
||||
height: 60px;
|
||||
@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 {
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.arr {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.payment-title h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { Player } from "@lottiefiles/react-lottie-player";
|
||||
import successAnimation from "../Common/Animation - 1727464749500.json";
|
||||
import "../ExpenseSuccessfully/ExpenseSuccessfully.css"
|
||||
import "../ExpenseSuccessfully/ExpenseSuccessfully.css";
|
||||
|
||||
function ExpenseSuccessfully() {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const entryType = location.state?.entryType;
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
|
|
@ -19,28 +21,32 @@ function ExpenseSuccessfully() {
|
|||
}, []);
|
||||
|
||||
const handleBackClick = () => {
|
||||
navigate("/expense-edit");
|
||||
const updatedEntry = {
|
||||
id: location.state?.id,
|
||||
amount: location.state?.amount,
|
||||
category: location.state?.category,
|
||||
dateTime: location.state?.dateTime,
|
||||
};
|
||||
|
||||
navigate("/expense-editPage", { state: updatedEntry });
|
||||
};
|
||||
|
||||
const handleBackToHome = () => {
|
||||
navigate("/");
|
||||
navigate("/", { state: { entryType } });
|
||||
};
|
||||
|
||||
const handleBackToRecord = () => {
|
||||
navigate("/expense-records")
|
||||
}
|
||||
navigate("/expense-records", { state: { entryType } });
|
||||
};
|
||||
|
||||
const options = { hour: "2-digit", minute: "2-digit", hour12: true };
|
||||
const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
|
||||
[],
|
||||
options
|
||||
)}`;
|
||||
const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString([], options)}`;
|
||||
|
||||
return (
|
||||
<div className="Payment-container">
|
||||
<div className="payment-title">
|
||||
<h1>Expense</h1>
|
||||
<p className="income-date">{formattedDate}</p>
|
||||
<p className="expense-date">{formattedDate}</p>
|
||||
<div className="arr">
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowLeft}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateY(-50%); */
|
||||
transform: translateY(90%);
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
|
@ -97,6 +97,29 @@
|
|||
}
|
||||
|
||||
|
||||
.btn-group{
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.minus{
|
||||
width: 60px;
|
||||
background-color: #1E1E1E;
|
||||
color: #fff;
|
||||
box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
|
||||
8px 8px 16px rgba(4, 4, 4, 0.8),
|
||||
inset -2px -2px 2px rgba(41, 37, 41, 0.64),
|
||||
inset 2px 2px 2px #181618;
|
||||
|
||||
}
|
||||
.plus{
|
||||
width: 60px;
|
||||
background-color: #1E1E1E;
|
||||
color: #fff;
|
||||
box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
|
||||
8px 8px 16px rgba(4, 4, 4, 0.8),
|
||||
inset -2px -2px 2px rgba(41, 37, 41, 0.64),
|
||||
inset 2px 2px 2px #181618;
|
||||
}
|
||||
|
||||
|
||||
.coin-value {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -9,16 +9,37 @@ function AmountPage() {
|
|||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { entryType } = location.state || {};
|
||||
|
||||
const [totalAmount, setTotalAmount] = useOutletContext();
|
||||
|
||||
const handleCoinClick = (amount) => {
|
||||
setTotalAmount((prevAmount) => prevAmount + amount);
|
||||
const [isClickable, setIsClickable] = useState(true);
|
||||
const [lastAddedAmount, setLastAddedAmount] = useState(0);
|
||||
|
||||
const handleCoinClick = (coinAmount) => {
|
||||
if (isClickable) {
|
||||
|
||||
const currentAmount = totalAmount ? parseFloat(totalAmount) : 0;
|
||||
const newAmount = currentAmount + coinAmount;
|
||||
|
||||
setTotalAmount(newAmount);
|
||||
setLastAddedAmount(coinAmount);
|
||||
setIsClickable(false);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
setIsClickable(true);
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubtractClick = (amount) => {
|
||||
if (totalAmount >= amount) {
|
||||
setTotalAmount((prevAmount) => prevAmount - amount);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
console.log(entryType);
|
||||
navigate("/income", { state: { entryType } });
|
||||
navigate("/", { state: { entryType } });
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -38,24 +59,44 @@ function AmountPage() {
|
|||
</div>
|
||||
|
||||
<section className="rupess_section">
|
||||
<div className="coin" onClick={() => handleCoinClick(50)}>
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(50)}>
|
||||
<div className="coin-value">50</div>
|
||||
</div>
|
||||
<div className="coin" onClick={() => handleCoinClick(100)}>
|
||||
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(100)}>
|
||||
<div className="coin-value">100</div>
|
||||
</div>
|
||||
<div className="coin" onClick={() => handleCoinClick(200)}>
|
||||
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(200)}>
|
||||
<div className="coin-value">200</div>
|
||||
</div>
|
||||
<div className="coin" onClick={() => handleCoinClick(500)}>
|
||||
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(500)}>
|
||||
<div className="coin-value">500</div>
|
||||
</div>
|
||||
<div className="coin" onClick={() => handleCoinClick(1000)}>
|
||||
|
||||
<div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(1000)}>
|
||||
<div className="coin-value">1000</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="minus"
|
||||
onClick={() => handleSubtractClick(lastAddedAmount)}
|
||||
disabled={lastAddedAmount === 0}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<button
|
||||
className="plus"
|
||||
onClick={() => handleCoinClick(lastAddedAmount)}
|
||||
disabled={lastAddedAmount === 0}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AmountPage;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
|
||||
.entries-list-container {
|
||||
background: #1e1e1e;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66),
|
||||
8px 8px 16px #040404,
|
||||
inset -2px -2px 2px rgba(4, 4, 4, 0.64),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
8px 8px 16px #040404,
|
||||
inset -2px -2px 2px rgba(4, 4, 4, 0.64),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
padding: 30px;
|
||||
max-width: 1000px;
|
||||
|
|
@ -49,14 +48,104 @@
|
|||
/* background-color: #333; */
|
||||
/* border: 1px solid #ddd; */
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Entry icons container */
|
||||
.entries-list-container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.entry-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.entry-input {
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.custom-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
background-color: #f1f1f1;
|
||||
color: #333;
|
||||
padding: 1px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #1e1e1e;
|
||||
font-size: 14px;
|
||||
min-width: 10px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
margin-top: 1px;
|
||||
border-radius: 4px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #888 #333;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.dropdown-content::-webkit-scrollbar-track {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.dropdown-content::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.custom-dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.custom-dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-item input {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.dropdown-item.selected {
|
||||
background-color: #bbb3b33d;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.entry-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -89,4 +178,18 @@
|
|||
color: #ff4d4d;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dropdown-item.selected {
|
||||
background-color: #bbb3b33d;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dropdown-item.selected {
|
||||
background-color: #bbb3b33d;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,13 +10,20 @@ function EntriesList() {
|
|||
const [entries, setEntries] = useState([]);
|
||||
const [editingEntryId, setEditingEntryId] = useState(null);
|
||||
const [editedAmount, setEditedAmount] = useState("");
|
||||
const [editedCategory, setEditedCategory] = useState("");
|
||||
const [selectedCategory, setSelectedCategory] = useState([]);
|
||||
const [repeatEntry, setRepeatEntry] = useState(null);
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
|
||||
useEffect(() => {
|
||||
const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
|
||||
setEntries(storedEntries.slice(-5));
|
||||
|
||||
const storedCategories = JSON.parse(localStorage.getItem("categories")) || [];
|
||||
const uniqueCategories = [...new Set([...categories, ...storedCategories])];
|
||||
setCategories(uniqueCategories);
|
||||
}, []);
|
||||
|
||||
const handleRedoClick = (entry) => {
|
||||
|
|
@ -27,12 +34,20 @@ function EntriesList() {
|
|||
const handleEditClick = (entry) => {
|
||||
setEditingEntryId(entry.id);
|
||||
setEditedAmount(entry.amount);
|
||||
setEditedCategory(entry.category);
|
||||
|
||||
// Ensure selectedCategory is always an array
|
||||
if (Array.isArray(entry.category)) {
|
||||
setSelectedCategory(entry.category);
|
||||
} else if (typeof entry.category === "string") {
|
||||
setSelectedCategory([entry.category]);
|
||||
} else {
|
||||
setSelectedCategory([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveClick = (entry) => {
|
||||
const updatedEntries = entries.map((e) =>
|
||||
e.id === entry.id ? { ...e, amount: editedAmount, category: editedCategory } : e
|
||||
e.id === entry.id ? { ...e, amount: editedAmount, category: selectedCategory } : e
|
||||
);
|
||||
|
||||
setEntries(updatedEntries);
|
||||
|
|
@ -50,15 +65,14 @@ function EntriesList() {
|
|||
const newEntry = {
|
||||
id: new Date().getTime(),
|
||||
amount: repeatEntry.amount,
|
||||
category: repeatEntry.category,
|
||||
type: repeatEntry.type, // Ensure type is included
|
||||
category: repeatEntry.category || [],
|
||||
type: repeatEntry.type,
|
||||
};
|
||||
|
||||
const updatedEntries = [...entries, newEntry];
|
||||
setEntries(updatedEntries);
|
||||
localStorage.setItem("entries", JSON.stringify(updatedEntries));
|
||||
|
||||
// Navigate based on entry type
|
||||
if (repeatEntry.type === "income") {
|
||||
navigate("/totalsuccessfully", { state: { entryId: newEntry.id } });
|
||||
} else {
|
||||
|
|
@ -70,6 +84,23 @@ function EntriesList() {
|
|||
setRepeatEntry(null);
|
||||
};
|
||||
|
||||
const handleCategoryChange = (category) => {
|
||||
setSelectedCategory((prevCategories) => {
|
||||
if (!Array.isArray(prevCategories)) return [category];
|
||||
|
||||
if (prevCategories.includes(category)) {
|
||||
return prevCategories.filter((cat) => cat !== category);
|
||||
} else {
|
||||
return [...prevCategories, category];
|
||||
}
|
||||
});
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
const toggleDropdown = () => {
|
||||
setIsDropdownOpen((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="entries-list-container">
|
||||
<h4>Previous Last Five Transactions:</h4>
|
||||
|
|
@ -87,12 +118,24 @@ function EntriesList() {
|
|||
onChange={(e) => setEditedAmount(e.target.value)}
|
||||
className="entry-input"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={editedCategory}
|
||||
onChange={(e) => setEditedCategory(e.target.value)}
|
||||
className="entry-input"
|
||||
/>
|
||||
<div className="custom-dropdown">
|
||||
<button className="dropdown-button" onClick={toggleDropdown}>
|
||||
{selectedCategory.length > 0 ? selectedCategory.join(', ') : "Select Category"}
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<div className="dropdown-content">
|
||||
{categories.map((cat, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`dropdown-item ${selectedCategory.includes(cat) ? 'selected' : ''}`}
|
||||
onClick={() => handleCategoryChange(cat)}
|
||||
>
|
||||
{cat}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<FontAwesomeIcon
|
||||
icon={faSave}
|
||||
className="entry-save-icon"
|
||||
|
|
@ -107,7 +150,9 @@ function EntriesList() {
|
|||
) : (
|
||||
<>
|
||||
<span className="entry-amount">₹{entry.amount}</span>
|
||||
<span className="entry-category">{entry.category}</span>
|
||||
<span className="entry-category">
|
||||
{Array.isArray(entry.category) ? entry.category.join(', ') : entry.category || "No Category"}
|
||||
</span>
|
||||
<div className="entry-icons">
|
||||
<FontAwesomeIcon
|
||||
icon={faRedoAlt}
|
||||
|
|
|
|||
|
|
@ -1,121 +1,299 @@
|
|||
.total-amount-container {
|
||||
.amount-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
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(39, 39, 44, 0.56);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.amount-input,
|
||||
.category-input {
|
||||
flex: 1 1 30%;
|
||||
margin: 10px;
|
||||
color: white;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 90vw;
|
||||
background-color: #1e1e1e;
|
||||
border: none;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
width: 90%;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom: 1px solid #0056b3;
|
||||
.backarrow {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 20px 10px;
|
||||
font-size: 4vw;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-entry-1,
|
||||
.add-entry-2 {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
|
||||
|
||||
.amount-titles {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: #1e1e1e;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66),
|
||||
8px 8px 16px #040404,
|
||||
inset -2px -2px 2px rgba(4, 4, 4, 0.64),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.amount-display {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
/* margin: 10px; */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin: 10px;
|
||||
margin-top: 50%;
|
||||
}
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #E335DC;
|
||||
box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.error-message{
|
||||
color: red;
|
||||
transition: background-color 0.3s ease;
|
||||
/* border: 2px solid #fff; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.total-amount-container {
|
||||
width: 90%;
|
||||
top: 60%;
|
||||
}
|
||||
.coin-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-group{
|
||||
display: flex;
|
||||
/* margin-top: 5px; */
|
||||
position: relative;
|
||||
}
|
||||
.minus{
|
||||
width: 60px;
|
||||
background-color: #1E1E1E;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
|
||||
8px 8px 16px rgba(4, 4, 4, 0.8),
|
||||
inset -2px -2px 2px rgba(41, 37, 41, 0.64),
|
||||
inset 2px 2px 2px #181618;
|
||||
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.amount-input,
|
||||
.category-input {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-entry-1,
|
||||
.add-entry-2 {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.plus{
|
||||
width: 60px;
|
||||
margin-top: 5px;
|
||||
background-color: #1E1E1E;
|
||||
color: #fff;
|
||||
box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
|
||||
8px 8px 16px rgba(4, 4, 4, 0.8),
|
||||
inset -2px -2px 2px rgba(41, 37, 41, 0.64),
|
||||
inset 2px 2px 2px #181618;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.total-amount-container {
|
||||
/* padding: 15px; */
|
||||
margin: 40px 0px ;
|
||||
.coin.selected {
|
||||
background: #4caf50;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.amount-container {
|
||||
padding: 10px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.add-entry-1,
|
||||
.add-entry-2 {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
.amount-display{
|
||||
width: 130px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
/* left: 3%; */
|
||||
top: 50%;
|
||||
margin: 25px 30px;
|
||||
/* transform: translateX(-20%); */
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 25px;
|
||||
margin: 10px;
|
||||
margin-top: 90%;
|
||||
}
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.btn-group{
|
||||
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.amount-container {
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
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) {
|
||||
.amount-container {
|
||||
padding: 0px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
gap: 20px;
|
||||
margin-top: 80%;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react';
|
|||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import './TotalAmount.css';
|
||||
|
||||
function TotalAmount({ totalAmount, category, setCategory }) {
|
||||
const [amount, setAmount] = useState(totalAmount || '');
|
||||
function TotalAmount({ totalAmount, category, setCategory , handleManualAmountChange}) {
|
||||
const [amount, setAmount] = useState(totalAmount !== undefined ? totalAmount : 0);
|
||||
const location = useLocation();
|
||||
const { entryType } = location.state || {};
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [categoryError, setCategoryError] = useState('');
|
||||
const [amountError, setAmountError] = useState('');
|
||||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -25,23 +26,21 @@ function TotalAmount({ totalAmount, category, setCategory }) {
|
|||
|
||||
const handleAddEntry = () => {
|
||||
setCategoryError('');
|
||||
|
||||
setAmountError('');
|
||||
|
||||
if (amount <= 0) {
|
||||
alert('Amount is required and must be greater than zero');
|
||||
return null;
|
||||
setAmountError('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 +48,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 +78,76 @@ 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();
|
||||
handleAmountFocus();
|
||||
};
|
||||
|
||||
const handleCategoryMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
handleCategoryFocus();
|
||||
};
|
||||
|
||||
const handleAmountDoubleClick = () => {
|
||||
const input = document.getElementById("amount-input");
|
||||
input.focus();
|
||||
};
|
||||
|
||||
const handleCategoryDoubleClick = () => {
|
||||
const input = document.getElementById("category-input");
|
||||
input.focus();
|
||||
};
|
||||
|
||||
|
||||
const handleAmountChange = (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
|
||||
if (value.startsWith('0') && value.length > 1) {
|
||||
value = value.slice(1);
|
||||
}
|
||||
|
||||
setAmount(value);
|
||||
handleManualAmountChange(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="total-amount-container">
|
||||
<div className="input-group">
|
||||
<div className="amount-input">
|
||||
<label>Total:</label>
|
||||
<input
|
||||
id="amount-input"
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
onChange={handleAmountChange}
|
||||
onMouseDown={handleAmountMouseDown}
|
||||
onDoubleClick={handleAmountDoubleClick}
|
||||
placeholder="Enter Amount"
|
||||
/>
|
||||
{amountError && <span className="error-message">{amountError}</span>}
|
||||
</div>
|
||||
<div className="category-input">
|
||||
<label>Category:</label>
|
||||
<input
|
||||
id="category-input"
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
onMouseDown={handleCategoryMouseDown}
|
||||
onDoubleClick={handleCategoryDoubleClick}
|
||||
placeholder="Add Category"
|
||||
/>
|
||||
{categoryError && <span className="error-message">{categoryError}</span>}
|
||||
|
|
|
|||
|
|
@ -1,166 +1,233 @@
|
|||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 10px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
right: 85px;
|
||||
bottom: 40px;
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
}
|
||||
/*
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-display {
|
||||
margin: 40px;
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
/* left: calc(50% - 207px / 2 - 0.5px); */
|
||||
top: 90px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
color: #fff;
|
||||
margin-bottom: 20px; /* Add 10px space below category titles */
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
.category-display {
|
||||
margin: 35px 0 10px 0; /* 10px space below the display box */
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cat-item.selected {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.add-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.texts {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 10px 14px;
|
||||
margin: 15px;
|
||||
background-color: #2a2a2a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.category01 {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-right: 4px;
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* margin: 2px; */
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.category-container {
|
||||
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.category-display {
|
||||
width: 120px;
|
||||
height: 25px;
|
||||
margin: 15px auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cat-item.selected {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
min-width: 70px;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 30px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
.texts {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,14 +11,13 @@ function Category() {
|
|||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
const [selectedCategories, setSelectedCategories] = useState([]);
|
||||
const [customCategoryCount, setCustomCategoryCount] = useState(0);
|
||||
const [newCategory, setNewCategory] = useState('');
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
const entryType = location.state?.entryType;
|
||||
|
||||
const handleBackClick = () => {
|
||||
|
||||
navigate("/income", { state: { entryType } });
|
||||
navigate("/", { state: { entryType } });
|
||||
console.log(entryType);
|
||||
}
|
||||
|
||||
|
|
@ -34,16 +33,18 @@ function Category() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleAddCategory = (newCategory) => {
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim() === '') return;
|
||||
if (!categories.includes(newCategory)) {
|
||||
if (customCategoryCount < 3) {
|
||||
const updatedCategories = [...categories, newCategory];
|
||||
setCategories(updatedCategories);
|
||||
setCustomCategoryCount(customCategoryCount + 1);
|
||||
localStorage.setItem('categories', JSON.stringify(updatedCategories));
|
||||
alert(`Category "${newCategory}" added!`);
|
||||
// alert(`Category "${newCategory}" added!`);
|
||||
setNewCategory(''); // Clear input field after adding
|
||||
} else {
|
||||
alert('You can only add up to three custom categories!');
|
||||
// alert('You can only add up to three custom categories!');
|
||||
}
|
||||
} else {
|
||||
alert('Category already exists!');
|
||||
|
|
@ -71,7 +72,7 @@ function Category() {
|
|||
|
||||
<div className='category-display'>
|
||||
<h3 className="category-titles">Categories</h3>
|
||||
<img src={categoryImage} alt="categoryIcon" className="category-icon" />
|
||||
<img src={categoryImage} alt="categoryIcon" className="category01" />
|
||||
</div>
|
||||
|
||||
<section className='category-list'>
|
||||
|
|
@ -86,17 +87,23 @@ function Category() {
|
|||
))}
|
||||
</section>
|
||||
|
||||
{/* Input and button for adding new category */}
|
||||
{customCategoryCount < 3 && (
|
||||
<input className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddCategory(e.target.value);
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="add-category">
|
||||
<input
|
||||
className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={handleAddCategory}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
.incomeedit-containers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -12,8 +10,8 @@
|
|||
|
||||
.backIcon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
|
|
@ -23,7 +21,8 @@
|
|||
|
||||
.edit-content {
|
||||
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 8px;
|
||||
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
|
||||
width: 100%;
|
||||
|
|
@ -32,6 +31,7 @@
|
|||
|
||||
.edit-titles h1 {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 30px;
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
|
||||
.edit-datetime {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -53,31 +54,33 @@
|
|||
.edit-fields label {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
|
||||
}
|
||||
|
||||
.edit-fields input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #555;
|
||||
/* border: 1px solid #555; */
|
||||
border-radius: 4px;
|
||||
background-color: #3A3A3A;
|
||||
/* background-color: #3A3A3A; */
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
|
||||
.edit-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
/* item */
|
||||
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -92,8 +95,8 @@
|
|||
|
||||
.edit-btn-2 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -108,17 +111,26 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.edit-titles h1 {
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.edit-datetime {
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.edit-buttons div {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.edit-btn, .edit-btn-2 {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,18 +9,54 @@ function IncomeEdit() {
|
|||
const navigate = useNavigate();
|
||||
const [currentDateTime, setCurrentDateTime] = useState("");
|
||||
const [amount, setAmount] = useState(location.state?.amount || "");
|
||||
const [category, setCategory] = useState(location.state?.category || "");
|
||||
|
||||
// Initial categories
|
||||
const [defaultCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
const [categories, setCategories] = useState(defaultCategories);
|
||||
|
||||
const [selectedCategories, setSelectedCategories] = useState(
|
||||
Array.isArray(location.state?.category)
|
||||
? location.state.category
|
||||
: location.state?.category
|
||||
? [location.state.category]
|
||||
: []
|
||||
);
|
||||
|
||||
const [error, setError] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
const formattedDateTime = now.toLocaleString();
|
||||
setCurrentDateTime(formattedDateTime);
|
||||
}, []);
|
||||
|
||||
|
||||
const storedCategories = JSON.parse(localStorage.getItem("categories")) || [];
|
||||
const uniqueCategories = [...new Set([...defaultCategories, ...storedCategories])];
|
||||
setCategories(uniqueCategories);
|
||||
|
||||
if (!location.state?.id) {
|
||||
const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
|
||||
const entryToEdit = storedEntries.find(
|
||||
(entry) => entry.id === location.state?.id
|
||||
);
|
||||
|
||||
if (entryToEdit) {
|
||||
setAmount(entryToEdit.amount);
|
||||
setSelectedCategories(
|
||||
Array.isArray(entryToEdit.category)
|
||||
? entryToEdit.category
|
||||
: entryToEdit.category
|
||||
? [entryToEdit.category]
|
||||
: []
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [location.state]);
|
||||
|
||||
const handleBackClick = () => {
|
||||
navigate("/records");
|
||||
navigate("/expense-records");
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
|
|
@ -31,20 +67,30 @@ function IncomeEdit() {
|
|||
id: location.state?.id,
|
||||
amount: amount,
|
||||
dateTime: currentDateTime,
|
||||
category: category,
|
||||
category: selectedCategories.join(", "),
|
||||
};
|
||||
|
||||
|
||||
const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
|
||||
const updatedEntries = storedEntries.map((entry) =>
|
||||
entry.id === updatedEntry.id ? updatedEntry : entry
|
||||
);
|
||||
localStorage.setItem("entries", JSON.stringify(updatedEntries));
|
||||
|
||||
// Optionally, you can navigate to a success page or display a message here
|
||||
console.log("Entry updated in local storage:", updatedEntry);
|
||||
navigate("/successPage");
|
||||
setIsLoading(false); // End loading
|
||||
navigate("/expense-successfully", { state: updatedEntry });
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const toggleDropdown = () => {
|
||||
setDropdownVisible(!dropdownVisible);
|
||||
};
|
||||
|
||||
const handleCategorySelect = (category) => {
|
||||
// Toggle category selection
|
||||
if (selectedCategories.includes(category)) {
|
||||
setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
|
||||
} else {
|
||||
setSelectedCategories([...selectedCategories, category]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -79,11 +125,27 @@ function IncomeEdit() {
|
|||
|
||||
<div className="edit-fields">
|
||||
<label>Category:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
/>
|
||||
<div className="dropdown" onClick={toggleDropdown}>
|
||||
<input
|
||||
type="text"
|
||||
value={selectedCategories.join(", ") || ""}
|
||||
placeholder="Select Categories"
|
||||
readOnly
|
||||
/>
|
||||
{dropdownVisible && (
|
||||
<div className="dropdown-list">
|
||||
{categories.map((category) => (
|
||||
<div
|
||||
key={category}
|
||||
className={`dropdown-item ${selectedCategories.includes(category) ? "select" : ""}`}
|
||||
onClick={() => handleCategorySelect(category)}
|
||||
>
|
||||
{category}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="edit-buttons">
|
||||
|
|
@ -98,5 +160,4 @@ function IncomeEdit() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IncomeEdit;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,28 @@ const Layout = () => {
|
|||
const [totalAmount, setTotalAmount] = useState(0);
|
||||
const [category, setCategory] = useState('');
|
||||
|
||||
|
||||
const handleManualAmountChange = (value) => {
|
||||
const numericValue = parseFloat(value);
|
||||
if (!isNaN(numericValue)) {
|
||||
setTotalAmount(numericValue);
|
||||
} else {
|
||||
setTotalAmount(0);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="layout-container">
|
||||
<div className="page-content">
|
||||
|
||||
<Outlet context={[totalAmount, setTotalAmount, category, setCategory]} />
|
||||
<Outlet context={[totalAmount, setTotalAmount, category, setCategory, handleManualAmountChange]} />
|
||||
</div>
|
||||
|
||||
<TotalAmount totalAmount={totalAmount} category={category} setCategory={setCategory} />
|
||||
<TotalAmount
|
||||
totalAmount={totalAmount}
|
||||
category={category}
|
||||
setCategory={setCategory}
|
||||
handleManualAmountChange={handleManualAmountChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
}
|
||||
|
||||
.buttons {
|
||||
max-width: 100%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.expense-btn, .income-btn {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
/* IncomePage.css */
|
||||
|
||||
/* Main container */
|
||||
.income-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
|
|
@ -14,14 +13,15 @@
|
|||
.arrow-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center; /* Center the title and date */
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Arrow icon */
|
||||
|
||||
.arrow-icon {
|
||||
position: absolute;
|
||||
left: 0; /* Place the arrow on the left */
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 40px 5px;
|
||||
transform: translateY(-50%);
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
|
||||
.income-title {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
|
|
@ -40,16 +40,16 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Date and time */
|
||||
|
||||
.income-date {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
text-align: center; /* Center the date */
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* Button container */
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
|
|
@ -111,21 +111,21 @@
|
|||
|
||||
|
||||
|
||||
/* Icons in buttons */
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Responsive styling */
|
||||
|
||||
/* Mobile-specific styles */
|
||||
@media (max-width: 600px) {
|
||||
|
||||
|
||||
.arrow-container{
|
||||
margin: 20px;
|
||||
}
|
||||
.arrow-icon {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.expense-title {
|
||||
|
|
@ -166,3 +166,37 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for screens with a width of 375px */
|
||||
@media (max-width: 375px) {
|
||||
.arrow-container {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.income-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount-btn, .category-btn {
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
body {
|
||||
background-color: #1E1E1E;
|
||||
margin: 20px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.Payment-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -20,36 +19,31 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.arr {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.income-date {
|
||||
.expense-date {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title h1 {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin: 10px 0;
|
||||
font-size: 30px; /* Default font size */
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -57,7 +51,6 @@ body {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-animation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -65,15 +58,13 @@ body {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.payment-message h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-size: 24px; /* Default font size */
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.payment-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -81,11 +72,10 @@ body {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.btn1 {
|
||||
.btn1, .bt_11 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px; /* Default width */
|
||||
height: 40px; /* Default height */
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -98,69 +88,50 @@ body {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.bt_11 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Small screens (up to 600px) */
|
||||
@media (max-width: 600px) {
|
||||
.payment-title h1 {
|
||||
font-size: 24px;
|
||||
font-size: 16px; /* Smaller font size */
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 12px; /* Smaller font size */
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 20px;
|
||||
font-size: 14px; /* Smaller font size */
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Medium screens (601px to 1024px) */
|
||||
@media (max-width: 1024px) {
|
||||
.payment-title h1 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 140px;
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
|
|
@ -169,11 +140,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* Large screens (1025px and up) */
|
||||
@media (min-width: 1025px) {
|
||||
.btn1, .bt_11 {
|
||||
width: 160px;
|
||||
height: 60px;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { Player } from "@lottiefiles/react-lottie-player";
|
||||
import successAnimation from "../Common/Animation - 1727464749500.json";
|
||||
import "../Income/IncomeSuccessfully.css";
|
||||
|
|
@ -9,6 +9,8 @@ import "../Income/IncomeSuccessfully.css";
|
|||
function IncomeSuccessfully() {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const entryType = location.state?.entryType;
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
|
|
@ -19,21 +21,26 @@ function IncomeSuccessfully() {
|
|||
}, []);
|
||||
|
||||
const handleBackClick = () => {
|
||||
navigate("/editPage");
|
||||
const updatedEntry = {
|
||||
id: location.state?.id,
|
||||
amount: location.state?.amount,
|
||||
category: location.state?.category,
|
||||
dateTime: location.state?.dateTime,
|
||||
};
|
||||
navigate("/editPage", { state: { ...updatedEntry } });
|
||||
};
|
||||
|
||||
const handleBackToHome = () => {
|
||||
navigate("/");
|
||||
navigate("/", { state: { entryType } });
|
||||
};
|
||||
|
||||
const handleBackToRecord = () => {
|
||||
navigate("/records")
|
||||
}
|
||||
navigate("/records", { state: { entryType } });
|
||||
};
|
||||
|
||||
const options = { hour: "2-digit", minute: "2-digit", hour12: true };
|
||||
const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
|
||||
[],
|
||||
options
|
||||
[], options
|
||||
)}`;
|
||||
|
||||
return (
|
||||
|
|
@ -66,10 +73,10 @@ function IncomeSuccessfully() {
|
|||
|
||||
<div className="payment-buttons">
|
||||
<div className="btn1" onClick={handleBackToHome}>
|
||||
Home
|
||||
Home
|
||||
</div>
|
||||
<div className="bt_11" onClick={handleBackToRecord}>
|
||||
Records
|
||||
Records
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
height: 100vh;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
|
@ -13,12 +11,13 @@
|
|||
|
||||
.back_arrows {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
margin: 22px 10px 0px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -42,11 +41,12 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.total-amount h2 {
|
||||
.total-amount {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin-top: 10px;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
padding: 8px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.success-titles h1 {
|
||||
font-size: 24px;
|
||||
|
|
@ -87,13 +87,11 @@
|
|||
}
|
||||
|
||||
.total-amount {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.categories {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
|
|
@ -103,14 +101,14 @@
|
|||
.success-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -125,8 +123,8 @@
|
|||
}
|
||||
.btn-edit {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -140,4 +138,18 @@
|
|||
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.btn-edit, .btn-home {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.success-title h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.success-message h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,12 +47,14 @@ function Records() {
|
|||
const handleBackClick = () => {
|
||||
navigate("/totalsuccessfully");
|
||||
};
|
||||
|
||||
const handleBackHomeClick = () => {
|
||||
navigate("/")
|
||||
}
|
||||
const handleEditClick = () => {
|
||||
const idToEdit = entryId || (lastEntry ? lastEntry.id : null);
|
||||
|
||||
if (idToEdit) {
|
||||
navigate("/editpage", {
|
||||
navigate("/editPage", {
|
||||
state: {
|
||||
id: idToEdit,
|
||||
amount: entry ? entry.amount : lastEntry.amount,
|
||||
|
|
@ -75,9 +77,8 @@ function Records() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="success-datetime">
|
||||
<h1>Income</h1>
|
||||
<div className="success-datetime">
|
||||
<p>{currentDateTime}</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -86,16 +87,12 @@ function Records() {
|
|||
|
||||
<div className="categories">
|
||||
<h3>Selected Categories:</h3>
|
||||
<ul>
|
||||
{categories.map((category, index) => (
|
||||
<li key={index}>{category}</li>
|
||||
))}
|
||||
</ul>
|
||||
<p>{categories.join(', ')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="success-buttons">
|
||||
<div className="btn-home" onClick={handleBackClick}>Home</div>
|
||||
<div className="btn-home" onClick={handleBackHomeClick}>Home</div>
|
||||
<div className="btn-edit" onClick={handleEditClick}>Edit</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
Loading…
Reference in New Issue