commit

actions/pelaporan.js

@@ -50,9 +50,19 @@ export const createPelaporan = async (token, data) => {
 	return res.data;
 };
 
-export const createLaporanPublic = async (data) => {
+// export const createLaporanPublic = async (data) => {
+// 	try {
+// 		const res = await axiosAPI.post("/public/laporan/create", data);
+// 		return res.data;
+// 	} catch (error) {
+// 		console.log("error", error.response.data);
+// 		return false;
+// 	}
+// };
+
+export const createLaporanPublic = async (token, data) => {
 	try {
-		const res = await axiosAPI.post("/public/laporan/create", data);
+		const res = await axiosAPI.post("/public/laporan/create", data, { headers: { Authorization: token } });
 		return res.data;
 	} catch (error) {
 		console.log("error", error.response.data);
@@ -71,8 +81,13 @@ export const createLaporanPublic = async (data) => {
 // };
 
 export const updateLaporan = async (token, id, data) => {
-	const res = await axiosAPI.put(`/laporan/update/${id}`, data, { headers: { Authorization: token } });
-	return res.data;
+	try {
+		const res = await axiosAPI.put(`/laporan/update/${id}`, data, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error.response.data);
+		return false;
+	}
 };
 
 // export const activeLaporan = async ({ number, ptId }) => {

actions/user.js

@@ -11,7 +11,7 @@ export const getPublicUser = async () => {
 
 export const createPublicUser = async (data) => {
 	try {
-		const response = await axiosAPI.post("/user/create", data);
+		const response = await axiosAPI.post("/public/user/create", data);
 		return response.data;
 	} catch (error) {
 		if (error.response) return error.response.data;

components/Extras/calendar.view.js

@@ -12,7 +12,7 @@ import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import bootstrapPlugin from "@fullcalendar/bootstrap";
 import Select from "react-select";
-import moment from "moment";
+import moment from "moment-timezone";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Router from "next/router";
@@ -38,6 +38,11 @@ const jadwalSchema = Yup.object().shape({
 	dari_tanggal: Yup.date().required("Required"),
 	sampai_tanggal: Yup.date().required("Required"),
 });
+
+const laporanSchema = Yup.object().shape({
+	keterangan: Yup.string().required("Harus diisi"),
+});
+
 class Calendar extends Component {
 	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
 
@@ -74,7 +79,7 @@ class Calendar extends Component {
 		this.defaultStatus();
 		this.setState({ laporan });
 
-		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
+		let color = "#" + Math.random().toString(16).slice(2, 8);
 		if (laporan.data.jadwal) {
 			color = laporan.data.jadwal.warna;
 		}
@@ -91,8 +96,8 @@ class Calendar extends Component {
 		const dataEvent = this.state.dataLaporan.data.map((e) => ({
 			id: e._id,
 			title: e.jadwal.judul,
-			start: new Date(e.jadwal.dari_tanggal),
-			end: new Date(e.jadwal.sampai_tanggal),
+			start: moment(e.jadwal.dari_tanggal).format("YYYY-MM-DD"),
+			end: moment(e.jadwal.sampai_tanggal).add(1, "d").format("YYYY-MM-DD"),
 			backgroundColor: e.jadwal.warna,
 			borderColor: e.jadwal.warna,
 		}));
@@ -145,24 +150,26 @@ class Calendar extends Component {
 
 	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
 
-	handleSimpan = async (e) => {
-		const toastid = toast.loading("Please wait...");
-		try {
-			const { selectedOption } = this.state;
-			const { token, query } = this.props;
-			const { id } = query;
-			this.setState({ selectedOption });
-			if (selectedOption.value === this.getStatus()[1].value) {
-				await updateLaporan(token, id, { change_role: "true" });
+	handleSimpan = async (value) => {
+		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);
+			} else if (value.status.value === this.getStatus()[2].value) {
+				data.aktif = "false";
+				update = await updateLaporan(token, id, data);
 			}
-			if (selectedOption.value === this.getStatus()[2].value) {
-				await updateLaporan(token, id, { aktif: "false" });
+			if (!update) {
+				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+			} else {
+				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+				Router.push("/app/penjadwalan");
 			}
-			Router.push("/app/penjadwalan");
-
-			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-		} catch (error) {
-			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
 		}
 	};
 
@@ -171,12 +178,12 @@ class Calendar extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div><h3>Jadwal Pemeriksaan</h3></div>
-					{/* <div className="ml-auto">
+					<div>Jadwal Pemeriksaan</div>
+					<div className="ml-auto">
 						<Link href="/app/penjadwalan">
 							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 						</Link>
-					</div> */}
+					</div>
 				</div>
 				<div className="calendar-app">
 					{laporan.data ? (
@@ -201,19 +208,55 @@ class Calendar extends Component {
 							<div className="row">
 								<div className="col-lg-12 col-md-6 col-12">
 									<Card className="card-default">
-										{/* <CardHeader>
-											<CardTitle tag="h4">Status Pelaporan</CardTitle>
-										</CardHeader> */}
 										<div class="header-penjadwalan">
-    										<h2 class="card-title-1">Status Pelaporan</h2>
+											<h2 class="card-title-1">Status Pelaporan</h2>
 										</div>
-										<CardBody> 
-											<Select value={selectedOption} onChange={this.handleChangeSelect} options={this.getStatus()} required />
-											<div className="btn-simpanjadwal">
-											<Button onClick={this.handleSimpan} className="btn-colorpenjadwalan" color="info" block disabled={laporan.data?.evaluasi.length}>
-											<h4 className="text-btn-penjadwalan-1">Simpan</h4>
-											</Button>
-											</div>
+										<CardBody>
+											<Formik
+												enableReinitialize={true}
+												initialValues={{
+													status: this.getStatus()[0],
+													keterangan: "",
+												}}
+												validationSchema={selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? laporanSchema : null}
+												onSubmit={this.handleSimpan}
+											>
+												{() => (
+													<Form>
+														<FormGroup>
+															<label className="col-form-label">Status Laporan</label>
+															<Field name="status">
+																{({ field, form }) => (
+																	<Select
+																		value={field.value}
+																		onChange={(e) => {
+																			form.setFieldValue(field.name, e);
+																			this.handleChangeSelect(e);
+																		}}
+																		options={this.getStatus()}
+																		required
+																	/>
+																)}
+															</Field>
+															<ErrorMessage name="status" component="div" className="form-text text-danger" />
+														</FormGroup>
+														{selectedOption?.value === this.getStatus()[0].value ? (
+															""
+														) : (
+															<FormGroup>
+																<label className="col-form-label">Keterangan</label>
+																<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
+																<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+															</FormGroup>
+														)}
+														<div className="btn-simpanjadwal">
+															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
+																<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+															</Button>
+														</div>
+													</Form>
+												)}
+											</Formik>
 										</CardBody>
 									</Card>
 									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
@@ -221,19 +264,16 @@ class Calendar extends Component {
 									) : (
 										<>
 											<Card className="card-default" title="">
-												{/* <CardHeader>
-													<CardTitle tag="h4">Input Jadwal</CardTitle>
-												</CardHeader> */}
 												<div class="header-penjadwalan">
-    												<h2 class="card-title-1">Input Jadwal</h2>
+													<h2 className="card-title-1">Input Jadwal</h2>
 												</div>
 												<CardBody>
 													<Formik
 														enableReinitialize={true}
 														initialValues={{
 															judul: laporan.data?.jadwal?.judul ? laporan.data.jadwal.judul.split("- ")[1] : "",
-															dari_tanggal: laporan.data?.jadwal?.dari_tanggal ? moment(laporan.data.jadwal.dari_tanggal) : "",
-															sampai_tanggal: laporan.data?.jadwal?.sampai_tanggal ? moment(laporan.data.jadwal.sampai_tanggal) : "",
+															dari_tanggal: laporan.data?.jadwal?.dari_tanggal ? moment(laporan.data.jadwal.dari_tanggal).format("DD MMMM YYYY") : "",
+															sampai_tanggal: laporan.data?.jadwal?.sampai_tanggal ? moment(laporan.data.jadwal.sampai_tanggal).format("DD MMMM YYYY") : "",
 														}}
 														validationSchema={jadwalSchema}
 														onSubmit={this.handleEventCalendar}
@@ -241,10 +281,11 @@ class Calendar extends Component {
 														{() => (
 															<Form>
 																<FormGroup>
-																	{/* <label className="col-form-label">Warna</label> */}
-																	<div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}>
-																		{/* {this.state.color} */}
+																	<label className="col-form-label">Warna</label>
+																	<div className="badge d-block" style={{ backgroundColor: this.state.color, color: "white" }}>
+																		{this.state.color}
 																	</div>
+																	{/* <div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}></div> */}
 																</FormGroup>
 
 																<FormGroup>
@@ -252,8 +293,9 @@ class Calendar extends Component {
 																	<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
 																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
 																</FormGroup>
-																<FormGroup className="uk-form-tanggal-1">
-																		{/* <div className="uk-form-tanggal-1"> */}
+																<Row>
+																	<Col>
+																		<FormGroup>
 																			<label className="col-form-label">Dari Tanggal</label>
 																			<Field name="dari_tanggal">
 																				{({ field, form }) => (
@@ -262,17 +304,16 @@ class Calendar extends Component {
 																						inputProps={{ className: "form-control" }}
 																						value={field.value}
 																						onChange={(e) => {
-																							form.setFieldValue(field.name, e);
+																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
 																						}}
 																					/>
 																				)}
 																			</Field>
-																		
-																	<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
-																	{/* </div> */}
-																</FormGroup>
-																<FormGroup className="uk-form-tanggal-2">
-																		{/* <div className="uk-form-tanggal-2"> */}
+																			<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
+																		</FormGroup>
+																	</Col>
+																	<Col>
+																		<FormGroup>
 																			<label className="col-form-label">Sampai Tanggal</label>
 																			<Field name="sampai_tanggal">
 																				{({ field, form }) => (
@@ -281,17 +322,19 @@ class Calendar extends Component {
 																						inputProps={{ className: "form-control" }}
 																						value={field.value}
 																						onChange={(e) => {
-																							form.setFieldValue(field.name, e);
+																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
 																						}}
 																					/>
 																				)}
 																			</Field>
-																	<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
-																	{/* </div> */}
-																</FormGroup>
+																			<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
+																		</FormGroup>
+																	</Col>
+																</Row>
+
 																<FormGroup>
 																	<div className="btn-simpanpenjadwalan">
-																		<Button className= "btn-colorpenjadwalan" color= "info" block type="submit" disabled={laporan.data?.evaluasi.length}>
+																		<Button color="info" className="btn-colorpenjadwalan" block type="submit" disabled={laporan.data?.evaluasi.length}>
 																			<h4 className="text-btn-penjadwalan-1">Simpan</h4>
 																		</Button>
 																	</div>

components/Main/DetailLaporan.js

@@ -7,42 +7,56 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 	const user = useSelector((state) => state.user);
 	return (
 		<>
-			{(!data.user.isPrivate || user.role.id === 2020) && (
+			{(!data.user.isPrivate || user?.role.id === 2020) && (
 				<>
-					{noTitle ? "" : <div className="header-1"><h2 className="card-title-1">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</h2></div>}
-					<FormGroup row>
-						<Col md="4">Nama Pelapor:</Col>
-						<Col md="8">
-							<strong>{data.user.nama}</strong>
-						</Col>
-					</FormGroup>
+					{noTitle ? (
+						""
+					) : (
+						<div className="header-1">
+							<h2 className="card-title-1">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</h2>
+						</div>
+					)}
+					{data.user.nama && (
+						<FormGroup row>
+							<Col md="4">Nama Pelapor:</Col>
+							<Col md="8">
+								<strong>{data.user.nama}</strong>
+							</Col>
+						</FormGroup>
+					)}
 					<FormGroup row>
 						<Col md="4">Nomor yang dapat dihubungi:</Col>
 						<Col md="8">
 							<strong>{data.user.no_hp}</strong>
 						</Col>
 					</FormGroup>
-					<FormGroup row>
-						<Col md="4">Email:</Col>
-						<Col md="8">
-							<strong>{data.user.email}</strong>
-						</Col>
-					</FormGroup>
+					{data.user.email && (
+						<FormGroup row>
+							<Col md="4">Email:</Col>
+							<Col md="8">
+								<strong>{data.user.email}</strong>
+							</Col>
+						</FormGroup>
+					)}
 
 					{data.user.isPublic && (
 						<>
-							<FormGroup row>
-								<Col md="4">Alamat:</Col>
-								<Col md="8">
-									<strong>{data.user.alamat}</strong>
-								</Col>
-							</FormGroup>
-							<FormGroup row>
-								<Col md="4">Foto Kartu Identitas:</Col>
-								<Col md="8">
-									<img src={data.user.foto.path} height={200} alt="Foto Identitas" />
-								</Col>
-							</FormGroup>
+							{data.user.alamat && (
+								<FormGroup row>
+									<Col md="4">Alamat:</Col>
+									<Col md="8">
+										<strong>{data.user.alamat}</strong>
+									</Col>
+								</FormGroup>
+							)}
+							{data.user.foto && (
+								<FormGroup row>
+									<Col md="4">Foto Kartu Identitas:</Col>
+									<Col md="8">
+										<img src={data.user.foto.path} height={200} alt="Foto Identitas" />
+									</Col>
+								</FormGroup>
+							)}
 						</>
 					)}
 					{data.user.isPrivate && (
@@ -55,7 +69,13 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 					)}
 				</>
 			)}
-			{noTitle ? "" : <div className="header-1"><h2 className="card-title-1">Detail Laporan</h2></div>}
+			{noTitle ? (
+				""
+			) : (
+				<div className="header-1">
+					<h2 className="card-title-1">Detail Laporan</h2>
+				</div>
+			)}
 			<form className="form-horizontal">
 				<FormGroup row>
 					<Col md="4">Nomor Laporan:</Col>
@@ -89,6 +109,26 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 						</Scrollable>
 					</Col>
 				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				{!noStatus && data.aktif ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					""
+				)}
+				<FormGroup row>
+					<Col md="4">Prioritas:</Col>
+					<Col md="8">{data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>}</Col>
+				</FormGroup>
 				<FormGroup row>
 					<Col md="4">Dokumen Pendukung:</Col>
 					<Col md="8">
@@ -112,22 +152,6 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 						</Scrollable>
 					</Col>
 				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Dibuat Pada:</Col>
-					<Col md="8">
-						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
-					</Col>
-				</FormGroup>
-				{!noStatus && data.aktif ? (
-					<FormGroup row>
-						<Col md="4">Status:</Col>
-						<Col md="8">
-							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
-						</Col>
-					</FormGroup>
-				) : (
-					""
-				)}
 			</form>
 		</>
 	);

components/Main/Login.js

@@ -69,8 +69,10 @@ class Login extends Component {
 				axiosAPI.defaults.headers.common["Authorization"] = auth.data.token;
 				if (auth.data.user.role.id === 2022) {
 					Router.push({ pathname: "/pt/pemantauan" });
-				} else {
+				} else if ([2020, 2021].includes(auth.data.user.role.id)) {
 					Router.push({ pathname: "/app/pemantauan" });
+				} else {
+					this.setState({ error: "Akun tidak ada" })
 				}
 			}
 		} catch (error) {

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -4,6 +4,8 @@ import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter
 import { addBanding } from "@/actions/banding";
 import { connect } from "react-redux";
 import { toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -19,13 +21,39 @@ class DropzoneWrapper extends Component {
 	}
 }
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const evaluasiSchema = Yup.object().shape({
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Harus ada").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
 export class ModalPermohonan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			modal1: false,
 			files: [],
-			error: null,
 		};
 	}
 
@@ -66,42 +94,34 @@ export class ModalPermohonan extends Component {
 		});
 	};
 
-	onSubmit = async (e) => {
-		e.preventDefault();
+	onSubmit = async (data) => {
 		const { query, token } = this.props;
 		const { id } = query;
 		const formdata = new FormData();
-		if (this.state.files.length > 0) {
-			this.setState({
-				modal1: !this.state.modal1,
-			});
-
-			this.state.files.forEach((e) => {
+		if (data.dokumen.length > 0) {
+			data.dokumen.forEach((e) => {
 				formdata.append("dokumen", e);
 			});
+		}
+		this.setState({
+			modal1: !this.state.modal1,
+		});
 
-			const toastid = toast.loading("Please wait...");
-			const added = await addBanding(token, id, formdata);
+		const toastid = toast.loading("Please wait...");
+		const added = await addBanding(token, id, formdata);
 
-			if (!added) {
-				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-			} else {
-				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-				Router.push({
-					pathname: "/pt/jawaban-banding",
-				});
-			}
+		if (!added) {
+			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
 		} else {
-			this.setState({ error: "Dokumen harus ada" });
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push({
+				pathname: "/pt/jawaban-banding",
+			});
 		}
 	};
 
-	handleKirim = (e) => {
-		this.onSubmit(e);
-	};
-
 	render() {
-		const { files, error } = this.state;
+		const { files } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -123,38 +143,65 @@ export class ModalPermohonan extends Component {
 				</Modal>
 				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
 					<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Banding</ModalHeader>
-					<ModalBody>
-						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-							<FormGroup>
-								<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
-								<div>
-									<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 ${error ? "text-danger" : ""}`}>{error ? error : "Multiple files upload"}</span>
-								</div>
-							</FormGroup>
-						</form>
-					</ModalBody>
-					<ModalFooter>
-						<Button color="primary" onClick={this.handleKirim}>
-							Kirim
-						</Button>
-					</ModalFooter>
+					<Formik
+						initialValues={{
+							dokumen: [],
+						}}
+						validationSchema={evaluasiSchema}
+						onSubmit={this.onSubmit}
+					>
+						<Form className="form-horizontal">
+							<ModalBody>
+								<FormGroup>
+									<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
+									<div>
+										<Field name="dokumen">
+											{({ field, form, meta }) => (
+												<DropzoneWrapper
+													className=""
+													onDrop={(e) => {
+														this.onDrop(e);
+														form.setFieldValue(field.name, e);
+													}}
+												>
+													{({ 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={(e) => {
+																				this.clearFiles(e);
+																				form.setFieldValue(field.name, []);
+																			}}
+																		>
+																			Clear files
+																		</button>
+																	</small>
+																</div>
+															</div>
+														);
+													}}
+												</DropzoneWrapper>
+											)}
+										</Field>
+										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+									</div>
+								</FormGroup>
+							</ModalBody>
+							<ModalFooter>
+								<Button color="primary" type="submit">
+									Kirim
+								</Button>
+							</ModalFooter>
+						</Form>
+					</Formik>
 				</Modal>
 			</>
 		);

components/PT/Keberatan/ModalPermohonan.js

@@ -3,8 +3,9 @@ import Router from "next/router";
 import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { addKeberatan } from "@/actions/keberatan";
 import { connect } from "react-redux";
-import { notifKeberatan } from "@/actions/notifikasi";
 import { toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -20,13 +21,40 @@ class DropzoneWrapper extends Component {
 	}
 }
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const evaluasiSchema = Yup.object().shape({
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
+
 export class ModalPermohonan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			modal1: false,
 			files: [],
-			error: null,
 		};
 	}
 
@@ -68,40 +96,34 @@ export class ModalPermohonan extends Component {
 		});
 	};
 
-	onSubmit = async (e) => {
-		e.preventDefault();
-		const { user, query, token } = this.props;
+	onSubmit = async (data) => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+		const { query, token } = this.props;
 		const { id } = query;
 		const formdata = new FormData();
-		if (this.state.files.length > 0) {
-			this.setState({
-				modal1: !this.state.modal1,
-			});
-
-			this.state.files.forEach((e) => {
+		if (data.dokumen.length > 0) {
+			data.dokumen.forEach((e) => {
 				formdata.append("dokumen", e);
 			});
-			const tostid = toast.loading("Please wait...");
-			const success = await addKeberatan(token, id, formdata);
-			if (!success) {
-				toast.update(tostid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-			} else {
-				toast.update(tostid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-				Router.push({
-					pathname: "/pt/jawaban-keberatan",
-				});
-			}
-		} else {
-			this.setState({ error: "Dokumen harus ada" });
 		}
-	};
 
-	handleKirim = (e) => {
-		this.onSubmit(e);
+		const tostid = toast.loading("Please wait...");
+		const success = await addKeberatan(token, id, formdata);
+
+		if (!success) {
+			toast.update(tostid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+		} else {
+			toast.update(tostid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push({
+				pathname: "/pt/jawaban-keberatan",
+			});
+		}
 	};
 
 	render() {
-		const { files, error } = this.state;
+		const { files } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -123,38 +145,65 @@ export class ModalPermohonan extends Component {
 				</Modal>
 				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
 					<ModalHeader toggle={this.toggleModal1}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
-					<ModalBody>
-						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-							<FormGroup>
-								<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah surat permohonan keberatan atas pengenaan sanksi administratif & dokumen pendukungnya</label>
-								<div>
-									<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 ${error ? "text-danger" : ""}`}>{error ? error : "Multiple files upload"}</span>
-								</div>
-							</FormGroup>
-						</form>
-					</ModalBody>
-					<ModalFooter>
-						<Button color="primary" onClick={this.handleKirim}>
-							Kirim
-						</Button>
-					</ModalFooter>
+					<Formik
+						initialValues={{
+							dokumen: [],
+						}}
+						validationSchema={evaluasiSchema}
+						onSubmit={this.onSubmit}
+					>
+						<Form className="form-horizontal">
+							<ModalBody>
+								<FormGroup>
+									<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
+									<div>
+										<Field name="dokumen">
+											{({ field, form, meta }) => (
+												<DropzoneWrapper
+													className=""
+													onDrop={(e) => {
+														this.onDrop(e);
+														form.setFieldValue(field.name, e);
+													}}
+												>
+													{({ 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={(e) => {
+																				this.clearFiles(e);
+																				form.setFieldValue(field.name, []);
+																			}}
+																		>
+																			Clear files
+																		</button>
+																	</small>
+																</div>
+															</div>
+														);
+													}}
+												</DropzoneWrapper>
+											)}
+										</Field>
+										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+									</div>
+								</FormGroup>
+							</ModalBody>
+							<ModalFooter>
+								<Button color="primary" type="submit">
+									Kirim
+								</Button>
+							</ModalFooter>
+						</Form>
+					</Formik>
 				</Modal>
 			</>
 		);

components/Pelaporan/InputData.js

@@ -25,12 +25,36 @@ class DropzoneWrapper extends Component {
 	}
 }
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
 const selectInstanceId = 1;
 const laporanSchema = Yup.object().shape({
 	no_laporan: Yup.string().required("Harap Diisi"),
 	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
 	pelanggaran: Yup.array().min(1).required("Harap Diisi"),
-	dokumen: Yup.array().notRequired(),
+	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 export class InputData extends Component {
 	constructor(props) {
@@ -213,7 +237,14 @@ export class InputData extends Component {
 														<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}>
+																<button
+																	type="button"
+																	className="btn btn-link"
+																	onClick={(e) => {
+																		this.clearFiles(e);
+																		form.setFieldValue(field.name, []);
+																	}}
+																>
 																	Clear files
 																</button>
 															</small>

components/Pemeriksaan/InputEvaluasi.js

@@ -7,13 +7,37 @@ import { Row, Col, FormGroup, Input } from "reactstrap";
 import { ToastContainer, toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
+import { getOneLaporan } from "@/actions/pelaporan";
 
 const selectInstanceId = 1;
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 
 const evaluasiSchema = Yup.object().shape({
 	tanggal: Yup.date().required("Required"),
 	judul: Yup.string().min(3).max(150).required("Required"),
-	dokumen: Yup.array().min(1).required("Required"),
+	dokumen: Yup.array().min(1).required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
@@ -110,6 +134,8 @@ export default class InputEvaluasi extends Component {
 		});
 		this.setState({ files: [] });
 		resetForm();
+		const pelaporan = await getOneLaporan(token, query.id);
+		this.props.changePelaporan(pelaporan);
 	};
 
 	render() {
@@ -173,7 +199,14 @@ export default class InputEvaluasi extends Component {
 														<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}>
+																<button
+																	type="button"
+																	className="btn btn-link"
+																	onClick={(e) => {
+																		this.clearFiles(e);
+																		form.setFieldValue(field.name, []);
+																	}}
+																>
 																	Clear files
 																</button>
 															</small>

components/Pemeriksaan/TableLaporan.js

@@ -35,7 +35,10 @@ function TableLaporan({ listData, to, linkName }) {
 												</div>
 											</td>
 
-											<td>{data.evaluasi?.length ? <div className="badge badge-info">Sudah diperiksa</div> : <div className="badge badge-danger">Belum diperiksa</div>}</td>
+											<td>
+												{data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>}
+												{data.evaluasi?.length ? <div className="badge badge-info">Sudah diperiksa</div> : <div className="badge badge-danger">Belum diperiksa</div>}
+											</td>
 
 											<td>{moment(data.createdAt).fromNow()}</td>
 											<td>

components/Penjadwalan/TableLaporan.js

@@ -35,7 +35,10 @@ function TableLaporan({ listData, to, linkName }) {
 												</div>
 											</td>
 
-											<td>{data.jadwal ? <div className="badge badge-info">Ada Jadwal</div> : <div className="badge badge-danger">Tidak ada jadwal</div>}</td>
+											<td>
+												{data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>}
+												{data.jadwal ? <div className="badge badge-info">Ada Jadwal</div> : <div className="badge badge-danger">Tidak ada jadwal</div>}
+											</td>
 
 											<td>{moment(data.createdAt).fromNow()}</td>
 											<td>

pages/app/banding/detail.js

@@ -33,9 +33,33 @@ class DropzoneWrapper extends Component {
 }
 
 const selectInstanceId = 1;
+
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const jawabanBandingSchema = Yup.object().shape({
 	status: Yup.string().required("Harap Diisi"),
-	dokumen: Yup.array().min(1).required(),
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 class JawabanBanding extends Component {
 	constructor(props) {
@@ -212,7 +236,14 @@ class JawabanBanding extends Component {
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
-																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																									<button
+																										type="button"
+																										className="btn btn-link"
+																										onClick={(e) => {
+																											this.clearFiles(e);
+																											form.setFieldValue(field.name, []);
+																										}}
+																									>
 																										Clear files
 																									</button>
 																								</small>

pages/app/keberatan/detail.js

@@ -33,10 +33,35 @@ class DropzoneWrapper extends Component {
 }
 
 const selectInstanceId = 1;
+
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
 const jawabanKeberatanSchema = Yup.object().shape({
 	status: Yup.string().required("Harap Diisi"),
 	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
-	dokumen: Yup.array().notRequired(),
+	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 class DetailKeberatan extends Component {
 	constructor(props) {
@@ -234,7 +259,14 @@ class DetailKeberatan extends Component {
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
-																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																									<button
+																										type="button"
+																										className="btn btn-link"
+																										onClick={(e) => {
+																											this.clearFiles(e);
+																											form.setFieldValue(field.name, []);
+																										}}
+																									>
 																										Clear files
 																									</button>
 																								</small>

pages/app/pelaporan/detail.js

@@ -29,7 +29,6 @@ class DetailPelaporan extends Component {
 
 	render() {
 		const { pelaporan } = this.state;
-		console.log(pelaporan);
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}

pages/app/pemeriksaan/new.js

@@ -28,6 +28,14 @@ class PemeriksaanNew extends Component {
 		this.setState({ pelaporan });
 	};
 
+	componentShouldUpdate(nextProps, nextState) {
+		return nextState.pelaporan !== this.state.pelaporan;
+	}
+
+	changePelaporan = (data) => {
+		this.setState({ pelaporan: data });
+	};
+
 	render() {
 		const { query, token } = this.props;
 		const { pelaporan } = this.state;
@@ -51,7 +59,7 @@ class PemeriksaanNew extends Component {
 										<Row>
 											<Col lg={12}>
 												<DetailLaporan data={pelaporan.data} />
-												<InputEvaluasi query={query} token={token} />
+												<InputEvaluasi query={query} token={token} changePelaporan={this.changePelaporan} />
 											</Col>
 										</Row>
 									</CardBody>

pages/app/pencabutan-sanksi/detail.js

@@ -18,10 +18,33 @@ import { connect } from "react-redux";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const jawabanCabutSanksiSchema = Yup.object().shape({
 	status: Yup.string().required("Harap Diisi"),
 	keterangan: Yup.string().max(200).notRequired(),
-	dokumen: Yup.array().notRequired(),
+	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
@@ -230,7 +253,14 @@ class JawabanPencabutanSanksi extends Component {
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
-																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																									<button
+																										type="button"
+																										className="btn btn-link"
+																										onClick={(e) => {
+																											this.clearFiles(e);
+																											form.setFieldValue(field.name, []);
+																										}}
+																									>
 																										Clear files
 																									</button>
 																								</small>

pages/laporan/new/index.js

@@ -7,28 +7,53 @@ import { createLaporanPublic } from "@/actions/pelaporan";
 import { notifLaporanBaru } from "@/actions/notifikasi";
 import Select from "react-select";
 import AsyncSelect from "react-select/async";
-import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { createPublicUser } from "@/actions/user";
 import { ToastContainer, toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
+import swal from "sweetalert";
 
 import "react-toastify/dist/ReactToastify.css";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
 const laporanSchema = Yup.object().shape({
 	no_laporan: Yup.string().required("Harap Diisi"),
 	no_hp: Yup.number().required("Harap Diisi"),
-	nama: Yup.string().required(),
+	nama: Yup.string().notRequired(),
 	setuju: Yup.boolean().isTrue(),
-	alamat: Yup.string().min(3).max(200).required(),
-	keterangan: Yup.string().min(3).max(200).required(),
-	email: Yup.string().email().required(),
-	pelanggaran_id: Yup.array().min(1).required(),
-	pt_id: Yup.string().required(),
-	foto: Yup.array().min(1).required("Harus ada"),
-	dokumen: Yup.mixed().nullable().notRequired(),
+	alamat: Yup.string().min(3).max(200).notRequired(),
+	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
+	email: Yup.string().email().notRequired(),
+	pelanggaran_id: Yup.array().min(1).required("Harap Diisi"),
+	pt_id: Yup.string().required("Harap Diisi"),
+	foto: Yup.array().notRequired().test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig).test("type", "harus jpeg/png", checkIfFilesAreCorrectType),
+	dokumen: Yup.array().nullable().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 	is_private: Yup.boolean().notRequired(),
 });
 
@@ -75,6 +100,12 @@ class App extends Component {
 			isPrivate: false,
 			confirm: false,
 			msgError: [],
+			modal: false,
+			user: {},
+			kode: "",
+			error: null,
+			data: {},
+			token: "",
 		};
 	}
 
@@ -85,10 +116,8 @@ class App extends Component {
 		this.setState({ pelanggaran });
 	};
 
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
+	toggleModal = () => {
+		this.setState({ modal: !this.state.modal });
 	};
 
 	optionsJenisPelanggaran = (pelanggaran) => {
@@ -117,12 +146,12 @@ class App extends Component {
 		const formdata = new FormData();
 		formdata.append("no_laporan", data.no_laporan);
 		formdata.append("pt_id", data.pt_id);
-		formdata.append("keterangan", data.keterangan);
-		formdata.append("is_private", data.is_private);
 		formdata.append("nama", data.nama);
-		formdata.append("alamat", data.alamat);
-		formdata.append("no_hp", data.no_hp);
 		formdata.append("email", data.email);
+		formdata.append("no_hp", data.no_hp);
+		formdata.append("alamat", data.alamat);
+		formdata.append("is_private", data.is_private);
+		formdata.append("keterangan", data.keterangan);
 		formdata.append("pelanggaran_id", data.pelanggaran_id.join(","));
 		formdata.append("foto", data.foto[0]);
 		if (data.dokumen.length > 0) {
@@ -141,6 +170,46 @@ class App extends Component {
 		}
 	};
 
+	createLaporan = async (token, kode = "") => {
+		const data = this.state.data;
+		const formdata = new FormData();
+		formdata.append("pt_id", data.pt_id);
+		formdata.append("keterangan", data.keterangan);
+		formdata.append("pelanggaran_id", data.pelanggaran_id.join(","));
+		if (kode) {
+			formdata.append("no_verifikasi", kode);
+		}
+		if (data.dokumen.length > 0) {
+			Array.from(data.dokumen).forEach((e) => {
+				formdata.append("dokumen", e);
+			});
+		}
+
+		const toastid = toast.loading("Please wait...");
+		const success = await createLaporanPublic(token, formdata);
+		if (!success) {
+			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+			this.setState({ error: "Kode verifikasi tidak valid" });
+		} else {
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			this.toggleModal();
+			Router.push("/laporan/new");
+		}
+	};
+
+	createUser = async (data) => {
+		const formdata = new FormData();
+		formdata.append("no_laporan", data.no_laporan);
+		formdata.append("pt_id", data.pt_id);
+		if (data.nama) formdata.append("nama", data.nama);
+		if (data.email) formdata.append("email", data.email);
+		formdata.append("no_hp", data.no_hp);
+		if (data.alamat) formdata.append("alamat", data.alamat);
+		formdata.append("is_private", data.is_private);
+		if (data.foto.length > 0) formdata.append("foto", data.foto[0]);
+		return await createPublicUser(formdata);
+	};
+
 	render() {
 		const { selectedJenis, pelanggaran } = this.state;
 		return (
@@ -148,7 +217,8 @@ class App extends Component {
 				<ToastContainer />
 				<Navbar className="navbar-color" expand="md" dark>
 					<NavbarBrand href="/">
-					<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" />
+						<img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -184,14 +254,19 @@ class App extends Component {
 											is_private: false,
 										}}
 										validationSchema={laporanSchema}
-										onSubmit={this.handleKirim}
+										onSubmit={async (data) => {
+											this.toggleModal();
+											this.setState({ data, no_hp: data.no_hp });
+											const user = await this.createUser(data);
+											const token = user.data.token;
+											this.setState({ user, token });
+										}}
 									>
 										<Form className="form-horizontal">
 											<div class="header-1">
-    												<h2 class="card-title-1">Identitas Pelapor</h2>
-												</div>
-											<FormGroup row>
-											</FormGroup>
+												<h2 class="card-title-1">Identitas Pelapor</h2>
+											</div>
+											<FormGroup row></FormGroup>
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">Nama Lengkap</label>
 												<div className="col-md-10">
@@ -202,7 +277,7 @@ class App extends Component {
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">Nomor Aktif</label>
 												<div className="col-md-10">
-													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
+													<Field name="no_hp">{({ field, form }) => <Input type="tel" {...field} />}</Field>
 													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
 												</div>
 											</FormGroup>
@@ -230,14 +305,15 @@ class App extends Component {
 													<div className="checkbox c-checkbox">
 														<label>
 															<Field name="is_private">{({ field }) => <Input type="checkbox" {...field} />}</Field>
-															<span className="fa fa-check"></span><text>*</text>Klik jika ingin merahasiakan identitas anda
+															<span className="fa fa-check"></span>
+															<text>*</text>Klik jika ingin merahasiakan identitas anda
 														</label>
 													</div>
 												</div>
 											</FormGroup>
 											<div class="header-1">
-    												<h2 class="card-title-1">Detail Laporan</h2>
-												</div>
+												<h2 class="card-title-1">Detail Laporan</h2>
+											</div>
 											{/* <p className="lead bb">Detail Laporan</p> */}
 											<FormGroup row>
 												<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
@@ -309,19 +385,19 @@ class App extends Component {
 													<div className="checkbox c-checkbox">
 														<label>
 															<Field name="setuju">{({ field }) => <Input type="checkbox" {...field} />}</Field>
-															<span className="fa fa-check"></span><text>*</text>Klik jika data yang anda laporkan sudah benar
+															<span className="fa fa-check"></span>
+															<text>*</text>Klik jika data yang anda laporkan sudah benar
 															<ErrorMessage name="setuju" component="div" className="form-text text-danger" />
 														</label>
 													</div>
 												</div>
 											</FormGroup>
 											<FormGroup row>
-											<div className="posisi-btn-1">
+												<div className="posisi-btn-1">
 													<Button className="button-kirimlaporan" color="info" block type="submit">
 														<h3 className="text-kirimlaporan">Kirim Laporan</h3>
 													</Button>
-												
-											</div>
+												</div>
 											</FormGroup>
 										</Form>
 									</Formik>
@@ -329,6 +405,42 @@ class App extends Component {
 							</Card>
 						</Col>
 					</Row>
+					<Modal isOpen={this.state.modal}>
+						<form className="form-horizontal">
+							<ModalBody>
+								<FormGroup>
+									<label>Masukkan Kode Verifikasi</label>
+									<div>
+										<Input onChange={(e) => this.setState({ kode: e.target.value })} type="text" />
+									</div>
+									<p>*Kode verifikasi terkirim ke nomor WA {this.state.no_hp}</p>
+									{this.state.error && <div className="form-text text-danger">{this.state.error}</div>}
+								</FormGroup>
+							</ModalBody>
+							<ModalFooter>
+								<Button
+									color="info"
+									onClick={async () => {
+										await this.createLaporan(this.state.token);
+									}}
+								>
+									Tidak memiliki Kode Verifikasi
+								</Button>
+								<Button
+									color="primary"
+									onClick={async () => {
+										if (this.state.kode) {
+											await this.createLaporan(this.state.token, this.state.kode);
+										} else {
+											this.setState({ error: "Kode verifikasi harus diisi" });
+										}
+									}}
+								>
+									Kirim
+								</Button>
+							</ModalFooter>
+						</form>
+					</Modal>
 				</ContentWrapper>
 			</div>
 		);

pages/pt/dokumen-perbaikan/detail.js

@@ -16,9 +16,32 @@ import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
 const perbaikanSchema = Yup.object().shape({
 	keterangan: Yup.string().min(3).max(200).required("Harap diisi"),
-	dokumen: Yup.array().min(1).required("Harap diisi"),
+	dokumen: Yup.array().min(1, "minimal terdapat 1 dokumen").required("Harap diisi").test("filesize", "Maksimal ukuran Dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
@@ -204,40 +227,6 @@ class DetailPerbaikanDoc extends Component {
 														</Form>
 													)}
 												</Formik>
-												{/* <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-													
-													<FormGroup>
-														<label className="row-form-label">Upload Dokumen:</label>
-														<div className="row-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>
-														</div>
-													</FormGroup>
-													<FormGroup>
-														<div className="row-xl-10">
-															<Button color="primary" onClick={this.handleKirim} type="submit">
-																Kirim
-															</Button>
-														</div>
-													</FormGroup>
-												</form> */}
 											</Col>
 										</Row>
 									</CardBody>
@@ -251,7 +240,7 @@ class DetailPerbaikanDoc extends Component {
 					{sanksi.data && (
 						<Row>
 							<Col>
-								<Riwayat data={sanksi.data.perbaikan || []} />
+								<Riwayat data={sanksi.data.perbaikan} />
 							</Col>
 						</Row>
 					)}

pages/pt/pencabutan-sanksi/detail.js

@@ -15,8 +15,32 @@ import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
+const checkIfFilesAreTooBig = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (file.size > 15 * 1024 * 1024) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+	let valid = true;
+	if (files) {
+		files.map((file) => {
+			if (!["image/jpeg", "image/png"].includes(file.type)) {
+				valid = false;
+			}
+		});
+	}
+	return valid;
+};
+
 const docSchema = Yup.object().shape({
-	dokumen: Yup.array().min(1).required("Required"),
+	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 let Dropzone = null;
 class DropzoneWrapper extends Component {

styles/app/layout/layout.scss

@@ -13,469 +13,461 @@
 // If modified or removed make sure to check the variable
 // shared with other components
 // -------------------------------------------------------------
-$aside-wd:                                220px;
-$aside-wd-collapsed:                      70px;
-$aside-wd-collapsed-text:                 90px;
-$aside-bg:                                #fff;
+$aside-wd: 220px;
+$aside-wd-collapsed: 70px;
+$aside-wd-collapsed-text: 90px;
+$aside-bg: #fff;
 
-$content-bg:                              $body-bg;
-$content-heading-bg:                      #fafbfc;
-$content-heading-border:                  #cfdbe2;
-$content-padding:                         20px;
+$content-bg: $body-bg;
+$content-heading-bg: #fafbfc;
+$content-heading-border: #cfdbe2;
+$content-padding: 20px;
 
-$footer-hg:                               60px;
+$footer-hg: 60px;
 
-$navbar-hg:                               $navbar-height;
+$navbar-hg: $navbar-height;
 
-$boxed-max-width:                         1140px;
-$z-index-main-section:                    111;
+$boxed-max-width: 1140px;
+$z-index-main-section: 111;
 
 html {
-    /* $replace rtl */
-    direction: ltr;
-    height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    font-size: 16px; // force same font size acrros all device
+	/* $replace rtl */
+	direction: ltr;
+	height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	font-size: 16px; // force same font size acrros all device
 }
 
-html, body, #__next, #__settings_provider, #__themes_provider {
-  // overflow-x: hidden;
-  height: 100%;
+html,
+body,
+#__next,
+#__settings_provider,
+#__themes_provider {
+	// overflow-x: hidden;
+	height: 100%;
 }
 
 // Main wrapper
 // -----------------------------
 .wrapper {
-    position: relative;
-    width: 100%;
-    height: auto;
-    min-height: 100%;
-    overflow-x: hidden;
-    // Contains the main sidebar
-    .aside-container {
-        // visibility: hidden;
-        position: absolute;
-        width: $aside-wd;
-
-        top: 0;
-        left: 0;
-        bottom: 0;
-        z-index: $z-index-main-section + 5; // @include transition(visibility 0s linear .3s);
-        backface-visibility: hidden;
-        background-color: $aside-bg;
-
-        .aside-inner {
-            padding-top: $navbar-hg;
-            height: 100%;
-            width: $aside-wd;
-            overflow: hidden;
-        }
-
-        .nav-floating {
-
-            // position: handled from directive
-            left: inherit;
-            margin-left: $aside-wd;
-            z-index: $z-index-main-section * 10;
-
-            min-width: 190px;
-            overflow: auto;
-        }
-    }
-    // Contains the main content
-    .section-container {
-        position: relative;
-        height: 100%;
-        margin-left: 0; // overflow: hidden;
-        z-index: $z-index-main-section;
-        background-color: $content-bg;
-        margin-bottom: $footer-hg !important; // ensure a space for the footer
-    } // Page Footer
-    .footer-container {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: $footer-hg;
-        border-top: 1px solid $gray-light;
-        padding: $content-padding;
-        z-index: $z-index-main-section - 2;
-        font-size: .875rem;
-        p {
-            margin: 0;
-        }
-    }
+	position: relative;
+	width: 100%;
+	height: auto;
+	min-height: 100%;
+	overflow-x: hidden;
+	// Contains the main sidebar
+	.aside-container {
+		// visibility: hidden;
+		position: absolute;
+		width: $aside-wd;
+
+		top: 0;
+		left: 0;
+		bottom: 0;
+		z-index: $z-index-main-section + 5; // @include transition(visibility 0s linear .3s);
+		backface-visibility: hidden;
+		background-color: $aside-bg;
+
+		.aside-inner {
+			padding-top: $navbar-hg;
+			height: 100%;
+			width: $aside-wd;
+			overflow: hidden;
+		}
+
+		.nav-floating {
+			// position: handled from directive
+			left: inherit;
+			margin-left: $aside-wd;
+			z-index: $z-index-main-section * 10;
+
+			min-width: 190px;
+			overflow: auto;
+		}
+	}
+	// Contains the main content
+	.section-container {
+		position: relative;
+		height: 100%;
+		margin-left: 0; // overflow: hidden;
+		z-index: $z-index-main-section;
+		background-color: $content-bg;
+		margin-bottom: $footer-hg !important; // ensure a space for the footer
+	} // Page Footer
+	.footer-container {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: $footer-hg;
+		border-top: 1px solid $gray-light;
+		padding: $content-padding;
+		z-index: $z-index-main-section - 2;
+		font-size: 0.875rem;
+		p {
+			margin: 0;
+		}
+	}
 }
 
 .modal-open .wrapper {
-    z-index: 0;
+	z-index: 0;
 }
 
 // Page main content
 // -----------------------------
 .content-wrapper {
-    padding: 15px;
-    width: 100%; // styling to visually wrap the component
-    border-top: 1px solid rgba(0, 0, 0, .15);
-    margin-top: -1px;
-
-    .unwrap {
-        margin: -15px; // expand over wrapper padding
-        @include media-breakpoint-up(md) {
-            margin: -20px; // expand over wrapper padding
-        }
-    }
-
-    .content-heading {
-        display: flex;
-        align-items: center;
-        font-size: 1.5rem;
-        line-height: $headings-line-height;
-        color: #929292;
-        margin: -15px;
-        margin-bottom: 20px;
-        padding: 15px;
-        font-weight: normal;
-        background-color: $content-heading-bg;
-        border-bottom: 1px solid $content-heading-border;
-        small {
-            display: block;
-            font-size: 12px;
-            color: $text-muted;
-        }
-    }
-
-    .container,
-    .container-fluid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    @include media-breakpoint-up(md) {
-        padding: $content-padding; //overflow: auto; // required for portlets
-        .content-heading {
-            margin: -$content-padding;
-            margin-bottom: $content-padding;
-            padding: $content-padding;
-            background-color: #E3F0FF;
-            button,
-            .btn {
-                margin: 0;
-            }
-        }
-    }
+	padding: 15px;
+	width: 100%; // styling to visually wrap the component
+	border-top: 1px solid rgba(0, 0, 0, 0.15);
+	margin-top: -1px;
+
+	.unwrap {
+		margin: -15px; // expand over wrapper padding
+		@include media-breakpoint-up(md) {
+			margin: -20px; // expand over wrapper padding
+		}
+	}
+
+	.content-heading {
+		display: flex;
+		align-items: center;
+		font-size: 1.5rem;
+		line-height: $headings-line-height;
+		color: #929292;
+		margin: -15px;
+		margin-bottom: 20px;
+		padding: 15px;
+		font-weight: normal;
+		background-color: $content-heading-bg;
+		border-bottom: 1px solid $content-heading-border;
+		small {
+			display: block;
+			font-size: 12px;
+			color: $text-muted;
+		}
+	}
+
+	.container,
+	.container-fluid {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	@include media-breakpoint-up(md) {
+		padding: $content-padding; //overflow: auto; // required for portlets
+		.content-heading {
+			margin: -$content-padding;
+			margin-bottom: $content-padding;
+			padding: $content-padding;
+			// background-color: #e3f0ff;
+			button,
+			.btn {
+				margin: 0;
+			}
+		}
+	}
 }
 
 // Desktop layout
 // -----------------------------
 @include media-breakpoint-up(md) {
-
-    body {
-        min-height: 100%;
-    }
-
-    .wrapper {
-
-        .aside-container {
-            .aside-inner {
-                // padding-top: $navbar-hg;
-            }
-        }
-
-        .section-container,
-        .footer-container {
-            margin-left: $aside-wd;
-        }
-
-        .section-container {
-            // with just a margin we can make the
-            // right sidebar always visible
-            &.has-sidebar-right {
-                margin-right: $aside-wd + 20;
-                +.offsidebar {
-                    z-index: 1;
-                }
-            }
-        }
-    }
+	body {
+		min-height: 100%;
+	}
+
+	.wrapper {
+		.aside-container {
+			.aside-inner {
+				// padding-top: $navbar-hg;
+			}
+		}
+
+		.section-container,
+		.footer-container {
+			margin-left: $aside-wd;
+		}
+
+		.section-container {
+			// with just a margin we can make the
+			// right sidebar always visible
+			&.has-sidebar-right {
+				margin-right: $aside-wd + 20;
+				+ .offsidebar {
+					z-index: 1;
+				}
+			}
+		}
+	}
 }
 
 // Aside toggled layout
 // On mobile acts like offcanvas
 // -----------------------------
 @include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
+	// csstransforms3d
+	.wrapper {
+		backface-visibility: hidden;
+		.section-container,
+		.footer-container {
+			margin-left: 0;
+			transform: translate3d(0, 0, 0);
+			transition: transform 0.3s ease;
+		}
+		.aside-container {
+			margin-left: 0;
+			transform: translate3d(-$aside-wd, 0, 0);
+			transition: transform 0.3s ease;
+		}
+	}
+
+	.aside-toggled {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				transform: translate3d($aside-wd, 0, 0);
+			}
+			.aside-container {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+	}
 }
 
 // Toggle and collapsed behavior overrides
 @include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .aside-collapsed .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd-collapsed, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-collapsed.aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd-collapsed, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
+	// csstransforms3d
+	.aside-collapsed .wrapper {
+		backface-visibility: hidden;
+		.section-container,
+		.footer-container {
+			margin-left: 0;
+			transform: translate3d(0, 0, 0);
+			transition: transform 0.3s ease;
+		}
+		.aside-container {
+			margin-left: 0;
+			transform: translate3d(-$aside-wd-collapsed, 0, 0);
+			transition: transform 0.3s ease;
+		}
+	}
+
+	.aside-collapsed.aside-toggled {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				transform: translate3d($aside-wd-collapsed, 0, 0);
+			}
+			.aside-container {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+	}
 }
 
 // Aside collapsed layout
 // -------------------------------
 // Aside status toggled via JS
 .aside-collapsed {
-    overflow-y: auto;
-    .wrapper {
-        .aside-container {
-            &,
-            .aside-inner {
-                width: $aside-wd-collapsed;
-            }
-            .nav-floating {
-                margin-left: $aside-wd-collapsed;
-            }
-        }
-    }
+	overflow-y: auto;
+	.wrapper {
+		.aside-container {
+			&,
+			.aside-inner {
+				width: $aside-wd-collapsed;
+			}
+			.nav-floating {
+				margin-left: $aside-wd-collapsed;
+			}
+		}
+	}
 }
 
 // Margin only exists above tablet
 @include media-breakpoint-up(md) {
-    // Aside status toggled via JS
-    .aside-collapsed {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                margin-left: $aside-wd-collapsed;
-            }
-        }
-    }
+	// Aside status toggled via JS
+	.aside-collapsed {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				margin-left: $aside-wd-collapsed;
+			}
+		}
+	}
 }
 
 // ------------------------------
 // Collapsed variation with text
 // ------------------------------
 @include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .aside-collapsed-text .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd-collapsed-text, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-collapsed-text.aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd-collapsed-text, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
+	// csstransforms3d
+	.aside-collapsed-text .wrapper {
+		backface-visibility: hidden;
+		.section-container,
+		.footer-container {
+			margin-left: 0;
+			transform: translate3d(0, 0, 0);
+			transition: transform 0.3s ease;
+		}
+		.aside-container {
+			margin-left: 0;
+			transform: translate3d(-$aside-wd-collapsed-text, 0, 0);
+			transition: transform 0.3s ease;
+		}
+	}
+
+	.aside-collapsed-text.aside-toggled {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				transform: translate3d($aside-wd-collapsed-text, 0, 0);
+			}
+			.aside-container {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+	}
 }
 
 // Aside collapsed layout
 // -------------------------------
 // Aside status toggled via JS
 .aside-collapsed-text {
-    overflow-y: auto;
-    .wrapper {
-        .aside-container {
-            &,
-            .aside-inner {
-                width: $aside-wd-collapsed-text;
-            }
-            .nav-floating {
-                margin-left: $aside-wd-collapsed-text;
-            }
-        }
-    }
+	overflow-y: auto;
+	.wrapper {
+		.aside-container {
+			&,
+			.aside-inner {
+				width: $aside-wd-collapsed-text;
+			}
+			.nav-floating {
+				margin-left: $aside-wd-collapsed-text;
+			}
+		}
+	}
 }
 
 // Margin only exists above tablet
 @include media-breakpoint-up(md) {
-    // Aside status toggled via JS
-    .aside-collapsed-text {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                margin-left: $aside-wd-collapsed-text;
-            }
-        }
-    }
+	// Aside status toggled via JS
+	.aside-collapsed-text {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				margin-left: $aside-wd-collapsed-text;
+			}
+		}
+	}
 }
 
 // end collapsed variation with text
 // mixin to remove transformations
 @mixin disable-transform() {
-    -webkit-transform: none;
-    -moz-transform: none;
-    -opera-transform: none;
-    -ms-transform: none;
-    transform: none;
+	-webkit-transform: none;
+	-moz-transform: none;
+	-opera-transform: none;
+	-ms-transform: none;
+	transform: none;
 }
 
 // Fixed layout
 // -----------------------------
 .layout-fixed {
-
-    @media (max-width: $boxed-max-width) {
-        &.aside-toggled,
-        &.offsidebar-open {
-            overflow-y: hidden;
-        }
-    }
-
-    .wrapper {
-        .topnavbar-wrapper {
-            position: fixed;
-            top: 0px;
-            width: 100%;
-            z-index: $z-index-main-section + 10;
-        }
-        .aside-container,
-        .offsidebar {
-            position: fixed;
-        }
-        /* only applied to sidebar */
-        .aside-container {
-            /* safari fix */
-            height: 1px;
-            min-height: 100%;
-            /* ios blanks space fix */
-            .aside-inner {
-                position: fixed;
-                top: 0;
-                bottom: 0;
-            }
-        }
-        .section-container {
-            margin-top: $navbar-hg;
-        }
-    }
+	@media (max-width: $boxed-max-width) {
+		&.aside-toggled,
+		&.offsidebar-open {
+			overflow-y: hidden;
+		}
+	}
+
+	.wrapper {
+		.topnavbar-wrapper {
+			position: fixed;
+			top: 0px;
+			width: 100%;
+			z-index: $z-index-main-section + 10;
+		}
+		.aside-container,
+		.offsidebar {
+			position: fixed;
+		}
+		/* only applied to sidebar */
+		.aside-container {
+			/* safari fix */
+			height: 1px;
+			min-height: 100%;
+			/* ios blanks space fix */
+			.aside-inner {
+				position: fixed;
+				top: 0;
+				bottom: 0;
+			}
+		}
+		.section-container {
+			margin-top: $navbar-hg;
+		}
+	}
 }
 
-
 /* IE10+ hack: safari fix breaks ie so we need to target ie only to restore */
 
 _:-ms-lang(x),
 .layout-fixed .wrapper .aside-container .aside-inner {
-    position: static !important;
+	position: static !important;
 }
 
 // Boxed layout (only for desktops)
 // -----------------------------
 .layout-boxed {
-
-    @include media-breakpoint-up(lg) {
-        overflow: auto !important;
-        .wrapper {
-            margin: 0 auto;
-            overflow: hidden;
-            box-shadow: 0 0 13px rgba(0, 0, 0, .25);
-
-            .offsidebar {
-                position: absolute !important;
-            }
-
-            .aside-container {
-                left: inherit;
-            }
-            &,
-            & .topnavbar-wrapper {
-                width: 970px;
-            }
-        }
-
-        &.layout-fixed {
-            .wrapper .aside-container .aside-inner {
-                left: inherit;
-            }
-        }
-    } // max size for large devices
-    @include media-breakpoint-up(xl) {
-        .wrapper {
-            &,
-            & .topnavbar-wrapper {
-                width: $boxed-max-width;
-            }
-        }
-    }
+	@include media-breakpoint-up(lg) {
+		overflow: auto !important;
+		.wrapper {
+			margin: 0 auto;
+			overflow: hidden;
+			box-shadow: 0 0 13px rgba(0, 0, 0, 0.25);
+
+			.offsidebar {
+				position: absolute !important;
+			}
+
+			.aside-container {
+				left: inherit;
+			}
+			&,
+			& .topnavbar-wrapper {
+				width: 970px;
+			}
+		}
+
+		&.layout-fixed {
+			.wrapper .aside-container .aside-inner {
+				left: inherit;
+			}
+		}
+	} // max size for large devices
+	@include media-breakpoint-up(xl) {
+		.wrapper {
+			&,
+			& .topnavbar-wrapper {
+				width: $boxed-max-width;
+			}
+		}
+	}
 } // boxed
 
 // Sidebar backdrop
 .sidebar-backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: $aside-wd;
-    z-index: $z-index-main-section + 1;
-    .aside-collapsed & {
-        left: $aside-wd-collapsed;
-    }
-    .aside-collapsed-text & {
-        left: $aside-wd-collapsed-text
-    }
-}
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: $aside-wd;
+	z-index: $z-index-main-section + 1;
+	.aside-collapsed & {
+		left: $aside-wd-collapsed;
+	}
+	.aside-collapsed-text & {
+		left: $aside-wd-collapsed-text;
+	}
+}

styles/bootstrap/_buttons.scss

@@ -5,219 +5,213 @@
 //
 
 .btn {
-  display: inline-block;
-  font-family: $btn-font-family;
-  font-weight: $btn-font-weight;
-  color: $body-color;
-  text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: $btn-white-space;
-  vertical-align: middle;
-  user-select: none;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-  @include transition($btn-transition);
-
-  @include hover() {
-    color: $body-color;
-    text-decoration: none;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: $btn-focus-box-shadow;
-  }
-
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    @include box-shadow(none);
-  }
-
-  &:not(:disabled):not(.disabled) {
-    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
-
-    &:active,
-    &.active {
-      @include box-shadow($btn-active-box-shadow);
-
-      &:focus {
-        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-      }
-    }
-  }
+	display: inline-block;
+	font-family: $btn-font-family;
+	font-weight: $btn-font-weight;
+	color: $body-color;
+	text-align: center;
+	text-decoration: if($link-decoration == none, null, none);
+	white-space: $btn-white-space;
+	vertical-align: middle;
+	user-select: none;
+	background-color: transparent;
+	border: $btn-border-width solid transparent;
+	@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+	@include transition($btn-transition);
+
+	@include hover() {
+		color: $body-color;
+		text-decoration: none;
+	}
+
+	&:focus,
+	&.focus {
+		outline: 0;
+		box-shadow: $btn-focus-box-shadow;
+	}
+
+	// Disabled comes first so active can properly restyle
+	&.disabled,
+	&:disabled {
+		opacity: $btn-disabled-opacity;
+		@include box-shadow(none);
+	}
+
+	&:not(:disabled):not(.disabled) {
+		cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
+
+		&:active,
+		&.active {
+			@include box-shadow($btn-active-box-shadow);
+
+			&:focus {
+				@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+			}
+		}
+	}
 }
 
 // Future-proof disabling of clicks on `<a>` elements
 a.btn.disabled,
 fieldset:disabled a.btn {
-  pointer-events: none;
+	pointer-events: none;
 }
 
-
 //
 // Alternate buttons
 //
 
 @each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @include button-variant($value, $value);
-  }
+	.btn-#{$color} {
+		@include button-variant($value, $value);
+	}
 }
 
 @each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
+	.btn-outline-#{$color} {
+		@include button-outline-variant($value);
+	}
 }
 
-
 //
 // Link buttons
 //
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: $font-weight-normal;
-  color: $link-color;
-  text-decoration: $link-decoration;
+	font-weight: $font-weight-normal;
+	color: $link-color;
+	text-decoration: $link-decoration;
 
-  @include hover() {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
+	@include hover() {
+		color: $link-hover-color;
+		text-decoration: $link-hover-decoration;
+	}
 
-  &:focus,
-  &.focus {
-    text-decoration: $link-hover-decoration;
-  }
+	&:focus,
+	&.focus {
+		text-decoration: $link-hover-decoration;
+	}
 
-  &:disabled,
-  &.disabled {
-    color: $btn-link-disabled-color;
-    pointer-events: none;
-  }
+	&:disabled,
+	&.disabled {
+		color: $btn-link-disabled-color;
+		pointer-events: none;
+	}
 
-  // No need for an active state here
+	// No need for an active state here
 }
 
-
 //
 // Button Sizes
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+	@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+	@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 }
 
-
 //
 // Block button
 //
 
 .btn-block {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 
-  // Vertically space out multiple block buttons
-  + .btn-block {
-    margin-top: $btn-block-spacing-y;
-  }
+	// Vertically space out multiple block buttons
+	+ .btn-block {
+		margin-top: $btn-block-spacing-y;
+	}
 }
 
 // Specificity overrides
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
-
-.button-kirimlaporan{
-  // background: rgba(0, 0, 0, 0.05);
-  display: inline-block;
-background-color: #6FB9DE;
-width: 175px;
-height: 40px;
-
-}
-.text-kirimlaporan{
-  font-weight: 500;
-  font-size: 20px;
-  letter-spacing: 0.02em;
-  text-align: center;
-  padding-bottom: 5px;
-}
-.button-lihatpemantauan{
-  position: relative;
-  margin-left: auto;
-  // background: rgba(0, 0, 0, 0.05);
-  display: inline-block;
-  background-color: #6FB9DE;
-  width: 200px;
-  height: 40px;
-}
-.text-lihatpemantauan{
-  font-weight: 500;
-  font-size: 20px;
-  letter-spacing: 0.02em;
-  text-align: center;
-  padding-bottom: 5px
+	&.btn-block {
+		width: 100%;
+	}
+}
+
+.button-kirimlaporan {
+	// background: rgba(0, 0, 0, 0.05);
+	display: inline-block;
+	background-color: #6fb9de;
+	width: 175px;
+	height: 40px;
+}
+.text-kirimlaporan {
+	font-weight: 500;
+	font-size: 20px;
+	letter-spacing: 0.02em;
+	text-align: center;
+	padding-bottom: 5px;
+}
+.button-lihatpemantauan {
+	position: relative;
+	margin-left: auto;
+	// background: rgba(0, 0, 0, 0.05);
+	display: inline-block;
+	background-color: #6fb9de;
+	width: 200px;
+	height: 40px;
+}
+.text-lihatpemantauan {
+	font-weight: 500;
+	font-size: 20px;
+	letter-spacing: 0.02em;
+	text-align: center;
+	padding-bottom: 5px;
 }
 .btn-labeled {
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 20px;
-    margin-top: 3%;
-    background: #6FB9DE;
-
-}
-.btn-labeled-2{
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-left: 20px;
-    margin-top: 3%;
-    background: #6FB9DE;
-}
-.btn-login{
-  background: #6FB9DE;
-}
-.navbar-color{
-  background-color: #6FB9DE;
-}
-.posisi-btn-1{
-  position: relative;
-  margin-left: auto;
-  padding-right: 20px;
-}
-.tengah{
-text-align: center;
-padding: 30px;
-}
-.btn-simpanpenjadwalan{
-  margin-left: auto;
-  width: 100px;
-}
-.btn-colorpenjadwalan{
-  // display: inline-block;
-  background-color: #6FB9DE;
-  height: 35px;
-}
-.text-btn-penjadwalan-1{
-  letter-spacing: 0.02em;
-  text-align: center;
-}
-.btn-simpanjadwal{
-  margin-left: auto;
-  width: 100px;
-  margin-top: 20px;
-  margin-bottom: 15px;
+	padding-top: 0;
+	padding-bottom: 0;
+	font-size: 20px;
+	margin-top: 3%;
+	background: #6fb9de;
+}
+.btn-labeled-2 {
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-left: 20px;
+	margin-top: 3%;
+	background: #6fb9de;
+}
+.btn-login {
+	background: #6fb9de;
+}
+.navbar-color {
+	background-color: #6fb9de;
+}
+.posisi-btn-1 {
+	position: relative;
+	margin-left: auto;
+	padding-right: 20px;
+}
+.tengah {
+	text-align: center;
+	padding: 30px;
+}
+.btn-simpanpenjadwalan {
+	margin-left: auto;
+	width: 100px;
+}
+.btn-colorpenjadwalan {
+	// display: inline-block;
+	background-color: #6fb9de;
+	height: 35px;
+}
+.text-btn-penjadwalan-1 {
+	letter-spacing: 0.02em;
+	text-align: center;
+}
+.btn-simpanjadwal {
+	margin-left: auto;
+	width: 100px;
+	margin-top: 20px;
+	margin-bottom: 15px;
 }

styles/bootstrap/_card.scss

@@ -3,77 +3,77 @@
 //
 
 .card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-  height: $card-height;
-  word-wrap: break-word;
-  background-color: $card-bg;
-  background-clip: border-box;
-  border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
-
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  > .list-group {
-    border-top: inherit;
-    border-bottom: inherit;
-
-    &:first-child {
-      border-top-width: 0;
-      @include border-top-radius($card-inner-border-radius);
-    }
-
-    &:last-child  {
-      border-bottom-width: 0;
-      @include border-bottom-radius($card-inner-border-radius);
-    }
-  }
-
-  // Due to specificity of the above selector (`.card > .list-group`), we must
-  // use a child selector here to prevent double borders.
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
-    border-top: 0;
-  }
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+	height: $card-height;
+	word-wrap: break-word;
+	background-color: $card-bg;
+	background-clip: border-box;
+	border: $card-border-width solid $card-border-color;
+	@include border-radius($card-border-radius);
+
+	> hr {
+		margin-right: 0;
+		margin-left: 0;
+	}
+
+	> .list-group {
+		border-top: inherit;
+		border-bottom: inherit;
+
+		&:first-child {
+			border-top-width: 0;
+			@include border-top-radius($card-inner-border-radius);
+		}
+
+		&:last-child {
+			border-bottom-width: 0;
+			@include border-bottom-radius($card-inner-border-radius);
+		}
+	}
+
+	// Due to specificity of the above selector (`.card > .list-group`), we must
+	// use a child selector here to prevent double borders.
+	> .card-header + .list-group,
+	> .list-group + .card-footer {
+		border-top: 0;
+	}
 }
 
 .card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  // Workaround for the image size bug in IE
-  // See: https://github.com/twbs/bootstrap/pull/28855
-  min-height: 1px;
-  padding: $card-spacer-x;
-  color: $card-color;
+	// Enable `flex-grow: 1` for decks and groups so that card blocks take up
+	// as much space as possible, ensuring footers are aligned to the bottom.
+	flex: 1 1 auto;
+	// Workaround for the image size bug in IE
+	// See: https://github.com/twbs/bootstrap/pull/28855
+	min-height: 1px;
+	padding: $card-spacer-x;
+	color: $card-color;
 }
 
 .card-title {
-  margin-bottom: $card-spacer-y;
+	margin-bottom: $card-spacer-y;
 }
 
 .card-subtitle {
-  margin-top: -$card-spacer-y / 2;
-  margin-bottom: 0;
+	margin-top: -$card-spacer-y / 2;
+	margin-bottom: 0;
 }
 
 .card-text:last-child {
-  margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 .card-link {
-  @include hover() {
-    text-decoration: none;
-  }
+	@include hover() {
+		text-decoration: none;
+	}
 
-  + .card-link {
-    margin-left: $card-spacer-x;
-  }
+	+ .card-link {
+		margin-left: $card-spacer-x;
+	}
 }
 
 //
@@ -81,247 +81,242 @@
 //
 
 .card-header {
-  padding: $card-spacer-y $card-spacer-x;
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
-
-  &:first-child {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
-  }
+	padding: $card-spacer-y $card-spacer-x;
+	margin-bottom: 0; // Removes the default margin-bottom of <hN>
+	color: $card-cap-color;
+	background-color: $card-cap-bg;
+	border-bottom: $card-border-width solid $card-border-color;
+
+	&:first-child {
+		@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+	}
 }
 
 .card-footer {
-  padding: $card-spacer-y $card-spacer-x;
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
-
-  &:last-child {
-    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
-  }
+	padding: $card-spacer-y $card-spacer-x;
+	color: $card-cap-color;
+	background-color: $card-cap-bg;
+	border-top: $card-border-width solid $card-border-color;
+
+	&:last-child {
+		@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+	}
 }
 
-
 //
 // Header navs
 //
 
 .card-header-tabs {
-  margin-right: -$card-spacer-x / 2;
-  margin-bottom: -$card-spacer-y;
-  margin-left: -$card-spacer-x / 2;
-  border-bottom: 0;
+	margin-right: -$card-spacer-x / 2;
+	margin-bottom: -$card-spacer-y;
+	margin-left: -$card-spacer-x / 2;
+	border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -$card-spacer-x / 2;
-  margin-left: -$card-spacer-x / 2;
+	margin-right: -$card-spacer-x / 2;
+	margin-left: -$card-spacer-x / 2;
 }
 
 // Card image
 .card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: $card-img-overlay-padding;
-  @include border-radius($card-inner-border-radius);
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	padding: $card-img-overlay-padding;
+	@include border-radius($card-inner-border-radius);
 }
 
 .card-img,
 .card-img-top,
 .card-img-bottom {
-  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
-  width: 300px;
-  height: 150px;
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-  // width: 345.73px;
-  // height: 185px;
-
-  // Required because we use flexbox and this inherently applies align-self: stretch
+	flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
+	width: 300px;
+	height: 150px;
+	position: relative;
+	margin-left: auto;
+	margin-right: auto;
+	// width: 345.73px;
+	// height: 185px;
+
+	// Required because we use flexbox and this inherently applies align-self: stretch
 }
 
 .card-img,
 .card-img-top {
-  @include border-top-radius($card-inner-border-radius);
+	@include border-top-radius($card-inner-border-radius);
 }
 
 .card-img,
 .card-img-bottom {
-  @include border-bottom-radius($card-inner-border-radius);
+	@include border-bottom-radius($card-inner-border-radius);
 }
 
-
 // Card deck
 
 .card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
+	.card {
+		margin-bottom: $card-deck-margin;
+	}
+
+	@include media-breakpoint-up(sm) {
+		display: flex;
+		flex-flow: row wrap;
+		margin-right: -$card-deck-margin;
+		margin-left: -$card-deck-margin;
+
+		.card {
+			// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+			flex: 1 0 0%;
+			margin-right: $card-deck-margin;
+			margin-bottom: 0; // Override the default
+			margin-left: $card-deck-margin;
+		}
+	}
 }
 
-
 //
 // Card groups
 //
 
 .card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
+	// The child selector allows nested `.card` within `.card-group`
+	// to display properly.
+	> .card {
+		margin-bottom: $card-group-margin;
+	}
+
+	@include media-breakpoint-up(sm) {
+		display: flex;
+		flex-flow: row wrap;
+		// The child selector allows nested `.card` within `.card-group`
+		// to display properly.
+		> .card {
+			// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+			flex: 1 0 0%;
+			margin-bottom: 0;
+
+			+ .card {
+				margin-left: 0;
+				border-left: 0;
+			}
+
+			// Handle rounded corners
+			@if $enable-rounded {
+				&:not(:last-child) {
+					@include border-right-radius(0);
+
+					.card-img-top,
+					.card-header {
+						// stylelint-disable-next-line property-disallowed-list
+						border-top-right-radius: 0;
+					}
+					.card-img-bottom,
+					.card-footer {
+						// stylelint-disable-next-line property-disallowed-list
+						border-bottom-right-radius: 0;
+					}
+				}
+
+				&:not(:first-child) {
+					@include border-left-radius(0);
+
+					.card-img-top,
+					.card-header {
+						// stylelint-disable-next-line property-disallowed-list
+						border-top-left-radius: 0;
+					}
+					.card-img-bottom,
+					.card-footer {
+						// stylelint-disable-next-line property-disallowed-list
+						border-bottom-left-radius: 0;
+					}
+				}
+			}
+		}
+	}
 }
 
-
 //
 // Columns
 //
 
 .card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
+	.card {
+		margin-bottom: $card-columns-margin;
+	}
+
+	@include media-breakpoint-up(sm) {
+		column-count: $card-columns-count;
+		column-gap: $card-columns-gap;
+		orphans: 1;
+		widows: 1;
+
+		.card {
+			display: inline-block; // Don't let them vertically span multiple columns
+			width: 100%; // Don't let their width change
+		}
+	}
 }
 
-
 //
 // Accordion
 //
 
 .accordion {
-  overflow-anchor: none;
+	overflow-anchor: none;
 
-  > .card {
-    overflow: hidden;
+	> .card {
+		overflow: hidden;
 
-    &:not(:last-of-type) {
-      border-bottom: 0;
-      @include border-bottom-radius(0);
-    }
+		&:not(:last-of-type) {
+			border-bottom: 0;
+			@include border-bottom-radius(0);
+		}
 
-    &:not(:first-of-type) {
-      @include border-top-radius(0);
-    }
+		&:not(:first-of-type) {
+			@include border-top-radius(0);
+		}
 
-    > .card-header {
-      @include border-radius(0);
-      margin-bottom: -$card-border-width;
-    }
-  }
+		> .card-header {
+			@include border-radius(0);
+			margin-bottom: -$card-border-width;
+		}
+	}
 }
 
-.header-1{
-  background: #6FB9DE;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 5px;
-  // width: 830px;
-  height: 45px;
-  margin-bottom: 30px;
+.header-1 {
+	background: #6fb9de;
+	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+	border-radius: 5px;
+	// width: 830px;
+	height: 45px;
+	margin-bottom: 30px;
 }
-.card-title-1{
-  margin-left: 10px;
-  padding: 10px;
-  font-size: 25px;
-text-align: left;
-color: rgba(255, 255, 255, 0.9);
+.card-title-1 {
+	margin-left: 10px;
+	padding: 10px;
+	font-size: 25px;
+	text-align: left;
+	color: rgba(255, 255, 255, 0.9);
 }
-.border-radius-login{
-  border-radius: 5px;
+.border-radius-login {
+	border-radius: 5px;
 }
 
-.header-penjadwalan{
-  background: #6FB9DE;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 5px;
-  // width: 830px;
-  height: 45px;
-  margin: 20px;
+.header-penjadwalan {
+	background: #6fb9de;
+	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+	border-radius: 5px;
+	// width: 830px;
+	height: 45px;
+	margin: 20px;
 }
-.warna-penjadwalan-block{
-  height: 35px;
-  width: 60px;
-  margin-left: auto;
+.warna-penjadwalan-block {
+	height: 35px;
+	width: 60px;
+	margin-left: auto;
 }

styles/bootstrap/_forms.scss

@@ -5,89 +5,88 @@
 //
 
 .form-control {
-  display: block;
-  width: 100%;
-  height: $input-height;
-  padding: $input-padding-y $input-padding-x;
-  font-family: $input-font-family;
-  @include font-size($input-font-size);
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius, 0);
-
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  // Unstyle the caret on `<select>`s in IE10+.
-  &::-ms-expand {
-    background-color: transparent;
-    border: 0;
-  }
-
-  // Remove select outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $input-color;
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus($ignore-warning: true);
-
-  // Placeholder
-  &::placeholder {
-    color: $input-placeholder-color;
-    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
-  }
-
-  // Disabled and read-only inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled,
-  &[readonly] {
-    background-color: $input-disabled-bg;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
+	display: block;
+	width: 100%;
+	height: $input-height;
+	padding: $input-padding-y $input-padding-x;
+	font-family: $input-font-family;
+	@include font-size($input-font-size);
+	font-weight: $input-font-weight;
+	line-height: $input-line-height;
+	color: $input-color;
+	background-color: $input-bg;
+	background-clip: padding-box;
+	border: $input-border-width solid $input-border-color;
+
+	// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+	@include border-radius($input-border-radius, 0);
+
+	@include box-shadow($input-box-shadow);
+	@include transition($input-transition);
+
+	// Unstyle the caret on `<select>`s in IE10+.
+	&::-ms-expand {
+		background-color: transparent;
+		border: 0;
+	}
+
+	// Remove select outline from select box in FF
+	&:-moz-focusring {
+		color: transparent;
+		text-shadow: 0 0 0 $input-color;
+	}
+
+	// Customize the `:focus` state to imitate native WebKit styles.
+	@include form-control-focus($ignore-warning: true);
+
+	// Placeholder
+	&::placeholder {
+		color: $input-placeholder-color;
+		// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+		opacity: 1;
+	}
+
+	// Disabled and read-only inputs
+	//
+	// HTML5 says that controls under a fieldset > legend:first-child won't be
+	// disabled if the fieldset is disabled. Due to implementation difficulty, we
+	// don't honor that edge case; we style them as disabled anyway.
+	&:disabled,
+	&[readonly] {
+		background-color: $input-disabled-bg;
+		// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+		opacity: 1;
+	}
 }
 
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
-  &.form-control {
-    appearance: none; // Fix appearance for date inputs in Safari
-  }
+	&.form-control {
+		appearance: none; // Fix appearance for date inputs in Safari
+	}
 }
 
 select.form-control {
-  &:focus::-ms-value {
-    // Suppress the nested default white text on blue background highlight given to
-    // the selected option text when the (still closed) <select> receives focus
-    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
-    // match the appearance of the native widget.
-    // See https://github.com/twbs/bootstrap/issues/19398.
-    color: $input-color;
-    background-color: $input-bg;
-  }
+	&:focus::-ms-value {
+		// Suppress the nested default white text on blue background highlight given to
+		// the selected option text when the (still closed) <select> receives focus
+		// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
+		// match the appearance of the native widget.
+		// See https://github.com/twbs/bootstrap/issues/19398.
+		color: $input-color;
+		background-color: $input-bg;
+	}
 }
 
 // Make file inputs better match text inputs by forcing them to new lines.
 .form-control-file,
 .form-control-range {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 }
 
-
 //
 // Labels
 //
@@ -95,54 +94,52 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label (or legend)
 // text to align with the form controls.
 .col-form-label {
-  padding-top: add($input-padding-y, $input-border-width);
-  padding-bottom: add($input-padding-y, $input-border-width);
-  margin-bottom: 0; // Override the `<label>/<legend>` default
-  @include font-size(inherit); // Override the `<legend>` default
-  line-height: $input-line-height;
-  margin-bottom: 15px;
+	padding-top: add($input-padding-y, $input-border-width);
+	padding-bottom: add($input-padding-y, $input-border-width);
+	margin-bottom: 0; // Override the `<label>/<legend>` default
+	@include font-size(inherit); // Override the `<legend>` default
+	line-height: $input-line-height;
+	margin-bottom: 15px;
 }
 
 .col-form-label-lg {
-  padding-top: add($input-padding-y-lg, $input-border-width);
-  padding-bottom: add($input-padding-y-lg, $input-border-width);
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
+	padding-top: add($input-padding-y-lg, $input-border-width);
+	padding-bottom: add($input-padding-y-lg, $input-border-width);
+	@include font-size($input-font-size-lg);
+	line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: add($input-padding-y-sm, $input-border-width);
-  padding-bottom: add($input-padding-y-sm, $input-border-width);
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
+	padding-top: add($input-padding-y-sm, $input-border-width);
+	padding-bottom: add($input-padding-y-sm, $input-border-width);
+	@include font-size($input-font-size-sm);
+	line-height: $input-line-height-sm;
 }
 
-
 // Readonly controls as plain text
 //
 // Apply class to a readonly input to make it appear like regular plain
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y 0;
-  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  @include font-size($input-font-size);
-  line-height: $input-line-height;
-  color: $input-plaintext-color;
-  background-color: transparent;
-  border: solid transparent;
-  border-width: $input-border-width 0;
-
-  &.form-control-sm,
-  &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
-  }
+	display: block;
+	width: 100%;
+	padding: $input-padding-y 0;
+	margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+	@include font-size($input-font-size);
+	line-height: $input-line-height;
+	color: $input-plaintext-color;
+	background-color: transparent;
+	border: solid transparent;
+	border-width: $input-border-width 0;
+
+	&.form-control-sm,
+	&.form-control-lg {
+		padding-right: 0;
+		padding-left: 0;
+	}
 }
 
-
 // Form control sizing
 //
 // Build on `.form-control` with modifier classes to decrease or increase the
@@ -151,31 +148,31 @@ select.form-control {
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
 .form-control-sm {
-  height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
+	height: $input-height-sm;
+	padding: $input-padding-y-sm $input-padding-x-sm;
+	@include font-size($input-font-size-sm);
+	line-height: $input-line-height-sm;
+	@include border-radius($input-border-radius-sm);
 }
 
 .form-control-lg {
-  height: $input-height-lg;
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-  @include border-radius($input-border-radius-lg);
+	height: $input-height-lg;
+	padding: $input-padding-y-lg $input-padding-x-lg;
+	@include font-size($input-font-size-lg);
+	line-height: $input-line-height-lg;
+	@include border-radius($input-border-radius-lg);
 }
 
 // stylelint-disable-next-line no-duplicate-selectors
 select.form-control {
-  &[size],
-  &[multiple] {
-    height: auto;
-  }
+	&[size],
+	&[multiple] {
+		height: auto;
+	}
 }
 
 textarea.form-control {
-  height: auto;
+	height: auto;
 }
 
 // Form groups
@@ -184,75 +181,72 @@ textarea.form-control {
 // horizontal forms, use the predefined grid classes.
 
 .form-group {
-  margin-bottom: $form-group-margin-bottom;
+	margin-bottom: $form-group-margin-bottom;
 }
 
 .form-text {
-  display: block;
-  margin-top: $form-text-margin-top;
+	display: block;
+	margin-top: $form-text-margin-top;
 }
 
-
 // Form grid
 //
 // Special replacement for our grid system's `.row` for tighter form layouts.
 
 .form-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -$form-grid-gutter-width / 2;
-  margin-left: -$form-grid-gutter-width / 2;
-
-  > .col,
-  > [class*="col-"] {
-    padding-right: $form-grid-gutter-width / 2;
-    padding-left: $form-grid-gutter-width / 2;
-  }
+	display: flex;
+	flex-wrap: wrap;
+	margin-right: -$form-grid-gutter-width / 2;
+	margin-left: -$form-grid-gutter-width / 2;
+
+	> .col,
+	> [class*="col-"] {
+		padding-right: $form-grid-gutter-width / 2;
+		padding-left: $form-grid-gutter-width / 2;
+	}
 }
 
-
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
 
 .form-check {
-  position: relative;
-  display: block;
-  padding-left: $form-check-input-gutter;
+	position: relative;
+	display: block;
+	padding-left: $form-check-input-gutter;
 }
 
 .form-check-input {
-  position: absolute;
-  margin-top: $form-check-input-margin-y;
-  margin-left: -$form-check-input-gutter;
-
-  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
-  &[disabled] ~ .form-check-label,
-  &:disabled ~ .form-check-label {
-    color: $text-muted;
-  }
+	position: absolute;
+	margin-top: $form-check-input-margin-y;
+	margin-left: -$form-check-input-gutter;
+
+	// Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
+	&[disabled] ~ .form-check-label,
+	&:disabled ~ .form-check-label {
+		color: $text-muted;
+	}
 }
 
 .form-check-label {
-  margin-bottom: 0; // Override default `<label>` bottom margin
+	margin-bottom: 0; // Override default `<label>` bottom margin
 }
 
 .form-check-inline {
-  display: inline-flex;
-  align-items: center;
-  padding-left: 0; // Override base .form-check
-  margin-right: $form-check-inline-margin-x;
-
-  // Undo .form-check-input defaults and add some `margin-right`.
-  .form-check-input {
-    position: static;
-    margin-top: 0;
-    margin-right: $form-check-inline-input-margin-x;
-    margin-left: 0;
-  }
+	display: inline-flex;
+	align-items: center;
+	padding-left: 0; // Override base .form-check
+	margin-right: $form-check-inline-margin-x;
+
+	// Undo .form-check-input defaults and add some `margin-right`.
+	.form-check-input {
+		position: static;
+		margin-top: 0;
+		margin-right: $form-check-inline-input-margin-x;
+		margin-left: 0;
+	}
 }
 
-
 // Form validation
 //
 // Provide feedback to users when form field values are valid or invalid. Works
@@ -261,7 +255,7 @@ textarea.form-control {
 // server side validation.
 
 @each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+	@include form-validation-state($state, map-get($data, color), map-get($data, icon));
 }
 
 // Inline forms
@@ -274,91 +268,89 @@ textarea.form-control {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
-
-  // Because we use flex, the initial sizing of checkboxes is collapsed and
-  // doesn't occupy the full-width (which is what we want for xs grid tier),
-  // so we force that here.
-  .form-check {
-    width: 100%;
-  }
-
-  // Kick in the inline
-  @include media-breakpoint-up(sm) {
-    label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 0;
-    }
-
-    // Inline-block all the things for "inline"
-    .form-group {
-      display: flex;
-      flex: 0 0 auto;
-      flex-flow: row wrap;
-      align-items: center;
-      margin-bottom: 0;
-    }
-
-    // Allow folks to *not* use `.form-group`
-    .form-control {
-      display: inline-block;
-      width: auto; // Prevent labels from stacking above inputs in `.form-group`
-      vertical-align: middle;
-    }
-
-    // Make static controls behave like regular ones
-    .form-control-plaintext {
-      display: inline-block;
-    }
-
-    .input-group,
-    .custom-select {
-      width: auto;
-    }
-
-    // Remove default margin on radios/checkboxes that were used for stacking, and
-    // then undo the floating of radios and checkboxes to match.
-    .form-check {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: auto;
-      padding-left: 0;
-    }
-    .form-check-input {
-      position: relative;
-      flex-shrink: 0;
-      margin-top: 0;
-      margin-right: $form-check-input-margin-x;
-      margin-left: 0;
-    }
-
-    .custom-control {
-      align-items: center;
-      justify-content: center;
-    }
-    .custom-control-label {
-      margin-bottom: 0;
-    }
-  }
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
+
+	// Because we use flex, the initial sizing of checkboxes is collapsed and
+	// doesn't occupy the full-width (which is what we want for xs grid tier),
+	// so we force that here.
+	.form-check {
+		width: 100%;
+	}
+
+	// Kick in the inline
+	@include media-breakpoint-up(sm) {
+		label {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 0;
+		}
+
+		// Inline-block all the things for "inline"
+		.form-group {
+			display: flex;
+			flex: 0 0 auto;
+			flex-flow: row wrap;
+			align-items: center;
+			margin-bottom: 0;
+		}
+
+		// Allow folks to *not* use `.form-group`
+		.form-control {
+			display: inline-block;
+			width: auto; // Prevent labels from stacking above inputs in `.form-group`
+			vertical-align: middle;
+		}
+
+		// Make static controls behave like regular ones
+		.form-control-plaintext {
+			display: inline-block;
+		}
+
+		.input-group,
+		.custom-select {
+			width: auto;
+		}
+
+		// Remove default margin on radios/checkboxes that were used for stacking, and
+		// then undo the floating of radios and checkboxes to match.
+		.form-check {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: auto;
+			padding-left: 0;
+		}
+		.form-check-input {
+			position: relative;
+			flex-shrink: 0;
+			margin-top: 0;
+			margin-right: $form-check-input-margin-x;
+			margin-left: 0;
+		}
+
+		.custom-control {
+			align-items: center;
+			justify-content: center;
+		}
+		.custom-control-label {
+			margin-bottom: 0;
+		}
+	}
 }
 
-.uk-form-tanggal-1{
-  position: relative;
-  width: 47%;
-  float: left;
-
-  
+.uk-form-tanggal-1 {
+	position: relative;
+	width: 47%;
+	float: left;
 }
-.uk-form-tanggal-2{
-  position: relative;
-  
-  width: 47%;
-  float: right;
+.uk-form-tanggal-2 {
+	position: relative;
+
+	width: 47%;
+	float: right;
 }
 // .heading-penjadwalan-2{
 //   margin: 20px;
@@ -366,4 +358,4 @@ textarea.form-control {
 //   margin-right: 20px;
 //   padding: 20px;
 //   background-color: #E3F0FF;
-// }
+// }