Revisi interface penetapan sanksi

components/BypassII/UploadSurat.js

@@ -184,20 +184,20 @@ export class UploadSurat_Bypass extends Component {
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Nomor Surat<span className="text-danger">*</span></label>
-					<div className="col-md-10">
+					<label className="col-md-4 col-form-label">Nomor Surat<span className="text-danger">*</span></label>
+					<div className="col-md-8">
 						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e) }} />
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Keterangan<span className="text-danger">*</span></label>
-					<div className="col-md-10">
+					<label className="col-md-4 col-form-label">Keterangan<span className="text-danger">*</span></label>
+					<div className="col-md-8">
 						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e) }} required />
 					</div>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
-					<div className="col-md-10 mt-2">
+					<label className="col-md-4 col-form-label">Tidak Perlu TMT</label>
+					<div className="col-md-8 mt-2">
 						<div className="checkbox c-checkbox">
 							<label>
 								<Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tidakPerluTMTCheck} />
@@ -207,7 +207,7 @@ export class UploadSurat_Bypass extends Component {
 				</FormGroup>
 				{/* {this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-3">
-						<label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
+						<label className="col-md-4 col-form-label">Tanggal Penetapan Sanksi</label>
 						<span className="col-sm-3 float-left">
 							<DatePicker
 								selected={this.state.awalTMT ? new Date(this.state.awalTMT) : this.state.awalTMT}
@@ -225,7 +225,7 @@ export class UploadSurat_Bypass extends Component {
 				)} */}
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-3">
-						<label className="col-md-2 col-form-label">Isi TMT</label>
+						<label className="col-md-4 col-form-label">Isi TMT</label>
 						<Row >
 							<Col>
 								<FormGroup>
@@ -269,23 +269,23 @@ export class UploadSurat_Bypass extends Component {
 				)}
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-1">
-						<label className="col-md-2 col-form-label">TMT berlaku</label>
-						<div className="col-md-10 mt-2">
+						<label className="col-md-4 col-form-label">TMT berlaku</label>
+						<div className="col-md-8 mt-2">
 							<b>{this.state.awalTMT ? moment(this.state.awalTMT).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirTMT ? moment(this.state.akhirTMT).format("DD-MM-YYYY") : "-"}</b>
 						</div>
 					</FormGroup>
 				)}
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-1">
-						<label className="col-md-2 col-form-label">TMT</label>
-						<div className="col-md-10 mt-2">
+						<label className="col-md-4 col-form-label">TMT</label>
+						<div className="col-md-8 mt-2">
 							<b>{this.state.akhirTMT ? moment(this.state.akhirTMT).diff(this.state.awalTMT, '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">
+					<label className="col-md-4 col-form-label">List sanksi </label>
+					<div className="col-md-8">
 						<Select
 							options={this.props.listSanksi.map(e => ({ value: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
 							isMulti
@@ -297,10 +297,10 @@ export class UploadSurat_Bypass extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">
+					<label className="col-md-4 col-form-label">
 						Dokumen Surat Sanksi<span className="text-danger">*</span>
 					</label>
-					<div className="col-md-10">
+					<div className="col-md-8">
 						<DropzoneWrapper className="" onDrop={this.onDrop}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
 								return (
@@ -337,10 +337,10 @@ export class UploadSurat_Bypass extends Component {
 					</div>
 				</FormGroup>
 				{/* <FormGroup row>
-					<label className="col-md-2 col-form-label">
+					<label className="col-md-4 col-form-label">
 						Dokumen Laporan Evaluasi dan Pembahasan
 					</label>
-					<div className="col-md-10">
+					<div className="col-md-8">
 
 						<div style={{ display: "none" }}>
 							<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
@@ -358,8 +358,8 @@ export class UploadSurat_Bypass extends Component {
 					</div>
 				</FormGroup> */}
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
-					<span className="col-sm-3 float-left">
+					<label className="col-md-4 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
+					<span className="col-sm-8 float-left">
 						<DatePicker
 							selected={this.state.terimaSuratSanksi ? new Date(this.state.terimaSuratSanksi) : this.state.terimaSuratSanksi}
 							onChange={(terimaSuratSanksi) => {
@@ -367,17 +367,17 @@ export class UploadSurat_Bypass extends Component {
 							}}
 							dateFormat="dd/MM/yyyy"
 							minDate={new Date(this.state.awalTMT)}
-							placeholderText="Isi Tanggal"
+							placeholderText="DD/MM/YYYY"
 							locale={id}
 							className="form-control bg-white"
 						/>
 					</span>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">
+					<label className="col-md-4 col-form-label">
 						Dokumen Tanda Terima Surat Sanksi<span className="text-danger">*</span>
 					</label>
-					<div className="col-md-10">
+					<div className="col-md-8">
 						<DropzoneWrapper className="" onDrop={this.onDropTandaTerimaSS}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
 								return (
@@ -415,12 +415,12 @@ export class UploadSurat_Bypass extends Component {
 				</FormGroup>
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-3">
-						<label className="col-md-2 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
+						<label className="col-md-4 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
 							<p>
 								Note : 21 hari kerja
 							</p>
 						</label>
-						<span className="col-sm-3 float-left">
+						<span className="col-sm-8 float-left">
 							<DatePicker
 								selected={this.state.tglAkhirKeberatan ? new Date(this.state.tglAkhirKeberatan) : this.state.tglAkhirKeberatan}
 								onChange={(tglAkhirKeberatan) => {
@@ -428,7 +428,7 @@ export class UploadSurat_Bypass extends Component {
 								}}
 								dateFormat="dd/MM/yyyy"
 								minDate={new Date(terimaSuratSanksi)}
-								placeholderText="Isi Tanggal"
+								placeholderText="DD/MM/YYYY"
 								locale={id}
 								className="form-control bg-white"
 							/>

components/Extras/calendar.view.js

@@ -24,6 +24,7 @@ import 'moment/locale/id';
 import { getCsrf } from "../../actions/security";
 import { createLog } from "../../actions/log";
 moment.locale('id')
+import Swal from "sweetalert2";
 
 
 const status = [
@@ -135,47 +136,43 @@ class Calendar extends Component {
 	}
 
 	handleEventCalendar = async (data) => {
-		const { query, token } = this.props;
-		const { id } = query;
-		const { color, laporan } = this.state;
-		const getToken = await getCsrf();
-		const _csrf = getToken.token;
-		await toast.promise(
-
-			updateJadwal(token, id, {
-				judul: "No.Laporan " + laporan.data.no_laporan + " - " + data.judul,
-				dari_tanggal: data.dari_tanggal,
-				sampai_tanggal: data.sampai_tanggal,
-				warna: color,
-			}, _csrf),
-
-			{
-				pending: "Loading",
-				success: "Success",
-				error: "Error",
-			}
+		if (this.props.user.role.id === 2024) {
+			Swal.fire({
+				icon: 'error',
+				title: 'Oops...',
+				text: 'Maaf anda tidak memiliki akses untuk menyelesaikan proses ini.',
+				confirmButtonColor: "#3e3a8e",
+				confirmButtonText: 'Kembali'
+				// footer: '<a href="">Why do I have this issue?</a>'
+			})
+		} else {
+			const { query, token } = this.props;
+			const { id } = query;
+			const { color, laporan } = this.state;
+			const getToken = await getCsrf();
+			const _csrf = getToken.token;
+			await toast.promise(
+
+				updateJadwal(token, id, {
+					judul: "No.Laporan " + laporan.data.no_laporan + " - " + data.judul,
+					dari_tanggal: data.dari_tanggal,
+					sampai_tanggal: data.sampai_tanggal,
+					warna: color,
+				}, _csrf),
+
+				{
+					pending: "Loading",
+					success: "Success",
+					error: "Error",
+				}
+
+			);
+			Router.push("/app/penjadwalan");
+			const dataLaporan = await getPelaporan(token, { jadwal: true });
+			this.setState({ dataLaporan });
+			this.getDataEvent();
+		}
 
-		);
-		// const toastid = toast.loading("Please wait...");
-		// const added = await updateJadwal(token, id, {
-		// 	judul: "No.Laporan " + laporan.data.no_laporan + " - " + data.judul,
-		// 	dari_tanggal: data.dari_tanggal,
-		// 	sampai_tanggal: data.sampai_tanggal,
-		// 	warna: color,
-		// }, _csrf)
-		// if (!added) {
-		// 	toast.update(toastid, { render: "Gagal menetapkan jadwal", type: "error", isLoading: false, autoClose: true, closeButton: true });
-		// } else {
-		// 	toast.update(toastid, { render: "Berhasil menetapkan jadwal", type: "success", isLoading: false, autoClose: true, closeButton: true });
-
-		// 	this.logSuccessUpdateJadwal()
-
-
-		// }
-		Router.push("/app/penjadwalan");
-		const dataLaporan = await getPelaporan(token, { jadwal: true });
-		this.setState({ dataLaporan });
-		this.getDataEvent();
 	};
 
 	defaultStatus = async () => {
@@ -201,35 +198,47 @@ class Calendar extends Component {
 	}
 
 	handleSimpan = async (value) => {
-		const getToken = await getCsrf();
-		const _csrf = getToken.token;
-		const { token, query } = this.props;
-		const { id } = query;
-		let update = null;
-		if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
-			const toastid = toast.loading("Please wait...");
-			const data = { keterangan: value.keterangan };
-			if (value.status.value === this.getStatus()[1].value) {
-				data.change_role = "true";
-				update = await updateLaporan(token, id, data, _csrf);
-				Router.push("/app/penjadwalan");
-			} else if (value.status.value === this.getStatus()[2].value) {
-				data.aktif = "false";
-				update = await updateLaporan(token, id, data, _csrf);
-				Router.push("/app/penjadwalan");
-			}
-			if (!update) {
-				toast.update(toastid, { render: "Gagal simpan jadwal", type: "error", isLoading: false, autoClose: true, closeButton: true });
-				this.logUpdateLaporanError()
-
-			} else {
-				toast.update(toastid, { render: "Input jadwal berhasil", type: "success", isLoading: false, autoClose: true, closeButton: true });
-				this.logUpdateLaporanSuccess()
+		if (this.props.user.role.id === 2024) {
+			Swal.fire({
+				icon: 'error',
+				title: 'Oops...',
+				text: 'Maaf anda tidak memiliki akses untuk menyelesaikan proses ini.',
+				confirmButtonColor: "#3e3a8e",
+				confirmButtonText: 'Kembali'
+				// footer: '<a href="">Why do I have this issue?</a>'
+			})
+		} else {
+			const getToken = await getCsrf();
+			const _csrf = getToken.token;
+			const { token, query } = this.props;
+			const { id } = query;
+			let update = null;
+			if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
+				const toastid = toast.loading("Please wait...");
+				const data = { keterangan: value.keterangan };
+				if (value.status.value === this.getStatus()[1].value) {
+					data.change_role = "true";
+					update = await updateLaporan(token, id, data, _csrf);
+					Router.push("/app/penjadwalan");
+				} else if (value.status.value === this.getStatus()[2].value) {
+					data.aktif = "false";
+					update = await updateLaporan(token, id, data, _csrf);
+					Router.push("/app/penjadwalan");
+				}
+				if (!update) {
+					toast.update(toastid, { render: "Gagal simpan jadwal", type: "error", isLoading: false, autoClose: true, closeButton: true });
+					this.logUpdateLaporanError()
+
+				} else {
+					toast.update(toastid, { render: "Input jadwal berhasil", type: "success", isLoading: false, autoClose: true, closeButton: true });
+					this.logUpdateLaporanSuccess()
+					Router.push("/app/penjadwalan");
+				}
 				Router.push("/app/penjadwalan");
 			}
 			Router.push("/app/penjadwalan");
 		}
-		Router.push("/app/penjadwalan");
+
 	};
 
 	render() {

components/NaikSanksi/TableLaporan.js

@@ -57,17 +57,12 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												</div>
 											</td>
 											<td>
-												{/* <td>{data.no_laporan}</td> */}
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
+											
 															<h4>{data.no_sanksi}</h4>
-														</div>
-													</div>
-												</div>
+												
 											</td>
 
-											<td>
+											<td className=" col-md-4">
 												<div className="table-desc">
 													<div className="media align-items-center">
 														<div className="media-body d-flex">
@@ -83,8 +78,8 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
 												<p className="w-105">{data.keterangan}</p>
 											</td> */}
-											<td>
-												<h4 className="w-105">
+											<td className=" col-md-5">
+												<h4>
 													Sanksi Administratif : {getLabelSanksi(data.sanksi, "level") === 3 ? "Berat" : getLabelSanksi(data.sanksi, "level") === 2 ? "Sedang" : "Ringan"}
 												</h4>
 											</td>

components/Pelaporan/InputData.js

@@ -13,6 +13,8 @@ import * as Yup from "yup";
 import { getCsrf } from "../../actions/security";
 import { createLog } from "@/actions/log";
 
+import Swal from "sweetalert2";
+
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -71,7 +73,7 @@ export class InputData extends Component {
 			keteranganLaporan: "",
 			files: [],
 			pelanggaran: [],
-			selectedFile:{},
+			selectedFile: {},
 		};
 	}
 
@@ -104,20 +106,20 @@ export class InputData extends Component {
 		this.setState({ selectedOptionMulti });
 	};
 
-    onDrop = (selectedFile) => {
-        this.setState({
-            selectedFile: selectedFile.map((file) =>
-                Object.assign(file, {
-                    preview: URL.createObjectURL(file),
-                })
-            ),
-            stat: "Added " + selectedFile.length + " file(s)",
-        });
-        const selectFile = this.state.selectedFile
-        this.setState(prevState => ({
-            files: [...prevState.files, ...selectFile]
-        }))
-    };
+	onDrop = (selectedFile) => {
+		this.setState({
+			selectedFile: selectedFile.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + selectedFile.length + " file(s)",
+		});
+		const selectFile = this.state.selectedFile
+		this.setState(prevState => ({
+			files: [...prevState.files, ...selectFile]
+		}))
+	};
 
 	uploadFiles = (e) => {
 		e.preventDefault();
@@ -144,29 +146,41 @@ export class InputData extends Component {
 		await createLog(token, { aktivitas: "Mengakses halaman Pelaporan", menu: "Pelaporan", _csrf: _csrf });
 	}
 	onSubmit = async (data) => {
-		const { token, query } = this.props;
-		const getTokenCsrf = await getCsrf();
-		const _csrf = getTokenCsrf.token;
-		const formdata = new FormData();
-		formdata.append("no_laporan", data.no_laporan);
-		formdata.append("pt_id", query.ptId);
-		formdata.append("keterangan", data.keterangan);
-		formdata.append("pelanggaran_id", data.pelanggaran.join());
-		this.state.files.forEach((e) => {
-			formdata.append("dokumen", e);
-		});
-		const create = createPelaporan(token, formdata, _csrf);
+		if (this.props.user.role.id === 2024) {
+			Swal.fire({
+				icon: 'error',
+				title: 'Oops...',
+				text: 'Maaf anda tidak memiliki akses untuk menyelesaikan proses ini.',
+				confirmButtonColor: "#3e3a8e",
+				confirmButtonText: 'Kembali'
+				// footer: '<a href="">Why do I have this issue?</a>'
+			})
+		} else {
+			const { token, query } = this.props;
+			const getTokenCsrf = await getCsrf();
+			const _csrf = getTokenCsrf.token;
+			const formdata = new FormData();
+			formdata.append("no_laporan", data.no_laporan);
+			formdata.append("pt_id", query.ptId);
+			formdata.append("keterangan", data.keterangan);
+			formdata.append("pelanggaran_id", data.pelanggaran.join());
+			this.state.files.forEach((e) => {
+				formdata.append("dokumen", e);
+			});
+			const create = createPelaporan(token, formdata, _csrf);
 
-		await toast.promise(create, {
-			pending: "Loading...",
-			success: "Berhasil buat laporan",
-			error: "Gagal buat laporan",
-		},
-			this.createLog());
+			await toast.promise(create, {
+				pending: "Loading...",
+				success: "Berhasil buat laporan",
+				error: "Gagal buat laporan",
+			},
+				this.createLog());
+
+			await Router.push({
+				pathname: "/app/pelaporan",
+			});
+		}
 
-		Router.push({
-			pathname: "/app/pelaporan",
-		});
 	};
 
 	render() {

components/Pemeriksaan/InputEvaluasi.js

@@ -10,6 +10,7 @@ import * as Yup from "yup";
 import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
 import { connect } from "react-redux";
 import { getCsrf } from "../../actions/security";
+import Swal from "sweetalert2";
 
 
 const selectInstanceId = 1;
@@ -138,45 +139,56 @@ class InputEvaluasi extends Component {
 	};
 
 	onSubmit = async (data, { resetForm }) => {
-		console.log(this.props.user)
-		const getToken = await getCsrf();
-		const _csrf = getToken.token;
-		const { token, query } = this.props;
-		const { id } = query;
-		const formdata = new FormData();
-		formdata.append("judul", data.judul);
-		formdata.append("tanggal", data.tanggal);
-		this.state.files.forEach((e) => {
-			formdata.append("dokumen", e);
-		});
-		if (this.state.delegasichecklist == true) {
-			await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
-				pending: "Loading",
-				success: "Success",
-				error: "Error",
-				autoClose: 1000
-			});
-
-			data.change_role = "true";
-			data.keterangan = "delegasi ke DIKTI"
-			Router.push("/app/pemeriksaan");
-			update = await updateLaporan(token, id, data);
+		if (this.props.user.role.id === 2024) {
+			Swal.fire({
+				icon: 'error',
+				title: 'Oops...',
+				text: 'Maaf anda tidak memiliki akses untuk menyelesaikan proses ini.',
+				confirmButtonColor: "#3e3a8e",
+				confirmButtonText: 'Kembali'
+				// footer: '<a href="">Why do I have this issue?</a>'
+			})
 		} else {
-			await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
-				pending: "Loading",
-				success: {
-					render: "success",
+			const getToken = await getCsrf();
+			const _csrf = getToken.token;
+			const { token, query } = this.props;
+			const { id } = query;
+			const formdata = new FormData();
+			formdata.append("judul", data.judul);
+			formdata.append("tanggal", data.tanggal);
+			this.state.files.forEach((e) => {
+				formdata.append("dokumen", e);
+			});
+			if (this.state.delegasichecklist == true) {
+				await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
+					pending: "Loading",
+					success: "Success",
+					error: "Error",
 					autoClose: 1000
-				},
-				error: "Error",
+				});
 
-			});
-			Router.push("/app/pemeriksaan");
+				data.change_role = "true";
+				data.keterangan = "delegasi ke DIKTI"
+				Router.push("/app/pemeriksaan");
+				update = await updateLaporan(token, id, data);
+			} else {
+				await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
+					pending: "Loading",
+					success: {
+						render: "success",
+						autoClose: 1000
+					},
+					error: "Error",
+
+				});
+				Router.push("/app/pemeriksaan");
+			}
+			this.setState({ files: [] });
+			resetForm();
+			const pelaporan = await getOneLaporan(token, query.id);
+			this.props.changePelaporan(pelaporan);
 		}
-		this.setState({ files: [] });
-		resetForm();
-		const pelaporan = await getOneLaporan(token, query.id);
-		this.props.changePelaporan(pelaporan);
+
 	};
 
 	handlechecklist = () => {

components/Riwayat/Maps.js

@@ -17,7 +17,7 @@ const RegionValues = {
     'ID_la': 0,
     'ID_be': 0,
     'ID_bb': 0,
-    'ID_jk': 33,
+    'ID_jk': 0,
     'ID_jb': 0,
     'ID_bt': 0,
     'ID_yo': 0,

components/Riwayat/TableLaporan.js

@@ -14,10 +14,8 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                 <tr>
                                     <th>No.Laporan</th>
                                     <th>Deskripsi Laporan</th>
-                                    {status && <th>Status</th>}
+                                     <th>Status</th>
                                     {!noBy && <th>Dibuat Oleh</th>}
-                                    {/* <th>Created</th> */}
-                                    {/* <th></th> */}
                                 </tr>
                             </thead>
                             <tbody>
@@ -49,9 +47,9 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                 </div>
                                             </td>
 
-                                            {status ? (
+                                            {data.step ? (
                                                 <td>
-                                                    <div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+                                                    <div className="badge badge-success">{data.step}</div>
                                                 </td>
                                             ) : (
                                                 ""

components/Sanksi/UploadSurat.js

@@ -184,20 +184,20 @@ export class UploadSurat extends Component {
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Nomor Surat<span className="text-danger">*</span></label>
-					<div className="col-md-10">
+					<label className="col-md-4 col-form-label">Nomor Surat<span className="text-danger">*</span></label>
+					<div className="col-md-8">
 						<Input type="text" value={this.state.nomorSanksi} onChange={(e) => { this.setNomorSanksi(e) }} />
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Keterangan<span className="text-danger">*</span></label>
-					<div className="col-md-10">
+					<label className="col-md-4 col-form-label">Keterangan<span className="text-danger">*</span></label>
+					<div className="col-md-8">
 						<Input type="textarea" value={this.state.keterangan} onChange={(e) => { this.setKeterangan(e) }} required />
 					</div>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
-					<div className="col-md-10 mt-2">
+					<label className="col-md-4 col-form-label">Tidak Perlu TMT</label>
+					<div className="col-md-8 mt-2">
 						<div className="checkbox c-checkbox">
 							<label>
 								<Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tidakPerluTMTCheck} />
@@ -207,7 +207,7 @@ export class UploadSurat extends Component {
 				</FormGroup>
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-3">
-						<label className="col-md-2 col-form-label">Isi TMT</label>
+						<label className="col-md-4 col-form-label">Isi TMT</label>
 						<Row >
 							<Col>
 								<FormGroup>
@@ -248,23 +248,23 @@ export class UploadSurat extends Component {
 				)}
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-1">
-						<label className="col-md-2 col-form-label">TMT berlaku</label>
-						<div className="col-md-10 mt-2">
+						<label className="col-md-4 col-form-label">TMT berlaku</label>
+						<div className="col-md-8 mt-2">
 							<b>{this.state.awalTMT ? moment(this.state.awalTMT).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirTMT ? moment(this.state.akhirTMT).format("DD-MM-YYYY") : "-"}</b>
 						</div>
 					</FormGroup>
 				)}
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-1">
-						<label className="col-md-2 col-form-label">TMT</label>
-						<div className="col-md-10 mt-2">
+						<label className="col-md-4 col-form-label">TMT</label>
+						<div className="col-md-8 mt-2">
 							<b>{this.state.akhirTMT ? moment(this.state.akhirTMT).diff(this.state.awalTMT, '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">
+					<label className="col-md-4 col-form-label">List sanksi </label>
+					<div className="col-md-8">
 						<Select
 							options={this.props.listSanksi.map(e => ({ value: `Sanksi Administratif ${e.split(";")[0]} - ${e.split(";")[1]}` }))}
 							isMulti
@@ -276,10 +276,10 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">
+					<label className="col-md-4 col-form-label">
 						Dokumen Surat Sanksi<span className="text-danger">*</span>
 					</label>
-					<div className="col-md-10">
+					<div className="col-md-8">
 						<DropzoneWrapper className="" onDrop={this.onDrop}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
 								return (
@@ -316,7 +316,7 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
+					<label className="col-md-4 col-form-label">Tanggal Terima Surat Sanksi<span className="text-danger">*</span></label>
 					<span className="col-sm-3 float-left">
 						<DatePicker
 							selected={this.state.terimaSuratSanksi ? new Date(this.state.terimaSuratSanksi) : this.state.terimaSuratSanksi}
@@ -332,10 +332,10 @@ export class UploadSurat extends Component {
 					</span>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">
+					<label className="col-md-4 col-form-label">
 						Dokumen Tanda Terima Surat Sanksi<span className="text-danger">*</span>
 					</label>
-					<div className="col-md-10">
+					<div className="col-md-8">
 						<DropzoneWrapper className="" onDrop={this.onDropTandaTerimaSS}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
 								return (
@@ -373,12 +373,12 @@ export class UploadSurat extends Component {
 				</FormGroup>
 				{!this.state.tidakPerluTMTCheck && (
 					<FormGroup row className="mt-3">
-						<label className="col-md-2 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
+						<label className="col-md-4 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
 							<p>
 								Note : 21 hari kerja
 							</p>
 						</label>
-						<span className="col-sm-3 float-left">
+						<span className="col-sm-8 float-left">
 							<DatePicker
 								selected={this.state.tglAkhirKeberatan ? new Date(this.state.tglAkhirKeberatan) : this.state.tglAkhirKeberatan}
 								onChange={(tglAkhirKeberatan) => {
@@ -386,7 +386,7 @@ export class UploadSurat extends Component {
 								}}
 								dateFormat="dd/MM/yyyy"
 								minDate={new Date(terimaSuratSanksi)}
-								placeholderText="Isi Tanggal"
+								placeholderText="DD/MM/YYYY "
 								locale={id}
 								className="form-control bg-white"
 							/>

components/TurunSanksi/TableLaporan.js

@@ -66,7 +66,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												</div>
 											</td>
 
-											<td>
+											<td className=" col-md-4">
 												<div className="table-desc">
 													<div className="media align-items-center">
 														<div className="media-body d-flex">
@@ -84,7 +84,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
 												<p className="w-105">{data.sanksi.keterangan}</p>
 											</td> */}
-											<td>
+											<td className=" col-md-5">
 												<h4 className="w-105">
 													Sanksi Administratif : {getLabelSanksi(data.sanksi, "level") === 3 ? "Berat" : getLabelSanksi(data.sanksi, "level") === 2 ? "Sedang" : "Ringan"}
 												</h4>

pages/app/bypassII/detail.js

@@ -142,7 +142,7 @@ class bypassIIDetail extends Component {
                                                 {this.state.listSanksi && <UploadSurat_Bypass setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} />}
                                             </div>
                                             <FormGroup row className="mt-3">
-                                                <label className="col-md-2 col-form-label">
+                                                <label className="col-md-4 col-form-label">
                                                     Dokumen Laporan Evaluasi dan Pembahasan
                                                 </label>
                                                 <div className="col-md-10">
@@ -168,7 +168,7 @@ class bypassIIDetail extends Component {
                                                 {/* <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("2") }}>
+                                                <Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("2")}>
                                                     <span className="font-color-white">Next</span>
                                                 </Button>
                                             </div>

pages/app/sanksi/proses.js

@@ -449,10 +449,10 @@ class ProsesSanksi extends Component {
 												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} dataSuratBA={dataSuratBA} />}
 											</div>
 											<FormGroup row className="mt-3">
-												<label className="col-md-2 col-form-label">
+												<label className="col-md-4 col-form-label">
 													Dokumen Laporan Evaluasi dan Pembahasan
 												</label>
-												<div className="col-md-10">
+												<div className="col-md-8">
 
 													<div style={{ display: "none" }}>
 														<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} />