refactor: clean up code formatting and improve query invalidation logic in RulesPage and useIsMobile hook for better readability and maintainability

app/rules/page.tsx

@@ -42,19 +42,21 @@ export default function RulesPage() {
       offset: 0,
       includeUncategorized: true,
     },
-    !!metadata,
+    !!metadata
   );
 
   const refresh = useCallback(() => {
     invalidateTransactions();
     queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
+    queryClient.invalidateQueries({ queryKey: ["category-stats"] });
+    queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
   }, [invalidateTransactions, queryClient]);
   const [searchQuery, setSearchQuery] = useState("");
   const [sortBy, setSortBy] = useState<"count" | "amount" | "name">("count");
   const [filterMinCount, setFilterMinCount] = useState(2);
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const [selectedGroup, setSelectedGroup] = useState<TransactionGroup | null>(
-    null,
+    null
   );
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isAutoCategorizing, setIsAutoCategorizing] = useState(false);
@@ -85,7 +87,7 @@ export default function RulesPage() {
           totalAmount: transactions.reduce((sum, t) => sum + t.amount, 0),
           suggestedKeyword: suggestKeyword(descriptions),
         };
-      },
+      }
     );
 
     // Filter by search query
@@ -96,7 +98,7 @@ export default function RulesPage() {
         (g) =>
           g.displayName.toLowerCase().includes(query) ||
           g.key.includes(query) ||
-          g.suggestedKeyword.toLowerCase().includes(query),
+          g.suggestedKeyword.toLowerCase().includes(query)
       );
     }
 
@@ -165,7 +167,7 @@ export default function RulesPage() {
 
       // 1. Add keyword to category
       const category = metadata.categories.find(
-        (c: { id: string }) => c.id === ruleData.categoryId,
+        (c: { id: string }) => c.id === ruleData.categoryId
       );
       if (!category) {
         throw new Error("Category not found");
@@ -173,7 +175,7 @@ export default function RulesPage() {
 
       // Check if keyword already exists
       const keywordExists = category.keywords.some(
-        (k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase(),
+        (k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase()
       );
 
       if (!keywordExists) {
@@ -191,14 +193,14 @@ export default function RulesPage() {
               method: "PUT",
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
-            }),
-          ),
+            })
+          )
         );
       }
 
       refresh();
     },
-    [metadata, refresh],
+    [metadata, refresh]
   );
 
   const handleAutoCategorize = useCallback(async () => {
@@ -212,7 +214,7 @@ export default function RulesPage() {
       for (const transaction of uncategorized) {
         const categoryId = autoCategorize(
           transaction.description + " " + (transaction.memo || ""),
-          metadata.categories,
+          metadata.categories
         );
         if (categoryId) {
           await fetch("/api/banking/transactions", {
@@ -226,7 +228,7 @@ export default function RulesPage() {
 
       refresh();
       alert(
-        `${categorizedCount} transaction(s) catégorisée(s) automatiquement`,
+        `${categorizedCount} transaction(s) catégorisée(s) automatiquement`
       );
     } catch (error) {
       console.error("Error auto-categorizing:", error);
@@ -245,8 +247,8 @@ export default function RulesPage() {
               method: "PUT",
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify({ ...t, categoryId }),
-            }),
-          ),
+            })
+          )
         );
         refresh();
       } catch (error) {
@@ -254,7 +256,7 @@ export default function RulesPage() {
         alert("Erreur lors de la catégorisation");
       }
     },
-    [refresh],
+    [refresh]
   );
 
   if (

hooks/use-mobile.ts

@@ -4,7 +4,7 @@ const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
+    undefined
   );
 
   React.useEffect(() => {