feat: Add Branch Overview feature with account statistics

src/api/branches.ts

@@ -3,7 +3,8 @@ import api from './axios';
 // Types for branch API
 export interface BranchDetails {
   branch_id: string;
-  branch_name: string;
+  branch_name?: string;
+  name?: string; // Alternative field name from API
   branch_code?: string;
   city?: string;
   address?: string;
@@ -37,6 +38,18 @@ export interface BranchReportParams {
   transaction_type?: string;
 }
 
+export interface BranchAccountStatistics {
+  branch_id?: string;
+  branch_name?: string;
+  branch_address?: string | null;
+  total_joint_accounts?: number;
+  joint_accounts_balance?: number;
+  total_fixed_deposits?: number;
+  fixed_deposits_amount?: number;
+  total_savings_accounts?: number;
+  savings_accounts_balance?: number;
+}
+
 // Branch API service
 export const branchApi = {
   // Get all branches
@@ -68,6 +81,19 @@ export const branchApi = {
       { params }
     );
     return response.data;
+  },
+
+  // Get branch account statistics
+  getBranchAccountStatistics: async (branchId: string): Promise<BranchAccountStatistics> => {
+    try {
+      const response = await api.get(`/api/branches/${branchId}/statistics`);
+      console.log('API Response for branch statistics:', response.data);
+      return response.data;
+    } catch (error: any) {
+      console.error('API Error in getBranchAccountStatistics:', error);
+      console.error('Error response:', error.response?.data);
+      throw error;
+    }
   }
 };
 

src/components/layout/MainLayout.tsx

@@ -18,6 +18,7 @@ const MainLayout = ({ children, user, activeMainTab, onMainTabChange, onLogout }
     { id: 'create-account' as MainTab, label: 'Account Management', icon: UserPlus },
     { id: 'users' as MainTab, label: 'Users', icon: Users },
     { id: 'customer-details' as MainTab, label: 'Customer Details', icon: Users },
+    { id: 'branch-overview' as MainTab, label: 'Branch Overview', icon: Building2 },
     { id: 'branches' as MainTab, label: 'Branch Management', icon: Building2 },
     { id: 'savings-plans' as MainTab, label: 'Savings Plans', icon: PiggyBank },
   ];

src/dashboard/Dashboard.tsx

@@ -9,10 +9,11 @@ import CreateAccountSection from "./sections/CreateAccountSection";
 import UsersSection from "./sections/UsersSection";
 import CustomerDetailsSection from "./sections/CustomerDetailsSection";
 import BranchSection from "./sections/BranchSection";
+import BranchOverviewSection from "./sections/BranchOverviewSection";
 import SavingsPlansSection from "./sections/SavingsPlansSection";
 import MyProfileSection from "./sections/MyProfileSection";
 
-export type MainTab = 'transactions' | 'summary' | 'accounts' | 'create-account' | 'users' | 'customer-details' | 'branches' | 'savings-plans' | 'my-profile';
+export type MainTab = 'transactions' | 'summary' | 'accounts' | 'create-account' | 'users' | 'customer-details' | 'branch-overview' | 'branches' | 'savings-plans' | 'my-profile';
 
 const Dashboard = () => {
   const [activeMainTab, setActiveMainTab] = useState<MainTab>('transactions');
@@ -39,6 +40,7 @@ const Dashboard = () => {
       'create-account': 'fixed-deposit-new',
       'users': 'customers',
       'customer-details': 'customer-info',
+      'branch-overview': 'overview',
       'branches': 'summary',
       'savings-plans': 'create',
       'my-profile': 'details',
@@ -60,6 +62,8 @@ const Dashboard = () => {
         return <UsersSection activeSubTab={activeSubTab} setActiveSubTab={setActiveSubTab} />;
       case 'customer-details':
         return <CustomerDetailsSection activeSubTab={activeSubTab} setActiveSubTab={setActiveSubTab} />;
+      case 'branch-overview':
+        return <BranchOverviewSection />;
       case 'branches':
         return <BranchSection activeSubTab={activeSubTab} setActiveSubTab={setActiveSubTab} />;
       case 'savings-plans':