ptb-fe/components/PerpanjanganSanksi/Riwayat.js

import Datatable from "@/components/Tables/Datatable";
import moment from "moment";
import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
import { API_URL } from "@/env";
import Swal from "sweetalert2";

function Riwayat({ data, 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 (
		<Card className="card-default">
			<CardHeader>
				<CardTitle>Riwayat Perpanjangan Sanksi</CardTitle>
			</CardHeader>
			<CardBody>
				<Datatable options={{ responsive: true }}>
					<table className="table table-striped my-4 w-100"  data-order='[ [2, "asc"]]'>
						<thead>
							<tr>
								<th>Tanggal perpanjangan</th>
								<th>Dokumen</th>
								<th>Perpanjangan Ke</th>

							</tr>
						</thead>
						<tbody>
							{data?.length
							
								? data.map((data, i) => (
									
								<tr>
									<td>{moment(data.masa_berlaku.from_date).format("DD MMMM YYYY")}-{moment(data.masa_berlaku.to_date).format("DD MMMM YYYY")}</td>
									<td>
										{data.dokumen?.map((e) => (
											<>
												<em className="fa-lg far fa-file-code"></em>
												{role === 2024 ?
													<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>
									<td>{i+1}</td>
								</tr>
							)) : (
								""
							)}
						</tbody>
					</table>
				</Datatable>
			</CardBody>
		</Card>
	);
}

export default Riwayat;