From 7abe9fd082e066c897c8bbfcfb1351aa3125168a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lu=C3=ADs=20Murta?= <Luis.Murta@criticaltechworks.com>
Date: Sat, 6 Sep 2025 17:50:15 +0100
Subject: [PATCH] fixup! ongoing editable category

---
 src/main.tsx                |  4 +--
 src/routes/categories.tsx   | 10 ++++--
 src/routes/transactions.tsx | 63 ++++++++++++++++++++++++++++++-------
 3 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index a6962a9..9790277 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -12,9 +12,9 @@ const queryClient = new QueryClient();
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <CategoryContext value={await categoriesLoader()}>
+      <CategoryContext.Provider value={await categoriesLoader()}>
         <RouterProvider router={router} />
-      </CategoryContext>
+      </CategoryContext.Provider>
     </QueryClientProvider>
   </StrictMode>
 );
diff --git a/src/routes/categories.tsx b/src/routes/categories.tsx
index 1a43516..c1ae4c2 100644
--- a/src/routes/categories.tsx
+++ b/src/routes/categories.tsx
@@ -6,9 +6,13 @@ type Category = {
 };
 
 export async function loader(): Promise<Category[]> {
-  return fetch(`http://localhost:9000/categories`).then((response) => {
-    return response.json();
-  });
+  return [
+    { name: "Books", group: { name: "Media" } },
+    { name: "Movies", group: { name: "Media" } },
+    { name: "Groceries", group: { name: "Shopping" } },
+    { name: "Electronics", group: { name: "Shopping" } },
+    { name: "Misc", group: undefined }
+  ];
 }
 
 export default function Categories() {
diff --git a/src/routes/transactions.tsx b/src/routes/transactions.tsx
index 76c436a..32b8f5d 100644
--- a/src/routes/transactions.tsx
+++ b/src/routes/transactions.tsx
@@ -59,9 +59,14 @@ export default function Transactions() {
       columnHelper.accessor("category", {
         header: "Category",
         cell: (props) => {
-          console.log(props.getValue());
+          const [selectedCategory, setSelectedCategory] = useState(
+            props.getValue() as string
+          );
           return (
-            <select value={props.getValue()}>
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+            >
               {categories.map((category) => (
                 <option key={category.name} value={category.name}>
                   {category.name}
@@ -86,15 +91,51 @@ export default function Transactions() {
     },
   ]);
 
-  const { data, isPending, isError } = useQuery({
-    queryKey: ["transactions", pagination.pageIndex, columnFilters],
-    queryFn: () =>
-      loader(
-        pagination.pageIndex,
-        columnFilters.find((filter) => filter.id == "category")!.value as string
-      ),
-    placeholderData: keepPreviousData,
-  });
+  // Static data for local editing
+  const staticTransactions: Transaction[] = [
+    {
+      id: 1,
+      date: "2024-06-01",
+      description: "Coffee Shop",
+      value: 4.5,
+      category: "Food",
+    },
+    {
+      id: 2,
+      date: "2024-06-02",
+      description: "Book Store",
+      value: 15.0,
+      category: "Shopping",
+    },
+    {
+      id: 3,
+      date: "2024-06-03",
+      description: "Bus Ticket",
+      value: 2.75,
+      category: "Transport",
+    },
+    {
+      id: 4,
+      date: "2024-06-04",
+      description: "Groceries",
+      value: 32.2,
+      category: "Food",
+    },
+    {
+      id: 5,
+      date: "2024-06-05",
+      description: "Movie",
+      value: 12.0,
+      category: "Entertainment",
+    },
+  ];
+
+  const data = {
+    transactions: staticTransactions,
+    totalCount: staticTransactions.length,
+  };
+  const isPending = false;
+  const isError = false;
 
   const table = useReactTable({
     columns,