commit

components/Sanksi/BeritaAcara_A.js

@@ -1,51 +1,352 @@
 import React, { useRef, Component } from 'react';
 import { useReactToPrint } from "react-to-print";
-import { Row, Col, Button, Card, CardBody } from "reactstrap";
+import { Row, Col, Button } 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';
 
 
 class BeritaAcara extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            isEditTempat: false,
+            tempat: "[Mohon Diisi]",
+            isEditTanggal: false,
+            tanggal: "",
+            setTanggal: false,
+            namaPeserta: [],
+            isEditNamaPeserta: false,
+            simpulan: "",
+            rekomendasi: "",
+            isEditTemuanLain: false,
+            temuanLain: [],
+            memberatkan: [],
+            isEditKeberatan: false,
+            isEditMeringankan: false,
+            meringankan: [],
+            sanksi: "[Mohon Diisi]",
+            isEditSanksi: false,
+            signature: [],
+            peserta: [{
+                nama: "",
+                signature: "",
+
+            }]
+
+
+
+
         };
     }
+
     static getInitialProps = async ({ query }) => {
         return { query };
     };
-    content = () => {
-        <ComponentToPrint />
+    setDataSuratBA = () => {
+        this.props.setDataSuratBA(this.state);
+    }
+    isEditTempat = () => {
+        this.setState({
+            isEditTempat: !this.state.isEditTempat,
+        })
+    }
+    isEditTanggal = () => {
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        })
+    }
+    isEditNamaPeserta = () => {
+        this.setState({
+            isEditNamaPeserta: !this.state.isEditNamaPeserta,
+        })
+
+    }
+    isEditTemuanLain = () => {
+        this.setState({
+            isEditTemuanLain: !this.state.isEditTemuanLain,
+        })
+    }
+    isEditKeberatan = () => {
+        this.setState({
+            isEditKeberatan: !this.state.isEditKeberatan,
+        })
+    }
+    isEditMeringankan = () => {
+        this.setState({
+            isEditMeringankan: !this.state.isEditMeringankan,
+        })
+    }
+    isEditSanksi = () => {
+        this.setState({
+            isEditSanksi: !this.state.isEditSanksi,
+        })
+    }
+    updateValueTempat = () => {
+        this.setState({
+            isEditTempat: false,
+            tempat: this.refs.inputTempat.value
+        }, this.setDataSuratBA)
+    }
+    updateValueNamaPeserta = () => {
+        const addNamaPeserta = this.refs.inputNamaPeserta.value
+        this.setState({
+            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
+        }, this.setDataSuratBA)
+    }
+    updateValueTemuanLain = () => {
+        const addTemuanLain = this.refs.inputTemuan.value
+        this.setState({
+            temuanLain: [...this.state.temuanLain, addTemuanLain]
+        }, this.setDataSuratBA)
+    }
+    updateValueMemringankan = () => {
+        const addMeringankan = this.refs.inputMeringankan.value
+        this.setState({
+            meringankan: [...this.state.meringankan, addMeringankan]
+        }, this.setDataSuratBA)
+    }
+    updateValueMemberatkan = () => {
+        const addKeberatan = this.refs.inputMemberatkan.value
+        this.setState({
+            memberatkan: [...this.state.memberatkan, addKeberatan]
+        }, this.setDataSuratBA)
+    }
+    updateValueSanksi = () => {
+        this.setState({
+            isEditSanksi: false,
+            sanksi: this.refs.inputSanksi.value
+        }, this.setDataSuratBA)
+    }
+
+    sigPad = []
+    clear = () => {
+        this.sigPad.clear()
+    }
+    updateValueSignature = () => {
+        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
+        this.setState({
+            signature: [...this.state.signature, addsig]
+        }, this.setDataSuratBA)
     }
 
     render() {
+        const { dataPelanggaran, dataLaporan } = this.props
+        const { isEditTempat, tempat, isEditTanggal, tanggal, setTanggal, namaPeserta, isEditNamaPeserta, simpulan, isEditTemuanLain, temuanLain, memberatkan, isEditKeberatan, isEditMeringankan, meringankan, sanksi, isEditSanksi, trimmedDataURL } = this.state
+        console.log(this.state.tempat)
         return (
             <div>
-                <ReactToPrint pageStyle='print' content={() => this.componentRef}>
-                    <PrintContextConsumer>
-                        {({ handlePrint }) => (
-                            <div className=' content-heading border-radius-login'>
-                                <span className="btn-radius">
-                                    <Button onClick={handlePrint} color className="btn-labeled-4">
+                <div className=' content-heading border-radius-login'>
+                    <span className="btn-radius">
+                        <ReactToPrint
+                            trigger={() => {
+                                // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
+                                // to the root node of the returned component as it will be overwritten.
+                                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
+                                {isEditTanggal &&
+                                    <span>
+                                        <DatePicker
+                                            selected={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 ?
+                                    <span onClick={this.isEditTanggal}> {moment(tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal).format("YYYY")},</span> :
+                                    <span onClick={this.isEditTanggal}> &nbsp;[Mohon Diisi] &nbsp;</span>
+                                }
+                                &nbsp;bertempat di
+                                {isEditTempat ?
+                                    <span>
+                                        <input type='text'
+                                            defaultValue=""
+                                            ref="inputTempat" />
+                                        <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} />
+                                    </span>
+                                    :
+                                    <span onClick={this.isEditTempat}>&nbsp;{tempat}</span>
+                                }
+                                ,
+                                telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
+                            </p>
+                            <div className='body'>
+                                <ol>
+                                    {namaPeserta.map((value) => <li>{value}</li>)}
+                                    {isEditNamaPeserta ?
+                                        <span>
+                                            <input type='text' defaultValue={""} ref="inputNamaPeserta" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueNamaPeserta(), this.isEditNamaPeserta() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditNamaPeserta} />
+                                        </span>
+                                        :
+                                        <Button onClick={this.isEditNamaPeserta} className=" p-0 m-0" color="success">Tambah peserta</Button>
+                                    }
+
+                                </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 ?
+                                        <span> &nbsp;{moment(tanggal).format("DD-MM-YYYY")}</span>
+                                        :
+                                        <span> &nbsp;....... &nbsp;</span>
+                                    }
+                                </li>
+                                <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
+                                <table className='table-a'>
+                                    <thead>
+                                        <tr>
+                                            <th rowspan="2">NO</th>
+                                            <th rowspan="2">NAMA DAN IZIN PRODI</th>
+                                            <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
+                                            <th rowspan="2">SIMPULAN</th>
+                                            <th rowspan="2">REKOMENDASI</th>
+                                        </tr>
+                                        <tr>
+                                            <th>PASAL</th>
+                                            <th>BUTIR PELANGGARAN</th>
+                                            <th>DESKRIPSI PELANGGARAN</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {dataPelanggaran
+                                            ? dataPelanggaran.map((e, i) => (
+                                                <tr key={e._id}>
+                                                    <td>{++i}</td>
+                                                    {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
+                                                    <td>{e.pasal}</td>
+                                                    <td>{e.butir_pelanggaran}</td>
+                                                    <td>{e.pelanggaran}</td>
+                                                    <td contenteditable='true'>[Mohon Diisi]</td>
+                                                    <td contenteditable='true'>[Mohon Diisi]</td>
+                                                </tr>
+
+                                            ))
+                                            : ""}
+                                    </tbody>
+                                </table>
+                                <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() }} />
+                                            <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>)}
+                                    </ol>
+                                </li>
+                                <li>Hal-hal yang memberatkan, sebagai berikut:
+                                    {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">
+                                        {memberatkan.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>hal-hal yang meringankan, sebagai berikut:
+                                    {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">
+                                        {meringankan.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>
+                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa {isEditSanksi ?
+                                        <span>
+                                            <input type='text'
+                                                defaultValue=""
+                                                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}>&nbsp;{sanksi}</span>}</strong>
+                                </li>
+                            </ol>
+                        </div>
+                        <p className='BA-body'>
+                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                        </p>
+                        <table className='demo'>
+                            <tbody>
+
+                                <tr>
+                                    <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
+                                </tr>
+                                {namaPeserta
+                                    ? namaPeserta.map((namaPeserta) => (
+                                        <tr>
+                                            <td>{namaPeserta}</td>
+                                            <td>
+                                                <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} ref={(ref) => { this.sigPad = ref }} />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueSignature} />
+                                                {/* <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.ised} /> */}
+
 
-                        )}
-                    </PrintContextConsumer>
-                </ReactToPrint>
-                {/* <div style={{ display: "none" }}> */}
-                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} />
-                {/* </div> */}
-                {/* <Card>
-                    <CardBody>
-                        jajajaj
-                    </CardBody>
-                </Card> */}
+                                            </td>
+                                        </tr>)) : ""}
+                            </tbody>
+                        </table>
+                    </page>
+                </div>
             </div >
 
         );

components/Sanksi/SuratBA.js

@@ -21,7 +21,6 @@ class ComponentToPrint extends React.Component {
             memberatkan: [],
             formData: null,
             meringankan: [],
-            namaPeserta: [{ nama: "", ttd: [] }]
         };
     }
 
@@ -82,7 +81,7 @@ class ComponentToPrint extends React.Component {
 
     render() {
         const { dataLaporan, tempat, isEditMode, temuanLain, formData, memberatkan, meringankan, namaPeserta } = this.state
-        const { dataPelanggaran } = this.props
+        const { dataPelanggaran, dataSuratBA } = this.props
         return (
             <div className='BA-div' >
                 <div className='BA-logo'>
@@ -93,27 +92,34 @@ class ComponentToPrint extends React.Component {
                     {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
                     <div className='BA-body'>
                         <p className='BA-body'>
-                            Pada hari ini <span>{moment(dataLaporan.createAt).locale("id").format("dddd")}</span>, tanggal&nbsp;{moment(dataLaporan.createAt).format("D")}&nbsp; bulan &nbsp;{moment(dataLaporan.createAt).format("MMMM")} tahun &nbsp;{moment(dataLaporan.createAt).format("YYYY")},
+                            Pada hari ini
+                            {dataSuratBA?.setTanggal === true ?
+                                <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(dataSuratBA.tanggal).format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
+                                <span> &nbsp;......................... &nbsp;</span>
+                            }
+
+
                             bertempat di
-                            {isEditMode ?
+                            {dataSuratBA?.tempat ?
                                 <span>
-                                    <input type='text'
-                                        defaultValue=""
-                                        ref="inputTempat" />
-                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
-                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.updateValueTempat} />
+                                    &nbsp;{dataSuratBA.tempat}
                                 </span>
                                 :
-                                <span color='danger' onClick={this.changeEditMode}>&nbsp;{tempat}</span>
+                                <span>........</span>
                             }
                             ,
                             telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
                         </p>
                         <div className='BA-body'>
                             <ol>
-                                <li contenteditable='true'>Isi name</li>
-                                <li contenteditable='true'>Isi nama</li>
-                                <li contenteditable='true'>Isi nama</li>
+                                {dataSuratBA?.namaPeserta ?
+                                    <span>
+                                        {dataSuratBA.namaPeserta.map((value) => <li>{value}</li>)}
+                                    </span>
+                                    :
+                                    <span>........</span>
+                                }
+
                             </ol>
                         </div>
                     </div>
@@ -124,7 +130,12 @@ class ComponentToPrint extends React.Component {
                     </p>
                     <div className='BA-body'>
                         <ol>
-                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi …….., tanggal ……..;</li>
+                            <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>
                             {/* <div style={{ overflow: "auto" }}> */}
                             <table className='table-a'>
@@ -162,46 +173,32 @@ class ComponentToPrint extends React.Component {
                             {/* </div> */}
 
                             <li>Temuan Lain:
-                                {isEditMode ?
-                                    <span>
-                                        <input type='text' defaultValue={""} ref="inputTemuan" />
-                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleTemuanLain} />
-                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
-                                    </span>
-
-                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                 <ol type="a">
-                                    {temuanLain.map((value) => <li>{value}</li>)}
+                                    {dataSuratBA?.temuanLain ?
+                                        <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
                                 </ol>
                             </li>
                             <li>Hal-hal yang memberatkan, sebagai berikut:
-                                {isEditMode ?
-                                    <span>
-                                        <input type='text' defaultValue={""} ref="inputMemberatkan" />
-                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleMemberatkan} />
-                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
-                                    </span>
-
-                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                 <ol type="a">
-                                    {memberatkan.map((value) => <li>{value}</li>)}
+                                    {dataSuratBA?.memberatkan ?
+                                        <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
                                 </ol>
                             </li>
                             <li>hal-hal yang meringankan, sebagai berikut:
-                                {isEditMode ?
-                                    <span>
-                                        <input type='text' defaultValue={""} ref="inputMeringankan" />
-                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.handleMeringankan} />
-                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.changeEditMode} />
-                                    </span>
-
-                                    : <span onClick={this.changeEditMode}>klik untuk isi</span>}
                                 <ol type="a">
-                                    {meringankan.map((value) => <li>{value}</li>)}
+                                    {dataSuratBA?.meringankan ?
+                                        <span>{dataSuratBA.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 …………………………..”.</strong>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa
+                                    {dataSuratBA?.sanksi ?
+                                        <span>{dataSuratBA.sanksi}</span>
+                                        : "Belum Diisi"}
+                                    ”.</strong>
                             </li>
                         </ol>
                     </div>
@@ -213,76 +210,21 @@ class ComponentToPrint extends React.Component {
                             <tr>
                                 <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                             </tr>
-                            <tr>
-                                <td contenteditable='true' onChange={this.setNamaPeserta} ref="inputNama">Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
-                            <tr>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                                <td contenteditable='true'>Isi Nama</td>
-                                <td>
-                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
-                                </td>
-                            </tr>
+                            {dataSuratBA?.namaPeserta
+                                ? dataSuratBA.namaPeserta.map((namaPeserta) => (
+                                    <tr>
+                                        <td>{namaPeserta}</td>
+                                        <td>
+
+                                            {dataSuratBA?.signature ?
+                                                dataSuratBA.signature.map((value) =>
+                                                    <img
+                                                        style={{ height: "200px", width: "100px" }}
+                                                        src={value} />
+                                                )
+                                                : null}
+                                        </td>
+                                    </tr>)) : ""}
                         </tbody>
                     </table>
                 </div>

pages/app/sanksi/proses.js

@@ -273,7 +273,7 @@ class ProsesSanksi extends Component {
 										</TabPane>
 										<TabPane tabId="4">
 											<Card>
-												<BeritaAcara query={this.props.query} dataPelanggaran={dataPelanggaran.data} setDataSuratBA={this.setDataSuratBA} />
+												<BeritaAcara query={this.props.query} dataPelanggaran={dataPelanggaran.data} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
 											</Card>
 											<div className="d-flex">
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>

styles/bootstrap/_print.scss

@@ -139,3 +139,136 @@
     // 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 th {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  background: #F0F0F0;
+  text-align: center;
+}
+
+.demo td {
+  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;
+}
+
+////////////////////////////-----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 {
+
+  body,
+  page[size="A4"] {
+    margin: 0;
+    box-shadow: 0;
+  }
+}

styles/bootstrap/_progress.scss

@@ -50,136 +50,3 @@
     }
   }
 }
-
-
-.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 th {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  background: #F0F0F0;
-  text-align: center;
-}
-
-.demo td {
-  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;
-}
-
-////////////////////////////-----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 {
-
-//   body,
-//   page[size="A4"] {
-//     margin: 0;
-//     box-shadow: 0;
-//   }
-// }