despesas e receitas

src/components/CandidatePage/CandidatePage.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { ArrowLeftIcon } from '@heroicons/react/24/outline';
-import { openCandApi, type CandidateDetails, type CandidateAssets, type CandidateRedesSociais, ApiError } from '../../api';
+import { openCandApi, type CandidateDetails, type CandidateAssets, type CandidateRedesSociais, type CandidateExpenses, type CandidateIncome, ApiError } from '../../api';
 import ElectionsComponent from './ElectionsComponent';
 import AssetsComponent from './AssetsComponent';
 import BasicCandidateInfoComponent from './BasicCandidateInfoComponent';
 import SocialMediaComponent from './SocialMediaComponent';
+import IncomeExpenseComponent from './IncomeExpenseComponent';
 
 const CandidatePage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -13,9 +14,13 @@ const CandidatePage: React.FC = () => {
   const [candidateDetails, setCandidateDetails] = useState<CandidateDetails | null>(null);
   const [candidateAssets, setCandidateAssets] = useState<CandidateAssets | null>(null);
   const [candidateRedesSociais, setCandidateRedesSociais] = useState<CandidateRedesSociais | null>(null);
+  const [candidateExpenses, setCandidateExpenses] = useState<CandidateExpenses | null>(null);
+  const [candidateIncome, setCandidateIncome] = useState<CandidateIncome | null>(null);
   const [isLoadingDetails, setIsLoadingDetails] = useState(true);
   const [isLoadingAssets, setIsLoadingAssets] = useState(true);
   const [isLoadingRedesSociais, setIsLoadingRedesSociais] = useState(true);
+  const [isLoadingExpenses, setIsLoadingExpenses] = useState(true);
+  const [isLoadingIncome, setIsLoadingIncome] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -70,9 +75,39 @@ const CandidatePage: React.FC = () => {
       }
     };
 
+    // Fetch candidate expenses
+    const fetchCandidateExpenses = async () => {
+      try {
+        setIsLoadingExpenses(true);
+        const expenses = await openCandApi.getCandidateDepesas(id);
+        setCandidateExpenses(expenses);
+      } catch (err) {
+        console.error('Error fetching candidate expenses:', err);
+        // Expenses might not be available for all candidates, so we don't set error here
+      } finally {
+        setIsLoadingExpenses(false);
+      }
+    };
+
+    // Fetch candidate income
+    const fetchCandidateIncome = async () => {
+      try {
+        setIsLoadingIncome(true);
+        const income = await openCandApi.getCandidateReceitas(id);
+        setCandidateIncome(income);
+      } catch (err) {
+        console.error('Error fetching candidate income:', err);
+        // Income might not be available for all candidates, so we don't set error here
+      } finally {
+        setIsLoadingIncome(false);
+      }
+    };
+
     fetchCandidateDetails();
     fetchCandidateAssets();
     fetchCandidateRedesSociais();
+    fetchCandidateExpenses();
+    fetchCandidateIncome();
   }, [id, navigate]);
 
   if (error) {
@@ -138,6 +173,14 @@ const CandidatePage: React.FC = () => {
             assets={candidateAssets?.bens || null}
             isLoading={isLoadingAssets}
           />
+          
+          {/* Income and Expenses Panel */}
+          <IncomeExpenseComponent 
+            expenses={candidateExpenses}
+            income={candidateIncome}
+            isLoadingExpenses={isLoadingExpenses}
+            isLoadingIncome={isLoadingIncome}
+          />
         </div>
       </div>
     </main>