text: import React from "react";
  import { Link } from "react-router-dom";
  //Bootstrap and jQuery libraries
  import "bootstrap/dist/css/bootstrap.min.css";
  import "jquery/dist/jquery.min.js";
  import "./Style.css";
  //Datatable Modules
  import "datatables.net-dt/js/dataTables.dataTables";
  import "datatables.net-dt/css/jquery.dataTables.min.css";
  import "font-awesome/css/font-awesome.min.css";
  import DateRangePicker from "react-bootstrap-daterangepicker";
  import $ from "jquery";
  class LeadDashboard extends React.Component {
    componentDidMount() {
      //initialize datatable
      $(document).ready(function () {
        $("#example").DataTable();
      });
    }
    render() {
      return (
        <section className="content">
          <div className="col-xs-12">
            <div className="box">
              <div className="box-header d-flexi">
                <h3 className="box-title"></h3>
                <div className="dataTables_length" id="example1_length"></div>
              </div>
              <div className="box-body">
                <div className="tab-content">
                  <div className="row">
                    <div className="col-md-3 col-sm-3 col-xs-12">
                      <Link to={"/lead-management"}>
                        <div className="info-box inr-card">
                          <div className="icon-dv">
                            <span className="info-box-number">20</span>
                          </div>
                          <div className="info-box-content">
                            <span className="as-role">Today Leads</span>
                            <div className="inr-data role-box">
                              <div
                                className="col-md-4 border-right"
                                style={{ padding: "0" }}
                              >
                                <span className="">New</span>
                                <span className="info-box-number lead-label">
                                  10
                                </span>
                              </div>
                              <div
                                className="col-md-4 border-right"
                                style={{ padding: "0px 5px 0px" }}
                              >
                                <span className="">FollowUp</span>
                                <span className="info-box-number lead-label">
                                  5
                                </span>
                              </div>
                              <div
                                className="col-md-4 inactive"
                                style={{ padding: "0" }}
                              >
                                <span className="">Converted</span>
                                <span className="info-box-number lead-label">
                                  5
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </Link>
                    </div>
                    <div className="col-md-3 col-sm-6 col-xs-12">
                      <Link to={"/lead-management"}>
                        <div className="info-box inr-card">
                          <div className="icon-dv">
                            <span className="info-box-number">50</span>
                          </div>
                          <div className="info-box-content">
                            <span className="as-role">Total No. of Leads</span>
                            <div className="inr-data role-box">
                              <div
                                className="col-md-4 border-right"
                                style={{ padding: "0" }}
                              >
                                <span className="">Pending</span>
                                <span className="info-box-number lead-label">
                                  5
                                </span>
                              </div>
                              <div
                                className="col-md-4 border-right"
                                style={{ padding: "0px 5px 0px" }}
                              >
                                <span className="">Followup</span>
                                <span className="info-box-number lead-label">
                                  25
                                </span>
                              </div>
                              <div
                                className="col-md-4 inactive"
                                style={{ padding: "0" }}
                              >
                                <span className="">Converted</span>
                                <span className="info-box-number lead-label">
                                  20
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </Link>
                    </div>
                    <div className="col-md-6 col-sm-6 col-xs-12 text-right">
                      <div className="row">
                        <div className="col-md-10"></div>
                        <div className="col-md-2">
                          <DateRangePicker>
                            <button className="form-control">
                              <i className="fa fa-calendar"></i>
                            </button>
                          </DateRangePicker>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      );
    }
  }
  export default LeadDashboard;
  