PTB-fe/components/Riwayat/TableRadar.js

import React, { Component } from 'react';
import Link from "next/link";
import { Row, Col, Card, CardHeader, CardBody, Table, Button } from 'reactstrap';
import { Line } from 'react-chartjs-2';


function TableRadar({ listData, to, linkName, jadwal, pemeriksaan, sanksi, keberatan, banding, perbaikan, cabutSanksi, all_Laporan, ditutup, selesai, delegasi }) {
    return (
        <Card className="card-default">
            <CardBody style={{
                outerWidth: "700"
            }}>
                <Table bordered responsive>
                    <thead>
                        <tr >
                            <th rowspan="2"
                                style={{
                                    verticalAlign: "middle",
                                    textAlign: "center",
                                }}
                            >Wilayah LLDikti\Menu</th>
                            <th
                                rowspan="2"
                                style={{
                                    color: "black",
                                    verticalAlign: "middle",
                                }}>Jumlah Laporan</th>
                            <th
                                colSpan="2"
                                style={{
                                    backgroundColor: '#e8f2f1',
                                    color: "black",
                                    textAlign: "center",

                                }}>Pelaporan Tuntas</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#80b1ff',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>1. Penjadwalan Evaluasi</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#de8383',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>2. Pemeriksaan</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#fdda80',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>3. Sanksi</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#cfab80',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>4. Keberatan</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#ef90df',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>5. Banding</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#80df89',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>6. Dokumen Perbaikan</th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#a3d4d1',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>7. Permohonan Pencabutan Sanksi</th>
                            <th
                                rowspan="2"
                                id='cabutSanksi'
                                style={{
                                    // backgroundColor: '#e8f2f1',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>Pelaporan Tuntas
                                <hr style={{
                                    // backgroundColor: 'black',
                                    color: "black",
                                
                                }}></hr>
                                Cabut Sanksi

                            </th>
                            <th
                                rowspan="2"
                                style={{
                                    backgroundColor: '#e8f2f1',
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}>Lihat Laporan</th>
                        </tr>
                        <tr>
                            <th
                                style={{
                                    color: "black",
                                    textAlign: "center",
                                    verticalAlign: "middle",
                                }}
                            >Ditutup</th>
                            <th>Delegasi LLDIKTI</th>
                        </tr>

                    </thead>
                    {listData.map((data) => {
                        return (
                            <tr key={data.id}>
                                <td>{data.pembina.name}</td>
                                <Link
                                    href={{
                                        pathname: all_Laporan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.laporan.length}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: ditutup,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_ditutup}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: delegasi,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_delegasi}</td>
                                </Link>

                                <Link
                                    href={{
                                        pathname: jadwal,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#80b1ff',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer"
                                    }}>{data.jumlah_jadwal_evaluasi}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: pemeriksaan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#de8383',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_pemeriksaan}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: sanksi,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#fdda80',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_sanksi}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: keberatan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#cfab80',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_keberatan}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: banding,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#ef90df',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_banding}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: perbaikan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#80df89',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_pemantauan_perbaikan}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: cabutSanksi,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#a3d4d1',
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_pencabutan_sanksi}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: selesai,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        color: "black",
                                        textAlign: "center",
                                        cursor: "pointer",
                                    }}>{data.jumlah_diterima}</td>
                                </Link>
                                <td>
                                    <div className="ml-auto" style={{
                                        textAlign: "center",
                                        marginLeft: "auto",
                                        marginRight: "auto",

                                    }}>
                                        <Link
                                            href={{
                                                pathname: to,
                                                query: { id: data.pembina.id },
                                            }}
                                        >
                                            <Button className="btn-login" color >
                                                <span className="font-color-white">
                                                    {linkName}
                                                </span>
                                            </Button>
                                        </Link>
                                    </div>
                                </td>
                            </tr>)
                    })}
                </Table>
            </CardBody>
        </Card>
    )
}

export default TableRadar