text: import React, { Component } from 'react';
  import Total_logo from '../../assets/images/Total logo.png';
  import complete_logo from '../../assets/images/complete-logo.png';
  import pending_logo from '../../assets/images/pending-logo.png';
  import verification_logo from '../../assets/images/verification-pending.png';
  import { NavLink } from 'react-router-dom';
  import CustomDatePicker from '../../components/Date-Picker/CustomDatePicker';
  import moment from "moment";
  
  //shopify
  import enTranslations from '@shopify/polaris/locales/en.json';
  import { AppProvider, Page, Card, Stack, TextField, Button } from '@shopify/polaris';
  
  //import axios
  import axiosInstance from '../../config/axiosInstance';
  
  //import Breadcrumb
  import CustomBreadcrumb from '../../components/Breadcrumb/CustomBreadcrumb';
  import { DASHBOARD, GETFILEDETAIL, SEARCHWITHGCP } from '../../config/apiConstant';
  
  
  //import Toster
  import Toaster from '../../components/Toaster';
  
  class Dashboard extends Component {
      constructor(props) {
          super(props);
          this.state = {
              startDate: moment().subtract(30, 'days').format('YYYY-MM-DD'),
              endDate: moment().format('YYYY-MM-DD'),
              searchoption: {
                  fileNo: null,
                  gcp_no: null,
              },
              error: {},
              btnloading: false,
              gpcbtnloading: false,
  
              applicationCount: {},
  
              //Toaster Properties
              toastToggal: false,
              setToastObj: null,
          }
      }
  
      componentDidMount() {
          this.getDashboardData()
      }
  
      //dashboard data
      getDashboardData = async () => {
          try {
              const { startDate, endDate } = this.state;
  
              const response = await axiosInstance(DASHBOARD + "?from_date=" + startDate + "&to_date=" + endDate);
              this.setState({ applicationCount: response.data.data });
  
          } catch (error) { }
      }
  
      //Handle Date Change
      handleDateChangeEvent = (start, end) => {
          this.setState({ startDate: start, endDate: end }, function () {
              //List Function Call
              this.getDashboardData();
          })
      }
  
  
      //validate
      Validate = () => {
          let isError = false;
          let errors = {};
  
          const { fileNo } = this.state.searchoption;
  
          if (window.cn(fileNo) && !window.cb(fileNo)) {
              errors = { ...errors, fileno: "Enter File No *" }
              isError = true;
          } else {
              errors = { ...errors, fileno: "" }
          }
  
          this.setState({ error: errors });
          return isError;
      }
  
  
      //validate
      ValidateGCP = () => {
          let isError = false;
          let errors = {};
  
          const { gcp_no } = this.state.searchoption;
  
          if (window.cn(gcp_no) && !window.cb(gcp_no)) {
              errors = { ...errors, gcp_no: "Enter GCP No *" }
              isError = true;
          } else {
              errors = { ...errors, gcp_no: "" }
          }
  
          this.setState({ error: errors });
          return isError;
      }
  
      //handle change
      handleChange = (name, value) => {
          const { searchoption } = this.state;
          this.setState({ searchoption: { ...searchoption, [name]: value } });
      }
  
      //handle enter
      handlEnter = async () => {
          if (!this.Validate()) {
              this.setState({ btnloading: true });
              const { fileNo } = this.state.searchoption;
              try {
                  const response = await axiosInstance(GETFILEDETAIL + "?file_no=" + fileNo)
                  if (response) {
                      this.setState({ btnloading: false });
                      this.props.history.push(`/fresh-registration-form/${window.btoa(fileNo)}`)
                  }
              } catch (error) {
                  if (error.response) {
                      this.setState({ btnloading: false });
                      let requestObj = {};
                      requestObj.message = error.response.data.errors;
                      requestObj.error = true;
  
                      //Call setToast 
                      this.setToast(requestObj);
                  }
              }
          }
      }
  
      //handle gcp enter 
      handlEnterGCP = async () => {
          if (!this.ValidateGCP()) {
              this.setState({ gpcbtnloading: true });
              const { gcp_no } = this.state.searchoption
              try {
                  const response = await axiosInstance(SEARCHWITHGCP + "?gpc_no=" + gcp_no)
                  if (response) {
                      this.setState({ gpcbtnloading: false });
                      this.props.history.push(`/fresh-registration-form/search-by-gno/${window.btoa(gcp_no)}`)
                  }
              } catch (error) {
                  if (error.response) {
                      this.setState({ gpcbtnloading: false });
                      let requestObj = {};
                      requestObj.message = error.response.data.errors;
                      requestObj.error = true;
  
                      //Call setToast 
                      this.setToast(requestObj);
                  }
              }
          }
      }
  
  
      //Set Toast
      setToast = (requestObj) => {
          this.setState({ setToastObj: requestObj, toastToggal: true });
          //Check status and load data
          if (!requestObj.error) {
              this.clearAll();
              this.getScrutinyDetails();
          }
      }
  
      //Dismiss Close Toast
      closeToast = () => {
          this.setState({ toastToggal: false });
      }
  
      render() {
          const { startDate, endDate, error, fileNo, toastToggal, setToastObj, searchoption, btnloading, gpcbtnloading } = this.state;
          const { fresh, other, reentry, renewal } = this.state.applicationCount;
  
          return <>
              {localStorage.getItem('role') !== 'Scrutiny Manager' ?
                  <div className="page-content dashboard">
                      {/* -- Main content -- */}
                      <div className="content-wrapper">
                          {/* breadcrumb */}
                          <CustomBreadcrumb name={"Dashboard"} />
  
                          {/* --- Content area --- */}
  
                          <div className="content">
                              <AppProvider i18n={enTranslations}>
                                  <Page title="Dashboard" fullWidth>
                                      <CustomDatePicker startDate={startDate} endDate={endDate} onChange={this.handleDateChangeEvent} />
                                      <br />
                                      <Stack distribution='fill'>
                                          <Card className="mt-3">
                                              <div className="card-body py-2 mb-4">
                                                  <div className="row">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                          <p className="font-bold">Fresh Registration</p>
                                                          <div className="row">
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/fresh-registartion/${window.btoa('all')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0 mr-bottom">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={Total_logo} className="d-sm-block"
                                                                                  alt="t-logo" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(fresh) && fresh.total}</h5>
                                                                              <span className="text-muted">Total</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/fresh-registartion/${window.btoa('Approved')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={complete_logo} className=" d-sm-block"
                                                                                  alt="c-logo" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(fresh) && fresh.completed}</h5>
                                                                              <span className="text-muted">completed</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
  
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/fresh-registartion/${window.btoa('Pending')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={pending_logo} className=" d-sm-block"
                                                                                  alt="p-logo" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(fresh) && fresh.pending}</h5>
                                                                              <span className="text-muted">pending</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <hr />
  
                                                  <div className="row">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                          <p className="font-bold">Fresh Registration Other</p>
                                                          <div className="row">
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/fresh-regisatrtion-other/${window.btoa('all')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0 mr-bottom">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={Total_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(other) && other.total}</h5>
                                                                              <span className="text-muted">Total</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/fresh-regisatrtion-other/${window.btoa('Approved')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={complete_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(other) && other.completed}</h5>
                                                                              <span className="text-muted">completed</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
  
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/fresh-regisatrtion-other/${window.btoa('Pending')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={pending_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(other) && other.pending}</h5>
                                                                              <span className="text-muted">pending</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <hr />
  
                                                  <div className="row">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                          <p className="font-bold">Renew Application</p>
                                                          <div className="row">
                                                              <div className="col-xl-4 xol-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/renew/${window.btoa('all')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0 mr-bottom">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={Total_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(renewal) && renewal.total}</h5>
                                                                              <span className="text-muted">Total</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/renew/${window.btoa('Approved')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={complete_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(renewal) && renewal.completed}</h5>
                                                                              <span className="text-muted">completed</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/renew/${window.btoa('Pending')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={pending_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(renewal) && renewal.pending}</h5>
                                                                              <span className="text-muted">pending</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <hr />
  
                                                  <div className="row">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                          <p className="font-bold">Re-Entry Application</p>
                                                          <div className="row">
                                                              <div className="col-xl-4 xol-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/re-entry/${window.btoa('all')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0 mr-bottom">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={Total_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(reentry) && reentry.total}</h5>
                                                                              <span className="text-muted">Total</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/re-entry/${window.btoa('Approved')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={complete_logo} className="d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(reentry) && reentry.completed}</h5>
                                                                              <span className="text-muted">completed</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-4 col-lg-4 col-12 col-md-4 col-sm-12">
                                                                  <NavLink to={`/application/re-entry/${window.btoa('Pending')}`}>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={pending_logo} className="d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(reentry) && reentry.pending}</h5>
                                                                              <span className="text-muted">pending</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </Card>
                                          <div>
                                              <Card className="mt-3" title="Search By File No">
                                                  <div className="card-body py-4 mb-5">
                                                      <div className="row mb-3">
                                                          <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                              <TextField type='number' placeholder='Enter File No' onChange={(value) => this.handleChange("fileNo", value)} value={searchoption.fileNo} error={error.fileno} />
                                                          </div>
                                                      </div>
  
                                                      <div className="row">
                                                          <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12 text-right">
                                                              <Button primary loading={btnloading} onClick={() => this.handlEnter()}>Search</Button>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </Card>
                                              <Card className="mt-3" title="Search By GPC No">
                                                  <div className="card-body py-4 mb-5">
                                                      <div className="row mb-3">
                                                          <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                              <TextField type='number' placeholder='Enter GPC No' onChange={(value) => this.handleChange("gcp_no", value)} value={searchoption.gcp_no} error={error.gcp_no} />
                                                          </div>
                                                      </div>
  
                                                      <div className="row">
                                                          <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12 text-right">
                                                              <Button primary loading={gpcbtnloading} onClick={() => this.handlEnterGCP()}>Search</Button>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </Card>
                                          </div>
                                      </Stack>
                                  </Page>
                              </AppProvider>
                          </div>
                      </div>
                  </div>
                  :
  
                  <div className="page-content dashboard">
                      {/* -- Main content -- */}
                      <div className="content-wrapper">
                          {/* breadcrumb */}
                          <CustomBreadcrumb name={"Dashboard"} />
  
                          {/* --- Content area --- */}
  
                          <div className="content">
                              <AppProvider i18n={enTranslations}>
                                  <Page title="Dashboard" fullWidth>
                                      <Stack distribution='fill'>
                                          <Card className="mt-3">
                                              <div className="card-body py-2 mb-4">
                                                  <div className="row">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                          <div className="row">
                                                              <div className="col-xl-6 col-lg-6 col-12 col-md-6 col-sm-12">
                                                                  <p className="font-bold">Fresh Registration</p>
                                                                  <NavLink to='/scrutiny/scrutiny-dashboard'>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={pending_logo} className=" d-sm-block"
                                                                                  alt="p-logo" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(fresh) && fresh.pending}</h5>
                                                                              <span className="text-muted">pending</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                              <div className="col-xl-6 col-lg-6 col-12 col-md-6 col-sm-12">
                                                                  <p className="font-bold">Fresh Registration Other</p>
                                                                  <NavLink to='/scrutiny/scrutiny-dashboard'>
                                                                      <div className="d-flex align-items-center mb-3 mb-lg-0">
                                                                          <a href="#"
                                                                              className="btn bg-transparent border-indigo text-indigo rounded-pill border-2 btn-icon">
                                                                              <img src={pending_logo} className=" d-sm-block"
                                                                                  alt="" />
                                                                          </a>
                                                                          <div className="ml-3">
                                                                              <h5 className="font-weight-semibold mb-0">{!window.cn(other) && other.pending}</h5>
                                                                              <span className="text-muted">pending</span>
                                                                          </div>
                                                                      </div>
                                                                  </NavLink>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </Card>
                                          <Card className="mt-3">
                                              <div className="card-body py-4 mb-5">
                                                  <div className="row mb-3">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12">
                                                          <p className="font-bold">File No</p>
                                                          <TextField type='number' placeholder='Enter File No' onChange={(value) => this.handleChange("fileNo", value)} value={searchoption.fileNo} error={error.fileno} />
                                                      </div>
                                                  </div>
  
                                                  <div className="row">
                                                      <div className="col-xl-12 col-lg-12 col-12 col-md-12 col-sm-12 text-center">
                                                          <Button primary loading={btnloading} onClick={() => this.handlEnter()}>Enter</Button>
                                                      </div>
                                                  </div>
                                              </div>
                                          </Card>
                                      </Stack>
                                  </Page>
                              </AppProvider>
                          </div>
                      </div>
                  </div>
              }
              {/* Toaster Start */}
              {toastToggal ? (
                  <Toaster toastReqObj={setToastObj} dismissToast={() => { this.closeToast() }} />
              ) : null}
              {/* Toaster End */}
          </>
  
      };
  }
  
  
  export default Dashboard;
  