perubahan sanksi

naik sanksi validasi : sanksi ringan sedang dan perbaikan
naik sanksi validasi : sanksi berat sedang dan perbaikan

add menu workflow.pdf

actions/pelanggaran.js

@@ -57,12 +57,37 @@ export const getPelanggaranPublic = async (token) => {
 	}
 };
 
-export const getPelanggaranSanksi = async (token) => {
+export const getPelanggaranSanksi = async (token, query = {}) => {
 	try {
-		const res = await axios.get("/pelanggaran/sanksi", {headers: {Authorization: token}});
+		let url = `/pelanggaran/sanksi`;
+		if (query != {}) {
+			const { down } = query;
+			url += "?";
+			const parseURL = [];
+			if (down) parseURL.push(`down=true`);
+			url += parseURL.join("&");
+		}
+		const res = await axios.get(url, { headers: { Authorization: token } });
 		return await res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;
 	}
 };
+// export const getPelanggaranSanksi = async (token, query = {}) => {
+// 	try {
+// 		let url = `/pelanggaran/sanksi`;
+// 		if (query != {}) {
+// 			const { down } = query;
+// 			url += "?";
+// 			const parseURL = [];
+// 			if (down) parseURL.push(`down=true`);
+// 			url += parseURL.join("&");
+// 		}
+// 		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+// 		return res.data;
+// 	} catch (error) {
+// 		console.log("error", error);
+// 		return false;
+// 	}
+// };

actions/sanksi.js

@@ -12,7 +12,7 @@ export const getSanksi = async (token, query = {}) => {
 	try {
 		let url = "/sanksi";
 		if (query != {}) {
-			const { keberatan, jawaban, banding, cabutSanksi, perbaikan, aktif, delegasi } = query;
+			const { keberatan, jawaban, banding, cabutSanksi, perbaikan, aktif, delegasi, turunSanksi, naikSanksi } = query;
 			url += "?";
 			const parseURL = [];
 			if (keberatan) parseURL.push(`keberatan=true`);
@@ -21,6 +21,8 @@ export const getSanksi = async (token, query = {}) => {
 			if (perbaikan) parseURL.push(`perbaikan=true`);
 			if (jawaban) parseURL.push(`jawaban=true`);
 			if (delegasi) parseURL.push(`delegasi=true`);
+			if (turunSanksi) parseURL.push(`turunSanksi=true`);
+			if (naikSanksi) parseURL.push(`naikSanksi=true`);
 			if (aktif === false) parseURL.push(`aktif=false`);
 			url += parseURL.join("&");
 		}

components/Layout/Menu.js

@@ -132,6 +132,12 @@ const Menu = [
 		icon: "fas fa-book",
 		translate: "sidebar.nav.Bantuan",
 	},
+	{
+		name: "Workflow Aplikasi SIDALI",
+		path: "/app/workflow",
+		icon: "fas fa-project-diagram",
+		translate: "sidebar.nav.Bantuan",
+	},
 ];
 
 export default Menu;

components/NaikSanksi/InputTanggal.js

@@ -43,11 +43,11 @@ const checkIfFilesAreCorrectType = (files) => {
 };
 
 const rekomendasiSchema = Yup.object().shape({
-    no_surat: Yup.string().required("Wajib isi no sanksi"),
+    no_sanksi: Yup.string().required("Wajib isi Nomor Sanksi"),
     keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
     from_date: Yup.date().required("Wajib diisi"),
     to_date: Yup.date().required("Wajib diisi"),
-    pelanggaran_id: Yup.array().required("Wajib isi pelanggaran"),
+    sanksi: Yup.array().required("Wajib isi pelanggaran"),
     dokumen: Yup.array().required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
@@ -82,6 +82,7 @@ class InputTanggal extends Component {
             sanksi: {},
             keteranganLaporan: "",
             tmtCheck: false,
+            listSanksi: ""
         };
     }
 
@@ -144,18 +145,18 @@ class InputTanggal extends Component {
     };
     handleTmtCheck = () => {
         this.setState({ tmtCheck: !this.state.tmtCheck });
-    }
+    };
 
 
     handelSimpan = async (data) => {
         const { token, query } = this.props;
         const { id } = query;
         const formdata = new FormData();
-        formdata.append("no_surat", data.no_surat);
+        formdata.append("no_sanksi", data.no_sanksi);
         formdata.append("keterangan", data.keterangan);
         formdata.append("from_date", data.from_date);
         formdata.append("to_date", data.to_date);
-        formdata.append("pelanggaran_id", data.pelanggaran_id);
+        formdata.append("sanksi", JSON.stringify(data.sanksi));
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
@@ -184,11 +185,11 @@ class InputTanggal extends Component {
                     <p className="lead bb">Dokumen Surat Naik Sanksi</p>
                     <Formik
                         initialValues={{
-                            no_surat: "",
+                            no_sanksi: "",
                             keterangan: "",
                             from_date: "",
                             to_date: "",
-                            pelanggaran_id: [],
+                            sanksi: [],
                             dokumen: [],
                         }}
                         validationSchema={rekomendasiSchema}
@@ -199,8 +200,8 @@ class InputTanggal extends Component {
                                 <FormGroup row>
                                     <label className="col-md-2 col-form-label">Nomor Sanksi</label>
                                     <div className="col-md-10">
-                                        <Field name="no_surat">{({ field }) => <Input type="textarea" placeholder="Nomor Sanksi" {...field} />}</Field>
-                                        <ErrorMessage name="no_surat" component="div" className="form-text text-danger" />
+                                        <Field name="no_sanksi">{({ field }) => <Input type="textarea" placeholder="Nomor Sanksi" {...field} />}</Field>
+                                        <ErrorMessage name="no_sanksi" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>
@@ -316,15 +317,14 @@ class InputTanggal extends Component {
                                 <FormGroup row className="mt-3">
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
-                                        <Field name="pelanggaran_id">{({ field, form }) => <Select
+                                        <Field name="sanksi">{({ field, form }) => <Select
                                             options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
-                                            // formatOptionLabel={formatOptionLabel}
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);
                                             }}
                                         />}</Field>
-                                        <ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
+                                        <ErrorMessage name="sanksi" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
                                 <FormGroup row className="mt-3">

components/NaikSanksi/TableLaporan.js

@@ -31,7 +31,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												<div className="media align-items-center">
 													<div className="media-body d-flex">
 														<div>
-															<h4>{data.no_laporan}</h4>
+															<h4>{data.laporan.no_laporan}</h4>
 															<p>{moment(data.createdAt).format("DD-MMMM-YYYY")}</p>
 														</div>
 													</div>
@@ -43,8 +43,8 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 													<div className="media align-items-center">
 														<div className="media-body d-flex">
 															<div>
-																<h4 className="m-0">{data.pt.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
-																<p className="w-105">{data.keterangan}</p>
+																<h4 className="m-0">{data.laporan.pt.nama.length > 64 ? data.laporan.pt.nama.substring(0, 64) + "..." : data.laporan.pt.nama}</h4>
+																<p className="w-105">{data.laporan.keterangan}</p>
 															</div>
 														</div>
 													</div>
@@ -54,8 +54,8 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 
 											<td>
 												{/* {data.sanksi.masa_berlaku?.to_date ? (<h4 className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</h4>) : (<h4 className="m-0">6 Bulan</h4>)} */}
-												<h4 className="w-105">Sanksi Administratif: {data.sanksi.pelanggaran.map((e) => e.label_sanksi)}</h4>
-												<p className="w-105">{data.sanksi.keterangan}</p>
+												<h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4>
+												<p className="w-105">{data.keterangan}</p>
 											</td>
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
 											<td>
@@ -63,7 +63,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 													<Link
 														href={{
 															pathname: to,
-															query: { id: data.sanksi?._id },
+															query: { id: data?._id },
 														}}
 													>
 														<Button className="btn-login" color>

components/TurunSanksi/InputTanggal.js

@@ -43,11 +43,11 @@ const checkIfFilesAreCorrectType = (files) => {
 };
 
 const rekomendasiSchema = Yup.object().shape({
-    no_surat: Yup.string().required("Wajib isi no sanksi"),
+    no_sanksi: Yup.string().required("Wajib isi Nomor Sanksi"),
     keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
     from_date: Yup.date().required("Wajib diisi"),
     to_date: Yup.date().required("Wajib diisi"),
-    pelanggaran_id: Yup.array().required("Wajib isi pelanggaran"),
+    sanksi: Yup.array().required("Wajib isi pelanggaran"),
     dokumen: Yup.array().required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
@@ -82,6 +82,7 @@ class InputTanggal extends Component {
             sanksi: {},
             keteranganLaporan: "",
             tmtCheck: false,
+            listSanksi: ""
         };
     }
 
@@ -89,7 +90,7 @@ class InputTanggal extends Component {
         const { token, query } = this.props;
         const { id } = query;
         const sanksi = await getOneSanksi(token, id);
-        const { data: listSanksi } = await getPelanggaranSanksi(token)
+        const { data: listSanksi } = await getPelanggaranSanksi(token, { down: true })
         this.setState({ sanksi, listSanksi })
     }
 
@@ -144,18 +145,18 @@ class InputTanggal extends Component {
     };
     handleTmtCheck = () => {
         this.setState({ tmtCheck: !this.state.tmtCheck });
-    }
+    };
 
 
     handelSimpan = async (data) => {
         const { token, query } = this.props;
         const { id } = query;
         const formdata = new FormData();
-        formdata.append("no_surat", data.no_surat);
+        formdata.append("no_sanksi", data.no_sanksi);
         formdata.append("keterangan", data.keterangan);
         formdata.append("from_date", data.from_date);
         formdata.append("to_date", data.to_date);
-        formdata.append("pelanggaran_id", data.pelanggaran_id);
+        formdata.append("sanksi", JSON.stringify(data.sanksi));
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
@@ -165,7 +166,7 @@ class InputTanggal extends Component {
             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/naik-sanksi");
+            Router.push("/app/turun-sanksi");
 
         }
 
@@ -184,11 +185,11 @@ class InputTanggal extends Component {
                     <p className="lead bb">Dokumen Surat Turun Sanksi</p>
                     <Formik
                         initialValues={{
-                            no_surat: "",
+                            no_sanksi: "",
                             keterangan: "",
                             from_date: "",
                             to_date: "",
-                            pelanggaran_id: "",
+                            sanksi: [],
                             dokumen: [],
                         }}
                         validationSchema={rekomendasiSchema}
@@ -199,8 +200,8 @@ class InputTanggal extends Component {
                                 <FormGroup row>
                                     <label className="col-md-2 col-form-label">Nomor Sanksi</label>
                                     <div className="col-md-10">
-                                        <Field name="no_surat">{({ field }) => <Input type="textarea" placeholder="Nomor Sanksi" {...field} />}</Field>
-                                        <ErrorMessage name="no_surat" component="div" className="form-text text-danger" />
+                                        <Field name="no_sanksi">{({ field }) => <Input type="textarea" placeholder="Nomor Sanksi" {...field} />}</Field>
+                                        <ErrorMessage name="no_sanksi" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>
@@ -316,15 +317,14 @@ class InputTanggal extends Component {
                                 <FormGroup row className="mt-3">
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
-                                        <Field name="pelanggaran_id">{({ field, form }) => <Select
+                                        <Field name="sanksi">{({ field, form }) => <Select
                                             options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
-                                            // formatOptionLabel={formatOptionLabel}
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);
                                             }}
                                         />}</Field>
-                                        <ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
+                                        <ErrorMessage name="sanksi" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
                                 <FormGroup row className="mt-3">

components/TurunSanksi/TableLaporan.js

@@ -31,7 +31,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												<div className="media align-items-center">
 													<div className="media-body d-flex">
 														<div>
-															<h4>{data.no_laporan}</h4>
+															<h4>{data.laporan.no_laporan}</h4>
 															<p>{moment(data.createdAt).format("DD-MMMM-YYYY")}</p>
 														</div>
 													</div>
@@ -43,8 +43,8 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 													<div className="media align-items-center">
 														<div className="media-body d-flex">
 															<div>
-																<h4 className="m-0">{data.pt.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
-																<p className="w-105">{data.keterangan}</p>
+																<h4 className="m-0">{data.laporan.pt.nama.length > 64 ? data.laporan.pt.nama.substring(0, 64) + "..." : data.laporan.pt.nama}</h4>
+																<p className="w-105">{data.laporan.keterangan}</p>
 															</div>
 														</div>
 													</div>
@@ -54,7 +54,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 
 											<td>
 												{/* {data.sanksi.masa_berlaku?.to_date ? (<h4 className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</h4>) : (<h4 className="m-0">6 Bulan</h4>)} */}
-												<h4 className="w-105">Sanksi Administratif: {data.sanksi.pelanggaran.map((e) => e.label_sanksi)}</h4>
+												<h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4>
 												<p className="w-105">{data.sanksi.keterangan}</p>
 											</td>
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
@@ -63,7 +63,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 													<Link
 														href={{
 															pathname: to,
-															query: { id: data.sanksi?._id },
+															query: { id: data?._id },
 														}}
 													>
 														<Button className="btn-login" color>

pages/app/naik-sanksi/index.js

@@ -21,9 +21,9 @@ class NaikSanksi extends Component {
 	componentDidMount = async () => {
 		const { token } = this.props;
 		const pelaporan = await getPelaporan(token, { sanksi: true });
-		const sanksi = await getSanksi(token)
+		const sanksi = await getSanksi(token, { naikSanksi: true, perbaikan: true })
 		this.setState({ pelaporan, sanksi });
-		console.log(this.state.pelaporan)
+		console.log(sanksi)
 	};
 
 	render() {
@@ -35,7 +35,7 @@ class NaikSanksi extends Component {
 				</div>
 				<Row>
 					{/* <Col lg="12">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col> */}
-					<Col lg="12">{sanksi?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/naik-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
+					<Col lg="12">{sanksi?.data ? <TableLaporan status noBy listData={sanksi.data} to="/app/naik-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/turun-sanksi/detail.js

@@ -7,8 +7,8 @@ import DetailPT from "@/components/Main/DetailPT";
 import { getOneSanksi, addRekomendasiDelegasi } from "@/actions/sanksi";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
-import TableRiwayat from "@/components/NaikSanksi/TableRiwayat"
-import InputTanggal from "../../../components/NaikSanksi/InputTanggal";
+import TableRiwayat from "@/components/TurunSanksi/TableRiwayat"
+import InputTanggal from "../../../components/TurunSanksi/InputTanggal";
 import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
 
 
@@ -49,10 +49,10 @@ class Detail extends Component {
 				<div className="p-3">
 					<div className="content-heading">
 						<span className="font-color-white">
-							Detail Perubahan Naik Sanksi
+							Detail Perubahan Turun Sanksi
 						</span>
 						<div className="ml-auto">
-							<Link href="/app/naik-sanksi">
+							<Link href="/app/turun-sanksi">
 								<Button className="color-3e3a8e" color>
 									<span className="font-color-white">
 										&lt; Kembali

pages/app/turun-sanksi/index.js

@@ -3,7 +3,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import { getSanksi } from "@/actions/sanksi";
-import TableLaporan from "@/components/NaikSanksi/TableLaporan";
+import TableLaporan from "@/components/TurunSanksi/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 
@@ -21,9 +21,8 @@ class NaikSanksi extends Component {
 	componentDidMount = async () => {
 		const { token } = this.props;
 		const pelaporan = await getPelaporan(token, { sanksi: true });
-		const sanksi = await getSanksi(token)
+		const sanksi = await getSanksi(token, { turunSanksi: true, perbaikan: true })
 		this.setState({ pelaporan, sanksi });
-		console.log(this.state.pelaporan)
 	};
 
 	render() {
@@ -31,11 +30,11 @@ class NaikSanksi extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<span className="font-color-white">Perubahan Naik Sanksi</span>
+					<span className="font-color-white">Perubahan Turun Sanksi</span>
 				</div>
 				<Row>
 					{/* <Col lg="12">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col> */}
-					<Col lg="12">{sanksi?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/naik-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
+					<Col lg="12">{sanksi?.data ? <TableLaporan status noBy listData={sanksi.data} to="/app/turun-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/workflow/index.js

@@ -0,0 +1,62 @@
+import React from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Jumbotron, Col, Button } from "reactstrap";
+import Link from "next/link";
+
+class Bantuan extends React.Component {
+    render() {
+        return (
+            <div>
+                <ContentWrapper>
+                    <div className="content-heading">
+                        <span className="font-color-white">Workflow Aplikasi SIDALI</span>
+                        <div className="ml-auto"></div>
+                    </div>
+                    <Jumbotron>
+                        <Row className="home-1-1">
+                            <Col lg={5} className="d-flex flex-column justify-content-center align-items-start">
+                                <h1 className="display-5 home-2 txt-size">Workflow Aplikasi SIDALI</h1>
+                                {/* <h1 className="display-5 txt-size">Penggunaan Aplikasi SIDALI</h1> */}
+                                <hr className="my-4" />
+                                <p className="txt-size">Workflow ini dapat membantu Anda dalam memahami alur
+                                    Aplikasi SIDALI. Pelajari lebih lanjut Aplikasi SIDALI dengan
+                                    mengunduh workflow dibawah ini.</p>
+                                <p className="lead">
+                                    {/* <Link href="/laporan/new">
+										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
+									</Link> */}
+                                    <a href="/static/img/workflow.pdf" download="Workflow Aplikasi SIDALI">
+                                        <span className="btn-radius">
+                                            <Button color="" className="btn-labeled">
+                                                <h4 className="p-1 font-color-white mt-2">Download</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                    <a target="_blank" rel="noopener noreferrer" href="/static/img/workflow.pdf">
+                                        <span className="btn-radius">
+                                            <Button color className="btn-labeled-3">
+                                                <h4 className="p-0 mt-2">Buka Workflow Aplikasi SIDALI</h4>
+                                            </Button>
+                                        </span>
+                                    </a>
+                                    <div style={{
+                                        marginTop: "20px",
+                                        fontSize: "15px"
+                                    }}>Buku Panduan versi 1.0</div>
+                                </p>
+
+                            </Col>
+                            <Col lg={5}>
+                                <img className="responsive-1" src="/static/img/workflow_image.png" alt="gambar" />
+                            </Col>
+                        </Row>
+                    </Jumbotron>
+                </ContentWrapper>
+
+            </div >
+
+        )
+    }
+}
+
+export default Bantuan;

styles/bootstrap/_images.scss

@@ -41,37 +41,40 @@
   color: $figure-caption-color;
 }
 
-.icon-pemantauan{
+.icon-pemantauan {
   width: 35px;
   height: 35px;
   margin-right: -20px;
 }
 
-.icon-buatlaporan{
+.icon-buatlaporan {
   width: 35px;
   height: 35px;
   margin-right: -20px;
 }
 
-.img-text-vputih{
+.img-text-vputih {
   width: 55px;
   height: 20px;
   margin-left: 10px;
 }
-.icon-triangle{
+
+.icon-triangle {
   width: 20px;
   margin-right: 15px;
   margin-left: 15px;
   border-radius: 5px;
 }
-.identitas-pelapor{
+
+.identitas-pelapor {
   width: 830px;
   height: 50px;
 }
+
 .icon-pemantauan {
   width: 30px;
   height: 30px;
- 
+
   // margin-right: -20px; 
 }
 
@@ -84,68 +87,91 @@
 .img-text-vputih {
   width: 55px;
   height: 20px;
-  margin-left: 10px; }
+  margin-left: 10px;
+}
 
 .icon-triangle {
   width: 20px;
   margin-right: 10px;
-  margin-left: 15px; }
+  margin-left: 15px;
+}
 
 .identitas-pelapor {
   width: 830px;
-  height: 50px; }
+  height: 50px;
+}
 
-  // .img-fluid {
-  //   position: relative;
-  //   max-width: 100%;
-  //   height: auto;
-  //   width: 72px;
-  //   height: 37px; }
-  .ditbaga-logo{
-    margin-top: 55%;
+// .img-fluid {
+//   position: relative;
+//   max-width: 100%;
+//   height: auto;
+//   width: 72px;
+//   height: 37px; }
+.ditbaga-logo {
+  margin-top: 55%;
 
-  }
+}
 
-  .logo-nav{
-    width: 60%;
-  }
-  .img-login-1{
-    width: 97%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .icon-next{
-    margin-right: 15px;
-    margin-top: 5px;
-  }
-  .float-rigt{
-    float: right;
-  }
-  .float-left{
-    float: left;
-  }
-  .icon-eksport{
-    margin-top: 5px;
-  }
+.logo-nav {
+  width: 60%;
+}
 
-  .width-133{
-    width: 133px;
-    height: auto;
-  }
-.width-50{
+.img-login-1 {
+  width: 97%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.icon-next {
+  margin-right: 15px;
+  margin-top: 5px;
+}
+
+.float-rigt {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.icon-eksport {
+  margin-top: 5px;
+}
+
+.width-133 {
+  width: 133px;
+  height: auto;
+}
+
+.width-50 {
   width: 60px;
 }
+
 // .responsive-1{
 //   min-height: 500px;
 //   width: 100%;
 // }
 @media screen and (max-width: 1320px) {
   .responsive-1 {
-      width: 170%
+    width: 170%
   }
+
   @media screen and (max-width: 991px) {
     .responsive-1 {
-        width: 100%
+      width: 100%
+    }
+  }
+}
+
+@media screen and (max-width: 1320px) {
+  .responsive-2 {
+    width: 170%
+  }
+
+  @media screen and (max-width: 991px) {
+    .responsive-2 {
+      width: 100%
     }
   }
 }