|  | @@ -1,18 +1,33 @@
 | 
	
		
			
				|  |  |  import React, { Component } from "react";
 | 
	
		
			
				|  |  | -import { Card, CardHeader, CardFooter, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col, Table, CustomInput } from "reactstrap";
 | 
	
		
			
				|  |  | +import { Card, CardHeader, CardFooter, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col, Table, Input, FormGroup, FormFeedback, FormText } from "reactstrap";
 | 
	
		
			
				|  |  | +import Scrollable from "@/components/Common/Scrollable";
 | 
	
		
			
				|  |  |  import classnames from "classnames";
 | 
	
		
			
				|  |  |  import ContentWrapper from "@/components/Layout/ContentWrapper";
 | 
	
		
			
				|  |  | -import Link from 'next/link'
 | 
	
		
			
				|  |  | +import Link from "next/link";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const stepNavitemStyle = {
 | 
	
		
			
				|  |  |  	backgroundColor: "#fcfcfc",
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  | +let Dropzone = null;
 | 
	
		
			
				|  |  | +class DropzoneWrapper extends Component {
 | 
	
		
			
				|  |  | +	state = {
 | 
	
		
			
				|  |  | +		isClient: false,
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +	componentDidMount = () => {
 | 
	
		
			
				|  |  | +		Dropzone = require("react-dropzone").default;
 | 
	
		
			
				|  |  | +		this.setState({ isClient: true });
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +	render() {
 | 
	
		
			
				|  |  | +		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  const styleHeaderText = {
 | 
	
		
			
				|  |  |  	color: "brown",
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  	state = {
 | 
	
		
			
				|  |  |  		activeStep: "1",
 | 
	
		
			
				|  |  | +		files: [],
 | 
	
		
			
				|  |  |  		hisJenisPelanggaran: [],
 | 
	
		
			
				|  |  |  		tbljenisPelanggaran: [
 | 
	
		
			
				|  |  |  			{
 | 
	
	
		
			
				|  | @@ -427,6 +442,36 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +	onDrop = (files) => {
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			files: files.map((file) =>
 | 
	
		
			
				|  |  | +				Object.assign(file, {
 | 
	
		
			
				|  |  | +					preview: URL.createObjectURL(file),
 | 
	
		
			
				|  |  | +				})
 | 
	
		
			
				|  |  | +			),
 | 
	
		
			
				|  |  | +			stat: "Added " + files.length + " file(s)",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	uploadFiles = (e) => {
 | 
	
		
			
				|  |  | +		e.preventDefault();
 | 
	
		
			
				|  |  | +		e.stopPropagation();
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	clearFiles = (e) => {
 | 
	
		
			
				|  |  | +		e.preventDefault();
 | 
	
		
			
				|  |  | +		e.stopPropagation();
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +		this.setState({
 | 
	
		
			
				|  |  | +			files: [],
 | 
	
		
			
				|  |  | +		});
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  	// handle particular changes on each checkbox
 | 
	
		
			
				|  |  |  	onHandleChange(listName, index) {
 | 
	
		
			
				|  |  |  		//set state to checkbox and data in promise mode
 | 
	
	
		
			
				|  | @@ -508,6 +553,13 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  | +		const { files } = this.state;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		const thumbs = files.map((file, index) => (
 | 
	
		
			
				|  |  | +			<Col md={3} key={index}>
 | 
	
		
			
				|  |  | +				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
 | 
	
		
			
				|  |  | +			</Col>
 | 
	
		
			
				|  |  | +		));
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<ContentWrapper unwrap>
 | 
	
		
			
				|  |  |  				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
 | 
	
	
		
			
				|  | @@ -520,9 +572,7 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  				</div>
 | 
	
		
			
				|  |  |  				<div className="p-3">
 | 
	
		
			
				|  |  |  					<div className="content-heading">
 | 
	
		
			
				|  |  | -						<div>
 | 
	
		
			
				|  |  | -							Penetapan Sanksi
 | 
	
		
			
				|  |  | -						</div>
 | 
	
		
			
				|  |  | +						<div>Penetapan Sanksi</div>
 | 
	
		
			
				|  |  |  						<div className="ml-auto">
 | 
	
		
			
				|  |  |  							<Link href="/app/pelaporan/search">
 | 
	
		
			
				|  |  |  								<button className="btn btn-sm btn-secondary text-sm">< back</button>
 | 
	
	
		
			
				|  | @@ -553,7 +603,7 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  												})}
 | 
	
		
			
				|  |  |  												onClick={this.toggleStep("2")}
 | 
	
		
			
				|  |  |  											>
 | 
	
		
			
				|  |  | -												<h4 className="text-left my-3">2. Riwayat Evaluasi</h4>
 | 
	
		
			
				|  |  | +												<h4 className="text-left my-3">2. Hasil Evaluasi</h4>
 | 
	
		
			
				|  |  |  											</NavLink>
 | 
	
		
			
				|  |  |  										</NavItem>
 | 
	
		
			
				|  |  |  										<NavItem style={stepNavitemStyle}>
 | 
	
	
		
			
				|  | @@ -567,6 +617,28 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  												<h4 className="text-left my-3">3. Penetapan Sanksi</h4>
 | 
	
		
			
				|  |  |  											</NavLink>
 | 
	
		
			
				|  |  |  										</NavItem>
 | 
	
		
			
				|  |  | +										<NavItem style={stepNavitemStyle}>
 | 
	
		
			
				|  |  | +											<NavLink
 | 
	
		
			
				|  |  | +												tag="div"
 | 
	
		
			
				|  |  | +												className={classnames({
 | 
	
		
			
				|  |  | +													active: this.state.activeStep === "4",
 | 
	
		
			
				|  |  | +												})}
 | 
	
		
			
				|  |  | +												onClick={this.toggleStep("4")}
 | 
	
		
			
				|  |  | +											>
 | 
	
		
			
				|  |  | +												<h4 className="text-left my-3">4. Nomor Surat Keputusan Sanksi</h4>
 | 
	
		
			
				|  |  | +											</NavLink>
 | 
	
		
			
				|  |  | +										</NavItem>
 | 
	
		
			
				|  |  | +										<NavItem style={stepNavitemStyle}>
 | 
	
		
			
				|  |  | +											<NavLink
 | 
	
		
			
				|  |  | +												tag="div"
 | 
	
		
			
				|  |  | +												className={classnames({
 | 
	
		
			
				|  |  | +													active: this.state.activeStep === "5",
 | 
	
		
			
				|  |  | +												})}
 | 
	
		
			
				|  |  | +												onClick={this.toggleStep("5")}
 | 
	
		
			
				|  |  | +											>
 | 
	
		
			
				|  |  | +												<h4 className="text-left my-3">5. Ringkasan</h4>
 | 
	
		
			
				|  |  | +											</NavLink>
 | 
	
		
			
				|  |  | +										</NavItem>
 | 
	
		
			
				|  |  |  									</Nav>
 | 
	
		
			
				|  |  |  								</Col>
 | 
	
		
			
				|  |  |  								<Col xs="8">
 | 
	
	
		
			
				|  | @@ -574,8 +646,127 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  										<TabPane tabId="1">
 | 
	
		
			
				|  |  |  											<div className="pt-3 mb-3">
 | 
	
		
			
				|  |  |  												<fieldset>
 | 
	
		
			
				|  |  | -													<h2>Step 1</h2>
 | 
	
		
			
				|  |  | -													<p className="lead">Nunc pharetra, elit ut lobortis vehicula, nisl metus tincidunt mauris, vitae accumsan arcu justo sit amet odio. </p>
 | 
	
		
			
				|  |  | +													<h2>Detail Laporan</h2>
 | 
	
		
			
				|  |  | +													<form className="form-horizontal">
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">Nomor Laporan:</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<strong>987654</strong>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">Nama Perguruan Tinggi:</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<strong>Universitas Satyagama</strong>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">Jenis Pelanggaran:</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<Scrollable height="75px" className="list-group">
 | 
	
		
			
				|  |  | +																	<ul>
 | 
	
		
			
				|  |  | +																		<li>Lorem ipsum dolor sit amet.</li>
 | 
	
		
			
				|  |  | +																		<li>Lorem, ipsum dolor.</li>
 | 
	
		
			
				|  |  | +																		<li>Lorem ipsum dolor sit.</li>
 | 
	
		
			
				|  |  | +																	</ul>
 | 
	
		
			
				|  |  | +																</Scrollable>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">Keterangan Laporan:</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<Scrollable height="100px" className="list-group">
 | 
	
		
			
				|  |  | +																	<p>
 | 
	
		
			
				|  |  | +																		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
 | 
	
		
			
				|  |  | +																		perferendis facere.
 | 
	
		
			
				|  |  | +																	</p>
 | 
	
		
			
				|  |  | +																</Scrollable>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">Dibuat Pada:</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<strong>23 Januari 2022</strong>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">Status</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<div className="badge badge-info">Ditindaklanjuti</div>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<Col md="4">File Pendukung</Col>
 | 
	
		
			
				|  |  | +															<Col md="8">
 | 
	
		
			
				|  |  | +																<Scrollable height="120px" className="list-group">
 | 
	
		
			
				|  |  | +																	<table className="table table-bordered bg-transparent">
 | 
	
		
			
				|  |  | +																		<tbody>
 | 
	
		
			
				|  |  | +																			<tr>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																						database.controller.js
 | 
	
		
			
				|  |  | +																					</a>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																			</tr>
 | 
	
		
			
				|  |  | +																			<tr>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<em className="fa-lg far fa-file-image"></em>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																						baground-lg.png
 | 
	
		
			
				|  |  | +																					</a>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																			</tr>
 | 
	
		
			
				|  |  | +																			<tr>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																						picture.controller.js
 | 
	
		
			
				|  |  | +																					</a>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																			</tr>
 | 
	
		
			
				|  |  | +																			<tr>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<em className="fa-lg far fa-file-word"></em>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																						applicat-diagrams.docx
 | 
	
		
			
				|  |  | +																					</a>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																			</tr>
 | 
	
		
			
				|  |  | +																			<tr>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																						database.controller.js
 | 
	
		
			
				|  |  | +																					</a>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																			</tr>
 | 
	
		
			
				|  |  | +																			<tr>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																				<td>
 | 
	
		
			
				|  |  | +																					<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																						database.controller.js
 | 
	
		
			
				|  |  | +																					</a>
 | 
	
		
			
				|  |  | +																				</td>
 | 
	
		
			
				|  |  | +																			</tr>
 | 
	
		
			
				|  |  | +																		</tbody>
 | 
	
		
			
				|  |  | +																	</table>
 | 
	
		
			
				|  |  | +																</Scrollable>
 | 
	
		
			
				|  |  | +															</Col>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +													</form>
 | 
	
		
			
				|  |  |  												</fieldset>
 | 
	
		
			
				|  |  |  											</div>
 | 
	
		
			
				|  |  |  											<hr />
 | 
	
	
		
			
				|  | @@ -589,8 +780,50 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  										<TabPane tabId="2">
 | 
	
		
			
				|  |  |  											<div className="pt-3 mb-3">
 | 
	
		
			
				|  |  |  												<fieldset>
 | 
	
		
			
				|  |  | -													<h2>Step 2</h2>
 | 
	
		
			
				|  |  | -													<p className="lead">Nunc pharetra, elit ut lobortis vehicula, nisl metus tincidunt mauris, vitae accumsan arcu justo sit amet odio. </p>
 | 
	
		
			
				|  |  | +													<h2>Hasil Evaluasi</h2>
 | 
	
		
			
				|  |  | +													<Card className="card-default">
 | 
	
		
			
				|  |  | +														<Table bordered hover responsive>
 | 
	
		
			
				|  |  | +															<thead>
 | 
	
		
			
				|  |  | +																<tr>
 | 
	
		
			
				|  |  | +																	<th>Tanggal</th>
 | 
	
		
			
				|  |  | +																	<th>Judul Dokumen</th>
 | 
	
		
			
				|  |  | +																	<th>File Pendukung</th>
 | 
	
		
			
				|  |  | +																</tr>
 | 
	
		
			
				|  |  | +															</thead>
 | 
	
		
			
				|  |  | +															<tbody>
 | 
	
		
			
				|  |  | +																<tr>
 | 
	
		
			
				|  |  | +																	<td>23/01/2022</td>
 | 
	
		
			
				|  |  | +																	<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
 | 
	
		
			
				|  |  | +																	<td>
 | 
	
		
			
				|  |  | +																		<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																		<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																			database.controller.js
 | 
	
		
			
				|  |  | +																		</a>
 | 
	
		
			
				|  |  | +																	</td>
 | 
	
		
			
				|  |  | +																</tr>
 | 
	
		
			
				|  |  | +																<tr>
 | 
	
		
			
				|  |  | +																	<td>23/01/2022</td>
 | 
	
		
			
				|  |  | +																	<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
 | 
	
		
			
				|  |  | +																	<td>
 | 
	
		
			
				|  |  | +																		<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																		<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																			database.controller.js
 | 
	
		
			
				|  |  | +																		</a>
 | 
	
		
			
				|  |  | +																	</td>
 | 
	
		
			
				|  |  | +																</tr>
 | 
	
		
			
				|  |  | +																<tr>
 | 
	
		
			
				|  |  | +																	<td>23/01/2022</td>
 | 
	
		
			
				|  |  | +																	<td>Lorem ipsum dolor sit.</td>
 | 
	
		
			
				|  |  | +																	<td>
 | 
	
		
			
				|  |  | +																		<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																		<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																			database.controller.js
 | 
	
		
			
				|  |  | +																		</a>
 | 
	
		
			
				|  |  | +																	</td>
 | 
	
		
			
				|  |  | +																</tr>
 | 
	
		
			
				|  |  | +															</tbody>
 | 
	
		
			
				|  |  | +														</Table>
 | 
	
		
			
				|  |  | +													</Card>
 | 
	
		
			
				|  |  |  												</fieldset>
 | 
	
		
			
				|  |  |  											</div>
 | 
	
		
			
				|  |  |  											<hr />
 | 
	
	
		
			
				|  | @@ -606,8 +839,21 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  										<TabPane tabId="3">
 | 
	
		
			
				|  |  |  											<div className="pt-3 mb-3">
 | 
	
		
			
				|  |  |  												<fieldset>
 | 
	
		
			
				|  |  | -													<h2>Step 3</h2>
 | 
	
		
			
				|  |  | -													<p className="lead">Nunc pharetra, elit ut lobortis vehicula, nisl metus tincidunt mauris, vitae accumsan arcu justo sit amet odio. </p>
 | 
	
		
			
				|  |  | +													<h2>Penetapan Sanksi</h2>
 | 
	
		
			
				|  |  | +													<Card className="card-default">
 | 
	
		
			
				|  |  | +														{/* START table-responsive */}
 | 
	
		
			
				|  |  | +														<Table bordered hover responsive>
 | 
	
		
			
				|  |  | +															<thead>
 | 
	
		
			
				|  |  | +																<tr>
 | 
	
		
			
				|  |  | +																	<th>No</th>
 | 
	
		
			
				|  |  | +																	<th>Jenis Pelanggaran</th>
 | 
	
		
			
				|  |  | +																	<th>Sanksi</th>
 | 
	
		
			
				|  |  | +																	<th></th>
 | 
	
		
			
				|  |  | +																</tr>
 | 
	
		
			
				|  |  | +															</thead>
 | 
	
		
			
				|  |  | +															<tbody>{this.renderTableData()}</tbody>
 | 
	
		
			
				|  |  | +														</Table>
 | 
	
		
			
				|  |  | +													</Card>
 | 
	
		
			
				|  |  |  												</fieldset>
 | 
	
		
			
				|  |  |  											</div>
 | 
	
		
			
				|  |  |  											<hr />
 | 
	
	
		
			
				|  | @@ -615,6 +861,204 @@ class FormWizardVertical extends Component {
 | 
	
		
			
				|  |  |  												<Button color="secondary" onClick={this.toggleStep("2")}>
 | 
	
		
			
				|  |  |  													Previous
 | 
	
		
			
				|  |  |  												</Button>
 | 
	
		
			
				|  |  | +												<Button className="ml-auto" color="primary" onClick={this.toggleStep("4")}>
 | 
	
		
			
				|  |  | +													Next
 | 
	
		
			
				|  |  | +												</Button>
 | 
	
		
			
				|  |  | +											</div>
 | 
	
		
			
				|  |  | +										</TabPane>
 | 
	
		
			
				|  |  | +										<TabPane tabId="4">
 | 
	
		
			
				|  |  | +											<div className="pt-3 mb-3">
 | 
	
		
			
				|  |  | +												<fieldset>
 | 
	
		
			
				|  |  | +													<h2>Nomor Surat Keputusan Sanksi</h2>
 | 
	
		
			
				|  |  | +													<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<label className="col-md-2 col-form-label">Nomor Surat</label>
 | 
	
		
			
				|  |  | +															<div className="col-md-10">
 | 
	
		
			
				|  |  | +																<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
 | 
	
		
			
				|  |  | +																{/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
 | 
	
		
			
				|  |  | +																{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
 | 
	
		
			
				|  |  | +															</div>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +														<FormGroup row>
 | 
	
		
			
				|  |  | +															<label className="col-md-2 col-form-label">Dokumen Surat Sanksi</label>
 | 
	
		
			
				|  |  | +															<div className="col-md-10">
 | 
	
		
			
				|  |  | +																<DropzoneWrapper className="" onDrop={this.onDrop}>
 | 
	
		
			
				|  |  | +																	{({ getRootProps, getInputProps, isDragActive }) => {
 | 
	
		
			
				|  |  | +																		return (
 | 
	
		
			
				|  |  | +																			<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | +																				<input {...getInputProps()} />
 | 
	
		
			
				|  |  | +																				<div className="dropzone-previews flex">
 | 
	
		
			
				|  |  | +																					{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
 | 
	
		
			
				|  |  | +																				</div>
 | 
	
		
			
				|  |  | +																				<div className="d-flex align-items-center">
 | 
	
		
			
				|  |  | +																					<small className="ml-auto">
 | 
	
		
			
				|  |  | +																						<button type="button" className="btn btn-link" onClick={this.clearFiles}>
 | 
	
		
			
				|  |  | +																							Clear files
 | 
	
		
			
				|  |  | +																						</button>
 | 
	
		
			
				|  |  | +																					</small>
 | 
	
		
			
				|  |  | +																				</div>
 | 
	
		
			
				|  |  | +																			</div>
 | 
	
		
			
				|  |  | +																		);
 | 
	
		
			
				|  |  | +																	}}
 | 
	
		
			
				|  |  | +																</DropzoneWrapper>
 | 
	
		
			
				|  |  | +																<span className="form-text">Multiple files upload</span>
 | 
	
		
			
				|  |  | +															</div>
 | 
	
		
			
				|  |  | +														</FormGroup>
 | 
	
		
			
				|  |  | +													</form>
 | 
	
		
			
				|  |  | +												</fieldset>
 | 
	
		
			
				|  |  | +											</div>
 | 
	
		
			
				|  |  | +											<hr />
 | 
	
		
			
				|  |  | +											<div className="d-flex">
 | 
	
		
			
				|  |  | +												<Button color="secondary" onClick={this.toggleStep("3")}>
 | 
	
		
			
				|  |  | +													Previous
 | 
	
		
			
				|  |  | +												</Button>
 | 
	
		
			
				|  |  | +												<Button className="ml-auto" color="primary" onClick={this.toggleStep("5")}>
 | 
	
		
			
				|  |  | +													Next
 | 
	
		
			
				|  |  | +												</Button>
 | 
	
		
			
				|  |  | +											</div>
 | 
	
		
			
				|  |  | +										</TabPane>
 | 
	
		
			
				|  |  | +										<TabPane tabId="5">
 | 
	
		
			
				|  |  | +											<div className="pt-3 mb-3">
 | 
	
		
			
				|  |  | +												<fieldset>
 | 
	
		
			
				|  |  | +													<h2>Ringkasan</h2>
 | 
	
		
			
				|  |  | +													<Row>
 | 
	
		
			
				|  |  | +														<Col>
 | 
	
		
			
				|  |  | +															<p className="lead bb">Detail Laporan</p>
 | 
	
		
			
				|  |  | +															<form className="form-horizontal">
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Nomor Laporan:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<strong>987654</strong>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Nama Perguruan Tinggi:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<strong>Universitas Satyagama</strong>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Jenis Pelanggaran:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<Scrollable height="75px" className="list-group">
 | 
	
		
			
				|  |  | +																			<ul>
 | 
	
		
			
				|  |  | +																				<li>Lorem ipsum dolor sit amet.</li>
 | 
	
		
			
				|  |  | +																				<li>Lorem, ipsum dolor.</li>
 | 
	
		
			
				|  |  | +																				<li>Lorem ipsum dolor sit.</li>
 | 
	
		
			
				|  |  | +																			</ul>
 | 
	
		
			
				|  |  | +																		</Scrollable>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Keterangan Laporan:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<Scrollable height="100px" className="list-group">
 | 
	
		
			
				|  |  | +																			<p>
 | 
	
		
			
				|  |  | +																				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam
 | 
	
		
			
				|  |  | +																				obcaecati sed perferendis facere.
 | 
	
		
			
				|  |  | +																			</p>
 | 
	
		
			
				|  |  | +																		</Scrollable>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Dibuat Pada:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<strong>23 Januari 2022</strong>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Status</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<div className="badge badge-info">Ditindaklanjuti</div>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																
 | 
	
		
			
				|  |  | +															</form>
 | 
	
		
			
				|  |  | +														</Col>
 | 
	
		
			
				|  |  | +													</Row>
 | 
	
		
			
				|  |  | +													<Row>
 | 
	
		
			
				|  |  | +														<Col>
 | 
	
		
			
				|  |  | +															<p className="lead bb">Penetapan Sanksi</p>
 | 
	
		
			
				|  |  | +															<Card className="card-default">
 | 
	
		
			
				|  |  | +																<Table bordered hover responsive>
 | 
	
		
			
				|  |  | +																	<thead>
 | 
	
		
			
				|  |  | +																		<tr>
 | 
	
		
			
				|  |  | +																			<th>No</th>
 | 
	
		
			
				|  |  | +																			<th>Jenis Pelanggaran</th>
 | 
	
		
			
				|  |  | +																			<th>Sanksi</th>
 | 
	
		
			
				|  |  | +																		</tr>
 | 
	
		
			
				|  |  | +																	</thead>
 | 
	
		
			
				|  |  | +																	<tbody>
 | 
	
		
			
				|  |  | +																		<tr>
 | 
	
		
			
				|  |  | +																			<td>1</td>
 | 
	
		
			
				|  |  | +																			<td>
 | 
	
		
			
				|  |  | +																				<div className="media align-items-center">
 | 
	
		
			
				|  |  | +																					<div className="media-body d-flex">
 | 
	
		
			
				|  |  | +																						<div>
 | 
	
		
			
				|  |  | +																							<p>Pengelolaan perguruan tinggi tidak berprinsip nirlaba</p>
 | 
	
		
			
				|  |  | +																							<p>TMT : 6 Bulan</p>
 | 
	
		
			
				|  |  | +																							<p>Level Pelanggaran : Berat</p>
 | 
	
		
			
				|  |  | +																						</div>
 | 
	
		
			
				|  |  | +																					</div>
 | 
	
		
			
				|  |  | +																				</div>
 | 
	
		
			
				|  |  | +																			</td>
 | 
	
		
			
				|  |  | +																			<td>
 | 
	
		
			
				|  |  | +																				<div className="media align-items-center">
 | 
	
		
			
				|  |  | +																					<div className="media-body d-flex">
 | 
	
		
			
				|  |  | +																						<div>
 | 
	
		
			
				|  |  | +																							<p>Penghentian pembinaan</p>
 | 
	
		
			
				|  |  | +																							<p>Keterangan : Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan</p>
 | 
	
		
			
				|  |  | +																						</div>
 | 
	
		
			
				|  |  | +																					</div>
 | 
	
		
			
				|  |  | +																				</div>
 | 
	
		
			
				|  |  | +																			</td>
 | 
	
		
			
				|  |  | +																		</tr>
 | 
	
		
			
				|  |  | +																	</tbody>
 | 
	
		
			
				|  |  | +																</Table>
 | 
	
		
			
				|  |  | +															</Card>
 | 
	
		
			
				|  |  | +														</Col>
 | 
	
		
			
				|  |  | +													</Row>
 | 
	
		
			
				|  |  | +													<Row>
 | 
	
		
			
				|  |  | +														<Col>
 | 
	
		
			
				|  |  | +															<p className="lead bb">Nomor Surat keputusan Sanksi</p>
 | 
	
		
			
				|  |  | +															<form className="form-horizontal">
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Nomor Surat:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<strong>987654</strong>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<Col md="4">Surat Sanksi:</Col>
 | 
	
		
			
				|  |  | +																	<Col md="8">
 | 
	
		
			
				|  |  | +																		<Scrollable height="120px" className="list-group">
 | 
	
		
			
				|  |  | +																			<table className="table table-bordered bg-transparent">
 | 
	
		
			
				|  |  | +																				<tbody>
 | 
	
		
			
				|  |  | +																					<tr>
 | 
	
		
			
				|  |  | +																						<td>
 | 
	
		
			
				|  |  | +																							<em className="fa-lg far fa-file-code"></em>
 | 
	
		
			
				|  |  | +																						</td>
 | 
	
		
			
				|  |  | +																						<td>
 | 
	
		
			
				|  |  | +																							<a className="text-muted" href="">
 | 
	
		
			
				|  |  | +																								database.controller.js
 | 
	
		
			
				|  |  | +																							</a>
 | 
	
		
			
				|  |  | +																						</td>
 | 
	
		
			
				|  |  | +																					</tr>
 | 
	
		
			
				|  |  | +																				</tbody>
 | 
	
		
			
				|  |  | +																			</table>
 | 
	
		
			
				|  |  | +																		</Scrollable>
 | 
	
		
			
				|  |  | +																	</Col>
 | 
	
		
			
				|  |  | +																</FormGroup>
 | 
	
		
			
				|  |  | +															</form>
 | 
	
		
			
				|  |  | +														</Col>
 | 
	
		
			
				|  |  | +													</Row>
 | 
	
		
			
				|  |  | +												</fieldset>
 | 
	
		
			
				|  |  | +											</div>
 | 
	
		
			
				|  |  | +											<hr />
 | 
	
		
			
				|  |  | +											<div className="d-flex">
 | 
	
		
			
				|  |  | +												<Button color="secondary" onClick={this.toggleStep("4")}>
 | 
	
		
			
				|  |  | +													Previous
 | 
	
		
			
				|  |  | +												</Button>
 | 
	
		
			
				|  |  |  												<Button className="ml-auto" color="primary" onClick={this.done}>
 | 
	
		
			
				|  |  |  													Done
 | 
	
		
			
				|  |  |  												</Button>
 |