fix berita acara dimenu sanksi -detail

csrf token
implementasi token csrf create log, create  pengunjung, create sanksi, create laporan dikti
fix code
env. localhost

actions/pelaporan.js

@@ -74,8 +74,8 @@ export const getPelaporanPublic = async ({ number, noHp }) => {
 	}
 };
 
-export const createPelaporan = async (token, data) => {
-	const res = await axiosAPI.post("/laporan/create", data, { headers: { Authorization: token } });
+export const createPelaporan = async (token, data, tokenCsrf) => {
+	const res = await axiosAPI.post(`/laporan/create?_csrf=${tokenCsrf}`, data, { headers: { Authorization: token } });
 	await createLog(token, { aktivitas: "Berhasil Membuat pelaporan" });
 	return res.data;
 };

actions/pengunjung.js

@@ -1,10 +1,10 @@
 import axios from "@/config/axios";
 import axios2 from "axios";
 
-export const createPengunjung = async () => {
+export const createPengunjung = async (_csrf) => {
 	try {
 		const jsonip = await axios2.get("https://ip-api.io/json");
-		const res = await axios.post("/pengunjung/create", {
+		const res = await axios.post(`/pengunjung/create?_csrf=${_csrf}`, {
 			os: navigator.userAgentData.platform,
 			ipv4: jsonip.data.ip,
 			location: {
@@ -38,12 +38,14 @@ export const getPengunjungPublic = async ({ bulan, tahun }) => {
 		let url = "/public/pengunjung";
 		if (bulan || tahun) {
 			url += "?";
+			const parseURL = [];
 			if (bulan) {
-				url += `bulan=${bulan}`;
+				parseURL.push(`bulan=${bulan}`);
 			}
 			if (tahun) {
-				url += `bulan=${tahun}`;
+				parseURL.push(`tahun=${tahun}`);
 			}
+			url += parseURL.join("&");
 		}
 		const res = await axios.get(url);
 		return res.data;

actions/sanksi.js

@@ -3,8 +3,8 @@ import axios from "../config/axios";
 import { bypassCabutSanksi } from "./cabutSanksi";
 import { createLog } from "./log";
 
-export const createSanksi = async (token, id, data) => {
-	const res = await axiosAPI.post(`/sanksi/create/${id}`, data, { headers: { Authorization: token } });
+export const createSanksi = async (token, id, data, _csrf) => {
+	const res = await axiosAPI.post(`/sanksi/create/${id}?_csrf=${_csrf}`, data, { headers: { Authorization: token } });
 	await createLog(token, { aktivitas: `Berhasil melakukan penetapan sanksi, id: ${id}` });
 	return res.data;
 };

actions/security.js

@@ -0,0 +1,13 @@
+import axios from "@/config/axios";
+import axios2 from "axios";
+
+export const getCsrf = async () => {
+    try {
+        let url = `/csrf`;
+        const res = await axios.get(url);
+        return res.data;
+    } catch (error) {
+        console.log("error", error);
+        return false;
+    }
+};

components/Layout/Menu.js

@@ -39,6 +39,12 @@ const Menu = [
 		icon: "icon-social-steam",
 		translate: "sidebar.nav.SANKSI",
 	},
+	{
+		name: "SanksiV2",
+		path: "/app/sanksiv2",
+		icon: "icon-social-steam",
+		translate: "sidebar.nav.SANKSI",
+	},
 	{
 		heading: "Dikti Ristek/LLDIKTI",
 		translate: "sidebar.heading.DIKTI_RISTEK",

components/Pelaporan/InputData.js

@@ -10,6 +10,7 @@ import moment from "moment";
 import "react-toastify/dist/ReactToastify.css";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
+import { getCsrf } from "../../actions/security";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -72,8 +73,9 @@ export class InputData extends Component {
 	}
 
 	componentDidMount = async () => {
+		const tokenCsrf = await getCsrf();
 		const pelanggaran = await getPelanggaranPublic();
-		this.setState({ pelanggaran });
+		this.setState({ pelanggaran, tokenCsrf });
 	};
 
 	optionsJenisPelanggaran = (pelanggaran) => {
@@ -140,8 +142,8 @@ export class InputData extends Component {
 		this.state.files.forEach((e) => {
 			formdata.append("dokumen", e);
 		});
+		const create = createPelaporan(token, formdata, this.state.tokenCsrf.token);
 
-		const create = createPelaporan(token, formdata);
 		await toast.promise(create, {
 			pending: "Loading...",
 			success: "Berhasil buat laporan",

components/Riwayat/TableRiwayatt.js

@@ -20,7 +20,6 @@ class TableRiwayatt extends Component {
     }
 
     render() {
-        // console.log(this.state.dataRiwayat.data?.map(e => e.id))
         return (
             <div className="card b ">
                 <div style={{ height: 500 }} className="card-body card-over">

components/Sanksi/DetailSanksi.js

@@ -2,53 +2,81 @@ import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
 import { Col, FormGroup, Table, Button } from "reactstrap";
 import { API_URL } from "@/env";
+import React, { Component } from "react";
+import { getOneSanksi } from "../../actions/sanksi";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import ComponentBA from "../Sanksi/SuratBA _detail";
+import Link from "next/dist/client/link";
 
-function DetailSanksi({ data, noTitle = false }) {
-	return (
-		<>
-			{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>
+
+
+
+class DetailSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const sanksi = await getOneSanksi(token, query.id);
+		this.setState({ sanksi });
+	};
+
+	render() {
+		const { sanksi } = this.state
+		return (
+			<>
+				<p className="lead bb">Detail Sanksi</p>
+				{sanksi.data &&
+					<form className="form-horizontal">
+						<FormGroup row>
+							<Col md="4">Nomor Sanksi:</Col>
+							<Col md="8">
+								<strong>{sanksi.data.no_sanksi}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Nama Perguruan Tinggi:</Col>
+							<Col md="8">
+								<strong>{sanksi.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>
+							<p>{sanksi.data.keterangan}</p>
 						</Scrollable>
 					</Col>
 				</FormGroup>
 				<FormGroup row>
 					<Col md="4">Tanggal Penetapan Sanksi:</Col>
 					<Col md="8">
-						<strong>{moment(data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
+						<strong>{moment(sanksi.data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
 					</Col>
 				</FormGroup>
 				{
-					data.tanggal_akhir_keberatan &&
+					sanksi.data.tanggal_akhir_keberatan &&
 					<FormGroup row>
 						<Col md="4">Tanggal Akhir Pengajuan Keberatan</Col>
 						<Col md="8">
-							<strong>{moment(data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
+							<strong>{moment(sanksi.data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
 						</Col>
 					</FormGroup>
 				}
 				{
-					data.jawaban?.keberatan?.tanggal_akhir_banding &&
+					sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding &&
 					<FormGroup row>
 						<Col md="4">Tanggal Akhir Pengajuan Banding:</Col>
 						<Col md="8">
-							<strong>{moment(data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
+							<strong>{moment(sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
 						</Col>
 					</FormGroup>
 				}
@@ -58,7 +86,7 @@ function DetailSanksi({ data, noTitle = false }) {
 						<Scrollable height="120px" className="list-group">
 							<table className="table table-bordered bg-transparent">
 								<tbody>
-									{data.dokumen.map((e) => (
+									{sanksi.data.dokumen.map((e) => (
 										<tr>
 											<td style={{ width: "30px" }}>
 												<em className="fa-lg far fa-file-code"></em>
@@ -75,17 +103,36 @@ function DetailSanksi({ data, noTitle = false }) {
 						</Scrollable>
 					</Col>
 				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Dokumen Acara Pleno:</Col>
-					<Col md="8">
-						<span>
-							<Button color className="btn-labeled-4 mt-0">
-								<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
-							</Button>
-						</span>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
+
+						<FormGroup row>
+							<Col md="4">Dokumen Acara Pleno:</Col>
+							<Col md="8">
+								<div>
+									<ReactToPrint
+										trigger={() => {
+											return <span>
+												<Link
+													href={{
+														pathname: "/app/sanksi/detail",
+														query: { id: this.props.query.id },
+													}}>
+													<Button color className="btn-labeled-4 mt-0">
+														<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
+													</Button>
+												</Link>
+											</span>
+										}}
+										content={() => this.componentRef}
+									/>
+									<div style={{ display: "none" }}>
+										<ComponentBA ref={el => (this.componentRef = el)} query={this.props.query} />
+									</div>
+								</div>{/* <BeritaAcara
+							query={this.props.query}
+						/> */}
+							</Col>
+						</FormGroup>
+						<FormGroup row>
 					<Col md={12}>
 						<div className="card b">
 							<div className="card-body bb">
@@ -97,7 +144,7 @@ function DetailSanksi({ data, noTitle = false }) {
 										</tr>
 									</thead>
 									<tbody>
-										{data.pelanggaran.map((jp, index) => (
+										{sanksi.data.pelanggaran.map((jp, index) => (
 											<tr key={jp._id}>
 												<td width={50}>
 													<div className="media align-items-center">
@@ -128,9 +175,147 @@ function DetailSanksi({ data, noTitle = false }) {
 						</div>
 					</Col>
 				</FormGroup>
-			</form>
-		</>
-	);
+
+					</form>
+				}
+
+			</>
+		)
+	}
+
+
+
 }
 
+
+
+// function DetailSanksi({ data, noTitle = false, query }) {
+
+// 	return (
+// 		<>
+// 			{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">Tanggal Penetapan Sanksi:</Col>
+// 		<Col md="8">
+// 			<strong>{moment(data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
+// 		</Col>
+// 	</FormGroup>
+// 	{
+// 		data.tanggal_akhir_keberatan &&
+// 		<FormGroup row>
+// 			<Col md="4">Tanggal Akhir Pengajuan Keberatan</Col>
+// 			<Col md="8">
+// 				<strong>{moment(data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
+// 			</Col>
+// 		</FormGroup>
+// 	}
+// 	{
+// 		data.jawaban?.keberatan?.tanggal_akhir_banding &&
+// 		<FormGroup row>
+// 			<Col md="4">Tanggal Akhir Pengajuan Banding:</Col>
+// 			<Col md="8">
+// 				<strong>{moment(data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</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 style={{ width: "30px" }}>
+// 									<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>
+// 	<FormGroup row>
+// 		<Col md="4">Dokumen Acara Pleno:</Col>
+// 		<Col md="8">
+// 			<BeritaAcara
+// 				query={query}
+// 			/>
+// 		</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>
+// </form>
+// 		</>
+// 	);
+// }
+
 export default DetailSanksi;

components/Sanksi/SuratBA _detail.js

@@ -0,0 +1,220 @@
+import React, { Component } from 'react';
+import SignatureCanvas from 'react-signature-canvas'
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
+import { connect } from "react-redux";
+import moment from "moment";
+import 'moment/locale/id'
+moment.locale('id')
+import { getAutoSave } from "@/actions/autosave";
+import { getOneSanksi } from '../../actions/sanksi';
+
+
+
+
+class ComponentBA extends React.Component {
+    formData = {}
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataSanksi: {},
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+
+        const dataSanksi = await getOneSanksi(token, query.id);
+
+        const id = dataSanksi.data.laporan._id;
+        const dataLaporan = await getOneLaporan(token, id);
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const getDataSuratBAFromAuto = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const getDataPelanggaranFromAuto = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
+        this.setState({ dataPelanggaran: getDataPelanggaranFromAuto })
+        this.setState(getDataSuratBAFromAuto)
+
+        this.setState({ dataSanksi, dataLaporan });
+    }
+
+    render() {
+        const { dataLaporan } = this.state
+
+        return (
+            <page>
+                <div className='BA-Header'>
+                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                    <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    {this.state.dataSanksi.data && (<h3 className='text-uppercase' >{this.state.dataSanksi.data.laporan.pt.nama}</h3>)}
+                </div>
+                <div className='BA-body pt-3'>
+                    <p>
+                        Pada hari ini
+                        {this.state?.setTanggal === true ?
+                            <span > {moment(this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(this.state?.tanggal).format("YYYY")},</span> :
+                            <span> &nbsp;- &nbsp;</span>
+                        }
+                        bertempat di
+                        {this.state?.tempat ?
+                            <span>
+                                &nbsp;{this.state?.tempat}
+                            </span>
+                            :
+                            <span>-</span>
+                        }
+                        ,
+                        telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {this.state.dataSanksi.data && (<span>{this.state.dataSanksi.data.laporan.pt.nama}</span>)}, yang dihadiri oleh:
+                        {dataLaporan?.data ? <ol>
+
+                            {/* {this.state.dataSanksi?.data?.laporan?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)} */}
+                            {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+
+
+
+                        </ol>
+                            : "Tidak ada peserta"}
+                    </p>
+                    <p>
+                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {this.state.dataSanksi.data && (<span>{this.state.dataSanksi.data.laporan.pt.nama}</span>)}, disampaikan sebagai berikut:
+
+                        <ol className='mt-3'>
+                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {this.state.dataSanksi.data && (<span>{this.state.dataSanksi.data.laporan.pt.nama}</span>)}, tanggal
+                                {this.state?.setTanggal === true ?
+                                    <span> &nbsp;{moment(this.state?.tanggal).format("DD-MM-YYYY")}</span>
+                                    :
+                                    <span> &nbsp;....... &nbsp;</span>
+                                }
+                            </li>
+                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
+                        </ol>
+                    </p>
+                    <div className='table-a my-4' >
+                        <table >
+                            <thead>
+                                <tr>
+                                    <th rowspan="2">NO</th>
+                                    <th rowspan="2">NAMA DAN IZIN PRODI</th>
+                                    <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
+                                    <th rowspan="2">SIMPULAN</th>
+                                    <th rowspan="2">REKOMENDASI</th>
+                                </tr>
+                                <tr>
+                                    <th>PASAL</th>
+                                    <th>BUTIR PELANGGARAN</th>
+                                    <th>DESKRIPSI PELANGGARAN</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {this.state.dataPelanggaran?.data?.map((e, i) => (
+                                    <tr key={e._id}>
+                                        <td>{++i}</td>
+                                        {this.state.dataSanksi.data && (<td className='BA-header'>{this.state.dataSanksi.data.laporan.pt.nama}</td>)}
+                                        <td>{e.pasal}</td>
+                                        <td>{e.butir_pelanggaran}</td>
+                                        <td>{e.pelanggaran}</td>
+                                        {this.state.descPelanggaran &&
+                                            (
+                                                <td style={{ minWidth: "215px" }} >{"" || this.state.descPelanggaran[e?._id]?.simpulan
+                                                }</td>
+                                            )
+                                        }
+                                        {/* <td style={{ minWidth: "215px" }} >{"" || dataSuratBA?.descPelanggaran[e?._id]?.simpulan
+                                            || this.state.descPelanggaran[e?._id]?.simpulan
+                                        }</td> */}
+                                        <td style={{ minWidth: "215px" }}>{`Sanksi Administratif berupa ${this.state.sanksi}` || ""}</td>
+                                    </tr>
+
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <p>
+                        <ol start="3">
+                            <li>Temuan Lain:
+                                <ol type="a">
+                                    {this.state?.temuanLain ?
+                                        <span>{this.state?.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>Hal-hal yang memberatkan, sebagai berikut:
+                                <ol type="a">
+                                    {this.state?.memberatkan ?
+                                        <span>{this.state?.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>hal-hal yang meringankan, sebagai berikut:
+                                <ol type="a">
+                                    {this.state?.meringankan ?
+                                        <span>{this.state?.meringankan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa
+                                    {this.state?.sanksi ?
+                                        <span>{this.state?.sanksi}</span>
+                                        : "Belum Diisi"}
+                                    ”.</strong>
+                            </li>
+                        </ol>
+                    </p>
+                    <p>
+                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                    </p>
+                    <div className='mt-5'>
+                        <div className='header-ttd signature-border pt-1 pb-1'>
+                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT PENYUSUNAN REKOMENDASI</text>
+                        </div>
+                        <div id="ttd">
+                            {/* {this.state.dataSanksi?.data
+                                ? this.state.dataSanksi.data?.laporan.peserta_penetapan_sanksi?.map((value) => (
+                                    <div className='ttd-div'>
+                                        <div className='sign-ttd'>
+                                            <img
+                                                className='sign-ttd'
+                                                src={value.ttd.path} />
+                                        </div>
+                                        <div className='sign-nama'>
+                                            <text>
+                                                {value.nama}
+                                            </text>
+                                        </div>
+                                    </div>
+                                )) : ""} */}
+
+                            {dataLaporan
+                                ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
+                                    <div className='ttd-div'>
+                                        <div className='sign-ttd'>
+                                            <img
+                                                className='sign-ttd'
+                                                src={value.ttd.path} />
+                                        </div>
+                                        <div className='sign-nama'>
+                                            <text>
+                                                {value.nama}
+                                            </text>
+                                        </div>
+                                    </div>
+                                )) : ""}
+                        </div>
+                    </div>
+
+                </div>
+
+                <div id="footer">
+                    <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
+                </div>
+            </page>
+        )
+    }
+
+}
+export default ComponentBA

components/Sanksi/TablePenetapanSanksi.js

@@ -22,6 +22,7 @@ export class TablePenetapanSanksi extends Component {
 			checkedData: [],
 			labelSanksi: [],
 			btnDelegasi: false,
+			trigger: false,
 		};
 		this.onHandleChange = this.onHandleChange.bind(this)
 	}
@@ -31,19 +32,29 @@ export class TablePenetapanSanksi extends Component {
 		const { id } = query;
 		const pelanggaran = await getPelanggaran(token);
 		const getDataSave = await getAutoSave({ id, laporan: true });
-		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
-		this.setState({ pelanggaran, checkedData: autoSaveDataPelanggaran ? autoSaveDataPelanggaran.data.map(e => e._id) : [] });
-		this.checkedData = this.state.checkedData
-		this.setState({ labelSanksi: autoSaveDataPelanggaran ? autoSaveDataPelanggaran?.data?.map(e => ({ value: e._id, labelSanksi: e.label_sanksi })) : [] })
+		const getDataPelanggaranfromAutoSave = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
+		if (this.state.trigger === false || this.ttate.trigger === true) {
+			if (getDataPelanggaranfromAutoSave === "null")
+				this.setState({ checkedData: [] })
+			else{
+				this.setState({
+					checkedData: getDataPelanggaranfromAutoSave ? getDataPelanggaranfromAutoSave?.data?.map(e => e._id) : [],
+					labelSanksi: getDataPelanggaranfromAutoSave ? getDataPelanggaranfromAutoSave?.data?.map(e => ({ value: e._id, labelSanksi: e.label_sanksi })) : []
+				})
+			}}
+			this.setState({
+				pelanggaran
+			});
 	};
 
 	onHandleChange = (evt) => {
-		const checked = evt.target.checked;
+		const checked = evt.target.checked // item terceklis true/false
 		const item = evt.target.value;
-		if (checked) this.state.checkedData.push(evt.target.value);
-		// else this.setState((prevState) => ({ ...prevState, checkedData: prevState.checkedData.filter((e) => e != item) }));
-		// else this.setState({ checkedData: this.state.checkedData.filter((e) => e != item) });
+		if (checked)
+			this.state.checkedData.push(item)
 		else this.state.checkedData = this.state.checkedData.filter((e) => e != item)
+		this.setState({ trigger: !this.state.trigger })
+
 		this.props.setCheckedData(this.state.checkedData);
 	};
 

env.js

@@ -1,3 +1,3 @@
 // export const TOKEN=77aecfec-10ac-3b4f-ab59-3fbfbeed6324
 export const API_URL = "http://localhost:5000/v1";
-// export const API_URL = "https://api.sidali.sixsenz.net/v1";
+//export const API_URL = "https://dev.api.sidali.kemdikbud.go.id/v1";

package-lock.json

@@ -4222,6 +4222,11 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
       "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
     },
+    "cryptr": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/cryptr/-/cryptr-6.2.0.tgz",
+      "integrity": "sha512-jYi8SxvOFebTT7EYOABiPpHKY6lwWaP9IVcvT/aIVJUVoFdzTgi0ySPCL78q1ig8w2kwfXFCZACXoCXaye57aw=="
+    },
     "css": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",

package.json

@@ -36,6 +36,7 @@
     "chartist": "0.11.4",
     "core-js": "2.5.7",
     "cropper": "4.1.0",
+    "cryptr": "^6.2.0",
     "d3": "3.5.17",
     "datatables.net": "1.10.24",
     "datatables.net-bs": "1.10.24",

pages/app/index.js

@@ -7,6 +7,7 @@ import Login from "@/components/Main/Login";
 import { connect } from "react-redux";
 import { createPengunjung } from "@/actions/pengunjung";
 import ChartdataHome from "../../components/Main/ChartdataHome";
+import { getCsrf } from "../../actions/security";
 
 const menu = [
   {
@@ -34,8 +35,10 @@ class App extends Component {
 
   async componentDidMount() {
     const { token } = this.props;
+    const getToken = await getCsrf();
+    const _csrf = getToken.token;
     if (!token) {
-      await createPengunjung();
+      await createPengunjung(_csrf);
     }
   }
 

pages/app/keberatan/index.js

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

pages/app/pelaporan/index.js

@@ -11,6 +11,7 @@ import Loader from "@/components/Common/Loader";
 import Router from "next/router";
 import { createLog } from "@/actions/log";
 import swal from "sweetalert2";
+import { getCsrf } from "../../../actions/security";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -25,7 +26,9 @@ class Pelaporan extends Component {
 
 	componentDidMount = async () => {
 		const { token } = this.props;
-		await createLog(token, { aktivitas: "Mengakses halaman Pelaporan", menu: "Pelaporan" });
+		const _csrf = await getCsrf();
+		const tokenCsrf = _csrf.token;
+		await createLog(token, { aktivitas: "Mengakses halaman Pelaporan", menu: "Pelaporan", _csrf: tokenCsrf });
 		const pelaporan = await getPelaporan(this.props.token);
 		const graph = await getGraph(this.props.token, {
 			laporanTahun: true,

pages/app/sanksi/detail.js

@@ -57,7 +57,7 @@ class Detail extends Component {
 							<CardBody>
 								<Row>
 									<Col>
-										<DetailSanksi data={sanksi.data} />
+										<DetailSanksi data={sanksi.data} query={this.props.query} />
 									</Col>
 								</Row>
 							</CardBody>

pages/app/sanksi/proses.js

@@ -19,6 +19,7 @@ import { ToastContainer, toast } from "react-toastify";
 import BeritaAcara from "@/components/Sanksi/BeritaAcara";
 import { getAutoSave, inputAutoSave } from "@/actions/autosave";
 import swal from "sweetalert2";
+import { getCsrf } from "../../../actions/security";
 
 
 
@@ -49,13 +50,15 @@ class ProsesSanksi extends Component {
 		const { query, token } = this.props;
 		const { id } = query;
 		const pelaporan = await getOneLaporan(token, id);
+		const getToken = await getCsrf();
+		const _csrf = getToken.token;
 		const { data: listSanksi } = await getPelanggaranSanksi(token)
 		const getDataSave = await getAutoSave({ id, laporan: true });
 		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
 		const activeStep = getDataSave.data?.PenetapanSanksi?.activeStep
 		this.setState({ pelaporan, listSanksi, activeStep: activeStep || "1" });
 		this.setState({ dataPelanggaran: autoSaveDataPelanggaran })
-
+		this.setState({ _csrf })
 	};
 
 
@@ -98,7 +101,7 @@ class ProsesSanksi extends Component {
 			// 		formdata.append("berita_acara", e);
 			// 	});
 			// }
-			await createSanksi(token, id, formdata);
+			await createSanksi(token, id, formdata, this.state._csrf);
 
 			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
 			Router.push({
@@ -139,10 +142,16 @@ class ProsesSanksi extends Component {
 	};
 
 	setCheckedData = async (data) => {
-		const { token } = this.props;
-		const result = await getPelanggaran(token, { id: data.join(",") });
-		this.setState({ dataPelanggaran: result });
-		this.handleAutoSave(result)
+		if (data.length === 0) {
+			this.handleAutoSave("null")
+			this.setState({ dataPelanggaran: "null" })
+		}
+		else {
+			const { token } = this.props;
+			const result = await getPelanggaran(token, { id: data.join(",") });
+			this.setState({ dataPelanggaran: result });
+			this.handleAutoSave(result)
+		}
 	};
 
 	setUploadSuratSanksi = (data) => {

pages/app/turun-sanksi/index.js

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

pages/pt/jawaban-keberatan/detail.js

@@ -52,7 +52,6 @@ class JawabanKeberatan extends Component {
 
 	render() {
 		const { sanksi, pt } = this.state;
-		console.log(this.state.modal)
 		return (
 			<ContentWrapper unwrap>
 				<Modal isOpen={this.state.modalTidak} >

pages/pt/jawaban-pencabutan-sanksi/detail.js

@@ -30,8 +30,6 @@ class DetailJawabanPencabutanSanksi extends Component {
 	render() {
 		const { sanksi, pt } = this.state;
 		const jawaban = sanksi.data?.jawaban.cabut_sanksi || null;
-		// console.log(sanksi)
-		console.log(jawaban)
 		return (
 			<ContentWrapper unwrap>
 				{pt && <Header data={pt} />}