fixing ringkasan sanksi and modals permohononan keberatan

components/PT/Keberatan/ModalPermohonan.js

@@ -137,7 +137,7 @@ export class ModalPermohonan extends Component {
 					<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
 					<ModalFooter>
 						<Button color className="btn-login" onClick={this.toggleModal1}>
-							<span className=" font-color-white"></span>Ya
+							<span className="font-color-white">Ya</span>
 						</Button>{" "}
 						<Button color="danger" onClick={this.props.toggleModal}>
 							Tidak

components/Sanksi/Ringkasan.js

@@ -112,12 +112,6 @@ 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">
@@ -146,6 +140,13 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								</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">Surat Sanksi:</Col>
 							<Col md="8">

components/Sanksi/UploadSurat.js

@@ -114,35 +114,29 @@ export class UploadSurat extends Component {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
-	setNomorSanksi = (e) => {
-		this.setState({ nomorSanksi: e.target.value });
+	toRingkasan = () => {
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
+	setNomorSanksi = (e) => {
+		this.setState({ nomorSanksi: e.target.value }, this.toRingkasan);
+	};
+
 	setKeterangan = (e) => {
-		this.setState({ keterangan: e.target.value });
-		this.props.setUploadSuratSanksi(this.state);
+		this.setState({ keterangan: e.target.value }, this.toRingkasan);
 	};
 
 	setListSanksi = (ls) => {
-		this.setState({ listSanksi: ls.target.value });
-		this.props.setUploadSuratSanksi(this.state);
+		this.setState({ listSanksi: ls.target.value }, this.toRingkasan);
 	};
 	handleChangeListSanksi = (listSanksi) => {
-		this.setState({ listSanksi });
-		this.props.setUploadSuratSanksi(this.state);
-	};
-
-	handleTmtDate = (startDate) => {
-		this.setState({ startDate });
-		this.props.setUploadSuratSanksi(this.state);
+		this.setState({ listSanksi }, this.toRingkasan);
 	};
 	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>
@@ -160,22 +154,15 @@ export class UploadSurat extends Component {
 					<label className="col-md-2 col-form-label">Keterangan</label>
 					<div className="col-md-10">
 						<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
-						{/* <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);
+								this.setState({ awalsanksi }, this.toRingkasan)
 							}}
 							dateFormat="dd/MM/yyyy"
 							maxDate={this.state.startDay}
@@ -186,8 +173,7 @@ export class UploadSurat extends Component {
 						<DatePicker
 							selected={this.state.akhirsanksi}
 							onChange={(akhirsanksi) => {
-								this.setState({ akhirsanksi })
-								this.props.setUploadSuratSanksi(this.state);
+								this.setState({ akhirsanksi }, this.toRingkasan)
 							}}
 							dateFormat="dd/MM/yyyy"
 							minDate={this.state.awalsanksi}
@@ -208,8 +194,6 @@ export class UploadSurat extends Component {
 						<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">
@@ -223,7 +207,6 @@ export class UploadSurat extends Component {
 						/>
 					</div>
 				</FormGroup>
-
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">
 						Dokumen Surat Sanksi<span>: &nbsp;</span><span className="text-danger">*</span>
@@ -258,7 +241,6 @@ 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>
 					</div>
 				</FormGroup>

pages/laporan/new/index.js

@@ -28,6 +28,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
+  FormFeedback,
 } from "reactstrap";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
@@ -270,7 +271,7 @@ class App extends Component {
         icon: "error",
         confirmButtonColor: "#3e3a8e",
       });
-      this.setState({ error: "Kode verifikasi tidak valid", kodeVerifNotOK: true });
+      this.setState({ kodeVerifNotOK: true, error: false });
     } else {
       swal.fire({
         title: "Data berhasil dikirim",
@@ -653,13 +654,17 @@ class App extends Component {
                     </label>
                     <div className="border-2">
                       <Input
-                        className="border-2"
-                        invalid={this.state.kodeVerifNotOK}
+                        className="border-2 "
+                        invalid={this.state.error}
                         onChange={(e) =>
                           this.setState({ kode: e.target.value })
                         }
                         type="text"
+                        placeholder={this.state.error}
                       />
+                      <FormFeedback invalid={this.state.error}>
+                        Kode verifikasi harus diisi
+                      </FormFeedback>
                     </div>
                     <p>
                       *Kode verifikasi terkirim ke nomor WA {this.state.no_hp}
@@ -688,11 +693,11 @@ class App extends Component {
                       </Button>
                     </CopyToClipboard>
                   </div>
-                  {this.state.error && (
+                  {/* {this.state.error && (
                     <div className="form-text text-danger">
                       {this.state.error}
                     </div>
-                  )}
+                  )} */}
                 </FormGroup>
               </ModalBody>
               <ModalFooter>
@@ -745,7 +750,7 @@ class App extends Component {
                         this.state.kode
                       );
                     } else {
-                      this.setState({ error: "Kode verifikasi harus diisi" });
+                      this.setState({ error: true, error: "Harus diisi" });
                     }
                     this.setState({ disablekirim3: false, disablecancel: false })
                   }}