andi 3 vuotta sitten
vanhempi
commit
0b08793d0b
40 muutettua tiedostoa jossa 918 lisäystä ja 226 poistoa
  1. 12 0
      actions/graph.js
  2. 10 0
      actions/pelanggaran.js
  3. 18 3
      actions/pelaporan.js
  4. 4 2
      actions/sanksi.js
  5. 3 3
      components/Banding/TableSanksi.js
  6. 12 10
      components/Extras/calendar.view.js
  7. 4 4
      components/Keberatan/TableSanksi.js
  8. 6 15
      components/Layout/Menu.js
  9. 4 25
      components/Layout/MenuLLDIKTI.js
  10. 3 3
      components/Main/TableLaporan.js
  11. 4 4
      components/Main/TableSanksi.js
  12. 1 1
      components/Main/Timeline.js
  13. 1 1
      components/PT/CabutSanksi/TableSanksiJawaban.js
  14. 1 1
      components/PT/JawabanBanding/DetailJawaban.js
  15. 2 2
      components/PT/JawabanBanding/TableSanksiJawaban.js
  16. 4 4
      components/PT/JawabanKeberatan/ModalPermohonan.js
  17. 2 2
      components/PT/JawabanKeberatan/TableSanksiJawaban.js
  18. 2 2
      components/PT/JawabanPencabutanSanksi/TableSanksiJawaban.js
  19. 3 3
      components/PT/Keberatan/ModalPermohonan.js
  20. 2 2
      components/PT/TableSanksi.js
  21. 1 1
      components/PT/TableSanksiJawaban.js
  22. 5 5
      components/Pelaporan/InputData.js
  23. 3 3
      components/Pelaporan/TableLaporan.js
  24. 130 0
      components/PelaporanTuntas/CaseProgress.js
  25. 162 0
      components/PelaporanTuntas/DetailLaporan.js
  26. 79 0
      components/PelaporanTuntas/TableLaporan.js
  27. 48 11
      components/Pemeriksaan/InputEvaluasi.js
  28. 2 2
      components/Pemeriksaan/TableLaporan.js
  29. 2 2
      components/PencabutanSanksi/TableSanksi.js
  30. 2 2
      components/Penjadwalan/TableLaporan.js
  31. 50 29
      components/Sanksi/Ringkasan.js
  32. 2 2
      components/Sanksi/TableLaporan.js
  33. 94 38
      components/Sanksi/UploadSurat.js
  34. 1 1
      pages/app/banding/detail.js
  35. 1 1
      pages/app/pemeriksaan/new.js
  36. 5 3
      pages/app/sanksi/proses.js
  37. 71 0
      pages/app/tuntas/detail.js
  38. 76 0
      pages/app/tuntas/index.js
  39. 2 2
      pages/pt/jawaban-keberatan/detail.js
  40. 84 37
      styles/bootstrap/_buttons.scss

+ 12 - 0
actions/graph.js

@@ -33,6 +33,7 @@ export const getGraph = async (token, query = {}) => {
 				parseURL.push(`tahun=${tahun}`);
 			}
 
+
 			url += parseURL.join("&");
 		}
 
@@ -59,3 +60,14 @@ export const getExcel = (token, filename, query = {}) => {
 
 	return url;
 };
+export const getlaporanselesai = async (token) => {
+	try {
+		let url = API_URL + "/graph/laporanSelesai";
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+}
+

+ 10 - 0
actions/pelanggaran.js

@@ -56,3 +56,13 @@ export const getPelanggaranPublic = async (token) => {
 		return false;
 	}
 };
+
+export const getPelanggaranSanksi = async (token) => {
+	try {
+		const res = await axios.get("/pelanggaran/sanksi", {headers: {Authorization: token}});
+		return await res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

+ 18 - 3
actions/pelaporan.js

@@ -6,19 +6,24 @@ export const getPelaporan = async (token, query = {}) => {
 	try {
 		let url = "/laporan";
 		if (query != null) {
-			const { jadwal, evaluasi, pt_id, delegasi } = query;
+			const { jadwal, evaluasi, pt_id, delegasi, aktif, sanksi } = query;
 			url += "?";
 			const parseURL = [];
 			if (jadwal) {
 				parseURL.push(`jadwal=true`);
 			} else if (evaluasi) {
 				parseURL.push(`evaluasi=true`);
+			} else if (sanksi) {
+				parseURL.push(`sanksi=true`);
 			} else if (delegasi) {
 				parseURL.push(`delegasi=true`);
 			}
 			if (pt_id) {
 				parseURL.push(`pt_id=${pt_id}`);
 			}
+			if (aktif === false) {
+				parseURL.push(`aktif=false`);
+			}
 
 			url += parseURL.join("&");
 		}
@@ -31,9 +36,19 @@ export const getPelaporan = async (token, query = {}) => {
 	}
 };
 
-export const getOneLaporan = async (token, id) => {
+export const getOneLaporan = async (token, id, query = {}) => {
 	try {
-		const res = await axiosAPI.get(`/laporan/${id}`, { headers: { Authorization: token } });
+		let url = `/laporan/${id}`;
+		if (query != null) {
+			const { aktif } = query;
+			url += "?";
+			const parseURL = [];
+			if (aktif === false) {
+				parseURL.push(`aktif=false`);
+			}
+			url += parseURL.join("&");
+		}
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);

+ 4 - 2
actions/sanksi.js

@@ -11,7 +11,7 @@ export const getSanksi = async (token, query = {}) => {
 	try {
 		let url = "/sanksi";
 		if (query != {}) {
-			const { keberatan, jawaban, banding, cabutSanksi, perbaikan } = query;
+			const { keberatan, jawaban, banding, cabutSanksi, perbaikan, aktif } = query;
 			url += "?";
 			const parseURL = [];
 			if (keberatan) parseURL.push(`keberatan=true`);
@@ -19,6 +19,7 @@ export const getSanksi = async (token, query = {}) => {
 			if (cabutSanksi) parseURL.push(`cabutSanksi=true`);
 			if (perbaikan) parseURL.push(`perbaikan=true`);
 			if (jawaban) parseURL.push(`jawaban=true`);
+			if (aktif === false) parseURL.push(`aktif=false`);
 			url += parseURL.join("&");
 		}
 
@@ -34,10 +35,11 @@ export const getOneSanksi = async (token, id, query = {}) => {
 	try {
 		let url = `/sanksi/${id}`;
 		if (query != {}) {
-			const { banding } = query;
+			const { banding, aktif } = query;
 			url += "?";
 			const parseURL = [];
 			if (banding) parseURL.push(`banding=true`);
+			if (aktif === false) parseURL.push(`aktif=false`);
 			url += parseURL.join("&");
 		}
 		const res = await axiosAPI.get(url, { headers: { Authorization: token } });

+ 3 - 3
components/Banding/TableSanksi.js

@@ -7,8 +7,8 @@ function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">
 			<div className="card-body card-over">
-				<Datatable options={{ responsive: false }}>
-					<table className="table w-100" data-order='[3,"asc"]'>
+				<Datatable options={{ responsive: false, ordering: true }}>
+					<table className="table w-100" data-order='[3,"desc"]'>
 						<thead>
 							<tr>
 								<th>Nomor Sanksi</th>
@@ -58,7 +58,7 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn-login" color >
+														<Button className="btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

+ 12 - 10
components/Extras/calendar.view.js

@@ -34,9 +34,9 @@ const statusLLDIKTI = [
 ];
 
 const jadwalSchema = Yup.object().shape({
-	judul: Yup.string().required("Required"),
-	dari_tanggal: Yup.date().required("Required"),
-	sampai_tanggal: Yup.date().required("Required"),
+	judul: Yup.string().required("Wajib diisi"),
+	dari_tanggal: Yup.date().required("Wajib diisi"),
+	sampai_tanggal: Yup.date().required("Wajib diisi"),
 });
 
 const laporanSchema = Yup.object().shape({
@@ -64,6 +64,7 @@ class Calendar extends Component {
 			laporan: {},
 			selectedOption: null,
 			color: "",
+			disabled: true,
 		};
 	}
 
@@ -165,9 +166,9 @@ class Calendar extends Component {
 				update = await updateLaporan(token, id, data);
 			}
 			if (!update) {
-				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+				toast.update(toastid, { render: "Gagal simpan jadwal", type: "error", isLoading: false, autoClose: true, closeButton: true });
 			} else {
-				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+				toast.update(toastid, { render: "Input jadwal berhasil", type: "success", isLoading: false, autoClose: true, closeButton: true });
 				Router.push("/app/penjadwalan");
 			}
 		}
@@ -241,6 +242,7 @@ class Calendar extends Component {
 																		}}
 																		options={this.getStatus()}
 																		required
+																		isDisabled={laporan.data?.sanksi}
 																	/>
 																)}
 															</Field>
@@ -250,13 +252,13 @@ class Calendar extends Component {
 															""
 														) : (
 															<FormGroup>
-																<label className="col-form-label">Keterangan</label>
+																<label className="col-form-label">Keterangan<span className=" text-danger">*</span></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-3e3a8e" color block disabled={laporan.data?.evaluasi.length}>
+															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan color-3e3a8e" color block disabled={laporan.data?.sanksi}>
 																<h4 className="text-btn-penjadwalan-1 font-color-white">Simpan</h4>
 															</Button>
 														</div>
@@ -295,8 +297,8 @@ class Calendar extends Component {
 																</FormGroup>
 
 																<FormGroup>
-																	<label className="col-form-label">Judul</label>
-																	<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
+																	<label className="col-form-label">Judul<span className=" text-danger">*</span></label>
+																	<Field name="judul">{({ field, form }) => <Input disabled={laporan.data?.sanksi} type="text" placeholder="judul" {...field} />}</Field>
 																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
 																</FormGroup>
 																<Row>
@@ -340,7 +342,7 @@ class Calendar extends Component {
 
 																<FormGroup>
 																	<div className="btn-simpanpenjadwalan">
-																		<Button className="btn-colorpenjadwalan" color block type="submit" disabled={laporan.data?.evaluasi.length}>
+																		<Button className="btn-colorpenjadwalan" color block type="submit" disabled={laporan.data?.sanksi}>
 																			<h4 className="text-btn-penjadwalan-1 font-color-white">Simpan</h4>
 																		</Button>
 																	</div>

+ 4 - 4
components/Keberatan/TableSanksi.js

@@ -7,8 +7,8 @@ function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">
 			<div className="card-body card-over">
-				<Datatable options={{ responsive: false }}>
-					<table className="table w-100" data-order='[3,"asc"]'>
+				<Datatable options={{ responsive: false, ordering: true }}>
+					<table className="table w-100" data-order='[[3, "desc"]]'>
 						<thead>
 							<tr>
 								<th>Nomor Sanksi</th>
@@ -29,7 +29,7 @@ function TableSanksi({ listData, to, linkName }) {
 													<div className="media-body d-flex">
 														<div>
 															<h4>{data.no_sanksi}</h4>
-															<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+															<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 														</div>
 													</div>
 												</div>
@@ -58,7 +58,7 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color >
+														<Button className="btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

+ 6 - 15
components/Layout/Menu.js

@@ -21,21 +21,6 @@ const Menu = [
 		icon: "icon-note",
 		translate: "sidebar.nav.PELAPORAN",
 	},
-	// {
-	// 	name: "Pelaporan",
-	// 	icon: "icon-notebook",
-	// 	translate: "sidebar.nav.LAPORAN",
-	// 	submenu: [
-	// 		{
-	// 			name: "List Laporan",
-	// 			path: "/app/pelaporan",
-	// 		},
-	// 		{
-	// 			name: "Laporan ditutup",
-	// 			path: "/app/laporan-ditutup",
-	// 		},
-	// 	],
-	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",
@@ -92,6 +77,12 @@ const Menu = [
 		icon: "icon-film",
 		translate: "sidebar.nav.Riwayat",
 	},
+	{
+		name: "Pelaporan Tuntas",
+		path: "/app/tuntas",
+		icon: "far fa-check-circle",
+		translate: "sidebar.nav.Pelaporan-tuntas",
+	},
 	{
 		heading: "Bantuan",
 		translate: "sidebar.heading.BANTUAN",

+ 4 - 25
components/Layout/MenuLLDIKTI.js

@@ -9,33 +9,12 @@ const Menu = [
 		icon: "icon-speedometer",
 		translate: "sidebar.nav.PEMANTAUAN",
 	},
-	{
-		name: "Laporan Delegasi",
-		path: "/app/laporan-delegasi",
-		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN_DELEGASI",
-	},
 	{
 		name: "Pelaporan",
 		path: "/app/pelaporan",
 		icon: "icon-note",
 		translate: "sidebar.nav.PELAPORAN",
 	},
-	// {
-	// 	name: "Pelaporan",
-	// 	icon: "icon-notebook",
-	// 	translate: "sidebar.nav.LAPORAN",
-	// 	submenu: [
-	// 		{
-	// 			name: "List Laporan",
-	// 			path: "/app/pelaporan",
-	// 		},
-	// 		{
-	// 			name: "Laporan ditutup",
-	// 			path: "/app/laporan-ditutup",
-	// 		},
-	// 	],
-	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",
@@ -81,10 +60,10 @@ const Menu = [
 		translate: "sidebar.heading.ANALYTICS_REPORT",
 	},
 	{
-		name: "Riwayat",
-		path: "/app/riwayat",
-		icon: "icon-film",
-		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+		name: "Pelaporan Tuntas",
+		path: "/app/tuntas",
+		icon: "far fa-check-circle",
+		translate: "sidebar.nav.Pelaporan-tuntas",
 	},
 	{
 		heading: "Bantuan",

+ 3 - 3
components/Main/TableLaporan.js

@@ -8,7 +8,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 		<div className="card b ">
 			<div className="card-body card-over">
 				{listData && (
-					<Datatable options={{ responsive: false, ordering: true, keys: true }}>
+					<Datatable options={{ responsive: false, ordering: true }}>
 						<table className="table w-100" data-order='[[3, "desc"]]'>
 							<thead>
 								<tr>
@@ -30,7 +30,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 													<div className="media-body d-flex">
 														<div>
 															<h4>{data.no_laporan}</h4>
-															<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+															<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 														</div>
 													</div>
 												</div>
@@ -67,7 +67,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn-login" color>
+														<Button className="btn-login" color>
 															<span className="font-color-white">
 																{linkName}
 															</span>

+ 4 - 4
components/Main/TableSanksi.js

@@ -8,8 +8,8 @@ function TableSanksi({ listData, to, linkName }) {
 		<div className="card b">
 			<div className="card-body card-over">
 				{listData && (
-					<Datatable options={{ responsive: false }}>
-						<table className="table w-100">
+					<Datatable options={{ responsive: false, ordering: true }}>
+						<table className="table w-100" >
 							<thead>
 								<tr>
 									<th>Nomor Sanksi</th>
@@ -30,7 +30,7 @@ function TableSanksi({ listData, to, linkName }) {
 														<div className="media-body d-flex">
 															<div>
 																<h4>{data.no_sanksi}</h4>
-																<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+																<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 															</div>
 														</div>
 													</div>
@@ -55,7 +55,7 @@ function TableSanksi({ listData, to, linkName }) {
 																query: { id: data._id },
 															}}
 														>
-															<Button className="color-3e3a8e btn-login" color >
+															<Button className="btn-login" color >
 																<span className="font-color-white">
 																	{linkName}
 																</span>

+ 1 - 1
components/Main/Timeline.js

@@ -41,7 +41,7 @@ function Timeline({ data, noFile = false, noJadwal = false }) {
 																<br />
 															</>
 														)}
-														{data.sanksi?.no_sanksi ? `No. Sanksi ${data.sanksi.no_sanksi}` : `No. Laporan ${data.laporan.no_laporan}`}
+														{/* {data.sanksi?.no_sanksi ? `No. Sanksi ${data.sanksi.no_sanksi}` : `No. Laporan ${data.laporan.no_laporan}`} */}
 														<p className="text-muted m-0">{moment(data.createdAt).format("hh:mm")}</p>
 													</p>
 												</div>

+ 1 - 1
components/PT/CabutSanksi/TableSanksiJawaban.js

@@ -39,7 +39,7 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.sanksi.cabut_sanksi?.jawaban ? (
 											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
-												<Button className="color-3e3a8e btn-login" color >
+												<Button className="btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

+ 1 - 1
components/PT/JawabanBanding/DetailJawaban.js

@@ -49,7 +49,7 @@ function DetailJawaban({ data, sanksiId }) {
 					}}
 				>
 					{/* <Button color="primary">Perbaiki Dokumen</Button> */}
-					<Button color className="btn-login color-3e3a8e">
+					<Button color className="btn-login">
 						<span className="font-color-white">
 							Dokumen Perbaikan
 						</span>

+ 2 - 2
components/PT/JawabanBanding/TableSanksiJawaban.js

@@ -25,7 +25,7 @@ function TableSanksi({ listData, to, linkName }) {
 											<div className="media-body d-flex">
 												<div>
 													<h4>{data.no_sanksi}</h4>
-													<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+													<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 												</div>
 											</div>
 										</div>
@@ -49,7 +49,7 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.jawaban?.banding ? (
 											<Link href={{ pathname: to, query: { id: data._id } }}>
-												<Button className="color-3e3a8e btn-login" color >
+												<Button className="btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

+ 4 - 4
components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -135,9 +135,9 @@ export class ModalPermohonan extends Component {
 					<ModalBody>Apakah anda akan mengajukan banding?</ModalBody>
 					<ModalFooter>
 						<Button color className="btn-login" onClick={this.toggleModal1}>
-							Ya
+							<span className="font-color-white">Ya</span>
 						</Button>{" "}
-						<Button color className="btn-login" onClick={this.props.toggleModal}>
+						<Button color className="btn-v2" onClick={this.props.toggleModal}>
 							Tidak
 						</Button>
 					</ModalFooter>
@@ -207,8 +207,8 @@ export class ModalPermohonan extends Component {
 								</FormGroup>
 							</ModalBody>
 							<ModalFooter>
-								<Button color="primary" type="submit">
-									Kirim
+								<Button color className="btn-login" type="submit">
+									<span className="font-color-white">Kirim</span>
 								</Button>
 							</ModalFooter>
 						</Form>

+ 2 - 2
components/PT/JawabanKeberatan/TableSanksiJawaban.js

@@ -25,7 +25,7 @@ function TableSanksi({ listData, to, linkName }) {
 											<div className="media-body d-flex">
 												<div>
 													<h4>{data.no_sanksi}</h4>
-													<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+													<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 												</div>
 											</div>
 										</div>
@@ -49,7 +49,7 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.jawaban?.keberatan ? (
 											<Link href={{ pathname: to, query: { id: data._id } }}>
-												<Button className="color-3e3a8e btn-login" color >
+												<Button className="btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

+ 2 - 2
components/PT/JawabanPencabutanSanksi/TableSanksiJawaban.js

@@ -25,7 +25,7 @@ function TableSanksi({ listData, to, linkName }) {
 											<div className="media-body d-flex">
 												<div>
 													<h4>{data.no_sanksi}</h4>
-													<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+													<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 												</div>
 											</div>
 										</div>
@@ -48,7 +48,7 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.jawaban?.cabut_sanksi ? (
 											<Link href={{ pathname: to, query: { id: data._id } }}>
-												<Button className="color-3e3a8e btn-login" color >
+												<Button className="btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

+ 3 - 3
components/PT/Keberatan/ModalPermohonan.js

@@ -139,7 +139,7 @@ export class ModalPermohonan extends Component {
 						<Button color className="btn-login" onClick={this.toggleModal1}>
 							<span className="font-color-white">Ya</span>
 						</Button>{" "}
-						<Button color="danger" onClick={this.props.toggleModal}>
+						<Button color className="btn-v2" onClick={this.props.toggleModal}>
 							Tidak
 						</Button>
 					</ModalFooter>
@@ -209,8 +209,8 @@ export class ModalPermohonan extends Component {
 								</FormGroup>
 							</ModalBody>
 							<ModalFooter>
-								<Button color className=" color-3e3a8e btn-login" type="submit">
-									Kirim
+								<Button color className="btn-login" type="submit">
+									<span className="font-color-white">Kirim</span>
 								</Button>
 							</ModalFooter>
 						</Form>

+ 2 - 2
components/PT/TableSanksi.js

@@ -25,7 +25,7 @@ function TableSanksi({ listData, to, linkName }) {
 											<div className="media-body d-flex">
 												<div>
 													<h4>{data.no_sanksi}</h4>
-													<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+													<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 												</div>
 											</div>
 										</div>
@@ -47,7 +47,7 @@ function TableSanksi({ listData, to, linkName }) {
 									{/* <td>{moment(data.createdAt).format("DD MMMM YYYY")}</td> */}
 									<td>
 										<Link href={{ pathname: to, query: { id: data._id } }}>
-											<Button className="color-3e3a8e btn-login" color >
+											<Button className="btn-login" color >
 												<span className="font-color-white">
 													{linkName}
 												</span>

+ 1 - 1
components/PT/TableSanksiJawaban.js

@@ -34,7 +34,7 @@ function TableSanksi({ listData, to, linkName }) {
 									<td>
 										{data.sanksi.keberatan?.jawaban || data.sanksi.banding?.jawaban || data.sanksi.cabut_sanksi?.jawaban ? (
 											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
-												<Button color className="color-3e3a8e btn-login">{linkName}</Button>
+												<Button color className="btn-login">{linkName}</Button>
 											</Link>
 										) : (
 											<div className="badge-info badge">Menunggu Jawaban</div>

+ 5 - 5
components/Pelaporan/InputData.js

@@ -52,9 +52,9 @@ const checkIfFilesAreCorrectType = (files) => {
 const selectInstanceId = 1;
 const laporanSchema = Yup.object().shape({
 	no_laporan: Yup.string().required(""),
-	keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required(""),
-	pelanggaran: Yup.array().min(1, " ").required(),
-	dokumen: Yup.array().min(1, " ").required().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+	keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
+	pelanggaran: Yup.array().min(1, "Wajib pilih pelanggaran").required(),
+	dokumen: Yup.array().min(1, "Wajib upload file pendukung").required("Harus upload file").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 export class InputData extends Component {
 	constructor(props) {
@@ -220,7 +220,7 @@ export class InputData extends Component {
 						</FormGroup>
 
 						<FormGroup row>
-							<label className="col-md-2 col-form-label">Upload File Pendukung</label>
+							<label className="col-md-2 col-form-label">Upload File Pendukung<span className=" text-danger">*</span></label>
 							<div className="col-md-10">
 								<Field name="dokumen">
 									{({ field, form, meta }) => (
@@ -271,7 +271,7 @@ export class InputData extends Component {
 						</FormGroup>
 						<FormGroup row>
 							<div className="col-xl-10">
-								<Button className="color-3e3a8e" color type="submit" disabled={isSubmitting}>
+								<Button className="btn-login" color type="submit" disabled={isSubmitting}>
 									<span className="font-color-white">
 										Submit Laporan
 									</span>

+ 3 - 3
components/Pelaporan/TableLaporan.js

@@ -18,7 +18,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                     </Link>
                 </div>
                 {listData && (
-                    <Datatable options={{ responsive: false, ordering: true, keys: true }}>
+                    <Datatable options={{ responsive: false, ordering: true }}>
                         <table className="table w-100" data-order='[[3, "desc"]]'>
                             <thead>
                                 <tr>
@@ -40,7 +40,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                     <div className="media-body d-flex">
                                                         <div>
                                                             <h4>{data.no_laporan}</h4>
-                                                            <p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+                                                            <p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -77,7 +77,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                             query: { id: data._id },
                                                         }}
                                                     >
-                                                        <Button className="color-3e3a8e btn-login loader" color>
+                                                        <Button className="btn-login loader" color>
                                                             <span className="font-color-white">
                                                                 {linkName}
                                                             </span>

+ 130 - 0
components/PelaporanTuntas/CaseProgress.js

@@ -0,0 +1,130 @@
+import React, { Component, useState, useEffect } from "react";
+import { Progress } from "reactstrap";
+import Sparkline from "@/components/Common/Sparklines";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
+import Datatable from "@/components/Tables/Datatable";
+import MorrisChart from "@/components/Charts//Morris";
+import { Button } from "reactstrap";
+
+function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#287DAD",
+				data: [["Selesai", data.jumlah_selesai]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#FD4233",
+				data: [["Ditutup", data.jumlah_ditutup]],
+			},
+		],
+
+		options: {
+			series: {
+				bars: {
+					align: "center",
+					lineWidth: 0,
+					show: true,
+					barWidth: 0.2,
+					fill: 0.9,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				// position: 'right' or 'left'
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
+
+	const ChartPie = {
+		data: [
+			{
+				label: "Selesai",
+				color: "#287DAD",
+				data: [data.jumlah_selesai],
+			},
+			{
+				label: "Ditutup",
+				color: "#FD4233",
+				data: [data.jumlah_ditutup],
+			},
+		],
+
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport" onClick={excel}>
+						<img src="/static/img/eksport.png"></img>
+					</Button>
+				</div>
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-401">
+					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+				</div>
+			</div>
+			<div className="card-body">
+				<div className="header-1">
+					<h2 className="card-title-1">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div>
+		</div>
+	);
+}
+
+export default CaseProgress;

+ 162 - 0
components/PelaporanTuntas/DetailLaporan.js

@@ -0,0 +1,162 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+import { useSelector } from "react-redux";
+
+function DetailLaporan({ data, noTitle = false, noStatus = false }) {
+	const user = useSelector((state) => state.user);
+	return (
+		<>
+			{(!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>
+					)}
+					{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} {data.user.verified && "(Terverifikasi)"}
+							</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 && (
+						<>
+							{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 && (
+						<FormGroup row>
+							<Col md="4">Dirahasiakan</Col>
+							<Col md="8">
+								<strong>Ya</strong>
+							</Col>
+						</FormGroup>
+					)}
+				</>
+			)}
+			{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>
+					<Col md="8">
+						<strong>{data.no_laporan}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi yang Dilaporkan:</Col>
+					<Col md="8">
+						<strong>{data.pt.nama}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="125px" className="list-group">
+							<ul>
+								{data.pelanggaran.map((e) => (
+									<li>{e.pelanggaran}</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.keterangan}</p>
+						</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">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.dokumen.map((e, index) => (
+										<tr key={`files-${index}`}>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+													{e.judul}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailLaporan;

+ 79 - 0
components/PelaporanTuntas/TableLaporan.js

@@ -0,0 +1,79 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableLaporan({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body card-over">
+				{listData && (
+					<Datatable options={{ responsive: false, ordering: true }}>
+						<table className="table w-100" data-order='[[2, "asc"], [3, "desc"]]'>
+							<thead>
+								<tr>
+									<th>No.Laporan</th>
+									<th>Deskripsi Laporan</th>
+									<th>Status</th>
+									{/* <th>Created</th> */}
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.map((data) => {
+									return (
+										<tr key={data._id}>
+											<td>
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<h4>{data.laporan?.no_laporan || data.no_laporan}</h4>
+															<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+														</div>
+													</div>
+												</div>
+											</td>
+											<td>
+												<div className="table-desc">
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<h4 className="m-0">{data.pt?.nama.length > 64 || data.laporan?.pt.nama.length > 64 ? data.pt?.nama.substring(0, 64) + "..." || data.laporan?.pt.nama.substring(0, 64) + "..." : data.pt?.nama || data.laporan?.pt.nama}</h4>
+																<p className="w-105">{data.keterangan}</p>
+															</div>
+														</div>
+													</div>
+												</div>
+											</td>
+											<td>
+												{data.aktif === false ? <div className="badge badge-green">Selesai</div> : <div className="badge badge-red">Ditutup</div>}
+											</td>
+											<td>
+												<div className="ml-auto">
+													<Link
+														href={{
+															pathname: to,
+															query: { id: data._id },
+														}}
+													>
+														<Button className="btn-login loader" color>
+															<span className="font-color-white">
+																{linkName}
+															</span>
+														</Button>
+													</Link>
+												</div>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
+			</div>
+		</div >
+	);
+}
+
+export default TableLaporan;

+ 48 - 11
components/Pemeriksaan/InputEvaluasi.js

@@ -3,11 +3,12 @@ import { insertPemeriksaan } from "@/actions/pemeriksaan";
 import Router from "next/router";
 import Datetime from "react-datetime";
 import moment from "moment";
-import { Row, Col, FormGroup, Input } from "reactstrap";
+import { Row, Col, FormGroup, Input, Button } 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";
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { connect } from "react-redux";
 
 const selectInstanceId = 1;
 const checkIfFilesAreTooBig = (files) => {
@@ -55,7 +56,7 @@ class DropzoneWrapper extends Component {
 	}
 }
 
-export default class InputEvaluasi extends Component {
+class InputEvaluasi extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -64,6 +65,8 @@ export default class InputEvaluasi extends Component {
 			judulEvaluasi: "",
 			tanggal: moment().format("D MMMM YYYY"),
 			files: [],
+			delegasichecklist: false,
+			rolelldikti: false,
 		};
 	}
 
@@ -126,18 +129,37 @@ export default class InputEvaluasi extends Component {
 		data.dokumen.forEach((e) => {
 			formdata.append("dokumen", e);
 		});
+		if (this.state.delegasichecklist == true) {
+			await toast.promise(insertPemeriksaan(token, id, formdata), {
+				pending: "Loading",
+				success: "Success",
+				error: "Error",
 
-		await toast.promise(insertPemeriksaan(token, id, formdata), {
-			pending: "Loading",
-			success: "Success",
-			error: "Error",
-		});
+			});
+
+			data.change_role = "true";
+			data.keterangan = "delegasi ke DIKTI"
+			Router.push("/app/pemeriksaan");
+			update = await updateLaporan(token, id, data);
+		} else {
+			await toast.promise(insertPemeriksaan(token, id, formdata), {
+				pending: "Loading",
+				success: "Success",
+				error: "Error",
+			});
+		}
 		this.setState({ files: [] });
 		resetForm();
 		const pelaporan = await getOneLaporan(token, query.id);
 		this.props.changePelaporan(pelaporan);
 	};
 
+	handlechecklist = () => {
+		this.setState({ delegasichecklist: !this.state.delegasichecklist })
+	};
+	// getStatus = () => (this.props.user?.role.id == 2021 ? this.setState({ rolelldikti: !this.state.rolelldikti }) : "")
+
+
 	render() {
 		const { files } = this.state;
 
@@ -186,7 +208,7 @@ export default class InputEvaluasi extends Component {
 							</div>
 						</FormGroup>
 						<FormGroup row>
-							<label className="col-md-2 col-form-label">Upload File Pendukung</label>
+							<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
 							<div className="col-md-10">
 								<Field name="dokumen">
 									{({ field, form, meta }) => (
@@ -235,13 +257,25 @@ export default class InputEvaluasi extends Component {
 								</p>
 							</div>
 						</FormGroup>
+						{this.props.user?.role.id === 2021 && this.props.data.role_asal === "dikti" ? (
+							<FormGroup row>
+								<label className="col-md-2 col-form-label">Delegasi ke dikti</label>
+								<div className="col-md-10 mt-2">
+									<div className="checkbox c-checkbox">
+										<label>
+											<Input type="checkbox" onChange={this.handlechecklist} defaultChecked={this.state.delegasichecklist} />
+											<span className="fa fa-check"></span></label>
+									</div>
+								</div>
+							</FormGroup>
+						) : ("")}
 						<FormGroup row>
 							<div className="col-xl-10">
-								<button className="btn btn-sm color-3e3a8e" type="submit">
+								<Button color className="btn-login" type="submit">
 									<span className="font-color-white">
 										Simpan Evaluasi
 									</span>
-								</button>
+								</Button>
 							</div>
 						</FormGroup>
 					</Form>
@@ -250,3 +284,6 @@ export default class InputEvaluasi extends Component {
 		);
 	}
 }
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(InputEvaluasi);

+ 2 - 2
components/Pemeriksaan/TableLaporan.js

@@ -8,7 +8,7 @@ function TableLaporan({ listData, to, linkName }) {
 		<div className="card b">
 			<div className="card-body card-over">
 				{listData && (
-					<Datatable options={{ responsive: false }}>
+					<Datatable options={{ responsive: false, ordering: true }}>
 						<table className="table w-100" data-order='[[2, "asc"], [3, "desc"]]'>
 							<thead>
 								<tr>
@@ -61,7 +61,7 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn-login" color >
+														<Button className="btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

+ 2 - 2
components/PencabutanSanksi/TableSanksi.js

@@ -7,7 +7,7 @@ function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">
 			<div className="card-body card-over">
-				<Datatable options={{ responsive: false }}>
+				<Datatable options={{ responsive: false, ordering: true }}>
 					<table className="table w-100" data-order='[3, "asc"]'>
 						<thead>
 							<tr>
@@ -58,7 +58,7 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color >
+														<Button className="btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

+ 2 - 2
components/Penjadwalan/TableLaporan.js

@@ -8,7 +8,7 @@ function TableLaporan({ listData, to, linkName }) {
 		<div className="card b">
 			<div className="card-body card-over">
 				{listData && (
-					<Datatable options={{ responsive: false }}>
+					<Datatable options={{ responsive: false, ordering: true }}>
 						<table className="table w-100" data-order='[[2, "desc"], [3, "desc"]]'>
 							<thead>
 								<tr>
@@ -61,7 +61,7 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn-login loader" color>
+														<Button className="btn-login" color>
 															<span className="font-color-white">
 																Edit
 															</span>

+ 50 - 29
components/Sanksi/Ringkasan.js

@@ -1,6 +1,8 @@
 import Scrollable from "@/components/Common/Scrollable";
 import { Card, Row, Col, Table, FormGroup } from "reactstrap";
 import moment from "moment";
+import 'moment/locale/id'
+moment.locale('id')
 
 function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 	return (
@@ -112,38 +114,57 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
 							</Col>
 						</FormGroup>
-						<FormGroup row>
-							<Col md="4">TMT Berlaku:</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.akhirsanksi ? (
-										<p>
-											{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">TMT :</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.akhirsanksi ? (
-										<p>
-											{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
+						{dataUpload && !dataUpload.tmtCheck ? (
+							<FormGroup row>
+								<Col md="4">TMT Berlaku:</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.akhirsanksi ? (
+											<p>
+												{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).locale("id").format("DD MMMM YYYY")}
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						) : (
+							<FormGroup row>
+								<Col md="4">Tanggal Penetapan Sanksi:</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.awalsanksi ? (
+											<p>
+												{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")}
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						)}
+						{dataUpload && !dataUpload.tmtCheck ? (
+							<FormGroup row>
+								<Col md="4">TMT :</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.akhirsanksi ? (
+											<p>
+												{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						) : ("")}
 						<FormGroup row>
 							<Col md="4">Sanksi:</Col>
 							<Col md="8">
-								<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value + " " + e.label_sanksi}</p>) : ""}</strong>
+								<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value}</p>) : ""}</strong>
 							</Col>
 						</FormGroup>
 

+ 2 - 2
components/Sanksi/TableLaporan.js

@@ -29,7 +29,7 @@ function TableLaporan({ listData }) {
 													<div className="media-body d-flex">
 														<div>
 															<h4>{data.no_laporan}</h4>
-															<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+															<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
 														</div>
 													</div>
 												</div>
@@ -58,7 +58,7 @@ function TableLaporan({ listData }) {
 															query: { id: data.sanksi || data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn-login" color>
+														<Button className="btn-login" color>
 															<span className="font-color-white">
 																{data.sanksi ? "Detail" : "Proses Sanksi"}
 															</span>

+ 94 - 38
components/Sanksi/UploadSurat.js

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

+ 1 - 1
pages/app/banding/detail.js

@@ -221,7 +221,7 @@ class JawabanBanding extends Component {
 																</div>
 															</FormGroup>
 															<FormGroup>
-																<label className="row-form-label">Dokumen Jawaban:</label>
+																<label className="row-form-label">Dokumen Jawaban<span className="text-danger">*</span>:</label>
 																<div className="row-md-10">
 																	<Field name="dokumen">
 																		{({ field, form }) => (

+ 1 - 1
pages/app/pemeriksaan/new.js

@@ -63,7 +63,7 @@ class PemeriksaanNew extends Component {
 										<Row>
 											<Col lg={12}>
 												<DetailLaporan data={pelaporan.data} />
-												<InputEvaluasi query={query} token={token} changePelaporan={this.changePelaporan} />
+												<InputEvaluasi query={query} token={token} changePelaporan={this.changePelaporan} data={pelaporan.data} />
 											</Col>
 										</Row>
 									</CardBody>

+ 5 - 3
pages/app/sanksi/proses.js

@@ -12,7 +12,7 @@ import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
 import Link from "next/link";
 import { getOneLaporan } from "@/actions/pelaporan";
 import { createSanksi } from "@/actions/sanksi";
-import { getPelanggaran } from "@/actions/pelanggaran";
+import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import { ToastContainer, toast } from "react-toastify";
@@ -30,6 +30,7 @@ class ProsesSanksi extends Component {
 			dataUpload: null,
 			dataPelanggaran: {},
 			pelaporan: {},
+			listSanksi: []
 		};
 	}
 
@@ -41,7 +42,8 @@ class ProsesSanksi extends Component {
 		const { query, token } = this.props;
 		const { id } = query;
 		const pelaporan = await getOneLaporan(token, id);
-		this.setState({ pelaporan });
+		const {data:listSanksi} = await getPelanggaranSanksi(token)
+		this.setState({ pelaporan, listSanksi });
 	};
 
 	done = async (e) => {
@@ -222,7 +224,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="4">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
-												<UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} />
+												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} />}
 											</div>
 											<hr />
 											<div className="d-flex">

+ 71 - 0
pages/app/tuntas/detail.js

@@ -0,0 +1,71 @@
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getOneLaporan } from "@/actions/pelaporan";
+import DetailLaporan from "@/components/PelaporanTuntas/DetailLaporan";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, Button, CardBody } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+import { createLog } from "@/actions/log";
+
+class DetailPelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { token, query } = this.props;
+		const pelaporan = await getOneLaporan(this.props.token, query.id);
+		await createLog(token, { aktivitas: `Mengakses halaman detail Pelaporan Tuntas dengan No. Laporan ${pelaporan.data.no_laporan}`, menu: "Pelaporan" });
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<span className="font-color-white">Detail Pelaporan</span>
+						<div className="ml-auto">
+							<Link href="/app/tuntas">
+								<Button className="btn-login" color>
+									<span className="font-color-white">&lt; Kembali</span>
+								</Button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>{<DetailLaporan data={pelaporan.data} />}</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
+						</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(DetailPelaporan);

+ 76 - 0
pages/app/tuntas/index.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph, getExcel,getlaporanselesai } from "@/actions/graph";
+import CaseProgress from "@/components/PelaporanTuntas/CaseProgress";
+import TableLaporan from "@/components/PelaporanTuntas/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Link from "next/link";
+import Button from "reactstrap/lib/Button";
+import Router from "next/router";
+
+class PelaporanTuntas extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            pelaporan: {},
+            graph: {},
+            tahun: new Date().getFullYear(),
+            laporanSelesai: {}
+        };
+    }
+
+    componentDidMount = async () => {
+        const { token } = this.props;
+        let laporanSelesai = await getlaporanselesai(token);
+        laporanSelesai = {...laporanSelesai, data: {
+            ...laporanSelesai.data, laporan: [...laporanSelesai.data.laporan, ...laporanSelesai.data.sanksi], sanksi: null
+        }}
+        const pelaporan = await getPelaporan(token, { jadwal: true, aktif: false });
+        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, aktif: false });
+        this.setState({ pelaporan, graph, laporanSelesai });
+    };
+
+    nextButton = async () => {
+        const tahun = this.state.tahun + 1;
+        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+        this.setState({ graph, tahun });
+    };
+
+    prevButton = async () => {
+        const tahun = this.state.tahun - 1;
+        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+        this.setState({ graph, tahun });
+    };
+
+    shouldComponentUpdate = (prevProps, prevState) => {
+        if (prevState.graph !== this.state.graph) return true;
+    };
+
+    excel = () => {
+        const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
+        Router.push(url);
+    };
+
+    render() {
+        const { pelaporan, graph, laporanSelesai } = this.state;
+        return (
+            <ContentWrapper>
+                <div className="content-heading">
+                    <span className="font-color-white">
+                        Pelaporan Tuntas
+                    </span>
+                </div>
+                <Row>
+                    <Col lg="4">{laporanSelesai?.data ? <CaseProgress data={laporanSelesai.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col>
+                    <Col lg="8">{laporanSelesai?.data?.laporan ? <TableLaporan status noBy listData={laporanSelesai.data.laporan} to="/app/tuntas/detail" linkName="Detail" /> : <Loader />}</Col>
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(PelaporanTuntas);

+ 2 - 2
pages/pt/jawaban-keberatan/detail.js

@@ -52,7 +52,7 @@ class JawabanKeberatan extends Component {
 						</span>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-keberatan">
-								<Button className="color-3e3a8e" color>
+								<Button className="btn-login" color>
 									<span className="font-color-white">
 										&lt; Kembali
 									</span>
@@ -76,7 +76,7 @@ class JawabanKeberatan extends Component {
 																Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat
 																menekan tombol di bawah ini paling lambat {moment(sanksi.data.batas_waktu.banding).format("DD MMMM YYYY")}
 															</p>
-															<Button color className="color-3e3a8e" onClick={this.toggleModal} disabled={sanksi.data.pengajuan.banding || false}>
+															<Button color className="btn-login" onClick={this.toggleModal} disabled={sanksi.data.pengajuan.banding || false}>
 																<span className="font-color-white">
 																	Ajukan Banding
 																</span>

+ 84 - 37
styles/bootstrap/_buttons.scss

@@ -12,19 +12,17 @@ $colortheme : #3e3a8e;
   font-weight: $btn-font-weight;
   color: $body-color;
   text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if($link-decoration ==none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
   user-select: none;
-  background-color: transparent ;
+  background-color: transparent;
   border: $btn-border-width solid transparent;
-  @include button-size(
-    $btn-padding-y,
+  @include button-size($btn-padding-y,
     $btn-padding-x,
     $btn-font-size,
     $btn-line-height,
-    $btn-border-radius
-  );
+    $btn-border-radius );
   @include transition($btn-transition);
 
   @include hover() {
@@ -69,13 +67,15 @@ fieldset:disabled a.btn {
 // Alternate buttons
 //
 
-@each $color, $value in $theme-colors {
+@each $color,
+$value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
   }
 }
 
-@each $color, $value in $theme-colors {
+@each $color,
+$value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value);
   }
@@ -115,23 +115,19 @@ fieldset:disabled a.btn {
 //
 
 .btn-lg {
-  @include button-size(
-    $btn-padding-y-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-border-radius-lg );
 }
 
 .btn-sm {
-  @include button-size(
-    $btn-padding-y-sm,
+  @include button-size($btn-padding-y-sm,
     $btn-padding-x-sm,
     $btn-font-size-sm,
     $btn-line-height-sm,
-    $btn-border-radius-sm
-  );
+    $btn-border-radius-sm );
 }
 
 //
@@ -143,7 +139,7 @@ fieldset:disabled a.btn {
   width: 100%;
 
   // Vertically space out multiple block buttons
-  + .btn-block {
+  +.btn-block {
     margin-top: $btn-block-spacing-y;
   }
 }
@@ -156,9 +152,11 @@ input[type="button"] {
     width: 100%;
   }
 }
+
 .posisi-btn-1 .button-kirimlaporan {
   border-radius: 5px;
 }
+
 .button-kirimlaporan {
   // background: rgba(0, 0, 0, 0.05);
   display: inline-block;
@@ -167,6 +165,7 @@ input[type="button"] {
   height: 33px;
   margin-bottom: -15px;
 }
+
 .text-kirimlaporan {
   font-weight: 500;
   font-size: 17px;
@@ -174,6 +173,7 @@ input[type="button"] {
   text-align: center;
   padding-bottom: 5px;
 }
+
 .posisi-btn-1 .button-lihatpemantauan {
   border-radius: 5px;
   position: relative;
@@ -185,6 +185,7 @@ input[type="button"] {
   height: 35px;
   margin-bottom: -5px;
 }
+
 .text-lihatpemantauan {
   // font-weight: 500;
   font-size: 16px;
@@ -193,6 +194,7 @@ input[type="button"] {
   // padding-bottom: 5px;
   margin: -5px;
 }
+
 .btn-labeled {
   padding-top: 0;
   padding-bottom: 0;
@@ -202,91 +204,123 @@ input[type="button"] {
   display: inline;
   border-radius: 7px;
   transition: ease background-color 250ms;
+
   &:hover {
-    background-color: $colorbutton; opacity: 0.9;
-}}
+    background-color: $colorbutton;
+    opacity: 0.9;
+  }
+}
+
 .btn-labeled-2 {
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 3%;
-  background:$colorbutton;
+  background: $colorbutton;
   transition: ease background-color 250ms;
+
   &:hover {
-    background-color: $colorbutton; opacity: 0.9;
-}
+    background-color: $colorbutton;
+    opacity: 0.9;
+  }
 }
-.btn-labeled-3{
+
+.btn-labeled-3 {
   border: #3e3a8e solid 2px;
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 3%;
   color: #3e3a8e;
-  background:transparent;
+  background: transparent;
   transition: ease background-color 250ms;
+
   &:hover {
-    background-color: #e9e8e8; opacity: 0.9;
+    background-color: #e9e8e8;
+    opacity: 0.9;
     color: #3e3a8e;
-}}
+  }
+}
 
-.btn-radius .btn-labeled-3{
+.btn-radius .btn-labeled-3 {
   border-radius: 7px;
 }
+
 .btn-login {
   background: $colorbutton;
   transition: ease background-color 250ms;
+  border: $colorbutton solid 2px;
+
+
   &:hover {
-    background-color: $colorbutton; opacity: 0.8;
+    background-color: $colorbutton;
+    opacity: 0.8;
+  }
 }
-} //jangan di ubah
+
+//jangan di ubah
+.btn-v2 {
+  background: transparent;
+  border: #3e3a8e solid 2px;
+}
+
 .navbar-color {
   background-color: $colortheme;
 }
+
 .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:$colorbutton;
-  height: 35px;   
+  background-color: $colorbutton;
+  height: 35px;
   transition: ease background-color 250ms;
-  &:hover {
-    background-color: $colorbutton; opacity: 0.9;
-}
+  //   &:hover {
+  //     background-color: $colorbutton; opacity: 0.9;
+  // }
 }
+
 .text-btn-penjadwalan-1 {
   letter-spacing: 0.02em;
   text-align: center;
 }
+
 .btn-simpanjadwal {
   margin-left: auto;
   width: 100px;
   margin-top: 20px;
   margin-bottom: 15px;
 }
+
 .btn-radius .btn-labeled-2 {
   border-radius: 7px;
   display: inline;
   border: 0;
 }
+
 .btn-radius .btn-labeled {
   border-radius: 7px;
   display: inline;
   border: 0;
 }
+
 .btn-radius .btn-login {
   border-radius: 7px;
   border: 0;
 }
+
 .btn-header {
   display: inline-block;
   background-color: $colorbutton;
@@ -295,38 +329,48 @@ input[type="button"] {
   margin-left: 5px;
   border: 0;
   transition: ease background-color 250ms;
+
   &:hover {
-    background-color: $colorbutton; opacity: 0.9;
-}
+    background-color: $colorbutton;
+    opacity: 0.9;
+  }
 }
+
 .margin-l-5 {
   margin-right: 5px;
   display: inline;
 }
+
 .btn-radius .button-kirimlaporan {
   border: 0;
   background-color: $colorbutton;
 }
+
 .btn-radius .button-lihatpemantauan {
   border: 0;
 }
+
 .button-hidden {
   border: 0;
   padding: 0;
 }
+
 .color-3e3a8e {
   background-color: #3e3a8e;
   color: #3e3a8e;
 }
+
 .margin-left-auto {
   float: left;
   margin-right: auto;
 }
+
 .icon-laporan-baru {
   margin-left: 5px;
   // margin-right: -8px;
   width: 13px;
 }
+
 .modals {
   // height: 40px;
   background-color: $colortheme;
@@ -334,17 +378,20 @@ input[type="button"] {
   margin-bottom: -2px;
   border-radius: 5px;
 }
+
 .modals-1 {
   background-color: #b8b8b8;
   padding: 10px;
   border-radius: 5px;
 }
+
 .modals-verifikasi {
   background-color: transparent;
   padding: 5px;
   border-radius: 5px;
   color: black;
 }
+
 .btn-verif {
   background-color: Transparent;
   background-repeat: no-repeat;
@@ -356,4 +403,4 @@ input[type="button"] {
   margin-bottom: 3px;
   float: right;
   margin-bottom: auto;
-}
+}