refactor: clean up imports and improve code consistency across various components; remove unused imports in page.tsx, add missing imports in categories page, and standardize formatting in hooks and chart components

app/categories/page.tsx

@@ -11,6 +11,7 @@ import {
 import { useBankingMetadata, useCategoryStats } from "@/lib/hooks";
 import { useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -43,7 +44,7 @@ export default function CategoriesPage() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [expandedParents, setExpandedParents] = useState<Set<string>>(
-    new Set(),
+    new Set()
   );
   const [formData, setFormData] = useState({
     name: "",
@@ -54,7 +55,7 @@ export default function CategoriesPage() {
   });
   const [searchQuery, setSearchQuery] = useState("");
   const [recatResults, setRecatResults] = useState<RecategorizationResult[]>(
-    [],
+    []
   );
   const [isRecatDialogOpen, setIsRecatDialogOpen] = useState(false);
   const [isRecategorizing, setIsRecategorizing] = useState(false);
@@ -76,7 +77,7 @@ export default function CategoriesPage() {
         };
 
       const parents = metadata.categories.filter(
-        (c: Category) => c.parentId === null,
+        (c: Category) => c.parentId === null
       );
       const children: Record<string, Category[]> = {};
       const orphans: Category[] = [];
@@ -85,7 +86,7 @@ export default function CategoriesPage() {
         .filter((c: Category) => c.parentId !== null)
         .forEach((child: Category) => {
           const parentExists = parents.some(
-            (p: Category) => p.id === child.parentId,
+            (p: Category) => p.id === child.parentId
           );
           if (parentExists) {
             if (!children[child.parentId!]) {
@@ -108,7 +109,9 @@ export default function CategoriesPage() {
   useEffect(() => {
     if (parentCategories.length > 0 && expandedParents.size === 0) {
       if (expandAllByDefault) {
-        setExpandedParents(new Set(parentCategories.map((p: Category) => p.id)));
+        setExpandedParents(
+          new Set(parentCategories.map((p: Category) => p.id))
+        );
       } else {
         setExpandedParents(new Set());
       }
@@ -147,7 +150,7 @@ export default function CategoriesPage() {
 
       return { total, count };
     },
-    [categoryStats, childrenByParent],
+    [categoryStats, childrenByParent]
   );
 
   if (isLoadingMetadata || !metadata || isLoadingStats || !categoryStats) {
@@ -261,7 +264,7 @@ export default function CategoriesPage() {
     try {
       // Fetch uncategorized transactions
       const uncategorizedResponse = await fetch(
-        "/api/banking/transactions?limit=1000&offset=0&includeUncategorized=true",
+        "/api/banking/transactions?limit=1000&offset=0&includeUncategorized=true"
       );
       if (!uncategorizedResponse.ok) {
         throw new Error("Failed to fetch uncategorized transactions");
@@ -274,11 +277,11 @@ export default function CategoriesPage() {
       for (const transaction of uncategorized) {
         const categoryId = autoCategorize(
           transaction.description + " " + (transaction.memo || ""),
-          metadata.categories,
+          metadata.categories
         );
         if (categoryId) {
           const category = metadata.categories.find(
-            (c: Category) => c.id === categoryId,
+            (c: Category) => c.id === categoryId
           );
           if (category) {
             results.push({ transaction, category });
@@ -312,9 +315,9 @@ export default function CategoriesPage() {
       return children.some(
         (c) =>
           c.name.toLowerCase().includes(query) ||
-          c.keywords.some((k) => k.toLowerCase().includes(query)),
+          c.keywords.some((k) => k.toLowerCase().includes(query))
       );
-    },
+    }
   );
 
   return (
@@ -359,9 +362,9 @@ export default function CategoriesPage() {
                 (c) =>
                   c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                   c.keywords.some((k) =>
-                    k.toLowerCase().includes(searchQuery.toLowerCase()),
+                    k.toLowerCase().includes(searchQuery.toLowerCase())
                   ) ||
-                  parent.name.toLowerCase().includes(searchQuery.toLowerCase()),
+                  parent.name.toLowerCase().includes(searchQuery.toLowerCase())
               )
             : allChildren;
           const stats = getCategoryStats(parent.id, true);
@@ -448,7 +451,7 @@ export default function CategoriesPage() {
                       </p>
                       <p className="text-xs text-muted-foreground truncate">
                         {new Date(result.transaction.date).toLocaleDateString(
-                          "fr-FR",
+                          "fr-FR"
                         )}
                         {" • "}
                         {new Intl.NumberFormat("fr-FR", {

app/page.tsx

@@ -8,7 +8,6 @@ import { AccountsSummary } from "@/components/dashboard/accounts-summary";
 import { CategoryBreakdown } from "@/components/dashboard/category-breakdown";
 import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
 import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
-import { Card, CardContent } from "@/components/ui/card";
 import { useBankingData } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
 import { Upload } from "lucide-react";

app/rules/page.tsx

@@ -39,7 +39,6 @@ export default function RulesPage() {
   const {
     data: transactionsData,
     isLoading: isLoadingTransactions,
-    invalidate: invalidateTransactions,
   } = useTransactions(
     {
       limit: 10000, // Large limit to get all uncategorized
@@ -49,7 +48,7 @@ export default function RulesPage() {
     !!metadata,
   );
 
-  const refresh = useCallback(() => {
+  const _refresh = useCallback(() => {
     invalidateAllTransactionQueries(queryClient);
     invalidateAllCategoryQueries(queryClient);
   }, [queryClient]);

components/statistics/category-bar-chart.tsx

@@ -31,7 +31,15 @@ export function CategoryBarChart({
   const displayData = data.slice(0, maxItems).reverse(); // Reverse pour avoir le plus grand en haut
 
   // Custom tick component for clickable labels
-  const CustomYAxisTick = ({ x, y, payload }: any) => {
+  const CustomYAxisTick = ({
+    x,
+    y,
+    payload,
+  }: {
+    x: number;
+    y: number;
+    payload: { value: string };
+  }) => {
     const categoryName = payload.value;
     const item = displayData.find((d) => d.name === categoryName);
     

hooks/use-transactions-chart-data.ts

@@ -164,7 +164,7 @@ export function useTransactionsChartData({
     );
 
     return monthlyChartData;
-  }, [transactionsData]);
+  }, [transactionsData, metadata]);
 
   // Calculate category chart data (expenses only)
   const categoryData = useMemo(() => {

hooks/use-transactions-page.ts

@@ -213,7 +213,7 @@ export function useTransactionsPage() {
     } else {
       setIsCustomDatePickerOpen(true);
     }
-  }, []);
+  }, [setPeriod]);
 
   const handleCustomStartDateChange = useCallback((date: Date | undefined) => {
     setCustomStartDate(date);