policy1.jsx

import React, { Component } from 'react';
import './Layout.css';
import './pages.css';
import Tabs from './Tabs';
import Sidebar from './Sidebar';

class Policy extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: '', // Initialize the selected option state
      policyData: null,   // Initialize the state for policy data
      error: null,        // Initialize the state for errors
    };
  }

  // Function to fetch policy data from the second API
  fetchPolicyData = () => {
    // Replace 'your-second-api-endpoint' with the actual URL of the second API.
    fetch('http://192.0.1.23:5000/scheme?id=12020')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        // Update the policyData state with the fetched data
        this.setState({ policyData: data, error: null });
        console.log('Fetched Data:', data);
      })
      .catch((error) => {
        // Handle errors here
        this.setState({ error: 'There was a problem fetching policy data: ' + error.message });
      });
  };

  componentDidMount() {
    // Fetch policy data when the component mounts
    this.fetchPolicyData();
  }

  render() {
    const tabNames = [
      'Details',
      'Rules',
      'Providers',
      'Insurers',
      'Inclusions and Exclusions',
      'Benefits',
      'Family Structure',
      'Self Fund Payment',
      'SLAs',
    ];

    const { policyData, error } = this.state;

    return (
      <>
        <section className='Layout'>
          {/* ... Your existing JSX code ... */}
          {/* Add the code to display policy data */}
          <div className='main-content'>
            <Tabs tabNames={tabNames} />
            {error ? (
              <p>Error: {error}</p>
            ) : policyData ? (
              <div>
                {/* Display policy data here */}
                <h2>Policy Information</h2>
                <p>Policy Holder: {policyData.policyHolder}</p>
                <p>Policy Number: {policyData.policyNumber}</p>
                {/* Add more fields as needed */}
              </div>
            ) : (
              <p>Loading policy data...</p>
            )}
          </div>
        </section>
      </>
    );
  }
}

export default Policy;