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

" mu change"

new_001
sonali 2024-10-08 18:42:56 +05:30
parent b7e0e14e25
commit bbdcf4b3d5
7 changed files with 110 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/pages/Expense/Common/ExpenseEditPage.js
View File

@ -9,8 +9,10 @@ function ExpenseEditPage() {
const navigate = useNavigate();
const [currentDateTime, setCurrentDateTime] = useState("");
const [amount, setAmount] = useState(location.state?.amount || "");
const [categories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
// 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)
@ -29,6 +31,10 @@ function ExpenseEditPage() {
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")) || [];

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

@ -3,12 +3,12 @@ import { useNavigate, useLocation } from 'react-router-dom';
import '../ExpenseAmount/TotalExpenseAmount.css';
function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAmountChange }) {
const [amount, setAmount] = useState(totalAmount || '');
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(''); // State for amount error
const [amountError, setAmountError] = useState('');
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
const navigate = useNavigate();
@ -26,10 +26,10 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
const handleAddEntry = () => {
setCategoryError('');
setAmountError(''); // Reset amount error
setAmountError('');
if (amount <= 0) {
setAmountError('Amount is required and must be greater than zero'); // Set error message
setAmountError('Amount is required and must be greater than zero');
return null;
}
@ -91,13 +91,13 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
};
const handleAmountMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleAmountFocus(); // Navigate on first click
e.preventDefault();
handleAmountFocus();
};
const handleCategoryMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleCategoryFocus(); // Navigate on first click
e.preventDefault();
handleCategoryFocus();
};
const handleAmountDoubleClick = () => {
@ -110,6 +110,19 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
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">
@ -119,15 +132,12 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
id="amount-input"
type="number"
value={amount}
onChange={(e) => {
setAmount(e.target.value);
handleManualAmountChange(e.target.value); // Ensure it's called properly
}}
onChange={handleAmountChange}
onMouseDown={handleAmountMouseDown}
onDoubleClick={handleAmountDoubleClick}
placeholder="Enter Amount"
/>
{amountError && <span className="error-message">{amountError}</span>} {/* Amount error message */}
{amountError && <span className="error-message">{amountError}</span>}
</div>
<div className="category-input">
<label>Category:</label>

12
src/components/pages/Income/Amount/EntriesList.css
View File

@ -111,9 +111,17 @@
margin-right: 8px;
}
/* Entry icons container */
.dropdown-item.selected {
background-color: #bbb3b33d;
color: #ffffff;
}
.entry-icons {
display: flex;
align-items: center;

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

@ -10,9 +10,10 @@ function EntriesList() {
const [entries, setEntries] = useState([]);
const [editingEntryId, setEditingEntryId] = useState(null);
const [editedAmount, setEditedAmount] = useState("");
const [selectedCategory, setSelectedCategory] = useState([]); // Ensure this is initialized as an array
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"]);
@ -33,8 +34,15 @@ function EntriesList() {
const handleEditClick = (entry) => {
setEditingEntryId(entry.id);
setEditedAmount(entry.amount);
// Ensure selectedCategory is always an array
setSelectedCategory(Array.isArray(entry.category) ? entry.category : []);
if (Array.isArray(entry.category)) {
setSelectedCategory(entry.category);
} else if (typeof entry.category === "string") {
setSelectedCategory([entry.category]);
} else {
setSelectedCategory([]);
}
};
const handleSaveClick = (entry) => {
@ -57,7 +65,7 @@ function EntriesList() {
const newEntry = {
id: new Date().getTime(),
amount: repeatEntry.amount,
category: repeatEntry.category || [], // Ensure this is an array
category: repeatEntry.category || [],
type: repeatEntry.type,
};
@ -78,15 +86,19 @@ function EntriesList() {
const handleCategoryChange = (category) => {
setSelectedCategory((prevCategories) => {
// Ensure prevCategories is an array
if (!Array.isArray(prevCategories)) return [category]; // Initialize as array if not
if (!Array.isArray(prevCategories)) return [category];
if (prevCategories.includes(category)) {
return prevCategories.filter((cat) => cat !== category); // Remove category if already selected
return prevCategories.filter((cat) => cat !== category);
} else {
return [...prevCategories, category]; // Add category if not selected
return [...prevCategories, category];
}
});
setIsDropdownOpen(false);
};
const toggleDropdown = () => {
setIsDropdownOpen((prev) => !prev);
};
return (
@ -107,20 +119,22 @@ function EntriesList() {
className="entry-input"
/>
<div className="custom-dropdown">
<button className="dropdown-button">
<button className="dropdown-button" onClick={toggleDropdown}>
{selectedCategory.length > 0 ? selectedCategory.join(', ') : "Select Category"}
</button>
<div className="dropdown-content">
{categories.map((cat, idx) => (
<div
key={idx}
className="dropdown-item"
onClick={() => handleCategoryChange(cat)}
>
{cat}
</div>
))}
</div>
{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}
@ -137,7 +151,7 @@ function EntriesList() {
<>
<span className="entry-amount">₹{entry.amount}</span>
<span className="entry-category">
{Array.isArray(entry.category) ? entry.category.join(', ') : entry.category || "No Category"} {/* Safely check if it's an array */}
{Array.isArray(entry.category) ? entry.category.join(', ') : entry.category || "No Category"}
</span>
<div className="entry-icons">
<FontAwesomeIcon

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

@ -3,12 +3,12 @@ import { useNavigate, useLocation } from 'react-router-dom';
import './TotalAmount.css';
function TotalAmount({ totalAmount, category, setCategory , handleManualAmountChange}) {
const [amount, setAmount] = useState(totalAmount || '');
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(''); // State for amount error
const [amountError, setAmountError] = useState('');
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
const navigate = useNavigate();
@ -26,10 +26,10 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
const handleAddEntry = () => {
setCategoryError('');
setAmountError(''); // Reset amount error
setAmountError('');
if (amount <= 0) {
setAmountError('Amount is required and must be greater than zero'); // Set error message
setAmountError('Amount is required and must be greater than zero');
return null;
}
@ -91,13 +91,13 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
};
const handleAmountMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleAmountFocus(); // Navigate on first click
e.preventDefault();
handleAmountFocus();
};
const handleCategoryMouseDown = (e) => {
e.preventDefault(); // Prevents the keyboard from opening
handleCategoryFocus(); // Navigate on first click
e.preventDefault();
handleCategoryFocus();
};
const handleAmountDoubleClick = () => {
@ -110,6 +110,19 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
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">
@ -119,10 +132,7 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
id="amount-input"
type="number"
value={amount}
onChange={(e) => {
setAmount(e.target.value);
handleManualAmountChange(e.target.value);
}}
onChange={handleAmountChange}
onMouseDown={handleAmountMouseDown}
onDoubleClick={handleAmountDoubleClick}
placeholder="Enter Amount"

21
src/components/pages/Income/Common/IncomeEdit.js
View File

@ -9,9 +9,11 @@ function IncomeEdit() {
const navigate = useNavigate();
const [currentDateTime, setCurrentDateTime] = useState("");
const [amount, setAmount] = useState(location.state?.amount || "");
const [categories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
// Ensure selectedCategories is initialized correctly
// 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
@ -29,7 +31,11 @@ function IncomeEdit() {
const formattedDateTime = now.toLocaleString();
setCurrentDateTime(formattedDateTime);
// Fetch entry to edit if no id is passed
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(
@ -50,7 +56,7 @@ function IncomeEdit() {
}, [location.state]);
const handleBackClick = () => {
navigate("/records");
navigate("/expense-records");
};
const handleSave = () => {
@ -61,7 +67,7 @@ function IncomeEdit() {
id: location.state?.id,
amount: amount,
dateTime: currentDateTime,
category: selectedCategories.join(", "),
category: selectedCategories.join(", "),
};
const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
@ -70,7 +76,7 @@ function IncomeEdit() {
);
localStorage.setItem("entries", JSON.stringify(updatedEntries));
navigate("/successPage", { state: updatedEntry });
navigate("/expense-successfully", { state: updatedEntry });
setIsLoading(false);
};
@ -79,7 +85,7 @@ function IncomeEdit() {
};
const handleCategorySelect = (category) => {
// Toggle category selection
if (selectedCategories.includes(category)) {
setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
} else {
@ -154,5 +160,4 @@ function IncomeEdit() {
</div>
);
}
export default IncomeEdit;

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

@ -77,7 +77,7 @@ function Records() {
/>
</div>
<h1>Expense</h1>
<h1>Income</h1>
<div className="success-datetime">
<p>{currentDateTime}</p>
</div>