add catatan dan signature catatan

actions/catatan.js

@@ -0,0 +1,62 @@
+import axiosAPI from "../config/axios";
+import { createLog } from "./log";
+
+import { getCsrf } from "./security";
+
+export const addCatatan = async (token, id, data, _csrf) => {
+	const res = await axiosAPI.post(`/catatan/${id}`, data, { headers: { Authorization: token } });
+	await log(token, id)
+	return res.data;
+};
+export const updateCatatan = async (token, id, data, _csrf) => {
+	const res = await axiosAPI.put(`/catatan/${id}`, data, { headers: { Authorization: token } });
+	await log(token, id)
+	return res.data;
+};
+
+export const getAllCatatan = async (token, id) => {
+	try {
+		let url = `/catatan/${id}`;
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+export const getOneCatatan = async (token, id) => {
+	try {
+		let url = `/catatan/detail/${id}`;
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+export const deleteCatatan = async (token, id) => {
+	try {
+		let url = `/catatan/${id}`;
+		const res = await axiosAPI.delete(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		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;
+    }
+};
+const log = async (token, id) => {
+	const getToken = await getCsrf();
+	const _csrf = getToken.token;
+	await createLog(token, { aktivitas: `Berhasil menambah evaluasi, id: ${id}`, menu: "Pemeriksaan", _csrf: _csrf });
+
+}

components/Layout/Menu.js

@@ -152,7 +152,7 @@ const Menu = [
 	},
 	{
 		name: "Buku Panduan",
-		path: "/app/Bantuan",
+		path: "/app/bantuan",
 		icon: "fas fa-book",
 		translate: "sidebar.nav.Bantuan",
 	},

components/Layout/MenuBypass.js

@@ -152,7 +152,7 @@ const MenuBypass = [
 	},
 	{
 		name: "Buku Panduan",
-		path: "/app/Bantuan",
+		path: "/app/bantuan",
 		icon: "fas fa-book",
 		translate: "sidebar.nav.Bantuan",
 	},

components/Layout/MenuLLDIKTI.js

@@ -112,7 +112,7 @@ const MenuLLDIKTI = [
 	},
 	{
 		name: "Buku Panduan",
-		path: "/app/Bantuan",
+		path: "/app/bantuan",
 		icon: "fas fa-book",
 		translate: "sidebar.nav.Bantuan",
 	},

components/NaikSanksi/InputTanggal.js

@@ -428,7 +428,7 @@ class InputTanggal extends Component {
                                     </div>
                                 </FormGroup>
                                 <FormGroup row className="mt-3">
-                                    <label className="col-md-2 col-form-label">Dokumen Perpanjangan Sanksi : <span className="text-danger">*</span></label>
+                                    <label className="col-md-2 col-form-label">Dokumen Perubahan Sanksi : <span className="text-danger">*</span></label>
                                     <div className="col-md-10">
                                         <Field name="dokumen">
                                             {({ field, form }) => (

components/PerpanjanganSanksi/TableRiwayatCatatan.js

@@ -0,0 +1,177 @@
+import Datatable from "@/components/Tables/Datatable";
+import {
+    Button, Dropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem,
+} 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 { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+import ReactToPrint from "react-to-print";
+import ComponentToPrint from "./presensi_print";
+import { deleteCatatan } from "../../actions/catatan.js";
+import { toast } from "react-toastify";
+
+
+
+
+
+function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly }) {
+    const [dropdownState, setDropdownState] = useState(false);
+    const toggleDD = (dd) => {
+        setDropdownState(prevState => ({
+            ...prevState,
+            [dd]: !prevState[dd]
+        }));
+    };
+// const deletedcatatan = async(id)=>{
+
+//             const toastid = toast.loading("Please wait...");
+//             const added = await deleteCatatan(id);
+//             if (!added) {
+//                 toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+//             } else {
+//                 toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+//                 // Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+//             }
+// }
+    return (
+        <div className="card b ">
+            <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: "40%" }}
+                                        >
+                                            {/* <span className=" float-left  d-flex mr-2">
+                                                <Button className="btn-v3" color >
+                                                    <span className="font-color-black">
+                                                       Hapus
+                                                    </span>
+                                                </Button>
+                                            </span>
+                                            <span className=" d-flex">
+                                              <Button className="btn-v3" color>
+                                                  <span className="font-color-black">
+                                                      Lihat
+                                                  </span>
+                                              </Button>
+                                          </span>
+                                            <span className=" float-none d-flex">
+                                              
+                                                <Button className="btn-v3" color>
+                                                    <span className="font-color-black">
+                                                        Edit
+                                                    </span>
+                                                </Button>
+                                            </span> */}
+                                            <span className=" float-right mt-2">
+                                                <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
+                                                    toggle={() => toggleDD(`ddSplit${i}`)}  >
+                                                    <DropdownToggle
+                                                        data-toggle="dropdown"
+                                                        tag="span"
+                                                    >
+                                                        <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
+                                                                </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 >
+                                                           Hapus
+                                                            
+                                                            </DropdownItem>
+                                                    </DropdownMenu>
+                                                </Dropdown>
+                                            </span>
+
+
+
+                                        </td>
+                                    </tr>
+                                )) : (
+                                    ""
+                                )}
+                        </tbody>
+                    </table>
+                </Datatable>
+            </div>
+        </div>
+
+    )
+}
+
+export default TableRiwayatCatatan

components/PerpanjanganSanksi/presensi_print.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import SignatureCanvas from 'react-signature-canvas'
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
+import { connect } from "react-redux";
+import moment from "moment";
+import 'moment/locale/id'
+moment.locale('id')
+import { getOneCatatan } from '../../actions/catatan';
+
+
+
+
+class ComponentToPrint extends React.Component {
+    formData = {}
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        const catatan = getCatatan.data
+        this.setState({  catatan });
+
+    };
+
+    render() {
+        const { catatan} = this.state
+        return (
+            <page>
+                
+                    <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>
+
+            </page>
+
+
+        );
+    }
+}
+export default ComponentToPrint

components/Sanksi/Modul.js

@@ -4,12 +4,6 @@ import ComponentToPrint from "./Modul_print";
 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 { removePesertaPleno } from '../../actions/sanksi';
-import { ToastContainer, toast } from "react-toastify";
-import Router from "next/router";
-import { getCsrf } from '../../actions/security';
 import { ENV } from '../../env';
 import Swal from 'sweetalert2';
 import Datetime from "react-datetime";

env.js.bak

@@ -0,0 +1,6 @@
+// export const TOKEN=77aecfec-10ac-3b4f-ab59-3fbfbeed6324
+//export const API_URL = "http://localhost:5000/v1";
+export const ENV = "development"
+//export const API_URL = "https://dev.api.sidali.kemdikbud.go.id/v1";
+export const API_URL = "https://api.sidali.kemdikbud.go.id/v1";
+

package-lock.json

@@ -4189,11 +4189,40 @@
       }
     },
     "cross-fetch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.2.tgz",
-      "integrity": "sha512-+JhD65rDNqLbGmB3Gzs3HrEKC0aQnD+XA3SY6RjgkF88jV2q5cTc5+CwxlS3sdmLk98gpPt5CF9XRnPdlxZe6w==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
       "requires": {
-        "node-fetch": "2.6.1"
+        "node-fetch": "^2.6.12"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+          "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
       }
     },
     "cross-spawn": {
@@ -4747,6 +4776,61 @@
         "object-assign": "^4.1.1"
       }
     },
+    "draft-js-export-pdfmake": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/draft-js-export-pdfmake/-/draft-js-export-pdfmake-0.1.2.tgz",
+      "integrity": "sha512-3ZDWoSqjTbieXNi/0yXLhJ3ZG9RQ3n8R+xVP88dbRvRvX9ZRfdRy1v+m4O95K3N5fZyZsqoPIHFdRFIYoMipqg==",
+      "requires": {
+        "draft-js": "0.10.1",
+        "draft-js-utils": "1.1.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA=="
+        },
+        "draft-js": {
+          "version": "0.10.1",
+          "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.10.1.tgz",
+          "integrity": "sha512-L1oGOjdZcFcBwgtAelFe1D1CJb81DtQ+CIFkKJlJGcBgisnFjSUgH+rpTPofxVDeUSD1eRPoGevnSnHltYu2iw==",
+          "requires": {
+            "fbjs": "^0.8.7",
+            "immutable": "~3.7.4",
+            "object-assign": "^4.1.0"
+          }
+        },
+        "fbjs": {
+          "version": "0.8.18",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+          "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+          "requires": {
+            "core-js": "^1.0.0",
+            "isomorphic-fetch": "^2.1.1",
+            "loose-envify": "^1.0.0",
+            "object-assign": "^4.1.0",
+            "promise": "^7.1.1",
+            "setimmediate": "^1.0.5",
+            "ua-parser-js": "^0.7.30"
+          }
+        },
+        "ua-parser-js": {
+          "version": "0.7.37",
+          "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.37.tgz",
+          "integrity": "sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA=="
+        }
+      }
+    },
+    "draft-js-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/draft-js-utils/-/draft-js-utils-1.1.0.tgz",
+      "integrity": "sha512-smfU/x6xVWJ1Agcyj21dWXnNLU0jYjz+E8/LPovWqGzguJ/4fYQTiZ3gbbToL3EX7dvWLOfrVF/oLPXQwUinyg=="
+    },
+    "draftjs-to-html": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
+      "integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ=="
+    },
     "draftjs-utils": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
@@ -5362,9 +5446,9 @@
       },
       "dependencies": {
         "core-js": {
-          "version": "3.9.1",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz",
-          "integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg=="
+          "version": "3.37.0",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz",
+          "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug=="
         }
       }
     },
@@ -6162,7 +6246,7 @@
     "immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
-      "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
+      "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw=="
     },
     "import-cwd": {
       "version": "2.1.0",

package.json

@@ -49,7 +49,9 @@
     "datatables.net-responsive-bs": "2.2.7",
     "deep-equal": "1.1.1",
     "dotenv": "^16.0.0",
-    "draft-js": "0.11.7",
+    "draft-js": "^0.11.7",
+    "draft-js-export-pdfmake": "^0.1.2",
+    "draftjs-to-html": "^0.9.1",
     "dropzone": "^6.0.0-beta.2",
     "easy-pie-chart": "2.1.7",
     "express": "4.17.1",
@@ -57,6 +59,7 @@
     "formik": "^2.2.9",
     "get-size": "2.0.3",
     "history": "4.10.1",
+    "html-to-draftjs": "^1.5.0",
     "html5sortable": "0.11.1",
     "ika.jvectormap": "themicon/ika.jvectormap",
     "jqcloud2": "2.0.3",
@@ -135,4 +138,4 @@
     "node-sass": "4.14.1",
     "url-loader": "1.1.2"
   }
-}
+}

pages/app/perpanjangan-sanksi/detail.js

@@ -9,6 +9,9 @@ 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 Newfile from "./newfile.js";
+import {  getAllCatatan } from "../../../actions/catatan";
 
 
 
@@ -31,14 +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 pt = sanksi.data.laporan.pt;
-		this.setState({ sanksi, pt });
+		this.setState({ sanksi, pt, AllCatatan });
 
 	};
 
 
 	render() {
-		const { files, sanksi, pt } = this.state;
+		const { files, sanksi, pt, AllCatatan } = this.state;
 		const { query, token } = this.props;
 		return (
 			<ContentWrapper unwrap>
@@ -67,20 +72,26 @@ class Detail extends Component {
 							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
 						</Row>
 					)}
-							{sanksi.data && (
+					{sanksi.data && (
 						<Row>
 							<Col>
-							<InputTanggal query={query} token={token} data={sanksi.data} />
+								<InputTanggal query={query} token={token} data={sanksi.data} />
 							</Col>
 						</Row>
-						)}
+					)}
+					<Row>
+						<Col>
+
+							<TableRiwayatCatatan query={this.props.query} newFilePage ="/app/perpanjangan-sanksi/newfile" editFilePage ="/app/perpanjangan-sanksi/editfile" readOnly ="/app/perpanjangan-sanksi/readOnly" listData={AllCatatan}/>
+						</Col>
+					</Row>
 					{sanksi.data && (
 						<Row>
 							<Col>
 								<Riwayat data={sanksi.data?.riwayat_perpanjangan_sanksi} role={this.props.user.role.id} />
 							</Col>
 						</Row>
-						)}
+					)}
 				</div>
 			</ContentWrapper>
 		);

pages/app/perpanjangan-sanksi/editfile.js

@@ -0,0 +1,310 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
+// import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+// import 'draft-js/dist/Draft.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import draftToHtml from 'draftjs-to-html';
+import pdfMake from "pdfmake/build/pdfmake";
+import StateToPdfMake from "draft-js-export-pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, getOneCatatan, updateCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import { ENV } from '../../../env.js';
+import CopyToClipboard from "react-copy-to-clipboard";
+import ReactToPrint from "react-to-print";
+import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+
+
+
+
+
+
+// let blocksFromHTML;
+// let initialEditorContent;
+// if (typeof window !== 'undefined') {
+//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
+//     initialEditorContent = ContentState.createFromBlockArray(
+//         blocksFromHTML.contentBlocks,
+//         blocksFromHTML.entityMap
+//     );
+// }
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            editorState: EditorState.createEmpty(),
+            copiedd: false,
+            judul: "",
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        const catatan = getCatatan.data
+        const judul = catatan.judul
+        this.setState({ catatan, judul });
+        let blocksFromHTML;
+        let editorState;
+        if (typeof window !== 'undefined') {
+            const isi = catatan.isi
+            blocksFromHTML = convertFromHTML((isi));
+            editorState = ContentState.createFromBlockArray(
+                blocksFromHTML.contentBlocks,
+                blocksFromHTML.entityMap
+            );
+        }
+
+        this.setState({
+            editorState: EditorState.createWithContent(editorState)
+        });
+    }
+
+    onEditorStateChange = (editorState) => {
+        this.setState({
+            editorState,
+        });
+        // localStorage.setItem("editorState", draftToHtml(convertToRaw(editorState.getCurrentContent())))
+    };
+
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 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": isi,
+                "catatan_id": id
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+            }
+        }
+
+    };
+    handleGeneratePDF = () => {
+        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
+        console.log(rawContent)
+        const stateToPdfMake = new StateToPdfMake(rawContent);
+        console.log(stateToPdfMake.generate());
+
+        pdfMake.createPdf(stateToPdfMake.generate()).download();
+    };
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+
+    render() {
+        const { editorState, catatan } = this.state;
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-8">
+
+                                    <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} value={this.state.judul} />
+                                </div>
+                                <div className="col-md-3">
+                                    <span className=" d-inline-flex">
+                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
+                                            <span className="font-color-white">
+                                                Print Notulensi
+                                            </span>
+                                        </Button>
+                                    </span>
+                                    <span className=" d-inline-flex">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span>
+                                                    <Button color className="btn-login">
+                                                        <span className="font-color-white">
+                                                            Print Presensi
+                                                        </span>
+                                                    </Button>
+                                                </span>
+                                            }}
+                                            content={() => this.componentRef}
+                                        />
+                                    </span>
+                                </div>
+                            </FormGroup>
+                            <div style={{ display: "none" }}>
+                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                            </div>
+                            <Editor
+                                editorState={editorState}
+                                // wrapperClassName="demo-wrapper"
+                                // editorClassName="demo-editor"
+                                editorStyle={{ height: 500 }}
+                                wrapperClassName="wysiwig-editor-wrapper"
+                                editorClassName="form-control"
+                                onEditorStateChange={this.onEditorStateChange}
+                            />
+                            <br />
+                            <Row>
+                                <Col xl={{ size: 8, offset: 2 }}>
+                                    <div className="mb-5"  >
+                                        <div className='header-ttd signature-border pt-1 pb-1'>
+                                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
+                                        </div>
+                                        <div id="ttd">
+                                            {catatan
+                                                ? catatan.daftar_kehadiran_peserta?.map((value) => (
+                                                    <div className='ttd-div'>
+                                                        <div className='sign-ttd'>
+                                                            <img
+                                                                className='sign-ttd'
+                                                                src={value.ttd.path} />
+                                                        </div>
+                                                        <div className='sign-nama'>
+                                                            <text>
+                                                                {value.nama}
+                                                            </text>
+                                                        </div>
+                                                    </div>
+                                                )) : ""}
+                                        </div>
+                                    </div>
+                                </Col>
+                            </Row>
+
+
+                            <Row>
+                                <Col>
+                                    {ENV === "local" &&
+                                        <CopyToClipboard
+                                            text={`http://localhost:3000/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: true }}
+                                        >
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0  mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+                                    {ENV === "production" &&
+                                        <CopyToClipboard
+                                            text={`https://sidali.kemdikbud.go.id/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: true }}
+                                        >
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+                                    {ENV === "development" &&
+                                        <CopyToClipboard
+                                            text={`https://dev.sidali.kemdikbud.go.id/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: true }}
+                                        >
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+
+                                </Col>
+                                <Col>
+                                    <div>
+                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} >
+                                            <span className="font-color-white">
+                                                Simpan Catatan
+                                            </span>
+                                        </Button>
+                                    </div>
+
+                                </Col>
+                            </Row>
+
+                        </Card>
+                    </Col>
+
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(EditFile);

pages/app/perpanjangan-sanksi/newfile.js

@@ -0,0 +1,210 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
+// import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+// import 'draft-js/dist/Draft.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import draftToHtml from 'draftjs-to-html';
+import pdfMake from "pdfmake/build/pdfmake";
+import StateToPdfMake from "draft-js-export-pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+
+
+
+
+// let blocksFromHTML;
+// let initialEditorContent;
+// if (typeof window !== 'undefined') {
+//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
+//     initialEditorContent = ContentState.createFromBlockArray(
+//         blocksFromHTML.contentBlocks,
+//         blocksFromHTML.entityMap
+//     );
+// }
+
+
+class NewFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            editorState: EditorState.createEmpty(),
+            copiedd: false,
+            judul: "",
+            simpan: false,
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount() {
+        const { query } = this.props;
+        const { id } = query;
+        // let blocksFromHTML;
+        // let editorState;
+        // if (typeof window !== 'undefined') {
+        //     blocksFromHTML = convertFromHTML(localStorage.getItem("editorState"));
+        //     editorState = ContentState.createFromBlockArray(
+        //         blocksFromHTML.contentBlocks,
+        //         blocksFromHTML.entityMap
+        //     );
+        // }
+
+        // this.setState({
+        //     editorState: EditorState.createWithContent(editorState)
+        // });
+    }
+
+    onEditorStateChange = (editorState) => {
+        this.setState({
+            editorState,
+        });
+        // localStorage.setItem("editorState", draftToHtml(convertToRaw(editorState.getCurrentContent())))
+    };
+
+    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": isi,
+                "menu": "Perpanjangan Sanksi"
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${id}`);
+                // this.setState({ simpan: true })
+            }
+        }
+
+    };
+    handleGeneratePDF = () => {
+        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
+        console.log(rawContent)
+        const stateToPdfMake = new StateToPdfMake(rawContent);
+        console.log(stateToPdfMake.generate());
+
+        pdfMake.createPdf(stateToPdfMake.generate()).download();
+    };
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+
+    render() {
+        const { editorState } = 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>
+                            <Editor
+                                editorState={editorState}
+                                // wrapperClassName="demo-wrapper"
+                                // editorClassName="demo-editor"
+                                editorStyle={{ height: 500 }}
+                                wrapperClassName="wysiwig-editor-wrapper"
+                                editorClassName="form-control"
+                                onEditorStateChange={this.onEditorStateChange}
+                            />
+                            <br />
+                            
+                            <Row>
+                                <Col>
+                                    {this.state.simpan === true ?
+                                        (
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0 mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+                                        ) :
+                                        (
+                                            <div>
+                                                <span className=" text-danger">
+                                                    *Klik tombol &#39;Simpan&#39; untuk mendapatkan link presensi
+                                                </span>
+
+                                            </div>
+                                        )
+
+                                    }
+
+                                </Col>
+                                <Col>
+                                    <div>
+                                        <Button color className="btn-login float-right" onClick={this.handelSimpan} >
+                                            <span className="font-color-white">
+                                                Simpan Catatan
+                                            </span>
+                                        </Button>
+                                    </div>
+
+                                </Col>
+                            </Row>
+
+                        </Card>
+                    </Col>
+
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(NewFile);

pages/app/perpanjangan-sanksi/readOnly.js

@@ -0,0 +1,232 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
+// import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
+// import 'draft-js/dist/Draft.css';
+import dynamic from 'next/dynamic';
+const Editor = dynamic(
+    () => import('react-draft-wysiwyg').then(mod => mod.Editor),
+    { ssr: false })
+import draftToHtml from 'draftjs-to-html';
+import pdfMake from "pdfmake/build/pdfmake";
+import StateToPdfMake from "draft-js-export-pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { toast } from "react-toastify";
+import { addCatatan, getOneCatatan, updateCatatan } from "../../../actions/catatan";
+import { getCsrf } from "../../../actions/security.js";
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+import { ENV } from '../../../env.js';
+import CopyToClipboard from "react-copy-to-clipboard";
+import ReactToPrint from "react-to-print";
+import ComponentToPrint from "../../../components/PerpanjanganSanksi/presensi_print.js";
+
+
+
+
+
+
+
+// let blocksFromHTML;
+// let initialEditorContent;
+// if (typeof window !== 'undefined') {
+//     blocksFromHTML = convertFromHTML('<ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol><p>3dexcjghc</p><p></p> <ul> <li>dfgsfds</li> <li>vsdAGVDASshvdhvhvs</li> <li><span style="color: rgb(26,188,156);">vsdAGVDASshvdhvhvs</span></li> </ul> <p>sadbsghavdklhjbs</p> <p>dajdindfehjrjjnfdq</p><p style="text-align:right;">sadbsghavdklhjbs</p> <p class="text-align:center;">dajdindfehjrjjnfdq</p>');
+//     initialEditorContent = ContentState.createFromBlockArray(
+//         blocksFromHTML.contentBlocks,
+//         blocksFromHTML.entityMap
+//     );
+// }
+
+
+class EditFile extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            editorState: EditorState.createEmpty(),
+            copiedd: false,
+            judul: "",
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+
+    };
+
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const getCatatan = await getOneCatatan(token, id)
+        const catatan = getCatatan.data
+        const judul = catatan.judul
+        this.setState({ catatan, judul });
+        let blocksFromHTML;
+        let editorState;
+        if (typeof window !== 'undefined') {
+            const isi = catatan.isi
+            blocksFromHTML = convertFromHTML((isi));
+            editorState = ContentState.createFromBlockArray(
+                blocksFromHTML.contentBlocks,
+                blocksFromHTML.entityMap
+            );
+        }
+
+        this.setState({
+            editorState: EditorState.createWithContent(editorState)
+        });
+    }
+
+    onEditorStateChange = (editorState) => {
+        this.setState({
+            editorState,
+        });
+        // localStorage.setItem("editorState", draftToHtml(convertToRaw(editorState.getCurrentContent())))
+    };
+
+    handelSimpan = async (data) => {
+        if (this.props?.user?.role.id === 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": isi,
+                "catatan_id": id
+            }, _csrf);
+            if (!added) {
+                toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+            } else {
+                toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                Router.push(`/app/perpanjangan-sanksi/detail?id=${this.state.catatan.sanksi_id}`);
+            }
+        }
+
+    };
+    handleGeneratePDF = () => {
+        const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
+        console.log(rawContent)
+        const stateToPdfMake = new StateToPdfMake(rawContent);
+        console.log(stateToPdfMake.generate());
+
+        pdfMake.createPdf(stateToPdfMake.generate()).download();
+    };
+    setHandleJudul = (e) => {
+        this.setState({ judul: e.target.value });
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+
+    render() {
+        const { editorState, catatan } = this.state;
+        return (
+            <ContentWrapper>
+                <Row>
+                    <Col lg={12}>
+                        <Card body className="card-default">
+                            <FormGroup row>
+                                <label className="col-md-1  col-form-label">Judul Catatan</label>
+                                <div className="col-md-8">
+                                    <div className="col-md-11">
+                                        <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" value={this.state.judul} disabled={true} />
+                                    </div>                                </div>
+                                <div className="col-md-3">
+                                    <span className=" d-inline-flex">
+                                        <Button className="btn-login mr-2" color onClick={this.handleGeneratePDF}>
+                                            <span className="font-color-white">
+                                                Print Notulensi
+                                            </span>
+                                        </Button>
+                                    </span>
+                                    <span className=" d-inline-flex">
+                                        <ReactToPrint
+                                            trigger={() => {
+                                                return <span>
+                                                    <Button color className="btn-login">
+                                                        <span className="font-color-white">
+                                                            Print Presensi
+                                                        </span>
+                                                    </Button>
+                                                </span>
+                                            }}
+                                            content={() => this.componentRef}
+                                        />
+                                    </span>
+                                </div>
+                            </FormGroup>
+                            <div style={{ display: "none" }}>
+                                <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                            </div>
+                            <Editor
+                                readOnly={true}
+                                toolbarHidden={true}
+                                editorState={editorState}
+                                // wrapperClassName="demo-wrapper"
+                                // editorClassName="demo-editor"
+                                editorStyle={{ height: 500 }}
+                                wrapperClassName="wysiwig-editor-wrapper"
+                                editorClassName="form-control"
+                                onEditorStateChange={this.onEditorStateChange}
+                            />
+                            <br />
+                            <Row>
+                                <Col xl={{ size: 8, offset: 2 }}>
+                                    <div className="mb-5"  >
+                                        <div className='header-ttd signature-border pt-1 pb-1'>
+                                            <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
+                                        </div>
+                                        <div id="ttd">
+                                            {catatan
+                                                ? catatan.daftar_kehadiran_peserta?.map((value) => (
+                                                    <div className='ttd-div'>
+                                                        <div className='sign-ttd'>
+                                                            <img
+                                                                className='sign-ttd'
+                                                                src={value.ttd.path} />
+                                                        </div>
+                                                        <div className='sign-nama'>
+                                                            <text>
+                                                                {value.nama}
+                                                            </text>
+                                                        </div>
+                                                    </div>
+                                                )) : ""}
+                                        </div>
+                                    </div>
+                                </Col>
+                            </Row>
+                        </Card>
+                    </Col>
+
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(EditFile);

pages/signature/letter/[id].js

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

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

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

styles/bootstrap/_buttons.scss

@@ -313,7 +313,11 @@ border-radius: 7px !important;
   border: #3e3a8e solid 2px;
   border-radius: 7px !important;
 }
-
+.btn-v3 {
+  background: transparent;
+  border: #a1a1a3 solid 1px;
+  border-radius: 7px !important;
+}
 .navbar-color {
   background-color: $colortheme;
 }