penetapan sanksi, berita acara pleno, form berita acara,

components/Sanksi/BeritaAcara_A.js

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import { useReactToPrint } from "react-to-print";
+const BeritaAcara = () => {
+    const componentRef = useRef();
+    const handlePrint = useReactToPrint({
+        content: () => componentRef.current,
+    });
+
+    return (<>
+        <div class="print__section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12">
+                        <button onClick={handlePrint} className="print__button">  Print </button>
+                        <div ref={componentRef} className="card">
+                            <div class="float__start">
+                                <h3 class="card-title mb-3">Information</h3>
+                            </div>
+                            <hr />
+                            <div class="float__infoss">
+                                <ul>
+                                    <li> Name : <span> Dr Andrew C S Koh </span> </li>
+                                    <li> Email : <span> Andrew@gmail.com </span> </li>
+                                    <li> Gender : <span> Male </span> </li>
+                                    <li> Date of Birth : <span> 07-24-1982</span> </li>
+                                    <li> Phone No: <span> </span> 9856231456 </li>
+                                    <li> Address : <span> 26 Wyle Cop, Shrewsbury, Shropshire, SY1 1XD </span> </li>
+                                    <li> Website : <span> www.Andrew.com </span> </li>
+                                    <li> Country : <span> United states </span> </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+    )
+}
+export default BeritaAcara

components/Sanksi/Ringkasan.js

@@ -193,6 +193,31 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								</Scrollable>
 							</Col>
 						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Surat Berita Acara:</Col>
+							<Col md="8">
+								<Scrollable height="120px" className="list-group">
+									<table className="table table-bordered bg-transparent">
+										<tbody>
+											{dataUpload
+												? dataUpload.filesBeritaAcara.map((e) => (
+													<tr>
+														<td>
+															<em className="fa-lg far fa-file-code"></em>
+														</td>
+														<td>
+															<a className="text-muted" href={e.preview} download={e.name}>
+																{e.name}
+															</a>
+														</td>
+													</tr>
+												))
+												: ""}
+										</tbody>
+									</table>
+								</Scrollable>
+							</Col>
+						</FormGroup>
 					</form>
 				</Col>
 			</Row>

components/Sanksi/TablePenetapanSanksi.js

@@ -2,6 +2,12 @@ import React, { Component } from "react";
 import { Card, Table } from "reactstrap";
 import { getPelanggaran } from "@/actions/pelanggaran";
 import { connect } from "react-redux";
+import Button from "reactstrap/lib/Button";
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import Router from "next/router";
+import { ToastContainer, toast } from "react-toastify";
+
+
 
 export class TablePenetapanSanksi extends Component {
 	checkedData = [];
@@ -11,6 +17,9 @@ export class TablePenetapanSanksi extends Component {
 		this.state = {
 			pelanggaran: null,
 			checkedData: [],
+			labelSanksi: [],
+			btnDelegasi: false,
+
 		};
 	}
 
@@ -28,8 +37,46 @@ export class TablePenetapanSanksi extends Component {
 		this.props.setCheckedData(this.checkedData);
 	};
 
+	setLabelSanksi = (evt, label_sanksi) => {
+		const checked = evt.target.checked;
+		const item = evt.target.value;
+		if (checked && label_sanksi === "Ringan") this.state.labelSanksi.push({ value: item, labelSanksi: label_sanksi });
+		else if (label_sanksi === "Ringan") this.state.labelSanksi = this.state.labelSanksi.filter((e) => e.value != item);
+		console.log(this.state.labelSanksi)
+	}
+
+	// handleDelegasi = async (value) => {
+	// 	const { token, query, data } = this.props;
+	// 	let update = null;
+	// 	if (this.state.labelSanksi.length > 0) {
+	// 		data.change_role = "true";
+	// 		data.keterangan = "delegasi ke LLDIKTI"
+	// 		update = await updateLaporan(token, query, data);
+	// 		Router.push("/app/sanksi");
+	// 	}
+
+	// }
+
+	handleDelegasi = async (e) => {
+		const toastid = toast.loading("Please wait...");
+		const { query, token, data } = this.props;
+		data.change_role = "true";
+		data.keterangan = "delegasi ke LLDIKTI"
+		await updateLaporan(token, query, data);
+		toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+		Router.push({
+			pathname: "/app/sanksi",
+		});
+	};
+
+
+
+
+
+
 	render() {
-		const { pelanggaran } = this.state;
+		const { pelanggaran, labelSanksi } = this.state;
+
 		return (
 			<Card className="card-default">
 				<Table bordered hover responsive>
@@ -72,7 +119,10 @@ export class TablePenetapanSanksi extends Component {
 									<td>
 										<div className="checkbox c-checkbox">
 											<label>
-												<input type="checkbox" value={jp._id} onChange={this.onHandleChange} />
+												<input type="checkbox" value={jp._id} onChange={(evt) => {
+													this.onHandleChange(evt)
+													this.setLabelSanksi(evt, jp.label_sanksi)
+												}} />
 												<span className="fa fa-check"></span>
 											</label>
 										</div>
@@ -82,6 +132,15 @@ export class TablePenetapanSanksi extends Component {
 							: ""}
 					</tbody>
 				</Table>
+				{
+					labelSanksi.length &&
+					<Button className="btn-login" color onClick={this.handleDelegasi} >
+						<span className="font-color-white">
+							Delegasi ke LLDIKTI
+						</span>
+					</Button>
+
+				}
 			</Card>
 		);
 	}

components/Sanksi/UploadSurat.js

@@ -82,6 +82,7 @@ export class UploadSurat extends Component {
 			awalsanksi: "",
 			akhirsanksi: "",
 			tmtCheck: false,
+			filesBeritaAcara: [],
 		};
 	}
 
@@ -96,6 +97,17 @@ export class UploadSurat extends Component {
 		});
 		this.props.setUploadSuratSanksi(this.state);
 	};
+	onDropBA = (filesBeritaAcara) => {
+		this.setState({
+			filesBeritaAcara: filesBeritaAcara.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + filesBeritaAcara.length + " file(s)",
+		});
+		this.props.setUploadSuratSanksi(this.state);
+	};
 
 	uploadFiles = (e) => {
 		e.preventDefault();
@@ -140,13 +152,14 @@ export class UploadSurat extends Component {
 		this.setState({ tmtCheck: !this.state.tmtCheck }, this.toRingkasan);
 	}
 	render() {
-		const { files } = this.state;
+		const { files, filesBeritaAcara } = this.state;
 
 		const removeFile = file => () => {
 			const newFiles = [...files]
 			newFiles.splice(newFiles.indexOf(file), 1)
 			this.setState({
 				files: newFiles,
+				filesBeritaAcara: newFiles,
 			});
 		}
 		const thumbs = files.map((file, index) => (
@@ -155,6 +168,12 @@ export class UploadSurat extends Component {
 				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
 			</p>
 		));
+		const thumbsBA = filesBeritaAcara.map((file, index) => (
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
+		));
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 				<FormGroup row>
@@ -309,6 +328,46 @@ export class UploadSurat extends Component {
 						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">
+						Berita Acara<span>: &nbsp;</span><span className="text-danger">*</span>
+					</label>
+					<div className="col-md-10">
+						<DropzoneWrapper className="" onDrop={this.onDropBA}>
+							{({ getRootProps, getInputProps, isDragActive }) => {
+								return (
+									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
+										<input {...getInputProps()} />
+										<div className="dropzone-style-1">
+											<div className="center-ver-hor dropzone-previews flex">
+												{this.state.filesBeritaAcara.length > 0 ? (
+													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+													</div>
+												) : (
+													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+													</div>
+												)}
+											</div>
+										</div>
+										<div className="d-flex align-items-center">
+											<small className="ml-auto">
+												<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+													Reset dokumen
+												</button>
+											</small>
+										</div>
+									</div>
+								);
+							}}
+						</DropzoneWrapper>
+						<div>
+							{thumbsBA}
+						</div>
+						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
+					</div>
+				</FormGroup>
 			</form >
 		);
 	}

package-lock.json

@@ -9219,6 +9219,26 @@
         "raf": "^3.3.0"
       }
     },
+    "react-to-print": {
+      "version": "2.14.11",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.11.tgz",
+      "integrity": "sha512-sePHBaCtZLp8/g4d/gRyI9XQZkveZq6xoukanAHfkzlXOa7sTuXCEQOYq37lIa5MkUoxySdJxYuyClaXPa9Zpg==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
+      }
+    },
     "react-toastify": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.2.0.tgz",

package.json

@@ -100,6 +100,7 @@
     "react-redux": "^7.2.6",
     "react-select": "^3.0.4",
     "react-sticky": "^6.0.3",
+    "react-to-print": "^2.14.11",
     "react-toastify": "8.2.0",
     "react-transition-group": "4.2.2",
     "reactstrap": "^8.0.1",

pages/app/sanksi/proses.js

@@ -16,6 +16,7 @@ import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import { ToastContainer, toast } from "react-toastify";
+import BeritaAcara from "@/components/Sanksi/BeritaAcara_A";
 
 const stepNavitemStyle = {
 	backgroundColor: "#fcfcfc",
@@ -30,7 +31,7 @@ class ProsesSanksi extends Component {
 			dataUpload: null,
 			dataPelanggaran: {},
 			pelaporan: {},
-			listSanksi: []
+			listSanksi: [],
 		};
 	}
 
@@ -153,7 +154,7 @@ class ProsesSanksi extends Component {
 												})}
 												onClick={this.toggleStep("4")}
 											>
-												<h4 className="text-left my-3">4. Penetapan Sanksi</h4>
+												<h4 className="text-left my-3">4. Berita Acara Pleno</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -164,7 +165,18 @@ class ProsesSanksi extends Component {
 												})}
 												onClick={this.toggleStep("5")}
 											>
-												<h4 className="text-left my-3">5. Ringkasan</h4>
+												<h4 className="text-left my-3">5. Penetapan Sanksi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "6",
+												})}
+												onClick={this.toggleStep("6")}
+											>
+												<h4 className="text-left my-3">6. Ringkasan</h4>
 											</NavLink>
 										</NavItem>
 									</Nav>
@@ -209,7 +221,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="3">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Jenis Pelanggaran</h2>
-												<TablePenetapanSanksi setCheckedData={this.setCheckedData} />
+												<TablePenetapanSanksi setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran.data} data={pelaporan.data} />
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -222,28 +234,42 @@ class ProsesSanksi extends Component {
 											</div>
 										</TabPane>
 										<TabPane tabId="4">
+											<Card>
+												{/* <BeritaAcara /> */}
+											</Card>
+
+											<div className="d-flex">
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
+													<span className="font-color-white">Previous</span>
+												</Button>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("5")}>
+													<span className="font-color-white">Next</span>
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} />}
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} dataPelanggaran={dataPelanggaran.data} />}
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
+												<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("5")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("6")}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>
 										</TabPane>
-										<TabPane tabId="5">
+										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
 												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} /> : <Loader />}
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("5")}>
 													<span className="font-color-white">Previous</span>
 												</Button>
 												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.done}>