import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Link from "next/link";
import { Row, Col, Button } from "reactstrap";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import Router from "next/router";
import TableRiwayat from "@/components/Riwayat/TableRiwayat";
import ChartData from "@/components/Riwayat/ChartData";
import ChartDataBar from "@/components/Riwayat/ChartDataBar";
import Maps from "@/components/Riwayat/Maps"
import TableRadar from "../../../components/Riwayat/TableRadar";
import { getjumlahStatusLaporan } from "../../../actions/graph";
import { getOneLaporan, getPelaporan, getlaporanByPembina } from "../../../actions/pelaporan";
import ChartRadarB from "../../../components/Riwayat/ChartRadarB";
import ChartRadarA from "../../../components/Riwayat/ChartRadarA";
import TableLaporan from "../../../components/Riwayat/TableLaporan";



class sanksi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            laporanPembina: {},
            laporan: {},

        };
    }

    static getInitialProps = async ({ query }) => {
        return { query };
    }

    componentDidMount = async () => {
        const { token, query } = this.props;
        const id = query.id;
        const idPembina = id;
        const laporanPembina = await getlaporanByPembina(token, idPembina, { sanksi: true });
        this.setState({ laporanPembina });
    };

    render() {
        const { laporanPembina } = this.state;
        return (
            <ContentWrapper>
                <div className="content-heading">
                    <span className="font-color-white">List Laporan Wilayah</span>
                </div>
                <Row>
                    <Col lg="12">
                        {laporanPembina.data && < TableLaporan listData={laporanPembina?.data} to="/app/pelaporan/detail" linkName="Detail" />}


                    </Col>
                </Row>
            </ContentWrapper>
        );
    }
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(sanksi);