|  | @@ -0,0 +1,136 @@
 | 
	
		
			
				|  |  | +import Scrollable from "@/components/Common/Scrollable";
 | 
	
		
			
				|  |  | +import moment from "moment";
 | 
	
		
			
				|  |  | +import { Col, FormGroup, Table, Button } 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="4">Dokumen Acara Pleno:</Col>
 | 
	
		
			
				|  |  | +					<Col md="8">
 | 
	
		
			
				|  |  | +						<span>
 | 
	
		
			
				|  |  | +							<Button color className="btn-labeled-4 mt-0">
 | 
	
		
			
				|  |  | +								<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
 | 
	
		
			
				|  |  | +							</Button>
 | 
	
		
			
				|  |  | +						</span>
 | 
	
		
			
				|  |  | +					</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;
 |