fitur catatan

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/Main/TableRiwayatCatatan.js

@@ -0,0 +1,205 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+import { ENV } from '../../env.js';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { useState } from "react";
+import { deleteCatatan } from "../../actions/catatan.js";
+import { toast } from "react-toastify";
+import { useSelector } from "react-redux";
+import Router from "next/router";
+
+
+
+
+
+
+function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly, role }) {
+    const [dropdownState, setDropdownState] = useState(false);
+    const [seledtedID, setSelectedID] = useState("")
+    const [modalIsOpen, setModalIsOpen] = useState(false)
+    const token = useSelector((state) => state.token)
+
+    const toggleDD = (dd) => {
+        setDropdownState(prevState => ({
+            ...prevState,
+            [dd]: !prevState[dd]
+        }));
+    };
+    // const deletedcatatan = async(id)=>{
+
+    //             const toastid = toast.loading("Please wait...");
+    //             const added = await deleteCatatan(id);
+    //             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}`);
+    //             }
+    // }
+    const setmodal = (id) => {
+        setModalIsOpen(!modalIsOpen)
+        setSelectedID(id)
+    }
+    return (
+        <div className="card b ">
+            <Modal isOpen={modalIsOpen} >
+                <ModalBody>Apakah Anda yakin akan menghapus catatan ini?</ModalBody>
+                <ModalFooter>
+
+                    <Button color className="btn-login" onClick={async () => {
+                        if (role === 2071) {
+                            Swal.fire({
+                                icon: 'error',
+                                title: 'Oops...',
+                                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                                confirmButtonColor: "#3e3a8e",
+                                confirmButtonText: 'Oke'
+                            })
+                        } else {
+
+                            await toast.promise(deleteCatatan(token, seledtedID), {
+                                pending: "Loading",
+                                success: "Success",
+                                error: "Error",
+                            });
+                            Router.push(`/app/perpanjangan-sanksi/detail?id=${query.id}`);
+                            setModalIsOpen(false)
+                        }
+                    }}>
+                        <span className="font-color-white">Ya</span>
+                    </Button>
+                    <Button color className="btn-v2" onClick={setmodal}>
+                        Tidak
+                    </Button>
+                </ModalFooter>
+            </Modal>
+            <div className=" card-header">
+                <div className=" card-title">Riwayat Catatan</div>
+            </div>
+            <div className=" card-body">
+                <div className="margin-right-auto float-right">
+                    <Link
+                        href={{
+                            pathname: newFilePage,
+                            query: { id: query?.id },
+                        }}
+                    >
+                        <Button className="btn-login" color>
+                            <img className="icon-laporan-baru" src="/static/img/icon-laporan-baru.png"></img>
+                            <span className="font-color-white m-2">
+                                Tambah Catatan
+                            </span>
+                        </Button>
+                    </Link>
+                </div>
+                <Datatable options={{
+                    responsive: false, ordering: true,
+                    // paging: false,
+                    searching: false,
+                    // ordering: false,
+                    // info: false,
+                }}>
+                    <table className="table w-100" data-order='[[0, "desc"]]'>
+                        <thead>
+                            <tr>
+                                <th>Tanggal dibuat</th>
+                                <th>Nama File</th>
+                                <th>Terakhir diedit</th>
+                                <th>Aksi</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {listData?.length
+                                ? listData.map((data, i) => (
+                                    <tr>
+                                        <td>
+                                            <p style={{ display: "none" }}>{data.createdAt}</p>
+                                            {moment(data.createdAt).format("D MMMM YYYY")}
+                                        </td>
+                                        <td>
+                                            {data.judul}
+                                        </td>
+                                        <td>{moment(data.updatedAt).format("D MMMM YYYY")}</td>
+                                        <td
+                                        // style={{ width: "30%" }}
+                                        >
+                                            <span className="">
+                                                <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
+                                                    toggle={() => toggleDD(`ddSplit${i}`)}  >
+                                                    <DropdownToggle
+                                                        data-toggle="dropdown"
+                                                        tag="span"
+                                                    >
+                                                        <Button color className="btn-v3">
+                                                            Info
+                                                        </Button>
+                                                        {/* <em className="fas fa-ellipsis-v" /> */}
+                                                    </DropdownToggle>
+                                                    <DropdownMenu>
+                                                        {ENV === "local" &&
+                                                            <CopyToClipboard
+                                                                text={`http://localhost:3000/signature/letter/${data?._id}`}
+                                                                options={{ asHtml: true }}
+                                                            ><DropdownItem>
+                                                                    Link Dokumen Berita Acara
+                                                                </DropdownItem>
+                                                            </CopyToClipboard>
+                                                        }
+                                                        {ENV === "development" &&
+                                                            <CopyToClipboard
+                                                                text={`http://dev.sidali.kemdikbud.go.id/signature/letter/${data?._id}`}
+                                                                options={{ asHtml: true }}
+                                                            ><DropdownItem>
+                                                                    Link Dokumen Berita Acara
+                                                                </DropdownItem>
+                                                            </CopyToClipboard>
+                                                        }
+                                                        <Link
+                                                            href={{
+                                                                pathname: readOnly,
+                                                                query: { id: data?._id },
+                                                            }}
+
+                                                        >
+                                                            <DropdownItem>
+                                                                <span className=" font-color-black">Lihat</span>
+                                                            </DropdownItem>
+                                                        </Link>
+                                                        <Link
+                                                            href={{
+                                                                pathname: editFilePage,
+                                                                query: { id: data?._id },
+                                                            }}
+
+                                                        ><DropdownItem>
+                                                                <span className=" font-color-black">Edit</span>
+                                                            </DropdownItem>
+                                                        </Link>
+                                                        <DropdownItem onClick={() => { setmodal(data._id) }}>
+                                                            <span  >
+                                                                Hapus
+                                                            </span>
+
+                                                        </DropdownItem>
+                                                    </DropdownMenu>
+                                                </Dropdown>
+                                            </span>
+
+
+
+                                        </td>
+                                    </tr>
+                                )) : (
+                                    ""
+                                )}
+                        </tbody>
+                    </table>
+                </Datatable>
+            </div>
+        </div>
+
+    )
+}
+export default TableRiwayatCatatan;

components/Main/presensi_print.js

@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import SignatureCanvas from 'react-signature-canvas'
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
+import { connect } from "react-redux";
+import moment from "moment";
+import 'moment/locale/id'
+moment.locale('id')
+import { getOneCatatan } from '../../actions/catatan';
+
+
+
+
+class ComponentToPrint extends React.Component {
+    formData = {}
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+    }
+
+    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 });
+
+    };
+
+    render() {
+        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 VERIFIKASI DAN VALIDASI DOKUMEN USUL PENCABUTAN SANKSI ADMINISTRATIF</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?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
+                                        </td>
+                                        <td style={{ width: "30%" }}>
+                                                {isi.Laporan_Perbaikan?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
+                                        </td>
+                                        <td style={{ width: "40%" }}>
+                                                {isi.Hasil_Verifikasi?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
+                                        </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?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
+                                            </td>
+                                        </tr>
+                                    </div>
+                                    <div className='table-b my-4 pl-4 pr-5' >
+                                        <tr>
+                                            <td style={{ width: "8%" }}>Rekomendasi:</td>
+                                            <td >
+                                                {this.state.rekomendasi?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
+                                            
+                                            </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) => (
+                                    <div className='ttd-div'>
+                                        <div className='sign-ttd'>
+                                            <img
+                                                className='sign-ttd'
+                                                src={value.ttd.path} />
+                                        </div>
+                                        <div className='sign-nama'>
+                                            <text>
+                                                {value.nama}
+                                            </text>
+                                        </div>
+                                    </div>
+                                )) : ""}
+                        </div>
+                    </div>
+                </div>
+                <div id="footer">
+                    <span>{catatan?.judul}</span>
+                </div>
+
+            </page>
+
+
+        );
+    }
+}
+export default ComponentToPrint

components/PencabutanSanksi/TableRiwayatCatatan.js

@@ -0,0 +1,191 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+import { ENV } from '../../env.js';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { useState } from "react";
+import { deleteCatatan } from "../../actions/catatan.js";
+import { toast } from "react-toastify";
+import { useSelector } from "react-redux";
+import Router from "next/router";
+
+
+
+
+
+
+function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly, role }) {
+    const [dropdownState, setDropdownState] = useState(false);
+    const [seledtedID, setSelectedID] = useState("")
+    const [modalIsOpen, setModalIsOpen] = useState(false)
+    const token = useSelector((state) => state.token)
+
+    const toggleDD = (dd) => {
+        setDropdownState(prevState => ({
+            ...prevState,
+            [dd]: !prevState[dd]
+        }));
+    };
+    const setmodal = (id) => {
+        setModalIsOpen(!modalIsOpen)
+        setSelectedID(id)
+    }
+    return (
+        <div className="card b ">
+            <Modal isOpen={modalIsOpen} >
+                <ModalBody>Apakah Anda yakin akan menghapus catatan ini?</ModalBody>
+                <ModalFooter>
+
+                    <Button color className="btn-login" onClick={async () => {
+                        if (role === 2071) {
+                            Swal.fire({
+                                icon: 'error',
+                                title: 'Oops...',
+                                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                                confirmButtonColor: "#3e3a8e",
+                                confirmButtonText: 'Oke'
+                            })
+                        } else {
+
+                            await toast.promise(deleteCatatan(token, seledtedID), {
+                                pending: "Loading",
+                                success: "Success",
+                                error: "Error",
+                            });
+                            Router.push(`/app/perpanjangan-sanksi/detail?id=${query.id}`);
+                            setModalIsOpen(false)
+                        }
+                    }}>
+                        <span className="font-color-white">Ya</span>
+                    </Button>
+                    <Button color className="btn-v2" onClick={setmodal}>
+                        Tidak
+                    </Button>
+                </ModalFooter>
+            </Modal>
+            <div className=" card-header">
+                <div className=" card-title">Riwayat Catatan</div>
+            </div>
+            <div className=" card-body">
+                <div className="margin-right-auto float-right">
+                    <Link
+                        href={{
+                            pathname: newFilePage,
+                            query: { id: query?.id },
+                        }}
+                    >
+                        <Button className="btn-login" color>
+                            <img className="icon-laporan-baru" src="/static/img/icon-laporan-baru.png"></img>
+                            <span className="font-color-white m-2">
+                                Tambah Catatan
+                            </span>
+                        </Button>
+                    </Link>
+                </div>
+                <Datatable options={{
+                    responsive: false, ordering: true,
+                    // paging: false,
+                    searching: false,
+                    // ordering: false,
+                    // info: false,
+                }}>
+                    <table className="table w-100" data-order='[[0, "desc"]]'>
+                        <thead>
+                            <tr>
+                                <th>Tanggal dibuat</th>
+                                <th>Nama File</th>
+                                <th>Terakhir diedit</th>
+                                <th>Aksi</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {listData?.length
+                                ? listData.map((data, i) => (
+                                    <tr>
+                                        <td>{moment(data.createdAt).format("D MMMM YYYY")}</td>
+                                        <td>
+                                            {data.judul}
+                                        </td>
+                                        <td>{moment(data.updatedAt).format("D MMMM YYYY")}</td>
+                                        <td
+                                        // style={{ width: "30%" }}
+                                        >
+                                            <span className="">
+                                                <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
+                                                    toggle={() => toggleDD(`ddSplit${i}`)}  >
+                                                    <DropdownToggle
+                                                        data-toggle="dropdown"
+                                                        tag="span"
+                                                    >
+                                                        <Button color className="btn-v3">
+                                                            Info
+                                                        </Button>
+                                                        {/* <em className="fas fa-ellipsis-v" /> */}
+                                                    </DropdownToggle>
+                                                    <DropdownMenu>
+                                                        {ENV === "local" &&
+                                                            <CopyToClipboard
+                                                                text={`http://localhost:3000/signature/letter/${data?._id}`}
+                                                                options={{ asHtml: true }}
+                                                            ><DropdownItem>
+                                                                    Link Dokumen Berita Acara
+                                                                </DropdownItem>
+                                                            </CopyToClipboard>
+                                                        }
+                                                        {ENV === "development" &&
+                                                            <CopyToClipboard
+                                                                text={`http://dev.sidali.kemdikbud.go.id/signature/letter/${data?._id}`}
+                                                                options={{ asHtml: true }}
+                                                            ><DropdownItem>
+                                                                    Link Dokumen Berita Acara
+                                                                </DropdownItem>
+                                                            </CopyToClipboard>
+                                                        }
+                                                        <Link
+                                                            href={{
+                                                                pathname: readOnly,
+                                                                query: { id: data?._id },
+                                                            }}
+
+                                                        >
+                                                            <DropdownItem>
+                                                                <span className=" font-color-black">Lihat</span>
+                                                            </DropdownItem>
+                                                        </Link>
+                                                        <Link
+                                                            href={{
+                                                                pathname: editFilePage,
+                                                                query: { id: data?._id },
+                                                            }}
+
+                                                        ><DropdownItem>
+                                                                <span className=" font-color-black">Edit</span>
+                                                            </DropdownItem>
+                                                        </Link>
+                                                        <DropdownItem onClick={() => { setmodal(data._id) }}>
+                                                            <span  >
+                                                                Hapus
+                                                            </span>
+
+                                                        </DropdownItem>
+                                                    </DropdownMenu>
+                                                </Dropdown>
+                                            </span>
+
+
+
+                                        </td>
+                                    </tr>
+                                )) : (
+                                    ""
+                                )}
+                        </tbody>
+                    </table>
+                </Datatable>
+            </div>
+        </div>
+
+    )
+}
+export default TableRiwayatCatatan;

components/Riwayat/ChartDonutDisk.js

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+
+import Sparkline from "@/components/Common/Sparklines.js";
+import MorrisChart from "@/components/Charts/Morris.js";
+import { getDiskSpace } from "../../actions/disk";
+import moment from "moment";
+
+class ChartDonutDisk extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+
+			use_disk: undefined,
+			free_disk: undefined,
+			loading: true,
+
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const dataDisk = await getDiskSpace(token);
+
+
+		try {
+			const dataDisk = await getDiskSpace(token);
+			const use_disk = parseFloat(`${dataDisk?.data?.map(e => e.use_percent)}`.replace('%', ''));
+			const free_disk = parseFloat(100 - use_disk);
+			this.setState({ use_disk, free_disk, loading: false });
+		} catch (error) {
+			console.error("Error fetching disk space data: ", error);
+			this.setState({ loading: false });
+		}
+		this.setState({ dataDisk })
+	};
+
+	ChartDonut = {
+
+
+		options: {
+			element: 'morris-donut',
+			colors: ['#3e3a8e', '#fad732'],
+			resize: true,
+			formatter: function (value, data) {
+				return value + '%';
+			}
+		},
+	};
+
+
+	render() {
+		const { use_disk, free_disk, loading, dataDisk } = this.state;
+		console.log(dataDisk?.data?.map(e => e.timestamp))
+
+		if (loading) {
+			return <div>Loading...</div>;
+		}
+
+		const chartData = [
+			{
+				label: "Terpakai",
+				color: "#3e3a8e",
+				value: use_disk
+			},
+			{
+				label: "Tidak Terpakai",
+				color: "#b0adfe",
+				value: free_disk
+			}
+		];
+
+		return (
+
+			<Col lg={12}>
+				<Card className="card-default">
+					<CardBody>
+						<MorrisChart type={'Donut'} id="morris-donut" options={this.ChartDonut.options} data={chartData} className="flot-chart" />
+					</CardBody>
+					<div align="center" className=" mb-2 mr-3 ml-3">
+						<span>Data Statistik Kapasitas Hardisk Per {moment(dataDisk?.data?.map(e => e.timestamp)).utc().format('HH:mm')} WIB {moment().locale("id").format("DD MMMM YYYY")}</span>
+					</div>
+				</Card>
+			</Col>
+		);
+	}
+}
+
+export default ChartDonutDisk;

components/Riwayat/ChartLineDisk.js

@@ -0,0 +1,170 @@
+import React, { Component } from "react";
+import { Col, Card, CardBody, FormGroup, Label, Input } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { getMonthDiskSpace } from "../../actions/disk";
+import moment from "moment";
+import "moment/locale/id";
+
+class ChartLineDisk extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dataChart: this.ChartLine,
+			selectedMonth: moment().month(), // Current month (0 = January, 11 = December)
+			selectedYear: moment().year(),   // Current year
+		};
+	}
+
+	// Fetch data when component mounts or when date is changed
+	componentDidMount = async () => {
+		moment.locale('id'); 
+		this.fetchDiskSpaceData();
+	};
+
+	componentDidUpdate(prevProps, prevState) {
+		// Fetch data if selected month or year has changed
+		if (prevState.selectedMonth !== this.state.selectedMonth || prevState.selectedYear !== this.state.selectedYear) {
+			this.fetchDiskSpaceData();
+		}
+	}
+
+	// Function to fetch the disk space data
+	fetchDiskSpaceData = async () => {
+		const { token } = this.props;
+		const { selectedMonth, selectedYear } = this.state;
+		const selectedDate = `${selectedYear}-${(selectedMonth + 1).toString().padStart(2, "0")}`; // Format as YYYY-MM
+
+		const dataDisk = await getMonthDiskSpace(token, selectedDate);
+
+		const sortedDataDisk = dataDisk.data.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+		const chartData = sortedDataDisk.map(item => {
+			const day = new Date(item.date).getDate();
+			const used = (item.used / (1024 ** 2)).toFixed(2);
+			return [day.toString(), used];
+		});
+
+		const updatedChartLine = {
+			...this.ChartLine,
+			data: [
+				{
+					label: "Use Disk Space",
+					color: "#3e3a8e",
+					data: chartData,
+				},
+			],
+		};
+		this.setState({ dataChart: updatedChartLine });
+	};
+
+	handleMonthChange = (e) => {
+		this.setState({ selectedMonth: parseInt(e.target.value) });
+	};
+
+	handleYearChange = (e) => {
+		this.setState({ selectedYear: parseInt(e.target.value) });
+	};
+
+	// Chart configuration
+	ChartLine = {
+		data: [
+			{
+				label: "Use Disk Space",
+				color: "#3e3a8e",
+				data: [],
+			},
+		],
+		options: {
+			series: {
+				lines: {
+					show: true,
+					fill: 0.01,
+				},
+				points: {
+					show: true,
+					radius: 4,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => `${x} : ${y} GB`,
+			},
+			xaxis: {
+				tickColor: "#eee",
+				mode: "categories",
+			},
+			yaxis: {
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
+
+	render() {
+		const { selectedMonth, selectedYear, dataChart } = this.state;
+		const months = moment.months(); 
+		const years = Array.from({ length: 11 }, (_, i) => moment().year() - i);
+
+		return (
+			<Col lg={12}>
+				<Card className="card-default">
+					<CardBody>
+						<FormGroup row>
+							<Label for="month" sm={2}>Bulan:</Label>
+							<Col sm={4}>
+								<Input
+									type="select"
+									name="month"
+									id="month"
+									value={selectedMonth}
+									onChange={this.handleMonthChange}
+								>
+									{months.map((month, index) => (
+										<option key={index} value={index}>
+											{month}
+										</option>
+									))}
+								</Input>
+							</Col>
+							<Col sm={4}>
+								<Input
+									type="select"
+									name="year"
+									id="year"
+									value={selectedYear}
+									onChange={this.handleYearChange}
+								>
+									{years.map((year) => (
+										<option key={year} value={year}>
+											{year}
+										</option>
+									))}
+								</Input>
+							</Col>
+						</FormGroup>
+
+						<FlotChart
+							options={dataChart.options}
+							data={dataChart.data}
+							className="flot-chart"
+							height="300px"
+						/>
+					</CardBody>
+					<div align="center" className="mb-3">
+						<span>
+							Data Statistik Penggunaan Hardisk Bulan {months[selectedMonth]} {selectedYear}
+						</span>
+					</div>
+				</Card>
+			</Col>
+		);
+	}
+}
+
+export default ChartLineDisk;

pages/app/naik-sanksi/edit_catatan.js

@@ -0,0 +1,509 @@
+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, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import pdfMake from "pdfmake/build/pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, deletePeserta, 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/Main/presensi_print.js";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tanggal: "",
+            modalRemovePeserta: false,
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "  ",
+            rekomendasi: "  ",
+            selectedPeserta: "",
+            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 === 2071) {
+            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 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": "Naik 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/naik-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.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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    setModalRemovePeserta = (modalRemovePeserta) => {
+        this.setState({
+            modalRemovePeserta: !this.state.modalRemovePeserta
+        })
+    }
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Modal isOpen={this.state.modalRemovePeserta} >
+                    <ModalBody>Apakah anda ingin menghapus peserta?</ModalBody>
+                    <ModalFooter>
+
+                        <Button color className="btn-login"
+                            onClick={async () => {
+                                const { token } = this.props;
+                                let update = null;
+                                const toastid = toast.loading("Please wait...");
+                                const id_catatan = catatan._id
+                                const peserta = this.state.selectedPeserta
+                                update = await deletePeserta(token, { "peserta_id": peserta }, id_catatan);
+                                if (!update) {
+                                    toast.update(toastid, { render: "Gagal hapus peserta", type: "error", isLoading: false, autoClose: true, closeButton: true });
+                                } else {
+                                    toast.update(toastid, { render: "Berhasil hapus peserta", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                                    Router.push(`/app/naik-sanksi/edit_catatan?id=${catatan._id}`);
+                                    this.setModalRemovePeserta()
+                                }
+                            }}
+                        >
+
+                            <span className="font-color-white">Ya</span>
+                        </Button>
+                        <Button color className="btn-v2" onClick={this.setModalRemovePeserta}>
+                            Tidak
+                        </Button>
+                    </ModalFooter>
+                </Modal>
+                <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">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span className="btn-radius">
+
+                                                    <Button color className="ml-0 btn-v1-outline-purple">                                         Print Dokumen
+                                                    </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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 });
+                                                    }}
+                                                    tagName="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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} 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)(EditFile);

pages/app/naik-sanksi/new_catatan.js

@@ -0,0 +1,325 @@
+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 === 2071) {
+            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": "Naik 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/naik-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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { pt } = this.state
+        const { tanggal, isEditTanggal, simpulan, catatan } = 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-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>
+                                            {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")}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => this.handleAspek(evt, index, "Laporan_Perbaikan")}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => this.handleAspek(evt, index, "Hasil_Verifikasi")}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+
+                                                />
+                                            </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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/naik-sanksi/readOnly_catatan.js

@@ -0,0 +1,442 @@
+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 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import pdfMake from "pdfmake/build/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/Main/presensi_print.js";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+
+
+
+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 === 2071) {
+            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": "Naik 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/naik-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.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">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span className="btn-radius">
+                                                    <Button color className="ml-0 btn-v1-outline-purple">Print Dokumen
+                                                    </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>
+                                            {catatan?.daftar_kehadiran_peserta?.map((value) =>
+                                                <li>
+                                                    {value.nama}
+                                                </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&nbsp;:</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+                                                    tagName="text"
+                                                />
+                                            </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={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                    }}
+                                                    tagName="text"
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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={() => {
+                                            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/pencabutan-sanksi/edit_catatan.js

@@ -0,0 +1,518 @@
+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, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import pdfMake from "pdfmake/build/pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, deletePeserta, 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/Main/presensi_print.js";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tanggal: "",
+            modalRemovePeserta: false,
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "  ",
+            rekomendasi: "  ",
+            selectedPeserta: "",
+            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 === 2071) {
+            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": "Pencabutan 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/pencabutan-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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    setModalRemovePeserta = (modalRemovePeserta) => {
+        this.setState({
+            modalRemovePeserta: !this.state.modalRemovePeserta
+        })
+    }
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Modal isOpen={this.state.modalRemovePeserta} >
+                    <ModalBody>Apakah anda ingin menghapus peserta?</ModalBody>
+                    <ModalFooter>
+
+                        <Button color className="btn-login"
+                            onClick={async () => {
+                                const { token } = this.props;
+                                let update = null;
+                                const toastid = toast.loading("Please wait...");
+                                const id_catatan = catatan._id
+                                const peserta = this.state.selectedPeserta
+                                update = await deletePeserta(token, { "peserta_id": peserta }, id_catatan);
+                                if (!update) {
+                                    toast.update(toastid, { render: "Gagal hapus peserta", type: "error", isLoading: false, autoClose: true, closeButton: true });
+                                } else {
+                                    toast.update(toastid, { render: "Berhasil hapus peserta", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                                    Router.push(`/app/pencabutan-sanksi/edit_catatan?id=${catatan._id}`);
+                                    this.setModalRemovePeserta()
+                                }
+                            }}
+                        >
+
+                            <span className="font-color-white">Ya</span>
+                        </Button>
+                        <Button color className="btn-v2" onClick={this.setModalRemovePeserta}>
+                            Tidak
+                        </Button>
+                    </ModalFooter>
+                </Modal>
+                <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 className="btn-radius">
+
+                                                    <Button color className="ml-0 btn-v1-outline-purple">                                         Print Dokumen
+                                                    </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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 });
+                                                    }}
+                                                    tagName="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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} 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)(EditFile);

pages/app/pencabutan-sanksi/new_catatan.js

@@ -0,0 +1,327 @@
+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 === 2071) {
+            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": "Pencabutan 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/pencabutan-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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { pt } = this.state
+        const { tanggal, isEditTanggal, simpulan, catatan } = 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-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>
+                                            {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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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/pencabutan-sanksi/readOnly_catatan.js

@@ -0,0 +1,476 @@
+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/Main/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 === 2071) {
+            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 className="btn-radius">
+                                                    <Button color className="ml-0 btn-v1-outline-purple">Print Dokumen
+                                                    </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>
+                                            {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' >
+                                        <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&nbsp;:</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+                                                    tagName="text"
+
+                                                />
+                                            </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={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                    }}
+                                                    tagName="text"
+
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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={() => {
+                                            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/perpanjangan-sanksi/edit_catatan.js

@@ -0,0 +1,524 @@
+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, Modal, ModalBody, ModalFooter, ModalHeader } 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, deletePeserta, 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/Main/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: "",
+            modalRemovePeserta: false,
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "  ",
+            rekomendasi: "  ",
+            selectedPeserta: "",
+            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 === 2071) {
+            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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    setModalRemovePeserta = (modalRemovePeserta) => {
+        this.setState({
+            modalRemovePeserta: !this.state.modalRemovePeserta
+        })
+    }
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Modal isOpen={this.state.modalRemovePeserta} >
+                    <ModalBody>Apakah anda ingin menghapus peserta?</ModalBody>
+                    <ModalFooter>
+
+                        <Button color className="btn-login"
+                            onClick={async () => {
+                                const { token } = this.props;
+                                let update = null;
+                                const toastid = toast.loading("Please wait...");
+                                const id_catatan = catatan._id
+                                const peserta = this.state.selectedPeserta
+                                update = await deletePeserta(token, { "peserta_id": peserta }, id_catatan);
+                                if (!update) {
+                                    toast.update(toastid, { render: "Gagal hapus peserta", type: "error", isLoading: false, autoClose: true, closeButton: true });
+                                } else {
+                                    toast.update(toastid, { render: "Berhasil hapus peserta", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                                    Router.push(`/app/perpanjangan-sanksi/edit_catatan?id=${catatan._id}`);
+                                    this.setModalRemovePeserta()
+                                }
+                            }}
+                        >
+
+                            <span className="font-color-white">Ya</span>
+                        </Button>
+                        <Button color className="btn-v2" onClick={this.setModalRemovePeserta}>
+                            Tidak
+                        </Button>
+                    </ModalFooter>
+                </Modal>
+                <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 className="btn-radius">
+
+                                                    <Button color className="ml-0 btn-v1-outline-purple">                                         Print Dokumen
+                                                    </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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 });
+                                                    }}
+                                                    tagName="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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} 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)(EditFile);

pages/app/perpanjangan-sanksi/editfile.js

@@ -0,0 +1,371 @@
+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/Main/presensi_print.js";
+import htmlToPdfmake from "html-to-pdfmake"
+// import htmlToDraft from 'html-to-draftjs';
+import SummerNote from "../../../components/Extras/summernote";
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            editorState: null,
+            copiedd: false,
+            judul: "",
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        const catatan = getCatatan.data
+        const judul = catatan.judul
+        this.setState({ catatan, judul });
+        // 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: catatan?.isi
+        });
+    }
+
+    onEditorStateChange = (editorState) => {
+        this.setState({
+            editorState,
+        });
+        // localStorage.setItem("editorState", draftToHtml(convertToRaw(editorState.getCurrentContent())))
+    };
+
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2071) {
+            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.editorState,
+                "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}`);
+            }
+        }
+
+    };
+    handleGeneratePDF = () => {
+        // 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 });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+
+    render() {
+        const { editorState, catatan } = this.state;
+        console.log(editorState)
+        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 Presensi
+                                                        </span>
+                                                    </Button>
+                                                </span>
+                                            }}
+                                            content={() => this.componentRef}
+                                        />
+                                    </span>
+                                </div>
+                            </FormGroup>
+                            <div style={{ display: "none" }}>
+                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                            </div>
+                            {/* <Editor
+                                editorState={editorState}
+                                // wrapperClassName="demo-wrapper"
+                                // editorClassName="demo-editor"
+                                editorStyle={{ height: 500 }}
+                                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 }}>
+                                    <div className="mb-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>
+
+
+                            <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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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/new_catatan.js

@@ -0,0 +1,328 @@
+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 === 2071) {
+            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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    
+    render() {
+        const { pt } = this.state
+        const { tanggal, isEditTanggal, simpulan, catatan } = 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-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>
+                                            {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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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

@@ -0,0 +1,250 @@
+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";
+
+
+
+
+
+class NewFile extends Component {
+    constructor(props) {
+        super(props);
+        this.editor = React.createRef();
+        this.state = {
+            editorState: "<p>dfgergergr</p><p>hgrfhfghf</p><p>trhrhrt</p>",
+            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 === 2071) {
+            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])
+    //     })
+    // }
+
+    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">
+                            <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='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 ?
+                                        (
+                                            <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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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/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 === 2071) {
+      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 Berita Acara</span>
+
+                            {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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

@@ -0,0 +1,365 @@
+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.js";
+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/Main/presensi_print.js";
+import htmlToPdfmake from "html-to-pdfmake"
+import SummerNote from "../../../components/Extras/summernote";
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // editorState: EditorState.createEmpty(),
+            editorState: '',
+            copiedd: false,
+            judul: "",
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        const catatan = getCatatan.data
+        const judul = catatan.judul
+        this.setState({ catatan, judul });
+        let blocksFromHTML;
+        let editorState;
+        if (typeof window !== 'undefined') {
+            const htmlToDraft = require('html-to-draftjs').default;
+            const isi = catatan.isi
+            blocksFromHTML = htmlToDraft((isi));
+            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())))
+    };
+
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2071) {
+            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": isi,
+                "catatan_id": id
+            }, _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}`);
+            }
+        }
+
+    };
+    handleGeneratePDF = () => {
+        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 });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+
+    render() {
+        const { editorState, catatan } = 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">
+                                    <div className="col-md-11">
+                                        <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>
+                                <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 Presensi
+                                                        </span>
+                                                    </Button>
+                                                </span>
+                                            }}
+                                            content={() => this.componentRef}
+                                        />
+                                    </span>
+                                </div>
+                            </FormGroup>
+                            <div style={{ display: "none" }}>
+                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                            </div>
+                            <Editor
+                                readOnly={true}
+                                toolbarHidden={true}
+                                editorState={editorState}
+                                // wrapperClassName="demo-wrapper"
+                                // editorClassName="demo-editor"
+                                editorStyle={{ height: 500 }}
+                                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 }}>
+                                    <div className="mb-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>
+                            <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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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" disabled={true} >
+                                            <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/readOnly_catatan.js

@@ -0,0 +1,476 @@
+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/Main/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 === 2071) {
+            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 className="btn-radius">
+                                                    <Button color className="ml-0 btn-v1-outline-purple">Print Dokumen
+                                                    </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>
+                                            {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' >
+                                        <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&nbsp;:</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+                                                    tagName="text"
+
+                                                />
+                                            </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={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                    }}
+                                                    tagName="text"
+
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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={() => {
+                                            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/turun-sanksi/edit_catatan.js

@@ -0,0 +1,518 @@
+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, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import pdfMake from "pdfmake/build/pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, deletePeserta, 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/Main/presensi_print.js";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tanggal: "",
+            modalRemovePeserta: false,
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "  ",
+            rekomendasi: "  ",
+            selectedPeserta: "",
+            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 === 2071) {
+            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": "Turun 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/turun-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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    setModalRemovePeserta = (modalRemovePeserta) => {
+        this.setState({
+            modalRemovePeserta: !this.state.modalRemovePeserta
+        })
+    }
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Modal isOpen={this.state.modalRemovePeserta} >
+                    <ModalBody>Apakah anda ingin menghapus peserta?</ModalBody>
+                    <ModalFooter>
+
+                        <Button color className="btn-login"
+                            onClick={async () => {
+                                const { token } = this.props;
+                                let update = null;
+                                const toastid = toast.loading("Please wait...");
+                                const id_catatan = catatan._id
+                                const peserta = this.state.selectedPeserta
+                                update = await deletePeserta(token, { "peserta_id": peserta }, id_catatan);
+                                if (!update) {
+                                    toast.update(toastid, { render: "Gagal hapus peserta", type: "error", isLoading: false, autoClose: true, closeButton: true });
+                                } else {
+                                    toast.update(toastid, { render: "Berhasil hapus peserta", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                                    Router.push(`/app/turun-sanksi/edit_catatan?id=${catatan._id}`);
+                                    this.setModalRemovePeserta()
+                                }
+                            }}
+                        >
+
+                            <span className="font-color-white">Ya</span>
+                        </Button>
+                        <Button color className="btn-v2" onClick={this.setModalRemovePeserta}>
+                            Tidak
+                        </Button>
+                    </ModalFooter>
+                </Modal>
+                <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 className="btn-radius">
+
+                                                    <Button color className="ml-0 btn-v1-outline-purple">                                         Print Dokumen
+                                                    </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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 });
+                                                    }}
+                                                    tagName="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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} 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)(EditFile);

pages/app/turun-sanksi/new_catatan.js

@@ -0,0 +1,327 @@
+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 === 2071) {
+            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": "Turun 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/turun-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 });
+    }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    };
+    render() {
+        const { pt } = this.state
+        const { tanggal, isEditTanggal, simpulan, catatan } = 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-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>
+                                            {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") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+                                                                onPaste={this.handlePaste}
+                                                            />
+                                                        </td>
+                                                        <td style={{ border: "transparent" }}>
+                                                            <button onClick={() => this.removeRow(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" />
+                                                        </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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="text"
+                                                    onPaste={this.handlePaste}
+                                                />
+                                            </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/turun-sanksi/readOnly_catatan.js

@@ -0,0 +1,462 @@
+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 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import pdfMake from "pdfmake/build/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/Main/presensi_print.js";
+import Datetime from "react-datetime";
+
+import ContentEditable from 'react-contenteditable'
+
+
+
+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 === 2071) {
+            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 className="btn-radius">
+                                                    <Button color className="ml-0 btn-v1-outline-purple">Print Dokumen
+                                                    </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>
+                                            {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' >
+                                        <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&nbsp;:</td>
+                                            <td >
+                                                <ContentEditable
+                                                    html={this.state.simpulan}
+                                                    disabled={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ simpulan: e.target.value });
+                                                    }}
+                                                    tagName="text"
+
+                                                />
+                                            </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={true}
+                                                    onChange={(e) => {
+                                                        this.setState({ rekomendasi: e.target.value });
+                                                    }}
+                                                    tagName="text"
+
+                                                />
+                                            </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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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 Berita Acara</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen Berita Acara</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={() => {
+                                            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/signature/letter/[id].js

@@ -0,0 +1,334 @@
+import React, { Component } from 'react';
+import BasePage from "@/components/Layout/BasePage";
+
+import { addDaftarHadirPeserta } from '../../../actions/catatan';
+import { getAutoSave } from "@/actions/autosave";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import SignatureCanvas from 'react-signature-canvas'
+import { addPesertaPleno } from '../../../actions/public';
+import { toast } from "react-toastify";
+import Router from "next/router";
+import swal from "sweetalert2";
+import Link from 'next/dist/client/link';
+import moment from 'moment';
+import { getOneCatatan } from '../../../actions/catatan';
+import ContentEditable from 'react-contenteditable'
+
+
+
+
+
+
+class PlenoSanksi extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+            modal: false,
+            signature: "",
+            nama: "",
+            data: {},
+            changesign: false,
+            pageDone: false,
+
+        }
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        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 });
+    };
+
+    toggleModal = (value = true) => {
+        if (!value) {
+            this.setState({ modal: false });
+        } else {
+            this.setState({ modal: !this.state.modal });
+        }
+    };
+    sigPad = []
+    clear = () => {
+        this.sigPad.clear()
+    }
+    updateValueSignature = () => {
+        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
+        this.setState({
+            signature: addsig,
+            changesign: true
+
+        })
+    }
+
+    updateValueNama = (e) => {
+        this.setState({ nama: e.target.value });
+    }
+
+
+    onSubmit = async (e) => {
+
+        const { query, token } = this.props;
+        const { id } = query;
+        const sign = this.state.signature
+        const blob = await (await fetch(sign)).blob();
+        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
+        const formdata = new FormData();
+        formdata.append("ttd", files);
+        formdata.append("catatan_id", id);
+        formdata.append("nama", this.state.nama);
+        const added = await addDaftarHadirPeserta(token, formdata, id);
+        const toastid = toast.loading("Please wait...");
+        if (!added) {
+            swal.fire({
+                title: "Gagal Input Tanda Tangan",
+                icon: "error",
+                confirmButtonColor: "#3e3a8e",
+            });
+
+        } else {
+            swal.fire({
+                title: "Berhasil Input Tanda Tangan",
+                icon: "success",
+                confirmButtonColor: "#3e3a8e",
+            });
+            Router.push(`/signature/letter/done/${id}`);
+        }
+    };
+
+
+
+
+    render() {
+        const { signature, nama, changesign, catatan, pt, isEditTanggal, tanggal } = this.state
+
+        return (
+            <ContentWrapper unwrap>
+                <Modal isOpen={this.state.modal} >
+
+                    <ModalBody>
+                        <FormGroup row>
+                            <label className="col-md-2 col-form-label">Nama:<span className=' text-danger'>*</span></label>
+                            <div className="col-md-10">
+                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
+                            </div>
+                        </FormGroup>
+                        <FormGroup row>
+                            <label className="col-md-2 col-form-label">Tanda Tangan:</label>
+                            <div className="col-md-10">
+                                <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />
+                            </div>
+                        </FormGroup>
+                        <ModalFooter>
+                            <Button color className="btn-login" onClick={this.updateValueSignature
+                            }>
+                                <span className="font-color-white">Simpan</span>
+                            </Button>
+                            <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
+                                Hapus
+                            </Button>
+                        </ModalFooter>
+                        <ModalFooter>
+                            <Button color className="bg-danger" onClick={this.toggleModal}>
+                                Batal
+                            </Button>
+                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className=" color-3e3a8e" onClick={this.onSubmit}>
+                                <span className="font-color-white ">Kirim</span>
+                            </Button>
+
+                        </ModalFooter>
+
+                    </ModalBody>
+                </Modal>
+
+                <div className='page-sign'>
+                    <div className='BA-Header'>
+                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
+                        <h4 >LAPORAN HASIL 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>
+                                {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' >
+                            <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&nbsp;:</td>
+                                <td >
+                                    <ContentEditable
+                                        html={this.state.simpulan}
+                                        disabled={true}
+                                        onChange={(e) => {
+                                            this.setState({ simpulan: e.target.value });
+                                        }}
+                                        tagName="text"
+
+                                    />
+                                </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={true}
+                                        onChange={(e) => {
+                                            this.setState({ rekomendasi: e.target.value });
+                                        }}
+                                        tagName="text"
+
+                                    />
+                                </td>
+                            </tr>
+                        </div>
+
+                    </div>
+                    <div className=" ml-5">
+                        <p >
+                            <strong>
+                                Klik tombol Setuju untuk melakukan tanda tangan sebagai tanda bukti menyetujui dokumen laporan diatas
+                            </strong>
+                        </p>
+                        <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
+                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
+                        </Button>
+                    </div>
+
+                </div>
+
+
+            </ContentWrapper>
+        );
+    }
+
+}
+
+PlenoSanksi.Layout = BasePage;
+export default PlenoSanksi;
+
+

pages/signature/letter/done/[id].js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import BasePage from "@/components/Layout/BasePage";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
+import { getOneLaporanPublic } from '@/actions/public';
+
+import Link from 'next/dist/client/link';
+class PlenoSanksi extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+
+
+        }
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+    componentDidMount = async () => {
+    };
+    render() {
+        const { dataLaporan } = this.state
+        return (
+            <div>
+                <Navbar className="navbar-color" expand="md" dark>
+                    <NavbarBrand href="/">
+                        <img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
+                    </NavbarBrand>
+                </Navbar>
+                <ContentWrapper>
+                    <div id="pageDone-TTD">
+                        <div className=' float-lg-right'>
+                            <span className=''>
+                                <img className=" main-logo-1" src="/static/img/ditbaga-logo.png" alt="gambar" />
+                                <img className="main-logo" src="/static/img/logo_kemdikbudristek.png" alt="gambar" />
+                            </span>
+                        </div>
+                        <div className='main text-center'>
+                            <img className="main" src="/static/img/success_ttd.png" alt="gambar" />
+
+                        </div>
+                        <div className='text-center'>
+                            <text className='text-1'>Tanda tangan Anda berhasil tersimpan!</text>
+                            {/* <p className=' pt-2 text-center font-color-black '>Terima kasih, dengan demikian Anda telah memberikan persetujuan terhadap Laporan Hasil Evaluasi dan Pembahasan.</p> */}
+                        </div>
+                        {/* <Link href="/app">
+                            <div className="btn-radius d-block text-center">
+                                <Button color className="btn-labeled-3">
+                                    <h4 className="p-0 mt-2">Kunjungi Aplikasi SIDALI</h4>
+                                </Button>
+                            </div>
+                        </Link> */}
+                    </div>
+
+                </ContentWrapper>
+            </div>
+
+        );
+    }
+}
+PlenoSanksi.Layout = BasePage;
+export default PlenoSanksi;