diff --git a/.env.local b/.env.local
index 27570e5..acf8695 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1,6 @@
-DATABASE_URL="postgres://neondb_owner:npg_fthjFP8Ece2Z@ep-icy-leaf-afdbv5ts-pooler.c-2.us-west-2.aws.neon.tech/neondb?sslmode=require"
+# .env
+DB_HOST=localhost
+DB_PORT=5432
+DB_NAME=databas  # Name of your PostgreSQL database
+DB_USER=postgres        # Your PostgreSQL username
+DB_PASSWORD=blackEARTH3018334
\ No newline at end of file
diff --git a/lib/db.js b/lib/db.js
index 0bf2a63..fcf643c 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -1,13 +1,20 @@
-import bcrypt from 'bcrypt';
-import pkg from 'pg';
-const { Pool } = pkg;
+const { Pool } = require('pg');
 
 const pool = new Pool({
-  connectionString: process.env.DATABASE_URL, 
-  ssl: {
-    rejectUnauthorized: false,
-  },
+  host: process.env.DB_HOST,
+  port: process.env.DB_PORT,
+  database: process.env.DB_NAME,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
 });
 
-export { bcrypt };
-export default pool;
+// Test the connection
+pool.query('SELECT NOW()', (err, res) => {
+  if (err) {
+    console.error('Database connection error:', err);
+  } else {
+    console.log('Database connected successfully');
+  }
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/src/app/api/reports/insurance-analysis/route.js b/src/app/api/reports/insurance-analysis/route.js
index 15ed5ea..d37234a 100644
--- a/src/app/api/reports/insurance-analysis/route.js
+++ b/src/app/api/reports/insurance-analysis/route.js
@@ -1,147 +1,71 @@
-import pool from '../../../../../lib/db';
 import { NextResponse } from 'next/server';
+import pool from '../../../../../lib/db';
 
 export async function GET(request) {
   try {
     const { searchParams } = new URL(request.url);
     const startDate = searchParams.get('startDate');
     const endDate = searchParams.get('endDate');
-    const analysisType = searchParams.get('type') || 'detailed'; // detailed or summary
 
-    if (analysisType === 'summary') {
-      // Monthly summary view
-      let summaryQuery = `
+    let query = `
+      WITH monthly_data AS (
         SELECT 
-          DATE_TRUNC('month', a.date) AS month_year,
-          COUNT(DISTINCT a.appointment_id) AS total_appointments,
-          SUM(COALESCE(pay.amount, 0)) AS total_payments,
-          SUM(COALESCE(ic.amount_approved, 0)) AS total_insurance_covered,
-          SUM(COALESCE(pay.amount, 0) - COALESCE(ic.amount_approved, 0)) AS total_out_of_pocket,
-          CASE 
-            WHEN SUM(COALESCE(pay.amount, 0)) > 0 THEN 
-              (SUM(COALESCE(ic.amount_approved, 0)) / SUM(pay.amount) * 100)
-            ELSE 0 
-          END AS overall_insurance_coverage_percentage,
-          COUNT(DISTINCT CASE WHEN ic.amount_approved > 0 THEN a.appointment_id END) AS appointments_with_insurance,
-          COUNT(DISTINCT CASE WHEN ic.amount_approved IS NULL OR ic.amount_approved = 0 THEN a.appointment_id END) AS appointments_without_insurance
+          DATE_TRUNC('month', a.date) as month_year,
+          COUNT(DISTINCT a.appointment_id) as total_appointments,
+          SUM(p.amount) as total_payments,
+          SUM(COALESCE(ic.amount_approved, 0)) as total_insurance_covered,
+          SUM(p.amount - COALESCE(ic.amount_approved, 0)) as total_out_of_pocket
         FROM appointment a
-        LEFT JOIN payment pay ON a.appointment_id = pay.appointment_id
-        LEFT JOIN insurance_claim ic ON a.appointment_id = ic.appointment_id AND ic.status = 'Approved'
-        WHERE a.date IS NOT NULL
-      `;
-
-      const queryParams = [];
-      let paramIndex = 1;
-
-      if (startDate) {
-        summaryQuery += ` AND a.date >= $${paramIndex}`;
-        queryParams.push(startDate);
-        paramIndex++;
-      }
-
-      if (endDate) {
-        summaryQuery += ` AND a.date <= $${paramIndex}`;
-        queryParams.push(endDate);
-        paramIndex++;
-      }
-
-      summaryQuery += `
-        GROUP BY DATE_TRUNC('month', a.date)
-        ORDER BY month_year DESC
-      `;
-
-      const summaryResult = await pool.query(summaryQuery, queryParams);
-
-      return NextResponse.json({
-        success: true,
-        type: 'summary',
-        data: summaryResult.rows,
-        summary: {
-          totalRecords: summaryResult.rows.length,
-          dateRange: { start: startDate, end: endDate }
-        }
-      }, { status: 200 });
-
-    } else {
-      // Detailed view
-      let detailedQuery = `
-        SELECT 
-          a.appointment_id,
-          p.patient_id,
-          p.name AS patient_name,
-          a.date AS appointment_date,
-          COALESCE(pay.amount, 0) AS total_payment,
-          COALESCE(ic.amount_approved, 0) AS insurance_covered,
-          COALESCE(pay.amount, 0) - COALESCE(ic.amount_approved, 0) AS out_of_pocket,
-          CASE 
-            WHEN COALESCE(pay.amount, 0) > 0 THEN 
-              (COALESCE(ic.amount_approved, 0) / pay.amount * 100)
-            ELSE 0 
-          END AS insurance_coverage_percentage,
-          ip.policy_name,
-          ip.coverage_percentage AS policy_coverage_rate,
-          ic.status AS claim_status,
-          ic.amount_claimed,
-          d.name AS doctor_name,
-          b.name AS branch_name
-        FROM appointment a
-        INNER JOIN patient p ON a.patient_id = p.patient_id
-        LEFT JOIN payment pay ON a.appointment_id = pay.appointment_id
+        INNER JOIN payment p ON a.appointment_id = p.appointment_id
         LEFT JOIN insurance_claim ic ON a.appointment_id = ic.appointment_id
-        LEFT JOIN insurance_policy ip ON p.insurance_id = ip.insurance_id
-        LEFT JOIN doctor d ON a.doctor_id = d.doctor_id
-        LEFT JOIN branch b ON a.branch_id = b.branch_id
-        WHERE (pay.amount IS NOT NULL OR ic.amount_approved IS NOT NULL)
-      `;
-
-      const queryParams = [];
-      let paramIndex = 1;
-
-      if (startDate) {
-        detailedQuery += ` AND a.date >= $${paramIndex}`;
-        queryParams.push(startDate);
-        paramIndex++;
-      }
-
-      if (endDate) {
-        detailedQuery += ` AND a.date <= $${paramIndex}`;
-        queryParams.push(endDate);
-        paramIndex++;
-      }
-
-      detailedQuery += ` ORDER BY a.date DESC`;
-
-      const detailedResult = await pool.query(detailedQuery, queryParams);
-
-      // Calculate summary statistics
-      const totalPayments = detailedResult.rows.reduce((sum, row) => sum + parseFloat(row.total_payment), 0);
-      const totalInsuranceCovered = detailedResult.rows.reduce((sum, row) => sum + parseFloat(row.insurance_covered), 0);
-      const totalOutOfPocket = detailedResult.rows.reduce((sum, row) => sum + parseFloat(row.out_of_pocket), 0);
-      const appointmentsWithInsurance = detailedResult.rows.filter(row => parseFloat(row.insurance_covered) > 0).length;
+        WHERE a.status = 'Completed'
+        ${startDate ? "AND a.date >= $1" : ""}
+        ${endDate ? `AND a.date <= $${startDate ? "2" : "1"}` : ""}
+        GROUP BY DATE_TRUNC('month', a.date)
+      )
+      SELECT 
+        to_char(month_year, 'YYYY-MM-DD') as month_year,
+        total_appointments,
+        total_payments::numeric(10,2),
+        total_insurance_covered::numeric(10,2),
+        total_out_of_pocket::numeric(10,2),
+        CASE 
+          WHEN total_payments > 0 THEN 
+            ROUND((total_insurance_covered / total_payments * 100)::numeric, 2)
+          ELSE 0 
+        END as coverage_percentage
+      FROM monthly_data
+      ORDER BY month_year;
+    `;
+
+    const queryParams = [];
+    if (startDate) queryParams.push(startDate);
+    if (endDate) queryParams.push(endDate);
+
+    console.log('Executing query with params:', queryParams); // Debug log
+
+    const result = await pool.query(query, queryParams);
+
+    console.log('Query results:', result.rows); // Debug log
+
+    const summary = {
+      total_appointments: result.rows.reduce((sum, row) => sum + Number(row.total_appointments), 0),
+      total_payments: result.rows.reduce((sum, row) => sum + Number(row.total_payments), 0),
+      total_insurance_covered: result.rows.reduce((sum, row) => sum + Number(row.total_insurance_covered), 0),
+      total_out_of_pocket: result.rows.reduce((sum, row) => sum + Number(row.total_out_of_pocket), 0),
+      avg_coverage_percentage: result.rows.length > 0
+        ? result.rows.reduce((sum, row) => sum + Number(row.coverage_percentage), 0) / result.rows.length
+        : 0
+    };
 
-      return NextResponse.json({
-        success: true,
-        type: 'detailed',
-        data: detailedResult.rows,
-        summary: {
-          totalAppointments: detailedResult.rows.length,
-          totalPayments: totalPayments,
-          totalInsuranceCovered: totalInsuranceCovered,
-          totalOutOfPocket: totalOutOfPocket,
-          appointmentsWithInsurance: appointmentsWithInsurance,
-          appointmentsWithoutInsurance: detailedResult.rows.length - appointmentsWithInsurance,
-          overallInsuranceCoveragePercentage: totalPayments > 0 ? (totalInsuranceCovered / totalPayments * 100) : 0,
-          dateRange: { start: startDate, end: endDate }
-        }
-      }, { status: 200 });
-    }
+    return NextResponse.json({
+      success: true,
+      data: result.rows,
+      summary
+    });
 
   } catch (error) {
-    console.error('Insurance coverage analysis error:', error);
-    return NextResponse.json({
-      success: false,
-      error: 'Failed to generate insurance coverage analysis',
-      details: error.message
-    }, { status: 500 });
+    console.error('Insurance analysis error:', error);
+    return NextResponse.json({ error: error.message }, { status: 500 });
   }
 }
\ No newline at end of file
diff --git a/src/app/reports/page.js b/src/app/reports/page.js
index 3a519af..bf5f485 100644
--- a/src/app/reports/page.js
+++ b/src/app/reports/page.js
@@ -1,696 +1,213 @@
 'use client';
-import Sidebar from '../components/Sidebar';
-import { useEffect, useState } from 'react';
-import { BarChart, LineChart, PieChart } from '../components/Chart';
 
-export default function ReportsPage() {
+import { useState, useEffect } from 'react';
+import { Chart as ChartJS } from 'chart.js/auto';
+import { Bar } from 'react-chartjs-2';
+import dynamic from 'next/dynamic';
+
+// Dynamic imports to prevent hydration mismatch
+const Sidebar = dynamic(() => import('../components/Sidebar'), { ssr: false });
+const ReportsTopBar = dynamic(() => import('../components/ReportsTopBar'), { ssr: false });
+
+export default function InsuranceClaimsReport() {
   const [collapsed, setCollapsed] = useState(false);
-  const [activeReport, setActiveReport] = useState(null);
-  const [reportData, setReportData] = useState(null);
-  const [filters, setFilters] = useState({
-    date: '',
-    startDate: '',
-    endDate: '',
-    branchId: '',
-    doctorId: '',
-  });
-  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
-  const [userRole, setUserRole] = useState('');
+  const [dateRange, setDateRange] = useState({
+    startDate: '2025-01-01',
+    endDate: '2025-12-31'
+  });
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const role = localStorage.getItem('role');
-      setUserRole(role || '');
-      
-      // Redirect receptionists away from reports
-      if (role === 'reception') {
-        window.location.href = '/dashboard';
-        return;
-      }
-    }
-  }, []);
+    fetchData();
+  }, [dateRange]);
 
-  // Only show doctor revenue report for doctors
-  const reports = userRole === 'doctor'
-    ? [
-        {
-          id: 'doctor-revenue',
-          title: 'Doctor Revenue Report',
-          description: 'Revenue and patient counts by doctor',
-          icon: '👨‍⚕️',
-          endpoint: '/api/reports/doctor-revenue',
-          type: 'date-range'
-        }
-      ]
-    : [
-        {
-          id: 'branch-revenue',
-          title: 'Branch Revenue Report',
-          description: 'Revenue breakdown by branch',
-          icon: '🏢',
-          endpoint: '/api/reports/branch-revenue',
-          type: 'date-range'
-        },
-        {
-          id: 'doctor-revenue',
-          title: 'Doctor Revenue Report',
-          description: 'Revenue and patient counts by doctor',
-          icon: '👨‍⚕️',
-          endpoint: '/api/reports/doctor-revenue',
-          type: 'date-range'
-        },
-        {
-          id: 'insurance-claims',
-          title: 'Insurance Analysis Report',
-          description: 'Insurance coverage vs out-of-pocket analysis',
-          icon: '🛡️',
-          endpoint: '/api/reports/insurance-analysis',
-          type: 'date-range'
-        }
-      ];
-
-  // Fetch report data dynamically based on active report
-  const fetchReport = async (reportId) => {
-    if (!reportId) return;
-    
-    const selected = reports.find(r => r.id === reportId);
-    if (!selected) return;
-
-    setLoading(true);
-    setError('');
-    setReportData(null);
-    
+  async function fetchData() {
     try {
-      let url = selected.endpoint;
-      const params = new URLSearchParams();
-      
-      if (selected.type === 'date-range') {
-        if (filters.startDate) params.append('startDate', filters.startDate);
-        if (filters.endDate) params.append('endDate', filters.endDate);
-      }
+      setLoading(true);
+      setError('');
+      const params = new URLSearchParams(dateRange);
+      const res = await fetch(`/api/reports/insurance-analysis?${params}`);
       
-      // Special handling for insurance-analysis API
-      if (selected.id === 'insurance-claims') {
-        params.append('type', 'summary');
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`);
       }
       
-      if (filters.branchId) params.append('branchId', filters.branchId);
-      if (filters.doctorId) params.append('doctorId', filters.doctorId);
+      const result = await res.json();
       
-      if (params.toString()) {
-        url += '?' + params.toString();
-      }
-
-      const res = await fetch(url);
-      if (!res.ok) {
-        throw new Error(`Failed to fetch ${selected.title}: ${res.status}`);
+      if (result.success && result.data) {
+        console.log('Fetched data:', result.data); // Debug log
+        setData(result.data);
+      } else {
+        throw new Error(result.error || 'Failed to load data');
       }
-      
-      const data = await res.json();
-      setReportData(data);
     } catch (err) {
-      console.error('Report fetch error:', err);
-      setError(err.message);
-      setReportData(null);
+      console.error('Fetch error:', err);
+      setError(err.message || 'Failed to fetch report data');
+      setData([]);
     } finally {
       setLoading(false);
     }
+  }
+
+  const chartData = {
+    labels: data.map(item => new Date(item.month_year).toLocaleDateString('en-US', { 
+      year: 'numeric', 
+      month: 'short' 
+    })),
+    datasets: [
+      {
+        label: 'Insurance Covered',
+        data: data.map(item => Number(item.total_insurance_covered || 0)),
+        backgroundColor: 'rgba(34,197,94,0.7)',
+        borderColor: 'rgba(34,197,94,1)',
+        borderWidth: 1,
+        stack: 'stack0'
+      },
+      {
+        label: 'Out of Pocket',
+        data: data.map(item => Number(item.total_out_of_pocket || 0)),
+        backgroundColor: 'rgba(239,68,68,0.7)',
+        borderColor: 'rgba(239,68,68,1)',
+        borderWidth: 1,
+        stack: 'stack0'
+      }
+    ]
   };
 
-  // Renders charts and tables for each report type
-  const renderReportData = () => {
-    if (!activeReport) {
-      return (
-        <div className="bg-white rounded-2xl shadow-lg p-8 text-center border border-gray-100">
-          <div className="text-gray-400 mb-4">
-            <svg className="w-20 h-20 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-            </svg>
-          </div>
-          <h3 className="text-xl font-medium text-gray-600 mb-2">Select a Report</h3>
-          <p className="text-gray-500">Choose a report from the available options to view analytics and insights</p>
-        </div>
-      );
-    }
-
-    if (loading) {
-      return (
-        <div className="bg-white rounded-2xl shadow-lg p-8 text-center border border-gray-100">
-          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-emerald-600 mx-auto mb-4"></div>
-          <p className="text-gray-600 font-medium">Generating report...</p>
-        </div>
-      );
-    }
-
-    if (error) {
-      return (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-6 py-4 rounded-2xl shadow-lg">
-          <div className="flex items-center">
-            <svg className="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <div>
-              <h4 className="font-medium">Report Error</h4>
-              <p className="text-sm">{error}</p>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    if (!reportData || !reportData.data || reportData.data.length === 0) {
-      return (
-        <div className="bg-white rounded-2xl shadow-lg p-8 text-center border border-gray-100">
-          <div className="text-gray-400 mb-4">
-            <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-medium text-gray-600 mb-2">No Data Available</h3>
-          <p className="text-gray-500">There is no data to display for the selected report and filters.</p>
-        </div>
-      );
-    }
-
-    switch (activeReport) {
-      case 'branch-revenue': {
-        // reportData is an array directly from the API
-        const data = Array.isArray(reportData) ? reportData : [];
-        
-        const chartData = {
-          labels: data.map(b => b.branch_name || 'Unknown Branch'),
-          datasets: [
-            {
-              label: 'Total Revenue (Rs.)',
-              data: data.map(b => Number(b.total_revenue) || 0),
-              backgroundColor: 'rgba(34,197,94,0.8)',
-              borderColor: 'rgba(34,197,94,1)',
-              borderWidth: 1
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { 
+        position: 'top',
+        labels: {
+          padding: 20,
+          font: { size: 12 }
+        }
+      },
+      title: { 
+        display: true, 
+        text: 'Insurance Coverage vs Out of Pocket Expenses',
+        font: { size: 16, weight: 'bold' },
+        padding: { bottom: 30 }
+      },
+      tooltip: {
+        callbacks: {
+          label: function(context) {
+            let label = context.dataset.label || '';
+            if (label) {
+              label += ': ';
             }
-          ]
-        };
-
-        const chartOptions = {
-          responsive: true,
-          plugins: {
-            legend: { position: 'top' },
-            title: { display: true, text: 'Revenue by Branch' }
-          },
-          scales: {
-            y: { beginAtZero: true }
-          }
-        };
-
-        const totalRevenue = data.reduce((sum, branch) => sum + (Number(branch.total_revenue) || 0), 0);
-        const avgRevenue = data.length > 0 ? totalRevenue / data.length : 0;
-
-        return (
-          <div className="space-y-6">
-            {/* Summary Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div className="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl p-6 text-white shadow-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-emerald-100 text-sm font-medium">Total Revenue</p>
-                    <p className="text-3xl font-bold mt-1">Rs. {totalRevenue.toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">💰</span>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Total Branches</p>
-                    <p className="text-3xl font-bold text-gray-900 mt-1">{data.length}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">🏢</span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Avg Revenue</p>
-                    <p className="text-3xl font-bold text-gray-900 mt-1">Rs. {Math.round(avgRevenue).toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">📊</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Chart */}
-            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-              <BarChart data={chartData} options={chartOptions} />
-            </div>
-
-            {/* Table */}
-            <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
-              <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
-                <h3 className="text-lg font-semibold text-gray-900">Branch Revenue Details</h3>
-              </div>
-              <div className="overflow-x-auto">
-                <table className="min-w-full">
-                  <thead className="bg-gray-50">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch</th>
-                      <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Appointments</th>
-                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total Revenue</th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
-                    {data.map((branch, i) => (
-                      <tr key={i} className="hover:bg-gray-50">
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{branch.branch_name || 'Unknown'}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">{branch.appointment_count || 0}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-emerald-600">Rs. {(Number(branch.total_revenue) || 0).toLocaleString()}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        );
-      }
-
-      case 'doctor-revenue': {
-        // reportData is an array directly from the API  
-        const data = Array.isArray(reportData) ? reportData : [];
-        
-        const chartData = {
-          labels: data.map(d => d.doctor_name || 'Unknown Doctor'),
-          datasets: [
-            {
-              label: 'Revenue (Rs.)',
-              data: data.map(d => Number(d.doctor_revenue) || 0),
-              backgroundColor: 'rgba(59,130,246,0.8)',
-              borderColor: 'rgba(59,130,246,1)',
-              borderWidth: 1
+            if (context.parsed.y !== null) {
+              label += `Rs. ${context.parsed.y.toLocaleString()}`;
             }
-          ]
-        };
-
-        const chartOptions = {
-          responsive: true,
-          plugins: {
-            legend: { position: 'top' },
-            title: { display: true, text: 'Revenue by Doctor' }
-          },
-          scales: {
-            y: { beginAtZero: true }
+            return label;
           }
-        };
-
-        const totalRevenue = data.reduce((sum, doctor) => sum + (Number(doctor.doctor_revenue) || 0), 0);
-        const totalPatients = data.reduce((sum, doctor) => sum + (Number(doctor.total_appointments) || 0), 0);
-
-        return (
-          <div className="space-y-6">
-            {/* Summary Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-blue-100 text-sm font-medium">Total Revenue</p>
-                    <p className="text-3xl font-bold mt-1">Rs. {totalRevenue.toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">💰</span>
-                  </div>
-                </div>
-              </div>
-              
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Active Doctors</p>
-                    <p className="text-3xl font-bold text-gray-900 mt-1">{data.length}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">👨‍⚕️</span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Total Appointments</p>
-                    <p className="text-3xl font-bold text-gray-900 mt-1">{totalPatients.toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">�</span>
-                  </div>
-                </div>
-              </div>
-            </div>
+        }
+      }
+    },
+    scales: {
+      x: {
+        stacked: true,
+        title: {
+          display: true,
+          text: 'Month',
+          font: { size: 12, weight: 'bold' }
+        },
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        stacked: true,
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: 'Amount (Rs.)',
+          font: { size: 12, weight: 'bold' }
+        }
+      }
+    }
+  };
 
-            {/* Chart */}
-            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-              <BarChart data={chartData} options={chartOptions} />
-            </div>
+  // Calculate summary statistics
+  const summary = {
+    totalPayments: data.reduce((sum, item) => sum + Number(item.total_payments || 0), 0),
+    totalInsurance: data.reduce((sum, item) => sum + Number(item.total_insurance_covered || 0), 0),
+    totalOutOfPocket: data.reduce((sum, item) => sum + Number(item.total_out_of_pocket || 0), 0),
+    averageCoverage: data.length ? 
+      (data.reduce((sum, item) => sum + Number(item.total_insurance_covered || 0), 0) / 
+       data.reduce((sum, item) => sum + Number(item.total_payments || 0), 0) * 100).toFixed(1) : 0
+  };
 
-            {/* Table */}
-            <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
-              <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
-                <h3 className="text-lg font-semibold text-gray-900">Doctor Revenue Details</h3>
-              </div>
-              <div className="overflow-x-auto">
-                <table className="min-w-full">
-                  <thead className="bg-gray-50">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Doctor</th>
-                      <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Appointments</th>
-                      <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</th>
-                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th>
-                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Outstanding</th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
-                    {data.map((doctor, i) => (
-                      <tr key={i} className="hover:bg-gray-50">
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Dr. {doctor.doctor_name}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">{doctor.total_appointments || 0}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">{doctor.completed_appointments || 0}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-blue-600">Rs. {(Number(doctor.doctor_revenue) || 0).toLocaleString()}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-red-600">Rs. {(Number(doctor.outstanding_amount) || 0).toLocaleString()}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+  return (
+    <div className="flex bg-gray-100 min-h-screen">
+      <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
+      
+      <main className={`flex-grow transition-all duration-300 ${collapsed ? 'ml-16' : 'ml-64'}`}>
+        <ReportsTopBar currentPage="insurance-claims" />
+        
+        <div className="p-6 space-y-6">
+          <div className="bg-white rounded-lg shadow-lg p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-2xl font-bold text-gray-800">Insurance Analysis Report</h2>
+              <div className="flex gap-4">
+                <input
+                  type="date"
+                  value={dateRange.startDate}
+                  onChange={(e) => setDateRange(prev => ({ ...prev, startDate: e.target.value }))}
+                  className="border rounded px-3 py-2"
+                />
+                <input
+                  type="date"
+                  value={dateRange.endDate}
+                  onChange={(e) => setDateRange(prev => ({ ...prev, endDate: e.target.value }))}
+                  className="border rounded px-3 py-2"
+                />
               </div>
             </div>
-          </div>
-        );
-      }
 
-      case 'insurance-claims': {
-        // Need to update the API endpoint to use insurance-analysis
-        const data = Array.isArray(reportData) ? reportData : [];
-        
-        const chartData = {
-          labels: data.map(c => {
-            if (c.month_year) {
-              const date = new Date(c.month_year);
-              return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
-            }
-            return 'Unknown';
-          }),
-          datasets: [
-            {
-              label: 'Total Appointments',
-              data: data.map(c => Number(c.total_appointments) || 0),
-              backgroundColor: 'rgba(59,130,246,0.8)',
-              borderColor: 'rgba(59,130,246,1)',
-              borderWidth: 1
-            },
-            {
-              label: 'Insurance Covered (Rs.)',
-              data: data.map(c => Number(c.total_insurance_covered) || 0),
-              backgroundColor: 'rgba(139,92,246,0.8)',
-              borderColor: 'rgba(139,92,246,1)',
-              borderWidth: 1
-            }
-          ]
-        };
-
-        const chartOptions = {
-          responsive: true,
-          plugins: {
-            legend: { position: 'top' },
-            title: { display: true, text: 'Insurance Analysis by Month' }
-          },
-          scales: {
-            y: { beginAtZero: true }
-          }
-        };
-
-        const totalPayments = data.reduce((sum, item) => sum + (Number(item.total_payments) || 0), 0);
-        const totalInsurance = data.reduce((sum, item) => sum + (Number(item.total_insurance_covered) || 0), 0);
-        const totalOutOfPocket = data.reduce((sum, item) => sum + (Number(item.total_out_of_pocket) || 0), 0);
-        const avgCoverage = data.length > 0 ? (totalInsurance / totalPayments * 100) : 0;
-
-        return (
-          <div className="space-y-6">
             {/* Summary Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-              <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white shadow-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-purple-100 text-sm font-medium">Total Payments</p>
-                    <p className="text-2xl font-bold mt-1">Rs. {totalPayments.toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">�</span>
-                  </div>
-                </div>
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <h3 className="text-sm font-medium text-blue-600">Total Payments</h3>
+                <p className="text-2xl font-bold">Rs. {summary.totalPayments.toLocaleString()}</p>
               </div>
-              
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Insurance Covered</p>
-                    <p className="text-2xl font-bold text-gray-900 mt-1">Rs. {totalInsurance.toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">🛡️</span>
-                  </div>
-                </div>
+              <div className="bg-green-50 p-4 rounded-lg">
+                <h3 className="text-sm font-medium text-green-600">Insurance Covered</h3>
+                <p className="text-2xl font-bold">Rs. {summary.totalInsurance.toLocaleString()}</p>
               </div>
-
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Out of Pocket</p>
-                    <p className="text-2xl font-bold text-gray-900 mt-1">Rs. {totalOutOfPocket.toLocaleString()}</p>
-                  </div>
-                  <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">�</span>
-                  </div>
-                </div>
+              <div className="bg-red-50 p-4 rounded-lg">
+                <h3 className="text-sm font-medium text-red-600">Out of Pocket</h3>
+                <p className="text-2xl font-bold">Rs. {summary.totalOutOfPocket.toLocaleString()}</p>
               </div>
-
-              <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-gray-600 text-sm font-medium">Coverage Rate</p>
-                    <p className="text-2xl font-bold text-gray-900 mt-1">{avgCoverage.toFixed(1)}%</p>
-                  </div>
-                  <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
-                    <span className="text-2xl">�</span>
-                  </div>
-                </div>
+              <div className="bg-purple-50 p-4 rounded-lg">
+                <h3 className="text-sm font-medium text-purple-600">Average Coverage</h3>
+                <p className="text-2xl font-bold">{summary.averageCoverage}%</p>
               </div>
             </div>
 
             {/* Chart */}
-            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-              <BarChart data={chartData} options={chartOptions} />
-            </div>
-
-            {/* Table */}
-            <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
-              <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
-                <h3 className="text-lg font-semibold text-gray-900">Monthly Insurance Analysis</h3>
-              </div>
-              <div className="overflow-x-auto">
-                <table className="min-w-full">
-                  <thead className="bg-gray-50">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Month</th>
-                      <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Appointments</th>
-                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total Payments</th>
-                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Insurance</th>
-                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Out of Pocket</th>
-                      <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Coverage %</th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
-                    {data.map((item, i) => (
-                      <tr key={i} className="hover:bg-gray-50">
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                          {item.month_year ? new Date(item.month_year).toLocaleDateString('en-US', { year: 'numeric', month: 'long' }) : 'Unknown'}
-                        </td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">{item.total_appointments || 0}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-gray-900">Rs. {(Number(item.total_payments) || 0).toLocaleString()}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-green-600">Rs. {(Number(item.total_insurance_covered) || 0).toLocaleString()}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-orange-600">Rs. {(Number(item.total_out_of_pocket) || 0).toLocaleString()}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-center">
-                          <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
-                            {(Number(item.overall_insurance_coverage_percentage) || 0).toFixed(1)}%
-                          </span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+            {loading ? (
+              <div className="h-96 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
               </div>
-            </div>
-          </div>
-        );
-      }
-
-      default:
-        return (
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center border border-gray-100">
-            <div className="text-gray-400 mb-4">
-              <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-              </svg>
-            </div>
-            <h3 className="text-lg font-medium text-gray-600 mb-2">Report Under Development</h3>
-            <p className="text-gray-500">This report visualization is currently being developed.</p>
-          </div>
-        );
-    }
-  };
-
-  return (
-    <div className="flex bg-gray-50 min-h-screen w-full">
-      {/* Fixed Sidebar */}
-      <div className="fixed top-0 left-0 h-screen z-30">
-        <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
-      </div>
-      
-      {/* Main Content */}
-      <main
-        className={`flex-grow flex flex-col p-8 transition-all duration-300 ${collapsed ? 'ml-16' : 'ml-64'} min-w-0 w-full`}
-        style={{ minWidth: 0 }}
-      >
-        <div className="max-w-7xl mx-auto w-full">
-          {/* Header */}
-          <div className="mb-8">
-            <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center gap-3">
-              <span className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg text-white text-2xl">📊</span>
-              Management Reports
-            </h1>
-            <p className="text-gray-600 text-lg">Comprehensive business intelligence and analytics</p>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {/* Report Selection Panel */}
-            <div className="lg:col-span-1">
-              <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 sticky top-8">
-                <h2 className="text-xl font-semibold mb-6 text-gray-800 flex items-center gap-2">
-                  <span className="text-2xl">📋</span>
-                  Available Reports
-                </h2>
-                
-                <div className="space-y-3">
-                  {reports.map((report) => (
-                    <div 
-                      key={report.id} 
-                      className={`border rounded-xl p-4 cursor-pointer transition-all duration-200 ${
-                        activeReport === report.id 
-                          ? 'bg-gradient-to-r from-blue-50 to-purple-50 border-blue-300 shadow-md ring-2 ring-blue-200' 
-                          : 'hover:bg-gray-50 hover:shadow-sm border-gray-200 hover:border-gray-300'
-                      }`}
-                      onClick={() => setActiveReport(report.id)}
-                    >
-                      <div className="flex items-start gap-3">
-                        <span className="text-2xl">{report.icon}</span>
-                        <div className="flex-1">
-                          <h3 className="font-medium text-gray-900 mb-1">{report.title}</h3>
-                          <p className="text-sm text-gray-600">{report.description}</p>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Filters Panel */}
-                {activeReport && reports.find(r => r.id === activeReport)?.type === 'date-range' && (
-                  <div className="mt-8 pt-6 border-t border-gray-200">
-                    <h3 className="text-lg font-semibold mb-4 text-gray-800 flex items-center gap-2">
-                      <span className="text-xl">🔍</span>
-                      Filters
-                    </h3>
-                    <div className="space-y-4">
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
-                        <input
-                          type="date"
-                          value={filters.startDate}
-                          onChange={(e) => setFilters(prev => ({...prev, startDate: e.target.value}))}
-                          className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                        />
-                      </div>
-                      
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">End Date</label>
-                        <input
-                          type="date"
-                          value={filters.endDate}
-                          onChange={(e) => setFilters(prev => ({...prev, endDate: e.target.value}))}
-                          className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                        />
-                      </div>
-                      
-                      <button
-                        onClick={() => fetchReport(activeReport)}
-                        disabled={loading}
-                        className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-4 rounded-lg hover:from-blue-700 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 font-medium shadow-md flex items-center justify-center gap-2"
-                      >
-                        {loading ? (
-                          <>
-                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                            Generating...
-                          </>
-                        ) : (
-                          <>
-                            <span>📈</span>
-                            Generate Report
-                          </>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                )}
+            ) : error ? (
+              <div className="h-96 flex items-center justify-center text-red-500">{error}</div>
+            ) : data.length === 0 ? (
+              <div className="h-96 flex items-center justify-center text-gray-500">
+                No data available for selected period
               </div>
-            </div>
-
-            {/* Report Display Panel */}
-            <div className="lg:col-span-2">
-              <div className="space-y-6">
-                {activeReport && (
-                  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-                    <div className="flex items-center justify-between mb-6">
-                      <div className="flex items-center gap-3">
-                        <span className="text-3xl">{reports.find(r => r.id === activeReport)?.icon}</span>
-                        <div>
-                          <h2 className="text-2xl font-bold text-gray-900">
-                            {reports.find(r => r.id === activeReport)?.title}
-                          </h2>
-                          <p className="text-gray-600">
-                            {reports.find(r => r.id === activeReport)?.description}
-                          </p>
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => window.print()}
-                        className="bg-gradient-to-r from-gray-600 to-gray-700 text-white px-4 py-2 rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all duration-200 font-medium shadow-md flex items-center gap-2"
-                      >
-                        <span>🖨️</span>
-                        Print
-                      </button>
-                    </div>
-                  </div>
-                )}
-                
-                {renderReportData()}
+            ) : (
+              <div className="h-96">
+                <Bar data={chartData} options={chartOptions} />
               </div>
-            </div>
+            )}
           </div>
         </div>
       </main>
     </div>
   );
-}
+}
\ No newline at end of file