|  | @@ -84,7 +84,7 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  	componentDidMount = async () => {
 | 
	
		
			
				|  |  |  		const { query, token } = this.props;
 | 
	
		
			
				|  |  |  		const sanksi = await getOneSanksi(token, query.id);
 | 
	
		
			
				|  |  | -		const pt = sanksi.data.laporan.pt;
 | 
	
		
			
				|  |  | +		const pt = sanksi.data?.laporan?.pt;
 | 
	
		
			
				|  |  |  		this.setState({ sanksi, pt });
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -173,11 +173,18 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  |  		const { files, selectedOption, sanksi, pt } = this.state;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +		const removeFile = file => () => {
 | 
	
		
			
				|  |  | +			const newFiles = [...files]
 | 
	
		
			
				|  |  | +			newFiles.splice(newFiles.indexOf(file), 1)
 | 
	
		
			
				|  |  | +			this.setState({
 | 
	
		
			
				|  |  | +				files: newFiles,
 | 
	
		
			
				|  |  | +			});
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  |  		const thumbs = files.map((file, index) => (
 | 
	
		
			
				|  |  | -			<div md={3} key={index}>
 | 
	
		
			
				|  |  | -				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
 | 
	
		
			
				|  |  | -				<span className="text-left">{index + 1}.{file.name}</span>
 | 
	
		
			
				|  |  | -			</div>
 | 
	
		
			
				|  |  | +			<p>
 | 
	
		
			
				|  |  | +				<em className="far fa-file" />  {file.name}
 | 
	
		
			
				|  |  | +				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
 | 
	
		
			
				|  |  | +			</p>
 | 
	
		
			
				|  |  |  		));
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  		return (
 | 
	
	
		
			
				|  | @@ -226,9 +233,9 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  												>
 | 
	
		
			
				|  |  |  													{({ isSubmitting }) => (
 | 
	
		
			
				|  |  |  														<Form className="form-horizontal">
 | 
	
		
			
				|  |  | -															<FormGroup>
 | 
	
		
			
				|  |  | -																<label className="row-form-label">Status:</label>
 | 
	
		
			
				|  |  | -																<div className="row-md-10">
 | 
	
		
			
				|  |  | +															<FormGroup row>
 | 
	
		
			
				|  |  | +																<label className="col-md-2 col-form-label font-weight-bold font-color-black">Status:</label>
 | 
	
		
			
				|  |  | +																<div className="col-md-10">
 | 
	
		
			
				|  |  |  																	<Field name="status">
 | 
	
		
			
				|  |  |  																		{({ field, form }) => (
 | 
	
		
			
				|  |  |  																			<Select
 | 
	
	
		
			
				|  | @@ -250,9 +257,9 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																</div>
 | 
	
		
			
				|  |  |  															</FormGroup>
 | 
	
		
			
				|  |  |  															{selectedOption && selectedOption.value === "Rekomendasi Perbaikan" ? (
 | 
	
		
			
				|  |  | -																<FormGroup>
 | 
	
		
			
				|  |  | -																	<label className="row-form-label">Keterangan:</label>
 | 
	
		
			
				|  |  | -																	<div className="row-md-10">
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<label className="col-md-2 col-form-label">Keterangan:</label>
 | 
	
		
			
				|  |  | +																	<div className="col-md-10">
 | 
	
		
			
				|  |  |  																		<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
 | 
	
		
			
				|  |  |  																		<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  |  																		{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
 | 
	
	
		
			
				|  | @@ -262,11 +269,11 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																""
 | 
	
		
			
				|  |  |  															)}
 | 
	
		
			
				|  |  |  															{selectedOption && selectedOption.value === "Rekomendasi Perbaikan" ? (
 | 
	
		
			
				|  |  | -																<FormGroup>
 | 
	
		
			
				|  |  | -																	<label className="row-form-label">Upload Dokumen  (Opsional) :</label>
 | 
	
		
			
				|  |  | -																	<div className="row-md-10">
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
 | 
	
		
			
				|  |  | +																	<div className="col-md-10">
 | 
	
		
			
				|  |  |  																		<Field name="dokumen">
 | 
	
		
			
				|  |  | -																			{({ field, form }) => (
 | 
	
		
			
				|  |  | +																			{({ field, form, meta }) => (
 | 
	
		
			
				|  |  |  																				<DropzoneWrapper
 | 
	
		
			
				|  |  |  																					className=""
 | 
	
		
			
				|  |  |  																					onDrop={(e) => {
 | 
	
	
		
			
				|  | @@ -276,17 +283,19 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																				>
 | 
	
		
			
				|  |  |  																					{({ getRootProps, getInputProps, isDragActive }) => {
 | 
	
		
			
				|  |  |  																						return (
 | 
	
		
			
				|  |  | -																							<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | -																								<input {...getInputProps()} />
 | 
	
		
			
				|  |  | -																								<div className="dropzone-previews flex">
 | 
	
		
			
				|  |  | -																									<div className="dropzone-style-1">
 | 
	
		
			
				|  |  | -																										<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
 | 
	
		
			
				|  |  | -																											<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 {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | +																								<input name="dokumen" {...getInputProps()} />
 | 
	
		
			
				|  |  | +																								<div className="dropzone-style-1">
 | 
	
		
			
				|  |  | +																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.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>
 | 
	
		
			
				|  |  | +																								</div>
 | 
	
		
			
				|  |  |  																								<div className="d-flex align-items-center">
 | 
	
		
			
				|  |  |  																									<small className="ml-auto">
 | 
	
		
			
				|  |  |  																										<button
 | 
	
	
		
			
				|  | @@ -307,18 +316,19 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																				</DropzoneWrapper>
 | 
	
		
			
				|  |  |  																			)}
 | 
	
		
			
				|  |  |  																		</Field>
 | 
	
		
			
				|  |  | +																		{thumbs}
 | 
	
		
			
				|  |  |  																		<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | -																		<p className="mrgn-top-5">
 | 
	
		
			
				|  |  | +																		<p className="mrgn-top-5 font-color-black">
 | 
	
		
			
				|  |  |  																			Ukuran setiap dokumen maksimal 15mb
 | 
	
		
			
				|  |  |  																		</p>
 | 
	
		
			
				|  |  |  																	</div>
 | 
	
		
			
				|  |  |  																</FormGroup>
 | 
	
		
			
				|  |  |  															) : (
 | 
	
		
			
				|  |  | -																<FormGroup>
 | 
	
		
			
				|  |  | -																	<label className="row-form-label">Upload Dokumen <span className=" text-danger">*</span>:</label>
 | 
	
		
			
				|  |  | -																	<div className="row-md-10">
 | 
	
		
			
				|  |  | +																<FormGroup row>
 | 
	
		
			
				|  |  | +																	<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
 | 
	
		
			
				|  |  | +																	<div className="col-md-10">
 | 
	
		
			
				|  |  |  																		<Field name="dokumen">
 | 
	
		
			
				|  |  | -																			{({ field, form }) => (
 | 
	
		
			
				|  |  | +																			{({ field, form, meta }) => (
 | 
	
		
			
				|  |  |  																				<DropzoneWrapper
 | 
	
		
			
				|  |  |  																					className=""
 | 
	
		
			
				|  |  |  																					onDrop={(e) => {
 | 
	
	
		
			
				|  | @@ -328,17 +338,19 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																				>
 | 
	
		
			
				|  |  |  																					{({ getRootProps, getInputProps, isDragActive }) => {
 | 
	
		
			
				|  |  |  																						return (
 | 
	
		
			
				|  |  | -																							<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | -																								<input {...getInputProps()} />
 | 
	
		
			
				|  |  | -																								<div className="dropzone-previews flex">
 | 
	
		
			
				|  |  | -																									<div className="dropzone-style-1">
 | 
	
		
			
				|  |  | -																										<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
 | 
	
		
			
				|  |  | -																											<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 {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 | 
	
		
			
				|  |  | +																								<input name="dokumen" {...getInputProps()} />
 | 
	
		
			
				|  |  | +																								<div className="dropzone-style-1">
 | 
	
		
			
				|  |  | +																									<div className="center-ver-hor dropzone-previews flex">{this.state.files.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>
 | 
	
		
			
				|  |  | +																								</div>
 | 
	
		
			
				|  |  |  																								<div className="d-flex align-items-center">
 | 
	
		
			
				|  |  |  																									<small className="ml-auto">
 | 
	
		
			
				|  |  |  																										<button
 | 
	
	
		
			
				|  | @@ -359,8 +371,9 @@ class JawabanPencabutanSanksi extends Component {
 | 
	
		
			
				|  |  |  																				</DropzoneWrapper>
 | 
	
		
			
				|  |  |  																			)}
 | 
	
		
			
				|  |  |  																		</Field>
 | 
	
		
			
				|  |  | +																		{thumbs}
 | 
	
		
			
				|  |  |  																		<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
 | 
	
		
			
				|  |  | -																		<p className="mrgn-top-5">
 | 
	
		
			
				|  |  | +																		<p className="mrgn-top-5 font-color-black">
 | 
	
		
			
				|  |  |  																			Ukuran setiap dokumen maksimal 15mb
 | 
	
		
			
				|  |  |  																		</p>
 | 
	
		
			
				|  |  |  																	</div>
 |