commit

components/Extras/calendar.view.js

@@ -20,8 +20,8 @@ import { ToastContainer, toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import Datetime from "react-datetime";
-import 'moment/locale/id';
-moment.locale('id')
+// import 'moment/locale/id';
+// moment.locale('id')
 
 const status = [
 	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
@@ -311,7 +311,7 @@ class Calendar extends Component {
 																				{({ field, form }) => (
 																					<Datetime
 																						timeFormat={false}
-																						locale="id"
+																						// locale="id"
 																						inputProps={{ className: "form-control" }}
 																						value={field.value}
 																						closeOnSelect={true}
@@ -331,7 +331,7 @@ class Calendar extends Component {
 																				{({ field, form }) => (
 																					<Datetime
 																						timeFormat={false}
-																						locale="id"
+																						// locale="id"
 																						inputProps={{ className: "form-control" }}
 																						value={field.value}
 																						closeOnSelect={true}

components/Pelaporan/TableLaporan.js

@@ -18,7 +18,13 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                     </Link>
                 </div>
                 {listData && (
-                    <Datatable options={{ responsive: false, ordering: true }}>
+                    <Datatable options={{
+                        responsive: false, ordering: true, 
+                        // paging: false,
+                        // searching:false,
+                        // ordering: false,
+                        // info: false,
+                    }}>
                         <table className="table w-100" data-order='[[3, "desc"]]'>
                             <thead>
                                 <tr>

components/Sanksi/Ringkasan.js

@@ -1,203 +1,228 @@
 import Scrollable from "@/components/Common/Scrollable";
-import { Card, Row, Col, Table, FormGroup, Label } from "reactstrap";
+import { Card, Row, Col, Table, FormGroup, Label, Button } from "reactstrap";
 import moment from "moment";
 import 'moment/locale/id'
 moment.locale('id')
+import ComponentToPrint from "./SuratBA";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import React, { Component } from "react";
+import { getAutoSave, inputAutoSave } from "@/actions/autosave";
 
-function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
-	return (
-		<>
-			<Row>
-				<Col>
-					<p className="lead bb">Detail Laporan</p>
-					<form className="form-horizontal">
-						<FormGroup row>
-							<Col md="4">Nomor Laporan:</Col>
-							<Col md="8">
-								<strong>{dataLaporan.no_laporan}</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Nama Perguruan Tinggi:</Col>
-							<Col md="8">
-								<strong>{dataLaporan.pt.nama}</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Jenis Pelanggaran:</Col>
-							<Col md="8">
-								<Scrollable height="125px" className="list-group">
-									<ul>
-										{dataLaporan.pelanggaran.map((e) => (
-											<li>{e.pelanggaran}</li>
-										))}
-									</ul>
-								</Scrollable>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Keterangan Laporan:</Col>
-							<Col md="8">
-								<Scrollable height="100px" className="list-group">
-									<p>{dataLaporan.keterangan}</p>
-								</Scrollable>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Dibuat Pada:</Col>
-							<Col md="8">
-								<strong>{moment(dataLaporan.createAt).format("D MMMM YYYY")}</strong>
-							</Col>
-						</FormGroup>
-					</form>
-				</Col>
-			</Row>
-			<Row>
-				<Col>
-					<p className="lead bb">Penetapan Sanksi</p>
-					<Card className="card-default">
-						<Table bordered hover responsive>
-							<thead>
-								<tr>
-									<th>No</th>
-									<th>Jenis Pelanggaran</th>
-									<th>Sanksi</th>
-								</tr>
-							</thead>
-							<tbody>
 
-								{dataPelanggaran
-									? dataPelanggaran.map((e, i) => (
-										<tr key={e._id}>
-											<td>{++i}</td>
-											<td>
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
-															<p>{e.pelanggaran}</p>
-															<p>TMT : {e.tmt_bulan} Bulan</p>
-															<p>Level Pelanggaran : {e.label_sanksi}</p>
+
+export class Ringkasan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+
+
+		};
+	}
+	// function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
+	// 	return (
+		componentDidMount = async () => {
+			const { query, token } = this.props;
+			const { id } = query;
+			const getDataSave = await getAutoSave({ token, id, laporan: true });
+			const saveData = getDataSave.data?.penetapanSanksi;
+			this.setState(saveData)
+		}
+
+	render() {
+		const { dataLaporan, dataPelanggaran, dataUpload } = this.props
+		return (
+			<>
+				<Row>
+					<Col>
+						<p className="lead bb">Detail Laporan</p>
+						<form className="form-horizontal">
+							<FormGroup row>
+								<Col md="4">Nomor Laporan:</Col>
+								<Col md="8">
+									<strong>{dataLaporan.no_laporan}</strong>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Nama Perguruan Tinggi:</Col>
+								<Col md="8">
+									<strong>{dataLaporan.pt.nama}</strong>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Jenis Pelanggaran:</Col>
+								<Col md="8">
+									<Scrollable height="125px" className="list-group">
+										<ul>
+											{dataLaporan.pelanggaran.map((e) => (
+												<li>{e.pelanggaran}</li>
+											))}
+										</ul>
+									</Scrollable>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Keterangan Laporan:</Col>
+								<Col md="8">
+									<Scrollable height="100px" className="list-group">
+										<p>{dataLaporan.keterangan}</p>
+									</Scrollable>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Dibuat Pada:</Col>
+								<Col md="8">
+									<strong>{moment(dataLaporan.createAt).format("D MMMM YYYY")}</strong>
+								</Col>
+							</FormGroup>
+						</form>
+					</Col>
+				</Row>
+				<Row>
+					<Col>
+						<p className="lead bb">Penetapan Sanksi</p>
+						<Card className="card-default">
+							<Table bordered hover responsive>
+								<thead>
+									<tr>
+										<th>No</th>
+										<th>Jenis Pelanggaran</th>
+										<th>Sanksi</th>
+									</tr>
+								</thead>
+								<tbody>
+
+									{dataPelanggaran
+										? dataPelanggaran.map((e, i) => (
+											<tr key={e._id}>
+												<td>{++i}</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{e.pelanggaran}</p>
+																<p>TMT : {e.tmt_bulan} Bulan</p>
+																<p>Level Pelanggaran : {e.label_sanksi}</p>
+															</div>
 														</div>
 													</div>
-												</div>
-											</td>
-											<td>
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
-															<p>{e.sanksi}</p>
-															<p>Keterangan : {e.keterangan_sanksi}</p>
+												</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{e.sanksi}</p>
+																<p>Keterangan : {e.keterangan_sanksi}</p>
+															</div>
 														</div>
 													</div>
-												</div>
-											</td>
-										</tr>
-									))
-									: ""}
-							</tbody>
-						</Table>
-					</Card>
-				</Col>
-			</Row>
-			<Row>
-				<Col>
-					<p className="lead bb">Nomor Surat Keputusan Sanksi</p>
-					<form className="form-horizontal">
-						<FormGroup row>
-							<Col md="4">Nomor Surat:</Col>
-							<Col md="8">
-								<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Keterangan:</Col>
-							<Col md="8">
-								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
-							</Col>
-						</FormGroup>
-						{dataUpload && !dataUpload.tmtCheck ? (
+												</td>
+											</tr>
+										))
+										: ""}
+								</tbody>
+							</Table>
+						</Card>
+					</Col>
+				</Row>
+				<Row>
+					<Col>
+						<p className="lead bb">Nomor Surat Keputusan Sanksi</p>
+						<form className="form-horizontal">
 							<FormGroup row>
-								<Col md="4">TMT Berlaku:</Col>
+								<Col md="4">Nomor Surat:</Col>
 								<Col md="8">
-									<strong>
-										{dataUpload && dataUpload.akhirsanksi ? (
-											<p>
-												{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).locale("id").format("DD MMMM YYYY")}
-											</p>
-										) : (
-											""
-										)}
-									</strong>
+									<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
 								</Col>
 							</FormGroup>
-						) : (
 							<FormGroup row>
-								<Col md="4">Tanggal Penetapan Sanksi:</Col>
+								<Col md="4">Keterangan:</Col>
 								<Col md="8">
-									<strong>
-										{dataUpload && dataUpload.awalsanksi ? (
-											<p>
-												{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")}
-											</p>
-										) : (
-											""
-										)}
-									</strong>
+									<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
 								</Col>
 							</FormGroup>
-						)}
-						{dataUpload && !dataUpload.tmtCheck ? (
+							{dataUpload && !dataUpload.tmtCheck ? (
+								<FormGroup row>
+									<Col md="4">TMT Berlaku:</Col>
+									<Col md="8">
+										<strong>
+											{dataUpload && dataUpload.akhirsanksi ? (
+												<p>
+													{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).locale("id").format("DD MMMM YYYY")}
+												</p>
+											) : (
+												""
+											)}
+										</strong>
+									</Col>
+								</FormGroup>
+							) : (
+								<FormGroup row>
+									<Col md="4">Tanggal Penetapan Sanksi:</Col>
+									<Col md="8">
+										<strong>
+											{dataUpload && dataUpload.awalsanksi ? (
+												<p>
+													{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")}
+												</p>
+											) : (
+												""
+											)}
+										</strong>
+									</Col>
+								</FormGroup>
+							)}
+							{dataUpload && !dataUpload.tmtCheck ? (
+								<FormGroup row>
+									<Col md="4">TMT :</Col>
+									<Col md="8">
+										<strong>
+											{dataUpload && dataUpload.akhirsanksi ? (
+												<p>
+													{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
+												</p>
+											) : (
+												""
+											)}
+										</strong>
+									</Col>
+								</FormGroup>
+							) : ("")}
 							<FormGroup row>
-								<Col md="4">TMT :</Col>
+								<Col md="4">Sanksi:</Col>
 								<Col md="8">
-									<strong>
-										{dataUpload && dataUpload.akhirsanksi ? (
-											<p>
-												{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
-											</p>
-										) : (
-											""
-										)}
-									</strong>
+									<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value}</p>) : ""}</strong>
 								</Col>
 							</FormGroup>
-						) : ("")}
-						<FormGroup row>
-							<Col md="4">Sanksi:</Col>
-							<Col md="8">
-								<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value}</p>) : ""}</strong>
-							</Col>
-						</FormGroup>
 
-						<FormGroup row>
-							<Col md="4">Surat Sanksi:</Col>
-							<Col md="8">
-								<Scrollable height="120px" className="list-group">
-									<table className="table table-bordered bg-transparent">
-										<tbody>
-											{dataUpload
-												? dataUpload.files.map((e) => (
-													<tr>
-														<td>
-															<em className="fa-lg far fa-file-code"></em>
-														</td>
-														<td>
-															<a className="text-muted" href={e.preview} download={e.name}>
-																{e.name}
-															</a>
-														</td>
-													</tr>
-												))
-												: ""}
-										</tbody>
-									</table>
-								</Scrollable>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Surat Berita Acara:</Col>
-							<Col md="8">
-								<Scrollable height="120px" className="list-group">
+							<FormGroup row>
+								<Col md="4">Surat Sanksi:</Col>
+								<Col md="8">
+									<Scrollable height="120px" className="list-group">
+										<table className="table table-bordered bg-transparent">
+											<tbody>
+												{dataUpload
+													? dataUpload.files.map((e) => (
+														<tr>
+															<td>
+																<em className="fa-lg far fa-file-code"></em>
+															</td>
+															<td>
+																<a className="text-muted" href={e.preview} download={e.name}>
+																	{e.name}
+																</a>
+															</td>
+														</tr>
+													))
+													: ""}
+											</tbody>
+										</table>
+									</Scrollable>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Surat Berita Acara:</Col>
+								<Col md="8">
+									{/* <Scrollable height="120px" className="list-group">
 									<table className="table table-bordered bg-transparent">
 										<tbody>
 											{dataUpload
@@ -216,67 +241,84 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 												: ""}
 										</tbody>
 									</table>
-								</Scrollable>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Tanggal Terima Surat Sanksi :</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.terimaSuratSanksi ? (
-										<p>
-											{moment(dataUpload.terimaSuratSanksi).locale("id").format("DD MMMM YYYY")}
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Dokumen Tanda Terima Surat Sanksi:</Col>
-							<Col md="8">
-								<Scrollable height="120px" className="list-group">
-									<table className="table table-bordered bg-transparent">
-										<tbody>
-											{dataUpload
-												? dataUpload.filesTandaTerimaSS.map((e) => (
-													<tr>
-														<td>
-															<em className="fa-lg far fa-file-code"></em>
-														</td>
-														<td>
-															<a className="text-muted" href={e.preview} download={e.name}>
-																{e.name}
-															</a>
-														</td>
-													</tr>
-												))
-												: ""}
-										</tbody>
-									</table>
-								</Scrollable>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">Akhir Permohonan Keberatan Sanksi :</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.tglAkhirKeberatan ? (
-										<p>
-											{moment(dataUpload.tglAkhirKeberatan).locale("id").format("DD MMMM YYYY")}
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
-					</form>
-				</Col>
-			</Row>
-		</>
-	);
+								</Scrollable> */}
+										<ReactToPrint
+											trigger={() => {
+												return <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>
+											}}
+											content={() => this.componentRef}
+										/>
+										<div style={{ display: "none" }}>
+											<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
+										</div>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Tanggal Terima Surat Sanksi :</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.terimaSuratSanksi ? (
+											<p>
+												{moment(dataUpload.terimaSuratSanksi).locale("id").format("DD MMMM YYYY")}
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Dokumen Tanda Terima Surat Sanksi:</Col>
+								<Col md="8">
+									<Scrollable height="120px" className="list-group">
+										<table className="table table-bordered bg-transparent">
+											<tbody>
+												{dataUpload
+													? dataUpload.filesTandaTerimaSS.map((e) => (
+														<tr>
+															<td>
+																<em className="fa-lg far fa-file-code"></em>
+															</td>
+															<td>
+																<a className="text-muted" href={e.preview} download={e.name}>
+																	{e.name}
+																</a>
+															</td>
+														</tr>
+													))
+													: ""}
+											</tbody>
+										</table>
+									</Scrollable>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Akhir Permohonan Keberatan Sanksi :</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.tglAkhirKeberatan ? (
+											<p>
+												{moment(dataUpload.tglAkhirKeberatan).locale("id").format("DD MMMM YYYY")}
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						</form>
+					</Col>
+				</Row>
+			</>
+		)
+	}
 }
 
+// 	);
+// }
+
 export default Ringkasan;

components/Sanksi/SuratBA.js

@@ -1,224 +0,0 @@
-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";
-
-
-
-
-class ComponentToPrint extends React.Component {
-    formData = {}
-    constructor(props) {
-        super(props);
-        this.state = {
-            dataLaporan: {},
-
-        };
-    }
-
-    static getInitialProps = async ({ query }) => {
-        return { query };
-    };
-
-
-    componentDidMount = async () => {
-        const { query, token } = this.props;
-        const { id } = query;
-        const dataLaporan = await getOneLaporan(token, id);
-        const getDataSave = await getAutoSave({ id, laporan: true });
-        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
-        this.setState({ dataLaporan, dataSuratBA });
-        this.setState(dataPelanggaran)
-        this.setState(autoSaveDataSuratBA)
-
-    };
-
-    render() {
-        const { dataLaporan, descPelanggaran, dataSuratBA } = this.state
-        const { dataPelanggaran } = this.props
-        return (
-            <div className='BA-div' >
-                <div className='BA-logo'>
-                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                </div>
-                <div>
-                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
-                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
-                    <div className='BA-body'>
-                        <p className='BA-body'>
-                            Pada hari ini
-                            {dataSuratBA?.setTanggal === true || this.state?.setTanggal === true ?
-                                <span > {moment(dataSuratBA?.tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("YYYY")},</span> :
-                                <span> &nbsp;............ &nbsp;</span>
-                            }
-
-
-                            bertempat di
-                            {dataSuratBA?.tempat || this.state?.tempat ?
-                                <span>
-                                    &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
-                                </span>
-                                :
-                                <span>........</span>
-                            }
-                            ,
-                            telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
-                        </p>
-                        <div className='BA-body'>
-                            <ol>
-                                {dataLaporan.data?.peserta_penetapan_sanksi ?
-                                    <span>
-                                        {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
-                                    </span>
-                                    :
-                                    <span>Belum Ada Data</span>
-                                }
-
-                            </ol>
-                        </div>
-                    </div>
-                </div>
-                <div className='BA-body'>
-                    <p className='BA-body'>
-                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
-                    </p>
-                    <div className='BA-body'>
-                        <ol>
-                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
-                                {dataSuratBA?.setTanggal === true || this.state?.setTanggal === true ?
-                                    <span> &nbsp;{moment(dataSuratBA?.tanggal || 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>
-                            {/* <div style={{ overflow: "auto" }}> */}
-                            <table className='table-a'>
-                                <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>
-                                    {dataPelanggaran?.data?.map((e, i) => (
-                                        <tr key={e._id}>
-                                            <td>{++i}</td>
-                                            {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
-                                            <td>{e.pasal}</td>
-                                            <td>{e.butir_pelanggaran}</td>
-                                            <td>{e.pelanggaran}</td>
-                                            <td >{dataSuratBA?.descPelanggaran[e._id]?.simpulan}</td>
-                                            <td >{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi}</td>
-                                        </tr>
-
-                                    ))}
-                                </tbody>
-                            </table>
-                            {/* </div> */}
-
-                            <li>Temuan Lain:
-                                <ol type="a">
-                                    {dataSuratBA?.temuanLain || this.state?.temuanLain ?
-                                        <span>{dataSuratBA?.temuanLain || this.state?.temuanLain.map((value) => <li>{value}</li>)}</span>
-                                        : "Belum Diisi"}
-                                </ol>
-                            </li>
-                            <li>Hal-hal yang memberatkan, sebagai berikut:
-                                <ol type="a">
-                                    {dataSuratBA?.memberatkan || this.state?.memberatkan ?
-                                        <span>{dataSuratBA?.memberatkan || this.state?.memberatkan.map((value) => <li>{value}</li>)}</span>
-                                        : "Belum Diisi"}
-                                </ol>
-                            </li>
-                            <li>hal-hal yang meringankan, sebagai berikut:
-                                <ol type="a">
-                                    {dataSuratBA?.meringankan || this.state?.meringankan ?
-                                        <span>{dataSuratBA?.meringankan || 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
-                                    {dataSuratBA?.sanksi || this.state?.sanksi ?
-                                        <span>{dataSuratBA?.sanksi || this.state?.sanksi}</span>
-                                        : "Belum Diisi"}
-                                    ”.</strong>
-                            </li>
-                        </ol>
-                    </div>
-                    <p className='BA-body'>
-                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
-                    </p>
-                    {/* <table className='demo'>
-                        <tbody>
-
-                            <tr>
-                                <th className='thdemo' colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
-                            </tr>
-                            <tr className='trdemo'>
-                                <th className='trdemo'>No</th>
-                                <th className='trdemo'>Nama</th>
-                                <th className='trdemo'>Tanda Tangan</th>
-                            </tr>
-                            {dataLaporan
-                                ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
-                                    <tr>
-                                        <td className='trdemo'>{index + 1}</td>
-                                        <td className=' tddemo'>{value.nama}</td>
-                                        <td className='tddemo'>
-                                            <img
-                                                style={{ width: "200px" }}
-                                                src={value.ttd.path} />
-
-
-                                        </td>
-                                    </tr>)) : ""}
-                        </tbody>
-                    </table> */}
-                    <div  >
-                        <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">
-                            {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>
-            </div>
-
-        );
-    }
-}
-export default ComponentToPrint

components/Sanksi/UploadSurat.js

@@ -9,7 +9,7 @@ import { addDays, addMonths } from 'date-fns';
 import id from 'date-fns/locale/id';
 // registerLocale('id', id)
 import { getAutoSave, inputAutoSave } from "@/actions/autosave";
-import ComponentToPrint from "./SuratBA";
+import ComponentToPrint from "./SuratBA_A";
 import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 
 let Dropzone = null;

pages/app/sanksi/proses.js

@@ -320,7 +320,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran?.data} dataUpload={dataUpload} /> : <Loader />}
+												{pelaporan.data ? <Ringkasan    dataSuratBA={dataSuratBA} query={this.props.query} dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran?.data} dataUpload={dataUpload} /> : <Loader />}
 											</div>
 											<hr />
 											<div className="d-flex">