agustus

actions/sanksi.js

@@ -40,6 +40,8 @@ export const getSanksi = async (token, query = {}) => {
 			if (turunSanksi) parseURL.push(`turunSanksi=true`);
 			if (naikSanksi) parseURL.push(`naikSanksi=true`);
 			if (aktif === false) parseURL.push(`aktif=false`);
+			if (aktif === true) parseURL.push(`aktif=true`);
+
 			if (bypassCabutSanksi) parseURL.push(`bypassCabutSanksi=true`)
 			if (is_pengajuan_keberatan) parseURL.push(`pengajuan_keberatan=true`);
 			url += parseURL.join("&");
@@ -118,7 +120,7 @@ export const update = async (token, id, data, _csrf) => {
 const logUpdate = async (token, id) => {
 	const getToken = await getCsrf();
 	const _csrf = getToken.token;
-	await createLog(token, { aktivitas: `Berhasil Merubah Sanksi, id: ${id}`, _csrf: _csrf,menu:"Perubahan  Sanksi" });
+	await createLog(token, { aktivitas: `Berhasil Merubah Sanksi, id: ${id}`, _csrf: _csrf, menu: "Perubahan  Sanksi" });
 
 }
 export const updatePT = async (token, id, data, _csrf) => {

components/Banding/Riwayat.js

@@ -2,7 +2,8 @@ import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import Swal from "sweetalert2";
-
+moment.locale('id')
+import 'moment/locale/id';
 function Riwayat({ data, role }) {
 	const handleOpenAlert = () => {
 		Swal.fire({

components/Banding/TableSanksi.js

@@ -2,7 +2,8 @@ import Datatable from "@/components/Tables/Datatable";
 import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
-
+moment.locale('id')
+import 'moment/locale/id';
 function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">

components/Bypass/TableBypass.js

@@ -10,7 +10,8 @@ import { useState } from "react";
 import { Modal, ModalBody, ModalFooter } from "reactstrap";
 import { getCsrf } from "../../actions/security";
 import Swal from "sweetalert2";
-
+moment.locale('id')
+import 'moment/locale/id';
 
 function TableBypass({ listData, to, linkName, role }) {
 

components/DocPerbaikan/Riwayat.js

@@ -2,6 +2,8 @@ import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import Swal from "sweetalert2";
+import 'moment/locale/id';
+moment.locale('id')
 
 function Riwayat({ data, role }) {
 	const handleOpenAlert = () => {
@@ -20,7 +22,7 @@ function Riwayat({ data, role }) {
 			</CardHeader>
 			<CardBody>
 				<Datatable options={{ responsive: true }}>
-					<table className="table table-striped my-4 w-100">
+					<table className="table table-striped my-4 w-100" data-order='[[0, "desc"]]'>
 						<thead>
 							<tr>
 								<th>Tanggal</th>

components/Extras/summernote.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import $ from 'jquery';
+
+export class SummerNote extends Component {
+  static propTypes = {
+    options: PropTypes.object,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    options: {},
+    onChange: () => {},
+    value: '',
+  };
+
+  componentDidMount() {
+    require('react-summernote');
+    require('react-summernote/dist/react-summernote.css');
+    require('bootstrap/dist/js/bootstrap');
+
+    $(this.element).summernote({
+      ...this.props.options,
+      callbacks: {
+        onChange: this.handleChange,
+      },
+    });
+
+    $(this.element).summernote('code', this.props.value);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      $(this.element).summernote('code', this.props.value);
+    }
+  }
+
+  componentWillUnmount() {
+    $(this.element).summernote('destroy');
+  }
+
+  handleChange = (value) => {
+    this.props.onChange(value);
+  };
+
+  setRef = (node) => this.element = node;
+
+  render() {
+    return (
+      <div ref={this.setRef}></div>
+    );
+  }
+}
+
+export default SummerNote;

components/Keberatan/Riwayat.js

@@ -3,6 +3,8 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import { API_URL } from "@/env";
 import Swal from "sweetalert2";
+import 'moment/locale/id';
+moment.locale('id')
 
 function Riwayat({ data, role }) {
 	const handleOpenAlert = () => {

components/Main/Timeline.js

@@ -1,5 +1,7 @@
 import moment from "moment";
 import { useSelector } from "react-redux";
+import 'moment/locale/id';
+moment.locale('id')
 
 function Timeline({ data, noFile = false, noJadwal = false }) {
 	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];

components/NaikSanksi/DetailSanksi.js

@@ -1,6 +1,7 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
-import 'moment/min/locales';
+
+import 'moment/locale/id';;
 moment.locale('id');
 import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
 import { API_URL } from "@/env";

components/NaikSanksi/TableLaporan.js

@@ -2,7 +2,7 @@ import Datatable from "@/components/Tables/Datatable";
 import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 
 function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {

components/NaikSanksi/TableRiwayat.js

@@ -1,6 +1,6 @@
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 import Swal from "sweetalert2";
 moment.locale('id');
 

components/PT/CabutSanksi/Riwayat.js

@@ -2,7 +2,8 @@ import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import Swal from "sweetalert2";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data, role }) {
 	const handleOpenAlert = () => {
 		Swal.fire({

components/PT/CabutSanksi/TableSanksiJawaban.js

@@ -1,7 +1,8 @@
 import moment from "moment";
 import { Button, Table } from "reactstrap";
 import Link from "next/link";
-
+import 'moment/locale/id';
+moment.locale('id')
 function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">

components/PT/DocPerbaikan/Riwayat.js

@@ -1,7 +1,8 @@
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data }) {
 	return (
 		<Card className="card-default">

components/PT/JawabanBanding/TableSanksiJawaban.js

@@ -1,7 +1,8 @@
 import moment from "moment";
 import { Button, Table } from "reactstrap";
 import Link from "next/link";
-
+import 'moment/locale/id';
+moment.locale('id')
 function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">

components/PT/JawabanKeberatan/Riwayat.js

@@ -1,7 +1,8 @@
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data }) {
 	return (
 		<Card className="card-default">

components/PT/Keberatan/Riwayat.js

@@ -1,7 +1,8 @@
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data }) {
 	return (
 		<Card className="card-default">

components/PT/Riwayat.js

@@ -1,7 +1,8 @@
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data }) {
 	return (
 		<Card className="card-default">

components/PT/TableSanksi.js

@@ -1,7 +1,8 @@
 import moment from "moment";
 import { Button, Table } from "reactstrap";
 import Link from "next/link";
-
+import 'moment/locale/id';
+moment.locale('id')
 function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">

components/PT/TableSanksiJawaban.js

@@ -1,7 +1,8 @@
 import moment from "moment";
 import { Button, Table } from "reactstrap";
 import Link from "next/link";
-
+import 'moment/locale/id';
+moment.locale('id')
 function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">

components/PT/Timeline.js

@@ -1,6 +1,7 @@
 import moment from "moment";
 import { API_URL } from "@/env";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Timeline({ data, dataPelaporan }) {
 	const jadwal = dataPelaporan;
 	const date = [...new Set(data.data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];

components/PencabutanSanksi/Riwayat.js

@@ -3,7 +3,8 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import { API_URL } from "@/env";
 import Swal from "sweetalert2";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data, role }) {
 	const handleOpenAlert = () => {
 		Swal.fire({

components/PencabutanSanksi/RiwayatPerbaikan.js

@@ -2,7 +2,8 @@ import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import Swal from "sweetalert2";
-
+import 'moment/locale/id';
+moment.locale('id')
 function RiwayatPerbaikan({ data, role }) {
 	const handleOpenAlert = () => {
 		Swal.fire({

components/PerpanjanganSanksi/DetailSanksi.js

@@ -1,6 +1,6 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
 import { API_URL } from "@/env";

components/PerpanjanganSanksi/InputTanggal.js

@@ -8,7 +8,7 @@ import { getOneSanksi, editTmt } from "@/actions/sanksi";
 import { addDays, addMonths } from 'date-fns';
 import id from 'date-fns/locale/id';
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 import Router from "next/router";
 import { getCsrf } from "../../actions/security";
@@ -227,7 +227,7 @@ class InputTanggal extends Component {
                                                             }}
                                                             closeOnSelect={true}
                                                             isValidDate={(e) => {
-                                                                return e.isBefore(new Date(this.props.data.masa_berlaku.to_date).getTime() + 86400000)
+                                                                return e.isBefore(new Date(this.props.data?.masa_berlaku?.to_date).getTime() + 86400000)
                                                             }}
 
                                                         />

components/PerpanjanganSanksi/Riwayat.js

@@ -3,7 +3,8 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import { API_URL } from "@/env";
 import Swal from "sweetalert2";
-
+import 'moment/locale/id';
+moment.locale('id')
 function Riwayat({ data, role }) {
 	const handleOpenAlert = () => {
 		Swal.fire({

components/PerpanjanganSanksi/TableLaporan.js

@@ -2,7 +2,7 @@ import Datatable from "@/components/Tables/Datatable";
 import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 
 function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {

components/PerpanjanganSanksi/TableRiwayatCatatan.js

@@ -165,6 +165,15 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                                                     Link Dokumen
                                                                 </DropdownItem>
                                                             </CopyToClipboard>
+                                                        }
+                                                         {ENV === "development" &&
+                                                            <CopyToClipboard
+                                                                text={`http://dev.sidali.kemdikbud.go.id/signature/letter/${data?._id}`}
+                                                                options={{ asHtml: true }}
+                                                            ><DropdownItem>
+                                                                    Link Dokumen
+                                                                </DropdownItem>
+                                                            </CopyToClipboard>
                                                         }
                                                         <Link
                                                             href={{

components/PerpanjanganSanksi/presensi_print.js

@@ -26,26 +26,115 @@ class ComponentToPrint extends React.Component {
 
 
     componentDidMount = async () => {
-        const { query, token } = this.props;
+
+        const { token, query } = this.props;
         const { id } = query;
         const getCatatan = await getOneCatatan(token, id)
+        // const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = getCatatan.data?.isi.pt;
         const catatan = getCatatan.data
-        this.setState({  catatan });
+        const judul = getCatatan.data.judul
+
+        const tempat = catatan.isi.tempat
+        const setTanggal = catatan.isi.setTanggal
+        const isi = catatan.isi.isi
+        const tanggal = catatan.isi.tanggal
+        const isEditTanggal = catatan.isi.isEditTanggal
+        const isEditTempat = catatan.isi.isEditTempat
+        const simpulan = catatan.isi.simpulan
+        const rekomendasi = catatan.isi.rekomendasi
+
+        this.setState({ isi, catatan, judul, pt, tanggal, tempat, isEditTanggal, isEditTempat, simpulan, rekomendasi, setTanggal });
 
     };
 
     render() {
-        const { catatan} = this.state
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+
         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>
+                    {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
+                </div>
+                <div className='BA-body pt-3'>
+                    <p>
+                        Pada hari ini
+                        {this.state?.setTanggal === true ?
+                            <span > {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).locale("id").format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
+                            <span ><strong>&nbsp;- &nbsp;</strong></span>
+                        }
+                        bertempat di
+                        {this.state?.tempat ?
+                            <span className='hhh'>
+                                &nbsp;{this.state?.tempat}
+                            </span>
+                            :
+                            <span ><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                        }
+
+                        ,
+                        telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
+                        <ol>
+                            {catatan?.daftar_kehadiran_peserta?.map((value) =>
+                                <li>
+                                    {value.nama}
+                                </li>)}
+                        </ol>
+                    </p>
+                    <div className='table-a my-4' >
+                        <table className=' ml-auto mr-auto'>
+                            <thead >
+                                <tr>
+                                    <th >NO</th>
+                                    <th>ASPEK PERBAIKAN</th>
+                                    <th >LAPORAN PERBAIKAN</th>
+                                    <th >HASIL VERIFIKASI DAN VALIDASI</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {this.state.isi?.map((isi, index) => (
+                                    <tr key={index}>
+                                        <td>{index + 1}</td>
+                                        <td style={{ width: "30%" }}>
+                                                {isi.Aspek_Perbaikan}
+                                        </td>
+                                        <td style={{ width: "30%" }}>
+                                                {isi.Laporan_Perbaikan}
+                                        </td>
+                                        <td style={{ width: "40%" }}>
+                                                {isi.Hasil_Verifikasi}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Simpulan :</td>
+                                            <td >
+                                                    {this.state.simpulan}
+                                            </td>
+                                        </tr>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Rekomendasi :</td>
+                                            <td >
+                                                {this.state.rekomendasi}
+                                            
+                                            </td>
+                                        </tr>
+                                    </div>
                     <div className='mt-5'>
                         <div className='header-ttd signature-border pt-1 pb-1'>
                             <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
                         </div>
                         <div id="ttd">
                             {catatan
-                                ?catatan?.daftar_kehadiran_peserta?.map((value) => (
+                                ? catatan?.daftar_kehadiran_peserta?.map((value) => (
                                     <div className='ttd-div'>
                                         <div className='sign-ttd'>
                                             <img
@@ -61,6 +150,10 @@ class ComponentToPrint extends React.Component {
                                 )) : ""}
                         </div>
                     </div>
+                </div>
+                <div id="footer">
+                    <span>{catatan?.judul}</span>
+                </div>
 
             </page>
 

components/RekomendasiDelegasi/DetailLaporan.js

@@ -1,6 +1,6 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 import { Col, FormGroup } from "reactstrap";
 import { useSelector } from "react-redux";

components/RekomendasiDelegasi/DetailSanksi.js

@@ -1,6 +1,6 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
 import { API_URL } from "@/env";

components/RekomendasiDelegasi/InputRekomendasi.js

@@ -7,7 +7,7 @@ import * as Yup from "yup";
 import { connect } from "react-redux";
 import { getOneSanksi, addRekomendasiDelegasi } from "@/actions/sanksi";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 import { getCsrf } from "../../actions/security";
 import Swal from "sweetalert2";
 moment.locale('id');

components/RekomendasiDelegasi/TableLaporan.js

@@ -2,7 +2,7 @@ import Datatable from "@/components/Tables/Datatable";
 import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 
 function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {

components/RekomendasiDelegasi/TableRiwayat.js

@@ -2,6 +2,7 @@ import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import 'moment/min/locales';
 import Swal from "sweetalert2";
+import 'moment/locale/id';
 moment.locale('id');
 
 function TableRiwayat({ data, perbaikan, role }) {

components/Sanksi/Ringkasan.js

@@ -249,20 +249,21 @@ export class Ringkasan extends Component {
 									</div>
 								</Col>
 							</FormGroup> */}
-							<FormGroup row>
-								<Col md="4">Tanggal Terima Surat Sanksi :</Col>
-								<Col md="8">
-									<strong>
-										{dataUpload && dataUpload?.terimaSuratSanksi ? (
-											(<p>
-												{moment(dataUpload.terimaSuratSanksi).locale("id").format("DD MMMM YYYY")}
-											</p>)
-										) : (
-											(<span className="text-danger text-bold">Belum diisi</span>)
-										)}
-									</strong>
-								</Col>
-							</FormGroup>
+							{dataUpload && !dataUpload.tidakPerluTMTCheck && (
+								<FormGroup row>
+									<Col md="4">Tanggal Terima Surat Sanksi :</Col>
+									<Col md="8">
+										<strong>
+											{dataUpload && dataUpload?.terimaSuratSanksi ? (
+												(<p>
+													{moment(dataUpload.terimaSuratSanksi).locale("id").format("DD MMMM YYYY")}
+												</p>)
+											) : (
+												(<span className="text-danger text-bold">Belum diisi</span>)
+											)}
+										</strong>
+									</Col>
+								</FormGroup>)}
 							<FormGroup row>
 								<Col md="4">Dokumen Tanda Terima Surat Sanksi:</Col>
 								<Col md="8">
@@ -270,7 +271,7 @@ export class Ringkasan extends Component {
 										<table className="table table-bordered bg-transparent">
 											<tbody>
 												{dataUpload?.filesTandaTerimaSS?.length
-													?( dataUpload.filesTandaTerimaSS.map((e) => (
+													? (dataUpload.filesTandaTerimaSS.map((e) => (
 														<tr>
 															<td style={{ width: "30px" }}>
 																<em className="fa-lg far fa-file-code"></em>
@@ -282,7 +283,7 @@ export class Ringkasan extends Component {
 															</td>
 														</tr>
 													)))
-													: 
+													:
 													(<span className="text-danger text-bold">Belum diisi</span>)}
 											</tbody>
 										</table>

components/Sanksi/UploadSurat.js

@@ -153,7 +153,7 @@ export class UploadSurat extends Component {
 		// this.handleAutoSave()
 	}
 	setsanksi = () => {
-		if (this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS")) {
+		if (this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - lupa PTN atau pencabutan izin PTS")) {
 			this.setState({ awalTMT: "", akhirTMT: "", tglAkhirKeberatan: "", terimaSuratSanksi: "" })
 		}
 	}

components/TurunSanksi/DetailSanksi.js

@@ -1,6 +1,6 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
 import { API_URL } from "@/env";

components/TurunSanksi/InputTanggal.js

@@ -8,7 +8,7 @@ import { getOneSanksi, update } from "@/actions/sanksi";
 import { addDays, addMonths } from 'date-fns';
 import id from 'date-fns/locale/id';
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 import Router from "next/router";
 import { getPelanggaranSanksi } from "@/actions/pelanggaran";

components/TurunSanksi/TableLaporan.js

@@ -2,7 +2,7 @@ import Datatable from "@/components/Tables/Datatable";
 import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
-import 'moment/min/locales';
+import 'moment/locale/id';
 moment.locale('id');
 
 function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {

components/TurunSanksi/TableRiwayat.js

@@ -2,6 +2,7 @@ import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 import 'moment/min/locales';
 import Swal from "sweetalert2";
+import 'moment/locale/id';
 moment.locale('id');
 
 function TableRiwayat({ data, perbaikan , role}) {

env.js

@@ -2,5 +2,5 @@
 export const API_URL = "http://localhost:5000/v1";
 export const ENV = "local"
 // export const API_URL = "https://dev.api.sidali.kemdikbud.go.id/v1";
-//export const API_URL = "https://api.sidali.kemdikbud.go.id/v1";
+// export const API_URL = "https://api.sidali.kemdikbud.go.id/v1";
 

next.config.js

@@ -25,8 +25,7 @@ module.exports = withSass(
 					moment: "moment",
 					Raphael: "raphael", // required by morris.js
 				})
-			);
-
+			);		
 			// Fix for flot resize
 			config.module.rules.push({
 				test: /jquery\.flot\.resize\.js$/,
@@ -47,5 +46,6 @@ module.exports = withSass(
 
 			return config;
 		},
+		
 	})
 );

package-lock.json

@@ -2093,6 +2093,30 @@
         }
       }
     },
+    "@selderee/plugin-htmlparser2": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
+      "integrity": "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==",
+      "requires": {
+        "domhandler": "^5.0.3",
+        "selderee": "^0.11.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        }
+      }
+    },
     "@south-paw/react-vector-maps": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@south-paw/react-vector-maps/-/react-vector-maps-3.1.0.tgz",
@@ -2862,7 +2886,7 @@
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "array-from": {
       "version": "2.1.1",
@@ -3527,7 +3551,7 @@
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ=="
     },
     "bytes": {
       "version": "3.1.0",
@@ -3846,7 +3870,7 @@
     "clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg=="
     },
     "clone-deep": {
       "version": "0.3.0",
@@ -3881,6 +3905,11 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codemirror": {
+      "version": "5.65.17",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.17.tgz",
+      "integrity": "sha512-1zOsUx3lzAOu/gnMAZkQ9kpIHcPYOc9y1Fbm2UVk5UBPkdq380nhkelG0qUwm1f7wPvTbndu9ZYlug35EwAZRQ=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -3989,7 +4018,7 @@
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ=="
     },
     "content-disposition": {
       "version": "0.5.3",
@@ -4020,7 +4049,7 @@
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
     "copy-anything": {
       "version": "2.0.3",
@@ -4882,7 +4911,7 @@
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "electron-to-chromium": {
       "version": "1.3.695",
@@ -4929,7 +4958,7 @@
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
     "encoding": {
       "version": "0.1.13",
@@ -5128,7 +5157,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -5194,7 +5223,7 @@
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
     "eve-raphael": {
       "version": "0.5.0",
@@ -5204,7 +5233,7 @@
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
-      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
       "requires": {
         "d": "1",
         "es5-ext": "~0.10.14"
@@ -5698,12 +5727,12 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
       "requires": {
         "inherits": "^2.0.1",
         "readable-stream": "^2.0.0"
@@ -5720,7 +5749,7 @@
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "integrity": "sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "iferr": "^0.1.5",
@@ -6114,6 +6143,79 @@
       "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
       "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ=="
     },
+    "html-to-pdfmake": {
+      "version": "2.5.12",
+      "resolved": "https://registry.npmjs.org/html-to-pdfmake/-/html-to-pdfmake-2.5.12.tgz",
+      "integrity": "sha512-uljxRXCUp+ty7kqVEMi/CMWZ7pXKn/q0Ptg+74YAR0IRVRIUHaJ3O0Jo3f2apVR/LlJxd+rCa0+6BaLVDTIx0g=="
+    },
+    "html-to-text": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
+      "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
+      "requires": {
+        "@selderee/plugin-htmlparser2": "^0.11.0",
+        "deepmerge": "^4.3.1",
+        "dom-serializer": "^2.0.0",
+        "htmlparser2": "^8.0.2",
+        "selderee": "^0.11.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+          "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+        },
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+          "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.3"
+          }
+        },
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        },
+        "htmlparser2": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+          "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.3",
+            "domutils": "^3.0.1",
+            "entities": "^4.4.0"
+          }
+        }
+      }
+    },
     "html5sortable": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/html5sortable/-/html5sortable-0.11.1.tgz",
@@ -6156,7 +6258,7 @@
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg=="
     },
     "https-proxy-agent": {
       "version": "5.0.0",
@@ -6212,7 +6314,7 @@
     "iferr": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+      "integrity": "sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA=="
     },
     "ignore-loader": {
       "version": "0.1.2",
@@ -6241,7 +6343,7 @@
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "immutable": {
       "version": "3.7.6",
@@ -6650,7 +6752,7 @@
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw=="
     },
     "isarray": {
       "version": "1.0.0",
@@ -6855,6 +6957,11 @@
       "integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=",
       "dev": true
     },
+    "leac": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
+      "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg=="
+    },
     "less": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
@@ -7157,7 +7264,7 @@
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
     "memoize-one": {
       "version": "5.2.1",
@@ -7167,7 +7274,7 @@
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "integrity": "sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==",
       "requires": {
         "errno": "^0.1.3",
         "readable-stream": "^2.0.1"
@@ -7194,7 +7301,7 @@
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
     },
     "merge-source-map": {
       "version": "1.0.4",
@@ -7219,7 +7326,7 @@
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
     },
     "micromatch": {
       "version": "3.1.10",
@@ -7471,7 +7578,7 @@
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
       "requires": {
         "aproba": "^1.1.1",
         "copy-concurrently": "^1.0.0",
@@ -7831,7 +7938,7 @@
         "punycode": {
           "version": "1.4.1",
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
         },
         "stream-browserify": {
           "version": "2.0.2",
@@ -8218,7 +8325,7 @@
     "os-browserify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A=="
     },
     "os-homedir": {
       "version": "1.0.2",
@@ -8314,6 +8421,15 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parseley": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
+      "integrity": "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==",
+      "requires": {
+        "leac": "^0.6.0",
+        "peberminta": "^0.9.0"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -8358,7 +8474,7 @@
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
     "path-type": {
       "version": "4.0.0",
@@ -8410,6 +8526,11 @@
         }
       }
     },
+    "peberminta": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz",
+      "integrity": "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ=="
+    },
     "perfect-scrollbar": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
@@ -8804,7 +8925,7 @@
     "querystring-es3": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
+      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA=="
     },
     "quote-stream": {
       "version": "1.0.2",
@@ -9421,6 +9542,16 @@
         "raf": "^3.3.0"
       }
     },
+    "react-summernote": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-summernote/-/react-summernote-2.0.2.tgz",
+      "integrity": "sha512-wVceqtDtz7PaPN7Agh2I22TZY+H0FZpjZuNDQB+Rpx0zSZeeYIBcltI6//XY6vDmOy4AOHpltEBFbYHMyo+Ibw==",
+      "requires": {
+        "codemirror": "^5.26.0",
+        "prop-types": "^15.5.10",
+        "summernote": "^0.8.15"
+      }
+    },
     "react-to-print": {
       "version": "2.14.11",
       "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.11.tgz",
@@ -9982,7 +10113,7 @@
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "integrity": "sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==",
       "requires": {
         "aproba": "^1.1.1"
       }
@@ -10108,6 +10239,14 @@
         }
       }
     },
+    "selderee": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
+      "integrity": "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==",
+      "requires": {
+        "parseley": "^0.12.0"
+      }
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -10873,6 +11012,11 @@
       "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
       "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
     },
+    "summernote": {
+      "version": "0.8.20",
+      "resolved": "https://registry.npmjs.org/summernote/-/summernote-0.8.20.tgz",
+      "integrity": "sha512-W9RhjQjsn+b1s9xiJQgJbCiYGJaDAc9CdEqXo+D13WuStG8lCdtKaO5AiNiSSMJsQJN2EfGSwbBQt+SFE2B8Kw=="
+    },
     "supports-color": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -11201,7 +11345,7 @@
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+      "integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA=="
     },
     "to-fast-properties": {
       "version": "2.0.0",
@@ -11317,7 +11461,7 @@
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+      "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
@@ -11520,7 +11664,7 @@
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
     },
     "unset-value": {
       "version": "1.0.0",
@@ -11683,7 +11827,7 @@
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
       "version": "3.4.0",
@@ -11714,7 +11858,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "verror": {
       "version": "1.10.0",

package.json

@@ -60,6 +60,8 @@
     "get-size": "2.0.3",
     "history": "4.10.1",
     "html-to-draftjs": "^1.5.0",
+    "html-to-pdfmake": "^2.5.12",
+    "html-to-text": "^9.0.5",
     "html5sortable": "0.11.1",
     "ika.jvectormap": "themicon/ika.jvectormap",
     "jqcloud2": "2.0.3",
@@ -109,6 +111,7 @@
     "react-select": "^3.0.4",
     "react-signature-canvas": "^1.0.6",
     "react-sticky": "^6.0.3",
+    "react-summernote": "^2.0.2",
     "react-to-print": "^2.14.11",
     "react-toastify": "8.2.0",
     "react-transition-group": "4.2.2",
@@ -138,4 +141,4 @@
     "node-sass": "4.14.1",
     "url-loader": "1.1.2"
   }
-}
+}

pages/app/pemantauan-perbaikan/index.js

@@ -17,7 +17,7 @@ class PemantauanPerbaikan extends Component {
 
 	componentDidMount = async () => {
 		const { token } = this.props;
-		const sanksi = await getSanksi(token, { perbaikan: true });
+		const sanksi = await getSanksi(token, { perbaikan: true, aktif:true });
 		this.setState({ sanksi });
 	};
 

pages/app/perpanjangan-sanksi/detail.js

@@ -82,7 +82,7 @@ class Detail extends Component {
 					{AllCatatan?.length ? (
 						<Row>
 							<Col>
-								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/newfile" editFilePage="/app/perpanjangan-sanksi/editfile" readOnly="/app/perpanjangan-sanksi/readOnly" listData={AllCatatan} />
+								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/new_catatan" editFilePage="/app/perpanjangan-sanksi/edit_catatan" readOnly="/app/perpanjangan-sanksi/readOnly_catatan" listData={AllCatatan} />
 							</Col>
 						</Row>
 					)
@@ -90,7 +90,7 @@ class Detail extends Component {
 						(
 							<Row>
 								<Col>
-									<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/newfile" editFilePage="/app/perpanjangan-sanksi/editfile" readOnly="/app/perpanjangan-sanksi/readOnly" listData={AllCatatan} />
+									<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/new_catatan" editFilePage="/app/perpanjangan-sanksi/edit_catatan" readOnly="/app/perpanjangan-sanksi/readOnly_catatan" listData={AllCatatan} />
 								</Col>
 							</Row>
 						)}

pages/app/perpanjangan-sanksi/edit_catatan.js

@@ -0,0 +1,479 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
+// import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+// import 'draft-js/dist/Draft.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import draftToHtml from 'draftjs-to-html';
+import pdfMake from "pdfmake/build/pdfmake";
+import StateToPdfMake from "draft-js-export-pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, getOneCatatan, updateCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import { ENV } from '../../../env.js';
+import CopyToClipboard from "react-copy-to-clipboard";
+import ReactToPrint from "react-to-print";
+import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import htmlToPdfmake from "html-to-pdfmake"
+// import htmlToDraft from 'html-to-draftjs';
+import SummerNote from "../../../components/Extras/summernote";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+import { getOneSanksi } from "@/actions/sanksi";
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tanggal: "",
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "  ",
+            rekomendasi: "  ",
+            isi: [
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: "",
+                },
+            ],
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        // const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = getCatatan.data?.isi.pt;
+        const catatan = getCatatan.data
+        const judul = getCatatan.data.judul
+
+        const tempat=catatan.isi.tempat
+        const setTanggal=catatan.isi.setTanggal
+        const isi=catatan.isi.isi
+        const tanggal=catatan.isi.tanggal
+        const isEditTanggal=catatan.isi.isEditTanggal
+        const isEditTempat=catatan.isi.isEditTempat
+        const simpulan=catatan.isi.simpulan
+        const rekomendasi=catatan.isi.rekomendasi
+        
+        this.setState({ isi,catatan, judul, pt ,tanggal, tempat, isEditTanggal, isEditTempat, simpulan, rekomendasi,setTanggal});
+
+    }
+
+
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "Perpanjangan Sanksi"
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+            }
+        }
+
+    };
+
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+    isEditTanggal = () => {
+        // this.state.isEditTanggal = !this.state.isEditTanggal
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        })
+    }
+
+    isEditTempat = () => {
+        this.setState({
+            isEditTempat: !this.state.isEditTempat,
+        })
+    }
+    handleAspek = (evt, id, field) => {
+        const newValue = evt.target.value || evt.target.innerHTML;
+
+        this.setState(prevState => ({
+            isi: prevState.isi.map((item, index) =>
+                index === id
+                    ? { ...item, [field]: newValue }
+                    : item
+            )
+        }));
+
+    };
+    addRow = () => {
+        this.setState(prevState => ({
+            isi: [
+                ...prevState.isi,
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                }
+            ]
+        }));
+    };
+    setDataCatatan = (data) => {
+        this.setState({ dataCatatan: data });
+    }
+
+    render() {
+        const { catatan, pt, isEditTanggal,tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-8">
+
+                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} value={this.state.judul} />
+                                </div>
+                                <div className="col-md-3">
+                                    {/* <span className=" d-inline-flex">
+                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
+                                            <span className="font-color-white">
+                                                Print Notulensi
+                                            </span>
+                                        </Button>
+                                    </span> */}
+                                    <span className=" d-inline-flex">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span>
+                                                    <Button color className="btn-login">
+                                                        <span className="font-color-white">
+                                                            Print Dokumen
+                                                        </span>
+                                                    </Button>
+                                                </span>
+                                            }}
+                                            content={() => this.componentRef}
+                                        />
+                                    </span>
+                                </div>
+                            </FormGroup>
+                            <div style={{ display: "none" }}>
+                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                            </div>
+                            <div className='page  py-5 m-0 mb-3'>
+                                <div className='BA-Header'>
+                                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                                    <h4 >LAPORAN HASIL VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</h4>
+                                    {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
+                                </div>
+                                <div className='BA-body px-5 pt-3 '>
+                                    <p>
+                                        Pada hari ini
+                                        <span style={{ textIndent: "0rem" }}>
+                                            {isEditTanggal &&
+                                                <span style={{ textIndent: "0rem" }}>
+                                                    <Datetime
+                                                        timeFormat={false}
+                                                        inputProps={{ className: "form-control" }}
+                                                        value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
+                                                        onChange={(tanggal) => {
+                                                            this.setState({ tanggal, setTanggal: true })
+                                                        }}
+                                                        closeOnSelect={true}
+
+                                                    />
+                                                    <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>
+                                            }
+                                        </span>
+                                        {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).locale("id").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
+                                        {this.state.isEditTempat &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue={""}
+                                                    ref="inputTempat"
+                                                    onChange={() => {
+                                                        this.setState({ tempat: this.refs.inputTempat.value })
+                                                    }}
+                                                />
+                                                <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;{this.state?.tempat}
+                                            </span>
+                                            :
+                                            <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                                        }
+
+                                        ,
+                                        telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
+                                        
+                            <ol>
+                                {catatan?.daftar_kehadiran_peserta?.map((value) =>
+                                    <li>
+                                        {value.nama}
+                                        {/* <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                            onClick={() => {
+                                                this.setState({
+                                                    selectedPeserta: value._id
+                                                })
+                                                this.setModalRemovePeserta()
+                                            }} /> */}
+                                    </li>)}
+                            </ol> 
+                                    </p>
+                                    <div className='table-a my-4 pl-5 pr-5' >
+                                        <div className=' d-inline-block'>
+                                            <Button color="primary" className="mb-2 float-md-right" onClick={this.addRow}>Tambah Baris</Button>
+                                        </div>
+
+                                        <table className=' ml-auto mr-auto'>
+                                            <thead >
+                                                <tr>
+                                                    <th >NO</th>
+                                                    <th>ASPEK PERBAIKAN</th>
+                                                    <th >LAPORAN PERBAIKAN</th>
+                                                    <th >HASIL VERIFIKASI DAN VALIDASI</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {this.state.isi?.map((isi, index) => (
+                                                    <tr key={index}>
+                                                        <td>{index + 1}</td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Aspek_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Aspek_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Simpulan :</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={false}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+                                                />
+                                            </td>
+                                        </tr>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Rekomendasi :</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.rekomendasi}
+                                                    disabled={false}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                    }}
+                                                // tagName="span"
+                                                />
+                                            </td>
+                                        </tr>
+                                    </div>
+
+                                    <Row>
+                                <Col xl={{ size: 8, offset: 2 }}>
+                                    <div className="mt-5"  >
+                                        <div className='header-ttd signature-border pt-1 pb-1'>
+                                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
+                                        </div>
+                                        <div id="ttd">
+                                            {catatan
+                                                ? catatan.daftar_kehadiran_peserta?.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>
+                                </Col>
+                            </Row>
+                                </div>
+                            </div>
+                    
+
+
+                            <Row>
+                                <Col>
+                                    {ENV === "local" &&
+                                        <CopyToClipboard
+                                            text={`http://localhost:3000/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: true }}
+                                        >
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0  mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><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.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+                                    {ENV === "production" &&
+                                        <CopyToClipboard
+                                            text={`https://sidali.kemdikbud.go.id/signature/letter/${catatan?._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.CloseCopiedd()
+                                                    }} ><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.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+                                    {ENV === "development" &&
+                                        <CopyToClipboard
+                                            text={`https://dev.sidali.kemdikbud.go.id/signature/letter/${catatan?._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.CloseCopiedd()
+                                                    }} ><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.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+
+                                </Col>
+                                <Col>
+                                    <div>
+                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} >
+                                            <span className="font-color-white">
+                                                Simpan Catatan
+                                            </span>
+                                        </Button>
+                                    </div>
+
+                                </Col>
+                            </Row>
+
+                        </Card>
+                    </Col>
+
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(EditFile);

pages/app/perpanjangan-sanksi/editfile.js

@@ -23,28 +23,17 @@ import { ENV } from '../../../env.js';
 import CopyToClipboard from "react-copy-to-clipboard";
 import ReactToPrint from "react-to-print";
 import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import htmlToPdfmake from "html-to-pdfmake"
+// import htmlToDraft from 'html-to-draftjs';
+import SummerNote from "../../../components/Extras/summernote";
 
 
 
-
-
-
-// let blocksFromHTML;
-// let initialEditorContent;
-// if (typeof window !== 'undefined') {
-//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
-//     initialEditorContent = ContentState.createFromBlockArray(
-//         blocksFromHTML.contentBlocks,
-//         blocksFromHTML.entityMap
-//     );
-// }
-
-
 class EditFile extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            editorState: EditorState.createEmpty(),
+            editorState: null,
             copiedd: false,
             judul: "",
 
@@ -64,19 +53,22 @@ class EditFile extends Component {
         const catatan = getCatatan.data
         const judul = catatan.judul
         this.setState({ catatan, judul });
-        let blocksFromHTML;
-        let editorState;
-        if (typeof window !== 'undefined') {
-            const isi = catatan.isi
-            blocksFromHTML = convertFromHTML((isi));
-            editorState = ContentState.createFromBlockArray(
-                blocksFromHTML.contentBlocks,
-                blocksFromHTML.entityMap
-            );
-        }
+        // let blocksFromHTML;
+        // let editorState;
+        // if (typeof window !== 'undefined') {
+        //     const htmlToDraft = require('html-to-draftjs').default;
+        //     const isi = catatan.isi
+        //     blocksFromHTML = htmlToDraft((isi));
+        //     console.log(blocksFromHTML)
+        //     editorState = ContentState.createFromBlockArray(
+        //         blocksFromHTML.contentBlocks,
+        //         blocksFromHTML.entityMap
+        //     );
+        // }
 
         this.setState({
-            editorState: EditorState.createWithContent(editorState)
+            // editorState: EditorState.createWithContent(editorState)
+            editorState:catatan?.isi
         });
     }
 
@@ -101,11 +93,11 @@ class EditFile extends Component {
             const _csrf = getToken.token;
             const { token, query } = this.props;
             const { id } = query;
-            const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
             const toastid = toast.loading("Please wait...");
             const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
                 "judul": this.state.judul,
-                "isi": isi,
+                "isi": this.state.editorState,
                 "catatan_id": id,
                 "menu": "Perpanjangan Sanksi"
             }, _csrf);
@@ -119,10 +111,10 @@ class EditFile extends Component {
 
     };
     handleGeneratePDF = () => {
-        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
-        const stateToPdfMake = new StateToPdfMake(rawContent);
-
-        pdfMake.createPdf(stateToPdfMake.generate()).download();
+        // const htmlContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
+        const htmlToPrint = htmlToPdfmake(this.state.editorState)
+        const siapPrint = {content : htmlToPrint}
+        pdfMake.createPdf(siapPrint).download();
     };
     setHandleJudul = (e) => {
         this.setState({ judul: e.target.value });
@@ -142,6 +134,7 @@ class EditFile extends Component {
 
     render() {
         const { editorState, catatan } = this.state;
+      console.log(editorState)
         return (
             <ContentWrapper>
                 <Row>
@@ -180,7 +173,7 @@ class EditFile extends Component {
                             <div style={{ display: "none" }}>
                                 <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
                             </div>
-                            <Editor
+                            {/* <Editor
                                 editorState={editorState}
                                 // wrapperClassName="demo-wrapper"
                                 // editorClassName="demo-editor"
@@ -188,7 +181,76 @@ class EditFile extends Component {
                                 wrapperClassName="wysiwig-editor-wrapper"
                                 editorClassName="form-control"
                                 onEditorStateChange={this.onEditorStateChange}
+                                toolbar={{
+                                    image: {
+                                      previewImage: true,
+                                      uploadCallback: (file) => {
+                                        return new Promise((resolve, reject) => {
+                                          const reader = new FileReader();
+                                          reader.onloadend = () => {
+                                            resolve({
+                                              data: {
+                                                url: reader.result,
+                                              },
+                                            });
+                                          };
+                        
+                                          reader.onerror = (reason) => reject(reason);
+                        
+                                          reader.readAsDataURL(file);
+                                        });
+                                      },
+                                      alt: { present: false, mandatory: false },
+                                      inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+
+                                    },
+                                  }}
+                            /> */}
+                                  <SummerNote
+                                id='editor1'
+                                destroy={false}
+                                value={editorState}
+                                options={{
+                                    lang: "eng",
+                                    height: 800,
+                                    dialogsInBody: true,
+                                    toolbar: [
+                                        ["style", ["style", "customStyle", "copyFormatting"]],
+                                        ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
+                                        ["fontname", ["fontname", "customFont"]],
+                                        ["fontsize", ["fontsizeInput"]],
+                                        ['color', ['forecolor', 'backcolor']],
+                                        ["para", ["ul", "ol", "listStyles", "paragraph"]],
+                                        ["table", ["table", "jMerge", "jBackcolor", "jBorderColor", "jAlign", "jTableInfo", "jWidthHeightReset"]],
+                                        ["tableRow", ["jRowHeight"]],
+                                        ["tableCol", ["jColWidth"]],
+                                        ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
+                                        ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
+                                        ["comment", ["editPopover", "removePopover"]],
+                                        ["view", ["fullscreen", "codeview", "help"]],
+                                    ],
+
+                                    canViewClasslist: true,
+                                    tableClassName: 'jtable table-bordered color-black',
+                                    customFont: {
+                                      fontNames: [
+                                        'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',
+                                        { name: '新細明體', value: '新細明體, serif' },
+                                        { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
+                                        { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
+                                      ]
+                                    },
+                                }}
+                                onChange={(editorState)=>{
+                                    this.setState({
+                                        editorState,
+                                    });
+                                }}
+                                // onImageUpload={this.onImageUpload}
+                                // ref={this.editor}
+
                             />
+                            
                             <br />
                             <Row>
                                 <Col xl={{ size: 8, offset: 2 }}>

pages/app/perpanjangan-sanksi/new_catatan.js

@@ -0,0 +1,316 @@
+import React, { useRef, Component } from 'react';
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter, FormGroup } from "reactstrap";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import id from 'date-fns/locale/id';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { getAutoSave } from "@/actions/autosave";
+import ContentEditable from 'react-contenteditable'
+import { ToastContainer, toast } from "react-toastify";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Swal from 'sweetalert2';
+import Datetime from "react-datetime";
+import { getOneSanksi } from "@/actions/sanksi";
+import { addCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+class Catatan extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            judul:"",
+            tanggal: "",
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "",
+            rekomendasi: "",
+            isi: [
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                },
+            ],
+        };
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const idSanksi = query.id;
+        const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = sanksi.data?.laporan.pt;
+        this.setState({ sanksi, pt });
+
+    };
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await addCatatan(token, id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "menu": "Perpanjangan Sanksi"
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${id}`);
+                // this.setState({ simpan: true })
+            }
+        }
+
+    };
+
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value }, this.setDataCatatan);
+    };
+    isEditTanggal = () => {
+        // this.state.isEditTanggal = !this.state.isEditTanggal
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        })
+    }
+
+    isEditTempat = () => {
+        this.setState({
+            isEditTempat: !this.state.isEditTempat,
+        })
+    }
+    handleAspek = (evt, id, field) => {
+        const newValue = evt.target.value || evt.target.innerHTML;
+
+        this.setState(prevState => ({
+            isi: prevState.isi.map((item, index) =>
+                index === id
+                    ? { ...item, [field]: newValue }
+                    : item
+            )
+        }));
+
+    };
+    addRow = () => {
+        this.setState(prevState => ({
+            isi: [
+                ...prevState.isi,
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                }
+            ]
+        }));
+    };
+    setDataCatatan = (data) => {
+        this.setState({ dataCatatan: data });
+    }
+    render() {
+        const { pt } = this.state
+        const { tanggal, isEditTanggal } = this.state
+        console.log(this.state.simpulan)
+
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-11">
+
+                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} />
+                                </div>
+                            </FormGroup>
+                            <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 VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</h4>
+                                    {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
+                                </div>
+                                <div className='BA-body px-5 pt-3'>
+                                    <p>
+                                        Pada hari ini
+                                        <span style={{ textIndent: "0rem" }}>
+                                            {isEditTanggal &&
+                                                <span style={{ textIndent: "0rem" }}>
+                                                    <Datetime
+                                                        timeFormat={false}
+                                                        inputProps={{ className: "form-control" }}
+                                                        value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
+                                                        onChange={(tanggal) => {
+                                                            this.setState({ tanggal, setTanggal: true })
+                                                        }}
+                                                        closeOnSelect={true}
+
+                                                    />
+                                                    <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>
+                                            }
+                                        </span>
+                                        {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).locale("id").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
+                                        {this.state.isEditTempat &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue={""}
+                                                    ref="inputTempat"
+                                                    onChange={() => {
+                                                        this.setState({ tempat: this.refs.inputTempat.value })
+                                                    }}
+                                                />
+                                                <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;{this.state?.tempat}
+                                            </span>
+                                            :
+                                            <span onClick={this.isEditTempat}><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                                        }
+
+                                        ,
+                                        telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
+                                        {/* 
+                            <ol>
+                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) =>
+                                    <li>
+                                        {value.nama}
+                                        <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                            onClick={() => {
+                                                this.setState({
+                                                    selectedPeserta: value._id
+                                                })
+                                                this.setModalRemovePeserta()
+                                            }} />
+                                    </li>)}
+                            </ol> */}
+                                    </p>
+                                    <div className='table-a my-4 pl-5 pr-5' >
+                                        <div className=' d-inline-block'>
+                                            <Button color="primary" className="mb-2 float-md-right" onClick={this.addRow}>Tambah Baris</Button>
+                                        </div>
+
+                                        <table className=' ml-auto mr-auto'>
+                                            <thead >
+                                                <tr>
+                                                    <th >NO</th>
+                                                    <th>ASPEK PERBAIKAN</th>
+                                                    <th >LAPORAN PERBAIKAN</th>
+                                                    <th >HASIL VERIFIKASI DAN VALIDASI</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {this.state.isi.map((isi, index) => (
+                                                    <tr key={index}>
+                                                        <td>{index + 1}</td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Aspek_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Aspek_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Simpulan&nbsp;:</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={false}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+                                                    tagName="span"
+
+                                                />
+                                            </td>
+                                        </tr>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Rekomendasi&nbsp;:</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.rekomendasi}
+                                                    disabled={false}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                        console.log(e)
+                                                    }}
+                                                tagName="span"
+                                                />
+                                            </td>
+                                        </tr>
+                                    </div>
+
+                                    <p>
+
+                                    </p>
+                                </div>
+                            </div>
+                        </Card>
+                    </Col>
+                    <Col>
+                        <footer>
+                            <Button color className="btn-login float-right" onClick={this.handelSimpan} disabled={this.state.judul === ""}>
+                                <span className="font-color-white">
+                                    Simpan Catatan
+                                </span>
+                            </Button>
+                        </footer>
+                    </Col>
+
+                </Row>
+
+            </ContentWrapper>
+        )
+    }
+
+}
+
+export default Catatan
+

pages/app/perpanjangan-sanksi/newfile.js

@@ -19,29 +19,22 @@ import { toast } from "react-toastify";
 import { addCatatan } from "../../../actions/catatan";
 import { getCsrf } from "../../../actions/security";
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import SummerNote from "../../../components/Extras/summernote";
 
 
 
 
-// let blocksFromHTML;
-// let initialEditorContent;
-// if (typeof window !== 'undefined') {
-//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
-//     initialEditorContent = ContentState.createFromBlockArray(
-//         blocksFromHTML.contentBlocks,
-//         blocksFromHTML.entityMap
-//     );
-// }
-
 
 class NewFile extends Component {
     constructor(props) {
         super(props);
+        this.editor = React.createRef();
         this.state = {
-            editorState: EditorState.createEmpty(),
+            editorState:"<p>dfgergergr</p><p>hgrfhfghf</p><p>trhrhrt</p>" ,
             copiedd: false,
             judul: "",
             simpan: false,
+            menu: "",
         };
     }
 
@@ -54,27 +47,13 @@ class NewFile extends Component {
     componentDidMount() {
         const { query } = this.props;
         const { id } = query;
-        // let blocksFromHTML;
-        // let editorState;
-        // if (typeof window !== 'undefined') {
-        //     blocksFromHTML = convertFromHTML(localStorage.getItem("editorState"));
-        //     editorState = ContentState.createFromBlockArray(
-        //         blocksFromHTML.contentBlocks,
-        //         blocksFromHTML.entityMap
-        //     );
-        // }
-
-        // this.setState({
-        //     editorState: EditorState.createWithContent(editorState)
-        // });
     }
 
-    onEditorStateChange = (editorState) => {
-        this.setState({
-            editorState,
-        });
-        // localStorage.setItem("editorState", draftToHtml(convertToRaw(editorState.getCurrentContent())))
-    };
+    // onEditorStateChange = (editorState) => {
+    //     this.setState({
+    //         editorState,
+    //     });
+    // };
 
     handelSimpan = async (data) => {
         if (this.props?.user?.role.id === 2024) {
@@ -90,11 +69,11 @@ class NewFile extends Component {
             const _csrf = getToken.token;
             const { token, query } = this.props;
             const { id } = query;
-            const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
             const toastid = toast.loading("Please wait...");
             const added = await addCatatan(token, id, {
                 "judul": this.state.judul,
-                "isi": isi,
+                "isi": this.state.editorState,
                 "menu": "Perpanjangan Sanksi"
             }, _csrf);
             if (!added) {
@@ -131,10 +110,36 @@ class NewFile extends Component {
         copiedd: !this.state.copiedd
     })
 
+    // convertFileToBase64(file) {
+    //     return new Promise((resolve, reject) => {
+    //         const reader = new FileReader()
+    //         reader.readAsDataURL(file)
+    //         reader.onload = () => resolve(reader.result)
+    //         reader.onerror = () => reject(console.log('FileReader Error: ', error))
+    //     })
+
+    // }
+    // onImageUpload = (f, cb, e) => {
+
+
+    //     let file = f
+    //     if (file.length) {
+    //         file = f[0]
+    //     }
+    //     this.convertFileToBase64(file).then(src => {
+    //         const $image = $('<img>').attr('src', src).wrap('div')
+    //         this.editor.current.insertNode($image[0])
+    //     })
+    // }
+
     render() {
         const { editorState } = this.state;
         return (
             <ContentWrapper>
+                <meta charset="UTF-8" />
+                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+                <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet" />
+                <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
                 <Row>
                     <Col lg={12}>
                         <Card body className="card-default">
@@ -145,17 +150,53 @@ class NewFile extends Component {
                                     <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} />
                                 </div>
                             </FormGroup>
-                            <Editor
-                                editorState={editorState}
-                                // wrapperClassName="demo-wrapper"
-                                // editorClassName="demo-editor"
-                                editorStyle={{ height: 500 }}
-                                wrapperClassName="wysiwig-editor-wrapper"
-                                editorClassName="form-control"
-                                onEditorStateChange={this.onEditorStateChange}
+                            
+                            <SummerNote
+                                id='editor1'
+                                destroy={false}
+                                // value={editorState}
+                                options={{
+                                    lang: "eng",
+                                    height: 800,
+                                    dialogsInBody: true,
+                                    toolbar: [
+                                        ["style", ["style", "customStyle", "copyFormatting"]],
+                                        ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
+                                        ["fontname", ["fontname", "customFont"]],
+                                        ["fontsize", ["fontsizeInput"]],
+                                        ['color', ['forecolor', 'backcolor']],
+                                        ["para", ["ul", "ol", "listStyles", "paragraph"]],
+                                        ["table", ["table", "jMerge", "jBackcolor", "jBorderColor", "jAlign", "jTableInfo", "jWidthHeightReset"]],
+                                        ["tableRow", ["jRowHeight"]],
+                                        ["tableCol", ["jColWidth"]],
+                                        ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
+                                        ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
+                                        ["comment", ["editPopover", "removePopover"]],
+                                        // ["view", ["fullscreen", "codeview", "help"]],
+                                    ],
+
+                                    canViewClasslist: true,
+                                    tableClassName: 'jtable table-bordered color-black',
+                                    customFont: {
+                                      fontNames: [
+                                        'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',
+                                        { name: '新細明體', value: '新細明體, serif' },
+                                        { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
+                                        { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
+                                      ]
+                                    },
+                                }}
+                                onChange={(editorState)=>{
+                                    this.setState({
+                                        editorState,
+                                    });
+                                }}
+                                // onImageUpload={this.onImageUpload}
+                                // ref={this.editor}
+
                             />
                             <br />
-                            
+
                             <Row>
                                 <Col>
                                     {this.state.simpan === true ?
@@ -188,13 +229,12 @@ class NewFile extends Component {
                                 </Col>
                                 <Col>
                                     <div>
-                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} >
+                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} disabled={this.state.judul === ""}>
                                             <span className="font-color-white">
                                                 Simpan Catatan
                                             </span>
                                         </Button>
                                     </div>
-
                                 </Col>
                             </Row>
 

pages/app/perpanjangan-sanksi/newfile_new.js

@@ -0,0 +1,325 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
+// import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+// import 'draft-js/dist/Draft.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+  () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+  { ssr: false })
+import draftToHtml from 'draftjs-to-html';
+import pdfMake from "pdfmake/build/pdfmake";
+import StateToPdfMake from "draft-js-export-pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import SummerNote from "../../../components/Extras/summernote";
+// import ReactSummernote from 'react-summernote';
+// import SummerNote from "./SummerNote";
+// import rtf2html from "../../../components/Main/trf2html";
+
+// SummerNote.ImportCode();
+
+
+
+
+class NewFile extends Component {
+  constructor(props) {
+    
+    super(props);
+    this.editor = React.createRef();
+    this.state = {
+      // editorState: EditorState.createEmpty(),
+      copiedd: false,
+      judul: "",
+      simpan: false,
+      menu: "",
+
+    };
+  }
+
+  static getInitialProps = async ({ query }) => {
+    return { query };
+
+  };
+
+
+  componentDidMount() {
+    const { query } = this.props;
+    const { id } = query;
+  }
+
+  onEditorStateChange = (editorState) => {
+    this.setState({
+      editorState,
+    });
+  };
+
+  handelSimpan = async (data) => {
+    if (this.props?.user?.role.id === 2024) {
+      Swal.fire({
+        icon: 'error',
+        title: 'Oops...',
+        html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+        confirmButtonColor: "#3e3a8e",
+        confirmButtonText: 'Oke'
+      })
+    } else {
+      const getToken = await getCsrf();
+      const _csrf = getToken.token;
+      const { token, query } = this.props;
+      const { id } = query;
+      // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+      const toastid = toast.loading("Please wait...");
+      const added = await addCatatan(token, id, {
+        "judul": this.state.judul,
+        "isi": this.state.editorState,
+        "menu": "Perpanjangan Sanksi"
+      }, _csrf);
+      if (!added) {
+        toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+      } else {
+        toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+        Router.push(`/app/perpanjangan-sanksi/detail?id=${id}`);
+        // this.setState({ simpan: true })
+      }
+    }
+
+  };
+  handleGeneratePDF = () => {
+    const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
+    console.log(rawContent)
+    const stateToPdfMake = new StateToPdfMake(rawContent);
+    console.log(stateToPdfMake.generate());
+
+    pdfMake.createPdf(stateToPdfMake.generate()).download();
+  };
+  setHandleJudul = (e) => {
+    this.setState({ judul: e.target.value });
+  };
+  CloseCopiedd = () => {
+
+    setTimeout(() => {
+      this.setState({
+        copiedd: !this.state.copiedd
+      });
+    }, 1000);
+  }
+
+  Copiedd = () => this.setState({
+    copiedd: !this.state.copiedd
+  })
+  convertFileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => resolve(reader.result)
+      reader.onerror = () => reject(console.log('FileReader Error: ', error))
+    })
+
+  }
+
+  onImageUpload = (f, cb, e) => {
+    let file = f
+    if (file.length) {
+      file = f[0]
+    }
+    this.convertFileToBase64(file).then(src => {
+      const $image = $('<img>').attr('src', src).wrap('div')
+      this.editor.current.insertNode($image[0])
+    })
+  }
+  onChange(e) {
+    //$('span[style*="mso-ignore"]').remove()
+    //let img = $('img[src*="file://"]').attr('loading',true);
+    // console.log(e);
+  }
+  onImagePasteFromWord($imgs) {
+    console.log("onImagePasteFromWord", $imgs);
+  }
+  onPaste(e) {
+    //console.log('--------- onPaste --------', e)
+
+    let items = e.originalEvent.clipboardData.items;
+    let files = e.originalEvent.clipboardData.files;
+
+    for (let i = 0; i < files.length; i++) {
+      return e.preventDefault();
+    }
+
+    //console.log('---------- items -------------', items)
+    //console.log('---------- files -------------', files)
+
+    for (let i = 0; i < items.length; i++) {
+      //console.log('---------- item -------------', items[i])
+      if (items[i].type.indexOf("rtf") > -1) {
+        items[i].getAsString(function (rtf) {
+          // const doc = rtf2html(rtf);
+          //const meta = doc.metadata();
+          //console.log(doc)
+        //   doc
+        //     .render()
+        //     .then(function (htmlElements) {
+        //       var imgs = [];
+        //       //console.log('meta', meta);
+        //       //console.log('htmlElements', htmlElements);
+        //       htmlElements.forEach($html => {
+        //         $html.find('img[src*="data:image"]').each((i, el) => {
+        //           imgs.push(el);
+        //         });
+        //         //$('#test').append($html)
+        //       });
+        //       //console.log(imgs)
+        //       setTimeout(() => {
+        //         //console.log(imgs)
+        //         $("img[loading]").each((i, el) => {
+        //           if (imgs[i]) el.src = imgs[i].src;
+        //         });
+        //       }, 0);
+        //     })
+        //     .catch(error => console.error(error));
+        });
+      }
+    }
+
+  }
+
+  render() {
+    const { editorState } = this.state;
+
+    return (
+      <ContentWrapper>
+                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+        <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet" />
+        <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
+        <Row>
+          <Col lg={12}>
+            <Card body className="card-default">
+              <FormGroup row>
+                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                <div className="col-md-11">
+
+                  <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} />
+                </div>
+              </FormGroup>
+
+              {/* <SummerNote
+                id='editor'
+                destroy={false}
+                // value={htmldata}
+                options={{
+                  // lang: "zh-TW",
+                  lang: "eng",
+                  height: 800,
+                  dialogsInBody: true,
+                  toolbar: [
+                    ["style", ["style", "customStyle", "copyFormatting"]],
+                    ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
+                    ["fontname", ["fontname", "customFont"]],
+                    ["fontsize", ["fontsizeInput"]],
+                    ['color', ['forecolor', 'backcolor']],
+                    ["para", ["ul", "ol", "listStyles", "paragraph"]],
+                    ["table", ["jTable"]],
+                    ["tableRow", ["jRowHeight"]],
+                    ["tableCol", ["jColWidth"]],
+                    ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
+                    ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
+                    ["comment", ["editPopover", "removePopover"]],
+                    ["view", ["fullscreen", "codeview", "help"]],
+                  ],
+                  canViewClasslist: true,
+                  tableClassName: 'jtable table-bordered',
+                  customFont: {
+                    fontNames: [
+                      'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',
+                      { name: '新細明體', value: '新細明體, serif' },
+                      { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
+                      { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
+                    ]
+                  },
+                }}
+                onChange={this.onEditorStateChange}
+                onImageUpload={this.onImageUpload}
+                onImagePasteFromWord={this.onImagePasteFromWord}
+                onPaste={this.onPaste}
+                onInit={e => console.log(`Using jquery version ${$().jquery}`)}
+                ref={this.editor}
+              /> */}
+              <SummerNote options={{
+          height: 350,
+          dialogsInBody: true,
+          toolbar: [
+            ["style", ["style", "customStyle", "copyFormatting"]],
+            ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
+            ["fontname", ["fontname", "customFont"]],
+            ["fontsize", ["fontsizeInput"]],
+            ['color', ['forecolor', 'backcolor']],
+            ["para", ["ul", "ol", "listStyles", "paragraph"]],
+            ["table", ["table", "jMerge", "jBackcolor", "jBorderColor", "jAlign", "jTableInfo", "jWidthHeightReset"]],
+            ["tableRow", ["jRowHeight"]],
+            ["tableCol", ["jColWidth"]],
+            ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
+            ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
+            ["comment", ["editPopover", "removePopover"]],
+            ["view", ["fullscreen", "codeview", "help"]],
+          ],
+        }}/>
+              <br />
+
+              <Row>
+                <Col>
+                  {this.state.simpan === true ?
+                    (
+                      <div>
+                        <span className="btn-radius">
+                          <Button color id="Popover1" className="ml-0 mb-2 btn-v1-outline-purple" onClick={() => {
+                            this.CloseCopiedd()
+                          }} ><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.copiedd} target="Popover1" toggle={this.Copiedd}>
+                          <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                        </Popover>
+                      </div>
+                    ) :
+                    (
+                      <div>
+                        <span className=" text-danger">
+                          *Klik tombol &#39;Simpan&#39; untuk mendapatkan link presensi
+                        </span>
+
+                      </div>
+                    )
+
+                  }
+
+                </Col>
+                <Col>
+                  <div>
+                    <Button color className="btn-login float-right" onClick={this.handelSimpan} disabled={this.state.judul === ""}>
+                      <span className="font-color-white">
+                        Simpan Catatan
+                      </span>
+                    </Button>
+                  </div>
+                </Col>
+              </Row>
+
+            </Card>
+          </Col>
+
+        </Row>
+      </ContentWrapper>
+    );
+  }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(NewFile);

pages/app/perpanjangan-sanksi/readOnly.js

@@ -23,29 +23,17 @@ import { ENV } from '../../../env.js';
 import CopyToClipboard from "react-copy-to-clipboard";
 import ReactToPrint from "react-to-print";
 import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import htmlToPdfmake from "html-to-pdfmake"
+import SummerNote from "../../../components/Extras/summernote";
 
 
 
-
-
-
-
-// let blocksFromHTML;
-// let initialEditorContent;
-// if (typeof window !== 'undefined') {
-//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
-//     initialEditorContent = ContentState.createFromBlockArray(
-//         blocksFromHTML.contentBlocks,
-//         blocksFromHTML.entityMap
-//     );
-// }
-
-
 class EditFile extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            editorState: EditorState.createEmpty(),
+            // editorState: EditorState.createEmpty(),
+            editorState:'',
             copiedd: false,
             judul: "",
 
@@ -68,8 +56,9 @@ class EditFile extends Component {
         let blocksFromHTML;
         let editorState;
         if (typeof window !== 'undefined') {
+            const htmlToDraft = require('html-to-draftjs').default;
             const isi = catatan.isi
-            blocksFromHTML = convertFromHTML((isi));
+            blocksFromHTML = htmlToDraft((isi));
             editorState = ContentState.createFromBlockArray(
                 blocksFromHTML.contentBlocks,
                 blocksFromHTML.entityMap
@@ -119,10 +108,10 @@ class EditFile extends Component {
 
     };
     handleGeneratePDF = () => {
-        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
-        const stateToPdfMake = new StateToPdfMake(rawContent);
-
-        pdfMake.createPdf(stateToPdfMake.generate()).download();
+        const htmlContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
+        const htmlToPrint = htmlToPdfmake(htmlContent)
+        const siapPrint = {content : htmlToPrint}
+        pdfMake.createPdf(siapPrint).download();
     };
     setHandleJudul = (e) => {
         this.setState({ judul: e.target.value });
@@ -190,7 +179,75 @@ class EditFile extends Component {
                                 wrapperClassName="wysiwig-editor-wrapper"
                                 editorClassName="form-control"
                                 onEditorStateChange={this.onEditorStateChange}
+                                toolbar={{
+                                    image: {
+                                      previewImage: true,
+                                      uploadCallback: (file) => {
+                                        return new Promise((resolve, reject) => {
+                                          const reader = new FileReader();
+                                          reader.onloadend = () => {
+                                            resolve({
+                                              data: {
+                                                url: reader.result,
+                                              },
+                                            });
+                                          };
+                        
+                                          reader.onerror = (reason) => reject(reason);
+                        
+                                          reader.readAsDataURL(file);
+                                        });
+                                      },
+                                      alt: { present: false, mandatory: false },
+                                      inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+
+                                    },
+                                  }}
                             />
+                                         {/* <SummerNote
+                                id='editor1'
+                                destroy={false}
+                                value={editorState?editorState:editorState}
+                                options={{
+                                    lang: "eng",
+                                    height: 800,
+                                    dialogsInBody: true,
+                                    toolbar: [
+                                        ["style", ["style", "customStyle", "copyFormatting"]],
+                                        ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
+                                        ["fontname", ["fontname", "customFont"]],
+                                        ["fontsize", ["fontsizeInput"]],
+                                        ['color', ['forecolor', 'backcolor']],
+                                        ["para", ["ul", "ol", "listStyles", "paragraph"]],
+                                        ["table", ["table", "jMerge", "jBackcolor", "jBorderColor", "jAlign", "jTableInfo", "jWidthHeightReset"]],
+                                        ["tableRow", ["jRowHeight"]],
+                                        ["tableCol", ["jColWidth"]],
+                                        ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
+                                        ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
+                                        ["comment", ["editPopover", "removePopover"]],
+                                        ["view", ["fullscreen", "codeview", "help"]],
+                                    ],
+
+                                    canViewClasslist: true,
+                                    tableClassName: 'jtable table-bordered color-black',
+                                    customFont: {
+                                      fontNames: [
+                                        'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',
+                                        { name: '新細明體', value: '新細明體, serif' },
+                                        { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
+                                        { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
+                                      ]
+                                    },
+                                }}
+                                onChange={(editorState)=>{
+                                    this.setState({
+                                        editorState,
+                                    });
+                                }}
+                                // onImageUpload={this.onImageUpload}
+                                // ref={this.editor}
+
+                            /> */}
                             <br />
                             <Row>
                                 <Col xl={{ size: 8, offset: 2 }}>

pages/app/perpanjangan-sanksi/readOnly_catatan.js

@@ -0,0 +1,415 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
+// import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+// import 'draft-js/dist/Draft.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import draftToHtml from 'draftjs-to-html';
+import pdfMake from "pdfmake/build/pdfmake";
+import StateToPdfMake from "draft-js-export-pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, getOneCatatan, updateCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import { ENV } from '../../../env.js';
+import CopyToClipboard from "react-copy-to-clipboard";
+import ReactToPrint from "react-to-print";
+import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import htmlToPdfmake from "html-to-pdfmake"
+// import htmlToDraft from 'html-to-draftjs';
+import SummerNote from "../../../components/Extras/summernote";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+import { getOneSanksi } from "@/actions/sanksi";
+import router from "next/router";
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tanggal: "",
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "  ",
+            rekomendasi: "  ",
+            isi: [
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: "",
+                },
+            ],
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        // const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = getCatatan.data?.isi.pt;
+        const catatan = getCatatan.data
+        const judul = getCatatan.data.judul
+
+        const tempat = catatan.isi.tempat
+        const setTanggal = catatan.isi.setTanggal
+        const isi = catatan.isi.isi
+        const tanggal = catatan.isi.tanggal
+        const isEditTanggal = catatan.isi.isEditTanggal
+        const isEditTempat = catatan.isi.isEditTempat
+        const simpulan = catatan.isi.simpulan
+        const rekomendasi = catatan.isi.rekomendasi
+
+        this.setState({ isi, catatan, judul, pt, tanggal, tempat, isEditTanggal, isEditTempat, simpulan, rekomendasi, setTanggal });
+    }
+
+
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "Perpanjangan Sanksi"
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+            }
+        }
+
+    };
+
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+    isEditTanggal = () => {
+        // this.state.isEditTanggal = !this.state.isEditTanggal
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        })
+    }
+
+    isEditTempat = () => {
+        this.setState({
+            isEditTempat: !this.state.isEditTempat,
+        })
+    }
+    handleAspek = (evt, id, field) => {
+        const newValue = evt.target.value || evt.target.innerHTML;
+
+        this.setState(prevState => ({
+            isi: prevState.isi.map((item, index) =>
+                index === id
+                    ? { ...item, [field]: newValue }
+                    : item
+            )
+        }));
+
+    };
+    addRow = () => {
+        this.setState(prevState => ({
+            isi: [
+                ...prevState.isi,
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                }
+            ]
+        }));
+    };
+    setDataCatatan = (data) => {
+        this.setState({ dataCatatan: data });
+    }
+
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-8">
+
+                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" value={this.state.judul} disabled={true}/>
+                                </div>
+                                <div className="col-md-3">
+                                    {/* <span className=" d-inline-flex">
+                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
+                                            <span className="font-color-white">
+                                                Print Notulensi
+                                            </span>
+                                        </Button>
+                                    </span> */}
+                                    <span className=" d-inline-flex">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span>
+                                                    <Button color className="btn-login">
+                                                        <span className="font-color-white">
+                                                            Print Dokumen
+                                                        </span>
+                                                    </Button>
+                                                </span>
+                                            }}
+                                            content={() => this.componentRef}
+                                        />
+                                    </span>
+                                </div>
+                            </FormGroup>
+                            <div style={{ display: "none" }}>
+                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                            </div>
+                            <div className='page  py-5 m-0 mb-3'>
+                                <div className='BA-Header'>
+                                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                                    <h4 >LAPORAN HASIL VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</h4>
+                                    {pt && (<h4 className='text-uppercase' >{pt.nama}</h4>)}
+                                </div>
+                                <div className='BA-body px-5 pt-3 '>
+                                    <p>
+                                        Pada hari ini
+                                        <span style={{ textIndent: "0rem" }}>
+                                            {isEditTanggal &&
+                                                <span style={{ textIndent: "0rem" }}>
+                                                    <Datetime
+                                                        timeFormat={false}
+                                                        inputProps={{ className: "form-control" }}
+                                                        value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
+                                                        onChange={(tanggal) => {
+                                                            this.setState({ tanggal, setTanggal: true })
+                                                        }}
+                                                        closeOnSelect={true}
+
+                                                    />
+
+                                                </span>
+                                            }
+                                        </span>
+                                        {this.state?.setTanggal === true ?
+                                            <span > {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).locale("id").format("MMMM")} tahun &nbsp;{moment(tanggal || this.state?.tanggal).format("YYYY")},</span> :
+                                            <span ><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                                        }
+                                        &nbsp;bertempat di
+                                        {this.state.isEditTempat &&
+                                            <span>
+                                                <input type='text'
+                                                    defaultValue={""}
+                                                    ref="inputTempat"
+                                                    onChange={() => {
+                                                        this.setState({ tempat: this.refs.inputTempat.value })
+                                                    }}
+                                                />
+
+                                            </span>
+                                        }
+                                        {this.state?.tempat ?
+                                            <span className='hhh'>
+                                                &nbsp;{this.state?.tempat}
+                                            </span>
+                                            :
+                                            <span ><strong>&nbsp;[Mohon Diisi] &nbsp;</strong></span>
+                                        }
+
+                                        ,
+                                        telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
+                                        {/* 
+                            <ol>
+                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) =>
+                                    <li>
+                                        {value.nama}
+                                        <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                            onClick={() => {
+                                                this.setState({
+                                                    selectedPeserta: value._id
+                                                })
+                                                this.setModalRemovePeserta()
+                                            }} />
+                                    </li>)}
+                            </ol> */}
+                                    </p>
+                                    <div className='table-a my-4 pl-5 pr-5' >
+
+
+                                        <table className=' ml-auto mr-auto'>
+                                            <thead >
+                                                <tr>
+                                                    <th >NO</th>
+                                                    <th>ASPEK PERBAIKAN</th>
+                                                    <th >LAPORAN PERBAIKAN</th>
+                                                    <th >HASIL VERIFIKASI DAN VALIDASI</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {this.state.isi?.map((isi, index) => (
+                                                    <tr key={index}>
+                                                        <td>{index + 1}</td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Aspek_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Aspek_Perbaikan") }}
+                                                                disabled={true}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                disabled={true}
+
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                disabled={true}
+
+
+                                                            />
+                                                        </td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Simpulan :</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+
+                                                />
+                                            </td>
+                                        </tr>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Rekomendasi :</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.rekomendasi}
+                                                    disabled={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                    }}
+                                                />
+                                            </td>
+                                        </tr>
+                                    </div>
+
+                                    <Row>
+                                        <Col xl={{ size: 8, offset: 2 }}>
+                                            <div className="mt-5"  >
+                                                <div className='header-ttd signature-border pt-1 pb-1'>
+                                                    <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
+                                                </div>
+                                                <div id="ttd">
+                                                    {catatan
+                                                        ? catatan.daftar_kehadiran_peserta?.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>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </div>
+
+
+
+                            <Row>
+                               
+                                <Col>
+                                    <div>
+                                        <Button color className="btn-login float-right" onClick={() => {
+                                            Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+                                        }} >
+                                            <span className="font-color-white">
+                                                Kembali                                            </span>
+                                        </Button>
+                                    </div>
+
+                                </Col>
+                            </Row>
+
+                        </Card>
+                    </Col>
+
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(EditFile);

pages/app/sanksi/proses.js

@@ -141,6 +141,7 @@ class ProsesSanksi extends Component {
 				formdata.append("keterangan", this.state.dataUpload.keterangan);
 				formdata.append("tanggal_terima_sanksi", this.state.dataUpload.terimaSuratSanksi);
 				formdata.append("tanggal_akhir_keberatan", this.state.dataUpload.tglAkhirKeberatan);
+				formdata.append("sanksi", JSON.stringify(this.state.dataUpload.listSanksi.map((e) => ({ label: e.value.split(";")[0], level: e.level }))));
 				formdata.append("pelanggaran_id", this.state.dataPelanggaran.data.map((e) => e._id).join());
 				if (this.state.dataUpload.files && this.state.dataUpload.files.length > 0) {
 					this.state.dataUpload.files.forEach((e) => {

styles/app/app/mycss.scss

@@ -1,244 +1,243 @@
 @media screen {
-///////// Home
-#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;
+  ///////// Home
+  #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; 
+      }
+  }
+  
+  #pageDone-TTD{
+     .main{
+      width: 500px;
+      margin-left: auto;
+      margin-right: auto;
+      padding-top: 20px;
+      margin-bottom: -13px;
+     }
+     .main-logo{
+      width: 250px; 
+      margin-right: 5px;
+      float: right;
+     }
+     .main-logo-1{
+      width: 50px;
+      float: right;
+     }
+     .text-1{
+      font-family:Verdana, Geneva, Tahoma, sans-serif;
+      font-style: normal;
+      font-weight: 550;
+      font-size: 15px;
+     }
+  }
+  
+  ///////////////////////////////////////////<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>
+  
+  
+    //////////////////////////////////Table Pelanggaran in berita acara
     
+    .table-a th {
+      border: 1px solid #C0C0C0;
+      padding: 5px;
+      background: #F0F0F0;
+      text-align: center;
+      font-size: small;
     }
-    #video-css img{
-        width: 140px;
-        margin-top: -20px;
+    
+    .table-a td {
+      border: 1px solid #C0C0C0;
+      padding: 5px;
+      word-wrap: break-word;
+      // 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;
+       }
+  
     }
-    #video-css{
-        display: flex;
-        flex-wrap: wrap;   
-        margin-top: -15px; 
+    .table-a{
+      border-collapse: collapse;
+      table-layout: fixed;
+      overflow: auto;
+      margin: -20px ;
+  
     }
-}
-
-#pageDone-TTD{
-   .main{
-    width: 500px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 20px;
-    margin-bottom: -13px;
-   }
-   .main-logo{
-    width: 250px; 
-    margin-right: 5px;
-    float: right;
-   }
-   .main-logo-1{
-    width: 50px;
-    float: right;
-   }
-   .text-1{
-    font-family:Verdana, Geneva, Tahoma, sans-serif;
-    font-style: normal;
-    font-weight: 550;
-    font-size: 15px;
-   }
-}
-
-///////////////////////////////////////////<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>
-
-
-  //////////////////////////////////Table Pelanggaran in berita acara
-  
-  .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: 130px;
-    font-size: 0.8rem;
-    @media only screen and (min-width: 1546px) {
-      word-wrap: break-word;
+  
+  ////////////////////////////////////////table signature in berita acara
+  #ttd{
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      display: flex;
+      flex-wrap: wrap;
+     
+  
+      .ttd-div{
+          width: 50%;
+          border: 1px solid #C0C0C0;
+      }
+      .sign-ttd{
+          width:90% ;
+          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;
+                }
     }
-    @media only screen and ( max-width:1546px) {
-      max-width: 130px;
-     }
-
+    .header-ttd{
+      background-color: #C0C0C0; 
+      text-align: center;
+      color: black;
+      margin-left: auto;
+      margin-right: auto;
   }
-  .table-a{
-    border-collapse: collapse;
-    table-layout: fixed;
-    overflow: auto;
-    margin: -20px ;
-
+  //////////////////////////////////////>>>>>>>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);
   }
-
-
-////////////////////////////////////////table signature in berita acara
-#ttd{
-    width: 100%;
+  
+  .BA-Header {
     margin-left: auto;
     margin-right: auto;
-    display: flex;
-    flex-wrap: wrap;
-   
-
-    .ttd-div{
-        width: 50%;
-        border: 1px solid #C0C0C0;
-    }
-    .sign-ttd{
-        width:90% ;
-        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;
-}
-//////////////////////////////////////>>>>>>>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 {
+    font-family: "Times New Roman", Times, serif;
+  }
+  .BA-logo{
+    width: 25%;
+    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;
-  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 {
+  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); }
-    }
-    
-    .font-20{
-      font-size: 20px;
-    }
-    .font-12{
-      font-size: 12pt;
-    }
-
-
-    .icon-triangle-onModalPT {
-      margin-top: 10px;
-      float: left; 
-    }
-   
-    .modalLoginPT-a{
+    .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); }
+      }
+      
+      .font-20{
+        font-size: 20px;
+      }
+      .font-12{
+        font-size: 12pt;
+      }
+  
+  
+      .icon-triangle-onModalPT {
+        margin-top: 10px;
+        float: left; 
+      }
+     
+      .modalLoginPT-a{
+        border-radius: 20px;
+        padding-top: 20px;
+      }
+      .modalLoginPT-b{
+      padding-top: 30px;
       border-radius: 20px;
-      padding-top: 20px;
-    }
-    .modalLoginPT-b{
-    padding-top: 30px;
-    border-radius: 20px;
-    padding-left: 25px;
-    margin-bottom: 40px;
-    }
-    // .form-tel .form-control {
-    //   background-color: rgb(253, 214, 214) !important;
-    //   color: rgb(104, 7, 60);
-    //   height: 50px !important;
-    //   width: 200px !important;
-    // }
-    .no-hpPT{
-      padding: 7px;
-      border-style: solid;
-      border-width: 1px;
-      border-color: #b7b7bc;
-      border-radius: 8px;
-    }
-
+      padding-left: 25px;
+      margin-bottom: 40px;
+      }
+      // .form-tel .form-control {
+      //   background-color: rgb(253, 214, 214) !important;
+      //   color: rgb(104, 7, 60);
+      //   height: 50px !important;
+      //   width: 200px !important;
+      // }
+      .no-hpPT{
+        padding: 7px;
+        border-style: solid;
+        border-width: 1px;
+        border-color: #b7b7bc;
+        border-radius: 8px;
+      }

styles/bootstrap/_print.scss

@@ -172,6 +172,8 @@
       background: #F0F0F0;
       text-align: center;
       font-size: small;
+      vertical-align: top;
+
     }
     
     .table-a td {
@@ -180,6 +182,7 @@
       word-wrap: break-word;
       max-width: 215px;
       font-size: 0.8rem;
+      vertical-align: top;
   
     }
     .table-a{
@@ -187,8 +190,10 @@
       table-layout: fixed;
       margin-left: auto;
       margin-right: auto;
-  
+      vertical-align: top;
+
     }
+    
     .BA-body ol{
       margin-top: 1px;
       text-indent: 0px;
@@ -229,6 +234,29 @@
       max-width: 600px;
   }
   }
+
+
+
+  
+  .table-b td {
+    // border: 1px solid #C0C0C0;
+    // padding: 5px;
+    word-wrap: break-word;
+    vertical-align: top;
+    text-align: left;    
+    max-width: 40%;
+    font-size: 0.8rem;
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+  }
+  .table-b{
+    // border-collapse: collapse;
+    word-wrap: break-word;
+    table-layout: fixed;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }