Untitled

import React from 'react';

import {
    EuiCard,
    EuiFlexGroup,
    EuiFlexItem,
    EuiProgress,
    EuiSpacer,
    EuiText,
    EuiTextAlign,
} from '@elastic/eui';

export default (props) => (
  console.log("Component progress masuk : " + JSON.stringify(props.data.waInquiry.data.responseData.length)),
  <EuiFlexGroup gutterSize='none' >
      <EuiFlexItem >
        <EuiText >
            <EuiTextAlign textAlign="left" style={{ fontSize: "30px", color: "grey", paddingBottom: "30px", fontWeight: "700" }}>
                Running Process Whatsapp Blast
            </EuiTextAlign>
        </EuiText>
        <div className="table_container">
          
          <EuiFlexItem className="dashboard">
            <EuiText>
              <EuiTextAlign textAlign="left">1. Upload Document CSV</EuiTextAlign>
            </EuiText>
            <div style={{position:'relative'}}>
              <EuiProgress className="progress-bar" value={(parseInt(props.data.waInquiry.data.responseData[0].progressUpload.fileNumber) / parseInt(props.data.waInquiry.data.responseData[0].progressUpload.totalOfFiles)) * 100} max={100} size="l" label={"100%"} color='primary' valueText={true} />
              <p className="progress-bar_label">{(parseInt(parseInt(props.data.waInquiry.data.responseData[0].progressUpload.fileNumber) / parseInt(props.data.waInquiry.data.responseData[0].progressUpload.totalOfFiles)) * 100)}%</p>
            </div>
            <EuiSpacer size="l" />
            <EuiText>
              <EuiTextAlign textAlign="left">2. Verify Contact</EuiTextAlign>
            </EuiText>
            <div style={{position:'relative'}}>
              <EuiProgress className="progress-bar" value={parseInt(props.data.waInquiry.data.responseData[0].progressVerifyContacts.percentage)} max={100} size="l" label={"100%"} color='primary' valueText={true} />
              <p className="progress-bar_label">{parseInt(props.data.waInquiry.data.responseData[0].progressVerifyContacts.percentage)}%</p>
            </div>
            <EuiSpacer size="l" />
            <EuiText>
              <EuiTextAlign textAlign="left">3. Blast Message</EuiTextAlign>
            </EuiText>
            <div style={{position:'relative'}}>
              <EuiProgress className="progress-bar" value={parseInt(parseInt(props.data.waInquiry.data.responseData[0].progressBlast.sent) + parseInt(props.data.waInquiry.data.responseData[0].progressBlast.failed)) / parseInt(props.data.waInquiry.data.responseData[0].progressBlast.totalDataProcess) * 100} max={100} size="l" label={"50%"} color='primary' valueText={true} />
              <p className="progress-bar_label">{parseInt(props.data.waInquiry.data.responseData[0].progressBlast.sent) + parseInt(props.data.waInquiry.data.responseData[0].progressBlast.failed) / parseInt(props.data.waInquiry.data.responseData[0].progressBlast.totalDataProcess) * 100 ? parseInt(parseInt(parseInt(props.data.waInquiry.data.responseData[0].progressBlast.sent) + parseInt(props.data.waInquiry.data.responseData[0].progressBlast.failed)) / parseInt(props.data.waInquiry.data.responseData[0].progressBlast.totalDataProcess) * 100) : 0}%</p>
            </div>
            <EuiSpacer size="l" />
            <p align="left">Division Name : {props.data.waInquiry.data.responseData[0].namaDivisi}</p>
            <EuiSpacer size='m' />
            <p align="left">Template Name : {props.data.waInquiry.data.responseData[0].namaTemplate}</p>
            <EuiSpacer size='m' />
            <p align="left">Total Data    : {props.data.waInquiry.data.responseData[0].progressUpload.totalOfFiles}</p>
          </EuiFlexItem>
        </div>
      </EuiFlexItem>
  </EuiFlexGroup>
);