| 
					
				 | 
			
			
				@@ -1,11 +1,14 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import React, { Component } from "react"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { Row, Col, Input, FormGroup } from "reactstrap"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { Row, Col, Input, FormGroup, Label } from "reactstrap"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import Select from "react-select"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import DatePicker from "react-datepicker"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import "react-datepicker/dist/react-datepicker.css"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// import "react-datepicker/dist/react-datepicker.css"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import ms from "ms"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import TmtDate from "./TmtDate"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import { addDays, addMonths } from 'date-fns'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import id from 'date-fns/locale/id'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// registerLocale('id', id) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 let Dropzone = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 class DropzoneWrapper extends Component { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -78,6 +81,7 @@ export class UploadSurat extends Component { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 			isiTmt: "", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 			awalsanksi: "", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 			akhirsanksi: "", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			tmtCheck: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -132,6 +136,9 @@ export class UploadSurat extends Component { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 	handleChangeListSanksi = (listSanksi) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		this.setState({ listSanksi }, this.toRingkasan); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 	}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	handleTmtCheck = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		this.setState({ tmtCheck: !this.state.tmtCheck }, this.toRingkasan); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 	render() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		const { files } = this.state; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -156,49 +163,98 @@ export class UploadSurat extends Component { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 						<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 					</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-				<FormGroup row className="mt-3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					<label className="col-md-2 col-form-label">Isi TMT</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					<span className="col-sm-3 float-left"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-						<DatePicker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							selected={this.state.awalsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							onChange={(awalsanksi) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-								this.setState({ awalsanksi }, this.toRingkasan) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							dateFormat="dd/MM/yyyy" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							maxDate={this.state.startDay} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							placeholderText="Dari Tanggal" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-						/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					<span className="col-sm-3 float-right"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-						<DatePicker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							selected={this.state.akhirsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							onChange={(akhirsanksi) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-								this.setState({ akhirsanksi }, this.toRingkasan) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							dateFormat="dd/MM/yyyy" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							minDate={this.state.awalsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							maxDate={addMonths(new Date(this.state.awalsanksi), 6)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							placeholderText="Sampai tanggal" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-						/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-				</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-				<FormGroup row className="mt-1"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					<label className="col-md-2 col-form-label">TMT berlaku</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					<div className="col-md-10 mt-2"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-						<b>{this.state.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-				</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-				<FormGroup row className="mt-1"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-					<label className="col-md-2 col-form-label">TMT</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<FormGroup row> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					<label className="col-md-2 col-form-label">Tidak Perlu TMT</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 					<div className="col-md-10 mt-2"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-						<b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, 'month') : "-"} bulan</b> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<div className="checkbox c-checkbox"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							<label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								<Input type="checkbox" onChange={this.handleTmtCheck} defaultChecked={this.state.tmtCheck} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								<span className="fa fa-check"></span></label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 					</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				{this.state.tmtCheck && ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					<FormGroup row className="mt-3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<span className="col-sm-3 float-left"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							<DatePicker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								selected={this.state.awalsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								onChange={(awalsanksi) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+									this.setState({ awalsanksi }, this.toRingkasan) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								dateFormat="dd/MM/yyyy" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								maxDate={this.state.startDay} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								placeholderText="Isi Tanggal" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								locale={id} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								className="form-control bg-white" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				{!this.state.tmtCheck && ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					<FormGroup row className="mt-3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<label className="col-md-2 col-form-label">Isi TMT</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<Row > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							<Col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								<FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+									<span className="ml-3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+										<DatePicker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											selected={this.state.awalsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											onChange={(awalsanksi) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+												this.setState({ awalsanksi }, this.toRingkasan) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											dateFormat="dd/MM/yyyy" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											maxDate={this.state.startDay} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											placeholderText="Dari Tanggal" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											locale={id} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											className="form-control bg-white" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+										/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+									</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							</Col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							<Col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								<FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+									<span className="ml-3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+										<DatePicker 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											selected={this.state.akhirsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											onChange={(akhirsanksi) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+												this.setState({ akhirsanksi }, this.toRingkasan) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											dateFormat="dd/MM/yyyy" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											minDate={this.state.awalsanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											maxDate={addMonths(new Date(this.state.awalsanksi), 6)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											placeholderText="Sampai tanggal" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											locale={id} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+											className="form-control bg-white" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+										/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+									</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+								</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							</Col> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						</Row> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				{!this.state.tmtCheck && ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					<FormGroup row className="mt-1"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<label className="col-md-2 col-form-label">TMT berlaku</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<div className="col-md-10 mt-2"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							<b>{this.state.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				{!this.state.tmtCheck && ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					<FormGroup row className="mt-1"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<label className="col-md-2 col-form-label">TMT</label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						<div className="col-md-10 mt-2"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							<b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, 'month') : "-"} bulan</b> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+						</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<FormGroup row className="mt-3"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 					<label className="col-md-2 col-form-label">List sanksi </label> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 					<div className="col-md-10"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 						<Select 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-							options={listSanksi} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+							options={this.props.listSanksi.map(e => ({ value: e, label: e }))} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 							formatOptionLabel={formatOptionLabel} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 							isMulti 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 							onChange={(e) => { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -244,7 +300,7 @@ export class UploadSurat extends Component { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 					</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				</FormGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-			</form> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			</form > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 |