From 26a26b8ca232447206403ea1cf91a0e27745bf72 Mon Sep 17 00:00:00 2001
From: Carlos Escalante <cescalante2988@gmail.com>
Date: Mon, 30 Mar 2026 10:56:03 -0600
Subject: [PATCH] Fix category dropdown showing ID and sort alphabetically

SelectValue now renders the category name instead of the raw ID.
Categories are sorted alphabetically when fetched.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/TransactionModal.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TransactionModal.tsx b/frontend/src/components/TransactionModal.tsx
index 2d7dfec..43d2094 100644
--- a/frontend/src/components/TransactionModal.tsx
+++ b/frontend/src/components/TransactionModal.tsx
@@ -47,7 +47,10 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
   const [error, setError] = useState('');
 
   useEffect(() => {
-    api.get('/categories/').then((r) => setCategories(r.data));
+    api.get('/categories/').then((r) => {
+      const sorted = [...r.data].sort((a: Category, b: Category) => a.name.localeCompare(b.name));
+      setCategories(sorted);
+    });
   }, []);
 
   useEffect(() => {
@@ -178,7 +181,11 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
                 onValueChange={(v) => setForm({ ...form, category_id: v === 'auto' ? '' : v })}
               >
                 <SelectTrigger className="w-full">
-                  <SelectValue />
+                  <SelectValue>
+                    {form.category_id
+                      ? categories.find((c) => c.id === Number(form.category_id))?.name ?? form.category_id
+                      : 'Auto-detect'}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="auto">Auto-detect</SelectItem>