fix berita acara- surat BA - sign public

components/Sanksi/BeritaAcara.js

@@ -0,0 +1,463 @@
+import React, { useRef, Component } from 'react';
+import { useReactToPrint } from "react-to-print";
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody } from "reactstrap";
+import Head from 'next/head'
+import SignatureCanvas from 'react-signature-canvas'
+import ComponentToPrint from "./SuratBA_A";
+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: "",
+            isEditTanggal: false,
+            tanggal: "",
+            setTanggal: false,
+            isEditNamaPeserta: false,
+            isEditTemuanLain: false,
+            temuanLain: [],
+            memberatkan: [],
+            isEditKeberatan: false,
+            isEditMeringankan: false,
+            meringankan: [],
+            sanksi: "",
+            isEditSanksi: false,
+            copied: false,
+            setmeState: true,
+            descPelanggaran: [],
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, 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 py-5 m-0 '>
+                    <div className='BA-Header'>
+                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
+                        {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
+                    </div>
+                    <div className='BA-body px-5 pt-3'>
+                        <p>
+                            Pada hari ini
+                            {dataSuratBA?.isEditTanggal &&
+                                <span>
+                                    <DatePicker
+                                        selected={tanggal ? new Date(tanggal) : tanggal}
+                                        onChange={(tanggal) => {
+                                            this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
+                                        }}
+                                        dateFormat="dd/MM/yyyy"
+                                        placeholderText="Isi Tanggal"
+                                        locale={id}
+                                        className="form-control bg-white"
+                                    />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTanggal} />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal}
+                                    />
+                                </span>
+                            }
+                            {setTanggal === true || this.state?.setTanggal === true ?
+                                <span onClick={this.isEditTanggal}> {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
+                                <span onClick={this.isEditTanggal}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                            }
+                            &nbsp;bertempat di
+                            {dataSuratBA?.isEditTempat &&
+                                <span>
+                                    <input type='text'
+                                        defaultValue={""}
+                                        ref="inputTempat"
+                                        onChange={() => {
+                                            this.setState({ tempat: this.refs.inputTempat.value }, this.setDataSuratBA)
+                                        }}
+                                    />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTempat} />
+                                    <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditTempat() }} />
+                                </span>
+                            }
+                            {this.state?.tempat ?
+                                <span onClick={this.isEditTempat}  className='hhh'>
+                                    &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
+                                </span>
+                                :
+                                <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                            }
+
+                            ,
+                            telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
+
+                            <ol>
+                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                            </ol>
+                        </p>
+                        <p>
+                            Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
+
+                            <ol className='mt-3'>
+                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
+                                    {setTanggal === true || this.state?.setTanggal === true ?
+                                        <span> &nbsp;{moment(tanggal || this.state?.tanggal).format("DD-MM-YYYY")}</span>
+                                        :
+                                        <span> &nbsp;....... &nbsp;</span>
+                                    }
+                                </li>
+                                <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
+                            </ol>
+                        </p>
+
+                        <div className='table-a my-4' >
+                            <table>
+                                <thead >
+                                    <tr>
+                                        <th rowspan="2">NO</th>
+                                        <th rowspan="2">NAMA DAN IZIN PRODI</th>
+                                        <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
+                                        <th rowspan="2">SIMPULAN</th>
+                                        <th rowspan="2">REKOMENDASI</th>
+                                    </tr>
+                                    <tr>
+                                        <th>PASAL</th>
+                                        <th>BUTIR PELANGGARAN</th>
+                                        <th>DESKRIPSI PELANGGARAN</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {dataPelanggaran?.data?.map((e, i) => (
+                                        <tr key={e._id}>
+                                            <td>{++i}</td>
+                                            {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
+                                            <td>{e.pasal}</td>
+                                            <td>{e.butir_pelanggaran}</td>
+                                            <td>{e.pelanggaran}</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={descPelanggaran[e._id]?.simpulan || ""}
+                                                    disabled={false}
+                                                    onChange={(evt) => {
+                                                        this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()
+
+                                                    }}
+                                                />
+                                            </td>
+                                            <td style={{ maxWidth: "80px" }}>
+                                                {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}
+                                                {/* <ContentEditable
+                                                    html={`Sanksi Administratif berupa ${dataSuratBA?.sanksi||this.state.sanksi}` || ""}
+                                                    // html={descPelanggaran[e._id]?.rekomendasi || ""}
+
+                                                    disabled={false}
+                                                    // onChange={(evt) => {
+                                                    //     this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
+                                                    // }}
+                                                /> */}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        <p>
+                            <ol start="3">
+                                <li>Temuan Lain:
+                                    {this.props.dataSuratBA?.isEditTemuanLain ?
+                                        <span>
+                                            <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan"
+                                            />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => {
+                                                this.updateValueTemuanLain(), this.isEditTemuanLain()
+                                            }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTemuanLain} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.temuanLain?.map((value) => <li>{value}</li>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>Hal-hal yang memberatkan, sebagai berikut:
+                                    {this.props.dataSuratBA?.isEditKeberatan ?
+                                        <span>
+                                            <input style={{ height: "30px", width: "250px" }} type='text' defaultValue={""} ref="inputMemberatkan" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemberatkan(), this.isEditKeberatan() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditKeberatan} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.memberatkan?.map((value) => <li>{value}</li>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>hal-hal yang meringankan, sebagai berikut:
+                                    {this.props.dataSuratBA?.isEditMeringankan ?
+                                        <span>
+                                            <input type='text' defaultValue={""} ref="inputMeringankan" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemringankan(), this.isEditMeringankan() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditMeringankan} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.meringankan?.map((value) => <li>{value}</li>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>
+                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
+                                        {dataSuratBA?.isEditSanksi &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue=""
+                                                    ref="inputsanksi"
+                                                    onChange={() => {
+                                                        this.setState({ sanksi: this.refs.inputsanksi.value }, this.setDataSuratBA)
+                                                    }}
+                                                />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditSanksi() }} />
+                                            </span>
+                                        }
+                                        {dataSuratBA?.sanksi || this.state?.sanksi ?
+                                            <span onClick={this.isEditSanksi}>
+                                                &nbsp;{dataSuratBA?.sanksi || this.state?.sanksi}
+                                            </span>
+                                            :
+                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>
+                                        }
+                                    </strong>
+                                </li>
+                            </ol>
+                        </p>
+                        <p>
+                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir. 
+                        </p>
+                        <CopyToClipboard
+                                text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
+                                options={{ asHtml: true }}
+                            >
+                                <div>
+                                    <span className="btn-radius">
+                                        <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
+                                            this.CloseCopied()
+                                        }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                            {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                        </Button>
+                                    </span>
+                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
+                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                    </Popover>
+                                </div>
+
+                            </CopyToClipboard>
+
+                        <div  >
+                            <div className='header-ttd signature-border pt-1 pb-1'>
+                                <text className='header-ttd font-weight-bold '>PESERTA RAPAT PENYUSUNAN REKOMENDASI</text>
+                            </div>
+                            <div id="ttd">
+                                {dataLaporan
+                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
+                                        <div className='ttd-div'>
+                                            <div className='sign-ttd'>
+                                                <img
+                                                    className='sign-ttd'
+                                                    src={value.ttd.path} />
+                                            </div>
+                                            <div className='sign-nama'>
+                                                <text>
+                                                    {value.nama}
+                                                </text>
+                                            </div>
+                                        </div>
+                                    )) : ""}
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div >
+        );
+    }
+}
+export default BeritaAcara

components/Sanksi/SuratBA_A.js

@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import SignatureCanvas from 'react-signature-canvas'
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
+import { connect } from "react-redux";
+import moment from "moment";
+import 'moment/locale/id'
+moment.locale('id')
+import { getAutoSave } from "@/actions/autosave";
+
+
+
+
+class ComponentToPrint extends React.Component {
+    formData = {}
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporan(token, id);
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
+        this.setState({ dataLaporan });
+        this.setState(dataPelanggaran)
+        this.setState(autoSaveDataSuratBA)
+
+    };
+
+    render() {
+        const { dataLaporan, descPelanggaran } = this.state
+        const { dataPelanggaran, dataSuratBA } = this.props
+        return (
+            <page>
+                <div className='BA-Header'>
+                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                    <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    {dataLaporan.data && (<h3 className='text-uppercase' >{dataLaporan.data.pt.nama}</h3>)}
+                </div>
+                <div className='BA-body pt-3'>
+                    <p>
+                        Pada hari ini
+                        {dataSuratBA?.setTanggal === true || this.state?.setTanggal === true ?
+                            <span > {moment(dataSuratBA?.tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("YYYY")},</span> :
+                            <span> &nbsp;- &nbsp;</span>
+                        }
+                        bertempat di
+                        {dataSuratBA?.tempat || this.state?.tempat ?
+                            <span>
+                                &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
+                            </span>
+                            :
+                            <span>-</span>
+                        }
+                        ,
+                        telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
+                        <ol>
+                            {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                        </ol>
+                    </p>
+                    <p>
+                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
+
+                        <ol className='mt-3'>
+                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
+                                {dataSuratBA?.setTanggal === true || this.state?.setTanggal === true ?
+                                    <span> &nbsp;{moment(dataSuratBA?.tanggal || this.state?.tanggal).format("DD-MM-YYYY")}</span>
+                                    :
+                                    <span> &nbsp;....... &nbsp;</span>
+                                }
+                            </li>
+                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
+                        </ol>
+                    </p>
+                    <div className='table-a my-4' >
+                        <table >
+                            <thead>
+                                <tr>
+                                    <th rowspan="2">NO</th>
+                                    <th rowspan="2">NAMA DAN IZIN PRODI</th>
+                                    <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
+                                    <th rowspan="2">SIMPULAN</th>
+                                    <th rowspan="2">REKOMENDASI</th>
+                                </tr>
+                                <tr>
+                                    <th>PASAL</th>
+                                    <th>BUTIR PELANGGARAN</th>
+                                    <th>DESKRIPSI PELANGGARAN</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {dataPelanggaran?.data?.map((e, i) => (
+                                    <tr key={e._id}>
+                                        <td>{++i}</td>
+                                        {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
+                                        <td>{e.pasal}</td>
+                                        <td>{e.butir_pelanggaran}</td>
+                                        <td>{e.pelanggaran}</td>
+                                        <td style={{ minWidth: "215px" }} >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || this.state.descPelanggaran[e._id]?.simpulan}</td>
+                                        <td style={{ minWidth: "215px" }}>{`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}</td>
+                                    </tr>
+
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <p>
+                        <ol start="3">
+                            <li>Temuan Lain:
+                                <ol type="a">
+                                    {dataSuratBA?.temuanLain || this.state?.temuanLain ?
+                                        <span>{dataSuratBA?.temuanLain || this.state?.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>Hal-hal yang memberatkan, sebagai berikut:
+                                <ol type="a">
+                                    {dataSuratBA?.memberatkan || this.state?.memberatkan ?
+                                        <span>{dataSuratBA?.memberatkan || this.state?.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>hal-hal yang meringankan, sebagai berikut:
+                                <ol type="a">
+                                    {dataSuratBA?.meringankan || this.state?.meringankan ?
+                                        <span>{dataSuratBA?.meringankan || this.state?.meringankan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong contenteditable='true'>“Sanksi Administratif berupa
+                                    {dataSuratBA?.sanksi || this.state?.sanksi ?
+                                        <span>{dataSuratBA?.sanksi || this.state?.sanksi}</span>
+                                        : "Belum Diisi"}
+                                    ”.</strong>
+                            </li>
+                        </ol>
+                    </p>
+                    <p>
+                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                    </p>
+                    <div className='mt-5'>
+                        <div className='header-ttd signature-border pt-1 pb-1'>
+                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT PENYUSUNAN REKOMENDASI</text>
+                        </div>
+                        <div id="ttd">
+                            {dataLaporan
+                                ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
+                                    <div className='ttd-div'>
+                                        <div className='sign-ttd'>
+                                            <img
+                                                className='sign-ttd'
+                                                src={value.ttd.path} />
+                                        </div>
+                                        <div className='sign-nama'>
+                                            <text>
+                                                {value.nama}
+                                            </text>
+                                        </div>
+                                    </div>
+                                )) : ""}
+                        </div>
+                    </div>
+
+                </div>
+
+
+
+                <div id="footer">
+                    <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
+                </div>
+            </page>
+
+
+        );
+    }
+}
+export default ComponentToPrint

components/Sanksi/UploadSurat.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
+import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
 import Select from "react-select";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -9,6 +9,8 @@ import { addDays, addMonths } from 'date-fns';
 import id from 'date-fns/locale/id';
 // registerLocale('id', id)
 import { getAutoSave, inputAutoSave } from "@/actions/autosave";
+import ComponentToPrint from "./SuratBA";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -405,42 +407,23 @@ export class UploadSurat extends Component {
 				</FormGroup>
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">
-						Dokumen Laporan Evaluasi dan Pembahasan<span>: &nbsp;</span><span className="text-danger">*</span>
+						Dokumen Laporan Evaluasi dan Pembahasan<span>: &nbsp;</span>
 					</label>
 					<div className="col-md-10">
-						<DropzoneWrapper className="" onDrop={this.onDropBA}>
-							{({ getRootProps, getInputProps, isDragActive }) => {
-								return (
-									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
-										<input {...getInputProps()} />
-										<div className="dropzone-style-1">
-											<div className="center-ver-hor dropzone-previews flex">
-												{this.state.filesBeritaAcara.length > 0 ? (
-													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
-														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
-													</div>
-												) : (
-													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
-														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
-													</div>
-												)}
-											</div>
-										</div>
-										<div className="d-flex align-items-center">
-											<small className="ml-auto">
-												<button type="button" className="btn btn-link" onClick={this.clearFilesBA}>
-													Reset dokumen
-												</button>
-											</small>
-										</div>
-									</div>
-								);
-							}}
-						</DropzoneWrapper>
-						<div>
-							{thumbsBA}
+
+						<div style={{ display: "none" }}>
+							<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
 						</div>
-						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
+						<ReactToPrint
+							trigger={() => {
+								return <span>
+									<Button color className="btn-labeled-4 mt-0">
+										<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
+									</Button>
+								</span>
+							}}
+							content={() => this.componentRef}
+						/>
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
@@ -500,7 +483,10 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Akhir Permohonan Keberatan Sanksi</label>
+					<label className="col-md-2 col-form-label">Akhir Permohonan Keberatan Sanksi
+						<p>
+							Note : 21 hari kerja						</p>
+					</label>
 					<span className="col-sm-3 float-left">
 						<DatePicker
 							selected={tglAkhirKeberatan}

pages/app/sanksi/proses.js

@@ -16,7 +16,7 @@ import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import { ToastContainer, toast } from "react-toastify";
-import BeritaAcara from "@/components/Sanksi/BeritaAcara_A";
+import BeritaAcara from "@/components/Sanksi/BeritaAcara";
 import { getAutoSave, inputAutoSave } from "@/actions/autosave";
 
 
@@ -26,7 +26,7 @@ const stepNavitemStyle = {
 };
 
 class ProsesSanksi extends Component {
-	dataUpload = {};
+	// dataUpload = {};
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -126,7 +126,7 @@ class ProsesSanksi extends Component {
 			this.setState({
 				activeStep: activeStep
 			});
-			this.handleAutoSave(this.state.dataPelanggaran, activeStep)
+			this.handleAutoSave(this.state.dataPelanggaran, activeStep)// parameter 1 untuk data pelanggaran 1 untuk activestep
 			// this.state.activeStep = activeStep;
 
 		}
@@ -149,7 +149,7 @@ class ProsesSanksi extends Component {
 	};
 
 	render() {
-		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, autoSaveDataPelanggaran } = this.state;
+		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA } = this.state
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -305,7 +305,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran?.data} query={this.props.query} handleAutoSave={this.handleAutoSave} />}
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} dataSuratBA={dataSuratBA} />}
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -320,7 +320,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} autoSaveDataPelanggaran={autoSaveDataPelanggaran} dataPelanggaran={dataPelanggaran?.data} dataUpload={dataUpload} /> : <Loader />}
+												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran?.data} dataUpload={dataUpload} /> : <Loader />}
 											</div>
 											<hr />
 											<div className="d-flex">

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

@@ -13,6 +13,8 @@ import { toast } from "react-toastify";
 import Router from "next/router";
 import swal from "sweetalert2";
 import Link from 'next/dist/client/link';
+import moment from 'moment';
+
 
 
 
@@ -146,20 +148,21 @@ class PlenoSanksi extends Component {
                     </ModalBody>
                 </Modal>
 
-                <div className='page'>
-                    <div className='BA-logo'>
+                <div className='page-sign'>
+                    <div className='BA-Header'>
                         <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
+                        {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
                     </div>
-                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
-                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
-                    <div className='body'>
-                        <p className='body'>
+                    <div className='BA-body px-5 pt-3'>
+                        <p>
                             Pada hari ini
                             {dataSuratBA?.setTanggal === true ?
                                 <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
                                 <span> &nbsp;......... &nbsp;</span>
                             }
                             &nbsp;bertempat di
+                            &nbsp;bertempat di
                             {dataSuratBA?.tempat === "[Mohon Diisi]" ?
                                 <span>Belum Diisi Oleh Dikti</span>
                                 :
@@ -170,34 +173,26 @@ class PlenoSanksi extends Component {
                             ,
                             telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
 
-                        </p>
-                        <div className=''>
                             <ol>
-                                {dataLaporan.data?.peserta_penetapan_sanksi ?
-                                    <span>
-                                        {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
-                                    </span>
-                                    :
-                                    <span>Belum Ada Data</span>
-                                }
-
+                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
                             </ol>
-                        </div>
-                    </div>
-                    <p>
-                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
-                    </p>
-                    <div className='body'>
-                        <ol>
-                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
-                                {dataSuratBA?.setTanggal === true ?
-                                    <span> &nbsp;{moment(dataSuratBA.tanggal).format("DD-MM-YYYY")}</span>
-                                    :
-                                    <span> &nbsp;....... &nbsp;</span>
-                                }</li>
-                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
-                            <table className='table-a'>
-                                <thead>
+                        </p>
+                        <p>
+                            Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
+
+                            <ol className='mt-3'>
+                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
+                                    {dataSuratBA?.setTanggal === true ?
+                                        <span> &nbsp;{moment(dataSuratBA.tanggal).format("DD-MM-YYYY")}</span>
+                                        :
+                                        <span> &nbsp;....... &nbsp;</span>
+                                    }</li>
+                                <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
+                            </ol>
+                        </p>
+                        <div className='table-a my-4' >
+                            <table>
+                                <thead >
                                     <tr>
                                         <th rowspan="2">NO</th>
                                         <th rowspan="2">NAMA DAN IZIN PRODI</th>
@@ -212,59 +207,63 @@ class PlenoSanksi extends Component {
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    {dataPelanggaran
-                                        ? dataPelanggaran.map((e, i) => (
-                                            <tr key={e._id}>
-                                                <td>{++i}</td>
-                                                {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
-                                                <td>{e.pasal}</td>
-                                                <td>{e.butir_pelanggaran}</td>
-                                                <td>{e.pelanggaran}</td>
-                                                <td >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
-                                                <td >{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi || ""}</td>
-                                            </tr>
-
-                                        ))
-                                        : ""}
+                                    {dataPelanggaran?.map((e, i) => (
+                                        <tr key={e._id}>
+                                            <td>{++i}</td>
+                                            {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
+                                            <td>{e.pasal}</td>
+                                            <td>{e.butir_pelanggaran}</td>
+                                            <td>{e.pelanggaran}</td>
+                                            <td >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
+                                            <td style={{ maxWidth: "80px" }}>
+                                                {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi}` || ""}
+                                            </td>
+                                        </tr>
+                                    ))}
                                 </tbody>
                             </table>
-                            <li>Temuan Lain:
-                                <ol type="a">
-                                    {dataSuratBA?.temuanLain ?
-                                        <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
-                                        : "Belum Diisi"}
-                                </ol>
-                            </li>
-                            <li>Hal-hal yang memberatkan, sebagai berikut:
-                                <ol type="a">
-                                    {dataSuratBA?.memberatkan ?
-                                        <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
-                                        : "Belum Diisi"}
-                                </ol>
-                            </li>
-                            <li>hal-hal yang meringankan, sebagai berikut:
-                                <ol type="a">
-                                    {dataSuratBA?.meringankan ?
-                                        <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
-                                        : "Belum Diisi"}
-                                </ol>
-                            </li>
-                            <li>
-                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
-                                    {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
-                                        "-"
-                                        : <span>{dataSuratBA?.sanksi}</span>}
-                                    ”.</strong>
-                            </li>
-                        </ol>
+                        </div>
+                        <p>
+                            <ol start="3">
+                                <li>Temuan Lain:
+
+                                    <ol type="a">
+                                        {dataSuratBA?.temuanLain ?
+                                            <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                            : "Belum Diisi"}
+                                    </ol>
+                                </li>
+                                <li>Hal-hal yang memberatkan, sebagai berikut:
+                                    <ol type="a">
+                                        {dataSuratBA?.memberatkan ?
+                                            <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                            : "Belum Diisi"}
+                                    </ol>
+                                </li>
+                                <li>hal-hal yang meringankan, sebagai berikut:
+                                    <ol type="a">
+                                        {dataSuratBA?.meringankan ?
+                                            <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
+                                            : "Belum Diisi"}
+                                    </ol>
+                                </li>
+                                <li>
+                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
+                                        {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
+                                            "-"
+                                            : <span>{dataSuratBA?.sanksi}</span>}
+                                        ”.</strong>
+                                </li>
+                            </ol>
+                        </p>
+                        <p >
+                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                        </p>
+                        <p><strong>Note: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
+                        <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
+                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
+                        </Button>
                     </div>
-                    <p className='body'>
-                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
-                    </p>
-                    <p><strong>Note: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
-                    <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
-                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
-                    </Button>
                 </div>
 
 

styles/app/app/mycss.scss

@@ -1,4 +1,4 @@
-
+@media screen {
 ///////// Home
 #video-css video{
     width: 450px;
@@ -57,102 +57,43 @@
 
 ///////////////////////////////////////////<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>
 
-////////////////////<<<<<<<< TABLE BERITA ACARA >>>>>>>>>>>>>>>> 
-.demo {
-    border: 1px solid #C0C0C0;
-    border-collapse: collapse;
-    padding: 5px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  
-  .demo .thdemo {
-    border: 1px solid #C0C0C0;
-    padding: 5px;
-    background: #F0F0F0;
-    text-align: center;
-  }
-  .demo .trdemo{
-    border: 1px solid #C0C0C0;
-    padding: 5px;
-  }
-  
-  .demo .tddemo  {
-    border: 1px solid #C0C0C0;
-    padding: 5px;
-    height: 100px;
-    min-width: 200px;
-  }
-  
-  .table-a {
-    border: 1px solid #C0C0C0;
-    border-collapse: collapse;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding: 5px;
-    margin-left: -128px auto;
-    margin-right: auto;
-    table-layout: fixed;
-  }
+
+  //////////////////////////////////Table Pelanggaran
   
   .table-a th {
     border: 1px solid #C0C0C0;
     padding: 5px;
     background: #F0F0F0;
     text-align: center;
+    font-size: small;
   }
   
   .table-a td {
     border: 1px solid #C0C0C0;
     padding: 5px;
     word-wrap: break-word;
-    max-width: 150px;
+    // max-width: 130px;
+    font-size: 0.8rem;
+    @media only screen and (min-width: 1546px) {
+      word-wrap: break-word;
+    }
+    @media only screen and ( max-width:1546px) {
+      max-width: 130px;
+     }
+
   }
+  .table-a{
+    border-collapse: collapse;
+    table-layout: fixed;
+    overflow: auto;
+    margin: -20px ;
 
-    /////////////////////<<<<<<<<<<<<<<<<<<<<<<<<<<<< coba 1 TABLE WRAP TTD >>>>>>>>>>>>>>>>>>>
-// #ttd {
-//     max-width: 410px;
-//     display: flex;
-//     flex-wrap: wrap;
-//     margin-left: auto;
-//     margin-right: auto;
-//       text-align: center;
- 
-  
-//   }
-//   #ttd-header {
-//     width: 410px;
-//     margin-left: auto;
-//     margin-right: auto;
-//     text-align: center;
-//     background-color: #C0C0C0;
-//     color: black;
-//   }
+  }
 
-//     .ttd-div{
-//         width: 205px;
-//       }
-//       .sign-nama{
-//         background-color: rgb(206, 206, 206);
-//         text-align: center;
-//         border: 1px solid#d9d6d6;
-//         padding: 2px;
-//         word-wrap: break-word;
-//         width: 205px;
 
-        
-        
-//       }
-//       .sign-ttd{
-//         width: 205px;
-//         height: 80px;
-//         border: 1px solid#d9d6d6;
-//         padding: 5px;
-      
-//       }
-////////////////////////////////////////coba 2 table ttd
+////////////////////////////////////////table signature in berita acara
 #ttd{
-    width: 612px;
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
@@ -160,12 +101,12 @@
    
 
     .ttd-div{
-        width: 306px;
+        width: 50%;
         border: 1px solid #C0C0C0;
     }
     .sign-ttd{
-        width: 306px;
-        height: 153px;
+        width:90% ;
+        height: 150px;
         margin-right: auto;
         margin-left: auto;
     }
@@ -181,9 +122,85 @@
     background-color: #C0C0C0; 
     text-align: center;
     color: black;
-    width: 612px;
     margin-left: auto;
     margin-right: auto;
 }
+//////////////////////////////////////>>>>>>>BeritaAcara
+.page {
+  // width: 21cm;
+  // min-height: 29.7cm;
+  // padding-top: 2cm;
+  // padding-bottom: 2cm;
+  // margin: 1cm auto;
+  // display: flex;
+  border: 1px #D3D3D3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.BA-Header {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  font-family: "Times New Roman", Times, serif;
+}
+.BA-logo{
+  width: 30%;
+  margin-bottom: 10px;
+}
+.BA-body p{
+  font-family: "Times New Roman", Times, serif;
+  font-size: 0.8rem;
+  text-indent: 2rem;
+}
+.BA-body ol{
+  margin-top: 1px;
+  text-indent: 0px;
+}
+//////////////////////////////////////////////////////siganature public
+.signature-style{
+  border: 1px solid#c9c8c8;
+width: 380px;
+height: 190px;
+margin-left: auto;
+margin-right: auto;
+border-radius: 4px;
+}
+
+.page-sign {
+  width: 21cm;
+  min-height: 29.7cm;
+  padding-top: 2cm;
+  padding-bottom: 2cm;
+  margin: 1cm auto;
+  // display: flex;
+  border: 1px #D3D3D3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
 
+/////////////////////////////////////// style Component 
+.btn-v1-outline-purple {
+  color: #3e3a8e;
+  border-color: #3e3a8e; }
+  .btn-v1-outline-purple:hover {
+    color: #fff;
+    background-color: #7266ba;
+    border-color: #7266ba; }
+  .btn-va-outline-purple:focus, .btn-v1-outline-purple.focus {
+    box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5); }
+  .btn-v1-outline-purple.disabled, .btn-v1-outline-purple:disabled {
+    color: #7266ba;
+    background-color: transparent; }
+  .btn-v1-outline-purple:not(:disabled):not(.disabled):active, .btn-v1-outline-purple:not(:disabled):not(.disabled).active,
+  .show > .btn-v1-outline-purple.dropdown-toggle {
+    color: #fff;
+    background-color: #7266ba;
+    border-color: #7266ba; }
+    .btn-v1-outline-purple:not(:disabled):not(.disabled):active:focus, .btn-v1-outline-purple:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-v1-outline-purple.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5); }
 
+    }

styles/bootstrap/_print.scss

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