dashboard/src/views/KPI.jsx

import { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Row, Col, Tabs } from 'antd';
import { KPIObjects } from './../libs/ht';
import BUPanel from './../components/kpi/BUPanel';
import OverviewPanel from './../components/kpi/OverviewPanel';
import './kpi.css';

const objectComponents = {
  'overview': OverviewPanel,
  'bu': BUPanel,
  'dept': BUPanel,
  'du': BUPanel,
  'operator': BUPanel,
  'destination': BUPanel,
  'country': BUPanel,
};
export default observer((props) => {
  // useEffect(() => {
  //   return () => {};
  // }, []);
  const [curObject, setCurObject] = useState('overview');
  const onObjectChange = (object) => {
    setCurObject(object);
  };
  return (
    <>
      <Row>
        <Col span={24}>
          <Tabs
            onChange={onObjectChange}
            type="card"
            items={KPIObjects.map((ele, i) => {
              const ItemComponent = objectComponents[ele.key];
              return {
                ...ele,
                children: <ItemComponent title={ele.label} {...{ curObject }} />,
              };
            })}
          />
        </Col>
      </Row>
    </>
  );
});