|  | @@ -1,6 +1,6 @@
 | 
	
		
			
				|  |  |  import React, { useRef, Component } from 'react';
 | 
	
		
			
				|  |  |  import { useReactToPrint } from "react-to-print";
 | 
	
		
			
				|  |  | -import { Row, Col, Button } from "reactstrap";
 | 
	
		
			
				|  |  | +import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, } from "reactstrap";
 | 
	
		
			
				|  |  |  import Head from 'next/head'
 | 
	
		
			
				|  |  |  import SignatureCanvas from 'react-signature-canvas'
 | 
	
		
			
				|  |  |  import ComponentToPrint from "./SuratBA";
 | 
	
	
		
			
				|  | @@ -9,6 +9,9 @@ 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";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  class BeritaAcara extends Component {
 | 
	
	
		
			
				|  | @@ -32,22 +35,23 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |              meringankan: [],
 | 
	
		
			
				|  |  |              sanksi: "[Mohon Diisi]",
 | 
	
		
			
				|  |  |              isEditSanksi: false,
 | 
	
		
			
				|  |  | -            signature: [],
 | 
	
		
			
				|  |  | -            peserta: [{
 | 
	
		
			
				|  |  | -                nama: "",
 | 
	
		
			
				|  |  | -                signature: "",
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            }]
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +            Copied: false,
 | 
	
		
			
				|  |  | +            setTemuanLain: true,
 | 
	
		
			
				|  |  |          };
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      static getInitialProps = async ({ query }) => {
 | 
	
		
			
				|  |  |          return { query };
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    componentDidMount = async () => {
 | 
	
		
			
				|  |  | +        const { query, token } = this.props;
 | 
	
		
			
				|  |  | +        const { id } = query;
 | 
	
		
			
				|  |  | +        const getDataSave = await getAutoSave({ id, laporan: true });
 | 
	
		
			
				|  |  | +        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
 | 
	
		
			
				|  |  | +        const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran.data;
 | 
	
		
			
				|  |  | +        this.setState({ autoSaveDataPelanggaran, autoSaveDataSuratBA });
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  |      setDataSuratBA = () => {
 | 
	
		
			
				|  |  |          this.props.setDataSuratBA(this.state);
 | 
	
		
			
				|  |  |      }
 | 
	
	
		
			
				|  | @@ -57,102 +61,83 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |      isEditTempat = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditTempat: !this.state.isEditTempat,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      isEditTanggal = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditTanggal: !this.state.isEditTanggal,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      isEditNamaPeserta = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditNamaPeserta: !this.state.isEditNamaPeserta,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      isEditTemuanLain = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditTemuanLain: !this.state.isEditTemuanLain,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      isEditKeberatan = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditKeberatan: !this.state.isEditKeberatan,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      isEditMeringankan = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditMeringankan: !this.state.isEditMeringankan,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      isEditSanksi = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditSanksi: !this.state.isEditSanksi,
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    updateValueTempat = () => {
 | 
	
		
			
				|  |  | -        this.setState({
 | 
	
		
			
				|  |  | -            isEditTempat: false,
 | 
	
		
			
				|  |  | -            tempat: this.refs.inputTempat.value
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    updateValueNamaPeserta = () => {
 | 
	
		
			
				|  |  | -        const addNamaPeserta = this.refs.inputNamaPeserta.value
 | 
	
		
			
				|  |  | -        this.setState({
 | 
	
		
			
				|  |  | -            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      updateValueTemuanLain = () => {
 | 
	
		
			
				|  |  |          const addTemuanLain = this.refs.inputTemuan.value
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              temuanLain: [...this.state.temuanLain, addTemuanLain]
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      updateValueMemringankan = () => {
 | 
	
		
			
				|  |  |          const addMeringankan = this.refs.inputMeringankan.value
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              meringankan: [...this.state.meringankan, addMeringankan]
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      updateValueMemberatkan = () => {
 | 
	
		
			
				|  |  |          const addKeberatan = this.refs.inputMemberatkan.value
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              memberatkan: [...this.state.memberatkan, addKeberatan]
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      updateValueSanksi = () => {
 | 
	
		
			
				|  |  |          this.setState({
 | 
	
		
			
				|  |  |              isEditSanksi: false,
 | 
	
		
			
				|  |  |              sanksi: this.refs.inputSanksi.value
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  | -        this.handleAutoSave()
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | +        }, this.setDataSuratBA, this.handleAutoSave())
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    sigPad = []
 | 
	
		
			
				|  |  | -    clear = () => {
 | 
	
		
			
				|  |  | -        this.sigPad.clear()
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    updateValueSignature = () => {
 | 
	
		
			
				|  |  | -        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
 | 
	
		
			
				|  |  | -        this.setState({
 | 
	
		
			
				|  |  | -            signature: [...this.state.signature, addsig]
 | 
	
		
			
				|  |  | -        }, this.setDataSuratBA)
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    Copied = () => this.setState({
 | 
	
		
			
				|  |  | +        Copied: !this.state.Copied
 | 
	
		
			
				|  |  | +    })
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |      render() {
 | 
	
		
			
				|  |  | -        const { dataPelanggaran, dataLaporan } = this.props
 | 
	
		
			
				|  |  | -        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, trimmedDataURL, signature } = this.state
 | 
	
		
			
				|  |  | +        const { dataPelanggaran, dataLaporan, dataSuratBA } = this.props
 | 
	
		
			
				|  |  | +        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, autoSaveDataSuratBA } = this.state
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |          return (
 | 
	
		
			
				|  |  |              <div>
 | 
	
	
		
			
				|  | @@ -202,22 +187,32 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |                                          />
 | 
	
		
			
				|  |  |                                      </span>
 | 
	
		
			
				|  |  |                                  }
 | 
	
		
			
				|  |  | -                                {setTanggal === true ?
 | 
	
		
			
				|  |  | -                                    <span onClick={this.isEditTanggal}> {moment(tanggal).locale("id").format("dddd")}, tanggal {moment(tanggal).format("D")}  bulan  {moment(tanggal).format("MMMM")} tahun  {moment(tanggal).format("YYYY")},</span> :
 | 
	
		
			
				|  |  | +                                {setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
 | 
	
		
			
				|  |  | +                                    <span onClick={this.isEditTanggal}> {moment(tanggal || autoSaveDataSuratBA?.tanggal).locale("id").format("dddd")}, tanggal {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("D")}  bulan  {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("MMMM")} tahun  {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("YYYY")},</span> :
 | 
	
		
			
				|  |  |                                      <span onClick={this.isEditTanggal}>  [Mohon Diisi]  </span>
 | 
	
		
			
				|  |  |                                  }
 | 
	
		
			
				|  |  |                                   bertempat di
 | 
	
		
			
				|  |  | -                                {isEditTempat ?
 | 
	
		
			
				|  |  | +                                {isEditTempat &&
 | 
	
		
			
				|  |  |                                      <span>
 | 
	
		
			
				|  |  |                                          <input type='text'
 | 
	
		
			
				|  |  |                                              defaultValue=""
 | 
	
		
			
				|  |  | -                                            ref="inputTempat" />
 | 
	
		
			
				|  |  | +                                            ref="inputTempat"
 | 
	
		
			
				|  |  | +                                            onChange={() => {
 | 
	
		
			
				|  |  | +                                                this.setState({ tempat: this.refs.inputTempat.value, settempat: true }, 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.updateValueTempat(), this.handleAutoSave() }} />
 | 
	
		
			
				|  |  | +                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditTempat() }} />
 | 
	
		
			
				|  |  | +                                    </span>
 | 
	
		
			
				|  |  | +                                }
 | 
	
		
			
				|  |  | +                                {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat ?
 | 
	
		
			
				|  |  | +                                    <span onClick={this.isEditTempat}>
 | 
	
		
			
				|  |  | +                                         {dataSuratBA?.tempat || autoSaveDataSuratBA?.tempat}
 | 
	
		
			
				|  |  |                                      </span>
 | 
	
		
			
				|  |  |                                      :
 | 
	
		
			
				|  |  | -                                    <span onClick={this.isEditTempat}> {tempat}</span>
 | 
	
		
			
				|  |  | +                                    <span onClick={this.isEditTempat}>[Mohon Diisi]</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>
 | 
	
	
		
			
				|  | @@ -233,8 +228,8 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |                          <div className='body'>
 | 
	
		
			
				|  |  |                              <ol>
 | 
	
		
			
				|  |  |                                  <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
 | 
	
		
			
				|  |  | -                                    {setTanggal === true ?
 | 
	
		
			
				|  |  | -                                        <span>  {moment(tanggal).format("DD-MM-YYYY")}</span>
 | 
	
		
			
				|  |  | +                                    {setTanggal === true || autoSaveDataSuratBA?.setTanggal === true ?
 | 
	
		
			
				|  |  | +                                        <span>  {moment(tanggal || autoSaveDataSuratBA?.tanggal).format("DD-MM-YYYY")}</span>
 | 
	
		
			
				|  |  |                                          :
 | 
	
		
			
				|  |  |                                          <span>  .......  </span>
 | 
	
		
			
				|  |  |                                      }
 | 
	
	
		
			
				|  | @@ -275,14 +270,17 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |                                  <li>Temuan Lain:
 | 
	
		
			
				|  |  |                                      {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(), this.handleAutoSave() }} />
 | 
	
		
			
				|  |  | +                                            <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(), this.handleAutoSave()
 | 
	
		
			
				|  |  | +                                            }} />
 | 
	
		
			
				|  |  |                                              <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">
 | 
	
		
			
				|  |  | -                                        {temuanLain.map((value) => <li>{value}</li>)}
 | 
	
		
			
				|  |  | +                                        {dataSuratBA?.temuanLain.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.temuanLain.map((value) => <li>{value}</li>)}
 | 
	
		
			
				|  |  |                                      </ol>
 | 
	
		
			
				|  |  |                                  </li>
 | 
	
		
			
				|  |  |                                  <li>Hal-hal yang memberatkan, sebagai berikut:
 | 
	
	
		
			
				|  | @@ -295,7 +293,7 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |                                          : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
 | 
	
		
			
				|  |  |                                      <ol type="a">
 | 
	
		
			
				|  |  | -                                        {memberatkan.map((value) => <li>{value}</li>)}
 | 
	
		
			
				|  |  | +                                        {dataSuratBA?.memberatkan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.memberatkan.map((value) => <li>{value}</li>)}
 | 
	
		
			
				|  |  |                                      </ol>
 | 
	
		
			
				|  |  |                                  </li>
 | 
	
		
			
				|  |  |                                  <li>hal-hal yang meringankan, sebagai berikut:
 | 
	
	
		
			
				|  | @@ -308,7 +306,7 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |                                          : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
 | 
	
		
			
				|  |  |                                      <ol type="a">
 | 
	
		
			
				|  |  | -                                        {meringankan.map((value) => <li>{value}</li>)}
 | 
	
		
			
				|  |  | +                                        {dataSuratBA?.meringankan.map((value) => <li>{value}</li>) || autoSaveDataSuratBA?.meringankan.map((value) => <li>{value}</li>)}
 | 
	
		
			
				|  |  |                                      </ol>
 | 
	
		
			
				|  |  |                                  </li>
 | 
	
		
			
				|  |  |                                  <li>
 | 
	
	
		
			
				|  | @@ -319,13 +317,34 @@ class BeritaAcara extends Component {
 | 
	
		
			
				|  |  |                                                  ref="inputSanksi" />
 | 
	
		
			
				|  |  |                                              <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.updateValueSanksi} />
 | 
	
		
			
				|  |  | -                                        </span> : <span onClick={this.isEditSanksi}> {sanksi}</span>}</strong>
 | 
	
		
			
				|  |  | +                                        </span> : <span onClick={this.isEditSanksi}> {dataSuratBA?.sanksi || autoSaveDataSuratBA?.sanksi}</span>}</strong>
 | 
	
		
			
				|  |  |                                  </li>
 | 
	
		
			
				|  |  |                              </ol>
 | 
	
		
			
				|  |  |                          </div>
 | 
	
		
			
				|  |  | -                        <p className='BA-body'>
 | 
	
		
			
				|  |  | +                        <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>
 | 
	
		
			
				|  |  | +                                    <Button color="" id="Popover1" className="btn-labeled-notHover" onClick={() => {
 | 
	
		
			
				|  |  | +                                        this.setState({
 | 
	
		
			
				|  |  | +                                            setTemuanLain: !this.state.setTemuanLain
 | 
	
		
			
				|  |  | +                                        }, this.setDataSuratBA()), this.handleAutoSave()
 | 
	
		
			
				|  |  | +                                    }}>
 | 
	
		
			
				|  |  | +                                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Copy Link Add Peserta</h4>
 | 
	
		
			
				|  |  | +                                    </Button>
 | 
	
		
			
				|  |  | +                                    <Popover placement="bottom" isOpen={this.state.Copied} target="Popover1" toggle={this.Copied}>
 | 
	
		
			
				|  |  | +                                        <PopoverHeader>Berhasil Copy Link</PopoverHeader>
 | 
	
		
			
				|  |  | +                                        <PopoverBody><strong>Link</strong>:https://dev.sidali.kemdikbud.go.id//app/signature/pleno-sanksi/${dataLaporan.data?._id}</PopoverBody>
 | 
	
		
			
				|  |  | +                                    </Popover>
 | 
	
		
			
				|  |  | +                                </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                            </CopyToClipboard>
 | 
	
		
			
				|  |  | +                        </p>
 | 
	
		
			
				|  |  |                          <table className='demo'>
 | 
	
		
			
				|  |  |                              <tbody>
 | 
	
		
			
				|  |  |  
 |