|  | @@ -1,511 +0,0 @@
 | 
	
		
			
				|  |  | -import React, { useRef, Component } from 'react';
 | 
	
		
			
				|  |  | -import { useReactToPrint } from "react-to-print";
 | 
	
		
			
				|  |  | -import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, } from "reactstrap";
 | 
	
		
			
				|  |  | -import Head from 'next/head'
 | 
	
		
			
				|  |  | -import SignatureCanvas from 'react-signature-canvas'
 | 
	
		
			
				|  |  | -import ComponentToPrint from "./SuratBA";
 | 
	
		
			
				|  |  | -import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 | 
	
		
			
				|  |  | -import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
 | 
	
		
			
				|  |  | -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'
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -class BeritaAcara extends Component {
 | 
	
		
			
				|  |  | -    constructor(props) {
 | 
	
		
			
				|  |  | -        super(props);
 | 
	
		
			
				|  |  | -        this.state = {
 | 
	
		
			
				|  |  | -            isEditTempat: false,
 | 
	
		
			
				|  |  | -            tempat: <strong>[Mohon Diisi]</strong>,
 | 
	
		
			
				|  |  | -            isEditTanggal: false,
 | 
	
		
			
				|  |  | -            tanggal: "",
 | 
	
		
			
				|  |  | -            setTanggal: false,
 | 
	
		
			
				|  |  | -            isEditNamaPeserta: false,
 | 
	
		
			
				|  |  | -            isEditTemuanLain: false,
 | 
	
		
			
				|  |  | -            temuanLain: [],
 | 
	
		
			
				|  |  | -            memberatkan: [],
 | 
	
		
			
				|  |  | -            isEditKeberatan: false,
 | 
	
		
			
				|  |  | -            isEditMeringankan: false,
 | 
	
		
			
				|  |  | -            meringankan: [],
 | 
	
		
			
				|  |  | -            sanksi: "[Mohon Diisi]",
 | 
	
		
			
				|  |  | -            isEditSanksi: false,
 | 
	
		
			
				|  |  | -            copied: false,
 | 
	
		
			
				|  |  | -            setmeState: true,
 | 
	
		
			
				|  |  | -            descPelanggaran: [],
 | 
	
		
			
				|  |  | -        };
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    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);
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    render() {
 | 
	
		
			
				|  |  | -        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
 | 
	
		
			
				|  |  | -        const { descPelanggaran, tanggal, setTanggal } = this.state
 | 
	
		
			
				|  |  | -        return (
 | 
	
		
			
				|  |  | -            <div>
 | 
	
		
			
				|  |  | -                <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'>
 | 
	
		
			
				|  |  | -                    <page>
 | 
	
		
			
				|  |  | -                        <div className='BA-logo'>
 | 
	
		
			
				|  |  | -                            <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
 | 
	
		
			
				|  |  | -                        </div>
 | 
	
		
			
				|  |  | -                        <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
 | 
	
		
			
				|  |  | -                        {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
 | 
	
		
			
				|  |  | -                        <div className='body'>
 | 
	
		
			
				|  |  | -                            <p className='body'>
 | 
	
		
			
				|  |  | -                                Pada hari ini
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                {dataSuratBA?.isEditTanggal &&
 | 
	
		
			
				|  |  | -                                    <span>
 | 
	
		
			
				|  |  | -                                        <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 {moment(tanggal || this.state?.tanggal).format("D")}  bulan  {moment(tanggal || this.state?.tanggal).format("MMMM")} tahun  {moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
 | 
	
		
			
				|  |  | -                                    <span onClick={this.isEditTanggal}><strong> [Mohon Diisi]  </strong></span>
 | 
	
		
			
				|  |  | -                                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                 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}>
 | 
	
		
			
				|  |  | -                                         {dataSuratBA?.tempat || this.state?.tempat}
 | 
	
		
			
				|  |  | -                                    </span>
 | 
	
		
			
				|  |  | -                                    :
 | 
	
		
			
				|  |  | -                                    <span onClick={this.isEditTempat}><strong> [Mohon Diisi]  </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:
 | 
	
		
			
				|  |  | -                            </p>
 | 
	
		
			
				|  |  | -                            <div className='body'>
 | 
	
		
			
				|  |  | -                                <ol>
 | 
	
		
			
				|  |  | -                                    {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</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
 | 
	
		
			
				|  |  | -                                    {setTanggal === true || this.state?.setTanggal === true ?
 | 
	
		
			
				|  |  | -                                        <span>  {moment(tanggal || this.state?.tanggal).format("DD-MM-YYYY")}</span>
 | 
	
		
			
				|  |  | -                                        :
 | 
	
		
			
				|  |  | -                                        <span>  .......  </span>
 | 
	
		
			
				|  |  | -                                    }
 | 
	
		
			
				|  |  | -                                </li>
 | 
	
		
			
				|  |  | -                                <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
 | 
	
		
			
				|  |  | -                                <table className='table-a'>
 | 
	
		
			
				|  |  | -                                    <thead>
 | 
	
		
			
				|  |  | -                                        <tr>
 | 
	
		
			
				|  |  | -                                            <th rowspan="2">NO</th>
 | 
	
		
			
				|  |  | -                                            <th rowspan="2">NAMA DAN IZIN PRODI</th>
 | 
	
		
			
				|  |  | -                                            <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
 | 
	
		
			
				|  |  | -                                            <th rowspan="2">SIMPULAN</th>
 | 
	
		
			
				|  |  | -                                            <th rowspan="2">REKOMENDASI</th>
 | 
	
		
			
				|  |  | -                                        </tr>
 | 
	
		
			
				|  |  | -                                        <tr>
 | 
	
		
			
				|  |  | -                                            <th>PASAL</th>
 | 
	
		
			
				|  |  | -                                            <th>BUTIR PELANGGARAN</th>
 | 
	
		
			
				|  |  | -                                            <th>DESKRIPSI PELANGGARAN</th>
 | 
	
		
			
				|  |  | -                                        </tr>
 | 
	
		
			
				|  |  | -                                    </thead>
 | 
	
		
			
				|  |  | -                                    <tbody>
 | 
	
		
			
				|  |  | -                                        {dataPelanggaran?.data?.map((e, i) => (
 | 
	
		
			
				|  |  | -                                            <tr key={e._id}>
 | 
	
		
			
				|  |  | -                                                <td>{++i}</td>
 | 
	
		
			
				|  |  | -                                                {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
 | 
	
		
			
				|  |  | -                                                <td>{e.pasal}</td>
 | 
	
		
			
				|  |  | -                                                <td>{e.butir_pelanggaran}</td>
 | 
	
		
			
				|  |  | -                                                <td>{e.pelanggaran}</td>
 | 
	
		
			
				|  |  | -                                                <td>
 | 
	
		
			
				|  |  | -                                                    <ContentEditable
 | 
	
		
			
				|  |  | -                                                        html={descPelanggaran[e._id]?.simpulan || ""}
 | 
	
		
			
				|  |  | -                                                        disabled={false}
 | 
	
		
			
				|  |  | -                                                        onChange={(evt) => {
 | 
	
		
			
				|  |  | -                                                            this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                                        }}
 | 
	
		
			
				|  |  | -                                                    />
 | 
	
		
			
				|  |  | -                                                </td>
 | 
	
		
			
				|  |  | -                                                <td>
 | 
	
		
			
				|  |  | -                                                    <ContentEditable
 | 
	
		
			
				|  |  | -                                                        html={descPelanggaran[e._id]?.rekomendasi || ""}
 | 
	
		
			
				|  |  | -                                                        disabled={false}
 | 
	
		
			
				|  |  | -                                                        onChange={(evt) => {
 | 
	
		
			
				|  |  | -                                                            this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                                        }}
 | 
	
		
			
				|  |  | -                                                    />
 | 
	
		
			
				|  |  | -                                                </td>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                            </tr>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                        ))}
 | 
	
		
			
				|  |  | -                                    </tbody>
 | 
	
		
			
				|  |  | -                                </table>
 | 
	
		
			
				|  |  | -                                <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}>
 | 
	
		
			
				|  |  | -                                                 {dataSuratBA?.sanksi || this.state?.sanksi}
 | 
	
		
			
				|  |  | -                                            </span>
 | 
	
		
			
				|  |  | -                                            :
 | 
	
		
			
				|  |  | -                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>
 | 
	
		
			
				|  |  | -                                        }
 | 
	
		
			
				|  |  | -                                    </strong>
 | 
	
		
			
				|  |  | -                                </li>
 | 
	
		
			
				|  |  | -                            </ol>
 | 
	
		
			
				|  |  | -                        </div>
 | 
	
		
			
				|  |  | -                        <p className=''>
 | 
	
		
			
				|  |  | -                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
 | 
	
		
			
				|  |  | -                        </p>
 | 
	
		
			
				|  |  | -                        <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="btn-labeled-3" onClick={() => {
 | 
	
		
			
				|  |  | -                                            this.CloseCopied()
 | 
	
		
			
				|  |  | -                                        }} >
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                            <h4 className="p-0 mt-2 float-right"> <em className="fas fa-project-diagram float-left mt-1" />  Link Dokumen</h4>
 | 
	
		
			
				|  |  | -                                        </Button>
 | 
	
		
			
				|  |  | -                                    </span>
 | 
	
		
			
				|  |  | -                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
 | 
	
		
			
				|  |  | -                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
 | 
	
		
			
				|  |  | -                                    </Popover>
 | 
	
		
			
				|  |  | -                                </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                            </CopyToClipboard>
 | 
	
		
			
				|  |  | -                        </p>
 | 
	
		
			
				|  |  | -                        {/* <table className='demo'>
 | 
	
		
			
				|  |  | -                            <tbody>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                <tr>
 | 
	
		
			
				|  |  | -                                    <th className='thdemo' colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
 | 
	
		
			
				|  |  | -                                </tr>
 | 
	
		
			
				|  |  | -                                <tr className='trdemo'>
 | 
	
		
			
				|  |  | -                                    <th className='trdemo'>No</th>
 | 
	
		
			
				|  |  | -                                    <th className='trdemo'>Nama</th>
 | 
	
		
			
				|  |  | -                                    <th className='trdemo'>Tanda Tangan</th>
 | 
	
		
			
				|  |  | -                                </tr>
 | 
	
		
			
				|  |  | -                                {dataLaporan
 | 
	
		
			
				|  |  | -                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
 | 
	
		
			
				|  |  | -                                        <tr>
 | 
	
		
			
				|  |  | -                                            <td className='trdemo'>{index + 1}</td>
 | 
	
		
			
				|  |  | -                                            <td className=' tddemo'>{value.nama}</td>
 | 
	
		
			
				|  |  | -                                            <td className='tddemo'>
 | 
	
		
			
				|  |  | -                                                <img
 | 
	
		
			
				|  |  | -                                                    style={{ width: "200px" }}
 | 
	
		
			
				|  |  | -                                                    src={value.ttd.path} />
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                            </td>
 | 
	
		
			
				|  |  | -                                        </tr>)) : ""}
 | 
	
		
			
				|  |  | -                            </tbody>
 | 
	
		
			
				|  |  | -                        </table> */}
 | 
	
		
			
				|  |  | -                        {/* <div>
 | 
	
		
			
				|  |  | -                            <div id="ttd-header" className='text-center signature-border'>
 | 
	
		
			
				|  |  | -                                <span className='text-center'> PESERTA RAPAT PENYUSUNAN REKOMENDASI</span>
 | 
	
		
			
				|  |  | -                            </div>
 | 
	
		
			
				|  |  | -                            <div id="ttd">
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                                {dataLaporan
 | 
	
		
			
				|  |  | -                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
 | 
	
		
			
				|  |  | -                                        <div className='ttd-div'>
 | 
	
		
			
				|  |  | -                                            <img
 | 
	
		
			
				|  |  | -                                                className='sign-ttd'
 | 
	
		
			
				|  |  | -                                                src={value.ttd.path} />
 | 
	
		
			
				|  |  | -                                            <div className='sign-nama font-color-black'>{value.nama}</div>
 | 
	
		
			
				|  |  | -                                        </div>
 | 
	
		
			
				|  |  | -                                    )) : ""}
 | 
	
		
			
				|  |  | -                            </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 >
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        );
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -export default BeritaAcara
 |