components/NaikSanksi/DetailSanksi.js

@@ -17,6 +17,8 @@ function DetailSanksi({ data, noTitle = false, role }) {
 			confirmButtonText: 'Oke'
 		})
 	};
+	const lastSanksi = data?.sanksi?.[data.sanksi.length - 1];
+
 	return (
 		<Card className="card-default">
 			<CardBody>
@@ -91,6 +93,48 @@ function DetailSanksi({ data, noTitle = false, role }) {
 							</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">
@@ -108,8 +152,8 @@ function DetailSanksi({ data, noTitle = false, role }) {
 					<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>)}
-							{/* <strong>{data.pelanggaran.map((e) => e.sanksi)}</strong> */}
+							{/* {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>

components/NaikSanksi/TableRiwayat.js

@@ -1,76 +1,166 @@
-import Datatable from "@/components/Tables/Datatable";
+import React, { useState, Fragment } from "react";
 import moment from "moment";
-import 'moment/locale/id';
+import "moment/locale/id";
 import Swal from "sweetalert2";
-moment.locale('id');
-
-function TableRiwayat({ data, perbaikan, 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'
-		})
-	};
-	return (
-		// <Datatable options={{ responsive: true }}>
-		<div className="card-over">
-			<table className="table table-striped my-4 w-100">
-				<thead>
-					<tr>
-						<th>Tanggal</th>
-						<th>Keterangan</th>
-						<th>Nomor Surat Sanksi</th>
-						<th>Dokumen Surat Sanksi</th>
-						<th>Dokumen Perbaikan</th>
-					</tr>
-				</thead>
-				<tbody>{data.map((e) =>
-					<tr>
-						<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
-						<td>{e.keterangan}</td>
-						<td>{e.no_sanksi}</td>
-						<td>
-							{e.dokumen.map((e, index) => (
-								<>
-									<em key="index" className="fa-lg far fa-file-code"></em>
-									<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
-										{e.judul}
-									</a>
-									<br />
-								</>
-							))}
-						</td>
-						{perbaikan.length
-							? perbaikan.map((value) => (
-								<tr>
-									<td>
-										{value.dokumen.map((e) => (
-											<>
-												<em className="fa-lg far fa-file-code"></em>
-												{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>
+import { Table } from "reactstrap";
+
+moment.locale("id");
+
+function TableRiwayat({ data = [], data_pelanggaran = {}, role }) {
+  const [openIndex, setOpenIndex] = useState(null);
+
+  const toggleRow = (index) => {
+	setOpenIndex(openIndex === index ? null : index);
+  };
+
+  const handleOpenAlert = () => {
+	Swal.fire({
+	  icon: "error",
+	  title: "Oops...",
+	  html: "Maaf anda tidak memiliki akses untuk menyelesaikan <p>proses ini.</p>",
+	  confirmButtonColor: "#3e3a8e",
+	  confirmButtonText: "Oke",
+	});
+  };
+
+  return (
+	<div className="card ">
+	  <h3 className="mb-3 fw-bold">Riwayat Surat Sanksi</h3>
+
+	  <Table  hover responsive>
+		<thead className="table-header">
+		  <tr>
+			<th>Tanggal</th>
+			<th>Keterangan</th>
+			<th>Nomor Surat Sanksi</th>
+			<th>Dokumen Surat Sanksi</th>
+			<th width="50"></th>
+		  </tr>
+		</thead>
+
+		<tbody>
+		  {data.length === 0 && (
+			<tr>
+			  <td colSpan="5" className="text-center">
+				Data tidak tersedia
+			  </td>
+			</tr>
+		  )}
+
+		  {data.map((item, index) => (
+			<Fragment key={index}>
+			  {/* ROW UTAMA */}
+			  <tr className="main-row">
+				<td>
+				  {item.createdAt
+					? moment(item.createdAt).format("DD/MM/YYYY")
+					: "-"}
+				</td>
+
+				<td>{item.keterangan || "-"}</td>
+
+				<td>{item.no_sanksi || "-"}</td>
+
+				<td>
+				  {item.dokumen?.length > 0 ? (
+					item.dokumen.map((doc, i) => (
+					  <div key={i}>
+						<i className="far fa-file-pdf me-2"></i>
+
+						{role === 2071 ? (
+						  <span
+							className="text-muted"
+							style={{ cursor: "pointer" }}
+							onClick={handleOpenAlert}
+						  >
+							{doc.judul}
+						  </span>
+						) : (
+						  <a
+							href={doc.path}
+							target="_blank"
+							rel="noopener noreferrer"
+							download={doc.judul}
+							className="text-muted"
+						  >
+							{doc.judul}
+						  </a>
+						)}
+					  </div>
+					))
+				  ) : (
+					"-"
+				  )}
+				</td>
+
+				<td className="">
+				  <span
+					onClick={() => toggleRow(index)}
+				  >
+					{openIndex === index ? <em className="fas fa-angle-up"/> : <em className="fas fa-angle-down"/>}
+				  </span>
+				</td>
+			  </tr>
+
+			  {/* DETAIL EXPAND */}
+			  {openIndex === index && (
+				<tr className="detail-row">
+				  <td colSpan="5">
+					<div className="p-3 bg-light rounded">
+					  <Table bordered responsive>
+						<thead>
+						  <tr>
+							<th width="50%">Jenis Pelanggaran</th>
+							<th width="50%">Sanksi</th>
+						  </tr>
+						</thead>
+
+						<tbody>
+						  {data_pelanggaran?.pelanggaran?.length > 0 ? (
+							data_pelanggaran.pelanggaran.map((jp) => (
+							  <tr key={jp._id}>
+								<td>
+								  <p className="mb-1">
+									{jp.pelanggaran}
+								  </p>
+								  <small>
+									Durasi: {jp.tmt_bulan} Bulan
+								  </small>
+								  <br />
+								  <small>
+									Jenis Sanksi Administratif:{" "}
+									{jp.label_sanksi}
+								  </small>
+								</td>
+
+								<td>
+								  <p className="mb-1">{jp.sanksi}</p>
+								  <small>
+									Keterangan:{" "}
+									{jp.keterangan_sanksi || "-"}
+								  </small>
+								</td>
+							  </tr>
 							))
-							: ""}
-					</tr>)}
-				</tbody>
-			</table>
-		</div>
-		// </Datatable>
-	);
+						  ) : (
+							<tr>
+							  <td colSpan="2" className="text-center">
+								Tidak ada data pelanggaran
+							  </td>
+							</tr>
+						  )}
+						</tbody>
+					  </Table>
+					</div>
+				  </td>
+				</tr>
+			  )}
+			</Fragment>
+		  ))}
+		</tbody>
+	  </Table>
+	</div>
+  );
 }
 
-export default TableRiwayat;
+export default TableRiwayat;

components/Sanksi/DetailSanksi.js

@@ -41,8 +41,10 @@ class DetailSanksi extends Component {
 		})
 	};
 
+
 	render() {
 		const { sanksi } = this.state
+		const lastSanksi = sanksi.data?.sanksi?.at(-1);
 		return (
 			<>
 				<p className="lead bb">Detail Sanksi</p>
@@ -158,50 +160,90 @@ class DetailSanksi extends Component {
 
 							</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>
-												{sanksi.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>
+							<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>
+														{sanksi.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>
-																</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>
+																</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>
-																</div>
-															</div>
-														</td>
-													</tr>
-												))}
-											</tbody>
-										</Table>
-									</div>
-								</div>
-							</Col>
-						</FormGroup>
-
+																</td>
+															</tr>
+														))}
+													</tbody>
+												</Table>
+											</div>
+										</div>
+									</Col>
+								</FormGroup>
+						{
+							sanksi.data.riwayat_sanksi?.length ? (
+								<FormGroup row>
+									<Col md={12}>
+										<div className="card b">
+											<div className="card-body bb">
+												<Table responsive>
+													<thead>
+														<tr>
+															<th>Sanksi Saat Ini</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(sanksi.data?.masa_berlaku?.to_date).diff(sanksi.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>
+							) : (
+								""
+							)
+						}
 					</form>
 				}
 

components/Sanksi/TableLaporan.js

@@ -2,11 +2,18 @@ import Datatable from "@/components/Tables/Datatable";
 import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
+import "moment/locale/id";
+
+moment.locale("id");
 
 function TableLaporan({ listData }) {
 
-	const sanksiMap = { 1: "Ringan", 2: "Sedang", 3: "Berat" };
-	
+	const sanksiMap = {
+		1: { label: "Ringan", className: "badge badge-success" },
+		2: { label: "Sedang", className: "badge badge-warning" },
+		3: { label: "Berat", className: "badge badge-danger" },
+	};
+	console.log(listData)
 	return (
 		<div className="card b">
 			<div className="card-body card-over">
@@ -46,8 +53,6 @@ function TableLaporan({ listData }) {
 														<div className="media-body d-flex">
 															<div>
 																<h4 className="m-0">{data.pt.nama.length > 65 ? data.pt.nama.substring(0, 65) + "..." : data.pt.nama}</h4>
-																{/* <h4 className="m-0">{data.pt.nama}</h4> */}
-																{/* <p>{data.keterangan.length > 200 ? data.keterangan.substring(0, 200) + "..." : data.keterangan}</p> */}
 																<p className="w-105">{data.keterangan}</p>
 															</div>
 														</div>
@@ -56,24 +61,21 @@ function TableLaporan({ listData }) {
 											</td>
 											<td>
 												{data.sanksi?.masa_berlaku ? (
-													new Date(data.sanksi?.masa_berlaku.to_date).getTime() + 86400000 > Date.now() ? <div className="badge badge-primary">Berlaku</div> : <div className="badge badge-warning">Tidak berlaku</div>
+													new Date(data.sanksi?.masa_berlaku.to_date).getTime() + 86400000 > Date.now() ? <div className="badge badge-primary">Berlaku</div> : <div className="badge badge-red">Tidak berlaku</div>
 												) : ""}
+												<p>
+													{data.sanksi?.masa_berlaku?.to_date ? (<span className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</span>) : (<span className="m-0">6 Bulan</span>)}
+												</p>
 											</td>
 											<td>{data.sanksi ? <div className="badge badge-green">Sudah ditetapkan</div> : <div className="badge badge-red">Belum ditetapkan</div>}
-												{/* {data?.sanksi?.levelSanksi? 
-											<p>Sanksi Administratif :</p>
-										:
-										<p>
-											""
-										</p>
-										} */}
 
 												{data?.sanksi?.levelSanksi && (
-													<p>Sanksi Administratif : {sanksiMap[data?.sanksi?.levelSanksi]}</p>
+													<div className={sanksiMap[data.sanksi.levelSanksi]?.className}>
+														Sanksi Administratif : {sanksiMap[data.sanksi.levelSanksi]?.label}
+													</div>
 												)}
 
 											</td>
-											{/* <td>{moment(data.createdAt).format("MM-DD-YYYY")}</td> */}
 											<td>
 												<div className="ml-auto">
 													<Link

components/TurunSanksi/DetailSanksi.js

@@ -17,6 +17,7 @@ function DetailSanksi({ data, noTitle = false, role }) {
 		})
 	};
 	const lastSanksi = data?.sanksi?.[data.sanksi.length - 1];
+
 	return (
 		<Card className="card-default">
 			<CardBody>
@@ -48,6 +49,49 @@ function DetailSanksi({ data, noTitle = false, role }) {
 							<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>
@@ -69,7 +113,7 @@ function DetailSanksi({ data, noTitle = false, role }) {
 																		<div>
 																			<p>{lastSanksi.description}</p>
 																			<p>
-																				Durasi : {moment(data?.masa_berlaku?.from_date).diff(data?.masa_berlaku?.to_date, 'month')} Bulan
+																				Durasi : {moment(data?.masa_berlaku?.to_date).diff(data?.masa_berlaku?.from_date, 'month')} Bulan
 																			</p>
 																			<p>Jenis Sanksi Administratif : {lastSanksi.label}</p>
 																		</div>
@@ -86,49 +130,7 @@ function DetailSanksi({ data, noTitle = false, role }) {
 								</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>
+							""
 						)
 					}
 
@@ -142,14 +144,15 @@ function DetailSanksi({ data, noTitle = false, role }) {
 						<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>)}
+							{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?.sanksi && data.sanksi.map((e) => <li><strong>{e.description}</strong> </li>)}
+							{/* {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>

components/TurunSanksi/InputTanggal.js

@@ -396,7 +396,7 @@ class InputTanggal extends Component {
                                     </div>
                                 </FormGroup>
                                 <FormGroup row className="mt-3">
-                                    <label className="col-md-2 col-form-label">Dokumen Perubahan sanksi : <span className="text-danger">*</span></label>
+                                    <label className="col-md-2 col-form-label">Dokumen Perubahan Sanksi : <span className="text-danger">*</span></label>
                                     <div className="col-md-10">
                                         <Field name="dokumen">
                                             {({ field, form }) => (
@@ -418,7 +418,7 @@ class InputTanggal extends Component {
                                                                                 <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
                                                                             </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
-                                                                                <h5 className="text-center dz-default dz-message">Upload dokumen Perubahan</h5>
+                                                                                <h5 className="text-center dz-default dz-message">upload dokumen perubahan</h5>
                                                                             </div>
                                                                         }
                                                                         </div>

components/TurunSanksi/TableRiwayat.js

@@ -1,77 +1,166 @@
-import Datatable from "@/components/Tables/Datatable";
+import React, { useState, Fragment } from "react";
 import moment from "moment";
-import 'moment/min/locales';
+import "moment/locale/id";
 import Swal from "sweetalert2";
-import 'moment/locale/id';
-moment.locale('id');
-
-function TableRiwayat({ data, perbaikan , 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'
-		})
-	};
-	return (
-		// <Datatable options={{ responsive: true }}>
-		<div className="card-over">
-			<table className="table table-striped my-4 w-100">
-				<thead>
-					<tr>
-						<th>Tanggal</th>
-						<th>Keterangan</th>
-						<th>Nomor Surat Sanksi</th>
-						<th>Dokumen Surat Sanksi</th>
-						<th>Dokumen Perbaikan</th>
-					</tr>
-				</thead>
-				<tbody>{data.map((e) =>
-					<tr>
-						<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
-						<td>{e.keterangan}</td>
-						<td>{e.no_sanksi}</td>
-						<td>
-							{e.dokumen.map((e, index) => (
-								<>
-									<em key="index" className="fa-lg far fa-file-code"></em>
-									<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
-										{e.judul}
-									</a>
-									<br />
-								</>
-							))}
-						</td>
-						{perbaikan.length
-							? perbaikan.map((value) => (
-								<tr>
-									<td>
-										{value.dokumen.map((e) => (
-											<>
-												<em className="fa-lg far fa-file-code"></em>
-												{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>
-							))
-							: ""}
-					</tr>)}
-				</tbody>
-			</table>
-		</div>
-		// </Datatable>
-	);
+import { Table } from "reactstrap";
+
+moment.locale("id");
+
+function TableRiwayat({ data = [], data_pelanggaran = {}, role }) {
+  const [openIndex, setOpenIndex] = useState(null);
+
+  const toggleRow = (index) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  const handleOpenAlert = () => {
+    Swal.fire({
+      icon: "error",
+      title: "Oops...",
+      html: "Maaf anda tidak memiliki akses untuk menyelesaikan <p>proses ini.</p>",
+      confirmButtonColor: "#3e3a8e",
+      confirmButtonText: "Oke",
+    });
+  };
+
+  return (
+    <div className="card ">
+      <h3 className="mb-3 fw-bold">Riwayat Surat Sanksi</h3>
+
+      <Table  hover responsive>
+        <thead className="table-header">
+          <tr>
+            <th>Tanggal</th>
+            <th>Keterangan</th>
+            <th>Nomor Surat Sanksi</th>
+            <th>Dokumen Surat Sanksi</th>
+            <th width="50"></th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {data.length === 0 && (
+            <tr>
+              <td colSpan="5" className="text-center">
+                Data tidak tersedia
+              </td>
+            </tr>
+          )}
+
+          {data.map((item, index) => (
+            <Fragment key={index}>
+              {/* ROW UTAMA */}
+              <tr className="main-row">
+                <td>
+                  {item.createdAt
+                    ? moment(item.createdAt).format("DD/MM/YYYY")
+                    : "-"}
+                </td>
+
+                <td>{item.keterangan || "-"}</td>
+
+                <td>{item.no_sanksi || "-"}</td>
+
+                <td>
+                  {item.dokumen?.length > 0 ? (
+                    item.dokumen.map((doc, i) => (
+                      <div key={i}>
+                        <i className="far fa-file-pdf me-2"></i>
+
+                        {role === 2071 ? (
+                          <span
+                            className="text-muted"
+                            style={{ cursor: "pointer" }}
+                            onClick={handleOpenAlert}
+                          >
+                            {doc.judul}
+                          </span>
+                        ) : (
+                          <a
+                            href={doc.path}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            download={doc.judul}
+                            className="text-muted"
+                          >
+                            {doc.judul}
+                          </a>
+                        )}
+                      </div>
+                    ))
+                  ) : (
+                    "-"
+                  )}
+                </td>
+
+                <td className="">
+                  <span
+                    onClick={() => toggleRow(index)}
+                  >
+                    {openIndex === index ? <em className="fas fa-angle-up"/> : <em className="fas fa-angle-down"/>}
+                  </span>
+                </td>
+              </tr>
+
+              {/* DETAIL EXPAND */}
+              {openIndex === index && (
+                <tr className="detail-row">
+                  <td colSpan="5">
+                    <div className="p-3 bg-light rounded">
+                      <Table  responsive>
+                        <thead>
+                          <tr>
+                            <th width="50%">Jenis Pelanggaran</th>
+                            <th width="50%">Sanksi</th>
+                          </tr>
+                        </thead>
+
+                        <tbody>
+                          {data_pelanggaran?.pelanggaran?.length > 0 ? (
+                            data_pelanggaran.pelanggaran.map((jp) => (
+                              <tr key={jp._id}>
+                                <td>
+                                  <p className="mb-1">
+                                    {jp.pelanggaran}
+                                  </p>
+                                  <small>
+                                    Durasi: {jp.tmt_bulan} Bulan
+                                  </small>
+                                  <br />
+                                  <small>
+                                    Jenis Sanksi Administratif:{" "}
+                                    {jp.label_sanksi}
+                                  </small>
+                                </td>
+
+                                <td>
+                                  <p className="mb-1">{jp.sanksi}</p>
+                                  <small>
+                                    Keterangan:{" "}
+                                    {jp.keterangan_sanksi || "-"}
+                                  </small>
+                                </td>
+                              </tr>
+                            ))
+                          ) : (
+                            <tr>
+                              <td colSpan="2" className="text-center">
+                                Tidak ada data pelanggaran
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </Table>
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </Fragment>
+          ))}
+        </tbody>
+      </Table>
+    </div>
+  );
 }
 
-export default TableRiwayat;
+export default TableRiwayat;

pages/app/naik-sanksi/detail.js

@@ -68,11 +68,9 @@ class Detail extends Component {
 								<DetailSanksi data={sanksi.data} role={this.props.user.role.id} />
 								<InputTanggal query={query} token={token} data={sanksi.data} listSanksi={this.state.listSanksi} />
 								<Card className="card-default">
-									<CardHeader>
-										<CardTitle>Riwayat</CardTitle>
-									</CardHeader>
+									
 									<CardBody>
-										<TableRiwayat data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan} role={this.props.user.role.id}  />
+										<TableRiwayat data_pelanggaran={sanksi.data} data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan} role={this.props.user.role.id}  />
 									</CardBody>
 								</Card>
 							</Col>

pages/app/sanksi/index.js

@@ -109,7 +109,6 @@ class Sanksi extends Component {
 
 	render() {
 		const { pelaporan, graph } = this.state;
-		console.log(pelaporan)
 		return (
 			<ContentWrapper>
 				<div className="content-heading">

pages/app/turun-sanksi/detail.js

@@ -42,7 +42,6 @@ class Detail extends Component {
 
 	render() {
 		const { files, sanksi, pt, listSanksi } = this.state;
-		console.log(sanksi)
 		const { query, token } = this.props;
 		return (
 			<ContentWrapper unwrap>
@@ -66,14 +65,11 @@ class Detail extends Component {
 						<Row>
 
 							<Col xl="9">
-								<DetailSanksi data={sanksi.data} role={this.props.user.role.id}/>
+								<DetailSanksi data={sanksi.data} role={this.props.user.role.id} />
 								<InputTanggal query={query} token={token} data={sanksi.data} listSanksi={this.state.listSanksi} />
 								<Card className="card-default">
-									<CardHeader>
-										<CardTitle>Riwayat</CardTitle>
-									</CardHeader>
 									<CardBody>
-										<TableRiwayat data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan}role={this.props.user.role.id} />
+										<TableRiwayat data_pelanggaran={sanksi.data} data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan} role={this.props.user.role.id} />
 									</CardBody>
 								</Card>
 							</Col>