push issue 15/08/2022, 22/08/2022

actions/banding.js

@@ -1,11 +1,14 @@
 import axios from "../config/axios";
+import { createLog } from "./log";
 
 export const addBanding = async (token, id, data) => {
 	try {
 		const res = await axios.post(`/sanksi/banding/create/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil mengajukan Banding, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal mengajukan Banding, id: ${id}` });
 		return false;
 	}
 };
@@ -13,9 +16,11 @@ export const addBanding = async (token, id, data) => {
 export const addJawabanBanding = async (token, id, data) => {
 	try {
 		const res = await axios.post(`/sanksi/banding/jawaban/create/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil menjawab pengajuan Banding, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal menjawab pengajuan Banding, id: ${id}` });
 		return false;
 	}
 };

actions/cabutSanksi.js

@@ -1,12 +1,14 @@
-import { post } from "../config/request";
 import axios from "../config/axios";
+import { createLog } from "./log";
 
 export const addCabutSanksi = async (token, id, data) => {
 	try {
 		const res = await axios.post(`/sanksi/cabut-sanksi/create/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil mengajukan pencabutan sanksi, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal mengajukan pencabutan sanksi, id: ${id}` });
 		return false;
 	}
 };
@@ -14,9 +16,11 @@ export const addCabutSanksi = async (token, id, data) => {
 export const addJawabanCabutSanksi = async (token, id, data) => {
 	try {
 		const res = await axios.post(`/sanksi/cabut-sanksi/jawaban/create/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil menjawab pengajuan pencabutan sanksi, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal menjawab pengajuan pencabutan sanksi, id: ${id}` });
 		return false;
 	}
 };

actions/docPerbaikan.js

@@ -1,11 +1,14 @@
 import axios from "../config/axios";
+import { createLog } from "./log";
 
 export const addDocPerbaikan = async (token, id, data) => {
 	try {
 		const res = await axios.post(`/sanksi/perbaikan/add/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil melakukan perbaikan dokumen, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal melakukan perbaikan dokumen, id: ${id}` });
 		return false;
 	}
 };

actions/keberatan.js

@@ -1,12 +1,14 @@
-import { post } from "../config/request";
 import axiosAPI from "../config/axios";
+import { createLog } from "./log";
 
 export const addKeberatan = async (token, id, data) => {
 	try {
 		const res = await axiosAPI.post(`/sanksi/keberatan/create/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil mengajukan keberatan, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal mengajukan keberatan, id: ${id}` });
 		return false;
 	}
 };
@@ -14,9 +16,11 @@ export const addKeberatan = async (token, id, data) => {
 export const addJawabanKeberatan = async (token, id, data) => {
 	try {
 		const res = await axiosAPI.post(`/sanksi/keberatan/jawaban/create/${id}`, data, { headers: { Authorization: token } });
+		await createLog(token, { aktivitas: `Berhasil menjawab pengajuan keberatan, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
+		await createLog(token, { aktivitas: `Gagal menjawab pengajuan keberatan, id: ${id}` });
 		return false;
 	}
 };

actions/pelaporan.js

@@ -1,5 +1,6 @@
 import { get, post, del, put } from "../config/request";
 import axiosAPI from "../config/axios";
+import { createLog } from "./log";
 
 export const getPelaporan = async (token, query = {}) => {
 	try {
@@ -52,6 +53,7 @@ export const getPelaporanPublic = async ({ number, noHp }) => {
 
 export const createPelaporan = async (token, data) => {
 	const res = await axiosAPI.post("/laporan/create", data, { headers: { Authorization: token } });
+	await createLog(token, { aktivitas: "Berhasil Membuat pelaporan" });
 	return res.data;
 };
 
@@ -88,9 +90,12 @@ export const createLaporanPublic = async (token, data) => {
 export const updateLaporan = async (token, id, data) => {
 	try {
 		const res = await axiosAPI.put(`/laporan/update/${id}`, data, { headers: { Authorization: token } });
+		if (data.aktif === "false") await createLog(token, { aktivitas: `Berhasil menutup laporan, id: ${id}` });
+		await createLog(token, { aktivitas: `Berhasil mengubah data laporan, id: ${id}` });
 		return res.data;
 	} catch (error) {
 		console.log("error", error.response.data);
+		await createLog(token, { aktivitas: `Gagal mengubah data pelaporan, id: ${id}` });
 		return false;
 	}
 };

actions/pemeriksaan.js

@@ -1,6 +1,8 @@
 import axiosAPI from "../config/axios";
+import { createLog } from "./log";
 
 export const insertPemeriksaan = async (token, id, data) => {
 	const res = await axiosAPI.post(`/laporan/evaluasi/add/${id}`, data, { headers: { Authorization: token } });
+	await createLog(token, { aktivitas: `Berhasil menambah evaluasi, id: ${id}` });
 	return res.data;
 };

actions/penjadwalan.js

@@ -1,8 +1,10 @@
 import axios from "../config/axios";
+import { createLog } from "./log";
 
 export const updateJadwal = async (token, id, data) => {
 	// try {
 	const res = await axios.put(`/laporan/jadwal/update/${id}`, data, { headers: { Authorization: token } });
+	await createLog(token, { aktivitas: `Berhasil menetapkan jadwal, id: ${id}` });
 	return res.data;
 	// } catch (error) {
 	// console.log("error", error);

actions/sanksi.js

@@ -1,7 +1,9 @@
 import axiosAPI from "../config/axios";
+import { createLog } from "./log";
 
 export const createSanksi = async (token, id, data) => {
 	const res = await axiosAPI.post(`/sanksi/create/${id}`, data, { headers: { Authorization: token } });
+	await createLog(token, { aktivitas: `Berhasil melakukan penetapan sanksi, id: ${id}` });
 	return res.data;
 };
 

components/Banding/TableSanksi.js

@@ -58,7 +58,7 @@ function TableSanksi({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color >
+														<Button className="color-3e3a8e btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

components/Layout/Menu.js

@@ -72,7 +72,7 @@ const Menu = [
 	},
 	{
 		name: "Pemantauan Perbaikan",
-		path: "/app/pemantauan-perbaikan",
+		path: "/app/perbaikan",
 		icon: "icon-graph",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},
@@ -90,7 +90,7 @@ const Menu = [
 		name: "Riwayat",
 		path: "/app/riwayat",
 		icon: "icon-film",
-		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+		translate: "sidebar.nav.Riwayat",
 	},
 ];
 

components/Layout/MenuLLDIKTI.js

@@ -66,7 +66,7 @@ const Menu = [
 	},
 	{
 		name: "Pemantauan Perbaikan",
-		path: "/app/pemantauan-perbaikan",
+		path: "/app/perbaikan",
 		icon: "icon-graph",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},

components/Main/ChartdataHome.js

@@ -61,7 +61,7 @@ class ChartdataHome extends Component {
 			},
 			yaxis: {
 				min: 0,
-				max: 150, // optional: use it for a clear represetation
+				// max: 150, // optional: use it for a clear represetation
 				tickColor: "#eee",
 				//position: 'right' or 'left',
 				tickFormatter: (v) => v /* + ' visitors'*/,

components/Main/Login.js

@@ -159,14 +159,6 @@ class Login extends Component {
                   <b className="font-color-white">
                     {" "}
                     {this.state.loading ? (
-                      // <div class="d-flex align-items-center">
-                      //   <strong>Login...</strong>
-                      //   <div
-                      //     class="spinner-border spinner-border-sm ml-auto"
-                      //     role="status"
-                      //     aria-hidden="true"
-                      //   ></div>
-                      // </div>
                       <div class="d-flex justify-content-center">
                         <div
                           class="spinner-border spinner-border-sm"

components/Main/TableLaporan.js

@@ -67,7 +67,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color>
+														<Button className="color-3e3a8e btn-login" color>
 															<span className="font-color-white">
 																{linkName}
 															</span>

components/Main/TableSanksi.js

@@ -55,7 +55,7 @@ function TableSanksi({ listData, to, linkName }) {
 																query: { id: data._id },
 															}}
 														>
-															<Button className="color-3e3a8e" color >
+															<Button className="color-3e3a8e btn-login" color >
 																<span className="font-color-white">
 																	{linkName}
 																</span>

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" color >
+												<Button className="color-3e3a8e btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

components/PT/JawabanBanding/DetailJawaban.js

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

components/PT/JawabanBanding/TableSanksiJawaban.js

@@ -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" color >
+												<Button className="color-3e3a8e btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -134,10 +134,10 @@ export class ModalPermohonan extends Component {
 				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
 					<ModalBody>Apakah anda akan mengajukan banding?</ModalBody>
 					<ModalFooter>
-						<Button color="primary" onClick={this.toggleModal1}>
+						<Button color className="btn-login" onClick={this.toggleModal1}>
 							Ya
 						</Button>{" "}
-						<Button color="secondary" onClick={this.props.toggleModal}>
+						<Button color className="btn-login" onClick={this.props.toggleModal}>
 							Tidak
 						</Button>
 					</ModalFooter>

components/PT/JawabanKeberatan/TableSanksiJawaban.js

@@ -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" color >
+												<Button className="color-3e3a8e btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

components/PT/JawabanPencabutanSanksi/TableSanksiJawaban.js

@@ -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" color >
+												<Button className="color-3e3a8e btn-login" color >
 													<span className="font-color-white">
 														{linkName}
 													</span>

components/PT/Keberatan/ModalPermohonan.js

@@ -136,10 +136,10 @@ export class ModalPermohonan extends Component {
 				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
 					<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
 					<ModalFooter>
-						<Button color="primary" onClick={this.toggleModal1}>
-							Ya
+						<Button color className="btn-login" onClick={this.toggleModal1}>
+							<span className=" font-color-white"></span>Ya
 						</Button>{" "}
-						<Button color="secondary" onClick={this.props.toggleModal}>
+						<Button color="danger" onClick={this.props.toggleModal}>
 							Tidak
 						</Button>
 					</ModalFooter>
@@ -209,7 +209,7 @@ export class ModalPermohonan extends Component {
 								</FormGroup>
 							</ModalBody>
 							<ModalFooter>
-								<Button color="primary" type="submit">
+								<Button color className=" color-3e3a8e btn-login" type="submit">
 									Kirim
 								</Button>
 							</ModalFooter>

components/PT/TableSanksi.js

@@ -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" color >
+											<Button className="color-3e3a8e btn-login" color >
 												<span className="font-color-white">
 													{linkName}
 												</span>

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="primary">{linkName}</Button>
+												<Button color className="color-3e3a8e btn-login">{linkName}</Button>
 											</Link>
 										) : (
 											<div className="badge-info badge">Menunggu Jawaban</div>

components/Pelaporan/TableLaporan.js

@@ -9,7 +9,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
             <div className="card-body card-over">
                 <div className="margin-left-auto">
                     <Link href="/app/pelaporan/search">
-                        <Button className="color-3e3a8e" color>
+                        <Button className="btn-login" color>
                             <span className="font-color-white">
                                 Laporan baru
                             </span>
@@ -77,7 +77,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                             query: { id: data._id },
                                                         }}
                                                     >
-                                                        <Button className="color-3e3a8e" color>
+                                                        <Button className="color-3e3a8e btn-login loader" color>
                                                             <span className="font-color-white">
                                                                 {linkName}
                                                             </span>

components/Pemeriksaan/TableLaporan.js

@@ -61,7 +61,7 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color >
+														<Button className="color-3e3a8e btn-login" color >
 															<span className="font-color-white">
 																{linkName}
 															</span>

components/Penjadwalan/TableLaporan.js

@@ -61,7 +61,7 @@ function TableLaporan({ listData, to, linkName }) {
 															query: { id: data._id },
 														}}
 													>
-														<Button className="color-3e3a8e btn" color>
+														<Button className="color-3e3a8e btn-login loader" color>
 															<span className="font-color-white">
 																Edit
 															</span>

components/Riwayat/ChartData.js

@@ -60,8 +60,7 @@ class ChartData extends Component {
 				mode: "categories",
 			},
 			yaxis: {
-				min: 0,
-				max: 150, // optional: use it for a clear represetation
+				min: 0, // optional: use it for a clear represetation
 				tickColor: "#eee",
 				//position: 'right' or 'left',
 				tickFormatter: (v) => v /* + ' visitors'*/,

components/Riwayat/ChartRadarBelum.js

@@ -22,23 +22,8 @@ class ChartRadarBelum extends React.Component {
                 name: 'Sanksi',
                 data: [4, 6, 8, 5, 7, 5, 6, 8, 9, 4, 3, 2, 4, 5, 6, 7],
             }
-                , {
-                name: 'Keberatan',
-                data: [8, 6, 8, 1, 2, 3, 4, 5, 6, 7, 8, 8, 7, 6, 5, 3],
-            }
-                , {
-                name: 'Banding',
-                data: [4, 6, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 4],
-            }
-                , {
-                name: 'Pemantauan Perbaikan',
-                data: [4, 6, 8, 4, 5, 6, 7, 8, 8, 9, 3, 4, 5, 6, 7, 3],
-            }
-                , {
-                name: 'Pencabutan Sanksi',
-                data: [4, 6, 6, 9, 8, 7, 6, 3, 2, 1, 8, 5, 4, 3, 6, 7],
-                colors: "#B2B0D2",
-            }],
+            ],
+            colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
             options: {
                 chart: {
                     height: 150,
@@ -55,10 +40,12 @@ class ChartRadarBelum extends React.Component {
                         },
                     },
                 },
+
                 // legend: {
                 //     show: false,
                 // }
             },
+
         };
     }
     render() {

components/Riwayat/ChartRadarSudah.js

@@ -12,33 +12,24 @@ class ChartRadarSudah extends React.Component {
         super(props);
 
         this.radar = {
-            series: [{
-                name: 'Penjadwalan Evaluasi',
-                data: [8, 5, 3, 4, 5, 1, 6, 8, 3, 9, 5, 2, 9, 6, 4, 2],
-            }, {
-                name: 'Pemeriksaan',
-                data: [2, 3, 4, 2, 5, 4, 3, 6, 7, 8, 6, 5, 4, 3, 2, 1],
-            }, {
-                name: 'Sanksi',
-                data: [4, 6, 8, 5, 7, 5, 6, 8, 9, 4, 3, 2, 4, 5, 6, 7],
-            }
-                , {
-                name: 'Keberatan',
-                data: [8, 6, 8, 1, 2, 3, 4, 5, 6, 7, 8, 8, 7, 6, 5, 3],
-            }
-                , {
-                name: 'Banding',
-                data: [4, 6, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 4],
-            }
+            series: [
+                {
+                    name: 'Keberatan',
+                    data: [8, 6, 8, 1, 2, 3, 4, 5, 6, 7, 8, 8, 7, 6, 5, 3],
+                },
+                {
+                    name: 'Banding',
+                    data: [4, 6, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 4],
+                }
                 , {
-                name: 'Pemantauan Perbaikan',
-                data: [4, 6, 8, 4, 5, 6, 7, 8, 8, 9, 3, 4, 5, 6, 7, 3],
-            }
+                    name: 'Pemantauan Perbaikan',
+                    data: [4, 6, 8, 4, 5, 6, 7, 8, 8, 9, 3, 4, 5, 6, 7, 3],
+                }
                 , {
-                name: 'Pencabutan Sanksi',
-                data: [4, 6, 6, 9, 8, 7, 6, 3, 2, 1, 8, 5, 4, 3, 6, 7],
-                colors: "#B2B0D2",
-            }],
+                    name: 'Pencabutan Sanksi',
+                    data: [4, 6, 6, 9, 8, 7, 6, 3, 2, 1, 8, 5, 4, 3, 6, 7],
+                    colors: "#B2B0D2",
+                },],
             options: {
                 chart: {
                     height: 150,

components/Riwayat/TableRadar.js

@@ -0,0 +1,198 @@
+import React, { Component } from 'react';
+import ContentWrapper from '@/components/Layout/ContentWrapper';
+import { Row, Col, Card, CardHeader, CardBody, Table } from 'reactstrap';
+
+
+function TableRadar() {
+    return (
+        <Col xl="12">
+            <Card className="card-default">
+                {/* <CardHeader>Context Classes</CardHeader> */}
+                <CardBody>
+                    <Table responsive bordered>
+                        <thead>
+                            <tr>
+                                <th>Menu\Wilayah LLDikti</th>
+                                <th>I</th>
+                                <th>II</th>
+                                <th>III</th>
+                                <th>IV</th>
+                                <th>V</th>
+                                <th>VI</th>
+                                <th>VII</th>
+                                <th>VIII</th>
+                                <th>IX</th>
+                                <th>X</th>
+                                <th>XI</th>
+                                <th>XII</th>
+                                <th>XIII</th>
+                                <th>XIV</th>
+                                <th>XV</th>
+                                <th>XVI</th>
+                            </tr>
+                        </thead>
+                        <thead>
+                            <tr style={{
+                                backgroundColor: '#80b1ff',
+                                color: "black",
+                            }}>
+                                <th>Penjadwalan Evaluasi</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                            <tr style={{
+                                backgroundColor: '#de8383',
+                                color: "black",
+                            }}>
+                                <th>Pemeriksaan</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-444</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                            <tr style={{
+                                backgroundColor: '#fdda80',
+                                color: "black",
+                            }}>
+                                <th>Sanksi</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                            <tr style={{
+                                backgroundColor: '#cfab80',
+                                color: "black",
+                            }}>
+                                <th>Keberatan</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                            <tr style={{
+                                backgroundColor: '#ef90df',
+                                color: "black",
+                            }}>
+                                <th>Banding</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                            <tr style={{
+                                backgroundColor: '#80df89',
+                                color: "black",
+                            }}>
+                                <th>Pemantauan perbaikan</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                            <tr style={{
+                                backgroundColor: '#a3d4d1',
+                                color: "black",
+                            }}>
+                                <th>Pencabutan Sanksi</th>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                                <td>-</td>
+                            </tr>
+                        </thead>
+                    </Table>
+                </CardBody>
+            </Card>
+        </Col>
+    )
+}
+
+export default TableRadar
+

components/Sanksi/Ringkasan.js

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
 import Scrollable from "@/components/Common/Scrollable";
 import { Card, Row, Col, Table, FormGroup } from "reactstrap";
+import moment from "moment";
 
 function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 	return (
@@ -65,31 +65,31 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 							<tbody>
 								{dataPelanggaran
 									? dataPelanggaran.map((e, i) => (
-											<tr key={e._id}>
-												<td>{++i}</td>
-												<td>
-													<div className="media align-items-center">
-														<div className="media-body d-flex">
-															<div>
-																<p>{e.pelanggaran}</p>
-																<p>TMT : {e.tmt_bulan} Bulan</p>
-																<p>Level Pelanggaran : {e.label_sanksi}</p>
-															</div>
+										<tr key={e._id}>
+											<td>{++i}</td>
+											<td>
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<p>{e.pelanggaran}</p>
+															<p>TMT : {e.tmt_bulan} Bulan</p>
+															<p>Level Pelanggaran : {e.label_sanksi}</p>
 														</div>
 													</div>
-												</td>
-												<td>
-													<div className="media align-items-center">
-														<div className="media-body d-flex">
-															<div>
-																<p>{e.sanksi}</p>
-																<p>Keterangan : {e.keterangan_sanksi}</p>
-															</div>
+												</div>
+											</td>
+											<td>
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<p>{e.sanksi}</p>
+															<p>Keterangan : {e.keterangan_sanksi}</p>
 														</div>
 													</div>
-												</td>
-											</tr>
-									  ))
+												</div>
+											</td>
+										</tr>
+									))
 									: ""}
 							</tbody>
 						</Table>
@@ -112,6 +112,40 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								<strong>{dataUpload ? dataUpload.keterangan : ""}</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>
+							</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>
 						<FormGroup row>
 							<Col md="4">Surat Sanksi:</Col>
 							<Col md="8">
@@ -120,17 +154,17 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 										<tbody>
 											{dataUpload
 												? dataUpload.files.map((e) => (
-														<tr>
-															<td>
-																<em className="fa-lg far fa-file-code"></em>
-															</td>
-															<td>
-																<a className="text-muted" href={e.preview} download={e.name}>
-																	{e.name}
-																</a>
-															</td>
-														</tr>
-												  ))
+													<tr>
+														<td>
+															<em className="fa-lg far fa-file-code"></em>
+														</td>
+														<td>
+															<a className="text-muted" href={e.preview} download={e.name}>
+																{e.name}
+															</a>
+														</td>
+													</tr>
+												))
 												: ""}
 										</tbody>
 									</table>

components/Sanksi/TableLaporan.js

@@ -58,7 +58,7 @@ function TableLaporan({ listData }) {
 															query: { id: data.sanksi || data._id },
 														}}
 													>
-														<Button className="color-3e3a8e" color>
+														<Button className="color-3e3a8e btn-login" color>
 															<span className="font-color-white">
 																{data.sanksi ? "Detail" : "Proses Sanksi"}
 															</span>

components/Sanksi/TablePenetapanSanksi.js

@@ -53,7 +53,7 @@ export class TablePenetapanSanksi extends Component {
 											<div className="media-body d-flex">
 												<div>
 													<p>{jp.pelanggaran}</p>
-													<p>TMT : {jp.tmt_bulan} Bulan</p>
+													{/* <p>TMT : {jp.tmt_bulan} Bulan</p> */}
 													<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
 												</div>
 											</div>

components/Sanksi/TmtDate.js

@@ -0,0 +1,77 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import FormGroup from "reactstrap/lib/FormGroup";
+import ms from "ms";
+import { Component } from "react";
+import { addDays, addMonths } from 'date-fns';
+
+class TmtDate extends Component {
+	constructor(props) {
+		super(props);
+		const tmt_awal = new Date();
+		this.state = {
+			startDay: tmt_awal,
+			maxDay: "",
+			isiTmt: "",
+			awalsanksi: "",
+			akhirsanksi: "",
+		};
+	}
+	handleAwalSanksi = (awalsanksi) => {
+		this.setState({ awalsanksi });
+		// this.props.setUploadSuratSanksi(this.state);
+	};
+	handleAkhirSanksi = (akhirsanksi) => {
+		this.setState({ akhirsanksi });
+		// this.props.setUploadSuratSanksi(this.state);
+	};
+	render() {
+		return (
+			<div>
+				<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={(e) => {
+								this.handleAwalSanksi(e);
+								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
+							}}
+							selectsStart
+							startDate={this.state.awalsanksi}
+							dateFormat="dd/MM/yyyy"
+							maxDate={this.state.startDay}
+							placeholderText="Dari Tanggal"
+							showDisabledMonthNavigation
+						/>
+					</span>
+					<span className="col-sm-3 float-right">
+						<DatePicker
+							selected={this.state.akhirsanksi}
+							onChange={(e) => {
+								this.handleAkhirSanksi(e);
+								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
+							}}
+							selectsEnd
+							endDate={this.state.akhirsanksi}
+							dateFormat="dd/MM/yyyy"
+							minDate={this.state.awalsanksi}
+							maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
+							placeholderText="Sampai tanggal"
+							showDisabledMonthNavigation
+						/>
+					</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>
+			</div>
+		);
+	}
+}
+
+export default TmtDate;

components/Sanksi/UploadSurat.js

@@ -1,5 +1,11 @@
 import React, { Component } from "react";
 import { Row, Col, Input, FormGroup } from "reactstrap";
+import Select from "react-select";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import ms from "ms";
+import TmtDate from "./TmtDate";
+import { addDays, addMonths } from 'date-fns';
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -15,13 +21,63 @@ class DropzoneWrapper extends Component {
 	}
 }
 
+const data = [
+	{
+		value: "Sanksi Administratif Sedang",
+		// label_sanksi: "- Sanksi Administratif ringan"
+	},
+	{
+		sanksi: "Penghentian Pembinaan PT",
+		value: "Penghentian Pembinaan PT",
+		label_sanksi: "- Sanksi Administratif Berat",
+	},
+	{
+		sanksi: "Pencabutan Izin Perguruan Tinggi Swasta",
+		value: "Pencabutan Izin Perguruan Tinggi Swasta",
+		label_sanksi: "- Sanksi Administratif Berat",
+	},
+	{
+		sanksi: "Penghentian Pembinaan Program Studi",
+		value: "Penghentian Pembinaan Program Studi",
+		label_sanksi: "- Sanksi Administratif Berat",
+	},
+	{
+		sanksi: "Pencabutan Izin Program Studi",
+		value: "Pencabutan Izin Program Studi",
+		label_sanksi: "- Sanksi Administratif Berat",
+	},
+	{
+		sanksi: "Pembubaran Perguruan Tinggi Negeri",
+		value: "Pembubaran Perguruan Tinggi Negeri",
+		label_sanksi: "- Sanksi Administratif Berat",
+	},
+];
+
+const listSanksi = data.map((d) => ({
+	value: d.value,
+	label: d.sanksi,
+	label_sanksi: d.label_sanksi,
+}));
+const formatOptionLabel = ({ value, sanksi, label_sanksi }) => (
+	<div style={{ display: "flex" }}>
+		<span className="">{value}</span>
+		<div style={{ marginLeft: "10px", color: "#adaca8" }}>{label_sanksi}</div>
+	</div>
+);
 export class UploadSurat extends Component {
 	constructor(props) {
 		super(props);
+		const tmt_awal = new Date();
 		this.state = {
 			files: [],
 			nomorSanksi: "",
 			keterangan: "",
+			listSanksi: "",
+			startDay: tmt_awal,
+			maxDay: "",
+			isiTmt: "",
+			awalsanksi: "",
+			akhirsanksi: "",
 		};
 	}
 
@@ -68,13 +124,28 @@ export class UploadSurat extends Component {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
+	setListSanksi = (ls) => {
+		this.setState({ listSanksi: ls.target.value });
+		this.props.setUploadSuratSanksi(this.state);
+	};
+	handleChangeListSanksi = (listSanksi) => {
+		this.setState({ listSanksi });
+		this.props.setUploadSuratSanksi(this.state);
+	};
+
+	handleTmtDate = (startDate) => {
+		this.setState({ startDate });
+		this.props.setUploadSuratSanksi(this.state);
+	};
 	render() {
 		const { files } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<div md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-left">{index + 1}.	{file.name}</span>
+				<span className="text-left">
+					{index + 1}. {file.name}
+				</span>
 			</div>
 		));
 		return (
@@ -92,8 +163,71 @@ export class UploadSurat extends Component {
 						{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
 					</div>
 				</FormGroup>
+				{/* <TmtDate setTmt={this.handleTmtDate} /> */}
+				{/* <TmtDate /> */}
+
+
+
+				<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.props.setUploadSuratSanksi(this.state);
+							}}
+							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.props.setUploadSuratSanksi(this.state);
+							}}
+							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>
+					<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}
+							formatOptionLabel={formatOptionLabel}
+							isMulti
+							onChange={(e) => {
+								this.handleChangeListSanksi(e);
+							}}
+						/>
+					</div>
+				</FormGroup>
+
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi<span className="text-danger">*</span>:</label>
+					<label className="col-md-2 col-form-label">
+						Dokumen Surat Sanksi<span>: &nbsp;</span><span className="text-danger">*</span>
+					</label>
 					<div className="col-md-10">
 						<DropzoneWrapper className="" onDrop={this.onDrop}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
@@ -101,11 +235,16 @@ export class UploadSurat extends Component {
 									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 										<input {...getInputProps()} />
 										<div className="dropzone-style-1">
-											<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
-												<div className="text-center fa-2x icon-cloud-upload mr-2 ">
-													<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
-												</div>
-											}
+											<div className="center-ver-hor dropzone-previews flex">
+												{this.state.files.length > 0 ? (
+													<Row>
+														<span className="text-left">{thumbs}</span>
+													</Row>
+												) : (
+													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
+													</div>
+												)}
 											</div>
 										</div>
 										<div className="d-flex align-items-center">
@@ -120,9 +259,7 @@ export class UploadSurat extends Component {
 							}}
 						</DropzoneWrapper>
 						{/* <span className="form-text">Multiple files upload</span> */}
-						<p className="mrgn-top-5">
-							Ukuran setiap dokumen maksimal 15mb
-						</p>
+						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
 			</form>

package-lock.json

@@ -4462,6 +4462,11 @@
         "jquery": ">=1.7"
       }
     },
+    "date-fns": {
+      "version": "2.29.2",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.2.tgz",
+      "integrity": "sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -8956,6 +8961,40 @@
         "shallowequal": "^1.1.0"
       }
     },
+    "react-datepicker": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.0",
+        "react-popper": "^2.2.5"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        },
+        "react-onclickoutside": {
+          "version": "6.12.2",
+          "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
+          "integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA=="
+        },
+        "react-popper": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+          "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+          "requires": {
+            "react-fast-compare": "^3.0.1",
+            "warning": "^4.0.2"
+          }
+        }
+      }
+    },
     "react-datetime": {
       "version": "2.16.3",
       "resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-2.16.3.tgz",

package.json

@@ -87,6 +87,7 @@
     "react-color": "2.19.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-data-grid": "6.1.0",
+    "react-datepicker": "^4.8.0",
     "react-datetime": "2.16.3",
     "react-dnd": "6.0.0",
     "react-dnd-html5-backend": "6.0.0",

pages/app/banding/detail.js

@@ -168,7 +168,7 @@ class JawabanBanding extends Component {
 						<span className="font-color-white">Jawaban Permohonan Banding</span>
 						<div className="ml-auto">
 							<Link href="/app/banding">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
@@ -271,7 +271,7 @@ class JawabanBanding extends Component {
 															</FormGroup>
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color className="color-3e3a8e" type="submit">
+																	<Button color className="color-3e3a8e btn-login" type="submit">
 																		<span className="font-color-white">Simpan</span>
 																	</Button>
 																</div>

pages/app/keberatan/detail.js

@@ -173,7 +173,7 @@ class DetailKeberatan extends Component {
 						<span className="font-color-white">Permohonan Keberatan</span>
 						<div className="ml-auto">
 							<Link href="/app/keberatan">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
@@ -297,7 +297,7 @@ class DetailKeberatan extends Component {
 													<div className="row-xl-10"> */}
 															<FormGroup row>
 																<div className="col-xl-10">
-																	<Button color className="color-3e3a8e" type="submit">
+																	<Button color className="color-3e3a8e btn-login" type="submit">
 																		<span className="font-color-white">Simpan</span>
 																	</Button>
 																</div>

pages/app/laporan-delegasi/detail.js

@@ -45,7 +45,7 @@ class DetailPelaporan extends Component {
 						<span className="font-color-white">Detail Laporan Delegasi</span>
 						<div className="ml-auto">
 							<Link href="/app/laporan-delegasi">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>

pages/app/pelaporan/detail.js

@@ -39,7 +39,7 @@ class DetailPelaporan extends Component {
 						<span className="font-color-white">Detail Pelaporan</span>
 						<div className="ml-auto">
 							<Link href="/app/pelaporan">
-								<Button className="color-3e3a8e" color>
+								<Button className="btn-login" color>
 									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>

pages/app/pelaporan/index.js

@@ -81,17 +81,11 @@ class Pelaporan extends Component {
 					</Link>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} excel={this.excel} /> : <Loader />}</Col>
+					<Col lg="4">
+						{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} excel={this.excel} /> : <Loader />}
+					</Col>
 					<Col lg="8">
-						<div className="mb-3 d-flex">
-							{/* <div className="margin-left-auto">
-								<Link href="/app/pelaporan/search">
-									<Button className="color-3e3a8e" color="purple">Laporan Baru</Button>
-								</Link>
-							</div> */}
-							{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
-						</div>
-
+						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pemantauan-perbaikan/detail.js

@@ -41,7 +41,7 @@ class PemantauanDokumen extends Component {
 						</span>
 						<div className="ml-auto">
 							<Link href="/app/pemantauan-perbaikan">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">
 										&lt; Kembali
 									</span>

pages/app/pencabutan-sanksi/detail.js

@@ -170,7 +170,7 @@ class JawabanPencabutanSanksi extends Component {
 						</span>
 						<div className="ml-auto">
 							<Link href="/app/pencabutan-sanksi">
-								<Button className="color-3e3a8e" color>
+								<Button className="color-3e3a8e btn-login" color>
 									<span className="font-color-white">
 										&lt; Kembali
 									</span>

pages/app/perbaikan/detail.js

@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Link from "next/link";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import Riwayat from "@/components/DocPerbaikan/Riwayat";
+import { getOneSanksi } from "@/actions/sanksi";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
+import { getPT } from "@/actions/PT";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+
+class PemantauanDokumen extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+			pt: null,
+		};
+	}
+
+	static getInitialProps = async ({ query }) => ({ query });
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const sanksi = await getOneSanksi(token, query.id);
+		const pt = sanksi.data.laporan.pt;
+		this.setState({ sanksi, pt });
+	};
+
+	render() {
+		const { sanksi, pt } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<span className="font-color-white">
+							Detail Pemantauan Perbaikan
+						</span>
+						<div className="ml-auto">
+							<Link href="/app/perbaikan">
+								<Button className="color-3e3a8e btn-login" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						{sanksi.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data} />
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
+						<Col xl="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+					</Row>
+					<Row>
+						<Col>{sanksi.data && <Riwayat data={sanksi.data.perbaikan} />}</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(PemantauanDokumen);

pages/app/perbaikan/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+
+class PemantauanPerbaikan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const sanksi = await getSanksi(token, { perbaikan: true });
+		this.setState({ sanksi });
+	};
+
+	render() {
+		const { sanksi } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Pemantauan Perbaikan
+					</span>
+				</div>
+				<Row>
+					{/* <Col lg="4">
+						<CaseProgress />
+					</Col> */}
+					<Col lg="12">{sanksi.data ? <TableSanksi listData={sanksi.data} to="/app/perbaikan/detail" linkName="Detail" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(PemantauanPerbaikan);

pages/app/pt/jawaban-pencabutan-sanksi/detail.js

@@ -98,7 +98,11 @@ class DetailJawabanPencabutanSanksi extends Component {
 															query: { noSanksi: sanksi.data[0].sanksi.no_sanksi },
 														}}
 													>
-														<Button color="primary">Perbaiki Dokumen</Button>
+														<Button color className="btn-login color-3e3a8e">
+															<span className="font-color-white">
+																Dokumen Perbaikan
+															</span>
+														</Button>
 													</Link>
 												)}
 											</Col>

pages/app/riwayat/index.js

@@ -16,6 +16,7 @@ import Maps from "@/components/Riwayat/Maps"
 import ChartRadar from "../../../components/Riwayat/ChartRadarBelum";
 import ChartRadarBelum from "../../../components/Riwayat/ChartRadarBelum";
 import ChartRadarSudah from "../../../components/Riwayat/ChartRadarSudah";
+import TableRadar from "../../../components/Riwayat/TableRadar";
 
 
 class Riwayat extends Component {
@@ -38,10 +39,9 @@ class Riwayat extends Component {
           <Col lg="6">
             <ChartRadarSudah />
           </Col>
-          <Col lg="12">
-            <ChartData />
-            <TableRiwayat />
-          </Col>
+          <TableRadar />
+          <ChartData />
+          <TableRiwayat />
         </Row>
       </ContentWrapper>
     );

pages/app/sanksi/proses.js

@@ -140,7 +140,7 @@ class ProsesSanksi extends Component {
 												})}
 												onClick={this.toggleStep("3")}
 											>
-												<h4 className="text-left my-3">3. Penetapan Sanksi</h4>
+												<h4 className="text-left my-3">3. Penetapan Jenis Pelanggaran</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -151,7 +151,7 @@ class ProsesSanksi extends Component {
 												})}
 												onClick={this.toggleStep("4")}
 											>
-												<h4 className="text-left my-3">4. Nomor Surat Keputusan Sanksi</h4>
+												<h4 className="text-left my-3">4. Penetapan Sanksi</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -176,7 +176,7 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("2")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("2")}>
 													<span className="font-color-white">
 														Next
 													</span>
@@ -198,12 +198,12 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="color-3e3a8e" onClick={this.toggleStep("1")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("1")}>
 													<span className="font-color-white">
 														Previous
 													</span>
 												</Button>
-												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("3")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("3")}>
 													<span className="font-color-white">
 														Next
 													</span>
@@ -212,17 +212,17 @@ class ProsesSanksi extends Component {
 										</TabPane>
 										<TabPane tabId="3">
 											<div className="pt-3 mb-3">
-												<h2>Penetapan Sanksi</h2>
+												<h2>Penetapan Jenis Pelanggaran</h2>
 												<TablePenetapanSanksi setCheckedData={this.setCheckedData} />
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button colorclassName="color-3e3a8e" onClick={this.toggleStep("2")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("2")}>
 													<span className="font-color-white">
 														Previous
 													</span>
 												</Button>
-												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("4")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("4")}>
 													<span className="font-color-white">
 														Next
 													</span>
@@ -231,17 +231,17 @@ class ProsesSanksi extends Component {
 										</TabPane>
 										<TabPane tabId="4">
 											<div className="pt-3 mb-3">
-												<h2>Nomor Surat Keputusan Sanksi</h2>
+												<h2>Penetapan Sanksi</h2>
 												<UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} />
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="color-3e3a8e" onClick={this.toggleStep("3")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
 													<span className="font-color-white">
 														Previous
 													</span>
 												</Button>
-												<Button className="ml-auto color-3e3a8e" color onClick={this.toggleStep("5")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("5")}>
 													<span className="font-color-white">
 														Next
 													</span>
@@ -255,12 +255,12 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color="secondary" className="color-3e3a8e" onClick={this.toggleStep("4")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
 													<span className="font-color-white">
 														Previous
 													</span>
 												</Button>
-												<Button className="ml-auto color-3e3a8e" color onClick={this.done}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.done}>
 													<span className="font-color-white">
 														Done
 													</span>

pages/laporan/new/index.js

@@ -75,12 +75,12 @@ const laporanSchema = Yup.object().shape({
   keterangan: Yup.string()
     .min(3, "Minimal 3 huruf")
     .max(200, "Maksimal 200 huruf")
-    .required(""),
+    .required("Wajib diisi"),
   email: Yup.string().email().notRequired(),
   pelanggaran_id: Yup.array()
     .min(1, "Minimal terdapat 1 jenis pelanggaran")
-    .required(""),
-  pt_id: Yup.string().required(""),
+    .required("Wajib diisi"),
+  pt_id: Yup.string().required("Wajib diisi"),
   foto: Yup.array()
     .notRequired()
     .test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig)
@@ -144,11 +144,19 @@ class App extends Component {
       confirm: false,
       msgError: [],
       modal: false,
+      modalNotnoHP: false,
       user: {},
       kode: "",
       error: null,
       data: {},
       token: "",
+      loading: false,
+      disablecancel: false,
+      disablekirim: false,
+      disablekirim2: false,
+      disablekirim3: false,
+      loading2: false,
+      kodeVerifNotOK: false,
     };
   }
 
@@ -159,9 +167,21 @@ class App extends Component {
     this.setState({ pelanggaran });
   };
 
-  toggleModal = () => {
-    this.setState({ modal: !this.state.modal });
+  toggleModal = (no_hp = null) => {
+    if (no_hp) {
+      this.setState({ modal: !this.state.modal })
+    } else {
+      this.setState({ modalNotnoHP: !this.state.modalNotnoHP });
+    }
   };
+  // disableKirim = (modalNotnoHP = false) => {
+  //   if (modalNotnoHP == false) {
+  //     this.setState({ disableKirim: true })
+
+  //   } else {
+  //     this.setState({ disableKirim: false })
+  //   }
+  // }
 
   optionsJenisPelanggaran = (pelanggaran) => {
     return pelanggaran.data.map((e) => ({
@@ -209,6 +229,7 @@ class App extends Component {
     }
 
     const toastid = toast.loading("Please wait...");
+
     const success = await createLaporanPublic(formdata);
     if (!success) {
       swal.fire({
@@ -241,18 +262,16 @@ class App extends Component {
       });
     }
 
-    // const toastid = toast.loading("Please wait...");
+    this.setState({ loading: true });
     const success = await createLaporanPublic(token, formdata);
     if (!success) {
-      // toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
       swal.fire({
         title: "Kode verifikasi salah",
         icon: "error",
         confirmButtonColor: "#3e3a8e",
       });
-      this.setState({ error: "Kode verifikasi tidak valid" });
+      this.setState({ error: "Kode verifikasi tidak valid", kodeVerifNotOK: true });
     } else {
-      // toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
       swal.fire({
         title: "Data berhasil dikirim",
         icon: "success",
@@ -261,6 +280,8 @@ class App extends Component {
       this.toggleModal();
       Router.push("/laporan/new");
     }
+    this.setState({ loading: false });
+
   };
 
   createUser = async (data) => {
@@ -278,6 +299,7 @@ class App extends Component {
 
   render() {
     const { selectedJenis, pelanggaran } = this.state;
+
     return (
       <div>
         <ToastContainer />
@@ -327,7 +349,7 @@ class App extends Component {
                     }}
                     validationSchema={laporanSchema}
                     onSubmit={async (data) => {
-                      this.toggleModal();
+                      this.toggleModal(data.no_hp);
                       this.setState({ data, no_laporan: data.no_laporan });
                       this.setState({ data, no_hp: data.no_hp });
                       const user = await this.createUser(data);
@@ -363,7 +385,12 @@ class App extends Component {
                         <div className="col-md-10">
                           <Field name="no_hp">
                             {({ field, form }) => (
-                              <Input type="tel" {...field} />
+                              <Input type="tel" id="phone"
+                                name="phone"
+                                className="invalid-mv"
+                                pattern="[0-9]{10,13}"
+                                // title="Nomor telepon tidak valid"
+                                {...field} />
                             )}
                           </Field>
                           <ErrorMessage
@@ -377,7 +404,7 @@ class App extends Component {
                         <label className="col-md-2 col-form-label">Email</label>
                         <div className="col-md-10">
                           <Field name="email">
-                            {({ field }) => <Input type="email" {...field} />}
+                            {({ field }) => <Input type="email" className="invalid-mv" {...field} />}
                           </Field>
                           <ErrorMessage
                             name="email"
@@ -449,10 +476,8 @@ class App extends Component {
                       <div class="header-1">
                         <h2 class="card-title-1">
                           Detail Laporan
-                          {/* <span className="font-20">(wajib diisi)</span> */}
                         </h2>
                       </div>
-                      {/* <p className="lead bb">Detail Laporan</p> */}
                       <FormGroup row>
                         <label className="col-md-2 col-form-label">
                           Nomor Pelaporan
@@ -602,7 +627,7 @@ class App extends Component {
                       <FormGroup row>
                         <div className="posisi-btn-1 btn-radius">
                           <Button
-                            className="button-kirimlaporan"
+                            className="button-kirimlaporan btn-login"
                             color
                             type="submit"
                           >
@@ -623,12 +648,13 @@ class App extends Component {
               <ModalBody>
                 <FormGroup>
                   <div className="">
-                    <label className="modals-verifikasi font-color-white">
-                      Masukkan Kode Verifikasi
+                    <label className=" font-weight-bold h6">
+                      Masukkan Kode Verifikasi :
                     </label>
                     <div className="border-2">
                       <Input
                         className="border-2"
+                        invalid={this.state.kodeVerifNotOK}
                         onChange={(e) =>
                           this.setState({ kode: e.target.value })
                         }
@@ -646,7 +672,7 @@ class App extends Component {
                     selanjutnya.
                   </p>
                   <div className="modals">
-                    <label className="modals font-color-white font-20 ">
+                    <label className="modals  text-white font-20 ">
                       Nomor Laporan : {this.state.no_laporan}
                     </label>
                     <CopyToClipboard
@@ -670,21 +696,49 @@ class App extends Component {
                 </FormGroup>
               </ModalBody>
               <ModalFooter>
+
                 <Button
-                  className="color-3e3a8e"
+                  className=" float-lg-left mr-auto btn-login"
                   color
+                  disabled={this.state.disablekirim3}
                   onClick={async () => {
+                    this.setState({ disablekirim2: true, disablecancel: true, loading2: true })
                     await this.createLaporan(this.state.token);
+                    this.setState({ disablekirim2: false, disablecancel: false, loading2: false })
+
                   }}
                 >
-                  <span className="font-color-white">
-                    Buat Laporan Tanpa Kode Verifikasi
-                  </span>
+                  {this.state.loading2 ?
+                    (
+                      <div class="d-flex justify-content-center">
+                        <span
+                          class="spinner-border spinner-border-sm text-white"
+                          role="status"
+                        ></span>
+                        <span className="font-color-white">
+                          &nbsp; Diproses...
+                        </span>
+                      </div>
+                    ) : (
+                      <span className="font-color-white">
+                        Buat Laporan Tanpa Kode Verifikasi
+                      </span>
+                    )}
+                </Button>
+                <Button
+                  className="bg-danger"
+                  color
+                  disabled={this.state.disablecancel}
+                  onClick={() => this.setState({ modal: false })}
+                >
+                  <span className="font-color-white">Cancel</span>
                 </Button>
                 <Button
-                  className="color-3e3a8e"
+                  className="bg-success float-lg-right"
                   color
+                  disabled={this.state.disablekirim2}
                   onClick={async () => {
+                    this.setState({ disablekirim3: true, disablecancel: true })
                     if (this.state.kode) {
                       await this.createLaporan(
                         this.state.token,
@@ -693,6 +747,7 @@ class App extends Component {
                     } else {
                       this.setState({ error: "Kode verifikasi harus diisi" });
                     }
+                    this.setState({ disablekirim3: false, disablecancel: false })
                   }}
                 >
                   <span className="font-color-white">Kirim</span>
@@ -700,8 +755,70 @@ class App extends Component {
               </ModalFooter>
             </form>
           </Modal>
+
+          <Modal isOpen={this.state.modalNotnoHP}>
+            <form className="form-horizontal">
+              <ModalBody>
+                <FormGroup>
+                  <p className="font-color-black">
+                    NOTE : Diharapkan pelapor dapat mencatat ataupun mengingat
+                    nomor laporan di bawah ini untuk mempermudah proses
+                    selanjutnya.
+                  </p>
+                  <div className="modals">
+                    <label className="modals font-color-white font-20 ">
+                      Nomor Laporan : {this.state.no_laporan}
+                    </label>
+                    <CopyToClipboard
+                      text={this.state.no_laporan}
+                      options={{ asHtml: true }}
+                    >
+                      <Button color className="btn-verif">
+                        <img
+                          src="/static/img/icon-copy.png"
+                          alt="icon-copy"
+                          width="20"
+                        />
+                      </Button>
+                    </CopyToClipboard>
+                  </div>
+                  {this.state.error && (
+                    <div className="form-text text-danger">
+                      {this.state.error}
+                    </div>
+                  )}
+                </FormGroup>
+              </ModalBody>
+              <ModalFooter>
+                <Button
+                  className="bg-danger"
+                  color
+                  disabled={this.state.disablecancel}
+                  // disabled={true}
+                  onClick={() => this.setState({ modalNotnoHP: false })}
+                >
+                  <span className="font-color-white">Cancel</span>
+                </Button>
+                <Button
+                  className="btn-login bg-success"
+                  color
+                  disabled={this.state.disablekirim}
+                  onClick={async () => {
+                    this.setState({ disablecancel: true })
+                    await this.createLaporan(this.state.token);
+                    this.setState({ disablecancel: false })
+
+                  }}
+                >
+                  <span className="font-color-white">
+                    Kirim
+                  </span>
+                </Button>
+              </ModalFooter>
+            </form>
+          </Modal>
         </ContentWrapper>
-      </div>
+      </div >
     );
   }
 }

pages/pemantauan.js

@@ -169,7 +169,7 @@ class App extends Component {
                       <FormGroup row>
                         <div className="posisi-btn-1 btn-radius">
                           <Button
-                            className="button-lihatpemantauan"
+                            className="button-lihatpemantauan btn-login"
                             color
                             block
                             type="submit"

pages/pt/jawaban-pencabutan-sanksi/detail.js

@@ -104,7 +104,11 @@ class DetailJawabanPencabutanSanksi extends Component {
 															query: { id: sanksi.data._id },
 														}}
 													>
-														<Button color="primary">Perbaiki Dokumen</Button>
+														<Button color className="btn-login color-3e3a8e">
+															<span className="font-color-white">
+																Dokumen Perbaikan
+															</span>
+														</Button>
 													</Link>
 												)}
 											</Col>

styles/app/layout/sidebar.scss

@@ -98,10 +98,14 @@ $scrollbar-wd:                    17px;
         &.active,
         &.open {
             &,
-            >a,
+            >a{
+                background-color: #d8d8e8;
+                font-weight: bold;
+            }
             >.nav-item,
             .sidebar-nav {
-                background-color: #d8d8e8;
+                
+                background-color: #ffffff;
                 color: $sidebar-item-color-active;
             }
             >.nav-item>em,
@@ -146,7 +150,7 @@ $tablet-landscape: 1025px;
             display: block;
             position: relative;
             padding: 10px 20px;
-            padding-left: 53px;
+            padding-left: 45px;
             font-weight: normal;
             background-color: transparent !important;
             color: $sidebar-item-color;

styles/bootstrap/_buttons.scss

@@ -3,6 +3,8 @@
 //
 // Base styles
 //
+$colorbutton : #3e3a8e;
+$colortheme : #3e3a8e;
 
 .btn {
   display: inline-block;
@@ -14,7 +16,7 @@
   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,
@@ -196,21 +198,32 @@ input[type="button"] {
   padding-bottom: 0;
   margin-right: 20px;
   margin-top: 3%;
-  background: #3e3a8e;
+  background: $colorbutton;
   display: inline;
   border-radius: 7px;
-}
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}}
 .btn-labeled-2 {
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 3%;
-  background: #3e3a8e;
+  background:$colorbutton;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}
 }
 .btn-login {
-  background: #3e3a8e;
+  background: $colorbutton;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.8;
 }
+} //jangan di ubah
 .navbar-color {
-  background-color: #3e3a8e;
+  background-color: $colortheme;
 }
 .posisi-btn-1 {
   position: relative;
@@ -227,8 +240,12 @@ input[type="button"] {
 }
 .btn-colorpenjadwalan {
   // display: inline-block;
-  background-color: #3e3a8e;
-  height: 35px;
+  background-color:$colorbutton;
+  height: 35px;   
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}
 }
 .text-btn-penjadwalan-1 {
   letter-spacing: 0.02em;
@@ -256,11 +273,15 @@ input[type="button"] {
 }
 .btn-header {
   display: inline-block;
-  background-color: #3e3a8e;
+  background-color: $colorbutton;
   width: auto;
   height: 34px;
   margin-left: 5px;
   border: 0;
+  transition: ease background-color 250ms;
+  &:hover {
+    background-color: $colorbutton; opacity: 0.9;
+}
 }
 .margin-l-5 {
   margin-right: 5px;
@@ -268,7 +289,7 @@ input[type="button"] {
 }
 .btn-radius .button-kirimlaporan {
   border: 0;
-  background-color: #3e3a8e;
+  background-color: $colorbutton;
 }
 .btn-radius .button-lihatpemantauan {
   border: 0;
@@ -282,8 +303,8 @@ input[type="button"] {
   color: #3e3a8e;
 }
 .margin-left-auto {
-  float: right;
-  margin-top: -3px;
+  float: left;
+  margin-right: auto;
 }
 .icon-laporan-baru {
   margin-left: 5px;
@@ -292,7 +313,7 @@ input[type="button"] {
 }
 .modals {
   // height: 40px;
-  background-color: #3e3a8e;
+  background-color: $colortheme;
   padding: 5px;
   margin-bottom: -2px;
   border-radius: 5px;
@@ -303,9 +324,10 @@ input[type="button"] {
   border-radius: 5px;
 }
 .modals-verifikasi {
-  background-color: #3e3a8e;
+  background-color: transparent;
   padding: 5px;
   border-radius: 5px;
+  color: black;
 }
 .btn-verif {
   background-color: Transparent;

styles/bootstrap/_card.scss

@@ -394,3 +394,11 @@ float: right;
   justify-content: center;
   height: 100%;
 }
+
+.invalid-mv:focus:invalid{
+  border: solid 1px red;
+  // background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E") no-repeat 95% 50% ;
+}
+.invalid-mv:focus:valid{
+  border: solid 1px green;
+}