add signature

actions/public.js

@@ -15,6 +15,28 @@ export const addPesertaPleno = async (token, data) => {
         return false;
     }
 };
+export const addDaftarHadirPeserta = async (token, data) => {
+    const getToken = await getCsrf();
+    const _csrf = getToken.token;
+    try {
+        const res = await axiosAPI.post(`/signature?_csrf=${_csrf}`, data, { headers: { Authorization: token } });
+        return res.data;
+    } catch (error) {
+        console.log("error", error.response.data);
+        return false;
+    }
+};
+export const getDaftarHadirPeserta = async (token, id, query = {}) => {
+	try {
+		let url = `/signature/${id}`;
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
 export const getOneLaporanPublic = async (id, query = {}) => {
     try {
         let url = `public/laporan/${id}`;

components/Layout/Sidebar.js

@@ -157,6 +157,9 @@ class Sidebar extends Component {
 		if (ENV === "development") {
 			this.menu = user.role.id === 2022 ? MenuPT : user.user_id === "28DB23AE-2976-47E0-9410-241A11EE1F88" ? MenuBypass : user.role.id === 2021 ? MenuLLDIKTI : user.role.id === 2024 ? MenuReadOnly : MenuPT;
 		}
+		if (ENV === "local") {
+			this.menu = user.role.id === 2022 ? MenuPT : user.user_id === "28DB23AE-2976-47E0-9410-241A11EE1F88" ? MenuBypass : user.role.id === 2021 ? MenuLLDIKTI : user.role.id === 2024 ? MenuReadOnly : MenuPT;
+		}
 		// if (ENV === "development") {
 		// 	this.menu = user.role.id === 2022 ? MenuPT : user.role.id === 2021 ? MenuLLDIKTI : user.role.id === 2024 ? MenuReadOnly : Menu;
 		// }

components/PencabutanSanksi/Riwayat.js

@@ -14,7 +14,6 @@ function Riwayat({ data, role }) {
 			confirmButtonText: 'Oke'
 		})
 	};
-	// console.log(data.map((e)=> e.dokumen))
 	return (
 		<Card className="card-default">
 			<CardHeader>
@@ -22,7 +21,7 @@ function Riwayat({ data, role }) {
 			</CardHeader>
 			<CardBody>
 				<Datatable options={{ responsive: true }}>
-					<table className="table table-striped my-4 w-100">
+					<table className="table table-striped my-4 w-100" data-order='[ [0, "asc"]]'>
 						<thead>
 							<tr>
 								<th>Tanggal</th>
@@ -35,7 +34,9 @@ function Riwayat({ data, role }) {
 						</thead>
 						<tbody>
 							{data?.length
+							
 								? data.map((data, i) => (
+									
 								<tr>
 									<td>{moment(data.createdAt).format("DD MMMM YYYY")}</td>
 									<td>{data.status}</td>

components/PencabutanSanksi/RiwayatPerbaikan.js

@@ -21,7 +21,7 @@ function RiwayatPerbaikan({ data, role }) {
 			</CardHeader>
 			<CardBody>
 				<Datatable options={{ responsive: true }}>
-					<table className="table table-striped my-4 w-100">
+					<table className="table table-striped my-4 w-100" data-order='[ [0, "asc"]]'>
 						<thead>
 							<tr>
 								<th>Tanggal</th>

components/PerpanjanganSanksi/DetailSanksi.js

@@ -123,9 +123,11 @@ function DetailSanksi({ data, noTitle = false, role }) {
 						</Col>
 					</FormGroup>
 					<FormGroup row>
-						<Col md="4">Nomor Surat:</Col>
+						<Col md="4">Sanksi:</Col>
 						<Col md="8">
-							<strong>{data.pelanggaran.map((e) => e.sanksi)}</strong>
+							{/* <strong>{data.pelanggaran.map((e) => e.sanksi)}</strong> */}
+							{data?.pelanggaran && data.pelanggaran.map((e) => <li><strong>{e.sanksi}</strong> - {e.keterangan_sanksi}</li>)}
+
 						</Col>
 					</FormGroup>
 					<FormGroup row>

components/PerpanjanganSanksi/InputTanggal.js

@@ -205,6 +205,10 @@ class InputTanggal extends Component {
                     >
                         {({ isSubmitting }) => (
                             <Form className="form-horizontal">
+                                        <FormGroup row className="mt-3">
+                                    <label className="col-md-2 col-form-label">Sudah melakukan perpanjangan sanksi : </label>
+                                    <div className="col-md-10">{this.props.data?.riwayat_sanksi?.length}</div>
+                                    </FormGroup>
                                 <FormGroup row className="mt-3">
                                     <label className="col-md-2 col-form-label">Tanggal Perpanjangan Sanksi :</label>
                                     <div className="col-md-6">
@@ -223,7 +227,7 @@ class InputTanggal extends Component {
                                                             }}
                                                             closeOnSelect={true}
                                                             isValidDate={(e) => {
-                                                                return e.isBefore(new Date())
+                                                                return e.isBefore(new Date(this.props.data.masa_berlaku.to_date).getTime() + 86400000)
                                                             }}
 
                                                         />

components/PerpanjanganSanksi/Riwayat.js

@@ -0,0 +1,72 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+import { API_URL } from "@/env";
+import Swal from "sweetalert2";
+
+function Riwayat({ data, role }) {
+	const handleOpenAlert = () => {
+		Swal.fire({
+			icon: 'error',
+			title: 'Oops...',
+			html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+			confirmButtonColor: "#3e3a8e",
+			confirmButtonText: 'Oke'
+		})
+	};
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat Perpanjangan Sanksi</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100"  data-order='[ [2, "asc"]]'>
+						<thead>
+							<tr>
+								<th>Tanggal perpanjangan</th>
+								<th>Dokumen</th>
+								<th>Perpanjangan Ke</th>
+
+							</tr>
+						</thead>
+						<tbody>
+							{data?.length
+							
+								? data.map((data, i) => (
+									
+								<tr>
+									<td>{moment(data.masa_berlaku.from_date).format("DD MMMM YYYY")}-{moment(data.masa_berlaku.to_date).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.dokumen?.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												{role === 2024 ?
+													<a className="text-muted" onClick={handleOpenAlert}>
+														{e.judul}
+													</a>
+													:
+													<>
+													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+														{e.judul}
+													</a>
+												</>
+
+												}
+											</>
+										))}
+									</td>
+									<td>{i+1}</td>
+								</tr>
+							)) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/Sanksi/BeritaAcara.js

@@ -325,16 +325,16 @@ class BeritaAcara extends Component {
                             Pada hari ini
                             {dataSuratBA?.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 }, this.setDataSuratBA)
-                                                                            }}
-																			closeOnSelect={true}
-																			
-																		/>
+                                    <Datetime
+                                        timeFormat={false}
+                                        inputProps={{ className: "form-control" }}
+                                        value={tanggal ? new Date(tanggal) : tanggal || "Isi Tanggal"}
+                                        onChange={(tanggal) => {
+                                            this.setState({ tanggal, setTanggal: true }, this.setDataSuratBA)
+                                        }}
+                                        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}
                                     />
@@ -396,15 +396,15 @@ class BeritaAcara extends Component {
                                     {dataSuratBA?.isEditTanggal_2 &&
                                         <span style={{ textIndent: "0rem" }}>
                                             <Datetime
-																			timeFormat={false}
-																			inputProps={{ className: "form-control" }}
-																			value={tanggal_2 ? new Date(tanggal_2) : tanggal_2 || "Isi Tanggal"}
-                                                                            onChange={(tanggal_2) => {
-                                                                                this.setState({ tanggal_2, setTanggal_2: true }, this.setDataSuratBA)
-                                                                            }}
-																			closeOnSelect={true}
-																			
-																		/>
+                                                timeFormat={false}
+                                                inputProps={{ className: "form-control" }}
+                                                value={tanggal_2 ? new Date(tanggal_2) : tanggal_2 || "Isi Tanggal"}
+                                                onChange={(tanggal_2) => {
+                                                    this.setState({ tanggal_2, setTanggal_2: true }, this.setDataSuratBA)
+                                                }}
+                                                closeOnSelect={true}
+
+                                            />
                                             <button className='bg-transparent button-transparent border-0 fas fa-times-circle text-danger' onClick={this.isEditTanggal_2} />
                                             <button className='bg-transparent button-transparent border-0 fas fa-check-circle text-success' onClick={this.isEditTanggal_2}
                                             />
@@ -576,6 +576,27 @@ class BeritaAcara extends Component {
                         <p>
                             Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                         </p>
+                        {ENV === "local" &&
+                            <CopyToClipboard
+                                text={`http://localhost:3000/signature/pleno-sanksi/${dataLaporan.data?._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.CloseCopied()
+                                        }} ><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.copied} target="Popover1" toggle={this.Copied}>
+                                        <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                    </Popover>
+                                </div>
+
+                            </CopyToClipboard>
+                        }
                         {ENV === "production" &&
                             <CopyToClipboard
                                 text={`https://sidali.kemdikbud.go.id/signature/pleno-sanksi/${dataLaporan.data?._id}`}

components/Sanksi/Modul.js

@@ -0,0 +1,171 @@
+import React, { useRef, Component } from 'react';
+import { Row, Col, Button, Popover, PopoverHeader, PopoverBody, Card, CardBody, Modal, ModalBody, ModalFooter } from "reactstrap";
+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";
+
+class Modul extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedPeserta: "",
+            copiedd: false,
+
+
+        };
+    };
+
+    handleOpenAlert = () => {
+        Swal.fire({
+            icon: 'error',
+            title: 'Oops...',
+            html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+            confirmButtonColor: "#3e3a8e",
+            confirmButtonText: 'Oke'
+        })
+    };
+    CloseCopiedd = () => {
+
+        setTimeout(() => {
+            this.setState({
+                copiedd: !this.state.copiedd
+            });
+        }, 1000);
+    }
+
+    Copiedd = () => this.setState({
+        copiedd: !this.state.copiedd
+    })
+
+    render() {
+        const { dataLaporan, daftarPeserta } = this.props
+        return (
+            <div>
+                <div className=' content-heading border-radius-login'>
+                    <span className="btn-radius">
+                        {this.props.role === 2024 ?
+                            <Button color className="btn-labeled-4" onClick={this.handleOpenAlert}>
+                                <h4 className="p-0 mt-2">Print dan Download</h4>
+                            </Button> :
+                            <ReactToPrint
+                                trigger={() => {
+                                    return <span>
+                                        <Button color className="btn-labeled-4">
+                                            <h4 className="p-0 mt-2">Print dan Download</h4>
+                                        </Button>
+                                    </span>
+                                }}
+                                content={() => this.componentRef}
+                            />
+                        }
+
+                    </span>
+                </div>
+                <div style={{ display: "none" }}>
+                    <ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} />
+                </div>
+                {ENV === "local" &&
+                    <CopyToClipboard
+                        text={`http://localhost:3000/signature/modul/${dataLaporan.data?._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 === "production" &&
+                    <CopyToClipboard
+                        text={`https://sidali.kemdikbud.go.id/signature/modul/${dataLaporan.data?._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.CloseCopied()
+                                }} ><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.Copied}>
+                                <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                            </Popover>
+                        </div>
+
+                    </CopyToClipboard>
+                }
+                {ENV === "development" &&
+                    <CopyToClipboard
+                        text={`https://dev.sidali.kemdikbud.go.id/signature/modul/${dataLaporan.data?._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.CloseCopied()
+                                }} ><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.Copied}>
+                                <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                            </Popover>
+                        </div>
+
+                    </CopyToClipboard>
+                }
+
+
+                <div  >
+                    <div className='header-ttd signature-border pt-1 pb-1'>
+                        <text className='header-ttd font-weight-bold '>PESERTA RAPAT</text>
+                    </div>
+                    <div id="ttd">
+                        {daftarPeserta
+                            ? daftarPeserta.data?.daftar_kehadiran_peserta?.map((value) => (
+                                <div className='ttd-div'>
+                                    <div className='sign-ttd'>
+                                        <img
+                                            className='sign-ttd'
+                                            src={value.ttd.path} />
+                                    </div>
+                                    <div className='sign-nama'>
+                                        <text>
+                                            {value.nama}
+                                        </text>
+                                    </div>
+                                </div>
+                            )) : ""}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+
+
+export default Modul

components/Sanksi/Modul_print.js

@@ -0,0 +1,74 @@
+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 { getAutoSave } from "@/actions/autosave";
+import { getDaftarHadirPeserta } from '../../actions/public';
+
+
+
+
+class ComponentToPrint extends React.Component {
+    formData = {}
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataLaporan: {},
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+
+
+    componentDidMount = async () => {
+        const { query, token } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporan(token, id);
+        const daftarPeserta = await getDaftarHadirPeserta(token, id)
+
+        this.setState({ dataLaporan, daftarPeserta });
+
+    };
+
+    render() {
+        const { daftarPeserta} = 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">
+                            {daftarPeserta
+                                ?daftarPeserta.data?.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

pages/app/perpanjangan-sanksi/detail.js

@@ -8,6 +8,8 @@ import { getOneSanksi, addRekomendasiDelegasi } from "@/actions/sanksi";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
 import InputTanggal from "../../../components/PerpanjanganSanksi/InputTanggal";
+import Riwayat from "@/components/PerpanjanganSanksi/Riwayat";
+
 
 
 class Detail extends Component {
@@ -61,11 +63,24 @@ class Detail extends Component {
 
 							<Col xl="9">
 								<DetailSanksi data={sanksi.data} role={this.props.user.role.id} />
-								<InputTanggal query={query} token={token} data={sanksi.data} />
 							</Col>
 							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
 						</Row>
 					)}
+							{sanksi.data && (
+						<Row>
+							<Col>
+							<InputTanggal query={query} token={token} data={sanksi.data} />
+							</Col>
+						</Row>
+						)}
+					{sanksi.data && (
+						<Row>
+							<Col>
+								<Riwayat data={sanksi.data?.riwayat_sanksi} role={this.props.user.role.id} />
+							</Col>
+						</Row>
+						)}
 				</div>
 			</ContentWrapper>
 		);

pages/app/sanksi/proses.js

@@ -27,6 +27,8 @@ import { ENV } from "../../../env";
 import Swal from "sweetalert2";
 import Redudansi from "../../../components/Sanksi/Redudansi";
 import { createLog } from "../../../actions/log";
+import Modul from "../../../components/Sanksi/Modul";
+import { getDaftarHadirPeserta } from "../../../actions/public";
 
 
 
@@ -58,12 +60,13 @@ class ProsesSanksi extends Component {
 		const { query, token } = this.props;
 		const { id } = query;
 		const pelaporan = await getOneLaporan(token, id);
+		const daftarPeserta = await getDaftarHadirPeserta(token, id)
 		const { data: listSanksi } = await getPelanggaranSanksi(token)
 		const getDataSave = await getAutoSave({ id, laporan: true });
 		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
 		const dataform = getDataSave.data?.PenetapanSanksi?.dataUpload
 		const activeStep = getDataSave.data?.PenetapanSanksi?.activeStep
-		this.setState({ pelaporan, listSanksi, activeStep: activeStep || "1" });
+		this.setState({daftarPeserta, pelaporan, listSanksi, activeStep: activeStep || "1" });
 		this.setState({ dataPelanggaran: autoSaveDataPelanggaran, dataUpload:dataform })
 	
 	};
@@ -452,7 +455,7 @@ class ProsesSanksi extends Component {
 	};
 
 	render() {
-		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, thisclose } = this.state
+		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, thisclose, daftarPeserta } = this.state
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -557,6 +560,19 @@ class ProsesSanksi extends Component {
 												<h4 className="text-left my-3">7. Ringkasan</h4>
 											</NavLink>
 										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "8",
+												})}
+												onClick={this.toggleStep("8")}
+												disabled={thisclose === "Ditutup"}
+											// onClick={this.toggleStep("6")}
+											>
+												<h4 className="text-left my-3">8. Tanda Tangan Kehadiran</h4>
+											</NavLink>
+										</NavItem>
 									</Nav>
 								</Col>
 								<Col xs="8">
@@ -730,6 +746,19 @@ class ProsesSanksi extends Component {
 												</Button>
 											</div>
 										</TabPane>
+										<TabPane tabId="8">
+											<Card>
+												<Modul query={this.props.query} dataLaporan={pelaporan} role={this.props?.user?.role.id} daftarPeserta={daftarPeserta} />
+											</Card>
+											<div className="d-flex">
+												{/* <Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
+													<span className="font-color-white">Previous</span>
+												</Button>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("6")}>
+													<span className="font-color-white">Next</span>
+												</Button> */}
+											</div>
+										</TabPane>
 									</TabContent>
 								</Col>
 							</Row>

pages/signature/modul/[id].js

@@ -0,0 +1,170 @@
+import React, { Component } from 'react';
+import BasePage from "@/components/Layout/BasePage";
+
+import { addDaftarHadirPeserta, getOneLaporanPublic, signature } from '../../../actions/public';
+import { getAutoSave } from "@/actions/autosave";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, 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 () => {
+        const { query } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporanPublic(id);
+        this.setState({ dataLaporan });
+    };
+
+    toggleModal = (value = true) => {
+        if (!value) {
+            this.setState({ modal: false });
+        } else {
+            this.setState({ modal: !this.state.modal });
+        }
+    };
+    sigPad = []
+    clear = () => {
+        this.sigPad.clear()
+    }
+    updateValueSignature = () => {
+        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
+        this.setState({
+            signature: addsig,
+            changesign: true
+
+        })
+    }
+
+    updateValueNama = (e) => {
+        this.setState({ nama: e.target.value });
+    }
+
+
+    onSubmit = async (e) => {
+
+        const { query, token } = this.props;
+        const { id } = query;
+        const sign = this.state.signature
+        const blob = await (await fetch(sign)).blob();
+        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
+        const formdata = new FormData();
+        formdata.append("ttd", files);
+        formdata.append("laporan_id", id);
+        formdata.append("nama", this.state.nama);
+        const added = await addDaftarHadirPeserta(token, formdata);
+        const toastid = toast.loading("Please wait...");
+        if (!added) {
+            swal.fire({
+                title: "Gagal Input Tanda Tangan",
+                icon: "error",
+                confirmButtonColor: "#3e3a8e",
+            });
+
+        } else {
+            swal.fire({
+                title: "Berhasil Input Tanda Tangan",
+                icon: "success",
+                confirmButtonColor: "#3e3a8e",
+            });
+            Router.push(`/signature/modul/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/modul/done/[id].js

@@ -0,0 +1,69 @@
+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 () => {
+        const { query } = this.props;
+        const { id } = query;
+        const dataLaporan = await getOneLaporanPublic(id);
+        this.setState({ dataLaporan });
+    };
+    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/app/app/mycss.scss

@@ -240,4 +240,5 @@ border-radius: 4px;
       border-width: 1px;
       border-color: #b7b7bc;
       border-radius: 8px;
-    }
+    }
+