commit 05/11

actions/auth.js

@@ -36,7 +36,7 @@ export const getUser = async () => {
 	}
 };
 
-export const logout = async ( _csrf) => {
+export const logout = async (_csrf) => {
 	try {
 		const response = await axiosAPI.delete(`/auth/logout?_csrf=${_csrf}`);
 		return response.data;
@@ -60,3 +60,28 @@ export const loginToPt = async (lembaga_id, password, _csrf) => {
 
 	return response.data;
 };
+export const getkontakpt = async () => {
+	try {
+		const response = await get("/kontak");
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+export const createotp = async (data, token) => {
+	try {
+		const response = await axiosAPI.post(`/auth/otp`, data, { headers: { Authorization: token } });
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+
+export const createkontak = async (data, token) => {
+	try {
+		const response = await axiosAPI.post(`/kontak`, data, { headers: { Authorization: token } });
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};

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/NaikSanksi/InputTanggal.js

@@ -47,7 +47,7 @@ const checkIfFilesAreCorrectType = (files) => {
 const rekomendasiSchema = Yup.object().shape({
     no_sanksi: Yup.string().required("Wajib isi Nomor Sanksi"),
     keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
-    from_date: Yup.date().required("Wajib diisi"),
+    from_date: Yup.date().notRequired("Wajib diisi"),
     to_date: Yup.date().notRequired("Wajib diisi"),
     sanksi: Yup.array().required("Wajib isi pelanggaran"),
     dokumen: Yup.array().required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
@@ -84,7 +84,7 @@ class InputTanggal extends Component {
             sanksi: {},
             keteranganLaporan: "",
             tmtCheck: false,
-            listSanksi: "",
+            listSanksi: null,
             selectedFile: {}
         };
     }
@@ -109,7 +109,9 @@ class InputTanggal extends Component {
             dropdownOpen: !this.state.dropdownOpen,
         });
     };
-
+    handleChangeListSanksi = (listSanksi) => {
+        this.setState({ listSanksi }, this.setUploadSuratSanksi);
+    };
     onDrop = (selectedFile) => {
         this.setState({
             selectedFile: selectedFile.map((file) =>
@@ -153,8 +155,10 @@ class InputTanggal extends Component {
     handleTmtCheck = () => {
         this.setState({ tmtCheck: !this.state.tmtCheck });
     };
-
-
+    handleChangeListSanksi = (listSanksi) => {
+        this.setState({ listSanksi });
+    };
+ 
     handelSimpan = async (data) => {
         if (this.props?.user?.role.id === 2024) {
             Swal.fire({
@@ -165,7 +169,32 @@ class InputTanggal extends Component {
                 confirmButtonText: 'Oke'
             })
         } else {
-            const getToken = await getCsrf();
+            if (this.state.tmtCheck === true ||this.state.listSanksi?.find(z => z.label === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.label === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS")) {
+                const getToken = await getCsrf();
+                const _csrf = getToken.token;
+                const { token, query } = this.props;
+                const { id } = query;
+                const formdata = new FormData();
+                formdata.append("no_sanksi", data.no_sanksi);
+                formdata.append("keterangan", data.keterangan);
+                // formdata.append("from_date", data.from_date);
+                // formdata.append("to_date", data.to_date);
+                // formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value }))));
+                formdata.append("sanksi", JSON.stringify(data.sanksi.map((e) => ({ label: e.value.split(";")[0], description: e.value.split(";")[1], level: e.value.split(";")[2] }))));
+    
+                this.state.files.forEach((e) => {
+                    formdata.append("dokumen", e);
+                });
+                const toastid = toast.loading("Please wait...");
+                const added = await update(token, id, formdata, _csrf);
+                if (!added) {
+                    toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
+                } else {
+                    toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
+                    Router.push("/app/naik-sanksi");
+                }
+            }else{
+                const getToken = await getCsrf();
             const _csrf = getToken.token;
             const { token, query } = this.props;
             const { id } = query;
@@ -189,6 +218,8 @@ class InputTanggal extends Component {
                 Router.push("/app/naik-sanksi");
             }
         }
+            }
+            
 
     };
     render() {
@@ -206,7 +237,6 @@ class InputTanggal extends Component {
                 <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
             </p>
         ));
-
         return (
             <Card className="card-default">
                 <CardBody>
@@ -239,16 +269,18 @@ class InputTanggal extends Component {
                                         <ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
-                                <FormGroup row>
-                                    <label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
-                                    <div className="col-md-10 mt-2">
-                                        <div className="checkbox c-checkbox">
-                                            <label>
-                                                <Input type="checkbox" onChange={this.handleTmtCheck} defaultChecked={this.state.tmtCheck} />
-                                                <span className="fa fa-check"></span></label>
+                                {!this.state.listSanksi?.find(z => z.label === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.label === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") &&
+                                    <FormGroup row>
+                                        <label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
+                                        <div className="col-md-10 mt-2">
+                                            <div className="checkbox c-checkbox">
+                                                <label>
+                                                    <Input type="checkbox" onChange={this.handleTmtCheck} defaultChecked={this.state.tmtCheck} />
+                                                    <span className="fa fa-check"></span></label>
+                                            </div>
                                         </div>
-                                    </div>
-                                </FormGroup>
+                                    </FormGroup>
+                                }
                                 {this.state.tmtCheck && (
                                     <FormGroup row className="mt-3">
                                         <label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
@@ -256,25 +288,25 @@ class InputTanggal extends Component {
                                             <Field name="from_date">
                                                 {({ field, form }) => (
                                                     <Datetime
-                                                    timeFormat={false}
-                                                    inputProps={{ className: "form-control" }}
-                                                    value={field.value || "DD/MM/YYYY"}
-                                                    onChange={(from_date) => {
-                                                        form.setFieldValue(field.name, from_date);
-                                                        this.setState({ from_date })
-                                                    }}
-                                                    closeOnSelect={true}
-                                                    isValidDate={(e) => {
-                                                        return e.isBefore(new Date())
-                                                    }}
-                                                />
+                                                        timeFormat={false}
+                                                        inputProps={{ className: "form-control" }}
+                                                        value={field.value || "DD/MM/YYYY"}
+                                                        onChange={(from_date) => {
+                                                            form.setFieldValue(field.name, from_date);
+                                                            this.setState({ from_date })
+                                                        }}
+                                                        closeOnSelect={true}
+                                                        isValidDate={(e) => {
+                                                            return e.isBefore(new Date())
+                                                        }}
+                                                    />
                                                 )}
                                             </Field>
                                             <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
                                         </span>
                                     </FormGroup>
                                 )}
-                                {!this.state.tmtCheck && (
+                                {!this.state.tmtCheck && !this.state.listSanksi?.find(z => z.label === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.label === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
                                     <FormGroup row className="mt-3">
                                         <label className="col-md-2 col-form-label">Isi TMT :</label>
                                         <div className="col-md-6">
@@ -284,18 +316,18 @@ class InputTanggal extends Component {
                                                         <Field name="from_date">
                                                             {({ field, form }) => (
                                                                 <Datetime
-                                                                timeFormat={false}
-                                                                inputProps={{ className: "form-control" }}
-                                                                value={field.value || "DD/MM/YYYY"}
-                                                                onChange={(from_date) => {
-                                                                    form.setFieldValue(field.name, from_date);
-                                                                    this.setState({ from_date })
-                                                                }}
-                                                                closeOnSelect={true}
-                                                                isValidDate={(e) => {
-                                                                    return e.isBefore(new Date())
-                                                                }}
-                                                            />
+                                                                    timeFormat={false}
+                                                                    inputProps={{ className: "form-control" }}
+                                                                    value={field.value || "DD/MM/YYYY"}
+                                                                    onChange={(from_date) => {
+                                                                        form.setFieldValue(field.name, from_date);
+                                                                        this.setState({ from_date })
+                                                                    }}
+                                                                    closeOnSelect={true}
+                                                                    isValidDate={(e) => {
+                                                                        return e.isBefore(new Date())
+                                                                    }}
+                                                                />
                                                             )}
                                                         </Field>
                                                         <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
@@ -306,18 +338,18 @@ class InputTanggal extends Component {
                                                         <Field name="to_date">
                                                             {({ field, form }) => (
                                                                 <Datetime
-                                                                timeFormat={false}
-                                                                inputProps={{ className: "form-control" }}
-                                                                value={field.value || "DD/MM/YYYY"}
-                                                                onChange={(to_date) => {
-                                                                    form.setFieldValue(field.name, to_date);
-                                                                    this.setState({ to_date })
-                                                                }}
-                                                                closeOnSelect={true}
-                                                                isValidDate={(e) => {
-                                                                    return e.isBefore(addMonths(new Date(this.state.from_date), 6)) && e.isAfter(new Date(this.state.from_date))
-                                                                }}
-                                                            />
+                                                                    timeFormat={false}
+                                                                    inputProps={{ className: "form-control" }}
+                                                                    value={field.value || "DD/MM/YYYY"}
+                                                                    onChange={(to_date) => {
+                                                                        form.setFieldValue(field.name, to_date);
+                                                                        this.setState({ to_date })
+                                                                    }}
+                                                                    closeOnSelect={true}
+                                                                    isValidDate={(e) => {
+                                                                        return e.isBefore(addMonths(new Date(this.state.from_date), 6)) && e.isAfter(new Date(this.state.from_date))
+                                                                    }}
+                                                                />
                                                             )}
                                                         </Field>
                                                         <ErrorMessage name="to_date" component="div" className="form-text text-danger" />
@@ -327,7 +359,7 @@ class InputTanggal extends Component {
                                         </div>
                                     </FormGroup>
                                 )}
-                                {!this.state.tmtCheck && (
+                                {!this.state.tmtCheck && !this.state.listSanksi?.find(z => z.label === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.label === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
                                     <FormGroup row className="mt-1">
                                         <label className="col-md-2 col-form-label">TMT berlaku</label>
                                         <div className="col-md-10 mt-2">
@@ -335,7 +367,7 @@ class InputTanggal extends Component {
                                         </div>
                                     </FormGroup>
                                 )}
-                                {!this.state.tmtCheck && (
+                                {!this.state.tmtCheck && !this.state.listSanksi?.find(z => z.label === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.label === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
                                     <FormGroup row className="mt-1">
                                         <label className="col-md-2 col-form-label">TMT</label>
                                         <div className="col-md-10 mt-2">
@@ -352,6 +384,9 @@ class InputTanggal extends Component {
                                             isMulti
                                             onChange={(e) => {
                                                 form.setFieldValue(field.name, e);
+                                                this.handleChangeListSanksi(e);
+
+
                                             }}
                                         />}</Field>
                                         <ErrorMessage name="sanksi" component="div" className="form-text text-danger" />

components/PT/CabutSanksi/Riwayat.js

@@ -3,8 +3,8 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import { API_URL } from "@/env";
 
-function Riwayat({ data }) {
-	const { cabut_sanksi } = data.sanksi;
+function Riwayat({ data, role }) {
+	const { cabut_sanksi } = data;
 	return (
 		<Card className="card-default">
 			<CardHeader>
@@ -20,16 +20,23 @@ function Riwayat({ data }) {
 							</tr>
 						</thead>
 						<tbody>
-							{cabut_sanksi ? (
+							{data ? (
 								<tr>
 									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
 									<td>
-										{cabut_sanksi.files.map((e) => (
+										{data.dokumen?.map((e) => (
 											<>
 												<em className="fa-lg far fa-file-code"></em>
-												<a className="text-muted" href={API_URL + e.path} target="_blank" download={e.name}>
-													{e.name}
-												</a>
+												{role === 2024 ?
+													<a className="text-muted" onClick={handleOpenAlert}>
+														{e.judul}
+													</a>
+													:
+													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+														{e.judul}
+													</a>
+
+												}
 											</>
 										))}
 									</td>

components/PT/Riwayat.js

@@ -18,7 +18,7 @@ function Riwayat({ data }) {
 							</tr>
 						</thead>
 						<tbody>
-							{data.length
+							{data?.length
 								? data.map((value) => (
 										<tr>
 											<td>{moment(value.createAt).format("DD MMMM YYYY")}</td>

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/PencabutanSanksi/RiwayatPerbaikan.js

@@ -0,0 +1,67 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+import Swal from "sweetalert2";
+
+function RiwayatPerbaikan({ data, role }) {
+	const handleOpenAlert = () => {
+		Swal.fire({
+			icon: 'error',
+			title: 'Oops...',
+			html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+			confirmButtonColor: "#3e3a8e",
+			confirmButtonText: 'Oke'
+		})
+	};
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat Dokumen Perbaikan</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Keterangan</th>
+								<th>Dokumen</th>
+								<th>index</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.length
+								? data.map((value, i) => (
+									<tr>
+										<td>{moment(value.createdAt).format("DD MMMM YYYY")}</td>
+										<td>{value.keterangan}</td>
+										<td>
+											{value.dokumen.map((e) => (
+												<>
+													<em className="fa-lg far fa-file-code"></em>
+													{role === 2024 ?
+														<a className="text-muted" onClick={handleOpenAlert}>
+															{e.judul}
+														</a>
+														:
+														<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+															{e.judul}
+														</a>
+
+													}
+												</>
+											))}
+										</td>
+										<td>{++i}</td>
+									</tr>
+								))
+								: ""}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default RiwayatPerbaikan;

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>

components/Sanksi/UploadSurat.js

@@ -144,13 +144,13 @@ export class UploadSurat extends Component {
 		this.state.tidakPerluTMTCheck = !this.state.tidakPerluTMTCheck
 		this.setUploadSuratSanksi()
 		if (this.state.tidakPerluTMTCheck) {
-			this.setState({ awalTMT: "", akhirTMT: "" })
+			this.setState({ awalTMT: "", akhirTMT: "", tglAkhirKeberatan: "", terimaSuratSanksi: "" })
 		}
 		// this.handleAutoSave()
 	}
 	setsanksi = () => {
-		if (!this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS")) {
-			this.setState({ awalTMT: "", akhirTMT: "" })
+		if (this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS")) {
+			this.setState({ awalTMT: "", akhirTMT: "", tglAkhirKeberatan: "", terimaSuratSanksi: "" })
 		}
 	}
 	render() {
@@ -196,18 +196,20 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 
-				<FormGroup row>
-					<label className="col-md-4 col-form-label">Tidak Perlu TMT</label>
-					<div className="col-md-8 mt-2">
-						<div className="checkbox c-checkbox">
-							<label>
-								<Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tidakPerluTMTCheck} />
-								<span className="fa fa-check"></span></label>
+				{!this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") &&
+					<FormGroup row>
+						<label className="col-md-4 col-form-label">Tidak Perlu TMT</label>
+						<div className="col-md-8 mt-2">
+							<div className="checkbox c-checkbox">
+								<label>
+									<Input type="checkbox" onChange={() => this.handleTmtCheck()} defaultChecked={this.state.tidakPerluTMTCheck} />
+									<span className="fa fa-check"></span></label>
+							</div>
 						</div>
-					</div>
-				</FormGroup>
+					</FormGroup>
+				}
 
-				{!this.state.tidakPerluTMTCheck && (
+				{!this.state.tidakPerluTMTCheck && !this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
 					<FormGroup row className="mt-3">
 						<label className="col-md-4 col-form-label">Isi TMT</label>
 						<Col>
@@ -255,7 +257,7 @@ export class UploadSurat extends Component {
 
 					</FormGroup>
 				)}
-				{!this.state.tidakPerluTMTCheck && (
+				{!this.state.tidakPerluTMTCheck && !this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
 					<FormGroup row className="mt-1">
 						<label className="col-md-4 col-form-label">TMT berlaku</label>
 						<div className="col-md-8 mt-2">
@@ -263,7 +265,7 @@ export class UploadSurat extends Component {
 						</div>
 					</FormGroup>
 				)}
-				{!this.state.tidakPerluTMTCheck && (
+				{!this.state.tidakPerluTMTCheck && !this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
 					<FormGroup row className="mt-1">
 						<label className="col-md-4 col-form-label">TMT</label>
 						<div className="col-md-8 mt-2">
@@ -385,7 +387,7 @@ export class UploadSurat extends Component {
 						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
-				{!this.state.tidakPerluTMTCheck && (
+				{!this.state.tidakPerluTMTCheck && !this.state.listSanksi?.find(z => z.value === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.value === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS") && (
 					<FormGroup row className="mt-3">
 						<label className="col-md-4 col-form-label">Tanggal Akhir Pengajuan Keberatan<span className="text-danger">*</span>
 							<p>

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,
 		};
 	}
 
@@ -170,6 +170,8 @@ class ProsesSanksi extends Component {
 				formdata.append("to_date", this.state.dataUpload.akhirTMT);
 				formdata.append("tanggal_terima_sanksi", this.state.dataUpload.terimaSuratSanksi);
 				formdata.append("tanggal_akhir_keberatan", this.state.dataUpload.tglAkhirKeberatan);
+				formdata.append("sanksi", JSON.stringify(this.state.dataUpload.listSanksi.map((e) => ({ label: e.value.split(";")[0], description: e.value.split(";")[1], level: e.value.split(";")[2] }))));
+
 				formdata.append("pelanggaran_id", this.state.dataPelanggaran.data.map((e) => e._id).join());
 				if (this.state.dataUpload.files && this.state.dataUpload.files.length > 0) {
 					this.state.dataUpload.files.forEach((e) => {
@@ -277,26 +279,68 @@ 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
-		if (dataUpload?.tidakPerluTMTCheck === true) {
+		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?.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"
@@ -312,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"
@@ -327,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({
@@ -411,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>
@@ -423,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>
@@ -511,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>
@@ -608,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>

pages/pt/pemantauan.js

@@ -4,10 +4,16 @@ import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import { getLogPT } from "@/actions/log";
 import { getPT } from "@/actions/PT";
-import { Row, Col } from "reactstrap";
+import { Row, Col, ModalHeader, ModalBody, ModalFooter, Modal, FormFeedback, Button } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
+import { createotp, getkontakpt, createkontak } from "../../actions/auth";
+import PhoneInput from 'react-phone-input-2'
+import 'react-phone-input-2/lib/style.css'
+import OtpInput from 'react-otp-input';
+import { ToastContainer, toast } from "react-toastify";
+
 
 class Pemantauan extends Component {
 	constructor(props) {
@@ -15,6 +21,11 @@ class Pemantauan extends Component {
 		this.state = {
 			log: [],
 			pt: {},
+			modalPhone: false,
+			otpClose: false,
+			modalOTP: false,
+			otp: "",
+			phone: ""
 		};
 	}
 
@@ -22,13 +33,130 @@ class Pemantauan extends Component {
 		const { token } = this.props;
 		const log = await getLogPT(token);
 		const pt = await getPT(token);
-		this.setState({ log, pt });
+		const kontakPT = await getkontakpt(token);
+		this.setState({ log, pt, kontakPT });
+		if (kontakPT=== undefined) {
+			this.setState({modalPhone:true})
+		}
+
 	};
+	otpClose = () => {
+		// return location.href = '/pt/pemantauan';
+		this.setState({ modalOTP: false, modalPhone: false })
+	}
+	handleSubmitTelepon = async () => {
+		const { token } = this.props
+		const create = createotp({ no_hp: this.state.phone }, token)
+		await toast.promise(create, {
+			pending: "Loading...",
+			// success: "Berhasil ",
+			error: "Error",
+		},)
 
+		this.setState({ modalPhone: false, modalOTP: true })
+	}
+	handleSubmitOtp = async () => {
+		const { token } = this.props
+		const create = createkontak({ otp: this.state.otp, no_hp: this.state.phone }, token)
+		await toast.promise(create, {
+			pending: "Loading...",
+			success: "Success",
+			error: "Error",
+		},)
+		this.setState({ modalPhone: false, modalOTP: false })
+	}
 	render() {
 		const { log, pt } = this.state;
 		return (
 			<ContentWrapper unwrap>
+				{this.state.kontakPT === undefined &&
+					<Modal isOpen={ this.state.kontakPT === undefined && this.state.modalPhone} style={{ width: '400px' }} >
+						<ModalBody>
+							<div className="modalLoginPT-a">
+								<img
+									className="icon-triangle-onModalPT"
+									src="/static/img/Frame_10.png"
+								></img>
+
+								<h3 className=" font-color-black">Konfirmasi Nomor Telepon Perguruan Tinggi</h3>
+							</div>
+
+							<div className="modalLoginPT-b">
+								<label className=" font-weight-bold h6">
+									Nomor Telepon :
+								</label>
+								<div className="border-2">
+									<PhoneInput
+										country={'id'}
+										value={this.state.phone}
+										onChange={phone => this.setState({ phone })} />
+								</div>
+							</div>
+
+							<div>
+								<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
+									<span className=" font-color-black">
+										Batal
+									</span>
+								</Button>
+								<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitTelepon}>
+									<span className=" font-color-white">
+										Kirim
+									</span>
+								</Button>
+							</div>
+						</ModalBody>
+
+					</Modal>
+				}
+				<Modal isOpen={this.state.modalOTP} style={{ width: '400px' }} >
+					<ModalBody>
+						<div className="modalLoginPT-a">
+							<img
+								className="icon-triangle-onModalPT mt-auto mb-auto"
+								src="/static/img/Frame_10.png"
+							></img>
+
+							<h3 className=" font-color-black">Masukan Kode OTP</h3>
+						</div>
+
+						{/* <div className="modalLoginPT-b"> */}
+
+						<div className=" mt-5 mb-5">
+							<OtpInput
+								invalid={this.state.error}
+								value={this.state.otp}
+								onChange={(otp) => { this.setState({ otp }) }}
+								numInputs={4}
+								renderSeparator={<span className=" font-color-black font-weight-bold mr-2 ml-2">-</span>}
+								renderInput={(props) => <input {...props} style={{ width: "50px", height: "50px", textAlign: "center", marginLeft: "auto", marginRight: "auto", borderRadius: "7px", fontSize: "30px" }} />}
+
+							/>   <p className="  mt-3">
+								*Kode OTP terkirim ke nomor WA {this.state.phone}
+							</p>
+							<FormFeedback invalid={this.state.error}>
+								Kode verifikasi harus diisi
+							</FormFeedback>
+						</div>
+
+						<div>
+							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
+								<span className=" font-color-black">
+									Batal
+								</span>
+							</Button>
+							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitOtp}
+							>
+								<span className=" font-color-white">
+									Kirim
+								</span>
+							</Button>
+						</div>
+					</ModalBody>
+
+				</Modal>
+
+
 				{pt?.data ? <Header data={pt.data} /> : <Loader />}
 				<div className="p-3">
 					<Row>

pages/pt/pencabutan-sanksi/detail.js

@@ -5,7 +5,7 @@ import { getOneSanksi } from "@/actions/sanksi";
 import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import DetailSanksi from "@/components/Main/DetailSanksi";
-import Riwayat from "@/components/PencabutanSanksi/Riwayat";
+import Riwayat from "@/components/PT/CabutSanksi/Riwayat";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
 import { addCabutSanksi } from "@/actions/cabutSanksi";

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;