issue1

policy.jsx

import React, { Component } from 'react';
import './Layout.css';
import './pages.css';
import Tabs from './Tabs';
import Layout from './Layout';
import { connect } from 'react-redux';
import { setData } from '../actions/schemeActions';

class Policy extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedOption: '',

      };
    }

    // Event handler to handle select change
    handleSelectChange = (event) => {
      this.setState({ selectedOption: event.target.value });
    };
    componentDidMount() {
      const accessToken = localStorage.getItem('accessToken');
      console.log(accessToken)

          fetch('http://192.0.1.23:5000/scheme?id=8280', {
            headers: {
              Authorization: `${accessToken}`,

            },
          })
            .then((response) => response.json())
            .then((data) => {
              this.props.setData(data);
              console.log(data)
            })
            .catch((error) => {
              console.error('Error fetching data from protected API:', error);
            });
    }

    render() {
      const { data } = this.props;

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

      return (
       <>
       <Layout >
       <div className='main-header'>
        <div className='policy-section'>

           <select id="mySelect">
              <option value="option1">Policy 1</option>
              <option value="option2">Policy 2</option>
              <option value="option3">Policy 3</option>
              <option value="option4">Policy 4</option>
           </select>

           <div className='policy-number'>
              <span>Policy Number</span>
           </div>
        </div>


          <select id="mySelect">
              <option value="option1">Scheme 1</option>
              <option value="option2">Scheme 2</option>
              <option value="option3">Scheme 3</option>
              <option value="option4">Scheme 4</option>
           </select>


        <div className='scheme-section'>

            <div className='scheme-name'>
            <span>Scheme Name</span>
            </div>

            <div className='scheme-company-duration'>
              <span>{data.startDate} to </span> //data.startDate works
            </div>
          </div>
        </div>


        <div className='main-content'>
          <Tabs tabNames={tabNames} data={this.props.data}/>
        </div>
       </Layout>
       </>
      );
    }
  }
  const mapStateToProps = (state) => ({
    data: state.scheme.data,
  });

  const mapDispatchToProps = {
    setData,
  };

  export default connect(mapStateToProps, mapDispatchToProps)(Policy);
-------------------------------------------------------------------------------------------------------------------

Tabs.jsx

import React, { useState } from 'react';
import Rules from './PolicyTabs/Rules';
import Details from './PolicyTabs/Details'
import { Link } from 'react-router-dom';
import './pages.css';
import Providers from './PolicyTabs/Providers';
import Insurers from './PolicyTabs/Insurers';
import IncExclusions from './PolicyTabs/IncExclusions';
import Benefits from './PolicyTabs/Benefits';
import FamilyStructure from './PolicyTabs/FamilyStructure';
import FundPayment from './PolicyTabs/FundPayment';
import SLA from './PolicyTabs/SLA';

const Tab = ({ label, isActive, onClick}) => (
  <div
    className={`tab ${isActive ? 'active' : ''}`}
    onClick={onClick}
  >
    {label}
  </div>
);

const tabComponents = [

    <Details data={data}/>,
    <Rules />,
    <Providers />,
    <Insurers />,
    <IncExclusions />,
    <Benefits />,
    <FamilyStructure />,
    <FundPayment />,
    <SLA />,
  ];

const Tabs = ({ tabNames, data }) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };


  return (
    <div className="tabs-container">
      <div className="tabs">
        {tabNames.map((tab, index) => (
          <Link key={index} to={tab.toLowerCase()}>
            <Tab
              label={tab}
              isActive={index === activeTab}
              onClick={() => handleTabClick(index)}
            />
          </Link>
        ))}
      </div>
      <div className="tab-content">
        {tabComponents[activeTab]}
      </div>
    </div>
  );
};

export default Tabs;
-------------------------------------------------------------------------------------------
import React from 'react';
import './policytabs.css';

const Details = ({ data }) => {
  return (
    <>
    <div className='scheme-div'>
      <div className='content-div'>Scheme Type</div>
      {/* <div className='content-div'>{data.schemeType}</div> */}
    </div>
    <div className='scheme-div'>
      <div className='content-div'>Start Date</div>
      {/* <div className='content-div'>{data.endDate}</div> */}
    </div>
    <div className='scheme-div'>
      <div className='content-div'>End Date</div>
      {/* <div className='content-div'>{data.endDate}</div> */}
    </div>
    <div className='scheme-div'>
     <div className='content-div'> Scheme Handler</div>
      <div className='content-div'>{data.name}</div> //data.name doesn't show
    </div>
    </>
  )
}

export default Details
-----------------------------------------------------------------------------------------
schemeSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  data: {
    startDate: '',
    endDate: '',
    name:'',
    // other properties...
  },
};


const schemeSlice = createSlice({
  name: 'scheme',
  initialState,
  reducers: {
    setData: (state, action) => {
      state.data = action.payload;
    },

  },
});

export const { setData } = schemeSlice.actions;
export default schemeSlice.reducer;