commit 081024

actions/catatan.js

@@ -14,9 +14,9 @@ export const updateCatatan = async (token, id, data, _csrf) => {
 	return res.data;
 };
 
-export const getAllCatatan = async (token, id) => {
+export const getAllCatatan = async (token, id, menu) => {
 	try {
-		let url = `/catatan/${id}`;
+		let url = `/catatan/${id}?menu=${menu}`;
 		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
 		return res.data;
 	} catch (error) {
@@ -44,15 +44,37 @@ export const deleteCatatan = async (token, id) => {
 		return false;
 	}
 };
+// export const deletePeserta = async (token, data, id) => {
+// 	try {
+// 		let url = `/catatan/hadir/${id}`;
+// 		const res = await axiosAPI.delete(url, data, { headers: { Authorization: token } });
+// 		return res.data;
+// 	} catch (error) {
+// 		console.log("error", error);
+// 		return false;
+// 	}
+// };
+export const deletePeserta = async (token, data, id) => {
+	console.log(data)
+	try {
+		const res = await axiosAPI.delete(`/catatan/hadir/${id}`, {
+            headers: { Authorization: token },
+            data: data // Correctly passing the data in the request body
+        });		return res.data;
+	} catch (error) {
+		console.log("error", error.response.data);
+		return false;
+	}
+};
 
 export const addDaftarHadirPeserta = async (token, data, id) => {
-    try {
-        const res = await axiosAPI.post(`/catatan/hadir/${id}`, data, { headers: { Authorization: token } });
-        return res.data;
-    } catch (error) {
-        console.log("error", error.response.data);
-        return false;
-    }
+	try {
+		const res = await axiosAPI.post(`/catatan/hadir/${id}`, data, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error.response.data);
+		return false;
+	}
 };
 const log = async (token, id) => {
 	const getToken = await getCsrf();

components/PerpanjanganSanksi/TableRiwayatCatatan.js → components/Main/TableRiwayatCatatan.js

@@ -122,28 +122,6 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                         <td
                                         // style={{ width: "30%" }}
                                         >
-                                            {/* <span className=" float-left  d-flex mr-2">
-                                                <Button className="btn-v3" color >
-                                                    <span className="font-color-black">
-                                                       Hapus
-                                                    </span>
-                                                </Button>
-                                            </span>
-                                            <span className=" mr-2">
-                                              <Button className="btn-v3" color>
-                                                  <span className="font-color-black">
-                                                      Lihat
-                                                  </span>
-                                              </Button>
-                                          </span>
-                                            <span className="">
-                                              
-                                                <Button className="btn-v3" color>
-                                                    <span className="font-color-black">
-                                                        Edit
-                                                    </span>
-                                                </Button>
-                                            </span> */}
                                             <span className="">
                                                 <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
                                                     toggle={() => toggleDD(`ddSplit${i}`)}  >
@@ -162,16 +140,16 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                                                 text={`http://localhost:3000/signature/letter/${data?._id}`}
                                                                 options={{ asHtml: true }}
                                                             ><DropdownItem>
-                                                                    Link Dokumen
+                                                                    Link Dokumen Berita Acara
                                                                 </DropdownItem>
                                                             </CopyToClipboard>
                                                         }
-                                                         {ENV === "development" &&
+                                                        {ENV === "development" &&
                                                             <CopyToClipboard
                                                                 text={`http://dev.sidali.kemdikbud.go.id/signature/letter/${data?._id}`}
                                                                 options={{ asHtml: true }}
                                                             ><DropdownItem>
-                                                                    Link Dokumen
+                                                                    Link Dokumen Berita Acara
                                                                 </DropdownItem>
                                                             </CopyToClipboard>
                                                         }

components/PerpanjanganSanksi/presensi_print.js → components/Main/presensi_print.js

@@ -33,10 +33,10 @@ class ComponentToPrint extends React.Component {
         // const sanksi = await getOneSanksi(token, idSanksi, { all: true });
         const pt = getCatatan.data?.isi.pt;
         const catatan = getCatatan.data
-        const judul = getCatatan.data.judul
+        const judul = getCatatan.data?.judul
 
-        const tempat = catatan.isi.tempat
-        const setTanggal = catatan.isi.setTanggal
+        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
@@ -55,7 +55,7 @@ class ComponentToPrint extends React.Component {
             <page>
                 <div className='BA-Header'>
                     <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                    <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    <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'>
@@ -98,13 +98,13 @@ class ComponentToPrint extends React.Component {
                                     <tr key={index}>
                                         <td>{index + 1}</td>
                                         <td style={{ width: "30%" }}>
-                                                {isi.Aspek_Perbaikan}
+                                                {isi.Aspek_Perbaikan?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
                                         </td>
                                         <td style={{ width: "30%" }}>
-                                                {isi.Laporan_Perbaikan}
+                                                {isi.Laporan_Perbaikan?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
                                         </td>
                                         <td style={{ width: "40%" }}>
-                                                {isi.Hasil_Verifikasi}
+                                                {isi.Hasil_Verifikasi?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
                                         </td>
                                     </tr>
                                 ))}
@@ -113,17 +113,17 @@ class ComponentToPrint extends React.Component {
                     </div>
                     <div className='table-b my-4 pl-4 pr-5' >
                                         <tr>
-                                            <td style={{ width: "8%" }}>Simpulan :</td>
+                                            <td style={{ width: "8%" }}>Simpulan:</td>
                                             <td >
-                                                    {this.state.simpulan}
+                                                    { 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 style={{ width: "8%" }}>Rekomendasi:</td>
                                             <td >
-                                                {this.state.rekomendasi}
+                                                {this.state.rekomendasi?.replace(/<[^>]+>/g,'').replace(/&nbsp;/g, ' ')}
                                             
                                             </td>
                                         </tr>

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 === 2024) {
+                            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/Sanksi/BeritaAcara.js

@@ -317,7 +317,7 @@ class BeritaAcara extends Component {
                 <div className='page py-5 m-0 '>
                     <div className='BA-Header'>
                         <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
+                        <h4 >LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT</h4>
                         {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
                     </div>
                     <div className='BA-body px-5 pt-3'>
@@ -585,9 +585,9 @@ class BeritaAcara extends Component {
                                     <span className="btn-radius">
                                         <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                             this.CloseCopied()
-                                        }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                        }} ><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</h5> */}
+                                            {/* <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.copied} target="Popover1" toggle={this.Copied}>
@@ -606,9 +606,9 @@ class BeritaAcara extends Component {
                                     <span className="btn-radius">
                                         <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                             this.CloseCopied()
-                                        }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                        }} ><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</h5> */}
+                                            {/* <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.copied} target="Popover1" toggle={this.Copied}>
@@ -627,9 +627,9 @@ class BeritaAcara extends Component {
                                     <span className="btn-radius">
                                         <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                             this.CloseCopied()
-                                        }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                        }} ><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</h5> */}
+                                            {/* <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.copied} target="Popover1" toggle={this.Copied}>

components/Sanksi/Modul.js

@@ -77,9 +77,9 @@ class Modul extends Component {
                             <span className="btn-radius">
                                 <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                     this.CloseCopiedd()
-                                }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                }} ><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</h5> */}
+                                    {/* <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}>
@@ -98,9 +98,9 @@ class Modul extends Component {
                             <span className="btn-radius">
                                 <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                     this.CloseCopiedd()
-                                }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                }} ><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</h5> */}
+                                    {/* <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}>
@@ -119,9 +119,9 @@ class Modul extends Component {
                             <span className="btn-radius">
                                 <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                     this.CloseCopiedd()
-                                }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                }} ><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</h5> */}
+                                    {/* <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}>

components/Sanksi/SuratBA _detail.js

@@ -49,7 +49,7 @@ class ComponentBA extends React.Component {
             <page>
                 <div className='BA-Header'>
                     <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                    <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    <h3 >LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT</h3>
                     {this.state.dataSanksi.data && (<h3 className='text-uppercase' >{this.state.dataSanksi.data.laporan.pt.nama}</h3>)}
                 </div>
                 <div className='BA-body pt-3'>
@@ -239,7 +239,7 @@ class ComponentBA extends React.Component {
                 </div>
 
                 <div id="footer">
-                    <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
+                    <span>*LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT …………. – …bulan&tahun…</span>
                 </div>
             </page>
         )

components/Sanksi/SuratBA_A.js

@@ -46,7 +46,7 @@ class ComponentToPrint extends React.Component {
             <page>
                 <div className='BA-Header'>
                     <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                    <h3 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
+                    <h3 >LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT</h3>
                     {dataLaporan.data && (<h3 className='text-uppercase' >{dataLaporan.data.pt.nama}</h3>)}
                 </div>
                 <div className='BA-body pt-3'>

pages/app/naik-sanksi/detail.js

@@ -10,6 +10,8 @@ import { connect } from "react-redux";
 import TableRiwayat from "@/components/NaikSanksi/TableRiwayat"
 import InputTanggal from "../../../components/NaikSanksi/InputTanggal";
 import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
+import { getAllCatatan } from "../../../actions/catatan";
+import TableRiwayatCatatan from "../../../components/Main/TableRiwayatCatatan";
 
 
 
@@ -34,14 +36,15 @@ class Detail extends Component {
 		const { query, token } = this.props;
 		const idSanksi = query.id;
 		const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+		const Catatan = await getAllCatatan(token, idSanksi, "Naik Sanksi")
 		const { data: listSanksi } = await getPelanggaranSanksi(token)
 		const pt = sanksi.data.laporan.pt;
-		this.setState({ sanksi, pt, listSanksi });
+		this.setState({ sanksi, pt, listSanksi, Catatan });
 
 	};
 
 	render() {
-		const { files, sanksi, pt, listSanksi } = this.state;
+		const { files, sanksi, pt, listSanksi,Catatan } = this.state;
 		const { query, token } = this.props;
 		return (
 			<ContentWrapper unwrap>
@@ -66,17 +69,39 @@ class Detail extends Component {
 
 							<Col xl="9">
 								<DetailSanksi data={sanksi.data} role={this.props.user.role.id} />
+							
+							
+							</Col>
+							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+						</Row>
+					)}
+						{sanksi.data && (
+						<Row>
+							<Col>
 								<InputTanggal query={query} token={token} data={sanksi.data} listSanksi={this.state.listSanksi} />
+							</Col>
+						</Row>
+					)}
+						{sanksi.data && (
+						<Row>
+							<Col>
 								<Card className="card-default">
 									<CardHeader>
 										<CardTitle>Riwayat</CardTitle>
 									</CardHeader>
 									<CardBody>
-										<TableRiwayat data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan} role={this.props.user.role.id}  />
+										<TableRiwayat data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan} role={this.props.user.role.id} />
 									</CardBody>
 								</Card>
 							</Col>
-							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+						</Row>
+
+					)}
+									{Catatan?.data && (
+						<Row>
+							<Col>
+								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/naik-sanksi/new_catatan" editFilePage="/app/naik-sanksi/edit_catatan" readOnly="/app/naik-sanksi/readOnly_catatan" listData={Catatan.data} />
+							</Col>
 						</Row>
 					)}
 				</div>

pages/app/naik-sanksi/edit_catatan.js

@@ -0,0 +1,504 @@
+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 === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            const 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
+        })
+    }
+
+    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") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                        <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"
+
+                                                />
+                                            </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"
+                                                />
+                                            </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,321 @@
+import React, { useRef, Component } from 'react';
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter, FormGroup } from "reactstrap";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import id from 'date-fns/locale/id';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { getAutoSave } from "@/actions/autosave";
+import ContentEditable from 'react-contenteditable'
+import { ToastContainer, toast } from "react-toastify";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Swal from 'sweetalert2';
+import Datetime from "react-datetime";
+import { getOneSanksi } from "@/actions/sanksi";
+import { addCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+class Catatan extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            judul: "",
+            tanggal: "",
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "",
+            rekomendasi: "",
+            isi: [
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                },
+            ],
+        };
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const idSanksi = query.id;
+        const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = sanksi.data?.laporan.pt;
+        this.setState({ sanksi, pt });
+
+    };
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await addCatatan(token, id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "menu": "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)
+        }));
+    };
+    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") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                        <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"
+
+                                                />
+                                            </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"
+                                                />
+                                            </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 === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "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/detail.js

@@ -20,6 +20,9 @@ import * as Yup from "yup";
 import { getCsrf } from "../../../actions/security";
 import Swal from "sweetalert2";
 import RiwayatPerbaikan from "../../../components/PencabutanSanksi/RiwayatPerbaikan";
+import { getAllCatatan } from "../../../actions/catatan";
+import TableRiwayatCatatan from "../../../components/Main/TableRiwayatCatatan";
+
 
 const checkIfFilesAreTooBig = (files) => {
 	let valid = true;
@@ -84,9 +87,11 @@ class JawabanPencabutanSanksi extends Component {
 
 	componentDidMount = async () => {
 		const { query, token } = this.props;
+		const idSanksi = query.id;
 		const sanksi = await getOneSanksi(token, query.id);
+		const Catatan = await getAllCatatan(token, idSanksi,"Pencabutan Sanksi")
 		const pt = sanksi.data?.laporan?.pt;
-		this.setState({ sanksi, pt });
+		this.setState({ sanksi, pt,Catatan });
 	};
 
 	toggleModal = () => {
@@ -172,7 +177,7 @@ class JawabanPencabutanSanksi extends Component {
 	};
 
 	render() {
-		const { files, selectedOption, sanksi, pt } = this.state;
+		const { files, selectedOption, sanksi, pt,Catatan } = this.state;
 
 		const removeFile = file => () => {
 			const newFiles = [...files]
@@ -409,6 +414,13 @@ class JawabanPencabutanSanksi extends Component {
 								<Riwayat data={sanksi.data.riwayat_jawaban_cabut_sanksi} role={this.props.user.role.id} />
 							</Col>
 						</Row>
+					)}
+						{Catatan?.data && (
+						<Row>
+							<Col>
+								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/pencabutan-sanksi/new_catatan" editFilePage="/app/pencabutan-sanksi/edit_catatan" readOnly="/app/pencabutan-sanksi/readOnly_catatan" listData={Catatan.data} />
+							</Col>
+						</Row>
 					)}
 					{sanksi.data && (
 						<Row>

pages/app/pencabutan-sanksi/edit_catatan.js

@@ -0,0 +1,513 @@
+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 === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "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
+        })
+    }
+
+    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") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                        <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"
+
+                                                />
+                                            </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"
+                                                />
+                                            </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,321 @@
+import React, { useRef, Component } from 'react';
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter, FormGroup } from "reactstrap";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import id from 'date-fns/locale/id';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { getAutoSave } from "@/actions/autosave";
+import ContentEditable from 'react-contenteditable'
+import { ToastContainer, toast } from "react-toastify";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Swal from 'sweetalert2';
+import Datetime from "react-datetime";
+import { getOneSanksi } from "@/actions/sanksi";
+import { addCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+class Catatan extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            judul: "",
+            tanggal: "",
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "",
+            rekomendasi: "",
+            isi: [
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                },
+            ],
+        };
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const idSanksi = query.id;
+        const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = sanksi.data?.laporan.pt;
+        this.setState({ sanksi, pt });
+
+    };
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await addCatatan(token, id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "menu": "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)
+        }));
+    };
+    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") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                        <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"
+
+                                                />
+                                            </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"
+                                                />
+                                            </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 === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "Perpanjangan Sanksi"
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+            }
+        }
+
+    };
+
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+    isEditTanggal = () => {
+        // this.state.isEditTanggal = !this.state.isEditTanggal
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        })
+    }
+
+    isEditTempat = () => {
+        this.setState({
+            isEditTempat: !this.state.isEditTempat,
+        })
+    }
+    handleAspek = (evt, id, field) => {
+        const newValue = evt.target.value || evt.target.innerHTML;
+
+        this.setState(prevState => ({
+            isi: prevState.isi.map((item, index) =>
+                index === id
+                    ? { ...item, [field]: newValue }
+                    : item
+            )
+        }));
+
+    };
+    addRow = () => {
+        this.setState(prevState => ({
+            isi: [
+                ...prevState.isi,
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                }
+            ]
+        }));
+    };
+    setDataCatatan = (data) => {
+        this.setState({ dataCatatan: data });
+    }
+
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-8">
+
+                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" value={this.state.judul} disabled={true} />
+                                </div>
+                                <div className="col-md-3">
+                                    {/* <span className=" d-inline-flex">
+                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
+                                            <span className="font-color-white">
+                                                Print Notulensi
+                                            </span>
+                                        </Button>
+                                    </span> */}
+                                    <span className=" d-inline-flex">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span 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/detail.js

@@ -9,7 +9,7 @@ import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
 import InputTanggal from "../../../components/PerpanjanganSanksi/InputTanggal";
 import Riwayat from "@/components/PerpanjanganSanksi/Riwayat";
-import TableRiwayatCatatan from "../../../components/PerpanjanganSanksi/TableRiwayatCatatan.js";
+import TableRiwayatCatatan from "../../../components/Main/TableRiwayatCatatan.js";
 import Newfile from "./newfile.js";
 import { getAllCatatan } from "../../../actions/catatan";
 
@@ -34,16 +34,16 @@ class Detail extends Component {
 		const { query, token } = this.props;
 		const idSanksi = query.id;
 		const sanksi = await getOneSanksi(token, idSanksi, { all: true });
-		const getCatatan = await getAllCatatan(token, idSanksi)
-		const AllCatatan = getCatatan.data
+		const Catatan = await getAllCatatan(token, idSanksi,"Perpanjangan Sanksi")
 		const pt = sanksi.data.laporan.pt;
-		this.setState({ sanksi, pt, AllCatatan });
+		this.setState({ sanksi, pt, Catatan });
+		console.log(Catatan)
 
 	};
 
 
 	render() {
-		const { files, sanksi, pt, AllCatatan } = this.state;
+		const { files, sanksi, pt, Catatan } = this.state;
 		const { query, token } = this.props;
 		return (
 			<ContentWrapper unwrap>
@@ -79,22 +79,13 @@ class Detail extends Component {
 							</Col>
 						</Row>
 					)}
-					{AllCatatan?.length ? (
+					{Catatan?.data && (
 						<Row>
 							<Col>
-								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/new_catatan" editFilePage="/app/perpanjangan-sanksi/edit_catatan" readOnly="/app/perpanjangan-sanksi/readOnly_catatan" listData={AllCatatan} />
+								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/new_catatan" editFilePage="/app/perpanjangan-sanksi/edit_catatan" readOnly="/app/perpanjangan-sanksi/readOnly_catatan" listData={Catatan.data} />
 							</Col>
 						</Row>
-					)
-						:
-						(
-							<Row>
-								<Col>
-									<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/perpanjangan-sanksi/new_catatan" editFilePage="/app/perpanjangan-sanksi/edit_catatan" readOnly="/app/perpanjangan-sanksi/readOnly_catatan" listData={AllCatatan} />
-								</Col>
-							</Row>
-						)}
-
+					)}
 					{sanksi.data && (
 						<Row>
 							<Col>

pages/app/perpanjangan-sanksi/edit_catatan.js

@@ -2,7 +2,7 @@ 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 { 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';
@@ -16,13 +16,13 @@ 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 { 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/PerpanjanganSanksi/presensi_print.js";
+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";
@@ -38,11 +38,13 @@ class EditFile extends Component {
         super(props);
         this.state = {
             tanggal: "",
+            modalRemovePeserta: false,
             setTanggal: false,
             isEditTanggal: false,
             isEditTempat: false,
             simpulan: "  ",
             rekomendasi: "  ",
+            selectedPeserta: "",
             isi: [
                 {
                     Aspek_Perbaikan: "",
@@ -68,16 +70,15 @@ class EditFile extends Component {
         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});
+        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 });
 
     }
 
@@ -168,11 +169,50 @@ class EditFile extends Component {
     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
+        })
+    }
 
     render() {
-        const { catatan, pt, isEditTanggal,tanggal } = this.state;
+        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">
@@ -193,11 +233,9 @@ class EditFile extends Component {
                                     <span className=" d-inline-flex">
                                         <ReactToPrint
                                             trigger={() => {
-                                                return <span>
-                                                    <Button color className="btn-login">
-                                                        <span className="font-color-white">
-                                                            Print Dokumen
-                                                        </span>
+                                                return <span className="btn-radius">
+
+                                                    <Button color className="ml-0 btn-v1-outline-purple">                                         Print Dokumen
                                                     </Button>
                                                 </span>
                                             }}
@@ -265,20 +303,20 @@ class EditFile extends Component {
 
                                         ,
                                         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> 
+
+                                        <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'>
@@ -322,6 +360,9 @@ class EditFile extends Component {
 
                                                             />
                                                         </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>
@@ -329,7 +370,7 @@ class EditFile extends Component {
                                     </div>
                                     <div className='table-b my-4 pl-4 pr-5' >
                                         <tr>
-                                            <td style={{ width: "8%" }}>Simpulan :</td>
+                                            <td style={{ width: "8%" }}>Simpulan&nbsp;:</td>
                                             <td >
                                                 <ContentEditable
                                                     html={this.state.simpulan}
@@ -337,13 +378,15 @@ class EditFile extends Component {
                                                     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 :</td>
+                                            <td style={{ width: "8%" }}>Rekomendasi&nbsp;:</td>
                                             <td >
                                                 <ContentEditable
                                                     html={this.state.rekomendasi}
@@ -351,43 +394,40 @@ class EditFile extends Component {
                                                     onChange={(e) => {
                                                         this.setState({ rekomendasi: e.target.value });
                                                     }}
-                                                // tagName="span"
+                                                    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>
+                                        <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" &&
@@ -399,9 +439,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0  mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -420,9 +460,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -441,9 +481,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -457,7 +497,7 @@ class EditFile extends Component {
                                 </Col>
                                 <Col>
                                     <div>
-                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} >
+                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} disabled={this.state.judul === ""} >
                                             <span className="font-color-white">
                                                 Simpan Catatan
                                             </span>

pages/app/perpanjangan-sanksi/editfile.js

@@ -22,7 +22,7 @@ pdfMake.vfs = pdfFonts.pdfMake.vfs;
 import { ENV } from '../../../env.js';
 import CopyToClipboard from "react-copy-to-clipboard";
 import ReactToPrint from "react-to-print";
-import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import 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";
@@ -68,7 +68,7 @@ class EditFile extends Component {
 
         this.setState({
             // editorState: EditorState.createWithContent(editorState)
-            editorState:catatan?.isi
+            editorState: catatan?.isi
         });
     }
 
@@ -113,7 +113,7 @@ class EditFile extends Component {
     handleGeneratePDF = () => {
         // const htmlContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
         const htmlToPrint = htmlToPdfmake(this.state.editorState)
-        const siapPrint = {content : htmlToPrint}
+        const siapPrint = { content: htmlToPrint }
         pdfMake.createPdf(siapPrint).download();
     };
     setHandleJudul = (e) => {
@@ -134,7 +134,7 @@ class EditFile extends Component {
 
     render() {
         const { editorState, catatan } = this.state;
-      console.log(editorState)
+        console.log(editorState)
         return (
             <ContentWrapper>
                 <Row>
@@ -206,7 +206,7 @@ class EditFile extends Component {
                                     },
                                   }}
                             /> */}
-                                  <SummerNote
+                            <SummerNote
                                 id='editor1'
                                 destroy={false}
                                 value={editorState}
@@ -233,24 +233,24 @@ class EditFile extends Component {
                                     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' }
-                                      ]
+                                        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)=>{
+                                onChange={(editorState) => {
                                     this.setState({
                                         editorState,
                                     });
                                 }}
-                                // onImageUpload={this.onImageUpload}
-                                // ref={this.editor}
+                            // onImageUpload={this.onImageUpload}
+                            // ref={this.editor}
 
                             />
-                            
+
                             <br />
                             <Row>
                                 <Col xl={{ size: 8, offset: 2 }}>
@@ -291,9 +291,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0  mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -312,9 +312,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -333,9 +333,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>

pages/app/perpanjangan-sanksi/new_catatan.js

@@ -17,7 +17,7 @@ class Catatan extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            judul:"",
+            judul: "",
             tanggal: "",
             setTanggal: false,
             isEditTanggal: false,
@@ -119,11 +119,14 @@ class Catatan extends Component {
     setDataCatatan = (data) => {
         this.setState({ dataCatatan: data });
     }
+    removeRow = (index) => {
+        this.setState(prevState => ({
+            isi: prevState.isi.filter((_, i) => i !== index)
+        }));
+    };
     render() {
         const { pt } = this.state
-        const { tanggal, isEditTanggal } = this.state
-        console.log(this.state.simpulan)
-
+        const { tanggal, isEditTanggal, simpulan, catatan } = this.state
         return (
             <ContentWrapper>
                 <Row>
@@ -192,20 +195,19 @@ class Catatan extends Component {
 
                                         ,
                                         telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
-                                        {/* 
-                            <ol>
-                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) =>
-                                    <li>
-                                        {value.nama}
-                                        <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                        <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> */}
+                                            }} /> */}
+                                                </li>)}
+                                        </ol>
                                     </p>
                                     <div className='table-a my-4 pl-5 pr-5' >
                                         <div className=' d-inline-block'>
@@ -249,6 +251,9 @@ class Catatan extends Component {
 
                                                             />
                                                         </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>
@@ -264,7 +269,7 @@ class Catatan extends Component {
                                                     onChange={(e) => {
                                                         this.setState({ simpulan: e.target.value });
                                                     }}
-                                                    tagName="span"
+                                                    tagName="text"
 
                                                 />
                                             </td>
@@ -281,7 +286,7 @@ class Catatan extends Component {
                                                         this.setState({ rekomendasi: e.target.value });
                                                         console.log(e)
                                                     }}
-                                                tagName="span"
+                                                    tagName="text"
                                                 />
                                             </td>
                                         </tr>

pages/app/perpanjangan-sanksi/newfile.js

@@ -30,7 +30,7 @@ class NewFile extends Component {
         super(props);
         this.editor = React.createRef();
         this.state = {
-            editorState:"<p>dfgergergr</p><p>hgrfhfghf</p><p>trhrhrt</p>" ,
+            editorState: "<p>dfgergergr</p><p>hgrfhfghf</p><p>trhrhrt</p>",
             copiedd: false,
             judul: "",
             simpan: false,
@@ -150,7 +150,7 @@ class NewFile extends Component {
                                     <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} />
                                 </div>
                             </FormGroup>
-                            
+
                             <SummerNote
                                 id='editor1'
                                 destroy={false}
@@ -178,21 +178,21 @@ class NewFile extends Component {
                                     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' }
-                                      ]
+                                        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)=>{
+                                onChange={(editorState) => {
                                     this.setState({
                                         editorState,
                                     });
                                 }}
-                                // onImageUpload={this.onImageUpload}
-                                // ref={this.editor}
+                            // onImageUpload={this.onImageUpload}
+                            // ref={this.editor}
 
                             />
                             <br />
@@ -205,9 +205,9 @@ class NewFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>

pages/app/perpanjangan-sanksi/newfile_new.js

@@ -31,7 +31,7 @@ import SummerNote from "../../../components/Extras/summernote";
 
 class NewFile extends Component {
   constructor(props) {
-    
+
     super(props);
     this.editor = React.createRef();
     this.state = {
@@ -163,27 +163,27 @@ class NewFile extends Component {
           // 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));
+          //   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));
         });
       }
     }
@@ -195,7 +195,7 @@ class NewFile extends Component {
 
     return (
       <ContentWrapper>
-                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+        <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>
@@ -252,24 +252,24 @@ class NewFile extends Component {
                 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"]],
-          ],
-        }}/>
+                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>
@@ -280,9 +280,9 @@ class NewFile extends Component {
                         <span className="btn-radius">
                           <Button color id="Popover1" className="ml-0 mb-2 btn-v1-outline-purple" onClick={() => {
                             this.CloseCopiedd()
-                          }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                          }} ><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</h5> */}
+                            {/* <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}>

pages/app/perpanjangan-sanksi/readOnly.js

@@ -22,7 +22,7 @@ pdfMake.vfs = pdfFonts.pdfMake.vfs;
 import { ENV } from '../../../env.js';
 import CopyToClipboard from "react-copy-to-clipboard";
 import ReactToPrint from "react-to-print";
-import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import ComponentToPrint from "../../../components/Main/presensi_print.js";
 import htmlToPdfmake from "html-to-pdfmake"
 import SummerNote from "../../../components/Extras/summernote";
 
@@ -33,7 +33,7 @@ class EditFile extends Component {
         super(props);
         this.state = {
             // editorState: EditorState.createEmpty(),
-            editorState:'',
+            editorState: '',
             copiedd: false,
             judul: "",
 
@@ -110,7 +110,7 @@ class EditFile extends Component {
     handleGeneratePDF = () => {
         const htmlContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
         const htmlToPrint = htmlToPdfmake(htmlContent)
-        const siapPrint = {content : htmlToPrint}
+        const siapPrint = { content: htmlToPrint }
         pdfMake.createPdf(siapPrint).download();
     };
     setHandleJudul = (e) => {
@@ -181,30 +181,30 @@ class EditFile extends Component {
                                 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,
-                                              },
+                                        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);
                                             });
-                                          };
-                        
-                                          reader.onerror = (reason) => reject(reason);
-                        
-                                          reader.readAsDataURL(file);
-                                        });
-                                      },
-                                      alt: { present: false, mandatory: false },
-                                      inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+                                        },
+                                        alt: { present: false, mandatory: false },
+                                        inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
 
                                     },
-                                  }}
+                                }}
                             />
-                                         {/* <SummerNote
+                            {/* <SummerNote
                                 id='editor1'
                                 destroy={false}
                                 value={editorState?editorState:editorState}
@@ -286,9 +286,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0  mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -307,9 +307,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -328,9 +328,9 @@ class EditFile extends Component {
                                                 <span className="btn-radius">
                                                     <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
                                                         this.CloseCopiedd()
-                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+                                                    }} ><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</h5> */}
+                                                        {/* <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}>
@@ -355,7 +355,7 @@ class EditFile extends Component {
                             </Row>
                         </Card>
                     </Col>
-              
+
                 </Row>
             </ContentWrapper>
         );

pages/app/perpanjangan-sanksi/readOnly_catatan.js

@@ -22,7 +22,7 @@ pdfMake.vfs = pdfFonts.pdfMake.vfs;
 import { ENV } from '../../../env.js';
 import CopyToClipboard from "react-copy-to-clipboard";
 import ReactToPrint from "react-to-print";
-import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+import 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";
@@ -68,7 +68,6 @@ class EditFile extends Component {
         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
@@ -180,7 +179,7 @@ class EditFile extends Component {
                                 <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}/>
+                                    <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">
@@ -193,11 +192,8 @@ class EditFile extends Component {
                                     <span className=" d-inline-flex">
                                         <ReactToPrint
                                             trigger={() => {
-                                                return <span>
-                                                    <Button color className="btn-login">
-                                                        <span className="font-color-white">
-                                                            Print Dokumen
-                                                        </span>
+                                                return <span className="btn-radius">
+                                                    <Button color className="ml-0 btn-v1-outline-purple">Print Dokumen
                                                     </Button>
                                                 </span>
                                             }}
@@ -262,24 +258,21 @@ class EditFile extends Component {
 
                                         ,
                                         telah dilakukan rapat Verifikasi dan Validasi Dokumen Usul Pencabutan Sanksi Administratif {pt && (<span>{pt.nama}</span>)}, yang dihadiri oleh:
-                                        {/* 
-                            <ol>
-                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) =>
-                                    <li>
-                                        {value.nama}
-                                        <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                        <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> */}
+                                            }} /> */}
+                                                </li>)}
+                                        </ol>
                                     </p>
                                     <div className='table-a my-4 pl-5 pr-5' >
-
-
                                         <table className=' ml-auto mr-auto'>
                                             <thead >
                                                 <tr>
@@ -329,7 +322,7 @@ class EditFile extends Component {
                                     </div>
                                     <div className='table-b my-4 pl-4 pr-5' >
                                         <tr>
-                                            <td style={{ width: "8%" }}>Simpulan :</td>
+                                            <td style={{ width: "8%" }}>Simpulan&nbsp;:</td>
                                             <td >
                                                 <ContentEditable
                                                     html={this.state.simpulan}
@@ -337,6 +330,7 @@ class EditFile extends Component {
                                                     onChange={(e) => {
                                                         this.setState({ simpulan: e.target.value });
                                                     }}
+                                                    tagName="text"
 
                                                 />
                                             </td>
@@ -344,7 +338,7 @@ class EditFile extends Component {
                                     </div>
                                     <div className='table-b my-4 pl-4 pr-5' >
                                         <tr>
-                                            <td style={{ width: "8%" }}>Rekomendasi :</td>
+                                            <td style={{ width: "8%" }}>Rekomendasi&nbsp;:</td>
                                             <td >
                                                 <ContentEditable
                                                     html={this.state.rekomendasi}
@@ -352,6 +346,8 @@ class EditFile extends Component {
                                                     onChange={(e) => {
                                                         this.setState({ rekomendasi: e.target.value });
                                                     }}
+                                                    tagName="text"
+
                                                 />
                                             </td>
                                         </tr>
@@ -389,7 +385,72 @@ class EditFile extends Component {
 
 
                             <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={() => {

pages/app/sanksi/proses.js

@@ -457,6 +457,7 @@ class ProsesSanksi extends Component {
 
 	render() {
 		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, thisclose, daftarPeserta } = this.state
+		console.log(dataUpload)
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -469,7 +470,7 @@ class ProsesSanksi extends Component {
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
-						</div>
+						</div>6
 					</div>
 					<Card className="card-default">
 						<CardBody>

pages/app/turun-sanksi/detail.js

@@ -10,6 +10,8 @@ import { connect } from "react-redux";
 import TableRiwayat from "@/components/TurunSanksi/TableRiwayat"
 import InputTanggal from "../../../components/TurunSanksi/InputTanggal";
 import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
+import { getAllCatatan } from "../../../actions/catatan";
+import TableRiwayatCatatan from "../../../components/Main/TableRiwayatCatatan";
 
 
 
@@ -34,14 +36,15 @@ class Detail extends Component {
 		const idSanksi = query.id;
 		const sanksi = await getOneSanksi(token, idSanksi, { all: true });
 		const { data: listSanksi } = await getPelanggaranSanksi(token, { down: true })
+		const Catatan = await getAllCatatan(token, idSanksi, "Turun Sanksi")
 		const pt = sanksi.data.laporan.pt;
-		this.setState({ sanksi, pt, listSanksi });
+		this.setState({ sanksi, pt, listSanksi, Catatan });
 
 	};
 
 
 	render() {
-		const { files, sanksi, pt, listSanksi } = this.state;
+		const { files, sanksi, pt, listSanksi, Catatan } = this.state;
 		const { query, token } = this.props;
 		return (
 			<ContentWrapper unwrap>
@@ -65,18 +68,38 @@ class Detail extends Component {
 						<Row>
 
 							<Col xl="9">
-								<DetailSanksi data={sanksi.data} role={this.props.user.role.id}/>
+								<DetailSanksi data={sanksi.data} role={this.props.user.role.id} />
+							</Col>
+							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+						</Row>
+					)}
+					{sanksi.data && (
+						<Row>
+							<Col>
 								<InputTanggal query={query} token={token} data={sanksi.data} listSanksi={this.state.listSanksi} />
+							</Col>
+						</Row>
+					)}
+					{sanksi.data && (
+						<Row>
+							<Col>
 								<Card className="card-default">
 									<CardHeader>
 										<CardTitle>Riwayat</CardTitle>
 									</CardHeader>
 									<CardBody>
-										<TableRiwayat data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan}role={this.props.user.role.id} />
+										<TableRiwayat data={sanksi.data.riwayat_sanksi} perbaikan={sanksi.data.perbaikan} role={this.props.user.role.id} />
 									</CardBody>
 								</Card>
 							</Col>
-							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+						</Row>
+
+					)}
+					{Catatan?.data && (
+						<Row>
+							<Col>
+								<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage="/app/turun-sanksi/new_catatan" editFilePage="/app/turun-sanksi/edit_catatan" readOnly="/app/turun-sanksi/readOnly_catatan" listData={Catatan.data} />
+							</Col>
 						</Row>
 					)}
 				</div>

pages/app/turun-sanksi/edit_catatan.js

@@ -0,0 +1,513 @@
+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 === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "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
+        })
+    }
+
+    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") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                        <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"
+
+                                                />
+                                            </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"
+                                                />
+                                            </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,321 @@
+import React, { useRef, Component } from 'react';
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter, FormGroup } from "reactstrap";
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import id from 'date-fns/locale/id';
+import CopyToClipboard from "react-copy-to-clipboard";
+import { getAutoSave } from "@/actions/autosave";
+import ContentEditable from 'react-contenteditable'
+import { ToastContainer, toast } from "react-toastify";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Swal from 'sweetalert2';
+import Datetime from "react-datetime";
+import { getOneSanksi } from "@/actions/sanksi";
+import { addCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+class Catatan extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            judul: "",
+            tanggal: "",
+            setTanggal: false,
+            isEditTanggal: false,
+            isEditTempat: false,
+            simpulan: "",
+            rekomendasi: "",
+            isi: [
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                },
+            ],
+        };
+    }
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const idSanksi = query.id;
+        const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+        const pt = sanksi.data?.laporan.pt;
+        this.setState({ sanksi, pt });
+
+    };
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await addCatatan(token, id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "menu": "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)
+        }));
+    };
+    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") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "30%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Laporan_Perbaikan}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Laporan_Perbaikan") }}
+
+                                                            />
+                                                        </td>
+
+                                                        <td style={{ width: "40%" }}>
+                                                            <ContentEditable
+                                                                html={isi.Hasil_Verifikasi}
+                                                                onChange={(evt) => { this.handleAspek(evt, index, "Hasil_Verifikasi") }}
+
+                                                            />
+                                                        </td>
+                                                        <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"
+
+                                                />
+                                            </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"
+                                                />
+                                            </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 === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token, query } = this.props;
+            const { id } = query;
+            // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
+            const toastid = toast.loading("Please wait...");
+            const added = await updateCatatan(token, this.state.catatan.sanksi_id, {
+                "judul": this.state.judul,
+                "isi": this.state,
+                "catatan_id": id,
+                "menu": "Perpanjangan Sanksi"
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+            }
+        }
+
+    };
+
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+    isEditTanggal = () => {
+        // this.state.isEditTanggal = !this.state.isEditTanggal
+        this.setState({
+            isEditTanggal: !this.state.isEditTanggal,
+        })
+    }
+
+    isEditTempat = () => {
+        this.setState({
+            isEditTempat: !this.state.isEditTempat,
+        })
+    }
+    handleAspek = (evt, id, field) => {
+        const newValue = evt.target.value || evt.target.innerHTML;
+
+        this.setState(prevState => ({
+            isi: prevState.isi.map((item, index) =>
+                index === id
+                    ? { ...item, [field]: newValue }
+                    : item
+            )
+        }));
+
+    };
+    addRow = () => {
+        this.setState(prevState => ({
+            isi: [
+                ...prevState.isi,
+                {
+                    Aspek_Perbaikan: "",
+                    Laporan_Perbaikan: "",
+                    Hasil_Verifikasi: ""
+                }
+            ]
+        }));
+    };
+    setDataCatatan = (data) => {
+        this.setState({ dataCatatan: data });
+    }
+
+    render() {
+        const { catatan, pt, isEditTanggal, tanggal } = this.state;
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-8">
+
+                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" value={this.state.judul} disabled={true} />
+                                </div>
+                                <div className="col-md-3">
+                                    {/* <span className=" d-inline-flex">
+                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
+                                            <span className="font-color-white">
+                                                Print Notulensi
+                                            </span>
+                                        </Button>
+                                    </span> */}
+                                    <span className=" d-inline-flex">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span 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

@@ -14,6 +14,9 @@ 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'
+
 
 
 
@@ -39,6 +42,21 @@ class PlenoSanksi extends Component {
     };
 
     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) => {
@@ -100,7 +118,7 @@ class PlenoSanksi extends Component {
 
 
     render() {
-        const { signature, nama, changesign } = this.state
+        const { signature, nama, changesign, catatan, pt, isEditTanggal, tanggal } = this.state
 
         return (
             <ContentWrapper unwrap>
@@ -142,12 +160,162 @@ class PlenoSanksi extends Component {
                 </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 >
-                            Klik tombol Hadir untuk melakukan tanda tangan sebagai tanda bukti kehadiran rapat
+                            <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">Hadir</h4>
+                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
                         </Button>
                     </div>
 

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

@@ -151,7 +151,7 @@ class PlenoSanksi extends Component {
                 <div className='page-sign'>
                     <div className='BA-Header'>
                         <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
-                        <h4 >LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h4>
+                        <h4 >LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT</h4>
                         {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
                     </div>
                     <div className='BA-body px-5 pt-3'>
@@ -289,7 +289,7 @@ class PlenoSanksi extends Component {
                         <p >
                             Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                         </p>
-                        <p><strong>Note: Jika Anda menyetujui laporan hasil evaluasi dan pembahasan tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
+                        <p><strong>Note: Jika Anda menyetujui LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
                         <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
                             <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
                         </Button>

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

@@ -48,7 +48,7 @@ class PlenoSanksi extends Component {
                         </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>
+                            <p className=' pt-2 text-center font-color-black '>Terima kasih, dengan demikian Anda telah memberikan persetujuan terhadap LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT.</p>
                         </div>
                         <Link href="/app">
                             <div className="btn-radius d-block text-center">

styles/bootstrap/_print.scss

@@ -211,12 +211,7 @@
           width: 50%;
           border: 1px solid #C0C0C0;
       }
-      .sign-ttd{
-          width:100% ;
-          height: 150px;
-          margin-right: auto;
-          margin-left: auto;
-      }
+
       .sign-nama{
                   background-color: rgb(206, 206, 206);
                   text-align: center;
@@ -257,6 +252,16 @@
     margin-left: auto;
     margin-right: auto;
   }
+
+.sign-ttd{
+  width:100% ;
+  height: 150px;
+  margin-right: auto;
+  margin-left: auto;
+  padding:10px;
+  padding-bottom: 30px;
+}
+
 }