|
|
@@ -0,0 +1,127 @@
|
|
|
+import Scrollable from "@/components/Common/Scrollable";
|
|
|
+import moment from "moment";
|
|
|
+import { Col, FormGroup, Table } from "reactstrap";
|
|
|
+import { API_URL } from "@/env";
|
|
|
+
|
|
|
+function DetailSanksi({ data, noTitle = false }) {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
|
|
|
+ <form className="form-horizontal">
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Nomor Sanksi:</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <strong>{data.no_sanksi}</strong>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Nama Perguruan Tinggi:</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <strong>{data.laporan.pt.nama}</strong>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Keterangan:</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <Scrollable height="100px" className="list-group">
|
|
|
+ <p>{data.keterangan}</p>
|
|
|
+ </Scrollable>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Tanggal Penetapan Sanksi:</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <strong>{moment(data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ {
|
|
|
+ data.tanggal_akhir_keberatan &&
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Tanggal Akhir Pengajuan Keberatan</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <strong>{moment(data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ data.jawaban?.keberatan?.tanggal_akhir_banding &&
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Tanggal Akhir Pengajuan Banding:</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <strong>{moment(data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ }
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md="4">Dokumen Sanksi:</Col>
|
|
|
+ <Col md="8">
|
|
|
+ <Scrollable height="120px" className="list-group">
|
|
|
+ <table className="table table-bordered bg-transparent">
|
|
|
+ <tbody>
|
|
|
+ {data.dokumen.map((e) => (
|
|
|
+ <tr>
|
|
|
+ <td style={{ width: "30px" }}>
|
|
|
+ <em className="fa-lg far fa-file-code"></em>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <a className="text-muted" href={e.path} target="_blank" download={e.judul}>
|
|
|
+ {e.judul}
|
|
|
+ </a>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ ))}
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </Scrollable>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ <FormGroup row>
|
|
|
+ <Col md={12}>
|
|
|
+ <div className="card b">
|
|
|
+ <div className="card-body bb">
|
|
|
+ <Table responsive>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Jenis Pelanggaran</th>
|
|
|
+ <th>Sanksi</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ {data.pelanggaran.map((jp, index) => (
|
|
|
+ <tr key={jp._id}>
|
|
|
+ <td width={50}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{jp.pelanggaran}</p>
|
|
|
+ <p>TMT : {jp.tmt_bulan} Bulan</p>
|
|
|
+ <p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td width={50}>
|
|
|
+ <div className="media align-items-center">
|
|
|
+ <div className="media-body d-flex">
|
|
|
+ <div>
|
|
|
+ <p>{jp.sanksi}</p>
|
|
|
+ <p>Keterangan : {jp.keterangan_sanksi}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ ))}
|
|
|
+ </tbody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </FormGroup>
|
|
|
+ </form>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default DetailSanksi;
|