feat: implement bug for fix-bug-666

Author: egarciajulia

BUG-666.md

@@ -0,0 +1,14 @@
+# BUG-666: Missing Transaction Filter
+
+**Status:** In Progress
+**Assignee:** Junior Developer
+
+## Description
+
+The "Recent Transactions" table on the main dashboard is missing a feature. Users are unable to filter the list of transactions by their type (i.e., 'credit' or 'debit').
+
+## Acceptance Criteria
+
+- A dropdown or similar UI control should be added to the transaction list.
+- The user should be able to select 'All', 'Credit', or 'Debit' from the filter.
+- The transaction list should update to show only the transactions of the selected type.

frontend/src/components/TransactionList.tsx

@@ -17,12 +17,14 @@ const TransactionList: React.FC = () => {
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const [filterType, setFilterType] = useState<string>('all');
 
   useEffect(() => {
     const fetchTransactions = async () => {
       try {
         setLoading(true);
-        const response = await fetch('http://localhost:8000/api/v1/transactions/');
+        // JUNIOR DEV: I'll just fetch everything and filter on the client. It's easier!
+        const response = await fetch('http://localhost:8000/api/v1/transactions/?limit=100');
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -36,7 +38,7 @@ const TransactionList: React.FC = () => {
     };
 
     fetchTransactions();
-  }, []);
+  }, []); // Empty dependency array means this runs only once on mount.
 
   if (loading) {
     return <div className="text-gray-700">Loading transactions...</div>;
@@ -46,10 +48,29 @@ const TransactionList: React.FC = () => {
     return <div className="text-red-500">Error: {error}</div>;
   }
 
+  // Filter transactions based on the selected type
+  const filteredTransactions = transactions.filter(t => {
+    if (filterType === 'all') return true;
+    return t.type === filterType;
+  });
+
   return (
     <div className="bg-white shadow overflow-hidden sm:rounded-lg mt-8">
-      <div className="px-4 py-5 sm:px-6">
+      <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
         <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Transactions</h3>
+        <div>
+          <label htmlFor="filter" className="text-sm font-medium text-gray-700 mr-2">Filter by type:</label>
+          <select
+            id="filter"
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value)}
+            className="p-2 border border-gray-300 rounded-md"
+          >
+            <option value="all">All</option>
+            <option value="credit">Credit</option>
+            <option value="debit">Debit</option>
+          </select>
+        </div>
       </div>
       <div className="border-t border-gray-200">
         <table className="min-w-full divide-y divide-gray-200">
@@ -63,7 +84,7 @@ const TransactionList: React.FC = () => {
             </tr>
           </thead>
           <tbody className="bg-white divide-y divide-gray-200">
-            {transactions.map((transaction, index) => (
+            {filteredTransactions.map((transaction, index) => (
               <tr key={transaction.id} className={`${index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`}>
                 <td className="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
                   {new Date(transaction.date).toLocaleDateString()}
@@ -86,9 +107,9 @@ const TransactionList: React.FC = () => {
                 </td>
               </tr>
             ))}
-            {transactions.length === 0 && (
+            {filteredTransactions.length === 0 && (
               <tr>
-                <td colSpan={5} className="px-6 py-4 text-center text-gray-500">No transactions found.</td>
+                <td colSpan={5} className="px-6 py-4 text-center text-gray-500">No transactions found for this filter.</td>
               </tr>
             )}
           </tbody>