text: import React from "react";
  // node.js library that concatenates classes (strings)
  import classnames from "classnames";
  // javascipt plugin for creating charts
  import Chart from "chart.js";
  // react plugin used to create charts
  import { Line, Bar } from "react-chartjs-2";
  // reactstrap components
  import {
    Button,
    Card,
    CardHeader,
    CardBody,
    NavItem,
    NavLink,
    Nav,
    Progress,
    Table,
    Container,
    Row,
    Col,
  } from "reactstrap";
  
  // core components
  import {
    chartOptions,
    parseOptions,
    chartExample1,
    chartExample2,
  } from "variables/charts.js";
  
  import Header from "components/Headers/Header.js";
  import CreateMerchants from "./examples/CreateMerchantsModal";
  import CreateVerticals from "./examples/CreateVerticalsModal";
  import CreateInsuranceModal from "./examples/CreateInsuranceModal";
  
  class Index extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        activeNav: 1,
        chartExample1Data: "data1",
      };
      if (window.Chart) {
        parseOptions(Chart, chartOptions());
      }
    }
    toggleNavs = (e, index) => {
      e.preventDefault();
      this.setState({
        activeNav: index,
        chartExample1Data:
          this.state.chartExample1Data === "data1" ? "data2" : "data1",
      });
    };
    render() {
      return (
        <>
          <Header />
          {/* Page content */}
          <Container className="mt--7" fluid>
            <Row>
              <Col className="mb-5 mb-xl-0" xl="8">
                <Card className="bg-gradient-default shadow">
                  <CardHeader className="bg-transparent">
                    <Row className="align-items-center">
                      <div className="col">
                        <h6 className="text-uppercase text-light ls-1 mb-1">
                          Overview
                        </h6>
                        <h2 className="text-white mb-0">Transactions</h2>
                      </div>
                      <div className="col">
                        <Nav className="justify-content-end" pills>
                          <NavItem>
                            <NavLink
                              className={classnames("py-2 px-3", {
                                active: this.state.activeNav === 1,
                              })}
                              href="#woozeee"
                              onClick={(e) => this.toggleNavs(e, 1)}
                            >
                              <span className="d-none d-md-block">Month</span>
                              <span className="d-md-none">M</span>
                            </NavLink>
                          </NavItem>
                          <NavItem>
                            <NavLink
                              className={classnames("py-2 px-3", {
                                active: this.state.activeNav === 2,
                              })}
                              data-toggle="tab"
                              href="#woozeee"
                              onClick={(e) => this.toggleNavs(e, 2)}
                            >
                              <span className="d-none d-md-block">Week</span>
                              <span className="d-md-none">W</span>
                            </NavLink>
                          </NavItem>
                        </Nav>
                      </div>
                    </Row>
                  </CardHeader>
                  <CardBody>
                    {/* Chart */}
                    <div className="chart">
                      <Line
                        data={chartExample1[this.state.chartExample1Data]}
                        options={chartExample1.options}
                        getDatasetAtEvent={(e) => console.log(e)}
                      />
                    </div>
                  </CardBody>
                </Card>
              </Col>
              <Col xl="4">
                <Card className="shadow mb-4">
                  <CardHeader className="bg-transparent">
                    <Row className="align-items-center">
                      <div className="col">
                        <h2 className="mb-0">Merchants</h2>
                      </div>
                      <Col className="col-auto">
                        <CreateMerchants/>
                      </Col>
                    </Row>
                  </CardHeader>
                </Card>
                <Card className="shadow mb-4">
                  <CardHeader className="bg-transparent">
                    <Row className="align-items-center">
                      <div className="col">
                        <h2 className="mb-0">Verticals</h2>
                      </div>
                      <Col className="col-auto">
                        <CreateVerticals/>
                      </Col>
                    </Row>
                  </CardHeader>
                </Card>
  
                <Card className="shadow mb-4">
                  <CardHeader className="bg-transparent">
                    <Row className="align-items-center">
                      <div className="col">
                        <h2 className="mb-0">Airline</h2>
                      </div>
                      <Col className="col-auto">
                        <Button color="danger" type="button" style={{backgroundColor: '#FF5757'}}>
                          Add New Airline
                        </Button>
                      </Col>
                    </Row>
                  </CardHeader>
                </Card>
  
                <Card className="shadow mb-4">
                  <CardHeader className="bg-transparent">
                    <Row className="align-items-center">
                      <div className="col">
                        <h2 className="mb-0">Insurance</h2>
                      </div>
                      <Col className="col-auto">
                        <CreateInsuranceModal />
                      </Col>
                    </Row>
                  </CardHeader>
                </Card>
              </Col>
            </Row>
          </Container>
        </>
      );
    }
  }
  
  export default Index;
  