Sonali
/
Mini-Pos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

"ne changes "

new_001
sonali 2024-10-07 16:52:10 +05:30
parent 0dbced87d1
commit e259fabdaa
16 changed files with 352 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -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>

16
src/components/pages/Expense/Common/ExpenseEditPage.css
View File

@ -110,6 +110,22 @@
align-items: center;
margin-right: 10px;
}
@media (max-width: 375px) {
.backIcon {
position: absolute;
top: 13px;
margin: 35px;
left: 10px;
}
.arrow-icon {
font-size: 18px;
cursor: pointer;
}
}
@media (max-width: 768px) {
.edit-titles h1 {

14
src/components/pages/Expense/Common/TotalExpenseSuccessfully.css
View File

@ -95,7 +95,21 @@
.success-date-time{
color: #fff;
}
@media (max-width: 375px) {
.arrows {
position: absolute;
top: 13px;
margin: 35px;
left: 10px;
}
.arrow-icon-1 {
font-size: 18px;
cursor: pointer;
}
}
@media (max-width: 768px) {
.success-message h2 {

70
src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
View File

@ -18,14 +18,12 @@
}
.arrowbtn {
position: absolute;
left: 0;
top: 50%;
margin: 20px 10px;
font-size: 4vw; /* Responsive font-size */
font-size: 4vw;
color: #333;
cursor: pointer;
}
@ -53,6 +51,7 @@
border-radius: 24px;
padding: 10px;
border-radius: 8px;
/* margin: 10px; */
margin-bottom: 20px;
}
@ -69,13 +68,13 @@
height: 30px;
}
.rupess_section {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
margin: 10px;
margin-top: 50%;
}
@ -102,10 +101,18 @@
}
@media (max-width: 600px) {
.amount-container {
padding: 10px;
max-width: 100%;
max-width: 90%;
}
.amount-display{
width: 130px;
height: 20px;
}
.backarrow {
@ -116,7 +123,7 @@
position: absolute;
/* left: 3%; */
top: 50%;
margin: 17px 30px;
margin: 25px 30px;
/* transform: translateX(-20%); */
font-size: 18px;
color: #333;
@ -128,8 +135,14 @@
}
.rupess_section {
gap: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
margin: 10px;
margin-top: 100%;
}
.coin {
width: 50px;
@ -139,12 +152,12 @@
}
.coin-value {
font-size: 26px;
font-size: 24px;
}
.Rupeesicon {
width: 33px;
height: 33px;
width: 25px;
height: 25px;
}
.total-amount {
@ -155,7 +168,15 @@
.coin:hover {
background-color: #4caf50;
}
.btn-group{
justify-content: space-between;
margin-top: 20px;
position: relative;
display: flex;
direction: row;
gap: 25px;
}
}
@media (min-width: 1024px) {
@ -181,12 +202,22 @@
.Rupeesicon {
width: 30px;
height: 30px;
padding: 10px;
padding: 7px;
}
.total-amount {
font-size: 40px;
}
.btn-group{
justify-content: space-between;
margin-top: 20px;
position: relative;
display: flex;
direction: row;
gap: 25px;
}
}
@media (max-width: 375px) {
@ -210,7 +241,7 @@
.rupess_section {
gap: 20px;
margin-top: 10px;
margin-top: 90%;
}
.coin {
@ -230,4 +261,15 @@
.total-amount {
font-size: 26px;
}
.btn-group{
justify-content: space-between;
margin-top: 20px;
position: relative;
display: flex;
direction: row;
gap: 25px;
}
}

59
src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js
View File

@ -1,27 +1,39 @@
import React from "react";
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { useNavigate, useOutletContext ,useLocation } from "react-router-dom";
import { useNavigate, useOutletContext, useLocation } from "react-router-dom";
import rupeeIcon from "../../../../assets/Rupees.png";
import "../ExpenseAmount/ExpenseAmount.css";
function ExpenseAmount() {
const navigate = useNavigate();
const location = useLocation();
const { entryType } = location.state || {};
const [totalAmount, setTotalAmount] = useOutletContext();
const navigate = useNavigate();
const location = useLocation();
const { entryType } = location.state || {};
const [totalAmount, setTotalAmount] = useOutletContext();
const [isClickable, setIsClickable] = useState(true);
const [lastAddedAmount, setLastAddedAmount] = useState(0);
const handleCoinClick = (amount) => {
setTotalAmount((prevAmount) => prevAmount + amount);
if (isClickable) {
setTotalAmount((prevAmount) => prevAmount + amount);
setLastAddedAmount(amount);
setIsClickable(false);
setTimeout(() => {
setIsClickable(true);
}, 500);
}
};
const handleBackClick = () => {
const handleSubtractClick = (amount) => {
if (totalAmount >= amount) { // Ensure you do not go negative
setTotalAmount((prevAmount) => prevAmount - amount);
}
};
const handleBackClick = () => {
console.log(entryType);
navigate("/expense", { state: { entryType } });
navigate("/", { state: { entryType } });
};
return (
@ -35,34 +47,41 @@ function ExpenseAmount() {
/>
</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 onClick={() => handleSubtractClick(lastAddedAmount)} disabled={lastAddedAmount === 0}>
-
</button>
<button onClick={() => handleCoinClick(lastAddedAmount)}>
+
</button>
</div>
</div>
);
}

21
src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
View File

@ -11,14 +11,15 @@ body {
width: 80%;
max-width: 500px;
height: 340px;
top: 50%;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: 'Montserrat', sans-serif;
background: #1e1e1e;
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
inset -2px -2px 2px rgba(255, 255, 255, 0.64),
inset -2px -2px 2px rgba(50, 50, 51, 0.66),
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
padding: 8px;
box-sizing: border-box;
@ -88,8 +89,9 @@ body {
@media (max-width: 768px) {
.total-amount-container {
width: 90%;
top: 65%;
width: 80%;
height: 45%;
top: 35%;
}
.input-group {
@ -103,21 +105,24 @@ body {
}
.button-group {
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 15px;
}
.add-entry-1,
.add-entry-2 {
width: 100%;
margin: 10px 0;
width: 50%;
margin: 5px 0;
}
}
@media (max-width: 480px) {
.total-amount-container {
/* padding: 15px; */
margin: 20px 0px 0px 0px ;
top: 35%;
margin: 0px 0px 0px 0px ;
height: auto;
}
.add-entry-1,

61
src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useNavigate , useLocation } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import '../ExpenseAmount/TotalExpenseAmount.css';
function TotalExpenseAmount({ totalAmount, category, setCategory }) {
@ -26,22 +26,20 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
const handleAddEntry = () => {
setCategoryError('');
// Ensure amount is a number and greater than zero
if (amount <= 0) {
alert('Amount is required and must be greater than zero');
return null;
alert('Amount is required and must be greater than zero');
return null;
}
if (!category) {
setCategoryError('Category is required');
return null;
setCategoryError('Category is required');
return null;
}
const now = new Date();
const formattedDateTime = now.toLocaleString();
const newEntry = {
id: Date.now(),
amount: parseFloat(amount),
@ -49,24 +47,20 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
dateTime: formattedDateTime,
type: entryType
};
console.log(entryType)
if (!categories.includes(category)) {
setCategories([...categories, category]);
setCategories([...categories, category]);
}
const updatedEntries = [...entries, newEntry];
if (updatedEntries.length > 5) {
updatedEntries.shift();
updatedEntries.shift();
}
setEntries(updatedEntries);
localStorage.setItem('entries', JSON.stringify(updatedEntries));
setCategory('');
setAmount('');
@ -83,28 +77,62 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
const handleSaveAndAddEntry = () => {
const timestamp = handleAddEntry();
if (timestamp) {
navigate('/expense');
navigate('/');
}
};
const handleCategoryFocus = () => {
navigate('/expenseCategory');
};
const handleAmountFocus = () => {
navigate('/expenseAmount');
};
const handleAmountMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleAmountFocus(); // Navigate on first click
};
const handleCategoryMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleCategoryFocus(); // Navigate on first click
};
const handleAmountDoubleClick = () => {
const input = document.getElementById("amount-input");
input.focus();
};
const handleCategoryDoubleClick = () => {
const input = document.getElementById("category-input");
input.focus();
};
return (
<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)}
onMouseDown={handleAmountMouseDown}
onDoubleClick={handleAmountDoubleClick}
placeholder="Enter Amount"
/>
</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 +146,4 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
);
}
export default TotalExpenseAmount;

45
src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
View File

@ -70,7 +70,7 @@
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 0px;
margin-top: 20%;
}
.cat-item {
@ -139,7 +139,9 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
font-size: 20px;
}
.arrow{
margin: 13px 10px;
}
.category01 {
width: 35px;
@ -158,17 +160,28 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
top: 40px;
left: 40px;
}
.category-display{
width: 130px;
height: 20px;
}
.category-titles {
font-size: 18px;
font-size: 15px;
color: #fff;
}
.category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 90%;
}
.category01 {
width: 30px;
margin: 7px;
height: 30px;
width: 25px;
margin: 5px;
height: 25px;
}
.cat-item {
@ -186,6 +199,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
@media (max-width: 375px) {
.category-container {
padding: 0;
}
.arrow-icon {
@ -201,20 +215,29 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
.category-display {
width: 120px;
height: 25px;
margin: 35px auto;
height: 20px;
margin: 30px auto;
font-size: 14px;
}
.category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 75%;
}
.category-titles {
font-size: 14px;
margin-right: 2px;
}
.category01 {
width: 25px;
width: 25px;
margin: 4px;
height: 25px;
margin: 5px;
}
.cat-item {

2
src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
View File

@ -19,7 +19,7 @@ function ExpenseCategory() {
const entryType = location.state?.entryType;
const handleBackClick = () => {
navigate("/income", { state: { entryType } });
navigate("/", { state: { entryType } });
console.log(entryType);
}

5
src/components/pages/Expense/ExpensePage/ExpensePage.css
View File

@ -7,6 +7,7 @@
border-radius: 10px;
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
text-align: center;
}
.arrow-container {
@ -48,9 +49,8 @@
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
margin-top: 100%;
}
.amount-btn{
width: 37%;
@ -156,6 +156,7 @@
.category-btn {
font-size: 18px;
}
}

14
src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css
View File

@ -157,6 +157,20 @@
font-size: 14px;
}
.back_arrows {
position: absolute;
top: 13px;
margin: 35px;
left: 10px;
}
.arrow-icon {
font-size: 18px;
margin: 9px 0px 0px 0px;
cursor: pointer;
}
}

32
src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
View File

@ -5,7 +5,10 @@
justify-content: center;
align-items: center;
height: 100vh;
/* margin-bottom: 5px; */
overflow: hidden;
position: relative;
font-family: 'Montserrat', sans-serif;
}
.arrow {
@ -15,7 +18,7 @@
.arr {
position: absolute;
top: 10px;
top: 0px;
left: 0px;
}
@ -102,7 +105,17 @@
font-size: 14px;
}
.arrow {
font-size: 18px;
cursor: pointer;
position: absolute;
top: 8px;
margin: 35px;
left: 5px;
}
.arr {
position: absolute;
top: 0px;
left: 0px;
}
@ -135,6 +148,18 @@
}
}
@media (max-width: 375px) {
.arrow {
font-size: 18px;
cursor: pointer;
}
.arr {
position: absolute;
top: 0px;
left: 0px;
}
}
/* Large screens (1025px and up) */
@media (min-width: 1025px) {
.btn1, .bt_11 {
@ -142,7 +167,10 @@
height: 50px;
font-size: 18px;
}
.arr {
top: 0px;
left: 0px;
}
.payment-title h1 {
font-size: 30px;
}

54
src/components/pages/Income/Amount/AmountPage.js
View File

@ -1,4 +1,4 @@
import React from "react";
import React, {useState} from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { useNavigate, useLocation , useOutletContext} from "react-router-dom";
@ -7,18 +7,33 @@ import "../Amount/AmountPage.css";
function AmountPage() {
const navigate = useNavigate();
const location = useLocation();
const { entryType } = location.state || {};
const [totalAmount, setTotalAmount] = useOutletContext();
const location = useLocation();
const { entryType } = location.state || {};
const [totalAmount, setTotalAmount] = useOutletContext();
const [isClickable, setIsClickable] = useState(true);
const [lastAddedAmount, setLastAddedAmount] = useState(0);
const handleCoinClick = (amount) => {
setTotalAmount((prevAmount) => prevAmount + amount);
if (isClickable) {
setTotalAmount((prevAmount) => prevAmount + amount);
setLastAddedAmount(amount);
setIsClickable(false);
setTimeout(() => {
setIsClickable(true);
}, 500);
}
};
const handleSubtractClick = (amount) => {
if (totalAmount >= amount) { // Ensure you do not go negative
setTotalAmount((prevAmount) => prevAmount - amount);
}
};
const handleBackClick = () => {
console.log(entryType);
navigate("/income", { state: { entryType } });
navigate("/", { state: { entryType } });
};
return (
@ -33,27 +48,40 @@ function AmountPage() {
</div>
<div className="amount-display">
<h3 className="amount-titles">Amount</h3>
<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 onClick={() => handleSubtractClick(lastAddedAmount)} disabled={lastAddedAmount === 0}>
-
</button>
<button onClick={() => handleCoinClick(lastAddedAmount)}>
+
</button>
</div>
</div>
);
}

57
src/components/pages/Income/Amount/TotalAmount.js
View File

@ -5,7 +5,7 @@ import './TotalAmount.css';
function TotalAmount({ totalAmount, category, setCategory }) {
const [amount, setAmount] = useState(totalAmount || '');
const location = useLocation();
const { entryType } = location.state || {};
const { entryType } = location.state || {};
const [entries, setEntries] = useState([]);
const [categoryError, setCategoryError] = useState('');
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
@ -26,22 +26,20 @@ function TotalAmount({ totalAmount, category, setCategory }) {
const handleAddEntry = () => {
setCategoryError('');
// Ensure amount is a number and greater than zero
if (amount <= 0) {
alert('Amount is required and must be greater than zero');
return null;
alert('Amount is required and must be greater than zero');
return null;
}
if (!category) {
setCategoryError('Category is required');
return null;
setCategoryError('Category is required');
return null;
}
const now = new Date();
const formattedDateTime = now.toLocaleString();
const newEntry = {
id: Date.now(),
amount: parseFloat(amount),
@ -49,23 +47,20 @@ function TotalAmount({ totalAmount, category, setCategory }) {
dateTime: formattedDateTime,
type: entryType
};
console.log(entryType)
if (!categories.includes(category)) {
setCategories([...categories, category]);
setCategories([...categories, category]);
}
const updatedEntries = [...entries, newEntry];
if (updatedEntries.length > 5) {
updatedEntries.shift();
updatedEntries.shift();
}
setEntries(updatedEntries);
localStorage.setItem('entries', JSON.stringify(updatedEntries));
// Reset input fields
setCategory('');
setAmount('');
@ -82,28 +77,62 @@ function TotalAmount({ totalAmount, category, setCategory }) {
const handleSaveAndAddEntry = () => {
const timestamp = handleAddEntry();
if (timestamp) {
navigate('/income');
navigate('/');
}
};
const handleCategoryFocus = () => {
navigate('/category');
};
const handleAmountFocus = () => {
navigate('/amount');
};
const handleAmountMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleAmountFocus(); // Navigate on first click
};
const handleCategoryMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleCategoryFocus(); // Navigate on first click
};
const handleAmountDoubleClick = () => {
const input = document.getElementById("amount-input");
input.focus();
};
const handleCategoryDoubleClick = () => {
const input = document.getElementById("category-input");
input.focus();
};
return (
<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)}
onMouseDown={handleAmountMouseDown}
onDoubleClick={handleAmountDoubleClick}
placeholder="Enter Amount"
/>
</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>}

2
src/components/pages/Income/Category/Category.js
View File

@ -17,7 +17,7 @@ function Category() {
const entryType = location.state?.entryType;
const handleBackClick = () => {
navigate("/income", { state: { entryType } });
navigate("/", { state: { entryType } });
console.log(entryType);
}

4
src/components/pages/Income/Home.js
View File

@ -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 (