Using datepicker

gistfile1.txt

import React, { Component } from 'react';
import '../Admin.css';
import { Link } from 'react-router-dom';
import { Modal, ModalBody } from 'reactstrap';
import {fetchAllBlankcardsCus} from '../../../actions/OwnerActions/OwnerCardMgtActions/OwnerCardActions'
import { getTransactionsByCustomerForCDasboard, getSettlementsByCustomer } from '../../../actions/VendorActions/CustomerActions/CustomerActions';
import { fetchAllTrailByCustomer } from '../../../actions/OwnerActions/OwnerTrailMgtActions/OwnerTrailActions';
import { fetchCardsByCustomer, fetchAllCards } from '../../../actions/CustomerActions/CardMgtActions/CardAction';
import { loadAllCustomerVendors } from '../../../actions/CustomerActions/VendorMgtActions/VendorAction';
import { getAllUsers } from '../../../actions/customerUserActions';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import Moment from 'react-moment';
import moment from 'moment';


class CDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      startDate:new Date(moment().startOf('month').format('LLLL')),
      endDate:new Date(moment().endOf('month').format('LLLL')),
    };

  }
  componentDidMount() {
    const { startDate, endDate } = this.state;
    const start = moment(startDate).format('YYYY-MM-DD');
    const end = moment(endDate).format('YYYY-MM-DD')
    const user = JSON.parse(localStorage.getItem('user'));
    this.setState({user})
    this.props.getAllBlankCard(user.customerNumber)
    this.props.getTransactionsByCustomerFn(user.customerNumber,start, end);
    this.props.getSettlementsByCustomerFn(user.customer);
    this.props.fetchAllTrailByCustomer(user.customer);
    this.props.fetchCardsByCustomerFn(user.customer);
    this.props.loadAllCustomerVendorsFn(user.customer);
    this.props.getAllUsersFn(user.type);
  }

  render() {
    const { startDate } = this.state;
    const start = moment(startDate).format('YYYY-MM-DD');
    const end = moment().format('YYYY-MM-DD')
    let {cTransactions, oGetAllBlankCardCus,cSettlements, allCustomers, ctrail, allSubscribedVendors, allBlankCards, allCustomerCards, users } = this.props,
      { user } = this.state,
      settlementsCount = cSettlements.length,
      vendorsCount = allSubscribedVendors.length,
      trailCount = ctrail.length,
      allcusCardsCount = allCustomerCards.length,
      cUsersCount = users.length,
      cSchMgrUsersCount = users.filter(e => e.userLevel === 'SCMANAGER_USER').length;

      let totalTransaction=cTransactions.totalAmount/100
       let totalTransactionAmount= totalTransaction.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
       let numberOfTransaction=cTransactions.count;
       let assignedCard=oGetAllBlankCardCus.length;

    

    return (
      <div className="px-md-2 pt-md-4 Vendorproducts container pl-md-5">
       
        <div className="row mt-md-4">
          <div className="col-md-7">
            <ul className="breadcrumbs">
              <li>
                {/* <img src={welcomeImg} alt="Vendors" /> */}
                <p className="header6">Welcome, {this.state.user.firstName}</p>
              </li>
              <li style={{ color: '#00425F', marginTop: '1em' }}>{this.state.user.userEmail}</li>
            </ul>
          </div>
          <div className="col-md-5" />
        </div>
        <div className=" fixed-content-height">
          <div className="row section-one">
            <div className="col-md-4">
              <div className="card card-adax card-adax1" style={{ width: '100%' }}>
                <div className="most-we">
                  {/* <img src={erImg} alt="" className="my-md-3" /> */}
                  <p className="header5">{settlementsCount} Settlement(s) pending</p>
                  <p>From {vendorsCount ? vendorsCount : '0'} Vendor</p>
                  <div className="py-md-2">
                    <p>
                      Generated <Moment format="DD/MM/YYYY">{Date.now('dd/mm/yyyy')}</Moment>
                    </p>
                    <p className="xbold">.{/* OVH grace period ends in 30days */}</p>
                    <Link to="/admin/reports/settlement">
                      <button className="aux-btn px-md-5 py-md-2 ">View Settlement Details</button>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-md-8">
              <div className="card card-adax card-adax2" style={{ width: '100%' }}>
                <div className="row">
                <div className="col-md-12 olar d-flex justify-content-between align-items-center">
                    <strong className="py-md-2">This Month</strong>
                    <div>{start}</div>
                    <div>{end}</div>
                  </div>
                </div>
                <div className="row">
                  <div className="col-md-6">
                    <div className="most-we">
                      <div className="row">
                        <div className="col-md-6 mt-md-4 pt-md-5">
                          <strong className="font-weight-bold">₦{totalTransactionAmount||0}</strong>
                          <p>Transactions</p>
                        </div>
                        <div className="col-md-6">
                          <div className="pt-md-4 pb-md-4 ">
                            <p>Cards</p>
                            <div>{assignedCard || 0}</div>
                          </div>
                          <div>
                            <p>Vouchers</p>
                            <div>0</div>
                          </div>
                        </div>
                      </div>
                      <div className="py-md-2">
                        <Link to="/admin/reports/transaction">
                          <button className="aux-btn mt-md-3 px-md-5 py-md-2">View Transaction Details</button>
                        </Link>
                      </div>
                    </div>
                  </div>
                  <div className="col-md-6 ">
                    <div className="most-we pl-md-3">
                      <div className="row">
                        <div className="col-md-6 mt-md-4 pt-md-5 ">
                          {/* <img src={s22img1} alt="" className="pt-md-5 " /> */}
                          <strong className="">{trailCount ? trailCount : '0'}</strong>
                          <p>User Actions</p>
                        </div>
                        <div className="col-md-6">
                          <div className="pt-md-4 pb-md-4 ">
                            <p>Users</p>
                            <div>{cUsersCount ? cUsersCount : '0'}</div>
                          </div>
                          <div>
                            <p>Scheme Mgr.</p>
                            <div>{cSchMgrUsersCount ? cSchMgrUsersCount : '0'}</div>
                          </div>
                        </div>
                      </div>
                      <div className="py-md-2">
                        <Link to="/admin/trail">
                          <button className="aux-btn mt-md-3 px-md-5 py-md-2">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;View Trail Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          </button>
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* <img src={gbimg1} width="100%" height="110%"/> */}
            </div>
            <div className="col-md-4">
              <Link to="/admin/users">
                <div className="card card-adax card-adax3" style={{ width: '100%' }}>
                  <div className="my-auto">
                    {/* <img src={n22img1} alt="" width="40%" height="110%" /> */}
                    <p className="header3 light-blue-txt">{cUsersCount ? cUsersCount : '0'}</p>
                    <p className="mt-md-2">Users</p>
                  </div>
                </div>
              </Link>
              {/* <img src={ghimg1} width="100%" height="110%"/> */}
            </div>
            <div className="col-md-4">
              <Link to="/admin/schemes/all/cards">
                <div className="card card-adax card-adax4" style={{ width: '100%' }}>
                  <div className="my-auto">
                    {/* <img src={n340img1} alt="" width="20%" height="110%" /> */}
                    <p className="header3 light-blue-txt">{assignedCard || 0}</p>
                    <p className="mt-md-2">Cards</p>
                  </div>
                </div>
              </Link>
              {/* <img src={guimg1} width="100%" height="110%"/> */}
            </div>
            <div className="col-md-4">
              <Link to="/admin/vendor">
                <div className="card card-adax card-adax5" style={{ width: '100%' }}>
                  <div className="my-auto">
                    {/* <img src={n1img} alt="" width="5%" height="110%" /> */}
                    <p className="header3 light-blue-txt">{vendorsCount ? vendorsCount : '0'}</p>
                    <p className="mt-md-2">Vendor(s)</p>
                  </div>
                </div>
                {/* <img src={gaimg1} width="100%" height="110%"/> */}
              </Link>
            </div>
          </div>
          <div className="row section-two" />
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    cSettlements: state.customerVendor.customerSettlements
      ? state.customerVendor.customerSettlements.data == null
        ? []
        : state.customerVendor.customerSettlements.data
      : [],
    cTransactions: state.oTrailReducer.cDashoardTransactions,
    oGetAllBlankCardCus:state.oCardReducer.allBlankCardsCustomer,
    // cTransactions: state.oTrailReducer.cTransactions ? (state.oTrailReducer.cTransactions.data == null ? [] : state.oTrailReducer.cTransactions.data) : [],
    allCustomers: state.oCustomerReducer.allCustomers ? (state.oCustomerReducer.allCustomers.data == null ? [] : state.oCustomerReducer.allCustomers.data) : [],
    ctrail: state.oTrailReducer.cTrail ? (state.oTrailReducer.cTrail.data == null ? [] : state.oTrailReducer.cTrail.data) : [],
    allSubscribedVendors: state.customerVendor.allCustomerVendors
      ? state.customerVendor.allCustomerVendors.data == null
        ? []
        : state.customerVendor.allCustomerVendors.data
      : [],
    allBlankCards: state.oCardReducer.allBlankCards ? (state.oCardReducer.allBlankCards.data == null ? [] : state.oCardReducer.allBlankCards.data) : [],
    allCustomerCards: state.customerCards.allCustomerCards
      ? state.customerCards.allCustomerCards.data == null
        ? []
        : state.customerCards.allCustomerCards.data
      : [],
    users: state.customerUser.users ? (state.customerUser.users == null ? [] : state.customerUser.users) : [],

    // oTransactions : state.oTrailReducer.oTransactions,
    // oTransactions : state.oTrailReducer.oTransactions,
    // oTransactions : state.oTrailReducer.oTransactions,
    //   userCreateModal:state.customerUser.userCreateModal
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getTransactionsByCustomerFn: (cid,startDate,endDate) => {
      dispatch(getTransactionsByCustomerForCDasboard(cid,startDate,endDate));
    },
    getSettlementsByCustomerFn: id => {
      dispatch(getSettlementsByCustomer(id));
    },
    fetchAllTrailByCustomer: id => {
      dispatch(fetchAllTrailByCustomer(id));
    },
    fetchCardsByCustomerFn: id => {
      dispatch(fetchCardsByCustomer(id));
    },
    loadAllCustomerVendorsFn: id => {
      dispatch(loadAllCustomerVendors(id));
    },
    getAllUsersFn: user_type => {
      dispatch(getAllUsers(user_type));
    },

    getAllBlankCard:cid=>{
      dispatch(fetchAllBlankcardsCus(cid));
    }
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(CDashboard),
);