add daftar hadir peserta

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/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

env.js

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

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;
-    }
+    }
+