From 300d58e1ae56c262b548dab6da7e57a6249d6486 Mon Sep 17 00:00:00 2001
From: ranjan-27 <ranjan7223@gmail.com>
Date: Mon, 11 Aug 2025 20:53:51 +0530
Subject: [PATCH 1/3] added cursor pointer effect

---
 src/components/HomePage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 6c0088e..a911fcc 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -135,7 +135,7 @@ export default function HomePage() {
             </div>
             <button
               onClick={handleGetStarted}
-              className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-12 py-5 rounded-full font-bold text-xl hover:shadow-lg hover:scale-105 transition-all duration-300 flex items-center space-x-3"
+              className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-12 py-5 rounded-full font-bold text-xl hover:shadow-lg hover:scale-105 transition-all duration-300 flex items-center space-x-3 cursor-pointer"
             >
               <span>Get Started</span>
               <ArrowRight className="w-6 h-6" />

From fcbed13cdc7d5636c7d983749cf995c37c05323c Mon Sep 17 00:00:00 2001
From: ranjan-27 <ranjan7223@gmail.com>
Date: Tue, 12 Aug 2025 19:18:53 +0530
Subject: [PATCH 2/3] Add the edit option

---
 src/components/AddTransactionModal.jsx | 309 +++++++++++++------------
 src/components/Dashboard.jsx           |  21 +-
 2 files changed, 178 insertions(+), 152 deletions(-)

diff --git a/src/components/AddTransactionModal.jsx b/src/components/AddTransactionModal.jsx
index ada4177..b11f243 100644
--- a/src/components/AddTransactionModal.jsx
+++ b/src/components/AddTransactionModal.jsx
@@ -1,3 +1,8 @@
+import { useState, useEffect } from 'react';
+import { useCurrency } from "./CurrencyContext";
+import { useTransactions } from './TransactionContext';
+import toast from 'react-hot-toast';
+
 const formatDate = (date) => {
   const d = new Date(date);
   const day = String(d.getDate()).padStart(2, '0');
@@ -6,104 +11,93 @@ const formatDate = (date) => {
   return `${day}/${month}/${year}`;
 };
 
-import { useState, useEffect } from 'react';
-import { useCurrency } from "./CurrencyContext";
-import { useTransactions } from './TransactionContext';
-import toast from 'react-hot-toast';
+export default function AddTransactionModal({
+  showModal = true,
+  setShowModal = () => {},
+  darkMode = false,
+  transactionToEdit = null,
+  setTransactionToEdit = null // optional, parent can pass to clear edit state on close
+}) {
+  // transaction functions from context (some apps expose different names)
+  const {
+    addTransaction,
+    editTransaction,    // optional API name
+    updateTransaction,  // optional API name
+    setTransactions,    // optional fallback
+    transactions        // optional fallback data
+  } = useTransactions();
 
-export default function AddTransactionModal({ showModal = true, setShowModal = () => {}, darkMode = false }) {
-  const { addTransaction } = useTransactions();
-  const [form, setForm] = useState({
+  const initialForm = {
     amount: "",
     category: "",
     type: "Expense",
     date: formatDate(new Date()),
-    note: " "
-  });
+    note: ""
+  };
+
+  const [form, setForm] = useState(initialForm);
   const [isVisible, setIsVisible] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { currency, locale, setCurrency, setLocale } = useCurrency();
+  const { currency, locale } = useCurrency();
   const [errors, setErrors] = useState({});
   const suggestedCategories = ['Food', 'Transport', 'Groceries', 'Entertainment', 'Bills', 'Shopping', 'Rent', 'Utilities', 'Salary', 'Others'];
   const [categorySuggestions, setCategorySuggestions] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
 
+  // currency symbol helper
   const getCurrencySymbol = (currency, locale) => {
-    return (0).toLocaleString(locale, {
-      style: "currency",
-      currency,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).replace(/\d/g, "").trim();
+    try {
+      return (0).toLocaleString(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).replace(/\d/g, "").trim();
+    } catch {
+      return "";
+    }
   };
 
+  // show/hide animation state
   useEffect(() => {
-    if (showModal) {
-      setIsVisible(true);
-    }
+    if (showModal) setIsVisible(true);
+    else setIsVisible(false);
   }, [showModal]);
 
+  // prefill when editing (or reset when switching to add)
+  useEffect(() => {
+    if (transactionToEdit) {
+      setForm({
+        amount: transactionToEdit.amount != null ? String(transactionToEdit.amount) : "",
+        category: transactionToEdit.category || "",
+        type: transactionToEdit.type || "Expense",
+        date: transactionToEdit.date || formatDate(new Date()),
+        note: transactionToEdit.note || ""
+      });
+    } else if (showModal) {
+      setForm(initialForm);
+    }
+    // clear validation when transaction changes
+    setErrors({});
+  }, [transactionToEdit, showModal]);
+
   const validateForm = () => {
     const newErrors = {};
-    if (!form.amount || parseFloat(form.amount) <= 0) {
-     newErrors.amount = "Please enter a valid amount";
+    if (!form.amount || isNaN(parseFloat(form.amount)) || parseFloat(form.amount) <= 0) {
+      newErrors.amount = "Please enter a valid amount";
     }
-    if (!form.category.trim()) {
+    if (!form.category || !form.category.trim()) {
       newErrors.category = "Category is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
-const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!validateForm()) return;
-
-    setIsSubmitting(true);
-    
-    await new Promise(resolve => setTimeout(resolve, 800)); 
-
-    try {
-      
-      addTransaction({
-        ...form,
-        id: Date.now(),
-        amount: parseFloat(form.amount)
-      });
-
-      
-      toast.success('Transaction Added Successfully!');
-
-      
-      setForm({
-        amount: '',
-        category: '',
-        type: 'Expense',
-        date: formatDate(new Date()),
-        note: ''
-      });
-      handleClose(); 
-
-    } catch (error) {
-      
-      console.error("Failed to add transaction:", error);
-      toast.error('Could not add transaction. Please try again.');
-    } finally {
-      
-      setIsSubmitting(false);
-      setErrors({});
-    }
-  };
-  
-  const handleClose = () => {
-    setIsVisible(false);
-    setTimeout(() => setShowModal(false), 300);
-  };
-
   const handleInputChange = (field, value) => {
     let newValue = value;
-     if (field === "date") {
-      newValue = formatDate(value);
+    if (field === "date") {
+      // value from <input type="date"> is YYYY-MM-DD, convert to DD/MM/YYYY
+      newValue = formatDate(new Date(value));
     }
 
     if (field === "category") {
@@ -115,42 +109,90 @@ const handleSubmit = async (e) => {
       setShowSuggestions(filtered.length > 0);
     }
 
-    setForm({ ...form, [field]: newValue });
-    if (errors[field]) {
-      setErrors({ ...errors, [field]: " " });
+    setForm(prev => ({ ...prev, [field]: newValue }));
+    if (errors[field]) setErrors(prev => ({ ...prev, [field]: undefined }));
+  };
+
+  const handleClose = () => {
+    setIsVisible(false);
+    // small delay to let animation run (matches your CSS timing)
+    setTimeout(() => {
+      setShowModal(false);
+      if (typeof setTransactionToEdit === "function") setTransactionToEdit(null);
+    }, 250);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) return;
+
+    setIsSubmitting(true);
+
+    try {
+      const payload = {
+        ...form,
+        amount: parseFloat(form.amount),
+        date: form.date || formatDate(new Date())
+      };
+
+      if (transactionToEdit && transactionToEdit.id != null) {
+        // EDIT flow
+        const updated = { ...payload, id: transactionToEdit.id };
+
+        if (typeof editTransaction === "function") {
+          // if your context exposes a named edit function
+          editTransaction(updated);
+        } else if (typeof updateTransaction === "function") {
+          // alternative API: updateTransaction(id, data)
+          updateTransaction(updated.id, updated);
+        } else if (typeof setTransactions === "function" && Array.isArray(transactions)) {
+          // fallback: mutate list directly in context
+          setTransactions(prev => prev.map(t => t.id === updated.id ? updated : t));
+        } else {
+          // last fallback: call addTransaction (creates duplicate if no update available)
+          addTransaction(updated);
+        }
+
+        toast.success("Transaction updated");
+      } else {
+        // ADD flow
+        const newTransaction = { ...payload, id: Date.now() };
+        addTransaction(newTransaction);
+        toast.success("Transaction added");
+      }
+
+      // reset & close
+      setForm(initialForm);
+      handleClose();
+    } catch (err) {
+      console.error("Failed to save transaction:", err);
+      toast.error("Could not save transaction. Try again.");
+    } finally {
+      setIsSubmitting(false);
+      setErrors({});
     }
   };
 
   if (!showModal) return null;
 
+  const isEditMode = !!(transactionToEdit && transactionToEdit.id != null);
+
   return (
-    <div 
-          className={`fixed inset-0 w-full h-screen z-50 overflow-y-auto transition-all duration-300 ${
-        isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
-      }`}
+    <div
+      className={`fixed inset-0 w-full h-screen z-50 overflow-y-auto transition-all duration-300 ${isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
       onClick={handleClose}
     >
-            {/* Blurry overlay that shows the dashboard content */}
-      <div className={`fixed inset-0 backdrop-blur-sm transition-opacity duration-300 ${
-        darkMode ? 'bg-black/30' : 'bg-black/20'
-      } ${isVisible ? 'opacity-100' : 'opacity-0'}`}></div>
+      <div className={`fixed inset-0 backdrop-blur-sm transition-opacity duration-300 ${darkMode ? 'bg-black/30' : 'bg-black/20'} ${isVisible ? 'opacity-100' : 'opacity-0'}`}></div>
 
       <div className="flex items-center justify-center min-h-full p-4 py-8 relative">
         <div
-          className={`bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md transform transition-all duration-300 my-auto ${
-            isVisible ? 'scale-100 opacity-100 translate-y-0' : 'scale-95 opacity-0 translate-y-4'
-          }`}
+          className={`bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md transform transition-all duration-300 my-auto ${isVisible ? 'scale-100 opacity-100 translate-y-0' : 'scale-95 opacity-0 translate-y-4'}`}
           onClick={(e) => e.stopPropagation()}
         >
-         
-          {/* Modal header */}
-          <div className={`bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl ${
-            darkMode ? 'dark:from-blue-800 dark:to-purple-800' : ''
-          }`}>
-
+          <div className={`bg-gradient-to-r ${isEditMode ? 'from-green-600 to-emerald-500' : 'from-blue-600 to-purple-600'} text-white p-6 rounded-t-2xl`}>
             <div className="flex items-center justify-between">
-              <h2 className="text-2xl font-bold">Add Transaction</h2>
-              <button onClick={handleClose} className="text-white transition-colors duration-200 p-1 rounded-full hover:bg-white hover:bg-opacity-20 hover:text-red-700 cursor-pointer ">
+              <h2 className="text-2xl font-bold">{isEditMode ? 'Edit Transaction' : 'Add Transaction'}</h2>
+              <button onClick={handleClose} className="text-white transition-colors duration-200 p-1 rounded-full hover:bg-white hover:bg-opacity-20 cursor-pointer">
                 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
@@ -158,30 +200,23 @@ const handleSubmit = async (e) => {
             </div>
           </div>
 
-       
-          <div className="p-6 space-y-6">
-           
+          <form className="p-6 space-y-6" onSubmit={handleSubmit}>
             <div className="space-y-2">
-                  <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Amount*</label>
+              <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Amount*</label>
               <div className="relative">
-                <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 font-medium">{getCurrencySymbol(currency,locale)}</span>
+                <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 font-medium">{getCurrencySymbol(currency, locale)}</span>
                 <input
                   type="number"
                   step="0.01"
                   value={form.amount}
                   onChange={e => handleInputChange("amount", e.target.value)}
-                  className={`w-full pl-8 pr-4 py-3 border-2 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white ${
-                    errors.amount 
-                      ? 'border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700' 
-                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700'
-                  }`}
+                  className={`w-full pl-8 pr-4 py-3 border-2 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white ${errors.amount ? 'border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700'}`}
                   placeholder="0.00"
                 />
               </div>
               {errors.amount && <p className="text-red-500 dark:text-red-400 text-sm animate-pulse">{errors.amount}</p>}
             </div>
 
-
             <div className="space-y-2 relative">
               <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Category*</label>
               <input
@@ -189,17 +224,12 @@ const handleSubmit = async (e) => {
                 value={form.category}
                 onChange={e => handleInputChange("category", e.target.value)}
                 onFocus={() => setShowSuggestions(categorySuggestions.length > 0)}
-                onBlur={() => setTimeout(() => setShowSuggestions(false), 100)}
-                className={`w-full px-4 py-3 border-2 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white ${
-                  errors.category 
-                    ? 'border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700' 
-                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700'
-                }`}
+                onBlur={() => setTimeout(() => setShowSuggestions(false), 120)}
+                className={`w-full px-4 py-3 border-2 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white ${errors.category ? 'border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700'}`}
                 placeholder="e.g., Food, Transport, Entertainment"
               />
               {errors.category && <p className="text-red-500 dark:text-red-400 text-sm animate-pulse">{errors.category}</p>}
 
-              {/* 💡 Suggestion Dropdown */}
               {showSuggestions && (
                 <ul className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl max-h-48 overflow-auto shadow-lg">
                   {categorySuggestions.map((suggestion, index) => (
@@ -214,72 +244,54 @@ const handleSubmit = async (e) => {
                     >
                       {suggestion}
                     </li>
-
                   ))}
                 </ul>
               )}
             </div>
 
-
-    
             <div className="space-y-2">
               <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Type*</label>
               <div className="flex bg-gray-100 dark:bg-gray-700 rounded-xl p-1">
-                {['Income', 'Expense'].map((type) => (
+                {['Income', 'Expense'].map((t) => (
                   <button
-                    key={type}
+                    key={t}
                     type="button"
-                     onClick={() => handleInputChange("type", type)}
-                    className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all duration-200 ${
-                      form.type === type
-                        ? type === 'Income' 
-                          ? 'bg-green-500 text-white shadow-md transform scale-105 dark:bg-green-600'
-                          : 'bg-red-500 text-white shadow-md transform scale-105 dark:bg-red-600'
-                        : 'text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-600'
-                    }`}
+                    onClick={() => handleInputChange("type", t)}
+                    className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all duration-200 ${form.type === t ? (t === 'Income' ? 'bg-green-500 text-white shadow-md transform scale-105 dark:bg-green-600' : 'bg-red-500 text-white shadow-md transform scale-105 dark:bg-red-600') : 'text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-600'}`}
                   >
-                    {type}
+                    {t}
                   </button>
                 ))}
               </div>
             </div>
 
-           
             <div className="space-y-2">
               <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Date</label>
               <input
                 type="date"
-                value={
-                  (() => {
-                    
-                    const [dd, mm, yyyy] = form.date.split('/');
-                    return `${yyyy}-${mm}-${dd}`;
-                  })()
-                }
+                value={() => {
+                  // convert DD/MM/YYYY -> YYYY-MM-DD for input value
+                  const [dd, mm, yyyy] = form.date.split('/');
+                  return `${yyyy}-${mm}-${dd}`;
+                } }
                 onChange={(e) => handleInputChange('date', e.target.value)}
-                className={`w-full px-4 py-3 border-2 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white ${
-                  errors.date 
-                    ? 'border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700' 
-                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700'
-                }`}
+                className={`w-full px-4 py-3 border-2 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white ${errors.date ? 'border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700'}`}
               />
-               {errors.date && <p className="text-red-500 dark:text-red-400 text-sm animate-pulse">{errors.date}</p>}
+              {errors.date && <p className="text-red-500 dark:text-red-400 text-sm animate-pulse">{errors.date}</p>}
             </div>
 
-            
             <div className="space-y-2">
-               <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Note (Optional)</label>
+              <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Note (Optional)</label>
               <textarea
                 value={form.note}
                 onChange={e => handleInputChange("note", e.target.value)}
                 rows={3}
-                maxLength={30}
+                maxLength={60}
                 className="w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-xl resize-none transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                 placeholder="Add a note about this transaction..."
               />
             </div>
 
-         
             <div className="flex gap-3 pt-4">
               <button
                 type="button"
@@ -291,26 +303,21 @@ const handleSubmit = async (e) => {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                onClick={handleSubmit}
-                className={`flex-1 px-6 py-3 rounded-xl font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer ${
-                  isSubmitting
-                    ? 'bg-blue-400 dark:bg-blue-500 text-white cursor-not-allowed'
-                    : 'bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 text-white hover:from-blue-700 hover:to-purple-700 dark:hover:from-blue-800 dark:hover:to-purple-800 transform hover:scale-105 shadow-lg hover:shadow-xl'
-                }`}
+                className={`flex-1 px-6 py-3 rounded-xl font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer ${isSubmitting ? 'bg-blue-400 dark:bg-blue-500 text-white cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 text-white hover:from-blue-700 hover:to-purple-700 dark:hover:from-blue-800 dark:hover:to-purple-800 transform hover:scale-105 shadow-lg hover:shadow-xl'}`}
               >
                 {isSubmitting ? (
                   <div className="flex items-center justify-center">
                     <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
-                    Adding...
+                    {isEditMode ? 'Saving...' : 'Adding...'}
                   </div>
                 ) : (
-                   "Add Transaction"
+                  isEditMode ? 'Save Changes' : 'Add Transaction'
                 )}
               </button>
             </div>
-          </div>
+          </form>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 378f86d..78b51c4 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -240,6 +240,14 @@ export default function Dashboard() {
     downloadCSV(s)
   }
 
+  // use usestate hook for handle the state of a trasnction 
+
+  const [transactionToEdit,setTransactionToEdit]=useState(null);
+  const handleEdit=(transaction)=>{
+    setTransactionToEdit(transaction);
+    setShowModal(true); // to show when tap edit button the transction will show
+  };
+
   return (
     <div className={`min-h-screen flex flex-col transition-colors duration-300 ${darkMode
       ? "bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-gray-100"
@@ -556,6 +564,17 @@ export default function Dashboard() {
                     >
                       <Trash2 className="w-5 h-5" />
                     </button>
+                    <button
+                      onClick={()=>handleEdit(transaction)}
+                      className={`transition-colors ${
+                                    darkMode
+                             ? "text-gray-500 hover:text-blue-400"
+                             : "text-gray-400 hover:text-blue-600"
+                      }`}
+                      title="Edit"
+                    >
+                      ✏️
+                    </button>
                   </div>
                 </div>
 
@@ -620,7 +639,7 @@ export default function Dashboard() {
 
       <Footer />
 
-      <AddTransactionModal showModal={showModal} setShowModal={setShowModal} darkMode={darkMode} />
+      <AddTransactionModal showModal={showModal} setShowModal={setShowModal} darkMode={darkMode} transactionToEdit={transactionToEdit}  setTransactionToEdit={setTransactionToEdit}  />
       <ConfirmationModal
         show={showDeleteModal}
         onClose={() => setShowDeleteModal(false)}

From e306bbb5f69b9473860003aaa123dd8d68431750 Mon Sep 17 00:00:00 2001
From: ranjan-27 <ranjan7223@gmail.com>
Date: Fri, 26 Sep 2025 20:35:37 +0530
Subject: [PATCH 3/3] new deployment

---
 package-lock.json           | 31 +++++++++++++++++--------------
 package.json                |  3 ++-
 src/components/HomePage.jsx |  2 +-
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5df1e12..9fa4859 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2567,10 +2567,13 @@
       "license": "MIT"
     },
     "node_modules/fdir": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -4071,13 +4074,13 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -4179,17 +4182,17 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz",
-      "integrity": "sha512-MHFiOENNBd+Bd9uvc8GEsIzdkn1JxMmEeYX35tI3fv0sJBUTfW5tQsoaOwuY4KhBI09A3dUJ/DXf2yxPVPUceg==",
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
+      "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.6",
+        "fdir": "^6.5.0",
         "picomatch": "^4.0.3",
         "postcss": "^8.5.6",
-        "rollup": "^4.40.0",
-        "tinyglobby": "^0.2.14"
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
diff --git a/package.json b/package.json
index 87671d1..ef6a8c4 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start":"node index.js"
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.3.0",
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index a911fcc..b446465 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -145,7 +145,7 @@ export default function HomePage() {
           {/* Right Side */}
           <div className="flex-1 flex justify-center lg:justify-end">
             <img
-              src="/laptop_mobile_mockup.png"
+              src="/laptop_mobile_mockup.png" 
               alt="SmartLog Mobile and Laptop Mockup"
               className="w-auto h-[300px] md:h-[400px] lg:h-[500px] object-contain"
             />