commit 02/11

components/Main/Timeline.js

@@ -4,7 +4,6 @@ import { useSelector } from "react-redux";
 function Timeline({ data, noFile = false, noJadwal = false }) {
 	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
 	const user = useSelector((state) => state.user);
-	console.log(data)
 	return (
 		<ul className="timeline-alt">
 			{date.map((value) => (

components/Pelaporan/TableLaporan.js

@@ -47,7 +47,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                         <div>
                                                             <p style={{ display: "none" }}>{data.createdAt}</p>
                                                             <h4>{data.no_laporan}</h4>
-                                                            <p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
+                                                            <p>{moment(data?.createdAt).format("DD-MM-YYYY")}</p>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -58,10 +58,10 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
                                                     <div className="media align-items-center">
                                                         <div className="media-body d-flex">
                                                             <div>
-                                                                <h4 className="m-0">{data.pt.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
+                                                                <h4 className="m-0">{data.pt?.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
                                                                 {/* <h4 className="m-0">{data.pt.nama}</h4> */}
                                                                 {/* <p className="w-105">{data.keterangan.length > 150 ? data.keterangan.substring(0, 150) + "..." : data.keterangan}</p> */}
-                                                                <p className="w-105">{data.keterangan}</p>
+                                                                <p className="w-105">{data?.keterangan}</p>
                                                             </div>
                                                         </div>
                                                     </div>

components/Sanksi/Ringkasan.js

@@ -27,7 +27,7 @@ export class Ringkasan extends Component {
 		const saveData = getDataSave.data?.penetapanSanksi;
 		this.setState(saveData)
 	}
-		handleOpenAlert = () => {
+	handleOpenAlert = () => {
 		Swal.fire({
 			icon: 'error',
 			title: 'Oops...',
@@ -39,6 +39,7 @@ export class Ringkasan extends Component {
 
 	render() {
 		const { dataLaporan, dataPelanggaran, dataUpload } = this.props
+		console.log(dataUpload)
 		return (
 			<>
 				<Row>
@@ -140,13 +141,13 @@ export class Ringkasan extends Component {
 							<FormGroup row>
 								<Col md="4">Nomor Surat:</Col>
 								<Col md="8">
-									<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
+									{dataUpload?.nomorSanksi ? (<strong>{dataUpload.nomorSanksi}</strong>) : (<span className="text-danger text-bold">Belum diisi</span>)}
 								</Col>
 							</FormGroup>
 							<FormGroup row>
 								<Col md="4">Keterangan:</Col>
 								<Col md="8">
-									<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
+									{dataUpload?.keterangan ? (<strong>{dataUpload.keterangan}</strong>) : (<span className="text-danger text-bold">Belum diisi</span>)}
 								</Col>
 							</FormGroup>
 							{dataUpload && !dataUpload.tidakPerluTMTCheck ? (
@@ -159,7 +160,7 @@ export class Ringkasan extends Component {
 													{moment(dataUpload.awalTMT).locale("id").format("DD MMMM YYYY")} - {moment(dataUpload.akhirTMT).locale("id").format("DD MMMM YYYY")}
 												</p>
 											) : (
-												""
+												(<span className="text-danger text-bold">Belum diisi</span>)
 											)}
 										</strong>
 									</Col>
@@ -191,7 +192,7 @@ export class Ringkasan extends Component {
 													{moment(dataUpload.akhirTMT).diff(dataUpload.awalTMT, 'month')} bulan
 												</p>
 											) : (
-												""
+												(<span className="text-danger text-bold">Belum diisi</span>)
 											)}
 										</strong>
 									</Col>
@@ -200,7 +201,8 @@ export class Ringkasan extends Component {
 							<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}</p>) : ""}</strong>
+									<strong>{dataUpload?.listSanksi?.length ? (dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value}</p>)) : (<span className="text-danger text-bold">Belum diisi</span>)}		</strong>
+
 								</Col>
 							</FormGroup>
 
@@ -210,8 +212,8 @@ export class Ringkasan extends Component {
 									<Scrollable height="120px" className="list-group">
 										<table className="table table-bordered bg-transparent">
 											<tbody>
-												{dataUpload
-													? dataUpload.files.map((e) => (
+												{dataUpload?.files?.length ?
+													(dataUpload.files.map((e) => (
 														<tr>
 															<td style={{ width: "30px" }}>
 																<em className="fa-lg far fa-file-code"></em>
@@ -222,8 +224,8 @@ export class Ringkasan extends Component {
 																</a>
 															</td>
 														</tr>
-													))
-													: ""}
+													)))
+													: (<span className="text-danger text-bold">Belum diisi</span>)}
 											</tbody>
 										</table>
 									</Scrollable>
@@ -252,12 +254,12 @@ export class Ringkasan extends Component {
 								<Col md="4">Tanggal Terima Surat Sanksi :</Col>
 								<Col md="8">
 									<strong>
-										{dataUpload && dataUpload.terimaSuratSanksi ? (
-											<p>
+										{dataUpload && dataUpload?.terimaSuratSanksi ? (
+											(<p>
 												{moment(dataUpload.terimaSuratSanksi).locale("id").format("DD MMMM YYYY")}
-											</p>
+											</p>)
 										) : (
-											""
+											(<span className="text-danger text-bold">Belum diisi</span>)
 										)}
 									</strong>
 								</Col>
@@ -268,8 +270,8 @@ export class Ringkasan extends Component {
 									<Scrollable height="120px" className="list-group">
 										<table className="table table-bordered bg-transparent">
 											<tbody>
-												{dataUpload
-													? dataUpload.filesTandaTerimaSS.map((e) => (
+												{dataUpload?.filesTandaTerimaSS?.length
+													?( dataUpload.filesTandaTerimaSS.map((e) => (
 														<tr>
 															<td style={{ width: "30px" }}>
 																<em className="fa-lg far fa-file-code"></em>
@@ -280,8 +282,9 @@ export class Ringkasan extends Component {
 																</a>
 															</td>
 														</tr>
-													))
-													: ""}
+													)))
+													: 
+													(<span className="text-danger text-bold">Belum diisi</span>)}
 											</tbody>
 										</table>
 									</Scrollable>
@@ -293,11 +296,11 @@ export class Ringkasan extends Component {
 									<Col md="8">
 										<strong>
 											{dataUpload && dataUpload.tglAkhirKeberatan ? (
-												<p>
+												(<p>
 													{moment(dataUpload.tglAkhirKeberatan).locale("id").format("DD MMMM YYYY")}
-												</p>
+												</p>)
 											) : (
-												""
+												(<span className="text-danger text-bold">Belum diisi</span>)
 											)}
 										</strong>
 									</Col>

components/Sanksi/TableLaporan.js

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

package-lock.json

@@ -6908,6 +6908,11 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "lodash.isfunction": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
@@ -6918,11 +6923,26 @@
       "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
       "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
     },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw=="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
+    "lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww=="
+    },
     "lodash.tail": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
@@ -9140,6 +9160,11 @@
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz",
       "integrity": "sha512-7i2L3ef+0ILXpL6P+Hg304eCQswh4jl3ynwR71BSlMU49PE2uk31k8B2GkP6yE9s2D4jTGKnzuSpzWxu4YxfQQ=="
     },
+    "react-otp-input": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-otp-input/-/react-otp-input-3.1.0.tgz",
+      "integrity": "sha512-SNDwqPemy5DYLVQJrOEfZXvJePcDIDmjkln0QyHdje8hRcB1TnrqthxHs0M+E9MWQAyxM84R5yPe2wYjqnH4UA=="
+    },
     "react-perfect-scrollbar": {
       "version": "1.5.8",
       "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz",
@@ -9149,6 +9174,19 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-phone-input-2": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
+      "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-popper": {
       "version": "1.3.11",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",

package.json

@@ -98,7 +98,9 @@
     "react-dropzone": "10.2.2",
     "react-flot": "1.3.0",
     "react-maskedinput": "4.0.1",
+    "react-otp-input": "^3.1.0",
     "react-perfect-scrollbar": "1.5.8",
+    "react-phone-input-2": "^2.15.1",
     "react-redux": "^7.2.6",
     "react-select": "^3.0.4",
     "react-signature-canvas": "^1.0.6",

pages/app/sanksi/proses.js

@@ -46,7 +46,7 @@ class ProsesSanksi extends Component {
 			pelaporan: {},
 			listSanksi: [],
 			loading: false,
-			localSuccess: false
+			localSuccess: false,
 		};
 	}
 
@@ -279,6 +279,44 @@ class ProsesSanksi extends Component {
 
 
 	};
+	validasiSanksiOn5 = (activeStep) => {
+		const dataPelanggaran = this.state.dataPelanggaran
+		if (dataPelanggaran?.data === undefined) {
+			swal.fire({
+				title: "Penetapan Jenis Pelanggaran belum diisi",
+				html: 'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
+				icon: "error",
+				confirmButtonColor: "#3e3a8e",
+			});
+			this.setState({
+				activeStep: "4"
+			});
+		}
+		else {
+			this.setState({
+				activeStep: "5"
+			});
+		}
+	}
+	validasiSanksiOn6 = (activeStep) => {
+		const dataPelanggaran = this.state.dataPelanggaran
+		if (dataPelanggaran?.data === undefined) {
+			swal.fire({
+				title: "Penetapan Jenis Pelanggaran belum diisi",
+				icon: "error",
+				html: 'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
+				confirmButtonColor: "#3e3a8e",
+			});
+			this.setState({
+				activeStep: "4"
+			});
+		}
+		else {
+			this.setState({
+				activeStep: "6"
+			});
+		}
+	}
 	validation = (activeStep) => {
 		const dataUpload = this.state.dataUpload
 		const dataPelanggaran = this.state.dataPelanggaran
@@ -292,14 +330,17 @@ class ProsesSanksi extends Component {
 				dataUpload?.files === undefined || dataUpload?.files.length === 0 || dataUpload?.files === null ||
 				// dataUpload?.terimaSuratSanksi === undefined || dataUpload?.terimaSuratSanksi === "" ||
 				// dataUpload?.tglAkhirKeberatan === undefined || dataUpload?.tglAkhirKeberatanbe === "" ||
-				dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.filesTandaTerimaSS === null ||
-				dataPelanggaran?.data === undefined
+				dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.filesTandaTerimaSS === null
+				// dataPelanggaran?.data === undefined
 			) {
 				swal.fire({
 					title: "Form Wajib Diisi",
 					icon: "error",
 					confirmButtonColor: "#3e3a8e",
 				});
+				this.setState({
+					activeStep: "7"
+				});
 			} else {
 				this.setState({
 					activeStep: "7"
@@ -315,14 +356,20 @@ class ProsesSanksi extends Component {
 				dataUpload?.files === undefined || dataUpload?.files.length === 0 || dataUpload?.files === null ||
 				dataUpload?.terimaSuratSanksi === undefined || dataUpload?.terimaSuratSanksi === "" ||
 				dataUpload?.tglAkhirKeberatan === undefined || dataUpload?.tglAkhirKeberatan === "" ||
-				dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.filesTandaTerimaSS === null ||
-				dataPelanggaran?.data === undefined
+				dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.filesTandaTerimaSS === null
+				// dataPelanggaran?.data === undefined
 			) {
 				swal.fire({
 					title: "Form Wajib Diisi",
 					icon: "error",
 					confirmButtonColor: "#3e3a8e",
 				});
+				this.setState({
+					validationForm: true
+				});
+				this.setState({
+					activeStep: "7"
+				});
 			} else {
 				this.setState({
 					activeStep: "7"
@@ -330,6 +377,61 @@ class ProsesSanksi extends Component {
 			}
 		}
 	}
+	validasiDone = () => {
+		const dataUpload = this.state.dataUpload
+		const dataPelanggaran = this.state.dataPelanggaran
+		if (dataUpload?.tidakPerluTMTCheck === true || dataUpload?.awalTMT === undefined || dataUpload?.awalTMT === "" ||
+			dataUpload?.akhirTMT === undefined || dataUpload?.akhirTMT === "") {
+			if (
+				dataUpload?.nomorSanksi === undefined || dataUpload?.nomorSanksi === "" ||
+				dataUpload?.keterangan === undefined || dataUpload?.keterangan === "" ||
+				// dataUpload?.awalsanksi === undefined || dataUpload?.awalsanksi === "" ||
+				dataUpload?.listSanksi === undefined || dataUpload?.listSanksi === null ||
+				dataUpload?.files === undefined || dataUpload?.files.length === 0 || dataUpload?.files === null ||
+				// dataUpload?.terimaSuratSanksi === undefined || dataUpload?.terimaSuratSanksi === "" ||
+				// dataUpload?.tglAkhirKeberatan === undefined || dataUpload?.tglAkhirKeberatanbe === "" ||
+				dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.filesTandaTerimaSS === null
+				// dataPelanggaran?.data === undefined
+			) {
+				swal.fire({
+					title: "Data belum lengkap",
+					icon: "error",
+					html:'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
+					confirmButtonColor: "#3e3a8e",
+				});
+				this.setState({
+					activeStep: "6"
+				});
+			} else {
+				this.done()
+			}
+		} else {
+			if (
+				dataUpload?.nomorSanksi === undefined || dataUpload?.nomorSanksi === "" ||
+				dataUpload?.keterangan === undefined || dataUpload?.keterangan === "" ||
+				dataUpload?.awalTMT === undefined || dataUpload?.awalTMT === "" ||
+				dataUpload?.akhirTMT === undefined || dataUpload?.akhirTMT === "" ||
+				dataUpload?.listSanksi === undefined || dataUpload?.listSanksi === null ||
+				dataUpload?.files === undefined || dataUpload?.files.length === 0 || dataUpload?.files === null ||
+				dataUpload?.terimaSuratSanksi === undefined || dataUpload?.terimaSuratSanksi === "" ||
+				dataUpload?.tglAkhirKeberatan === undefined || dataUpload?.tglAkhirKeberatan === "" ||
+				dataUpload?.filesTandaTerimaSS === undefined || dataUpload?.filesTandaTerimaSS.length === 0 || dataUpload?.filesTandaTerimaSS === null
+				// dataPelanggaran?.data === undefined
+			) {
+				swal.fire({
+					title: "Data belum lengkap",
+					html:'Mohon diisi terlebih dahulu sebelum melanjutkan ke tahap berikutnya',
+					icon: "error",
+					confirmButtonColor: "#3e3a8e",
+				});
+				this.setState({
+					activeStep: "6"
+				});
+			} else {
+				this.done()
+			}
+		}
+	}
 
 	handleOpenAlert = () => {
 		Swal.fire({
@@ -414,7 +516,8 @@ class ProsesSanksi extends Component {
 												className={classnames({
 													active: this.state.activeStep === "5",
 												})}
-												onClick={this.toggleStep("5")}
+												// onClick={this.toggleStep("5")}
+												onClick={this.validasiSanksiOn5}
 												disabled={thisclose === "Ditutup"}
 											>
 												<h4 className="text-left my-3">5. Berita Acara Pleno</h4>
@@ -426,7 +529,8 @@ class ProsesSanksi extends Component {
 												className={classnames({
 													active: this.state.activeStep === "6",
 												})}
-												onClick={this.toggleStep("6")}
+												// onClick={this.toggleStep("6")}
+												onClick={this.validasiSanksiOn6}
 												disabled={thisclose === "Ditutup"}
 											>
 												<h4 className="text-left my-3">6. Penetapan Sanksi</h4>
@@ -514,7 +618,7 @@ class ProsesSanksi extends Component {
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
 													<span className="font-color-white">Previous</span>
 												</Button>
-												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("5")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.validasiSanksiOn5}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>
@@ -611,7 +715,7 @@ class ProsesSanksi extends Component {
 												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("6")}>
 													<span className="font-color-white">Previous</span>
 												</Button>
-												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.done}
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.validasiDone}
 													disabled={this.state.loading}
 												>
 													<span className="font-color-white">Done</span>

styles/app/app/mycss.scss

@@ -209,4 +209,27 @@ border-radius: 4px;
       font-size: 20px;
     }
 
-    
+
+    .icon-triangle-onModalPT {
+      margin-top: 10px;
+      float: left;
+
+// margin-right: 30px;    
+    }
+   
+    .modalLoginPT-a{
+      border-radius: 20px;
+      padding-top: 20px;
+    }
+    .modalLoginPT-b{
+    padding-top: 30px;
+    border-radius: 20px;
+    padding-left: 25px;
+    margin-bottom: 40px;
+    }
+    // .form-tel .form-control {
+    //   background-color: rgb(253, 214, 214) !important;
+    //   color: rgb(104, 7, 60);
+    //   height: 50px !important;
+    //   width: 200px !important;
+    // }

styles/bootstrap/_buttons.scss

@@ -298,7 +298,7 @@ input[type="button"] {
   background: $colorbutton;
   transition: ease background-color 250ms;
   border: $colorbutton solid 2px;
-
+border-radius: 7px !important;
 
   &:hover:enabled{
     background-color: $colorbutton;
@@ -311,6 +311,7 @@ input[type="button"] {
 .btn-v2 {
   background: transparent;
   border: #3e3a8e solid 2px;
+  border-radius: 7px !important;
 }
 
 .navbar-color {

styles/bootstrap/_images.scss

@@ -95,7 +95,11 @@
   margin-right: 10px;
   margin-left: 15px;
 }
-
+.icon-triangle-onModalPT {
+  width: 30px;
+  margin-right: 10px;
+  margin-left: 15px;
+}
 .identitas-pelapor {
   width: 830px;
   height: 50px;