feat: integrate financial summary hook with transaction components and add auto-category selection

Author: Hopertz

src/components/TransactionForm.tsx

@@ -1,5 +1,4 @@
-
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -28,6 +27,16 @@ export function TransactionForm({ onSubmit, onCancel, type }: TransactionFormPro
   const [description, setDescription] = useState('');
   const isMobile = useIsMobile();
 
+  // Reset category when transaction type changes
+  useEffect(() => {
+    // Set appropriate default category based on transaction type
+    if (type === 'income') {
+      setCategory('chicken_sale');
+    } else {
+      setCategory('food');
+    }
+  }, [type]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 

src/components/TransactionSummary.tsx

@@ -3,19 +3,23 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ArrowUp, ArrowDown, DollarSign, Package } from "lucide-react";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { Transaction } from "@/pages/Index";
-import { useFinancialSummary } from "@/hooks/use-financial-summary";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { formatCurrency } from "@/utils/format";
 
 interface TransactionSummaryProps {
   transactions: Transaction[];
+  summary: {
+    total_income: number;
+    total_expenses: number;
+    total_profit: number;
+  } | null;
+  loading: boolean;
+  error: string | null;
 }
 
-export function TransactionSummary({ transactions }: TransactionSummaryProps) {
+export function TransactionSummary({ transactions, summary, loading, error }: TransactionSummaryProps) {
   const isMobile = useIsMobile();
-  const { summary, loading, error, fetchFinancialSummary } = useFinancialSummary();
-  
 
   // Use centralized formatting utility
   const formatCurrencyWithMobile = (amount: number) => {

src/pages/Index.tsx

@@ -8,6 +8,7 @@ import { TransactionForm } from "@/components/TransactionForm";
 import { TransactionList } from "@/components/TransactionList";
 import { TransactionSummary } from "@/components/TransactionSummary";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useFinancialSummary } from "@/hooks/use-financial-summary";
 import { useToast } from '@/components/ui/use-toast';
 import { Link, useNavigate } from 'react-router-dom';
 import {
@@ -41,7 +42,9 @@ export interface Transaction {
 
 
 
+
 const Index = () => {
+  const { summary, loading: summaryLoading, error: summaryError, fetchFinancialSummary } = useFinancialSummary();
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [showTransactionForm, setShowTransactionForm] = useState(false);
   const [activeTab, setActiveTab] = useState<'expenses' | 'income'>('expenses');
@@ -228,6 +231,7 @@ const Index = () => {
 
       // Force refresh transactions after adding a new one
       loadTransactionsFromServer(categoryFilter, activeTab, true);
+      fetchFinancialSummary(); // Refresh the financial summary
       setShowTransactionForm(false);
       toast({ title: 'Success', description: 'Transaction added successfully and list updated.' });
     } catch (error: any) {
@@ -302,7 +306,12 @@ const Index = () => {
             </div>
           </div>
           <div className="grid gap-6 grid-cols-1 md:grid-cols-3">
-            <TransactionSummary transactions={transactions} />
+            <TransactionSummary 
+  transactions={transactions}
+  summary={summary}
+  loading={summaryLoading}
+  error={summaryError}
+/>
           </div>
         </section>
 
@@ -391,6 +400,7 @@ const Index = () => {
               </CardHeader>
               <CardContent className="p-0">
                 <div className="overflow-x-auto">
+                  {/* TransactionSummary removed to prevent duplication */}
                   <TransactionList 
                     transactions={activeTab === 'expenses' ? expenses : income} 
                     type={activeTab}