TransactionHistoryReincorporated

src/components/ActionButtons/ActionButtons.js

@@ -16,6 +16,9 @@ const ActionButtons = ({ onActionClick }) => {
       <div className="action-button" onClick={() => onActionClick('income')}>
         Change Income
       </div>
+      <div className="action-button" onClick={() => onActionClick('transactionHistory')}>
+        Transaction History
+      </div>
     </div>
   );
 };

src/components/Modals/LogTransactionModal.js

@@ -2,15 +2,20 @@ import React from 'react';
 import Modal from './Modal';
 
 export const LogTransactionModal = ({ show, onClose, onSubmit, categories }) => {
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
-    onSubmit({
-      category: formData.get('category'),
-      memo: formData.get('memo'),
-      amount: parseFloat(formData.get('amount'))
-    }, 'log');
-    onClose();
+    try {
+      await onSubmit({
+        category: formData.get('category'),
+        memo: formData.get('memo'),
+        amount: parseFloat(formData.get('amount'))
+      }, 'log');
+      onClose();
+    } catch (error) {
+      console.error('Failed to log transaction:', error);
+      alert('Failed to update budget data');
+    }
   };
 
   return (

src/components/Modals/Modal.css

@@ -66,4 +66,46 @@
 
     .modal-form button:hover {
       background-color: #558800;
-    }
+    }
+
+/* Transaction History Table Styles */
+.transaction-table-container {
+  max-height: 400px;
+  overflow-y: auto;
+  margin-top: 1rem;
+}
+
+.transaction-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: #1a1d23;
+  color: white;
+}
+
+.transaction-table th,
+.transaction-table td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #444;
+}
+
+.transaction-table th {
+  background-color: #66AA11;
+  color: white;
+  position: sticky;
+  top: 0;
+}
+
+.transaction-table tr:nth-child(even) {
+  background-color: #282c34;
+}
+
+.transaction-table tr:hover {
+  background-color: #333842;
+}
+
+.no-transactions {
+  text-align: center;
+  padding: 20px;
+  color: #888;
+}

src/components/Modals/TransactionHistoryModal.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Modal from './Modal';
+import './Modal.css';
+
+export const TransactionHistoryModal = ({ show, onClose, transactions }) => {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2>Transaction History</h2>
+      <div className="transaction-table-container">
+        {transactions && transactions.length > 0 ? (
+          <table className="transaction-table">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Time</th>
+                <th>Category</th>
+                <th>Memo</th>
+                <th>Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((transaction, index) => (
+                <tr key={index}>
+                  <td>{transaction.date}</td>
+                  <td>{transaction.time}</td>
+                  <td>{transaction.category}</td>
+                  <td>{transaction.memo}</td>
+                  <td>${transaction.amount.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <div className="no-transactions">No transactions to display</div>
+        )}
+      </div>
+    </Modal>
+  );
+};

src/components/Modals/index.js

@@ -3,11 +3,13 @@ import { NewCategoryModal } from './NewCategoryModal';
 import { IncomeModal } from './IncomeModal';
 import { DeleteAccountModal } from './DeleteAccountModal';
 import { UpdateCategoryModal } from './UpdateCategoryModal';
+import { TransactionHistoryModal } from './TransactionHistoryModal';
 
 export {
   LogTransactionModal,
   NewCategoryModal,
   IncomeModal,
   DeleteAccountModal,
-  UpdateCategoryModal
+  UpdateCategoryModal,
+  TransactionHistoryModal
 };

src/hooks/useBudgetData.js

@@ -10,24 +10,39 @@ export const useBudgetData = (userId) => {
 
   const fetchData = async () => {
     if (userId) {
-      const userDocRef = doc(db, 'users', userId);
-      const userDoc = await getDoc(userDocRef);
-      if (userDoc.exists()) {
-        const userData = userDoc.data();
-        const budgetData = userData.budgetData || [];
-        const transactions = userData.transactions || [];
-
-        // Set income
-        const incomeEntry = budgetData.find(entry => entry.category === 'Income');
-        setIncome(incomeEntry ? incomeEntry.amount : 0);
-
-        // Set categories and amounts
-        const categories = budgetData.filter(entry => entry.type === 'category');
-        setCatData(categories.map(entry => entry.amount));
-        setCatLabels(categories.map(entry => entry.category));
-
-        // Set transactions
-        setTransactions(transactions);
+      try {
+        const userDocRef = doc(db, 'users', userId);
+        const userDoc = await getDoc(userDocRef);
+
+        if (userDoc.exists()) {
+          const userData = userDoc.data();
+          const budgetData = userData.budgetData || [];
+
+          // Set income
+          const incomeEntry = budgetData.find(entry => entry.category === 'Income');
+          setIncome(incomeEntry ? incomeEntry.amount : 0);
+
+          // Set categories and amounts
+          const categories = budgetData
+            .filter(entry => entry.type === 'category')
+            .map(entry => entry.category);
+          const amounts = budgetData
+            .filter(entry => entry.type === 'category')
+            .map(entry => entry.amount);
+
+          setCatData(amounts);
+          setCatLabels(categories);
+
+          // Set transactions
+          const allTransactions = budgetData
+            .filter(entry => entry.type === 'category')
+            .flatMap(entry => entry.transactions || [])
+            .sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time));
+
+          setTransactions(allTransactions);
+        }
+      } catch (error) {
+        console.error('Error fetching budget data:', error);
       }
     }
   };
@@ -39,82 +54,78 @@ export const useBudgetData = (userId) => {
   const handleFormSubmit = async (formData, type) => {
     if (!userId) return;
 
-    const userDocRef = doc(db, 'users', userId);
-    const userDoc = await getDoc(userDocRef);
-    let budgetData = userDoc.exists() ? userDoc.data().budgetData || [] : [];
-    let transactions = userDoc.exists() ? userDoc.data().transactions || [] : [];
-
     try {
+      const userDocRef = doc(db, 'users', userId);
+      const userDoc = await getDoc(userDocRef);
+      const currentData = userDoc.exists() ? userDoc.data().budgetData || [] : [];
+      let updatedData;
+
       switch (type) {
-        case 'new':
-          // Add new category
-          budgetData.push({
+        case 'log':
+          const newTransaction = {
             category: formData.category,
-            amount: formData.amount,
-            type: 'category'
+            memo: formData.memo,
+            amount: parseFloat(formData.amount),
+            date: new Date().toLocaleDateString(),
+            time: new Date().toLocaleTimeString(),
+            type: 'transaction'
+          };
+
+          updatedData = currentData.map(entry => {
+            if (entry.category === formData.category && entry.type === 'category') {
+              return {
+                ...entry,
+                transactions: [newTransaction, ...(entry.transactions || [])]
+              };
+            }
+            return entry;
           });
+
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          setTransactions(prevTransactions => [newTransaction, ...prevTransactions]);
           break;
 
-        case 'update':
-          // Update existing category
-          const categoryIndex = budgetData.findIndex(
-            item => item.category === formData.oldCategory
-          );
-          if (categoryIndex !== -1) {
-            budgetData[categoryIndex] = {
-              category: formData.newCategory || formData.oldCategory,
-              amount: formData.amount,
-              type: 'category'
-            };
-            // Update category name in transactions if it changed
-            if (formData.newCategory && formData.newCategory !== formData.oldCategory) {
-              transactions = transactions.map(t => ({
-                ...t,
-                category: t.category === formData.oldCategory ? formData.newCategory : t.category
-              }));
-            }
-          }
+        case 'new':
+          const newCategory = {
+            category: formData.name,
+            amount: formData.amount,
+            type: 'category',
+            transactions: []
+          };
+          updatedData = [...currentData, newCategory];
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          await fetchData();
           break;
 
-        case 'income':
-          // Update income
-          const incomeIndex = budgetData.findIndex(
-            item => item.category === 'Income'
+        case 'update':
+          updatedData = currentData.map(entry =>
+            entry.category === formData.oldCategory
+              ? { ...entry, category: formData.name, amount: formData.amount }
+              : entry
           );
-          if (incomeIndex !== -1) {
-            budgetData[incomeIndex].amount = formData.amount;
-          } else {
-            budgetData.push({
-              category: 'Income',
-              amount: formData.amount,
-              type: 'income'
-            });
-          }
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          await fetchData();
           break;
 
-        case 'log':
-          // Log a transaction without changing category amount
-          transactions.push({
-            category: formData.category,
+        case 'income':
+          const incomeEntry = {
+            category: 'Income',
             amount: formData.amount,
-            memo: formData.memo,
-            date: new Date().toISOString()
-          });
+            type: 'income'
+          };
+          updatedData = currentData.filter(entry => entry.category !== 'Income');
+          updatedData.push(incomeEntry);
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          setIncome(formData.amount);
           break;
-      }
-
-      // Update Firestore
-      await updateDoc(userDocRef, { 
-        budgetData,
-        transactions 
-      });
 
-      // Refresh the local state
-      await fetchData();
+        default:
+          return;
+      }
 
     } catch (error) {
       console.error('Error updating budget data:', error);
-      alert('Failed to update budget data');
+      throw error;
     }
   };
 
@@ -123,10 +134,8 @@ export const useBudgetData = (userId) => {
       try {
         const userDocRef = doc(db, 'users', userId);
         await updateDoc(userDocRef, {
-          budgetData: [{ category: 'Income', amount: 0, type: 'income' }],
-          transactions: []
+          budgetData: [{ category: 'Income', amount: 0, type: 'income' }]
         });
-        // Reset local state
         setCatData([]);
         setCatLabels([]);
         setIncome(0);