update to production 18/05/2023

actions/sanksi.js

@@ -67,18 +67,27 @@ export const addRekomendasiDelegasi = async (token, id, data) => {
 		return false;
 	}
 };
+
 export const editTmt = async (token, id, data) => {
 	const res = await axios.put(`sanksi/tmt/update/${id}`, data, { headers: { Authorization: token } });
 	await createLog(token, { aktivitas: `Berhasil perpanjangan sanksi, id: ${id}` });
 	return res.data;
 };
+
 export const update = async (token, id, data) => {
 	const res = await axios.put(`sanksi/update/${id}`, data, { headers: { Authorization: token } });
 	await createLog(token, { aktivitas: `Berhasil Merubah Sanksi, id: ${id}` });
 	return res.data;
 };
+
 export const updatePT = async (token, id, data) => {
 	const res = await axiosAPI.put(`/sanksi/update-pt/${id}`, data, { headers: { Authorization: token } });
 	await createLog(token, { aktivitas: `Berhasil mengubah status sanksi, id: ${id}` });
 	return res.data;
 };
+
+export const removePesertaPleno = async (token, data) => {
+	const res = await axios.delete(`sanksi/remove-peserta-pleno/`, { headers: { Authorization: token }, data });
+	await createLog(token, { aktivitas: `Berhasil hapus peserta pleno` });
+	return res.data;
+};

components/Extras/calendar.view.js

@@ -127,6 +127,7 @@ class Calendar extends Component {
 		const { query, token } = this.props;
 		const { id } = query;
 		const { color, laporan } = this.state;
+		console.log(data.dari_tanggal)
 
 		await toast.promise(
 			updateJadwal(token, id, {
@@ -314,9 +315,10 @@ class Calendar extends Component {
 																						locale="id"
 																						inputProps={{ className: "form-control" }}
 																						value={field.value}
+																						dateFormat="DD MMMM YYYY"
 																						closeOnSelect={true}
 																						onChange={(e) => {
-																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
+																							form.setFieldValue(field.name, e);
 																						}}
 																					/>
 																				)}
@@ -332,11 +334,12 @@ class Calendar extends Component {
 																					<Datetime
 																						timeFormat={false}
 																						locale="id"
+																						dateFormat="DD MMMM YYYY"
 																						inputProps={{ className: "form-control" }}
 																						value={field.value}
 																						closeOnSelect={true}
 																						onChange={(e) => {
-																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
+																							form.setFieldValue(field.name, e);
 																						}}
 																					/>
 																				)}

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/BeritaAcara.js

@@ -0,0 +1,512 @@
+import React, { useRef, Component } from 'react';
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter } from "reactstrap";
+import ComponentToPrint from "./SuratBA_A";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import id from 'date-fns/locale/id';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { getAutoSave } from "@/actions/autosave";
+import ContentEditable from 'react-contenteditable'
+import { removePesertaPleno } from '../../actions/sanksi';
+import { ToastContainer, toast } from "react-toastify";
+import Router from "next/router";
+
+
+
+class BeritaAcara extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isEditTempat: false,
+            tempat: "",
+            isEditTanggal: false,
+            tanggal: "",
+            setTanggal: false,
+            isEditNamaPeserta: false,
+            isEditTemuanLain: false,
+            temuanLain: [],
+            memberatkan: [],
+            isEditKeberatan: false,
+            isEditMeringankan: false,
+            meringankan: [],
+            sanksi: "",
+            isEditSanksi: false,
+            copied: false,
+            setmeState: true,
+            descPelanggaran: [],
+            modalRemovePeserta: false,
+            selectedPeserta: ""
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, token, dataPelanggaran } = this.props;
+        const { id } = query;
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const autosaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        this.setState(autosaveDataSuratBA)
+    };
+
+    componentDidUpdate = (prevProps) => {
+        const { dataPelanggaran } = this.state;
+        if (prevProps.dataPelanggaran != this.state.dataPelanggaran) {
+            const descPelanggaran = {}
+            dataPelanggaran?.forEach(e => {
+                descPelanggaran[e._id] = {
+                    simpulan: 'simpulan',
+                    rekomendasi: 'rekomendasi'
+                }
+            });
+        }
+    }
+
+    updateValueSimpulan = (evt, id) => {
+        const descPelanggaran = this.state.descPelanggaran
+        this.state.descPelanggaran = {
+            ...descPelanggaran, [id]: {
+                ...descPelanggaran[id], simpulan: evt.target.value
+            }
+        }
+        this.handleAutoSave()
+        // this.setState((prevState) => ({
+        //     ...prevState, descPelanggaran: {
+        //         ...prevState.descPelanggaran, [id]: {
+        //             ...prevState.descPelanggaran[id], simpulan: evt.target.value
+        //         }
+        //     }
+        // }), this.handleAutoSave)
+    }
+    updateValueRekomendasi = (evt, id) => {
+        const descPelanggaran = this.state.descPelanggaran
+        this.state.descPelanggaran = {
+            ...descPelanggaran, [id]: {
+                ...descPelanggaran[id], rekomendasi: evt.target.value
+            }
+        }
+        this.handleAutoSave()
+        // this.setState((prevState) => ({
+        //     ...prevState, descPelanggaran: {
+        //         ...prevState.descPelanggaran, [id]: {
+        //             ...prevState.descPelanggaran[id], rekomendasi: evt.target.value
+        //         }
+        //     }
+        // }), this.handleAutoSave)
+    }
+
+    setDataSuratBA = () => {
+        this.props.setDataSuratBA(this.state);
+    }
+    handleAutoSave = () => {
+        this.props.handleAutoSave()
+    }
+    isEditTempat = () => {
+        this.state.isEditTempat = !this.state.isEditTempat
+        this.setDataSuratBA()
+        this.handleAutoSave()
+        // this.setState({
+        //     isEditTempat: !this.state.isEditTempat,
+        // }, this.setDataSuratBA, this.handleAutoSave())
+    }
+    isEditTanggal = () => {
+        this.state.isEditTanggal = !this.state.isEditTanggal
+        this.setDataSuratBA()
+        this.handleAutoSave()
+        // this.setState({
+        //     isEditTanggal: !this.state.isEditTanggal,
+        // }, this.setDataSuratBA, this.handleAutoSave())
+
+    }
+
+    isEditTemuanLain = () => {
+        this.state.isEditTemuanLain = !this.state.isEditTemuanLain
+        this.setDataSuratBA()
+        this.handleAutoSave()
+        // this.setState({
+        //     isEditTemuanLain: !this.state.isEditTemuanLain,
+        // }, this.setDataSuratBA, this.handleAutoSave())
+    }
+
+    isEditKeberatan = () => {
+        this.state.isEditKeberatan = !this.state.isEditKeberatan
+        this.setDataSuratBA()
+        this.handleAutoSave()
+        // this.setState({
+        //     isEditKeberatan: !this.state.isEditKeberatan,
+        // }, this.setDataSuratBA, this.handleAutoSave())
+
+    }
+    isEditMeringankan = () => {
+        this.state.isEditMeringankan = !this.state.isEditMeringankan
+        this.setDataSuratBA()
+        this.handleAutoSave()
+        // this.setState({
+        //     isEditMeringankan: !this.state.isEditMeringankan,
+        // }, this.setDataSuratBA, this.handleAutoSave())
+    }
+    isEditSanksi = () => {
+        this.state.isEditSanksi = !this.state.isEditSanksi
+        this.setDataSuratBA()
+        this.handleAutoSave()
+        // this.setState({
+        //     isEditSanksi: !this.state.isEditSanksi,
+        // }, this.setDataSuratBA, this.handleAutoSave())
+    }
+    updateValueTemuanLain = () => {
+        const addTemuanLain = this.refs.inputTemuan.value
+        this.state.temuanLain.push(addTemuanLain)
+        this.setDataSuratBA(this.state)
+        // this.handleAutoSave()
+
+    }
+    updateValueMemringankan = () => {
+        const addMeringankan = this.refs.inputMeringankan.value
+        this.state.meringankan.push(addMeringankan)
+        this.setDataSuratBA(this.state)
+        // this.handleAutoSave()
+
+    }
+    updateValueMemberatkan = () => {
+        const addKeberatan = this.refs.inputMemberatkan.value
+        this.state.memberatkan.push(addKeberatan)
+        this.setDataSuratBA(this.state)
+        // this.handleAutoSave()
+    }
+
+
+    Copied = () => this.setState({
+        copied: !this.state.copied
+    }, this.handleAutoSave())
+
+    CloseCopied = () => {
+
+        setTimeout(() => {
+            // this.state.copied = !this.state.copied
+            this.setState({
+                copied: !this.state.copied
+            }, this.handleAutoSave());
+        }, 1000);
+    }
+
+    setModalRemovePeserta = (modalRemovePeserta) => {
+        this.setState({
+            modalRemovePeserta: !this.state.modalRemovePeserta
+        })
+    }
+
+    render() {
+        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
+        const { descPelanggaran, tanggal, setTanggal } = this.state
+        return (
+            <div>
+                <Modal isOpen={this.state.modalRemovePeserta} >
+                    <ModalBody>Apakah anda ingin menghapus peserta pleno?</ModalBody>
+                    <ModalFooter>
+
+                        <Button color className="btn-login"
+                            onClick={async () => {
+                                const { query, token } = this.props;
+                                const { id: laporan_id } = query;
+                                let update = null;
+                                const toastid = toast.loading("Please wait...");
+                                const peserta_id = this.state.selectedPeserta;
+                                update = await removePesertaPleno(token, { laporan_id, peserta_id });
+                                if (!update) {
+                                    toast.update(toastid, { render: "Gagal hapus peserta pleno", type: "error", isLoading: false, autoClose: true, closeButton: true });
+                                } else {
+                                    toast.update(toastid, { render: "Berhasil hapus peserta pleno", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                                    Router.push(`/app/sanksi/proses?id=${laporan_id}`);
+                                    this.setModalRemovePeserta()
+                                }
+                            }}
+                        >
+
+                            <span className="font-color-white">Ya</span>
+                        </Button>
+                        <Button color className="btn-v2" onClick={this.setModalRemovePeserta}>
+                            Tidak
+                        </Button>
+                    </ModalFooter>
+                </Modal>
+                <div className=' content-heading border-radius-login'>
+                    <span className="btn-radius">
+                        <ReactToPrint
+                            trigger={() => {
+                                return <span>
+                                    <Button color className="btn-labeled-4">
+                                        <h4 className="p-0 mt-2">Print dan Download</h4>
+                                    </Button>
+                                </span>
+                            }}
+                            content={() => this.componentRef}
+                        />
+                    </span>
+                </div>
+                <div style={{ display: "none" }}>
+                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
+                </div>
+                <div className='page py-5 m-0 '>
+                    <div className='BA-Header'>
+                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
+                        {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
+                    </div>
+                    <div className='BA-body px-5 pt-3'>
+                        <p>
+                            Pada hari ini
+                            {dataSuratBA?.isEditTanggal &&
+                                <span style={{ textIndent:"0rem"}}>
+                                    <DatePicker
+                                        selected={tanggal ? new Date(tanggal) : tanggal}
+                                        onChange={(tanggal) => {
+                                            this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
+                                        }}
+                                        dateFormat="dd/MM/yyyy"
+                                        placeholderText="Isi Tanggal"
+                                        locale={id}
+                                        className="form-control bg-white"
+                                    />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTanggal} />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal}
+                                    />
+                                </span>
+                            }
+                            {setTanggal === true || this.state?.setTanggal === true ?
+                                <span onClick={this.isEditTanggal}> {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
+                                <span onClick={this.isEditTanggal}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                            }
+                            &nbsp;bertempat di
+                            {dataSuratBA?.isEditTempat &&
+                                <span>
+                                    <input type='text'
+                                        defaultValue={""}
+                                        ref="inputTempat"
+                                        onChange={() => {
+                                            this.setState({ tempat: this.refs.inputTempat.value }, this.setDataSuratBA)
+                                        }}
+                                    />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTempat} />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditTempat() }} />
+                                </span>
+                            }
+                            {this.state?.tempat ?
+                                <span onClick={this.isEditTempat} className='hhh'>
+                                    &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
+                                </span>
+                                :
+                                <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></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:
+
+                            <ol>
+                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) =>
+                                    <li>
+                                        {value.nama}
+                                        <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                            onClick={() => {
+                                                this.setState({
+                                                    selectedPeserta: value._id
+                                                })
+                                                this.setModalRemovePeserta()
+                                            }} />
+                                    </li>)}
+                            </ol>
+                        </p>
+                        <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:
+
+                            <ol className='mt-3'>
+                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
+                                    {setTanggal === true || this.state?.setTanggal === true ?
+                                        <span> &nbsp;{moment(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>
+                            </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>
+                                    {dataPelanggaran?.data?.map((e, i) => (
+                                        <tr key={e._id}>
+                                            <td>{++i}</td>
+                                            {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
+                                            <td>{e.pasal}</td>
+                                            <td>{e.butir_pelanggaran}</td>
+                                            <td>{e.pelanggaran}</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={descPelanggaran[e._id]?.simpulan || ""}
+                                                    disabled={false}
+                                                    onChange={(evt) => {
+                                                        this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()
+
+                                                    }}
+                                                />
+                                            </td>
+                                            <td style={{ maxWidth: "80px" }}>
+                                                {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}
+                                                {/* <ContentEditable
+                                                    html={`Sanksi Administratif berupa ${dataSuratBA?.sanksi||this.state.sanksi}` || ""}
+                                                    // html={descPelanggaran[e._id]?.rekomendasi || ""}
+
+                                                    disabled={false}
+                                                    // onChange={(evt) => {
+                                                    //     this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
+                                                    // }}
+                                                /> */}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        <p>
+                            <ol start="3">
+                                <li>Temuan Lain:
+                                    {this.props.dataSuratBA?.isEditTemuanLain ?
+                                        <span>
+                                            <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan"
+                                            />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => {
+                                                this.updateValueTemuanLain(), this.isEditTemuanLain()
+                                            }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTemuanLain} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.temuanLain?.map((value) => <li>{value}</li>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>Hal-hal yang memberatkan, sebagai berikut:
+                                    {this.props.dataSuratBA?.isEditKeberatan ?
+                                        <span>
+                                            <input style={{ height: "30px", width: "250px" }} type='text' defaultValue={""} ref="inputMemberatkan" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemberatkan(), this.isEditKeberatan() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditKeberatan} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.memberatkan?.map((value) => <li>{value}</li>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>hal-hal yang meringankan, sebagai berikut:
+                                    {this.props.dataSuratBA?.isEditMeringankan ?
+                                        <span>
+                                            <input type='text' defaultValue={""} ref="inputMeringankan" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemringankan(), this.isEditMeringankan() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditMeringankan} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.meringankan?.map((value) => <li>{value}</li>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>
+                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
+                                        {dataSuratBA?.isEditSanksi &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue=""
+                                                    ref="inputsanksi"
+                                                    onChange={() => {
+                                                        this.setState({ sanksi: this.refs.inputsanksi.value }, this.setDataSuratBA)
+                                                    }}
+                                                />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditSanksi() }} />
+                                            </span>
+                                        }
+                                        {dataSuratBA?.sanksi || this.state?.sanksi ?
+                                            <span onClick={this.isEditSanksi}>
+                                                &nbsp;{dataSuratBA?.sanksi || this.state?.sanksi}
+                                            </span>
+                                            :
+                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>
+                                        }
+                                    </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>
+                        <CopyToClipboard
+                            text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
+                            options={{ asHtml: true }}
+                        >
+                            <div>
+                                <span className="btn-radius">
+                                    <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
+                                        this.CloseCopied()
+                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                    </Button>
+                                </span>
+                                <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
+                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                </Popover>
+                            </div>
+
+                        </CopyToClipboard>
+
+                        <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>
+            </div >
+        );
+    }
+}
+
+// const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+// export default connect(mapStateToProps)(BeritaAcara)
+export default BeritaAcara

components/Sanksi/BeritaAcara_A.js

@@ -20,7 +20,7 @@ class BeritaAcara extends Component {
         super(props);
         this.state = {
             isEditTempat: false,
-            tempat: "[Mohon Diisi]",
+            tempat: <strong>[Mohon Diisi]</strong>,
             isEditTanggal: false,
             tanggal: "",
             setTanggal: false,
@@ -244,7 +244,7 @@ class BeritaAcara extends Component {
                                 }
                                 {setTanggal === true || this.state?.setTanggal === true ?
                                     <span onClick={this.isEditTanggal}> {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
-                                    <span onClick={this.isEditTanggal}> &nbsp;[Mohon Diisi] &nbsp;</span>
+                                    <span onClick={this.isEditTanggal}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                                 }
 
 
@@ -253,7 +253,7 @@ class BeritaAcara extends Component {
                                 {dataSuratBA?.isEditTempat &&
                                     <span>
                                         <input type='text'
-                                            defaultValue={dataSuratBA?.tempat}
+                                            defaultValue={""}
                                             ref="inputTempat"
                                             onChange={() => {
                                                 this.setState({ tempat: this.refs.inputTempat.value }, this.setDataSuratBA)
@@ -263,12 +263,12 @@ class BeritaAcara extends Component {
                                         <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditTempat() }} />
                                     </span>
                                 }
-                                {dataSuratBA?.tempat || this.state?.tempat ?
+                                {this.state?.tempat ?
                                     <span onClick={this.isEditTempat}>
                                         &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
                                     </span>
                                     :
-                                    <span onClick={this.isEditTempat}>[Mohon Diisi]</span>
+                                    <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
                                 }
 
                                 ,
@@ -415,7 +415,7 @@ class BeritaAcara extends Component {
                         </p>
                         <p>
                             <CopyToClipboard
-                                text={`https://sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
+                                text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
                                 options={{ asHtml: true }}
                             >
                                 <div>
@@ -434,7 +434,7 @@ class BeritaAcara extends Component {
 
                             </CopyToClipboard>
                         </p>
-                        <table className='demo'>
+                        {/* <table className='demo'>
                             <tbody>
 
                                 <tr>
@@ -459,7 +459,7 @@ class BeritaAcara extends Component {
                                             </td>
                                         </tr>)) : ""}
                             </tbody>
-                        </table>
+                        </table> */}
                         {/* <div>
                             <div id="ttd-header" className='text-center signature-border'>
                                 <span className='text-center'> PESERTA RAPAT PENYUSUNAN REKOMENDASI</span>
@@ -477,10 +477,32 @@ class BeritaAcara extends Component {
                                     )) : ""}
                             </div>
                         </div> */}
+                        <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>
 
 
                     </page>
-                </div>
+                </div >
             </div >
 
         );

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_A";
+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

@@ -164,7 +164,7 @@ class ComponentToPrint extends React.Component {
                     <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'>
+                    {/* <table className='demo'>
                         <tbody>
 
                             <tr>
@@ -189,7 +189,29 @@ class ComponentToPrint extends React.Component {
                                         </td>
                                     </tr>)) : ""}
                         </tbody>
-                    </table>
+                    </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>

components/Sanksi/SuratBA_A.js

@@ -0,0 +1,202 @@
+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 dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
+        this.setState({ dataLaporan });
+        this.setState(dataPelanggaran)
+        this.setState(autoSaveDataSuratBA)
+
+    };
+
+    render() {
+        const { dataLaporan, descPelanggaran } = this.state
+        const { dataPelanggaran, dataSuratBA } = this.props
+        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>
+                    {dataLaporan.data && (<h3 className='text-uppercase' >{dataLaporan.data.pt.nama}</h3>)}
+                </div>
+                <div className='BA-body pt-3'>
+                    <p>
+                        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:
+                        <ol>
+                            {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                        </ol>
+                    </p>
+                    <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:
+
+                        <ol className='mt-3'>
+                            <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>
+                        </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>
+                                {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>
+                                        {this.state.descPelanggaran ?
+                                            (
+                                                <td style={{ minWidth: "215px" }} >{"" || dataSuratBA?.descPelanggaran[e?._id]?.simpulan
+                                                    || 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" }} >{"" || dataSuratBA?.descPelanggaran[e?._id]?.simpulan
+                                            || this.state.descPelanggaran[e?._id]?.simpulan
+                                        }</td> */}
+                                        <td style={{ minWidth: "215px" }}>{`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}</td>
+                                    </tr>
+
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <p>
+                        <ol start="3">
+                            <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>
+                    </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">
+                            {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 ComponentToPrint

components/Sanksi/TablePenetapanSanksi.js

@@ -7,6 +7,7 @@ import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
 import Router from "next/router";
 import { ToastContainer, toast } from "react-toastify";
 import { getAutoSave } from "@/actions/autosave";
+import Datatable from "@/components/Tables/Datatable";
 
 
 
@@ -17,7 +18,7 @@ export class TablePenetapanSanksi extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			pelanggaran: null,
+			// pelanggaran: null,
 			checkedData: [],
 			labelSanksi: [],
 			btnDelegasi: false,
@@ -33,6 +34,7 @@ export class TablePenetapanSanksi extends Component {
 		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 })) : [] })
 	};
 
 	onHandleChange = (evt) => {
@@ -60,76 +62,74 @@ export class TablePenetapanSanksi extends Component {
 		const { pelanggaran, labelSanksi, checkedData } = this.state;
 
 		return (
-			<Card className="card-default">
-				<Table bordered hover responsive>
-					<thead>
-						<tr>
-							<th>No</th>
-							<th>Jenis Pelanggaran</th>
-							<th>Sanksi</th>
-							<th></th>
-						</tr>
-					</thead>
-					<tbody>
-						{pelanggaran
-							? pelanggaran.data.map((jp, index) => (
-								<tr key={jp._id}>
-									<td>
-										<label>{index + 1}</label>
-									</td>
-									<td>
-										<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 className="card b ">
+				<div className="card-body card-over">
+					{pelanggaran && <Datatable options={{
+						responsive: false, ordering: true,
+						paging: false,
+						// searching:false,
+						ordering: false,
+						// info: false,
+					}}>
+						<table className="table w-100" >
+							<thead>
+								<tr>
+									<th>No</th>
+									<th>Jenis Pelanggaran</th>
+									<th>Sanksi</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{pelanggaran?.data?.map((jp, index) =>
+									<tr key={jp._id}>
+										<td>
+											<label>{index + 1}</label>
+										</td>
+										<td>
+											<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>
-										</div>
-									</td>
-									<td>
-										<div className="media align-items-center">
-											<div className="media-body d-flex">
-												<div>
-													<p>{jp.sanksi}</p>
-													<p>Keterangan : {jp.keterangan_sanksi}</p>
+										</td>
+										<td>
+											<div className="media align-items-center">
+												<div className="media-body d-flex">
+													<div>
+														<p>{jp.sanksi}</p>
+														<p>Keterangan : {jp.keterangan_sanksi}</p>
+													</div>
 												</div>
 											</div>
-										</div>
-									</td>
-									<td>
-										<div className="checkbox c-checkbox">
-											<label>
-												<input type="checkbox" checked={checkedData.find(id => id === jp._id)} value={jp._id} onChange={(evt) => {
-													this.onHandleChange(evt)
-													this.setLabelSanksi(evt, jp.label_sanksi)
-													this.props.handleAutoSave()
-												}} />
-												<span className="fa fa-check"></span>
-											</label>
-										</div>
-									</td>
-								</tr>
-							))
-							: ""}
-					</tbody>
-				</Table>
-				<div className="float-right m-2 ">
-					{this.props.user?.role.id === 2020 ? (
-						labelSanksi.length && labelSanksi.filter((e) => e.labelSanksi === "Ringan" || e.labelSanksi === "Sedang").length === labelSanksi.length ? (
-							<Button className="btn-login float-right" color onClick={this.ondelegasi} >
-								<span className="font-color-white">
-									Delegasi ke LLDIKTI
-								</span>
-							</Button>
-						) : ("")
-					) : ("")
+										</td>
+										<td>
+											<div className="checkbox c-checkbox">
+												<label>
+													<input type="checkbox" checked={checkedData.find(id => id === jp._id)} value={jp._id} onChange={(evt) => {
+														this.onHandleChange(evt)
+														this.setLabelSanksi(evt, jp.label_sanksi)
+														this.props.handleAutoSave()
+													}} />
+													<span className="fa fa-check"></span>
+												</label>
+											</div>
+										</td>
+									</tr>
+								)
+								}
+							</tbody>
+						</table>
+
+					</Datatable>
 					}
 
 				</div>
-
-			</Card>
+			</div>
 		);
 	}
 }

components/Sanksi/UploadSurat.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
+import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
 import Select from "react-select";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -9,6 +9,8 @@ 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_A";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -82,7 +84,6 @@ export class UploadSurat extends Component {
 			awalsanksi: "",
 			akhirsanksi: "",
 			tmtCheck: false,
-			filesBeritaAcara: [],
 			saveData: [],
 			terimaSuratSanksi: "",
 			tglAkhirKeberatan: "",
@@ -102,18 +103,6 @@ export class UploadSurat extends Component {
 		});
 		this.props.setUploadSuratSanksi(this.state);
 	};
-
-	onDropBA = (filesBeritaAcara) => {
-		this.setState({
-			filesBeritaAcara: filesBeritaAcara.map((file) =>
-				Object.assign(file, {
-					preview: URL.createObjectURL(file),
-				})
-			),
-			stat: "Added " + filesBeritaAcara.length + " file(s)",
-		});
-		this.props.setUploadSuratSanksi(this.state);
-	};
 	onDropTandaTerimaSS = (filesTandaTerimaSS) => {
 		this.setState({
 			filesTandaTerimaSS: filesTandaTerimaSS.map((file) =>
@@ -164,17 +153,6 @@ export class UploadSurat extends Component {
 		});
 		this.props.setUploadSuratSanksi(this.state);
 	};
-	clearFilesBA = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		this.setState({
-			stat: this.state.filesBeritaAcara.length ? this.state.filesBeritaAcara.length + " file(s) cleared." : "No files to clear.",
-		});
-		this.setState({
-			filesBeritaAcara: [],
-		});
-		this.props.setUploadSuratSanksi(this.state);
-	};
 	clearFilesTerimaSanksi = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -217,13 +195,6 @@ export class UploadSurat extends Component {
 				files: newFiles,
 			});
 		}
-		const removeFileBA = file => () => {
-			const newFiles = [...filesBeritaAcara]
-			newFiles.splice(newFiles.indexOf(file), 1)
-			this.setState({
-				filesBeritaAcara: newFiles,
-			});
-		}
 		const removeFileTandaTerimaSS = file => () => {
 			const newFiles = [...filesTandaTerimaSS]
 			newFiles.splice(newFiles.indexOf(file), 1)
@@ -237,12 +208,6 @@ export class UploadSurat extends Component {
 				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
 			</p>
 		));
-		const thumbsBA = filesBeritaAcara.map((file, index) => (
-			<p>
-				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
-				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFileBA(file)} />
-			</p>
-		));
 		const thumbsTandaTerimaSS = filesTandaTerimaSS.map((file, index) => (
 			<p>
 				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
@@ -405,42 +370,23 @@ export class UploadSurat extends Component {
 				</FormGroup>
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">
-						Dokumen Laporan Evaluasi dan Pembahasan<span>: &nbsp;</span><span className="text-danger">*</span>
+						Dokumen Laporan Evaluasi dan Pembahasan<span>: &nbsp;</span>
 					</label>
 					<div className="col-md-10">
-						<DropzoneWrapper className="" onDrop={this.onDropBA}>
-							{({ getRootProps, getInputProps, isDragActive }) => {
-								return (
-									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
-										<input {...getInputProps()} />
-										<div className="dropzone-style-1">
-											<div className="center-ver-hor dropzone-previews flex">
-												{this.state.filesBeritaAcara.length > 0 ? (
-													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
-														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
-													</div>
-												) : (
-													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
-														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
-													</div>
-												)}
-											</div>
-										</div>
-										<div className="d-flex align-items-center">
-											<small className="ml-auto">
-												<button type="button" className="btn btn-link" onClick={this.clearFilesBA}>
-													Reset dokumen
-												</button>
-											</small>
-										</div>
-									</div>
-								);
-							}}
-						</DropzoneWrapper>
-						<div>
-							{thumbsBA}
+
+						<div style={{ display: "none" }}>
+							<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
 						</div>
-						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
+						<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>
 				</FormGroup>
 				<FormGroup row className="mt-3">
@@ -471,7 +417,7 @@ export class UploadSurat extends Component {
 										<input {...getInputProps()} />
 										<div className="dropzone-style-1">
 											<div className="center-ver-hor dropzone-previews flex">
-												{this.state.filesBeritaAcara.length > 0 ? (
+												{this.state.filesTandaTerimaSS.length > 0 ? (
 													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
 													</div>
@@ -500,7 +446,10 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Akhir Permohonan Keberatan Sanksi</label>
+					<label className="col-md-2 col-form-label">Akhir Permohonan Keberatan Sanksi
+						<p>
+							Note : 21 hari kerja						</p>
+					</label>
 					<span className="col-sm-3 float-left">
 						<DatePicker
 							selected={tglAkhirKeberatan}

pages/app/sanksi/proses.js

@@ -16,7 +16,7 @@ import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import { ToastContainer, toast } from "react-toastify";
-import BeritaAcara from "@/components/Sanksi/BeritaAcara_A";
+import BeritaAcara from "@/components/Sanksi/BeritaAcara";
 import { getAutoSave, inputAutoSave } from "@/actions/autosave";
 
 
@@ -26,7 +26,7 @@ const stepNavitemStyle = {
 };
 
 class ProsesSanksi extends Component {
-	dataUpload = {};
+	// dataUpload = {};
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -50,18 +50,19 @@ class ProsesSanksi extends Component {
 		const { data: listSanksi } = await getPelanggaranSanksi(token)
 		const getDataSave = await getAutoSave({ id, laporan: true });
 		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
-		this.setState({ pelaporan, listSanksi });
+		const activeStep = getDataSave.data?.PenetapanSanksi?.activeStep
+		this.setState({ pelaporan, listSanksi, activeStep: activeStep || "1" });
 		this.setState({ dataPelanggaran: autoSaveDataPelanggaran })
 
 	};
 
 
-	handleAutoSave = async (data) => {
+	handleAutoSave = async (data, activeStep) => {
 
 		const { query, token } = this.props;
 		const { id } = query;
 		const { dataSuratBA, dataUpload } = this.state
-		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran: data } }, token, id, laporan: true })
+		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran: data, activeStep } }, token, id, laporan: true })
 	}
 	done = async (e) => {
 		const toastid = toast.loading("Please wait...");
@@ -82,11 +83,6 @@ class ProsesSanksi extends Component {
 					formdata.append("dokumen", e);
 				});
 			}
-			if (this.state.dataUpload.filesBeritaAcara && this.state.dataUpload.filesBeritaAcara.length > 0) {
-				this.state.dataUpload.filesBeritaAcara.forEach((e) => {
-					formdata.append("berita_acara", e);
-				});
-			}
 			if (this.state.dataUpload.fileTandaTerimaSS && this.state.dataUpload.fileTandaTerimaSS.length > 0) {
 				this.state.dataUpload.fileTandaTerimaSS.forEach((e) => {
 					formdata.append("dokumen_terima_sanksi", e);
@@ -123,8 +119,11 @@ class ProsesSanksi extends Component {
 	toggleStep = (activeStep) => () => {
 		if (this.state.activeStep !== activeStep) {
 			this.setState({
-				activeStep,
+				activeStep: activeStep
 			});
+			this.handleAutoSave(this.state.dataPelanggaran, activeStep)// parameter 1 untuk data pelanggaran 1 untuk activestep
+			// this.state.activeStep = activeStep;
+
 		}
 	};
 
@@ -145,7 +144,7 @@ class ProsesSanksi extends Component {
 	};
 
 	render() {
-		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, autoSaveDataPelanggaran } = this.state;
+		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA } = this.state
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -301,7 +300,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran?.data} query={this.props.query} handleAutoSave={this.handleAutoSave} />}
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} dataSuratBA={dataSuratBA} />}
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -316,7 +315,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} autoSaveDataPelanggaran={autoSaveDataPelanggaran} 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">

pages/pageDone.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import BasePage from "@/components/Layout/BasePage";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
+
+import Link from 'next/dist/client/link';
+class PlenoSanksi extends React.Component {
+    render() {
+        return (
+            <div>
+                <Navbar className="navbar-color" expand="md" dark>
+                    <NavbarBrand href="/">
+                        <img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
+                    </NavbarBrand>
+                </Navbar>
+                <ContentWrapper>
+                    <div id="pageDone-TTD">
+                        <div className=' float-lg-right'>
+                            <span className=''>
+                                <img className=" main-logo-1" src="/static/img/ditbaga-logo.png" alt="gambar" />
+                                <img className="main-logo" src="/static/img/logo_kemdikbudristek.png" alt="gambar" />
+                            </span>
+                        </div>
+                        <div className='main text-center'>
+                            <img className="main" src="/static/img/success_ttd.png" alt="gambar" />
+
+                        </div>
+                        <div className='text-center'>
+                            <text className='text-1'>Tanda tangan Anda berhasil tersimpan!</text>
+                            <p className=' pt-2 text-center font-color-black '>Terima kasih, dengan demikian Anda telah memberikan persetujuan pleno untuk Universitas Satyagama</p>
+                        </div>
+                        <Link href="/app">
+                            <div className="btn-radius d-block text-center">
+                                <Button color className="btn-labeled-3">
+                                    <h4 className="p-0 mt-2">Kunjung Aplikasi SIDALI</h4>
+                                </Button>
+                            </div>
+                        </Link>
+                    </div>
+
+                </ContentWrapper>
+            </div>
+
+        );
+    }
+}
+PlenoSanksi.Layout = BasePage;
+export default PlenoSanksi;

pages/pt/jawaban-keberatan/detail.js

@@ -105,7 +105,8 @@ class JawabanKeberatan extends Component {
 													<DetailSanksi data={sanksi.data} />
 													<DetailJawaban data={sanksi.data.jawaban.keberatan} />
 													{sanksi.data.jawaban?.keberatan?.status !== "Membatalkan Keputusan" &&
-														(new Date(sanksi.data.batas_waktu.banding).getTime() > Date.now() ? (
+														(new Date(sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding).getTime() + 86400000 > Date.now() ? (
+
 															<>
 																<p style={{ fontSize: '1vw' }}>
 																	<strong>
@@ -113,7 +114,7 @@ class JawabanKeberatan extends Component {
 																	</strong>
 																</p>
 																<p style={{ fontSize: '0.9vw' }}>
-																	Pengajuan dilakukan paling lambat tanggal {moment(sanksi.data.batas_waktu.banding).locale("id").format("DD MMMM YYYY")}
+																	Pengajuan dilakukan paling lambat tanggal {moment(sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("DD MMMM YYYY")}
 																</p>
 																<p className="lead">
 																	<span className="btn-radius">

pages/pt/sanksi/detail.js

@@ -86,7 +86,7 @@ class Sanksi extends Component {
 										<Row>
 											<Col lg={12}>
 												<DetailSanksi data={sanksi.data} />
-												{new Date(sanksi.data.batas_waktu.keberatan).getTime() > Date.now() ? (
+												{new Date(sanksi.data.tanggal_akhir_keberatan).getTime() + 86400000 > Date.now() ? (
 													<>
 														<p style={{ fontSize: '1vw' }}>
 															<strong>
@@ -94,7 +94,7 @@ class Sanksi extends Component {
 															</strong>
 														</p>
 														<p style={{ fontSize: '0.9vw' }}>
-															Pengajuan dilakukan paling lambat tanggal {moment(sanksi.data.batas_waktu.keberatan).locale("id").format("DD MMMM YYYY")}
+															Pengajuan dilakukan paling lambat tanggal {moment(sanksi.data.tanggal_akhir_keberatan).locale("id").format("DD MMMM YYYY")}
 														</p>
 														<p className="lead">
 															<Link href={{ pathname: "/pt/keberatan/detail", query: { id: sanksi.data._id } }}>

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

@@ -4,7 +4,7 @@ import BasePage from "@/components/Layout/BasePage";
 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 { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import SignatureCanvas from 'react-signature-canvas'
@@ -12,6 +12,10 @@ import { addPesertaPleno } from '../../../actions/public';
 import { toast } from "react-toastify";
 import Router from "next/router";
 import swal from "sweetalert2";
+import Link from 'next/dist/client/link';
+import moment from 'moment';
+
+
 
 
 
@@ -24,7 +28,8 @@ class PlenoSanksi extends Component {
             signature: "",
             nama: "",
             data: {},
-            changesign: false
+            changesign: false,
+            pageDone: false,
 
         }
     }
@@ -39,7 +44,7 @@ class PlenoSanksi extends Component {
         const dataLaporan = await getOneLaporanPublic(id);
         const getDataSave = await getAutoSave({ id, laporan: true });
         const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
-        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran.data;
+        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
         this.setState({ dataLaporan, dataSuratBA, dataPelanggaran });
     };
 
@@ -93,10 +98,8 @@ class PlenoSanksi extends Component {
                 title: "Berhasil Input Tanda Tangan",
                 icon: "success",
                 confirmButtonColor: "#3e3a8e",
-
             });
-            Router.push("/app");
-
+            Router.push(`/signature/pleno-sanksi/done/${id}`);
         }
     };
 
@@ -105,13 +108,14 @@ class PlenoSanksi extends Component {
 
     render() {
         const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama, changesign } = this.state
+
         return (
             <ContentWrapper unwrap>
                 <Modal isOpen={this.state.modal} >
 
                     <ModalBody>
                         <FormGroup row>
-                            <label className="col-md-2 col-form-label">Nama <span className=' text-danger'>*</span>:</label>
+                            <label className="col-md-2 col-form-label">Nama:<span className=' text-danger'>*</span></label>
                             <div className="col-md-10">
                                 <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
                             </div>
@@ -132,27 +136,33 @@ class PlenoSanksi extends Component {
                             </Button>
                         </ModalFooter>
                         <ModalFooter>
-                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className="btn-labeled-notHover pt-2 pb-2 " onClick={this.onSubmit}>
-                                <span className="font-color-white">Kirim</span>
+                            <Button color className="bg-danger" onClick={this.toggleModal}>
+                                Batal
+                            </Button>
+                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className=" color-3e3a8e" onClick={this.onSubmit}>
+                                <span className="font-color-white ">Kirim</span>
                             </Button>
+
                         </ModalFooter>
 
                     </ModalBody>
                 </Modal>
-                <div className='page'>
-                    <div className='BA-logo'>
+
+                <div className='page-sign'>
+                    <div className='BA-Header'>
                         <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
+                        {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
                     </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'>
+                    <div className='BA-body px-5 pt-3'>
+                        <p>
                             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
+                            &nbsp;bertempat di
                             {dataSuratBA?.tempat === "[Mohon Diisi]" ?
                                 <span>Belum Diisi Oleh Dikti</span>
                                 :
@@ -163,34 +173,26 @@ class PlenoSanksi extends Component {
                             ,
                             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>
-                                }
+                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                            </ol>
+                        </p>
+                        <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:
 
+                            <ol className='mt-3'>
+                                <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>
                             </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>
+                        </p>
+                        <div className='table-a my-4' >
+                            <table>
+                                <thead >
                                     <tr>
                                         <th rowspan="2">NO</th>
                                         <th rowspan="2">NAMA DAN IZIN PRODI</th>
@@ -205,60 +207,66 @@ class PlenoSanksi extends Component {
                                     </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 >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
-                                                <td >{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi || ""}</td>
-                                            </tr>
-
-                                        ))
-                                        : ""}
+                                    {dataPelanggaran?.map((e, i) => (
+                                        <tr key={e._id}>
+                                            <td>{++i}</td>
+                                            {dataLaporan.data && (<td >{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 style={{ maxWidth: "80px" }}>
+                                                {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}
+                                            </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>
+                            <ol start="3">
+                                <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]" ?
+                                            "-"
+                                            : <span>{dataSuratBA?.sanksi}</span>}
+                                        ”.</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>
+                        <p><strong>Note: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
+                        <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
+                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
+                        </Button>
                     </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: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </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">Setuju</h4>
-                    </Button>
                 </div>
+
+
             </ContentWrapper>
         );
     }

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

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import BasePage from "@/components/Layout/BasePage";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
+import { getOneLaporanPublic } from '@/actions/public';
+
+import Link from 'next/dist/client/link';
+class PlenoSanksi extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+
+
+        }
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+    componentDidMount = async () => {
+        const { query } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporanPublic(id);
+        this.setState({ dataLaporan });
+    };
+    render() {
+        const { dataLaporan } = this.state
+        return (
+            <div>
+                <Navbar className="navbar-color" expand="md" dark>
+                    <NavbarBrand href="/">
+                        <img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
+                    </NavbarBrand>
+                </Navbar>
+                <ContentWrapper>
+                    <div id="pageDone-TTD">
+                        <div className=' float-lg-right'>
+                            <span className=''>
+                                <img className=" main-logo-1" src="/static/img/ditbaga-logo.png" alt="gambar" />
+                                <img className="main-logo" src="/static/img/logo_kemdikbudristek.png" alt="gambar" />
+                            </span>
+                        </div>
+                        <div className='main text-center'>
+                            <img className="main" src="/static/img/success_ttd.png" alt="gambar" />
+
+                        </div>
+                        <div className='text-center'>
+                            <text className='text-1'>Tanda tangan Anda berhasil tersimpan!</text>
+                            <p className=' pt-2 text-center font-color-black '>Terima kasih, dengan demikian Anda telah memberikan persetujuan terhadap Laporan Hasil Evaluasi dan Pembahasan.</p>
+                        </div>
+                        <Link href="/app">
+                            <div className="btn-radius d-block text-center">
+                                <Button color className="btn-labeled-3">
+                                    <h4 className="p-0 mt-2">Kunjungi Aplikasi SIDALI</h4>
+                                </Button>
+                            </div>
+                        </Link>
+                    </div>
+
+                </ContentWrapper>
+            </div>
+
+        );
+    }
+}
+PlenoSanksi.Layout = BasePage;
+export default PlenoSanksi;

styles/app/app/mycss.scss

@@ -1,7 +1,5 @@
-.huruf-besar{
-
-}
-
+@media screen {
+///////// Home
 #video-css video{
     width: 450px;
 
@@ -31,3 +29,178 @@
         margin-top: -15px; 
     }
 }
+
+#pageDone-TTD{
+   .main{
+    width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    margin-bottom: -13px;
+   }
+   .main-logo{
+    width: 250px; 
+    margin-right: 5px;
+    float: right;
+   }
+   .main-logo-1{
+    width: 50px;
+    float: right;
+   }
+   .text-1{
+    font-family:Verdana, Geneva, Tahoma, sans-serif;
+    font-style: normal;
+    font-weight: 550;
+    font-size: 15px;
+   }
+}
+
+///////////////////////////////////////////<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+
+  //////////////////////////////////Table Pelanggaran
+  
+  .table-a th {
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+    background: #F0F0F0;
+    text-align: center;
+    font-size: small;
+  }
+  
+  .table-a td {
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+    word-wrap: break-word;
+    // max-width: 130px;
+    font-size: 0.8rem;
+    @media only screen and (min-width: 1546px) {
+      word-wrap: break-word;
+    }
+    @media only screen and ( max-width:1546px) {
+      max-width: 130px;
+     }
+
+  }
+  .table-a{
+    border-collapse: collapse;
+    table-layout: fixed;
+    overflow: auto;
+    margin: -20px ;
+
+  }
+
+
+////////////////////////////////////////table signature in berita acara
+#ttd{
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-wrap: wrap;
+   
+
+    .ttd-div{
+        width: 50%;
+        border: 1px solid #C0C0C0;
+    }
+    .sign-ttd{
+        width:90% ;
+        height: 150px;
+        margin-right: auto;
+        margin-left: auto;
+    }
+    .sign-nama{
+                background-color: rgb(206, 206, 206);
+                text-align: center;
+                padding: 2px;
+                word-wrap: break-word;
+                color: black;
+              }
+  }
+  .header-ttd{
+    background-color: #C0C0C0; 
+    text-align: center;
+    color: black;
+    margin-left: auto;
+    margin-right: auto;
+}
+//////////////////////////////////////>>>>>>>BeritaAcara
+.page {
+  // width: 21cm;
+  // min-height: 29.7cm;
+  // padding-top: 2cm;
+  // padding-bottom: 2cm;
+  // margin: 1cm auto;
+  // display: flex;
+  border: 1px #D3D3D3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.BA-Header {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  font-family: "Times New Roman", Times, serif;
+}
+.BA-logo{
+  width: 30%;
+  margin-bottom: 10px;
+}
+.BA-body p{
+  font-family: "Times New Roman", Times, serif;
+  font-size: 0.8rem;
+  text-indent: 2rem;
+}
+.BA-body ol{
+  margin-top: 1px;
+  text-indent: 0px;
+}
+//////////////////////////////////////////////////////siganature public
+.signature-style{
+  border: 1px solid#c9c8c8;
+width: 380px;
+height: 190px;
+margin-left: auto;
+margin-right: auto;
+border-radius: 4px;
+}
+
+.page-sign {
+  width: 21cm;
+  min-height: 29.7cm;
+  padding-top: 2cm;
+  padding-bottom: 2cm;
+  margin: 1cm auto;
+  // display: flex;
+  border: 1px #D3D3D3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+/////////////////////////////////////// style Component 
+.btn-v1-outline-purple {
+  color: #3e3a8e;
+  border-color: #3e3a8e; }
+  .btn-v1-outline-purple:hover {
+    color: #fff;
+    background-color: #7266ba;
+    border-color: #7266ba; }
+  .btn-va-outline-purple:focus, .btn-v1-outline-purple.focus {
+    box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5); }
+  .btn-v1-outline-purple.disabled, .btn-v1-outline-purple:disabled {
+    color: #7266ba;
+    background-color: transparent; }
+  .btn-v1-outline-purple:not(:disabled):not(.disabled):active, .btn-v1-outline-purple:not(:disabled):not(.disabled).active,
+  .show > .btn-v1-outline-purple.dropdown-toggle {
+    color: #fff;
+    background-color: #7266ba;
+    border-color: #7266ba; }
+    .btn-v1-outline-purple:not(:disabled):not(.disabled):active:focus, .btn-v1-outline-purple:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-v1-outline-purple.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5); }
+
+    }

styles/bootstrap/_print.scss

@@ -88,6 +88,7 @@
     // don't use `!important` on `size` as it breaks in Chrome.
     @page {
       size: $print-page-size;
+      margin: 11mm 10mm 17mm 17mm;
     }
     body {
       min-width: $print-body-min-width !important;
@@ -136,193 +137,101 @@
       border-color: $table-border-color;
     }
 
-    // Bootstrap specific changes end
-  }
-}
-
-
-
-.BA-logo {
-  width: 250px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-bottom: 10px;
-}
-
-.BA-header {
-  font-family: "Times New Roman", Times, serif;
-  text-align: center;
-  padding-bottom: 20px;
-}
-
-.BA-div {
-  padding-top: 100px;
-}
-
-.BA-p p {
-  padding: 10px;
-}
-
-.BA-body {
-  font-family: "Times New Roman", Times, serif;
-  padding-top: 0px;
-  padding-left: 50px;
-  padding-right: 50px;
-}
-
-.demo {
-  border: 1px solid #C0C0C0;
-  border-collapse: collapse;
-  padding: 5px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.demo .thdemo {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  background: #F0F0F0;
-  text-align: center;
-}
-.demo .trdemo{
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-}
-
-.demo .tddemo  {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  height: 100px;
-  min-width: 200px;
-}
-
-.table-a {
-  border: 1px solid #C0C0C0;
-  border-collapse: collapse;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 5px;
-  margin-left: -128px auto;
-  margin-right: auto;
-  table-layout: fixed;
-}
-
-.table-a th {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  background: #F0F0F0;
-  text-align: center;
-}
-
-.table-a td {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  word-wrap: break-word;
-  max-width: 150px;
-}
-
-#footer {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  text-align: center;
-  color: #979595;
-  padding-bottom: 30px;
-}
-
-////////////////////////////-----SuratBA_A
 
-body {
-  margin: 0;
-  padding: 0;
-  background-color: #FAFAFA;
-  font: 12pt "Tahoma";
-}
-
-* {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-}
-
-.page {
-  width: 21cm;
-  min-height: 29.7cm;
-  padding: 2cm;
-  margin: 1cm auto;
-  border: 1px #D3D3D3 solid;
-  border-radius: 5px;
-  background: white;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.subpage {
-  padding: 1cm;
-  border: 5px red solid;
-  height: 256mm;
-  outline: 2cm #FFEAEA solid;
-}
-
-@page {
-  size: A4;
-  margin: 0;
-}
-
-@media print {
+    #footer {
+      position: fixed;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      text-align: center;
+      color: #979595;
+      padding-bottom: -15px;
+    }
+    .BA-Header {
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+      font-family: "Times New Roman", Times, serif;
+    }
+    .BA-logo{
+      width: 30%;
+      margin-bottom: 10px;
+    }
+    .BA-body p{
+      font-family: "Times New Roman", Times, serif;
+      font-size: 15px;
+      text-indent: 15px;
+      page-break-after: avoid;
+    }
 
-  body,
-  page[size="A4"] {
-    // margin: 0;
-    box-shadow: 0;
-    margin-bottom: 50px;
+    //////////////////////////////////////////////////
+    .table-a th {
+      border: 1px solid #C0C0C0;
+      padding: 5px;
+      background: #F0F0F0;
+      text-align: center;
+      font-size: small;
+    }
+    
+    .table-a td {
+      border: 1px solid #C0C0C0;
+      padding: 5px;
+      word-wrap: break-word;
+      max-width: 215px;
+      font-size: 0.8rem;
+  
+    }
+    .table-a{
+      border-collapse: collapse;
+      table-layout: fixed;
+      margin-left: auto;
+      margin-right: auto;
+  
+    }
+    .BA-body ol{
+      margin-top: 1px;
+      text-indent: 0px;
+    }
+    //////////////////////////////////////////////////
+    #ttd{
+      width: 600px;
+      margin-left: auto;
+      margin-right: auto;
+      display: flex;
+      flex-wrap: wrap;
+     
+  
+      .ttd-div{
+          width: 50%;
+          border: 1px solid #C0C0C0;
+      }
+      .sign-ttd{
+          width:100% ;
+          height: 150px;
+          margin-right: auto;
+          margin-left: auto;
+      }
+      .sign-nama{
+                  background-color: rgb(206, 206, 206);
+                  text-align: center;
+                  padding: 2px;
+                  word-wrap: break-word;
+                  color: black;
+                }
+    }
+    .header-ttd{
+      background-color: #C0C0C0; 
+      text-align: center;
+      color: black;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 600px;
   }
+  }
+}
 
 
 
-}
-.signature-style{
-  border: 1px solid#c9c8c8;
-width: 380px;
-height: 200px;
-margin-left: auto;
-margin-right: auto;
-border-radius: 4px;
-}
-  
-
 
-  /////////////////////Coba pake flex wrap
-// #ttd {
-//   width: 410px;
-//   display: flex;
-//   flex-wrap: wrap;
-//   margin-left: auto;
-//   margin-right: auto;
-//     text-align: center;
-// }
-// #ttd-header {
-//   width: 410px;
-//   margin-left: auto;
-//   margin-right: auto;
-//   text-align: center;
-// }
-// .ttd-div{
-//   width: 205px;
-//   // height: 100px;
-// }
-// .sign-nama{
-//   background-color: rgb(206, 206, 206);
-//   text-align: center;
-//   // width: 215px;
-//   border: 1px solid#d9d6d6;
-//   padding: 2px;
-  
-// }
-// .sign-ttd{
-//   width: 205px;
-//   height: 80px;
-//   border: 1px solid#d9d6d6;
-//   padding: 5px;
 
-// }