From e8091d95f60065948b38badda6c6be69a46ef32d Mon Sep 17 00:00:00 2001
From: Sahilagarwal623 <agarwalsahil333@gmail.com>
Date: Sat, 25 Oct 2025 15:34:24 +0530
Subject: [PATCH 1/2] fixed export to csv button

---
 frontend/src/pages/TransactionsPage.jsx | 131 ++++++++++++------------
 1 file changed, 68 insertions(+), 63 deletions(-)

diff --git a/frontend/src/pages/TransactionsPage.jsx b/frontend/src/pages/TransactionsPage.jsx
index cc7f900..0c26772 100644
--- a/frontend/src/pages/TransactionsPage.jsx
+++ b/frontend/src/pages/TransactionsPage.jsx
@@ -42,7 +42,7 @@ const TransactionsPage = () => {
   const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
   const { currency } = useCurrency();
   const isInitialMount = useRef(true);
-  const allCategories = [...new Set([...expenseCategories, ...incomeCategories])]; 
+  const allCategories = [...new Set([...expenseCategories, ...incomeCategories])];
 
   const fetchData = useCallback(async (currentSearchTerm = searchTerm) => {
     if (isInitialMount.current) {
@@ -101,7 +101,7 @@ const TransactionsPage = () => {
     if (isInitialMount.current) {
       fetchData(); // Fetch on initial mount
     } else {
-       // Debounced search is handled separately in handleSearchChange
+      // Debounced search is handled separately in handleSearchChange
       if (!debounceTimer.current) {
         fetchData();
       }
@@ -138,7 +138,7 @@ const TransactionsPage = () => {
     setDateTo('');
     setPage(1);
   };
-  
+
   const hasActiveFilters = searchTerm || typeFilter !== 'all' || categoryFilter !== 'all' || dateFrom || dateTo;
 
   const handleOpenTransactionModal = (transaction = null) => {
@@ -193,19 +193,19 @@ const TransactionsPage = () => {
   };
 
   const toggleSelect = (id) => {
-    setSelectedTransactionIds(prev => 
+    setSelectedTransactionIds(prev =>
       prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
     );
   };
-  
+
   const handleBulkDelete = async () => {
     if (!selectedTransactionIds.length) return;
-    
+
     const confirmMessage = `Are you sure you want to permanently delete these ${selectedTransactionIds.length} transactions? This action cannot be undone.`;
     if (window.confirm(confirmMessage)) {
       try {
-        await api.delete('/transactions/bulk', { 
-          data: { transactionIds: selectedTransactionIds } 
+        await api.delete('/transactions/bulk', {
+          data: { transactionIds: selectedTransactionIds }
         });
         setSelectedTransactionIds([]);
         fetchData(); // Refetch data
@@ -240,7 +240,7 @@ const TransactionsPage = () => {
       <div className="flex flex-wrap gap-4 justify-between items-center mb-6">
         <h1 className="text-3xl font-bold text-gray-900">Transactions</h1>
         <div className="flex flex-wrap gap-4">
-          {selectedTransactionIds.length > 0 && 
+          {selectedTransactionIds.length > 0 &&
             <button onClick={handleBulkDelete} className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
               Delete ({selectedTransactionIds.length})
             </button>
@@ -252,9 +252,14 @@ const TransactionsPage = () => {
             <span className='text-2xl'>+</span> Add Transaction
           </button>
           <button
-            onClick={handleExportCSV}
-            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
-            title="Export all transactions to CSV"
+            onClick={() => { if (transactions.length === 0) return; handleExportCSV(); }}
+            disabled={transactions.length === 0}
+            aria-disabled={transactions.length === 0}
+            className={`px-4 py-2 rounded-lg text-white transition-colors duration-150 ${transactions.length === 0
+              ? 'bg-gray-300 cursor-not-allowed'
+              : 'bg-green-600 hover:bg-green-700'
+              }`}
+            title={transactions.length === 0 ? 'No transactions to export' : 'Export all transactions to CSV'}
           >
             Export to CSV
           </button>
@@ -336,11 +341,11 @@ const TransactionsPage = () => {
         <Spinner />
       ) : (
         <div className={`bg-white shadow rounded-lg overflow-x-auto hover:shadow-lg transition-all duration-300 ${isFiltering ? 'opacity-50 pointer-events-none' : 'opacity-100'}`}>
-        {transactions.length > 0 ? (
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
-                 <th className="px-2 py-3">
+          {transactions.length > 0 ? (
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-2 py-3">
                     <input
                       type="checkbox"
                       className="w-4 h-4 rounded focus:ring-2 focus:ring-blue-600 hover:ring-4 hover:ring-blue-200 transition-all duration-200 cursor-pointer"
@@ -349,18 +354,18 @@ const TransactionsPage = () => {
                       onChange={() => setSelectedTransactionIds(selectedTransactionIds.length ? [] : transactions.map(t => t._id))}
                     />
                   </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th>
-                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
-              {transactions.map((tx) => (
-                <tr key={tx._id} className="hover:shadow-[0_2px_4px_rgba(0,0,0,0.1)] transition-shadow duration-200">
-                  <td className="px-2 py-6 text-center">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {transactions.map((tx) => (
+                  <tr key={tx._id} className="hover:shadow-[0_2px_4px_rgba(0,0,0,0.1)] transition-shadow duration-200">
+                    <td className="px-2 py-6 text-center">
                       <input
                         type="checkbox"
                         className="w-4 h-4 rounded focus:ring-2 focus:ring-blue-600 hover:ring-4 hover:ring-blue-200 transition-all duration-200 cursor-pointer"
@@ -368,24 +373,24 @@ const TransactionsPage = () => {
                         onChange={() => toggleSelect(tx._id)}
                       />
                     </td>
-                  <td className="px-6 py-4 whitespace-nowrap">{tx.name}</td>
-                  <td className="px-6 py-4 whitespace-nowrap">{tx.category}</td>
-                  <td className={`px-6 py-4 whitespace-nowrap font-semibold ${tx.isIncome ? 'text-green-600' : 'text-red-600'}`}>
-                    {tx.isIncome ? '+' : '-'}{new Intl.NumberFormat('en-US', {
-                      style: 'currency',
-                      currency: currency.code,
-                    }).format(tx.cost)}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">{new Date(tx.addedOn).toLocaleDateString()}</td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <button
-                      onClick={() => handleOpenDetailsModal(tx)}
-                      className="text-blue-600 hover:text-blue-800 underline font-medium"
-                    >
-                      Details
-                    </button>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <td className="px-6 py-4 whitespace-nowrap">{tx.name}</td>
+                    <td className="px-6 py-4 whitespace-nowrap">{tx.category}</td>
+                    <td className={`px-6 py-4 whitespace-nowrap font-semibold ${tx.isIncome ? 'text-green-600' : 'text-red-600'}`}>
+                      {tx.isIncome ? '+' : '-'}{new Intl.NumberFormat('en-US', {
+                        style: 'currency',
+                        currency: currency.code,
+                      }).format(tx.cost)}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">{new Date(tx.addedOn).toLocaleDateString()}</td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <button
+                        onClick={() => handleOpenDetailsModal(tx)}
+                        className="text-blue-600 hover:text-blue-800 underline font-medium"
+                      >
+                        Details
+                      </button>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <div className="flex items-center justify-end gap-2">
                         <button
                           onClick={() => handleOpenTransactionModal(tx)}
@@ -403,38 +408,38 @@ const TransactionsPage = () => {
                         </button>
                       </div>
                     </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           ) : (
-          <div className="p-6">
-            <EmptyState message="No Transaction done" />
-          </div>
-                )}
+            <div className="p-6">
+              <EmptyState message="No Transaction done" />
+            </div>
+          )}
         </div>
       )}
 
       {!loading && totalPages > 1 && (
         <div className="flex justify-between items-center mt-6">
-          <button 
-            onClick={() => setPage(p => Math.max(p - 1, 1))} 
-            disabled={page === 1} 
+          <button
+            onClick={() => setPage(p => Math.max(p - 1, 1))}
+            disabled={page === 1}
             className="flex items-center justify-center w-10 h-10 bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
             title="Previous page"
           >
             <ChevronLeft size={20} />
           </button>
-          
+
           <div className="flex items-center gap-2">
             <span className="text-sm text-gray-600">Page</span>
             <span className="px-3 py-1 bg-blue-600 text-white rounded-lg font-medium">{page}</span>
             <span className="text-sm text-gray-600">of {totalPages}</span>
           </div>
-          
-          <button 
-            onClick={() => setPage(p => Math.min(p + 1, totalPages))} 
-            disabled={page === totalPages} 
+
+          <button
+            onClick={() => setPage(p => Math.min(p + 1, totalPages))}
+            disabled={page === totalPages}
             className="flex items-center justify-center w-10 h-10 bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
             title="Next page"
           >

From c5f0a4ee2c52e25ae7764b2efb97255b8bf88a04 Mon Sep 17 00:00:00 2001
From: Sahilagarwal623 <agarwalsahil333@gmail.com>
Date: Sat, 25 Oct 2025 15:39:16 +0530
Subject: [PATCH 2/2] fix export to csv btn

---
 backend/package-lock.json | 111 --------------------------------------
 1 file changed, 111 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 7cce1e7..5a37991 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -2710,67 +2710,6 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
-    "node_modules/gcp-metadata": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.3.0.tgz",
-      "integrity": "sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "gaxios": "^5.0.0",
-        "json-bigint": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/gcp-metadata/node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/gcp-metadata/node_modules/gaxios": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz",
-      "integrity": "sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "extend": "^3.0.2",
-        "https-proxy-agent": "^5.0.0",
-        "is-stream": "^2.0.0",
-        "node-fetch": "^2.6.9"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/gcp-metadata/node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -4720,56 +4659,6 @@
         "node": ">=10.5.0"
       }
     },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-fetch/node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/node-fetch/node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/node-fetch/node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",