feat: update transaction filters to support multiple category selection and enhance UI with active filters display

app/transactions/page.tsx

@@ -36,7 +36,7 @@ export default function TransactionsPage() {
     }
   }, [searchParams]);
 
-  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+  const [selectedCategories, setSelectedCategories] = useState<string[]>(["all"]);
   const [showReconciled, setShowReconciled] = useState<string>("all");
   const [sortField, setSortField] = useState<SortField>("date");
   const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
@@ -66,12 +66,12 @@ export default function TransactionsPage() {
       );
     }
 
-    if (selectedCategory !== "all") {
-      if (selectedCategory === "uncategorized") {
+    if (!selectedCategories.includes("all")) {
+      if (selectedCategories.includes("uncategorized")) {
         transactions = transactions.filter((t) => !t.categoryId);
       } else {
         transactions = transactions.filter(
-          (t) => t.categoryId === selectedCategory
+          (t) => t.categoryId && selectedCategories.includes(t.categoryId)
         );
       }
     }
@@ -104,7 +104,7 @@ export default function TransactionsPage() {
     data,
     searchQuery,
     selectedAccount,
-    selectedCategory,
+    selectedCategories,
     showReconciled,
     sortField,
     sortOrder,
@@ -378,8 +378,8 @@ export default function TransactionsPage() {
         onSearchChange={setSearchQuery}
         selectedAccount={selectedAccount}
         onAccountChange={setSelectedAccount}
-        selectedCategory={selectedCategory}
-        onCategoryChange={setSelectedCategory}
+        selectedCategories={selectedCategories}
+        onCategoriesChange={setSelectedCategories}
         showReconciled={showReconciled}
         onReconciledChange={setShowReconciled}
         accounts={data.accounts}