|  | @@ -0,0 +1,132 @@
 | 
	
		
			
				|  |  | +import Scrollable from "@/components/Common/Scrollable";
 | 
	
		
			
				|  |  | +import moment from "moment";
 | 
	
		
			
				|  |  | +import 'moment/min/locales';
 | 
	
		
			
				|  |  | +moment.locale('id');
 | 
	
		
			
				|  |  | +import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
 | 
	
		
			
				|  |  | +import { API_URL } from "@/env";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function DetailSanksi({ data, noTitle = false }) {
 | 
	
		
			
				|  |  | +	return (
 | 
	
		
			
				|  |  | +		<Card className="card-default">
 | 
	
		
			
				|  |  | +			<CardBody>
 | 
	
		
			
				|  |  | +				{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">Dibuat Pada:</Col>
 | 
	
		
			
				|  |  | +						<Col md="8">
 | 
	
		
			
				|  |  | +							<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
 | 
	
		
			
				|  |  | +						</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>
 | 
	
		
			
				|  |  | +					<FormGroup row>
 | 
	
		
			
				|  |  | +						<Col md="4">Nomor Surat:</Col>
 | 
	
		
			
				|  |  | +						<Col md="8">
 | 
	
		
			
				|  |  | +							<strong>{data.no_sanksi}</strong>
 | 
	
		
			
				|  |  | +						</Col>
 | 
	
		
			
				|  |  | +					</FormGroup>
 | 
	
		
			
				|  |  | +					<FormGroup row>
 | 
	
		
			
				|  |  | +						<Col md="4">TMT Berlaku:</Col>
 | 
	
		
			
				|  |  | +						<Col md="8">
 | 
	
		
			
				|  |  | +							{/* <strong>{moment(data.masa_berlaku.from_date).format("D MMMM YYYY")} - {moment(data.masa_berlaku.to_date).format("D MMMM YYYY")} </strong> */}
 | 
	
		
			
				|  |  | +							{data.masa_berlaku?.to_date ? (<strong>{moment(data.masa_berlaku?.from_date).format("DD-MMMM-YYYY")} - {moment(data.masa_berlaku?.to_date).format("DD-MMMM-YYYY")}</strong>) : (<strong className="m-0">6 Bulan</strong>)}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						</Col>
 | 
	
		
			
				|  |  | +					</FormGroup>
 | 
	
		
			
				|  |  | +					<FormGroup row>
 | 
	
		
			
				|  |  | +						<Col md="4">Nomor Surat:</Col>
 | 
	
		
			
				|  |  | +						<Col md="8">
 | 
	
		
			
				|  |  | +							<strong>{data.pelanggaran.map((e) => e.sanksi)}</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>
 | 
	
		
			
				|  |  | +													<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>
 | 
	
		
			
				|  |  | +				</form>
 | 
	
		
			
				|  |  | +			</CardBody>
 | 
	
		
			
				|  |  | +		</Card>
 | 
	
		
			
				|  |  | +	);
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +export default DetailSanksi;
 |