From 2016a930adf8ce474be3a237f0e0cecfbc072015 Mon Sep 17 00:00:00 2001
From: SAI2101 <saiabhang866@gmail.com>
Date: Mon, 27 Oct 2025 16:48:15 +0530
Subject: [PATCH 1/2] negative currency bug fixed

Refactor TransactionModal component for improved readability and functionality. Added validation for cost input and adjusted form handling for better user experience.also fix negative currency issue
---
 frontend/src/components/TransactionModal.jsx | 160 +++++++++++++++----
 1 file changed, 129 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/TransactionModal.jsx b/frontend/src/components/TransactionModal.jsx
index 903ad69..8d32928 100644
--- a/frontend/src/components/TransactionModal.jsx
+++ b/frontend/src/components/TransactionModal.jsx
@@ -14,7 +14,16 @@ const getInitialFormData = (categories) => ({
   note: ''
 });
 
-const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCategories = [], incomeCategories = [], onNewCategory, currentBalance = 0 }) => {
+const TransactionModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  transaction,
+  expenseCategories = [],
+  incomeCategories = [],
+  onNewCategory,
+  currentBalance = 0
+}) => {
   const [modalView, setModalView] = useState(VIEW_MODE.EXPENSE_FORM);
   const [submittedAnyway, setSubmittedAnyway] = useState(false);
   const [formData, setFormData] = useState({
@@ -23,7 +32,7 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
     cost: '',
     addedOn: new Date().toISOString().split('T')[0],
     isIncome: false,
-    note: ' '
+    note: ''
   });
 
   useEffect(() => {
@@ -34,21 +43,23 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
         cost: transaction.cost,
         addedOn: new Date(transaction.addedOn).toISOString().split('T')[0],
         isIncome: transaction.isIncome,
-        notes: transaction.note || ''
+        note: transaction.note || ''
       });
       setModalView(transaction.isIncome ? VIEW_MODE.INCOME_FORM : VIEW_MODE.EXPENSE_FORM);
     } else {
       setFormData({
         name: '',
-        category: expenseCategories[0] || '', // Default to the first category or empty
+        category: expenseCategories[0] || '',
         cost: '',
         addedOn: new Date().toISOString().split('T')[0],
         isIncome: false,
+        note: ''
       });
+
       if (modalView === VIEW_MODE.EXPENSE_FORM) {
-        setFormData(prev => ({ ...prev, category: expenseCategories[0] || '' }));
+        setFormData((prev) => ({ ...prev, category: expenseCategories[0] || '' }));
       } else {
-        setFormData(prev => ({ ...prev, category: incomeCategories[0] || '' }));
+        setFormData((prev) => ({ ...prev, category: incomeCategories[0] || '' }));
       }
     }
   }, [transaction, isOpen, expenseCategories, incomeCategories]);
@@ -56,18 +67,16 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
   const handleChange = (e) => {
     const { name, value } = e.target;
 
-    // Handle the "Add New" option for category
     if (name === 'category' && value === '__add_new__') {
       const newCategory = window.prompt("Enter new category name:");
-
       if (newCategory) {
         const isIncome = modalView === VIEW_MODE.INCOME_FORM;
         onNewCategory(newCategory, isIncome);
-
-        setFormData(prev => ({ ...prev, category: newCategory }));
+        setFormData((prev) => ({ ...prev, category: newCategory }));
       }
       return;
     }
+
     setFormData((prev) => ({
       ...prev,
       [name]: value,
@@ -79,6 +88,13 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
 
     const isIncomeTransaction = modalView === VIEW_MODE.INCOME_FORM;
     const costValue = parseFloat(formData.cost);
+
+    // ✅ Prevent negative or invalid amounts
+    if (isNaN(costValue) || costValue < 0) {
+      alert("Amount cannot be negative. Please enter a valid positive value.");
+      return;
+    }
+
     if (!isIncomeTransaction && !transaction && costValue > currentBalance && !submittedAnyway) {
       const confirmation = window.confirm(
         `Warning: This expense (${costValue}) exceeds your current balance (${currentBalance}). Proceeding will result in a negative balance. Do you wish to submit anyway?`
@@ -92,16 +108,20 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
       }
       return;
     }
+
     setSubmittedAnyway(false);
+
     let transactionName = formData.name.trim();
     if (isIncomeTransaction && transactionName === '') {
       transactionName = (formData.category ? formData.category : 'General') + ' Income';
     }
+
     const finalFormData = {
       ...formData,
       name: transactionName,
       isIncome: modalView === VIEW_MODE.INCOME_FORM
     };
+
     onSubmit(finalFormData, transaction?._id);
   };
 
@@ -109,45 +129,81 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
     e.preventDefault();
     setFormData(getInitialFormData(incomeCategories));
     setModalView(VIEW_MODE.INCOME_FORM);
-  }
+  };
 
   const handleSwitchToExpense = (e) => {
     e.preventDefault();
     setFormData(getInitialFormData(expenseCategories));
     setModalView(VIEW_MODE.EXPENSE_FORM);
-  }
+  };
 
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
       <div className="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
-        <h2 className="text-2xl font-bold mb-4">{transaction ? 'Edit' : 'Add'}{modalView === VIEW_MODE.EXPENSE_FORM ? ' Expense' : ' Income'} </h2>
+        <h2 className="text-2xl font-bold mb-4">
+          {transaction ? 'Edit' : 'Add'} {modalView === VIEW_MODE.EXPENSE_FORM ? 'Expense' : 'Income'}
+        </h2>
+
         <form onSubmit={handleSubmit}>
-          {/* ... other form fields (name, cost, etc.) remain the same ... */}
+          {/* EXPENSE FORM */}
           {modalView === VIEW_MODE.EXPENSE_FORM && (
             <>
               <div className="mb-4">
                 <label className="block text-gray-700">Name</label>
-                <input type="text" name="name" value={formData.name} onChange={handleChange} className="w-full px-3 py-2 border rounded" required />
+                <input
+                  type="text"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                />
               </div>
+
               <div className="mb-4">
                 <label className="block text-gray-700">Category</label>
-                <select name="category" value={formData.category} onChange={handleChange} className="w-full px-3 py-2 border rounded" required>
+                <select
+                  name="category"
+                  value={formData.category}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                >
                   <option value="" disabled>Select a category</option>
-                  {expenseCategories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
-                  <option value="__add_new__" className="font-bold text-blue-600">-- Add New Category --</option>
+                  {expenseCategories.map((cat) => (
+                    <option key={cat} value={cat}>{cat}</option>
+                  ))}
+                  <option value="__add_new__" className="font-bold text-blue-600">
+                    -- Add New Category --
+                  </option>
                 </select>
               </div>
 
               <div className="mb-4">
                 <label className="block text-gray-700">Amount (Expense)</label>
-                <input type="number" name="cost" value={formData.cost} onChange={handleChange} className="w-full px-3 py-2 border rounded" required />
+                <input
+                  type="number"
+                  name="cost"
+                  value={formData.cost}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                  min="0"  // ✅ Prevents typing negative numbers
+                />
               </div>
 
               <div className="mb-4">
                 <label className="block text-gray-700">Date</label>
-                <input type="date" name="addedOn" value={formData.addedOn} onChange={handleChange} className="w-full px-3 py-2 border rounded" required />
+                <input
+                  type="date"
+                  name="addedOn"
+                  value={formData.addedOn}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                />
               </div>
 
               <div className="mb-4">
@@ -158,13 +214,17 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
                   onChange={handleChange}
                   className="w-full px-3 py-2 border rounded resize-y"
                   rows="3"
-                  placeholder="E.g., Dinner at favorite restaurant, January salary"
+                  placeholder="E.g., Dinner at favorite restaurant"
                 />
               </div>
 
               <div className="mb-4">
                 <label className="flex items-center">
-                  <a className="text-blue-600 underline" href="#" onClick={handleSwitchToIncome}>
+                  <a
+                    className="text-blue-600 underline"
+                    href="#"
+                    onClick={handleSwitchToIncome}
+                  >
                     Add Income
                   </a>
                 </label>
@@ -172,25 +232,51 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
             </>
           )}
 
+          {/* INCOME FORM */}
           {modalView === VIEW_MODE.INCOME_FORM && (
             <>
               <div className="mb-4">
                 <label className="block text-gray-700">Category</label>
-                <select name="category" value={formData.category} onChange={handleChange} className="w-full px-3 py-2 border rounded" required>
+                <select
+                  name="category"
+                  value={formData.category}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                >
                   <option value="" disabled>Select a category</option>
-                  {incomeCategories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
-                  <option value="__add_new__" className="font-bold text-blue-600">-- Add New Category --</option>
+                  {incomeCategories.map((cat) => (
+                    <option key={cat} value={cat}>{cat}</option>
+                  ))}
+                  <option value="__add_new__" className="font-bold text-blue-600">
+                    -- Add New Category --
+                  </option>
                 </select>
               </div>
 
               <div className="mb-4">
                 <label className="block text-gray-700">Amount (Income)</label>
-                <input type="number" name="cost" value={formData.cost} onChange={handleChange} className="w-full px-3 py-2 border rounded" required />
+                <input
+                  type="number"
+                  name="cost"
+                  value={formData.cost}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                  min="0"  // ✅ Prevents typing negative numbers
+                />
               </div>
 
               <div className="mb-4">
                 <label className="block text-gray-700">Date</label>
-                <input type="date" name="addedOn" value={formData.addedOn} onChange={handleChange} className="w-full px-3 py-2 border rounded" required />
+                <input
+                  type="date"
+                  name="addedOn"
+                  value={formData.addedOn}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border rounded"
+                  required
+                />
               </div>
 
               <div className="mb-4">
@@ -201,21 +287,33 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
                   onChange={handleChange}
                   className="w-full px-3 py-2 border rounded resize-y"
                   rows="3"
-                  placeholder="E.g., Dinner at favorite restaurant, January salary"
+                  placeholder="E.g., January salary"
                 />
               </div>
 
               <div className="mb-4">
                 <label className="flex items-center">
-                  <a className="text-blue-600 underline" href="#" onClick={handleSwitchToExpense}>
+                  <a
+                    className="text-blue-600 underline"
+                    href="#"
+                    onClick={handleSwitchToExpense}
+                  >
                     Add Expense
                   </a>
                 </label>
               </div>
             </>
           )}
+
           <div className="flex justify-end space-x-4">
-            <button type="button" onClick={onClose} className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+            >
+              Cancel
+            </button>
+
             <button
               type="submit"
               className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
@@ -229,4 +327,4 @@ const TransactionModal = ({ isOpen, onClose, onSubmit, transaction, expenseCateg
   );
 };
 
-export default TransactionModal;
\ No newline at end of file
+export default TransactionModal;

From faff3e7561ce7280a3632299be3f586172924c4d Mon Sep 17 00:00:00 2001
From: SAI2101 <saiabhang866@gmail.com>
Date: Mon, 27 Oct 2025 17:42:57 +0530
Subject: [PATCH 2/2] added footer section with all modification

Refactor Layout component for improved styling and functionality.
---
 frontend/src/components/Layout.jsx | 131 ++++++++++++++++++-----------
 1 file changed, 81 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index f99bf29..aa913b3 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -1,74 +1,71 @@
-import React from 'react';
-import { Outlet, NavLink, useNavigate } from 'react-router-dom'; // 1. Import Link
-import useAuth from '../hooks/useAuth';
-import CurrencySelector from './CurrencySelector';
-import ThemeToggle from './ThemeToggle';
+import React from "react";
+import { Outlet, NavLink, useNavigate } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+import CurrencySelector from "./CurrencySelector";
+import ThemeToggle from "./ThemeToggle";
 
 const Layout = () => {
   const { logout } = useAuth();
   const navigate = useNavigate();
 
-
   const getNavLinkClass = ({ isActive }) => {
-    const baseClasses = 'px-3 py-2 rounded-md text-sm font-medium';
+    const baseClasses =
+      "px-3 py-2 rounded-md text-sm font-medium transition-all duration-200";
     if (isActive) {
-      return `${baseClasses} bg-blue-600 text-white`;
+      return `${baseClasses} bg-blue-600 text-white shadow-sm`;
     }
-    return `${baseClasses} text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white`;
+    return `${baseClasses} text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-gray-700 hover:text-blue-700 dark:hover:text-white`;
   };
 
-  const handleClick = (e) => {
-   navigate("/");
+  const handleLogoClick = () => {
+    navigate("/");
   };
 
-
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
-      <nav className="bg-white dark:bg-gray-800 shadow-md">
+    <div className="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-all duration-300">
+      {/* ======= NAVBAR ======= */}
+      <nav className="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
-            <div className="flex items-center">
-              {/* 2. Wrap the span in a Link to the dashboard */}
-               <span
-      onClick={handleClick}
-      className="font-bold text-xl text-blue-600 dark:text-blue-400 cursor-pointer transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300"
-      title="Go to home"
-    >
-      Paisable
-    </span>
+            {/* Left: Logo + Nav Links */}
+            <div className="flex items-center space-x-8">
+              <span
+                onClick={handleLogoClick}
+                className="font-bold text-xl text-blue-600 dark:text-blue-400 cursor-pointer transition-all duration-300 hover:scale-105 hover:text-blue-500 dark:hover:text-blue-300"
+                title="Go to Home"
+              >
+                Paisable
+              </span>
 
-              <div className="hidden md:block">
-                <div className="ml-10 flex items-baseline space-x-4">
-                  <NavLink to="/dashboard" className={getNavLinkClass}>
-                    Dashboard
-                  </NavLink>
-                  <NavLink to="/transactions" className={getNavLinkClass}>
-                    Transactions
-                  </NavLink>
-                  <NavLink to="/receipts" className={getNavLinkClass}>
-                    Receipts
-                  </NavLink>
-                  <NavLink to="/settings" className={getNavLinkClass}>
-                    Settings
-                  </NavLink>
-                  <NavLink to="/budgets" className={getNavLinkClass}>
-                    Budgets
-                  </NavLink>
-                  <NavLink
-                    to="/recurring-transactions"
-                    className={getNavLinkClass}
-                  >
-                    Recurring Transactions
-                  </NavLink>
-                </div>
+              <div className="hidden md:flex space-x-4">
+                <NavLink to="/dashboard" className={getNavLinkClass}>
+                  Dashboard
+                </NavLink>
+                <NavLink to="/transactions" className={getNavLinkClass}>
+                  Transactions
+                </NavLink>
+                <NavLink to="/budgets" className={getNavLinkClass}>
+                  Budgets
+                </NavLink>
+                <NavLink to="/recurring-transactions" className={getNavLinkClass}>
+                  Recurring
+                </NavLink>
+                <NavLink to="/receipts" className={getNavLinkClass}>
+                  Receipts
+                </NavLink>
+                <NavLink to="/settings" className={getNavLinkClass}>
+                  Settings
+                </NavLink>
               </div>
             </div>
+
+            {/* Right: Utilities */}
             <div className="flex items-center gap-4">
               <ThemeToggle />
               <CurrencySelector />
               <button
                 onClick={logout}
-                className="bg-red-500 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-red-600"
+                className="bg-red-500 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-red-600 transition-all duration-200"
               >
                 Logout
               </button>
@@ -77,11 +74,45 @@ const Layout = () => {
         </div>
       </nav>
 
-      <main>
-        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      {/* ======= MAIN CONTENT ======= */}
+      <main className="flex-grow">
+        <div className="max-w-7xl mx-auto py-8 sm:px-6 lg:px-8">
           <Outlet />
         </div>
       </main>
+
+      {/* ======= FOOTER ======= */}
+      <footer className="bg-white dark:bg-gray-800 shadow-inner mt-8">
+        <div className="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 text-center md:text-left text-sm text-gray-600 dark:text-gray-400 flex flex-col md:flex-row items-center justify-between space-y-2 md:space-y-0">
+          <p>
+            © {new Date().getFullYear()}{" "}
+            <span className="font-semibold text-blue-600 dark:text-blue-400">
+              Paisable
+            </span>
+            . All rights reserved.
+          </p>
+          <div className="flex space-x-4">
+            <NavLink
+              to="/privacy"
+              className="hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200"
+            >
+              Privacy Policy
+            </NavLink>
+            <NavLink
+              to="/terms"
+              className="hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200"
+            >
+              Terms of Use
+            </NavLink>
+            <NavLink
+              to="/contact"
+              className="hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200"
+            >
+              Contact
+            </NavLink>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 };