10/04/23 commit

actions/autosave.js

@@ -1,6 +1,6 @@
 import axios from "@/config/axios";
 
-export const getAutoSave = async ({ token, laporan, sanksi, id }) => {
+export const getAutoSave = async ({ laporan, sanksi, id }) => {
     try {
         let url = "";
         if (laporan) {
@@ -9,7 +9,7 @@ export const getAutoSave = async ({ token, laporan, sanksi, id }) => {
         if (sanksi) {
             url += `/auto/save/${id}?sanksi=true`;
         }
-        const res = await axios.get(url, { headers: { Authorization: token } });
+        const res = await axios.get(url);
         return res.data;
     } catch (error) {
         console.log("error", error);

actions/public.js

@@ -0,0 +1,36 @@
+import { get, post, del, put } from "../config/request";
+import axiosAPI from "../config/axios";
+import { createLog } from "./log";
+
+
+export const addPesertaPleno = async (token, data) => {
+    try {
+        const res = await axiosAPI.post('/public/sanksi/add-peserta-pleno', data, { headers: { Authorization: token } });
+        return res.data;
+    } catch (error) {
+        console.log("error", error.response.data);
+        return false;
+    }
+};
+export const getOneLaporanPublic = async (id, query = {}) => {
+    try {
+        let url = `public/laporan/${id}`;
+        if (query != null) {
+            const { aktif, all } = query;
+            url += "?";
+            const parseURL = [];
+            if (all) {
+                parseURL.push(`all=true`);
+            }
+            if (aktif === false) {
+                parseURL.push(`aktif=false`);
+            }
+            url += parseURL.join("&");
+        }
+        const res = await axiosAPI.get(url);
+        return res.data;
+    } catch (error) {
+        console.log("error", error);
+        return false;
+    }
+};

components/Charts/chart-flot.scss

@@ -34,9 +34,10 @@
     }
 }
 .flot-chart {
-    display: inline-block;
-    width: 150%;
-    height: 250px;
+    // display: inline-block;
+   height: 150px;
+   width: 300px;
+   margin-right: -70px;
     // font-size: 15px;
     .legend {
         font-size: 13px;
@@ -59,7 +60,7 @@
 
         .legendColorBox>div,
         .legendColorBox>div>div {
-            border-radius: 400px;
+            // border-radius: 400px;
         }
     }
 }

components/Layout/MenuLLDIKTI.js

@@ -88,10 +88,6 @@ const Menu = [
 				name: "a. Naik Sanksi",
 				path: "/app/naik-sanksi",
 			},
-			{
-				name: "b. Turun Sanksi",
-				path: "/app/turun-sanksi",
-			},
 		],
 	},
 

components/Main/ChartdataHome.js

@@ -118,10 +118,10 @@ class ChartdataHome extends Component {
 			<Col lg={12}>
 				<Card>
 					<CardBody>
-						<FlotChart options={this.ChartSpline.options} data={this.state.dataChart.data} className="flot-chart" height="150px" width="350px" />
+						<FlotChart options={this.ChartSpline.options} data={this.state.dataChart.data} className="flot-chart" height="150px" width="300px" />
 					</CardBody>
 					<div align="center">
-						<h5 className="font-weight-bold">Data Statistik Pengunjung Bulan {`${this.convertMonth(new Date().getMonth() + 1)} ${new Date().getFullYear()}`}</h5>
+						<h5 className="font-weight-bold font-10">Data Statistik Pengunjung Bulan {`${this.convertMonth(new Date().getMonth() + 1)} ${new Date().getFullYear()}`}</h5>
 					</div>
 				</Card>
 			</Col>

components/NaikSanksi/InputTanggal.js

@@ -156,7 +156,9 @@ class InputTanggal extends Component {
         formdata.append("keterangan", data.keterangan);
         formdata.append("from_date", data.from_date);
         formdata.append("to_date", data.to_date);
-        formdata.append("sanksi", JSON.stringify(data.sanksi));
+        // formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value }))));
+        formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value.split(";")[0], description: e.value.split(";")[1], level: e.value.split(";")[2] }))));
+
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
@@ -186,6 +188,8 @@ class InputTanggal extends Component {
                 <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
             </p>
         ));
+
+        console.log(this.props.listSanksi)
         return (
             <Card className="card-default">
                 <CardBody>
@@ -325,7 +329,7 @@ class InputTanggal extends Component {
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
                                         <Field name="sanksi">{({ field, form }) => <Select
-                                            options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+                                            options={this.props.listSanksi.map(e => ({ value: e, label: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);

components/NaikSanksi/TableLaporan.js

@@ -65,7 +65,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 
 											<td>
 												{/* {data.sanksi.masa_berlaku?.to_date ? (<h4 className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</h4>) : (<h4 className="m-0">6 Bulan</h4>)} */}
-												<h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4>
+												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
 												<p className="w-105">{data.keterangan}</p>
 											</td>
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}

components/RekomendasiDelegasi/TableLaporan.js

@@ -65,7 +65,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 											{status ? (
 												<td>
 													<h4 className="m-0">{data.laporan.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Delegasi Ke LLDIKTI"}</h4>
-													<p className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</p>
+													{data.pelanggaran.map((e) => (<p className="w-105">Sanksi Administratif:  {e.label_sanksi}</p>))}
 												</td>
 											) : (
 												""

components/Sanksi/BeritaAcara_A.js

@@ -1,43 +1,460 @@
 import React, { useRef, Component } from 'react';
 import { useReactToPrint } from "react-to-print";
-import { Row, Col, Button } from "reactstrap";
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, } from "reactstrap";
 import Head from 'next/head'
 import SignatureCanvas from 'react-signature-canvas'
 import ComponentToPrint from "./SuratBA";
 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: "[Mohon Diisi]",
+            isEditTanggal: false,
+            tanggal: "",
+            setTanggal: false,
+            isEditNamaPeserta: false,
+            isEditTemuanLain: false,
+            temuanLain: [],
+            memberatkan: [],
+            isEditKeberatan: false,
+            isEditMeringankan: false,
+            meringankan: [],
+            sanksi: "[Mohon Diisi]",
+            isEditSanksi: false,
+            copied: false,
+            setmeState: true,
+            descPelanggaran: [],
         };
+        this.updateValueRekomendasi = this.updateValueRekomendasi.bind(this)
     }
+
     static getInitialProps = async ({ query }) => {
         return { query };
     };
 
+    componentDidMount = async () => {
+        const { query, token, dataPelanggaran } = this.props;
+        const { id } = query;
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const autosaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        this.setState(autosaveDataSuratBA)
+    };
+
+    componentDidUpdate = (prevProps) => {
+        const { dataPelanggaran } = this.state;
+        if (prevProps.dataPelanggaran != this.state.dataPelanggaran) {
+            // this.state.descPelanggaran = dataPelanggaran?.map((e) => ({ id: e._id, simpulan: "simpulan", rekomendasi: "rekomendasi" }))
+            const descPelanggaran = {}
+            dataPelanggaran?.forEach(e => {
+                descPelanggaran[e._id] = {
+                    simpulan: 'simpulan',
+                    rekomendasi: 'rekomendasi'
+                }
+            });
+            // this.setState({ descPelanggaran })
+        }
+    }
+
+    updateValueSimpulan = (evt, id) => {
+        this.setState((prevState) => ({
+            ...prevState, descPelanggaran: {
+                ...prevState.descPelanggaran, [id]: {
+                    ...prevState.descPelanggaran[id], simpulan: evt.target.value
+                }
+            }
+        }), this.handleAutoSave)
+    }
+    updateValueRekomendasi = (evt, id) => {
+        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.setState({
+            isEditTempat: !this.state.isEditTempat,
+        }, this.setDataSuratBA, this.handleAutoSave())
+
+    }
+    isEditTanggal = () => {
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        }, this.setDataSuratBA, this.handleAutoSave())
+
+    }
+
+    isEditTemuanLain = () => {
+        this.setState({
+            isEditTemuanLain: !this.state.isEditTemuanLain,
+        }, this.setDataSuratBA, this.handleAutoSave())
+    }
+
+    isEditKeberatan = () => {
+        this.setState({
+            isEditKeberatan: !this.state.isEditKeberatan,
+        }, this.setDataSuratBA, this.handleAutoSave())
+
+    }
+    isEditMeringankan = () => {
+        this.setState({
+            isEditMeringankan: !this.state.isEditMeringankan,
+        }, this.setDataSuratBA, this.handleAutoSave())
+    }
+    isEditSanksi = () => {
+        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
+    })
+
+    CloseCopied = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copied: !this.state.copied
+            });
+        }, 1000);
+    }
+
     render() {
+        const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
+        const { descPelanggaran, tanggal, setTanggal } = this.state
         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={() => {
+                                return <span>
+                                    <Button color className="btn-labeled-4">
                                         <h4 className="p-0 mt-2">Print dan Download</h4>
                                     </Button>
                                 </span>
+                            }}
+                            content={() => this.componentRef}
+                        />
+                    </span>
+                </div>
+                <div style={{ display: "none" }}>
+                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
+                </div>
+                <div className='page'>
+                    <page>
+                        <div className='BA-logo'>
+                            <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                        </div>
+                        <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                        {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
+                        <div className='body'>
+                            <p className='body'>
+                                Pada hari ini
+
+
+                                {dataSuratBA?.isEditTanggal &&
+                                    <span>
+                                        <DatePicker
+                                            selected={tanggal ? new Date(tanggal) : tanggal}
+                                            onChange={(tanggal) => {
+                                                this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
+                                            }}
+                                            dateFormat="dd/MM/yyyy"
+                                            placeholderText="Isi Tanggal"
+                                            locale={id}
+                                            className="form-control bg-white"
+                                        />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTanggal} />
+                                        <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal}
+                                        />
+                                    </span>
+                                }
+                                {setTanggal === true || this.state?.setTanggal === true ?
+                                    <span onClick={this.isEditTanggal}> {moment(tanggal || this.state?.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(tanggal || this.state?.tanggal).format("D")}&nbsp; bulan &nbsp;{moment(tanggal || this.state?.tanggal).format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
+                                    <span onClick={this.isEditTanggal}> &nbsp;[Mohon Diisi] &nbsp;</span>
+                                }
+
+
+
+                                &nbsp;bertempat di
+                                {dataSuratBA?.isEditTempat &&
+                                    <span>
+                                        <input type='text'
+                                            defaultValue={dataSuratBA?.tempat}
+                                            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>
+                                }
+                                {dataSuratBA?.tempat || this.state?.tempat ?
+                                    <span onClick={this.isEditTempat}>
+                                        &nbsp;{dataSuratBA?.tempat || this.state?.tempat}
+                                    </span>
+                                    :
+                                    <span onClick={this.isEditTempat}>[Mohon Diisi]</span>
+                                }
+
+                                ,
+                                telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:
+                            </p>
+                            <div className='body'>
+                                <ol>
+                                    {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                                </ol>
+                            </div>
+                        </div>
+                        <p>
+                            Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:
+                        </p>
+                        <div className='body'>
+                            <ol>
+                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi  {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
+                                    {setTanggal === true || this.state?.setTanggal === true ?
+                                        <span> &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>
+                                <table className='table-a'>
+                                    <thead>
+                                        <tr>
+                                            <th rowspan="2">NO</th>
+                                            <th rowspan="2">NAMA DAN IZIN PRODI</th>
+                                            <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
+                                            <th rowspan="2">SIMPULAN</th>
+                                            <th rowspan="2">REKOMENDASI</th>
+                                        </tr>
+                                        <tr>
+                                            <th>PASAL</th>
+                                            <th>BUTIR PELANGGARAN</th>
+                                            <th>DESKRIPSI PELANGGARAN</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {dataPelanggaran?.data?.map((e, i) => (
+                                            <tr key={e._id}>
+                                                <td>{++i}</td>
+                                                {dataLaporan.data && (<td className='BA-header'>{dataLaporan.data.pt.nama}</td>)}
+                                                <td>{e.pasal}</td>
+                                                <td>{e.butir_pelanggaran}</td>
+                                                <td>{e.pelanggaran}</td>
+                                                <td>
+                                                    <ContentEditable
+                                                        html={descPelanggaran[e._id]?.simpulan || ""}
+                                                        disabled={false}
+                                                        onChange={(evt) => {
+                                                            this.updateValueSimpulan(evt, e._id), this.setDataSuratBA()
+
+                                                        }}
+                                                    />
+                                                </td>
+                                                <td>
+                                                    <ContentEditable
+                                                        html={descPelanggaran[e._id]?.rekomendasi || ""}
+                                                        disabled={false}
+                                                        onChange={(evt) => {
+                                                            this.updateValueRekomendasi(evt, e._id), this.setDataSuratBA()
+
+                                                        }}
+                                                    />
+                                                </td>
+
+                                            </tr>
+
+                                        ))}
+                                    </tbody>
+                                </table>
+                                <li>Temuan Lain:
+                                    {this.props.dataSuratBA?.isEditTemuanLain ?
+                                        <span>
+                                            <input style={{ height: "30px", width: "250px" }} type='textarea' defaultValue={""} ref="inputTemuan"
+                                            />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => {
+                                                this.updateValueTemuanLain(), this.isEditTemuanLain()
+                                            }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTemuanLain} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.temuanLain?.map((value) => <li>{value}</li>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>Hal-hal yang memberatkan, sebagai berikut:
+                                    {this.props.dataSuratBA?.isEditKeberatan ?
+                                        <span>
+                                            <input style={{ height: "30px", width: "250px" }} type='text' defaultValue={""} ref="inputMemberatkan" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemberatkan(), this.isEditKeberatan() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditKeberatan} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.memberatkan?.map((value) => <li>{value}</li>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>hal-hal yang meringankan, sebagai berikut:
+                                    {this.props.dataSuratBA?.isEditMeringankan ?
+                                        <span>
+                                            <input type='text' defaultValue={""} ref="inputMeringankan" />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.updateValueMemringankan(), this.isEditMeringankan() }} />
+                                            <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditMeringankan} />
+                                        </span>
+
+                                        : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
+                                    <ol type="a">
+                                        {dataSuratBA?.meringankan?.map((value) => <li>{value}</li>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
+                                    </ol>
+                                </li>
+                                <li>
+                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa
+                                        {dataSuratBA?.isEditSanksi &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue=""
+                                                    ref="inputsanksi"
+                                                    onChange={() => {
+                                                        this.setState({ sanksi: this.refs.inputsanksi.value }, this.setDataSuratBA)
+                                                    }}
+                                                />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditSanksi} />
+                                                <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={() => { this.isEditSanksi() }} />
+                                            </span>
+                                        }
+                                        {dataSuratBA?.sanksi || this.state?.sanksi ?
+                                            <span onClick={this.isEditSanksi}>
+                                                &nbsp;{dataSuratBA?.sanksi || this.state?.sanksi}
+                                            </span>
+                                            :
+                                            <span onClick={this.isEditSanksi}>[Mohon Diisi]</span>
+                                        }
+                                    </strong>
+                                </li>
+                            </ol>
+                        </div>
+                        <p className=''>
+                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                        </p>
+                        <p>
+                            <CopyToClipboard
+                                text={`https://dev.sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}
+                                options={{ asHtml: true }}
+                            >
+                                <div>
+                                    <span className="btn-radius">
+                                        <Button color id="Popover1" className="btn-labeled-3" onClick={() => {
+                                            this.setState({
+                                                setmeState: !this.state.setmeState
+                                            }, this.setDataSuratBA()), this.handleAutoSave(), this.CloseCopied()
+                                        }} >
+
+                                            <h4 className="p-0 mt-2 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h4>
+                                        </Button>
+                                    </span>
+                                    <Popover placement="bottom" isOpen={this.state.copied} target="Popover1" toggle={this.Copied}>
+                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                    </Popover>
+                                </div>
+
+                            </CopyToClipboard>
+                        </p>
+                        <table className='demo'>
+                            <tbody>
+
+                                <tr>
+                                    <th className='thdemo' colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
+                                </tr>
+                                <tr className='trdemo'>
+                                    <th className='trdemo'>No</th>
+                                    <th className='trdemo'>Nama</th>
+                                    <th className='trdemo'>Tanda Tangan</th>
+                                </tr>
+                                {dataLaporan
+                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
+                                        <tr>
+                                            <td className='trdemo'>{index + 1}</td>
+                                            <td className=' tddemo'>{value.nama}</td>
+                                            <td className='tddemo'>
+                                                <img
+                                                    style={{ width: "200px" }}
+                                                    src={value.ttd.path} />
+
+
+                                            </td>
+                                        </tr>)) : ""}
+                            </tbody>
+                        </table>
+                        {/* <div>
+                            <div id="ttd-header" className='text-center signature-border'>
+                                <span className='text-center'> PESERTA RAPAT PENYUSUNAN REKOMENDASI</span>
                             </div>
+                            <div id="ttd">
+
+                                {dataLaporan
+                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
+                                        <div className='ttd-div'>
+                                            <img
+                                                className='sign-ttd'
+                                                src={value.ttd.path} />
+                                            <div className='sign-nama font-color-black'>{value.nama}</div>
+                                        </div>
+                                    )) : ""}
+                            </div>
+                        </div> */}
+
 
-                        )}
-                    </PrintContextConsumer>
-                </ReactToPrint>
-                {/* <div style={{ display: "none" }}> */}
-                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} />
-                {/* </div> */}
+                    </page>
+                </div>
             </div >
 
         );

components/Sanksi/Ringkasan.js

@@ -4,7 +4,7 @@ import moment from "moment";
 import 'moment/locale/id'
 moment.locale('id')
 
-function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
+function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload, autoSaveDataPelanggaran }) {
 	return (
 		<>
 			<Row>
@@ -65,6 +65,7 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								</tr>
 							</thead>
 							<tbody>
+
 								{dataPelanggaran
 									? dataPelanggaran.map((e, i) => (
 										<tr key={e._id}>

components/Sanksi/SuratBA.js

@@ -6,6 +6,8 @@ import { connect } from "react-redux";
 import moment from "moment";
 import 'moment/locale/id'
 moment.locale('id')
+import { getAutoSave } from "@/actions/autosave";
+
 
 
 
@@ -15,13 +17,7 @@ class ComponentToPrint extends React.Component {
         super(props);
         this.state = {
             dataLaporan: {},
-            tempat: "[Mohon Diisi]",
-            isEditMode: false,
-            temuanLain: [],
-            memberatkan: [],
-            formData: null,
-            meringankan: [],
-            namaPeserta: [{ nama: "", ttd: [] }]
+
         };
     }
 
@@ -34,54 +30,18 @@ class ComponentToPrint extends React.Component {
         const { query, token } = this.props;
         const { id } = query;
         const dataLaporan = await getOneLaporan(token, id);
-        this.setState({ dataLaporan });
-    };
-    changeEditMode = () => {
-        this.setState({
-            isEditMode: !this.state.isEditMode,
-        })
-    }
-    updateValueTempat = () => {
-        this.setState({
-            isEditMode: false,
-            tempat: this.refs.inputTempat.value
-        })
-    }
-    handleTemuanLain = (e) => {
-        const addTemuanLain = this.refs.inputTemuan.value
-        this.setState({
-            temuanLain: [...this.state.temuanLain, addTemuanLain]
-        }, this.setformData)
-    }
-    handleMemberatkan = (e) => {
-        const addMemberatkan = this.refs.inputMemberatkan.value
-        this.setState({
-            memberatkan: [...this.state.memberatkan, addMemberatkan]
-        }, this.setformData)
-    }
-    handleMeringankan = (e) => {
-        const addMeringankan = this.refs.inputMeringankan.value
-        this.setState({
-            meringankan: [...this.state.meringankan, addMeringankan]
-        }, this.setformData)
-    }
-    setNamaPeserta = () => {
-        const addNamaPeserta = this.refs.inputNama.value
-        this.setState({
-            namaPeserta: [...this.state.namaPeserta, addNamaPeserta]
-        })
-    }
-
-    setformData = (data) => {
-        this.setState({
-            formData: this.state
-        })
-    }
-
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const autoSaveDataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
+        this.setState({ dataLaporan, dataSuratBA });
+        this.setState(dataPelanggaran)
+        this.setState(autoSaveDataSuratBA)
 
+    };
 
     render() {
-        const { dataLaporan, tempat, isEditMode, temuanLain, formData, memberatkan, meringankan, namaPeserta } = this.state
+        const { dataLaporan, descPelanggaran, dataSuratBA } = this.state
         const { dataPelanggaran } = this.props
         return (
             <div className='BA-div' >
@@ -93,27 +53,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 || 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
-                            {isEditMode ?
+                            {dataSuratBA?.tempat || this.state?.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 || this.state?.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>
+                                {dataLaporan.data?.peserta_penetapan_sanksi ?
+                                    <span>
+                                        {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                                    </span>
+                                    :
+                                    <span>Belum Ada Data</span>
+                                }
+
                             </ol>
                         </div>
                     </div>
@@ -124,7 +91,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 || 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>
                             {/* <div style={{ overflow: "auto" }}> */}
                             <table className='table-a'>
@@ -143,65 +115,49 @@ class ComponentToPrint extends React.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 contenteditable='true'>[Mohon Diisi]</td>
-                                                <td contenteditable='true'>[Mohon Diisi]</td>
-                                            </tr>
-
-                                        ))
-                                        : ""}
+                                    {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 >{dataSuratBA?.descPelanggaran[e._id]?.simpulan}</td>
+                                            <td >{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi}</td>
+                                        </tr>
+
+                                    ))}
                                 </tbody>
                             </table>
                             {/* </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 || 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:
-                                {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 || 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:
-                                {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 || 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 …………………………..”.</strong>
+                                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>
                     </div>
@@ -210,87 +166,34 @@ class ComponentToPrint extends React.Component {
                     </p>
                     <table className='demo'>
                         <tbody>
+
                             <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>
+                                <th className='thdemo' colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                             </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 className='trdemo'>
+                                <th className='trdemo'>No</th>
+                                <th className='trdemo'>Nama</th>
+                                <th className='trdemo'>Tanda Tangan</th>
                             </tr>
+                            {dataLaporan
+                                ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value, index) => (
+                                    <tr>
+                                        <td className='trdemo'>{index + 1}</td>
+                                        <td className=' tddemo'>{value.nama}</td>
+                                        <td className='tddemo'>
+                                            <img
+                                                style={{ width: "200px" }}
+                                                src={value.ttd.path} />
+
+
+                                        </td>
+                                    </tr>)) : ""}
                         </tbody>
                     </table>
                 </div>
                 <div id="footer">
                     <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
-                    {/* <span class="custom-footer-page-number">Number: </span> */}
                 </div>
-
             </div>
 
         );

components/Sanksi/TablePenetapanSanksi.js

@@ -6,6 +6,8 @@ import Button from "reactstrap/lib/Button";
 import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
 import Router from "next/router";
 import { ToastContainer, toast } from "react-toastify";
+import { getAutoSave } from "@/actions/autosave";
+
 
 
 
@@ -19,22 +21,28 @@ export class TablePenetapanSanksi extends Component {
 			checkedData: [],
 			labelSanksi: [],
 			btnDelegasi: false,
-
 		};
+		this.onHandleChange = this.onHandleChange.bind(this)
 	}
 
 	componentDidMount = async () => {
-		const { token } = this.props;
+		const { token, query } = this.props;
+		const { id } = query;
 		const pelanggaran = await getPelanggaran(token);
-		this.setState({ pelanggaran });
+		const getDataSave = await getAutoSave({ id, laporan: true });
+		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
+		this.setState({ pelanggaran, checkedData: autoSaveDataPelanggaran ? autoSaveDataPelanggaran.data.map(e => e._id) : [] });
+		this.checkedData = this.state.checkedData
 	};
 
 	onHandleChange = (evt) => {
 		const checked = evt.target.checked;
 		const item = evt.target.value;
-		if (checked) this.checkedData.push(evt.target.value);
-		else this.checkedData = this.checkedData.filter((e) => e != item);
-		this.props.setCheckedData(this.checkedData);
+		if (checked) this.state.checkedData.push(evt.target.value);
+		// else this.setState((prevState) => ({ ...prevState, checkedData: prevState.checkedData.filter((e) => e != item) }));
+		// else this.setState({ checkedData: this.state.checkedData.filter((e) => e != item) });
+		else this.state.checkedData = this.state.checkedData.filter((e) => e != item)
+		this.props.setCheckedData(this.state.checkedData);
 	};
 
 	setLabelSanksi = (evt, label_sanksi) => {
@@ -93,9 +101,10 @@ export class TablePenetapanSanksi extends Component {
 									<td>
 										<div className="checkbox c-checkbox">
 											<label>
-												<input type="checkbox" value={jp._id} onChange={(evt) => {
+												<input type="checkbox" checked={checkedData.find(id => id === jp._id)} value={jp._id} onChange={(evt) => {
 													this.onHandleChange(evt)
 													this.setLabelSanksi(evt, jp.label_sanksi)
+													this.props.handleAutoSave()
 												}} />
 												<span className="fa fa-check"></span>
 											</label>
@@ -107,17 +116,17 @@ export class TablePenetapanSanksi extends Component {
 					</tbody>
 				</Table>
 				<div className="float-right m-2 ">
-					{
-						labelSanksi.filter((e) => e.labelSanksi === "Ringan").length === labelSanksi.length ? (
+					{this.props.user?.role.id === 2020 ? (
+						labelSanksi.length && labelSanksi.filter((e) => e.labelSanksi === "Ringan" || e.labelSanksi === "Sedang").length === labelSanksi.length ? (
 							<Button className="btn-login float-right" color onClick={this.ondelegasi} >
 								<span className="font-color-white">
 									Delegasi ke LLDIKTI
 								</span>
 							</Button>
 						) : ("")
-
-
+					) : ("")
 					}
+
 				</div>
 
 			</Card>

components/Sanksi/UploadSurat.js

@@ -134,13 +134,13 @@ export class UploadSurat extends Component {
 		this.setState(saveData)
 	}
 
-	handleAutoSave = async () => {
-		const { query, token } = this.props;
-		const { id } = query;
-		const { nomorSanksi, keterangan } = this.state
-		const saveData = await inputAutoSave({ data: { penetapanSanksi: { nomorSanksi, keterangan } }, token, id, laporan: true })
+	// handleAutoSave = async () => {
+	// 	const { query, token } = this.props;
+	// 	const { id } = query;
+	// 	const { nomorSanksi, keterangan } = this.state
+	// 	const saveData = await inputAutoSave({ data: { penetapanSanksi: { nomorSanksi, keterangan } }, token, id, laporan: true })
 
-	}
+	// }
 
 	uploadFiles = (e) => {
 		e.preventDefault();
@@ -254,13 +254,13 @@ export class UploadSurat extends Component {
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">Nomor Surat:</label>
 					<div className="col-md-10">
-						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e); this.handleAutoSave() }} />
+						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e); this.props.handleAutoSave() }} />
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">Keterangan</label>
 					<div className="col-md-10">
-						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e); this.handleAutoSave() }} required />
+						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e); this.props.handleAutoSave() }} required />
 					</div>
 				</FormGroup>
 				<FormGroup row>
@@ -354,7 +354,7 @@ export class UploadSurat extends Component {
 					<label className="col-md-2 col-form-label">List sanksi </label>
 					<div className="col-md-10">
 						<Select
-							options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+							options={this.props.listSanksi.map(e => ({ value: e, label: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
 							formatOptionLabel={formatOptionLabel}
 							isMulti
 							onChange={(e) => {

components/TurunSanksi/InputTanggal.js

@@ -46,12 +46,17 @@ const rekomendasiSchema = Yup.object().shape({
     no_sanksi: Yup.string().required("Wajib isi Nomor Sanksi"),
     keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
     from_date: Yup.date().required("Wajib diisi"),
-    to_date: Yup.date().required("Wajib diisi"),
+    to_date: Yup.date().notRequired("Wajib diisi"),
     sanksi: Yup.array().required("Wajib isi pelanggaran"),
     dokumen: Yup.array().required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
+const level_sanksi = {
+    "Sanksi Administratif Ringan": 1,
+    "Sanksi Administratif Sedang": 2,
+    "Sanksi Administratif Berat": 3,
+}
 
 class DropzoneWrapper extends Component {
     state = {
@@ -79,7 +84,6 @@ class InputTanggal extends Component {
             from_date: "",
             to_date: "",
             startDay: tmt_awal,
-            sanksi: {},
             keteranganLaporan: "",
             tmtCheck: false,
             listSanksi: ""
@@ -156,7 +160,7 @@ class InputTanggal extends Component {
         formdata.append("keterangan", data.keterangan);
         formdata.append("from_date", data.from_date);
         formdata.append("to_date", data.to_date);
-        formdata.append("sanksi", JSON.stringify(data.sanksi));
+        formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value.split(";")[0], description: e.value.split(";")[1], level: e.value.split(";")[2] }))));
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
@@ -325,7 +329,7 @@ class InputTanggal extends Component {
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
                                         <Field name="sanksi">{({ field, form }) => <Select
-                                            options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+                                            options={this.props.listSanksi.map(e => ({ value: e, label: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);
@@ -335,7 +339,7 @@ class InputTanggal extends Component {
                                     </div>
                                 </FormGroup>
                                 <FormGroup row className="mt-3">
-                                    <label className="col-md-2 col-form-label">Dokumen Perpanjangan Sanksi : <span className="text-danger">*</span></label>
+                                    <label className="col-md-2 col-form-label">Dokumen Perubahan sanksi : <span className="text-danger">*</span></label>
                                     <div className="col-md-10">
                                         <Field name="dokumen">
                                             {({ field, form }) => (

components/TurunSanksi/TableLaporan.js

@@ -64,8 +64,8 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 
 
 											<td>
-												{/* {data.sanksi.masa_berlaku?.to_date ? (<h4 className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</h4>) : (<h4 className="m-0">6 Bulan</h4>)} */}
-												<h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4>
+												{/* <h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4> */}
+												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
 												<p className="w-105">{data.sanksi.keterangan}</p>
 											</td>
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}

package-lock.json

@@ -8930,6 +8930,22 @@
         "tinycolor2": "^1.4.1"
       }
     },
+    "react-contenteditable": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.7.tgz",
+      "integrity": "sha512-GA9NbC0DkDdpN3iGvib/OMHWTJzDX2cfkgy5Tt98JJAbA3kLnyrNbBIpsSpPpq7T8d3scD39DHP+j8mAM7BIfQ==",
+      "requires": {
+        "fast-deep-equal": "^3.1.3",
+        "prop-types": "^15.7.1"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        }
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",

package.json

@@ -85,6 +85,7 @@
     "react-chartist": "0.14.4",
     "react-chartjs-2": "2.11.1",
     "react-color": "2.19.3",
+    "react-contenteditable": "^3.3.7",
     "react-copy-to-clipboard": "^5.1.0",
     "react-data-grid": "6.1.0",
     "react-datepicker": "^4.8.0",

pages/app/index.js

@@ -73,6 +73,7 @@ class App extends Component {
                 <p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
                 <hr className="my-4" />
                 <p className="txt-size">Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
+
                 <p className="lead">
                   {/* <Link href="/laporan/new">
 										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
@@ -98,17 +99,24 @@ class App extends Component {
                     </span>
                   </Link>
                 </p>
-                <div>
-                  <span className="cd-home-1">
-                    <img className="ditbaga-logo float-lg-none" src="/static/img/ditbaga-logo.png" alt="applogo" />
-                  </span>
-                  <span className="cd-home-2">
-                    <ChartdataHome className="" />
-                  </span>
+                <div id="video-css">
+                  <video controls>
+                    <source src="/static/img/video/video_buat_laporan.mp4" type="video/mp4" />
+                  </video>
+                  <div className="d-flex flex-column">
+                    <div>
+                      <ChartdataHome />
+                    </div>
+                    <div>
+                      <img className="pl-5" src="/static/img/ditbaga-logo.png" alt="applogo" />
+                    </div>
+                  </div>
                 </div>
+
               </Col>
               <Col>
                 <Login />
+                {/* <ChartdataHome /> */}
               </Col>
             </Row>
           </Jumbotron>

pages/app/sanksi/proses.js

@@ -17,7 +17,8 @@ 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 { autosave } from "@/actions/autosave";
+import { getAutoSave, inputAutoSave } from "@/actions/autosave";
+
 
 
 const stepNavitemStyle = {
@@ -31,10 +32,10 @@ class ProsesSanksi extends Component {
 		this.state = {
 			activeStep: "1",
 			dataUpload: null,
+			dataSuratBA: null,
 			dataPelanggaran: {},
 			pelaporan: {},
 			listSanksi: [],
-			dataSave: {}
 		};
 	}
 
@@ -47,9 +48,21 @@ class ProsesSanksi extends Component {
 		const { id } = query;
 		const pelaporan = await getOneLaporan(token, id);
 		const { data: listSanksi } = await getPelanggaranSanksi(token)
+		const getDataSave = await getAutoSave({ id, laporan: true });
+		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
 		this.setState({ pelaporan, listSanksi });
+		this.setState({ dataPelanggaran: autoSaveDataPelanggaran })
+
 	};
 
+
+	handleAutoSave = async (data) => {
+
+		const { query, token } = this.props;
+		const { id } = query;
+		const { dataSuratBA, dataUpload } = this.state
+		await inputAutoSave({ data: { PenetapanSanksi: { dataSuratBA, dataUpload, dataPelanggaran: data } }, token, id, laporan: true })
+	}
 	done = async (e) => {
 		const toastid = toast.loading("Please wait...");
 		try {
@@ -119,14 +132,19 @@ class ProsesSanksi extends Component {
 		const { token } = this.props;
 		const result = await getPelanggaran(token, { id: data.join(",") });
 		this.setState({ dataPelanggaran: result });
+		this.handleAutoSave(result)
 	};
 
 	setUploadSuratSanksi = (data) => {
 		this.setState({ dataUpload: data });
 	};
+	setDataSuratBA = (data) => {
+		this.setState({ dataSuratBA: data });
+
+	};
 
 	render() {
-		const { dataUpload, dataPelanggaran, pelaporan } = this.state;
+		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, autoSaveDataPelanggaran } = this.state;
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -254,7 +272,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="3">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Jenis Pelanggaran</h2>
-												<TablePenetapanSanksi handleDelegasi={this.handleDelegasi} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran.data} data={pelaporan.data} />
+												<TablePenetapanSanksi query={this.props.query} handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran} />
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -268,7 +286,7 @@ class ProsesSanksi extends Component {
 										</TabPane>
 										<TabPane tabId="4">
 											<Card>
-												<BeritaAcara query={this.props.query} dataPelanggaran={dataPelanggaran.data} />
+												<BeritaAcara query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />
 											</Card>
 											<div className="d-flex">
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
@@ -282,7 +300,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran.data} query={this.props.query} />}
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran?.data} query={this.props.query} handleAutoSave={this.handleAutoSave} />}
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -297,7 +315,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} /> : <Loader />}
+												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} autoSaveDataPelanggaran={autoSaveDataPelanggaran} dataPelanggaran={dataPelanggaran?.data} dataUpload={dataUpload} /> : <Loader />}
 											</div>
 											<hr />
 											<div className="d-flex">

pages/app/turun-sanksi/index.js

@@ -27,6 +27,7 @@ class NaikSanksi extends Component {
 
 	render() {
 		const { pelaporan, sanksi } = this.state;
+		console.log(sanksi)
 		return (
 			<ContentWrapper>
 				<div className="content-heading">

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

@@ -0,0 +1,271 @@
+import React, { Component } from 'react';
+import BasePage from "@/components/Layout/BasePage";
+
+import { getOneLaporanPublic } from '../../../actions/public';
+import { getAutoSave } from "@/actions/autosave";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input } from "reactstrap";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import SignatureCanvas from 'react-signature-canvas'
+import { addPesertaPleno } from '../../../actions/public';
+import { toast } from "react-toastify";
+import Router from "next/router";
+import swal from "sweetalert2";
+
+
+
+class PlenoSanksi extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+            modal: false,
+            signature: "",
+            nama: "",
+            data: {},
+            changesign: false
+
+        }
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+    componentDidMount = async () => {
+        const { query } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporanPublic(id);
+        const getDataSave = await getAutoSave({ id, laporan: true });
+        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
+        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran.data;
+        this.setState({ dataLaporan, dataSuratBA, dataPelanggaran });
+    };
+
+    toggleModal = (value = true) => {
+        if (!value) {
+            this.setState({ modal: false });
+        } else {
+            this.setState({ modal: !this.state.modal });
+        }
+    };
+    sigPad = []
+    clear = () => {
+        this.sigPad.clear()
+    }
+    updateValueSignature = () => {
+        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
+        this.setState({
+            signature: addsig,
+            changesign: true
+
+        })
+    }
+
+    updateValueNama = (e) => {
+        this.setState({ nama: e.target.value });
+    }
+
+
+    onSubmit = async (e) => {
+
+        const { query, token } = this.props;
+        const { id } = query;
+        const sign = this.state.signature
+        const blob = await (await fetch(sign)).blob();
+        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
+        const formdata = new FormData();
+        formdata.append("ttd", files);
+        formdata.append("laporan_id", id);
+        formdata.append("nama", this.state.nama);
+        const added = await addPesertaPleno(token, formdata);
+        const toastid = toast.loading("Please wait...");
+        if (!added) {
+            swal.fire({
+                title: "Gagal Input Tanda Tangan",
+                icon: "error",
+                confirmButtonColor: "#3e3a8e",
+            });
+
+        } else {
+            swal.fire({
+                title: "Berhasil Input Tanda Tangan",
+                icon: "success",
+                confirmButtonColor: "#3e3a8e",
+
+            });
+            Router.push("/app");
+
+        }
+    };
+
+
+
+
+    render() {
+        const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama, changesign } = this.state
+        return (
+            <ContentWrapper unwrap>
+                <Modal isOpen={this.state.modal} >
+
+                    <ModalBody>
+                        <FormGroup row>
+                            <label className="col-md-2 col-form-label">Nama <span className=' text-danger'>*</span>:</label>
+                            <div className="col-md-10">
+                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
+                            </div>
+                        </FormGroup>
+                        <FormGroup row>
+                            <label className="col-md-2 col-form-label">Tanda Tangan:</label>
+                            <div className="col-md-10">
+                                <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />
+                            </div>
+                        </FormGroup>
+                        <ModalFooter>
+                            <Button color className="btn-login" onClick={this.updateValueSignature
+                            }>
+                                <span className="font-color-white">Simpan</span>
+                            </Button>
+                            <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
+                                Hapus
+                            </Button>
+                        </ModalFooter>
+                        <ModalFooter>
+                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className="btn-labeled-notHover pt-2 pb-2 " onClick={this.onSubmit}>
+                                <span className="font-color-white">Kirim</span>
+                            </Button>
+                        </ModalFooter>
+
+                    </ModalBody>
+                </Modal>
+                <div className='page'>
+                    <div className='BA-logo'>
+                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                    </div>
+                    <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    {dataLaporan.data && (<h3 className='BA-header'>{dataLaporan.data.pt.nama}</h3>)}
+                    <div className='body'>
+                        <p className='body'>
+                            Pada hari ini
+                            {dataSuratBA?.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
+                            {dataSuratBA?.tempat === "[Mohon Diisi]" ?
+                                <span>Belum Diisi Oleh Dikti</span>
+                                :
+                                <span>
+                                    &nbsp;{dataSuratBA?.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=''>
+                            <ol>
+                                {dataLaporan.data?.peserta_penetapan_sanksi ?
+                                    <span>
+                                        {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
+                                    </span>
+                                    :
+                                    <span>Belum Ada Data</span>
+                                }
+
+                            </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>
+                                    <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 >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
+                                                <td >{dataSuratBA?.descPelanggaran[e._id]?.rekomendasi || ""}</td>
+                                            </tr>
+
+                                        ))
+                                        : ""}
+                                </tbody>
+                            </table>
+                            <li>Temuan Lain:
+                                <ol type="a">
+                                    {dataSuratBA?.temuanLain ?
+                                        <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>Hal-hal yang memberatkan, sebagai berikut:
+                                <ol type="a">
+                                    {dataSuratBA?.memberatkan ?
+                                        <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>hal-hal yang meringankan, sebagai berikut:
+                                <ol type="a">
+                                    {dataSuratBA?.meringankan ?
+                                        <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
+                                        : "Belum Diisi"}
+                                </ol>
+                            </li>
+                            <li>
+                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
+                                    {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
+                                        "Belum Diisi Oleh Dikti"
+                                        : <span>{dataSuratBA?.sanksi}</span>}
+                                    ”.</strong>
+                            </li>
+                        </ol>
+                    </div>
+                    <p className='body'>
+                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
+                    </p>
+                    <p><strong>Note: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
+                    <Button color="" className="btn-labeled-notHover" onClick={this.toggleModal}>
+                        <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
+                    </Button>
+                </div>
+            </ContentWrapper>
+        );
+    }
+
+}
+
+PlenoSanksi.Layout = BasePage;
+export default PlenoSanksi;
+
+

styles/app.scss

@@ -42,4 +42,7 @@
 
 // PTB Apps
 @import "app/app/timeline";
-@import "app/extras/calendar";
+@import "app/extras/calendar";
+
+//MY CSS
+@import "app/app/mycss";

styles/app/app/mycss.scss

@@ -0,0 +1,33 @@
+.huruf-besar{
+
+}
+
+#video-css video{
+    width: 450px;
+
+}
+
+#video-css{
+    display: flex;
+    flex-wrap: wrap;    
+}
+#video-css img{
+    width: 150px;
+}
+@media only screen and (max-width: 1366px) {
+    #video-css video{
+        width: 450px;
+        margin-right: -10px;
+        margin-top: 30px;
+    
+    }
+    #video-css img{
+        width: 140px;
+        margin-top: -20px;
+    }
+    #video-css{
+        display: flex;
+        flex-wrap: wrap;   
+        margin-top: -15px; 
+    }
+}

styles/bootstrap/_images.scss

@@ -107,10 +107,7 @@
 //   height: auto;
 //   width: 72px;
 //   height: 37px; }
-.ditbaga-logo {
-  margin-top: 55%;
 
-}
 
 .logo-nav {
   width: 60%;

styles/bootstrap/_print.scss

@@ -139,3 +139,190 @@
     // Bootstrap specific changes end
   }
 }
+
+
+
+.BA-logo {
+  width: 250px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 10px;
+}
+
+.BA-header {
+  font-family: "Times New Roman", Times, serif;
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.BA-div {
+  padding-top: 100px;
+}
+
+.BA-p p {
+  padding: 10px;
+}
+
+.BA-body {
+  font-family: "Times New Roman", Times, serif;
+  padding-top: 0px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.demo {
+  border: 1px solid #C0C0C0;
+  border-collapse: collapse;
+  padding: 5px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.demo .thdemo {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  background: #F0F0F0;
+  text-align: center;
+}
+.demo .trdemo{
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+}
+
+.demo .tddemo  {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  height: 100px;
+  min-width: 200px;
+}
+
+.table-a {
+  border: 1px solid #C0C0C0;
+  border-collapse: collapse;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 5px;
+  margin-left: -128px auto;
+  margin-right: auto;
+  table-layout: fixed;
+}
+
+.table-a th {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  background: #F0F0F0;
+  text-align: center;
+}
+
+.table-a td {
+  border: 1px solid #C0C0C0;
+  padding: 5px;
+  word-wrap: break-word;
+  max-width: 150px;
+}
+
+#footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #979595;
+  padding-bottom: 30px;
+}
+
+////////////////////////////-----SuratBA_A
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #FAFAFA;
+  font: 12pt "Tahoma";
+}
+
+* {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+.page {
+  width: 21cm;
+  min-height: 29.7cm;
+  padding: 2cm;
+  margin: 1cm auto;
+  border: 1px #D3D3D3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.subpage {
+  padding: 1cm;
+  border: 5px red solid;
+  height: 256mm;
+  outline: 2cm #FFEAEA solid;
+}
+
+@page {
+  size: A4;
+  margin: 0;
+}
+
+@media print {
+
+  body,
+  page[size="A4"] {
+    // margin: 0;
+    box-shadow: 0;
+    margin-bottom: 50px;
+  }
+
+
+
+}
+.signature-style{
+  border: 1px solid#c9c8c8;
+width: 380px;
+height: 200px;
+margin-left: auto;
+margin-right: auto;
+border-radius: 4px;
+}
+  
+
+
+  /////////////////////Coba pake flex wrap
+// #ttd {
+//   width: 410px;
+//   display: flex;
+//   flex-wrap: wrap;
+//   margin-left: auto;
+//   margin-right: auto;
+//     text-align: center;
+// }
+// #ttd-header {
+//   width: 410px;
+//   margin-left: auto;
+//   margin-right: auto;
+//   text-align: center;
+// }
+// .ttd-div{
+//   width: 205px;
+//   // height: 100px;
+// }
+// .sign-nama{
+//   background-color: rgb(206, 206, 206);
+//   text-align: center;
+//   // width: 215px;
+//   border: 1px solid#d9d6d6;
+//   padding: 2px;
+  
+// }
+// .sign-ttd{
+//   width: 205px;
+//   height: 80px;
+//   border: 1px solid#d9d6d6;
+//   padding: 5px;
+
+// }

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;
-//   }
-// }