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';


function TableRadar({ listData, to, linkName, jadwal, pemeriksaan, sanksi, keberatan, banding, perbaikan, cabutSanksi, all_Laporan }) {
    return (
        <Card className="card-default">
            <CardBody>
                <Table bordered responsive>
                    <thead>
                        <tr >
                            <th>Wilayah LLDikti\Menu</th>
                            <th style={{
                                color: "black",
                            }}>Jumlah Laporan</th><th style={{
                                backgroundColor: '#80b1ff',
                                color: "black",
                                textAlign: "center",
                            }}>1. Penjadwalan Evaluasi</th>
                            <th style={{
                                backgroundColor: '#de8383',
                                color: "black",
                                textAlign: "center",
                            }}>2. Pemeriksaan</th>
                            <th style={{
                                backgroundColor: '#fdda80',
                                color: "black",
                                textAlign: "center",
                            }}>3. Sanksi</th>
                            <th style={{
                                backgroundColor: '#cfab80',
                                color: "black",
                                textAlign: "center",
                            }}>4. Keberatan</th>
                            <th style={{
                                backgroundColor: '#ef90df',
                                color: "black",
                                textAlign: "center",
                            }}>5. Banding</th>
                            <th style={{
                                backgroundColor: '#80df89',
                                color: "black",
                                textAlign: "center",
                            }}>6. Pemantauan perbaikan</th>
                            <th style={{
                                backgroundColor: '#a3d4d1',
                                color: "black",
                                textAlign: "center",
                            }}>7. Pencabutan Sanksi</th>
                            <th style={{
                                backgroundColor: '#e8f2f1',
                                color: "black",
                                textAlign: "center",
                            }}>Lihat Laporan</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: 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>
                                <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