[Notulensi Rapat SIDALI 11/02/2026]

1. Membuat tabel riwayat baru untuk naik dan turun sanksi agar lebih spesifik. Di menu turun dan naik sanksi dan menu pemantauan. (Desainnya sudah dibuatkan) 30%
2. Kolom ‘Dokumen Perbaikan’ di tabel riwayat menu turun sanksi/naik sanksi hilangkan✅
3. Tanggal surat -> mengambil data dari isi TMT
4. Minta di purge ke FE
5. Akan ada 3 skema LLDIKTI (dari dikti setelah melakukan semua prosesnya, ada yang  mendelegasikan langsung dari dikti di menu penjadwalan evaluasi, ada yang di menu pemeriksanaan)
6. get data LLDIKTI di dashboard ambil dari mana?

Backlog:
1. Bug: Saat melakukan turun sanksi, jenis pelanggaran belum ke update ✅
3. Memunculkan jumlah durasi TMT di menu sanksi✅
2. Menambahkan keterangan/kolom baru tentang ‘sanksi saat ini’ dan kalau bisa ada warnanya berdasarkan jenis sanksi ✅
3. Memunculkan jumlah durasi TMT di menu sanksi✅
4. Menghapus keterikatan tanggal di menu perpanjangan sanksi
5. Melakukan analisis terhadap proses laporan tanpa adanya menu keberatan dan banding

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,8 @@ function DetailSanksi({ data, noTitle = false, role }) {
 		})
 	};
 	const lastSanksi = data?.sanksi?.[data.sanksi.length - 1];
+	console.log(lastSanksi)
+
 	return (
 		<Card className="card-default">
 			<CardBody>
@@ -48,6 +50,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 +114,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 +131,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 +145,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

@@ -66,14 +66,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>