PTB-fe/components/Riwayat/TableRadar.js

import React, { Component } from 'react';
import ContentWrapper from '@/components/Layout/ContentWrapper';
import Link from "next/link";
import { Row, Col, Card, CardHeader, CardBody, Table, Button } from 'reactstrap';
import cabutSanksi from '../../pages/app/riwayat/cabutSanksi';


function TableRadar({ listData, to, linkName, jadwal, pemeriksaan, sanksi, keberatan, banding, perbaikan, cabutSanksi }) {
    return (
        <Card className="card-default">
            <CardBody>
                <Table bordered responsive>
                    <thead>
                        <tr >
                            <th>Wilayah LLDikti\Menu</th>
                            <th style={{
                                backgroundColor: '#80b1ff',
                                color: "black",
                            }}>Penjadwalan Evaluasi</th>
                            <th style={{
                                backgroundColor: '#de8383',
                                color: "black",
                            }}>Pemeriksaan</th>
                            <th style={{
                                backgroundColor: '#fdda80',
                                color: "black",
                            }}>Sanksi</th>
                            <th style={{
                                backgroundColor: '#cfab80',
                                color: "black",
                            }}>Keberatan</th>
                            <th style={{
                                backgroundColor: '#ef90df',
                                color: "black",
                            }}>Banding</th>
                            <th style={{
                                backgroundColor: '#80df89',
                                color: "black",
                            }}>Pemantauan perbaikan</th>
                            <th style={{
                                backgroundColor: '#a3d4d1',
                                color: "black",
                            }}>Pencabutan Sanksi</th>
                            <th style={{
                                backgroundColor: '#e8f2f1',
                                color: "black",
                            }}>Lihat Laporan</th>
                        </tr>
                    </thead>
                    {listData.map((data) => {
                        return (
                            <tr key={data.id}>
                                <td>{data.pembina.name}</td>
                                <Link
                                    href={{
                                        pathname: jadwal,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#80b1ff',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_jadwal_evaluasi}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: pemeriksaan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#de8383',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_pemeriksaan}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: sanksi,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#fdda80',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_sanksi}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: keberatan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#cfab80',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_keberatan}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: banding,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#ef90df',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_banding}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: perbaikan,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#80df89',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_pemantauan_perbaikan}</td>
                                </Link>
                                <Link
                                    href={{
                                        pathname: cabutSanksi,
                                        query: { id: data.pembina.id },
                                    }}
                                >
                                    <td style={{
                                        backgroundColor: '#a3d4d1',
                                        color: "black",
                                        textAlign: "center",
                                    }}>{data.jumlah_pencabutan_sanksi}</td>
                                </Link>
                                <td>
                                    <div className="ml-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