tambahkan status baru / label baru ‘ditutup’ di menu pemeriksaan & menu sanksi

components/PelaporanTuntas/DetailLaporan.js

@@ -166,6 +166,22 @@ function DetailLaporan({ data, noTitle = false, noStatus = false, role }) {
 						</Scrollable>
 					</Col>
 				</FormGroup>
+
+			</form>
+			<form className="form-horizontal">
+				{noTitle ? (
+					""
+				) : (
+					<div className="header-1">
+						<h2 className="card-title-1">Status Laporan</h2>
+					</div>
+				)}
+				<FormGroup row>
+					<Col md="4">Status:</Col>
+					<Col md="8">
+						<strong>Ditutup</strong>
+					</Col>
+				</FormGroup>
 				{data.tuntas.keterangan && (
 					<FormGroup row>
 						<Col md="4">Keterangan Penutupan Laporan:</Col>

components/Pemeriksaan/InputEvaluasi.js

@@ -240,7 +240,15 @@ class InputEvaluasi extends Component {
 			});
 			formdata.append("aktif", "false");
 			// formdata.append("_csrf", _csrf)
-			await updateLaporan(token, id, formdata, _csrf + `&redudansi=true`);
+			await toast.promise(updateLaporan(token, id, formdata, _csrf + `&redudansi=true`), {
+				pending: "Loading",
+				success: {
+					render: "success",
+					autoClose: 1000
+				},
+				error: "Error",
+
+			});
 			await Router.push({
 				pathname: "/app/pemeriksaan",
 			});
@@ -365,7 +373,7 @@ class InputEvaluasi extends Component {
 										</div>
 										<FormGroup>
 											<div className="col-xl-10">
-												<Button color className="btn-login" type="submit" disabled={isSubmitting}>
+												<Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
 													<span className="font-color-white">
 														Tutup Laporan
 													</span>

components/Sanksi/Redudansi.js

@@ -0,0 +1,262 @@
+import React, { Component } from "react";
+import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
+import Select from "react-select";
+import "react-datepicker/dist/react-datepicker.css";
+import Swal from "sweetalert2";
+import * as Yup from "yup";
+import { connect } from "react-redux";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import { updateLaporan } from "../../actions/pelaporan"
+import { getCsrf } from "../../actions/security";
+import { ToastContainer, toast } from "react-toastify";
+import Router from "next/router";
+
+
+
+const checkIfFilesAreTooBig = (files) => {
+    let valid = true;
+    if (files) {
+        files.map((file) => {
+            if (file.size > 15 * 1024 * 1024) {
+                valid = false;
+            }
+        });
+    }
+    return valid;
+};
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+    state = {
+        isClient: false,
+    };
+    componentDidMount = () => {
+        Dropzone = require("react-dropzone").default;
+        this.setState({ isClient: true });
+    };
+    render() {
+        return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+    }
+}
+const ditutupSchema = Yup.object().shape({
+    keterangan: Yup.string().required("Harus diisi"),
+    dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
+const status = [
+    { value: "Sanksi", label: "Sanksi", className: "State-ACT" },
+    { value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
+
+export class Redudansi extends Component {
+    constructor(props) {
+        super(props);
+        const tmt_awal = new Date();
+        this.state = {
+            files: [],
+            keterangan: "",
+            selectedOption: null,
+
+        };
+    }
+    async componentDidMount() {
+
+        this.defaultStatus();
+
+    }
+    defaultStatus = async () => {
+        return this.setState({ selectedOption: status[0] });
+    };
+
+    handleChangeSelect = (selectedOption) => this.setState({ selectedOption }, this.setDataStatusLaporan);
+    // handleChangeSelect = (selectedOption) => {
+    //     this.state.selectedOption = selectedOption
+    //     this.setDataStatusLaporan()
+    // }
+    getStatus = () => (status);
+
+    onDrop = (selectedFile) => {
+        this.setState({
+            selectedFile: selectedFile.map((file) =>
+                Object.assign(file, {
+                    preview: URL.createObjectURL(file),
+                })
+            ),
+            stat: "Added " + selectedFile.length + " file(s)",
+        });
+        const selectFile = this.state.selectedFile
+        this.setState(prevState => ({
+            files: [...prevState.files, ...selectFile]
+        }))
+    };
+    handleTutupLaporan = async (data, value) => {
+        if (this.props.role === 2024) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                confirmButtonColor: "#3e3a8e",
+                confirmButtonText: 'Oke'
+            })
+        } else {
+            const getToken = await getCsrf();
+            const _csrf = getToken.token;
+            const { token } = this.props;
+            const formdata = new FormData();
+            formdata.append("keterangan", data.keterangan);
+            this.state.files.forEach((e) => {
+                formdata.append("dokumen", e);
+            });
+            formdata.append("aktif", "false");
+
+            await toast.promise(updateLaporan(token, this.props.id, formdata, _csrf + `&redudansi=true`), {
+                pending: "Loading",
+                success: "Success",
+                error: "Error",
+                autoClose: 1000
+            });
+           await Router.push("/app/sanksi");
+        }
+
+    };
+    setDataStatusLaporan = () => {
+        this.props.setDataStatusLaporan(this.state)
+    }
+
+    render() {
+        const { files, selectedOption } = this.state;
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
+        const thumbs = files.map((file, index) => (
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
+        ));
+        return (
+            <>
+                <Formik
+                    enableReinitialize={true}
+                    initialValues={{
+                        status: this.getStatus()[0],
+                        keterangan: "",
+                        dokumen: [],
+                    }}
+                    validationSchema={selectedOption?.value === this.getStatus()[1].value ? ditutupSchema : null}
+                    onSubmit={this.handleTutupLaporan}
+                >
+                    {({ isSubmitting }) => (
+                        <Form>
+                            <FormGroup row>
+                                <label className="col-md-2 col-form-label font-weight-bold font-color-black">Status Laporan</label>
+                                <div className="col-md-10">
+                                    <Field name="status">
+                                        {({ field, form }) => (
+                                            <Select
+                                                value={field.value}
+                                                onChange={(e) => {
+                                                    form.setFieldValue(field.name, e);
+                                                    this.handleChangeSelect(e);
+                                                }}
+                                                options={this.getStatus()}
+                                                required
+                                            />
+                                        )}
+                                    </Field>
+                                    <ErrorMessage name="status" component="div" className="form-text text-danger" />
+                                </div>
+
+                            </FormGroup>
+                            {selectedOption?.value === this.getStatus()[0].value ? (
+                                ""
+                            ) : (
+                                <div>
+                                    <FormGroup row>
+                                        <label className="col-md-2 col-form-label">Keterangan<span className=" text-danger">*</span></label>
+                                        <div className="col-md-10">
+                                            <Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
+                                            <ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+                                        </div>
+
+                                    </FormGroup>
+                                    <FormGroup row>
+                                        <label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
+                                        <div className="col-md-10">
+                                            <Field name="dokumen">
+                                                {({ field, form, meta }) => (
+                                                    <DropzoneWrapper
+                                                        className=""
+                                                        onDrop={(e) => {
+                                                            this.onDrop(e);
+                                                            form.setFieldValue(field.name, e);
+                                                        }}
+                                                    >
+                                                        {({ getRootProps, getInputProps, isDragActive }) => {
+                                                            return (
+                                                                <div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
+                                                                    <input name="dokumen" {...getInputProps()} />
+                                                                    <div className="dropzone-style-1">
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
+                                                                            <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">
+                                                                        <small className="ml-auto">
+                                                                            <button
+                                                                                type="button"
+                                                                                className="btn btn-link"
+                                                                                onClick={(e) => {
+                                                                                    this.clearFiles(e);
+                                                                                    form.setFieldValue(field.name, []);
+                                                                                }}
+                                                                            >
+                                                                                Reset dokumen
+                                                                            </button>
+                                                                        </small>
+                                                                    </div>
+                                                                </div>
+                                                            );
+                                                        }}
+                                                    </DropzoneWrapper>
+                                                )}
+                                            </Field>
+                                            {thumbs}
+                                            <ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+                                            <p className="mrgn-top-5 font-color-black">
+                                                Ukuran setiap dokumen maksimal 15mb
+                                            </p>
+                                        </div>
+                                        <FormGroup>
+                                            <div className="col-xl-10">
+                                                <Button color className="btn-login width-133 mt-4" type="submit" disabled={isSubmitting}>
+                                                    <span className="font-color-white">
+                                                        Tutup Laporan
+                                                    </span>
+                                                </Button>
+                                            </div>
+                                        </FormGroup>
+                                    </FormGroup>
+                                </div>
+
+
+                            )}
+                        </Form>
+                    )}
+                </Formik>
+            </>
+        );
+    }
+}
+
+// const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+// export default connect(mapStateToProps)(Redudansi);
+export default Redudansi

pages/app/pelaporan/search.js

@@ -121,7 +121,7 @@ class Search extends Component {
 		this.setState({ loading: true });
 		this.fetchData();
 		this.setState({ loading: false });
-		if (this.state.data.length) {
+		if (this.state.data?.length) {
 			this.renderTableData();
 			this.setState({ noData: true });
 		}
@@ -129,6 +129,7 @@ class Search extends Component {
 
 	render() {
 		const { selectedOptionMulti, pembina } = this.state;
+		console.log(this.state)
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -159,14 +160,14 @@ class Search extends Component {
 								placeholder="Pencarian Nama Perguruan Tinggi"
 							/>
 							<div className="d-flex">
-								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
+								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleApplyClick()}>
 									Search
 								</button>
 								<div className="ml-auto">{this.props.user.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
 							</div>
 						</div>
 						<div className="card card-default">
-							{this.state.data.length ? (<div className="card-header">Jumlah Pencarian : {this.state.data.length}</div>) : (<div className="card-header">Search results</div>)}							<Table striped bordered hover>
+							{this.state.data?.length ? (<div className="card-header">Jumlah Pencarian : {this.state.data.length}</div>) : (<div className="card-header">Search results</div>)}							<Table striped bordered hover>
 								<thead>
 									<tr>
 										<th>No. </th>
@@ -176,7 +177,7 @@ class Search extends Component {
 								<tbody>{this.renderTableData()}</tbody>
 							</Table>
 							<div className="card-footer">
-								<div >{!this.state.data.length > 0 && this.state.noData && (<h3 className=" text-center">Data tidak ditemukan</h3>)}</div>
+								<div >{!this.state.data?.length > 0 && this.state.noData && (<h3 className=" text-center">Data tidak ditemukan</h3>)}</div>
 							</div>
 						</div>
 					</Col>

pages/app/sanksi/proses.js

@@ -25,6 +25,7 @@ import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 import { updatePddikti } from "../../../actions/sanksi";
 import { ENV } from "../../../env";
 import Swal from "sweetalert2";
+import Redudansi from "../../../components/Sanksi/Redudansi";
 
 
 
@@ -256,7 +257,13 @@ class ProsesSanksi extends Component {
 	};
 	setDataSuratBA = (data) => {
 		this.setState({ dataSuratBA: data });
-		console.log(this.state.dataSuratBA)
+
+	};
+	setDataStatusLaporan = async (data) => {
+		await this.setState({ dataStatusLaporan: data });
+		const thisclose = data.selectedOption.value
+		this.setState({ thisclose })
+
 
 	};
 	validation = (activeStep) => {
@@ -281,7 +288,7 @@ class ProsesSanksi extends Component {
 				});
 			} else {
 				this.setState({
-					activeStep: "6"
+					activeStep: "7"
 				});
 			}
 		} else {
@@ -304,7 +311,7 @@ class ProsesSanksi extends Component {
 				});
 			} else {
 				this.setState({
-					activeStep: "6"
+					activeStep: "7"
 				});
 			}
 		}
@@ -321,7 +328,7 @@ class ProsesSanksi extends Component {
 	};
 
 	render() {
-		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA } = this.state
+		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, thisclose } = this.state
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -360,7 +367,7 @@ class ProsesSanksi extends Component {
 												})}
 												onClick={this.toggleStep("2")}
 											>
-												<h4 className="text-left my-3">2. Hasil Evaluasi</h4>
+												<h4 className="text-left my-3">2. Status Laporan</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -370,8 +377,9 @@ class ProsesSanksi extends Component {
 													active: this.state.activeStep === "3",
 												})}
 												onClick={this.toggleStep("3")}
+												disabled={thisclose === "Ditutup"}
 											>
-												<h4 className="text-left my-3">3. Penetapan Jenis Pelanggaran</h4>
+												<h4 className="text-left my-3">3. Hasil Evaluasi</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -381,8 +389,9 @@ class ProsesSanksi extends Component {
 													active: this.state.activeStep === "4",
 												})}
 												onClick={this.toggleStep("4")}
+												disabled={thisclose === "Ditutup"}
 											>
-												<h4 className="text-left my-3">4. Berita Acara Pleno</h4>
+												<h4 className="text-left my-3">4. Penetapan Jenis Pelanggaran</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -392,8 +401,9 @@ class ProsesSanksi extends Component {
 													active: this.state.activeStep === "5",
 												})}
 												onClick={this.toggleStep("5")}
+												disabled={thisclose === "Ditutup"}
 											>
-												<h4 className="text-left my-3">5. Penetapan Sanksi</h4>
+												<h4 className="text-left my-3">5. Berita Acara Pleno</h4>
 											</NavLink>
 										</NavItem>
 										<NavItem style={stepNavitemStyle}>
@@ -402,10 +412,23 @@ class ProsesSanksi extends Component {
 												className={classnames({
 													active: this.state.activeStep === "6",
 												})}
+												onClick={this.toggleStep("6")}
+												disabled={thisclose === "Ditutup"}
+											>
+												<h4 className="text-left my-3">6. Penetapan Sanksi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "7",
+												})}
 												onClick={this.validation}
+												disabled={thisclose === "Ditutup"}
 											// onClick={this.toggleStep("6")}
 											>
-												<h4 className="text-left my-3">6. Ringkasan</h4>
+												<h4 className="text-left my-3">7. Ringkasan</h4>
 											</NavLink>
 										</NavItem>
 									</Nav>
@@ -425,6 +448,26 @@ class ProsesSanksi extends Component {
 											</div>
 										</TabPane>
 										<TabPane tabId="2">
+											<div className="pt-3 mb-3">
+												<h2>Status Laporan</h2>
+												<Card className="card-default">
+
+													<CardBody>
+														<Redudansi setDataStatusLaporan={this.setDataStatusLaporan} id={pelaporan.data?._id}  role={this.props?.user?.role.id}/>
+													</CardBody>
+												</Card>
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("1")}>
+													<span className="font-color-white">Previous</span>
+												</Button>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("3")} disabled={thisclose === "Ditutup"}>
+													<span className="font-color-white">Next</span>
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="3">
 											<div className="pt-3 mb-3">
 												<h2>Hasil Evaluasi</h2>
 												<Card className="card-default">
@@ -439,43 +482,43 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("1")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("2")}>
 													<span className="font-color-white">Previous</span>
 												</Button>
-												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("3")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("4")}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>
 										</TabPane>
-										<TabPane tabId="3">
+										<TabPane tabId="4">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Jenis Pelanggaran</h2>
 												<TablePenetapanSanksi query={this.props.query} handleDelegasi={this.handleDelegasi} handleAutoSave={this.handleAutoSave} setCheckedData={this.setCheckedData} dataPelanggaran={dataPelanggaran} />
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("2")}>
+												<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("4")}>
+												<Button className="ml-auto btn-login color-3e3a8e" color onClick={this.toggleStep("5")}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>
 										</TabPane>
-										<TabPane tabId="4">
+										<TabPane tabId="5">
 											<Card>
 												<BeritaAcara query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} setDataSuratBA={this.setDataSuratBA} dataLaporan={pelaporan} dataSuratBA={dataSuratBA} role={this.props?.user?.role.id} />
 											</Card>
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("3")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
 													<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.toggleStep("6")}>
 													<span className="font-color-white">Next</span>
 												</Button>
 											</div>
 										</TabPane>
-										<TabPane tabId="5">
+										<TabPane tabId="6">
 											<div className="pt-3 mb-3">
 												<h2>Penetapan Sanksi</h2>
 												{this.state.listSanksi && <UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} listSanksi={this.state.listSanksi} query={this.props.query} handleAutoSave={this.handleAutoSave} dataPelanggaran={this.state.dataPelanggaran} dataSuratBA={dataSuratBA} />}
@@ -512,7 +555,7 @@ class ProsesSanksi extends Component {
 											</FormGroup>
 											<hr />
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("4")}>
+												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("5")}>
 													<span className="font-color-white">Previous</span>
 												</Button>
 												<Button className="ml-auto btn-login color-3e3a8e" color onClick={() => { this.validation() }}>
@@ -520,7 +563,7 @@ class ProsesSanksi extends Component {
 												</Button>
 											</div>
 										</TabPane>
-										<TabPane tabId="6">
+										<TabPane tabId="7">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
 												{pelaporan.data ? <Ringkasan dataSuratBA={dataSuratBA} query={this.props.query} dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran?.data} dataPelanggaranBA={this.state.dataPelanggaran} dataUpload={dataUpload} /> : <Loader />}
@@ -551,7 +594,7 @@ class ProsesSanksi extends Component {
 											</div>
 											<hr />
 											<div className="d-flex">
-												<Button color className="btn-login color-3e3a8e" onClick={this.toggleStep("5")}>
+												<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}

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

@@ -16,7 +16,7 @@ class JawabanCabutSanksi extends Component {
 
 	componentDidMount = async () => {
 		const { token } = this.props;
-		const sanksi = await getSanksi(token, { cabutSanksi: true, jawaban: true });
+		const sanksi = await getSanksi(token, { cabutSanksi: true, jawaban: false });
 		this.setState({ sanksi });
 	};