ptb-fe/components/TurunSanksi/DetailSanksi.js

import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import 'moment/locale/id';
moment.locale('id');
import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
import { API_URL } from "@/env";
import Swal from "sweetalert2";

function DetailSanksi({ data, noTitle = false, role }) {
	const handleOpenAlert = () => {
		Swal.fire({
			icon: 'error',
			title: 'Oops...',
			html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
			confirmButtonColor: "#3e3a8e",
			confirmButtonText: 'Oke'
		})
	};
	const lastSanksi = data?.sanksi?.[data.sanksi.length - 1];

	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>Durasi : {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>
					{
						data.riwayat_sanksi.length ? (
							<FormGroup row>
								<Col md={12}>
									<div className="card b">
										<div className="card-body bb">
											<Table responsive>
												<thead>
													<tr>
														<th>Sanksi</th>
													</tr>
												</thead>
												<tbody>
													{lastSanksi && (
														<tr key={lastSanksi._id}>
															<td width={50}>
																<div className="media align-items-center">
																	<div className="media-body d-flex">
																		<div>
																			<p>{lastSanksi.description}</p>
																			<p>
																				Durasi : {moment(data?.masa_berlaku?.to_date).diff(data?.masa_berlaku?.from_date, 'month')} Bulan
																			</p>
																			<p>Jenis Sanksi Administratif : {lastSanksi.label}</p>
																		</div>
																	</div>
																</div>
															</td>
															<td width={50}></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?.to_date).diff(data?.masa_berlaku?.from_date, 'month')} Bulan</strong>) : (<strong className="m-0">6 Bulan</strong>)}

						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Sanksi:</Col>
						<Col md="8">
							{/* {data?.pelanggaran && data.pelanggaran.map((e) => <li><strong>{e.sanksi}</strong> - {e.keterangan_sanksi}</li>)} */}
							{data?.sanksi && data.sanksi.map((e) => <li><strong>{e.description}</strong> - Sanksi Administratif {e.label} </li>)}
						</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>
													{role === 2071 ?
														<a className="text-muted" onClick={handleOpenAlert}>
															{e.judul}
														</a>
														:
														<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;