Surat BA, 85%

actions/public.js

@@ -3,7 +3,7 @@ import axiosAPI from "../config/axios";
 import { createLog } from "./log";
 
 
-export const createAddPeserta = async (token, data) => {
+export const addPesertaPleno = async (token, data) => {
     try {
         const res = await axiosAPI.post('/public/sanksi/add-peserta-pleno', data, { headers: { Authorization: token } });
         return res.data;

components/Sanksi/BeritaAcara_A.js

@@ -152,7 +152,7 @@ class BeritaAcara extends Component {
 
     render() {
         const { dataPelanggaran, dataLaporan } = this.props
-        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, trimmedDataURL } = this.state
+        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, trimmedDataURL, signature } = this.state
 
         return (
             <div>
@@ -223,17 +223,7 @@ class BeritaAcara extends Component {
                             </p>
                             <div className='body'>
                                 <ol>
-                                    {namaPeserta.map((value) => <li>{value}</li>)}
-                                    {isEditNamaPeserta ?
-                                        <span>
-                                            <input type='text' defaultValue={""} ref="inputNamaPeserta" />
-                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueNamaPeserta(), this.isEditNamaPeserta() }} />
-                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditNamaPeserta} />
-                                        </span>
-                                        :
-                                        <Button onClick={this.isEditNamaPeserta} className=" p-0 m-0" color="success">Tambah peserta</Button>
-                                    }
-
+                                    {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
                                 </ol>
                             </div>
                         </div>
@@ -342,14 +332,14 @@ class BeritaAcara extends Component {
                                 <tr>
                                     <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                                 </tr>
-                                {namaPeserta
-                                    ? namaPeserta.map((namaPeserta) => (
+                                {dataLaporan
+                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
                                         <tr>
-                                            <td>{namaPeserta}</td>
+                                            <td>{value.nama}</td>
                                             <td>
-                                                <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} ref={(ref) => { this.sigPad = ref }} />
-                                                <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueSignature} />
-                                                {/* <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.ised} /> */}
+                                                <img
+                                                    style={{ width: "200px" }}
+                                                    src={value.ttd.path} />
 
 
                                             </td>

components/Sanksi/SuratBA.js

@@ -4,6 +4,8 @@ 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 { getAutoSave } from "@/actions/autosave";
+
 import 'moment/locale/id'
 moment.locale('id')
 
@@ -15,12 +17,7 @@ class ComponentToPrint extends React.Component {
         super(props);
         this.state = {
             dataLaporan: {},
-            tempat: "[Mohon Diisi]",
-            isEditMode: false,
-            temuanLain: [],
-            memberatkan: [],
-            formData: null,
-            meringankan: [],
+
         };
     }
 
@@ -33,55 +30,17 @@ class ComponentToPrint extends React.Component {
         const { query, token } = this.props;
         const { id } = query;
         const dataLaporan = await getOneLaporan(token, id);
-        this.setState({ dataLaporan });
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran.data;
+        this.setState({ dataLaporan, dataSuratBA, dataPelanggaran });
     };
-    changeEditMode = () => {
-        this.setState({
-            isEditMode: !this.state.isEditMode,
-        })
-    }
-    updateValueTempat = () => {
-        this.setState({
-            isEditMode: false,
-            tempat: this.refs.inputTempat.value
-        })
-    }
-    handleTemuanLain = (e) => {
-        const addTemuanLain = this.refs.inputTemuan.value
-        this.setState({
-            temuanLain: [...this.state.temuanLain, addTemuanLain]
-        }, this.setformData)
-    }
-    handleMemberatkan = (e) => {
-        const addMemberatkan = this.refs.inputMemberatkan.value
-        this.setState({
-            memberatkan: [...this.state.memberatkan, addMemberatkan]
-        }, this.setformData)
-    }
-    handleMeringankan = (e) => {
-        const addMeringankan = this.refs.inputMeringankan.value
-        this.setState({
-            meringankan: [...this.state.meringankan, addMeringankan]
-        }, this.setformData)
-    }
-    setNamaPeserta = () => {
-        const addNamaPeserta = this.refs.inputNama.value
-        this.setState({
-            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
-        })
-    }
 
-    setformData = (data) => {
-        this.setState({
-            formData: this.state
-        })
-    }
 
 
 
     render() {
-        const { dataLaporan, tempat, isEditMode, temuanLain, formData, memberatkan, meringankan, namaPeserta } = this.state
-        const { dataPelanggaran, dataSuratBA } = this.props
+        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.state
         return (
             <div className='BA-div' >
                 <div className='BA-logo'>
@@ -94,30 +53,30 @@ class ComponentToPrint extends React.Component {
                         <p className='BA-body'>
                             Pada hari ini
                             {dataSuratBA?.setTanggal === true ?
-                                <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(dataSuratBA.tanggal).format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
-                                <span> &nbsp;......................... &nbsp;</span>
+                                <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
+                                <span> &nbsp;......... &nbsp;</span>
                             }
 
 
-                            bertempat di
-                            {dataSuratBA?.tempat ?
+                            &nbsp;bertempat di
+                            {dataSuratBA?.tempat === "[Mohon Diisi]" ?
+                                <span>.....</span>
+                                :
                                 <span>
-                                    &nbsp;{dataSuratBA.tempat}
+                                    &nbsp;{dataSuratBA?.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>
-                                {dataSuratBA?.namaPeserta ?
+                                {dataLaporan.data?.peserta_penetapan_sanksi ?
                                     <span>
-                                        {dataSuratBA.namaPeserta.map((value) => <li>{value}</li>)}
+                                        {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
                                     </span>
                                     :
-                                    <span>........</span>
+                                    <span>Belum Ada Data</span>
                                 }
 
                             </ol>
@@ -194,7 +153,7 @@ class ComponentToPrint extends React.Component {
                                 </ol>
                             </li>
                             <li>
-                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa&nbsp;
                                     {dataSuratBA?.sanksi ?
                                         <span>{dataSuratBA.sanksi}</span>
                                         : "Belum Diisi"}
@@ -210,19 +169,16 @@ class ComponentToPrint extends React.Component {
                             <tr>
                                 <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                             </tr>
-                            {dataSuratBA?.namaPeserta
-                                ? dataSuratBA.namaPeserta.map((namaPeserta) => (
+                            {dataLaporan
+                                ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
                                     <tr>
-                                        <td>{namaPeserta}</td>
+                                        <td>{value.nama}</td>
                                         <td>
+                                            <img
+                                                style={{ width: "200px" }}
+                                                src={value.ttd.path} />
+
 
-                                            {dataSuratBA?.signature ?
-                                                dataSuratBA.signature.map((value) =>
-                                                    <img
-                                                        style={{ height: "200px", width: "100px" }}
-                                                        src={value} />
-                                                )
-                                                : null}
                                         </td>
                                     </tr>)) : ""}
                         </tbody>

pages/signature/pleno-sanksi/[id].js

@@ -1,19 +1,33 @@
 import React, { Component } from 'react';
 import BasePage from "@/components/Layout/BasePage";
-// import ComponentToPrint from "./SuratBA";
-// import ComponentToPrint from "../../components/sanksi/SuratBA";
-import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
-import { withRouter } from 'next/router';
+
 import { getOneLaporanPublic } from '../../../actions/public';
 import { getAutoSave } from "@/actions/autosave";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input } from "reactstrap";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import SignatureCanvas from 'react-signature-canvas'
+import { addPesertaPleno } from '../../../actions/public';
+import { toast } from "react-toastify";
+import Router from "next/router";
+import swal from "sweetalert2";
 
 
-
+// const addPesertaSchema = Yup.object().shape({
+//     nama: Yup.string().min(3).max(150).required("Wajib diisi"),
+//     signature: Yup.string().min(3).max(1000).required("Wajib diisi"),
+// });
 class PlenoSanksi extends Component {
     constructor(props) {
         super(props);
         this.state = {
             dataLaporan: {},
+            modal: false,
+            signature: "",
+            nama: "",
+            data: {},
+
         }
     }
     static getInitialProps = async ({ query }) => {
@@ -31,130 +45,222 @@ class PlenoSanksi extends Component {
         this.setState({ dataLaporan, dataSuratBA, dataPelanggaran });
     };
 
+    toggleModal = (value = true) => {
+        if (!value) {
+            this.setState({ modal: false });
+        } else {
+            this.setState({ modal: !this.state.modal });
+        }
+    };
+    sigPad = []
+    clear = () => {
+        this.sigPad.clear()
+    }
+    updateValueSignature = () => {
+        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
+        this.setState({
+            signature: addsig
+        })
+    }
+
+    updateValueNama = (e) => {
+        this.setState({ nama: e.target.value });
+    }
+
+
+    onSubmit = async (e) => {
+
+        const { query, token } = this.props;
+        const { id } = query;
+        const sign = this.state.signature
+        const blob = await (await fetch(sign)).blob();
+        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
+        const formdata = new FormData();
+        formdata.append("ttd", files);
+        formdata.append("laporan_id", id);
+        formdata.append("nama", this.state.nama);
+        const added = await addPesertaPleno(token, formdata);
+        const toastid = toast.loading("Please wait...");
+        if (!added) {
+            swal.fire({
+                title: "Gagal Input Tanda Tangan",
+                icon: "error",
+                confirmButtonColor: "#3e3a8e",
+            });
+
+        } else {
+            swal.fire({
+                title: "Berhasil Input Tanda Tangan",
+                icon: "success",
+                confirmButtonColor: "#3e3a8e",
+
+            });
+            Router.push("/app");
+
+        }
+    };
+
 
 
 
     render() {
-        const { dataPelanggaran, dataLaporan, dataSuratBA } = this.state
-        console.log(dataPelanggaran)
+        const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama } = this.state
 
         return (
-            <div className='page'>
-                <div className='BA-logo'>
-                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                </div>
-                <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
-                {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
-                <div className='body'>
-                    <p className='body'>
-                        Pada hari ini
-                        {dataSuratBA?.setTanggal === true ?
-                            <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
-                            <span> &nbsp;......................... &nbsp;</span>
-                        }
-                        &nbsp;bertempat di
-                        {dataSuratBA?.tempat === "[Mohon Diisi]" ?
-                            <span>Belum Diisi Oleh Dikti</span>
-                            :
-                            <span>
-                                &nbsp;{dataSuratBA?.tempat}
-                            </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:
+            <ContentWrapper unwrap>
+                <Modal isOpen={this.state.modal} >
 
-                    </p>
-                    <div className='BA-body'>
-                        <ol>
-                            {dataSuratBA?.namaPeserta ?
+                    <ModalBody>
+                        <FormGroup row>
+                            <label className="col-md-2 col-form-label">Nama:</label>
+                            <div className="col-md-10">
+                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
+                            </div>
+                        </FormGroup>
+                        <FormGroup row>
+                            <SignatureCanvas penColor='black' canvasProps={{ width: 493, height: 200, className: 'sigCanvas signature-border' }} ref={(ref) => { this.sigPad = ref }} />
+
+                            {/* <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueSignature} />
+                                <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.clear} /> */}
+                            <ModalFooter>
+                                <Button color className="btn-login" onClick={this.updateValueSignature
+                                }>
+                                    <span className="font-color-white">Save</span>
+                                </Button>
+                                <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
+                                    Hapus
+                                </Button>
+                            </ModalFooter>
+                        </FormGroup>
+                        <ModalFooter>
+                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC"} className="btn-login" onClick={this.onSubmit}>
+                                <span className="font-color-white">Kirim</span>
+                            </Button>
+                        </ModalFooter>
+
+                    </ModalBody>
+                </Modal>
+                <div className='page'>
+                    <div className='BA-logo'>
+                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                    </div>
+                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
+                    <div className='body'>
+                        <p className='body'>
+                            Pada hari ini
+                            {dataSuratBA?.setTanggal === true ?
+                                <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
+                                <span> &nbsp;......... &nbsp;</span>
+                            }
+                            &nbsp;bertempat di
+                            {dataSuratBA?.tempat === "[Mohon Diisi]" ?
+                                <span>Belum Diisi Oleh Dikti</span>
+                                :
                                 <span>
-                                    {dataSuratBA.namaPeserta.map((value) => <li>{value}</li>)}
+                                    &nbsp;{dataSuratBA?.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=''>
+                            <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>
+                    <p>
+                        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='body'>
+                        <ol>
+                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
+                                {dataSuratBA?.setTanggal === true ?
+                                    <span> &nbsp;{moment(dataSuratBA.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>
+                            <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
+                                        ? dataPelanggaran.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 >[Mohon Diisi]</td>
+                                                <td >[Mohon Diisi]</td>
+                                            </tr>
 
+                                        ))
+                                        : ""}
+                                </tbody>
+                            </table>
+                            <li>Temuan Lain:
+                                <ol type="a">
+                                    {dataSuratBA?.temuanLain ?
+                                        <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>Hal-hal yang memberatkan, sebagai berikut:
+                                <ol type="a">
+                                    {dataSuratBA?.memberatkan ?
+                                        <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>hal-hal yang meringankan, sebagai berikut:
+                                <ol type="a">
+                                    {dataSuratBA?.meringankan ?
+                                        <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
+                                    {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
+                                        "Belum Diisi Oleh Dikti"
+                                        : <span>{dataSuratBA?.sanksi}</span>}
+                                    ”.</strong>
+                            </li>
                         </ol>
                     </div>
+                    <p className='body'>
+                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                    </p>
+                    <p><strong>Note</strong> : Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</p>
+                    <Button color="" className="btn-labeled-notHover" onClick={this.toggleModal}>
+                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Menyetujui</h4>
+                    </Button>
                 </div>
-                <p>
-                    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='body'>
-                    <ol>
-                        <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
-                            {dataSuratBA?.setTanggal === true ?
-                                <span> &nbsp;{moment(dataSuratBA.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>
-                        <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
-                                    ? dataPelanggaran.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 >[Mohon Diisi]</td>
-                                            <td >[Mohon Diisi]</td>
-                                        </tr>
-
-                                    ))
-                                    : ""}
-                            </tbody>
-                        </table>
-                        <li>Temuan Lain:
-                            <ol type="a">
-                                {dataSuratBA?.temuanLain ?
-                                    <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
-                                    : "Belum Diisi"}
-                            </ol>
-                        </li>
-                        <li>Hal-hal yang memberatkan, sebagai berikut:
-                            <ol type="a">
-                                {dataSuratBA?.memberatkan ?
-                                    <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
-                                    : "Belum Diisi"}
-                            </ol>
-                        </li>
-                        <li>hal-hal yang meringankan, sebagai berikut:
-                            <ol type="a">
-                                {dataSuratBA?.meringankan ?
-                                    <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
-                                    : "Belum Diisi"}
-                            </ol>
-                        </li>
-                        <li>
-                            Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
-                                {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
-                                    "Belum Diisi Oleh Dikti"
-                                    : <span>{dataSuratBA?.sanksi}</span>}
-                                ”.</strong>
-                        </li>
-                    </ol>
-                </div>
-                <p className='body'>
-                    Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
-                </p>
-            </div>
+            </ContentWrapper>
         );
     }
 

styles/bootstrap/_print.scss

@@ -268,7 +268,11 @@ body {
 
   body,
   page[size="A4"] {
-    margin: 0;
+    // margin: 0;
     box-shadow: 0;
+    margin-bottom: 50px;
   }
 }
+.signature-border{
+  border: 2px rgb(104, 104, 104) solid;
+}