sipadu_mbip/resources/js/components/compound/ReportCompound.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ClipLoader from 'react-spinners/ClipLoader';
import {ExportCSV} from '../ExportCSV';

export default class ReportCompound extends Component {
    constructor(props) {
        super(props);

        this.state = {
            current_id: this.props.current_id,
            dataReport: [],
            loading: true,
        };
    }

    componentDidMount(){
        fetch('/api/report/compound/list/null/null').then(response => {
            response.json().then(res => {
                this.setState({ dataReport: res.data, loading: false });
                
                const script = document.createElement("script");
                script.src = "/js/dashboard/datatable.js";
                script.async = true;
                document.body.appendChild(script);
            })
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-xl-12 col-md-12">
                    <div className="card">
                        <div className="card-header">
                            <h5>Laporan Pengeluaran Kompaun Mengikut Kesalahan</h5>
                            {/* {!this.state.loading ? <ExportCSV csvData={this.state.dataCompound} fileName="Report_saman_1" type={this.state.form.type} />: ""} */}
                        </div>

                        <div className="card-block">
                            <div className="data_table_main dt-responsive table-responsive">
                                <table id="report" className="table table-sm table-striped table-bordered nowrap datatable" style={{"width":"100%"}}>
                                    <thead>
                                        <tr>
                                            <th width="20">#</th>
                                            <th>Kesalahan</th>
                                            <th width="80">Jumlah Kompaun Keluar</th>
                                            <th width="80">Amaun Kompaun (Rm)</th>
                                            <th width="80">Jumlah Bayar</th>
                                            <th width="80">Amaun Bayar (RM)</th>
                                            <th width="80">Jumlah Kompaun Belum Bayar</th>
                                            <th width="80">Amount Tungakkan (RM)</th>
                                            <th width="80">Kompaun Batal</th>
                                            <th width="80">Amaun Batal (RM)</th>
                                            <th width="80">Kompaun Kurang</th>
                                            <th width="80">Amaun Kurang (RM)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {!this.state.loading ?
                                            this.state.dataReport.map((item,i) => 
                                                <tr key={i}>
                                                    <td>{item.index}</td>
                                                    <td>{item.kesalahan}</td>
                                                    <td>{item.jumlahK}</td>
                                                    <td>{item.amaunK}</td>
                                                    <td>{item.jumlahB}</td>
                                                    <td>{item.amaunB}</td>
                                                    <td>{item.belumB}</td>
                                                    <td>{item.amaunT}</td>
                                                    <td>{item.kBatal}</td>
                                                    <td>{item.amaunBatal}</td>
                                                    <td>{item.kompaunKurang}</td>
                                                    <td>{item.amaunKurang}</td>
                                                </tr>
                                            )
                                            :
                                            <tr>
                                                <td colSpan="12">
                                                    <div className='sweet-loading' style={{'textAlign':'center'}}>
                                                        <ClipLoader
                                                            style={{'border-color': 'red'}}
                                                            sizeUnit={"px"}
                                                            size={50}
                                                            color={'#123abc'}
                                                            loading={this.state.loading}
                                                        />
                                                    </div>
                                                </td>
                                            </tr>
                                           
                                        }
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th width="20">#</th>
                                            <th>Kesalahan</th>
                                            <th width="80">Jumlah Kompaun Keluar</th>
                                            <th width="80">Amaun Kompaun (Rm)</th>
                                            <th width="80">Jumlah Bayar</th>
                                            <th width="80">Amaun Bayar (RM)</th>
                                            <th width="80">Jumlah Kompaun Belum Bayar</th>
                                            <th width="80">Amount Tungakkan (RM)</th>
                                            <th width="80">Kompaun Batal</th>
                                            <th width="80">Amaun Batal (RM)</th>
                                            <th width="80">Kompaun Kurang</th>
                                            <th width="80">Amaun Kurang (RM)</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('reportcompound')) {
    const component = document.getElementById('reportcompound');
    const props = Object.assign({}, component.dataset)
    ReactDOM.render(<ReportCompound {...props} />, component);
}