commit

components/NaikSanksi/DetailSanksi.js

@@ -95,7 +95,7 @@ function DetailSanksi({ data, noTitle = false }) {
 						</Col>
 					</FormGroup>
 					<FormGroup row>
-						<Col md="4">Nomor Surat:</Col>
+						<Col md="4">Sanksi:</Col>
 						<Col md="8">
 							<strong>{data.pelanggaran.map((e) => e.sanksi)}</strong>
 						</Col>

components/NaikSanksi/InputTanggal.js

@@ -4,7 +4,7 @@ import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import { connect } from "react-redux";
-import { getOneSanksi, editTmt } from "@/actions/sanksi";
+import { getOneSanksi, update } from "@/actions/sanksi";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { addDays, addMonths } from 'date-fns';
@@ -13,6 +13,7 @@ import moment from "moment";
 import 'moment/min/locales';
 moment.locale('id');
 import Router from "next/router";
+import { getPelanggaranSanksi } from "@/actions/pelanggaran";
 import Select from "react-select";
 
 
@@ -42,8 +43,11 @@ const checkIfFilesAreCorrectType = (files) => {
 };
 
 const rekomendasiSchema = Yup.object().shape({
+    no_surat: Yup.string().required("Wajib isi no sanksi"),
+    keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
     from_date: Yup.date().required("Wajib diisi"),
     to_date: Yup.date().required("Wajib diisi"),
+    pelanggaran_id: Yup.array().required("Wajib isi pelanggaran"),
     dokumen: Yup.array().required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
@@ -76,9 +80,8 @@ class InputTanggal extends Component {
             to_date: "",
             startDay: tmt_awal,
             sanksi: {},
-            nomorSanksi: "",
-            keterangan: "",
-            listSanksi: "",
+            keteranganLaporan: "",
+            tmtCheck: false,
         };
     }
 
@@ -86,8 +89,8 @@ class InputTanggal extends Component {
         const { token, query } = this.props;
         const { id } = query;
         const sanksi = await getOneSanksi(token, id);
-        this.setState({ sanksi })
-        console.log(this.state.sanksi)
+        const { data: listSanksi } = await getPelanggaranSanksi(token)
+        this.setState({ sanksi, listSanksi })
     }
 
 
@@ -136,42 +139,39 @@ class InputTanggal extends Component {
     static getInitialProps = async ({ query }) => {
         return { query };
     };
-    setKeterangan = (e) => {
-        this.setState({ keterangan: e.target.value });
-    };
-    handleChangeListSanksi = (listSanksi) => {
-        this.setState({ listSanksi });
-    };
-    setListSanksi = (ls) => {
-        this.setState({ listSanksi: ls.target.value });
-    };
-    setNomorSanksi = (e) => {
-        this.setState({ nomorSanksi: e.target.value }, this.toRingkasan);
+    setKeteranganPelaporan = (e) => {
+        this.setState({ keteranganLaporan: e.target.value });
     };
+    handleTmtCheck = () => {
+        this.setState({ tmtCheck: !this.state.tmtCheck });
+    }
 
 
     handelSimpan = async (data) => {
         const { token, query } = this.props;
         const { id } = query;
         const formdata = new FormData();
-        formdata.append("from_date", this.state.from_date);
-        formdata.append("to_date", this.state.to_date);
+        formdata.append("no_surat", data.no_surat);
+        formdata.append("keterangan", data.keterangan);
+        formdata.append("from_date", data.from_date);
+        formdata.append("to_date", data.to_date);
+        formdata.append("pelanggaran_id", data.pelanggaran_id);
         this.state.files.forEach((e) => {
             formdata.append("dokumen", e);
         });
         const toastid = toast.loading("Please wait...");
-        const added = await editTmt(token, id, formdata);
+        const added = await update(token, id, formdata);
         if (!added) {
             toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
         } else {
             toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-            Router.push("/app/perpanjangan-sanksi");
+            Router.push("/app/naik-sanksi");
 
         }
 
     };
     render() {
-        const { files, sanksi } = this.state;
+        const { files } = this.state;
 
         const thumbs = files.map((file, index) => (
             <div md={3} key={index}>
@@ -181,99 +181,154 @@ class InputTanggal extends Component {
         return (
             <Card className="card-default">
                 <CardBody>
-                    <p className="lead bb">Dokumen Surat Perubahan Sanksi</p>
+                    <p className="lead bb">Dokumen Surat Naik Sanksi</p>
                     <Formik
                         initialValues={{
-                            dokumen: [],
+                            no_surat: "",
+                            keterangan: "",
                             from_date: "",
                             to_date: "",
-
+                            pelanggaran_id: [],
+                            dokumen: [],
                         }}
                         validationSchema={rekomendasiSchema}
-                        onSubmit={async (data) => {
-                            this.setState({ data });
-                            await this.handelSimpan();
-                        }}
+                        onSubmit={this.handelSimpan}
                     >
                         {() => (
                             <Form className="form-horizontal">
                                 <FormGroup row>
-                                    <label className="col-md-2 col-form-label">Nomor Surat:</label>
+                                    <label className="col-md-2 col-form-label">Nomor Sanksi</label>
                                     <div className="col-md-10">
-                                        <Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
+                                        <Field name="no_surat">{({ field }) => <Input type="textarea" placeholder="Nomor Sanksi" {...field} />}</Field>
+                                        <ErrorMessage name="no_surat" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
-                                <FormGroup row className="mt-3">
+                                <FormGroup row>
                                     <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 />
+                                        <Field name="keterangan">{({ field }) => <Input type="textarea" placeholder="Keterangan" {...field} />}</Field>
+                                        <ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
-                                <FormGroup row className="mt-3">
-                                    <label className="col-md-2 col-form-label">Tanggal Perpanjangan Sanksi :</label>
-                                    <div className="col-md-6">
-                                        <Row >
-                                            <Col>
-                                                <FormGroup>
-                                                    <Field name="from_date">
-                                                        {({ field, form }) => (
-                                                            <DatePicker
-                                                                selected={this.state.from_date}
-                                                                onChange={(from_date) => {
-                                                                    this.setState({ from_date })
-                                                                    form.setFieldValue(field.name, from_date);
-                                                                }}
-                                                                dateFormat="dd/MM/yyyy"
-                                                                maxDate={this.state.startDay}
-                                                                placeholderText="Dari Tanggal"
-                                                                locale={id}
-                                                                className="form-control bg-white"
-                                                            />
-                                                        )}
-                                                    </Field>
-                                                    <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
-                                                </FormGroup>
-                                            </Col>
-                                            <Col>
-                                                <FormGroup>
-                                                    <Field name="to_date">
-                                                        {({ field, form }) => (
-                                                            <DatePicker
-                                                                selected={this.state.to_date}
-                                                                onChange={(to_date) => {
-                                                                    this.setState({ to_date })
-                                                                    form.setFieldValue(field.name, to_date);
-                                                                }}
-                                                                dateFormat="dd/MM/yyyy"
-                                                                minDate={this.state.from_date}
-                                                                maxDate={addMonths(new Date(this.state.from_date), 6)}
-                                                                placeholderText="Sampai tanggal"
-                                                                locale={id}
-                                                                className="form-control bg-white"
-                                                            />
-                                                        )}
-                                                    </Field>
-                                                    <ErrorMessage name="to_date" component="div" className="form-text text-danger" />
-                                                </FormGroup>
-                                            </Col>
-                                        </Row>
+                                <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>
                                 </FormGroup>
+                                {this.state.tmtCheck && (
+                                    <FormGroup row className="mt-3">
+                                        <label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
+                                        <span className="col-sm-3 float-left">
+                                            <Field name="from_date">
+                                                {({ field, form }) => (
+                                                    <DatePicker
+                                                        selected={this.state.from_date}
+                                                        onChange={(from_date) => {
+                                                            this.setState({ from_date })
+                                                            form.setFieldValue(field.name, from_date);
+                                                        }}
+                                                        dateFormat="dd/MM/yyyy"
+                                                        maxDate={this.state.startDay}
+                                                        placeholderText="Dari Tanggal"
+                                                        locale={id}
+                                                        className="form-control bg-white"
+                                                    />
+                                                )}
+                                            </Field>
+                                            <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
+                                        </span>
+                                    </FormGroup>
+                                )}
+                                {!this.state.tmtCheck && (
+                                    <FormGroup row className="mt-3">
+                                        <label className="col-md-2 col-form-label">Isi TMT :</label>
+                                        <div className="col-md-6">
+                                            <Row >
+                                                <Col>
+                                                    <FormGroup>
+                                                        <Field name="from_date">
+                                                            {({ field, form }) => (
+                                                                <DatePicker
+                                                                    selected={this.state.from_date}
+                                                                    onChange={(from_date) => {
+                                                                        this.setState({ from_date })
+                                                                        form.setFieldValue(field.name, from_date);
+                                                                    }}
+                                                                    dateFormat="dd/MM/yyyy"
+                                                                    maxDate={this.state.startDay}
+                                                                    placeholderText="Dari Tanggal"
+                                                                    locale={id}
+                                                                    className="form-control bg-white"
+                                                                />
+                                                            )}
+                                                        </Field>
+                                                        <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
+                                                    </FormGroup>
+                                                </Col>
+                                                <Col>
+                                                    <FormGroup>
+                                                        <Field name="to_date">
+                                                            {({ field, form }) => (
+                                                                <DatePicker
+                                                                    selected={this.state.to_date}
+                                                                    onChange={(to_date) => {
+                                                                        this.setState({ to_date })
+                                                                        form.setFieldValue(field.name, to_date);
+                                                                    }}
+                                                                    dateFormat="dd/MM/yyyy"
+                                                                    minDate={this.state.from_date}
+                                                                    maxDate={addMonths(new Date(this.state.from_date), 6)}
+                                                                    placeholderText="Sampai tanggal"
+                                                                    locale={id}
+                                                                    className="form-control bg-white"
+                                                                />
+                                                            )}
+                                                        </Field>
+                                                        <ErrorMessage name="to_date" component="div" className="form-text text-danger" />
+                                                    </FormGroup>
+                                                </Col>
+                                            </Row>
+                                        </div>
+                                    </FormGroup>
+                                )}
+                                {!this.state.tmtCheck && (
+                                    <FormGroup row className="mt-1">
+                                        <label className="col-md-2 col-form-label">TMT berlaku</label>
+                                        <div className="col-md-10 mt-2">
+                                            <b>{this.state.from_date ? moment(this.state.from_date).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.to_date ? moment(this.state.to_date).format("DD-MM-YYYY") : "-"}</b>
+                                        </div>
+                                    </FormGroup>
+                                )}
+                                {!this.state.tmtCheck && (
+                                    <FormGroup row className="mt-1">
+                                        <label className="col-md-2 col-form-label">TMT</label>
+                                        <div className="col-md-10 mt-2">
+                                            <b>{this.state.to_date ? moment(this.state.to_date).diff(this.state.from_date, 'month') : "-"} bulan</b>
+                                        </div>
+                                    </FormGroup>
+                                )}
+
                                 <FormGroup row className="mt-3">
                                     <label className="col-md-2 col-form-label">List sanksi </label>
                                     <div className="col-md-10">
-                                        <Select
+                                        <Field name="pelanggaran_id">{({ field, form }) => <Select
                                             options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
                                             // formatOptionLabel={formatOptionLabel}
                                             isMulti
                                             onChange={(e) => {
-                                                this.handleChangeListSanksi(e);
+                                                form.setFieldValue(field.name, e);
                                             }}
-                                        />
+                                        />}</Field>
+                                        <ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
                                     </div>
                                 </FormGroup>
                                 <FormGroup row className="mt-3">
-                                    <label className="col-md-2 col-form-label">Dokumen Surat Perubahan Sanksi : <span className="text-danger">*</span></label>
+                                    <label className="col-md-2 col-form-label">Dokumen Perpanjangan Sanksi : <span className="text-danger">*</span></label>
                                     <div className="col-md-10">
                                         <Field name="dokumen">
                                             {({ field, form }) => (

components/TurunSanksi/DetailSanksi.js

@@ -0,0 +1,132 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import 'moment/min/locales';
+moment.locale('id');
+import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
+import { API_URL } from "@/env";
+
+function DetailSanksi({ data, noTitle = false }) {
+	return (
+		<Card className="card-default">
+			<CardBody>
+				{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
+				<form className="form-horizontal">
+					<FormGroup row>
+						<Col md="4">Nomor Sanksi:</Col>
+						<Col md="8">
+							<strong>{data.no_sanksi}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Nama Perguruan Tinggi:</Col>
+						<Col md="8">
+							<strong>{data.laporan.pt.nama}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Keterangan:</Col>
+						<Col md="8">
+							<Scrollable height="100px" className="list-group">
+								<p>{data.keterangan}</p>
+							</Scrollable>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Dibuat Pada:</Col>
+						<Col md="8">
+							<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md={12}>
+							<div className="card b">
+								<div className="card-body bb">
+									<Table responsive>
+										<thead>
+											<tr>
+												<th>Jenis Pelanggaran</th>
+												<th>Sanksi</th>
+											</tr>
+										</thead>
+										<tbody>
+											{data.pelanggaran.map((jp, index) => (
+												<tr key={jp._id}>
+													<td width={50}>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<p>{jp.pelanggaran}</p>
+																	<p>TMT : {jp.tmt_bulan} Bulan</p>
+																	<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+													<td width={50}>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<p>{jp.sanksi}</p>
+																	<p>Keterangan : {jp.keterangan_sanksi}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+												</tr>
+											))}
+										</tbody>
+									</Table>
+								</div>
+							</div>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Nomor Surat:</Col>
+						<Col md="8">
+							<strong>{data.no_sanksi}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">TMT Berlaku:</Col>
+						<Col md="8">
+							{/* <strong>{moment(data.masa_berlaku.from_date).format("D MMMM YYYY")} - {moment(data.masa_berlaku.to_date).format("D MMMM YYYY")} </strong> */}
+							{data.masa_berlaku?.to_date ? (<strong>{moment(data.masa_berlaku?.from_date).format("DD-MMMM-YYYY")} - {moment(data.masa_berlaku?.to_date).format("DD-MMMM-YYYY")}</strong>) : (<strong className="m-0">6 Bulan</strong>)}
+
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Sanksi:</Col>
+						<Col md="8">
+							<strong>{data.pelanggaran.map((e) => e.sanksi)}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Dokumen Sanksi:</Col>
+						<Col md="8">
+							<Scrollable height="120px" className="list-group">
+								<table className="table table-bordered bg-transparent">
+									<tbody>
+										{data.dokumen.map((e) => (
+											<tr>
+												<td>
+													<em className="fa-lg far fa-file-code"></em>
+												</td>
+												<td>
+													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+														{e.judul}
+													</a>
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</Scrollable>
+						</Col>
+					</FormGroup>
+				</form>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default DetailSanksi;

components/TurunSanksi/InputTanggal.js

@@ -0,0 +1,395 @@
+import React, { Component } from "react";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import { connect } from "react-redux";
+import { getOneSanksi, update } from "@/actions/sanksi";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { addDays, addMonths } from 'date-fns';
+import id from 'date-fns/locale/id';
+import moment from "moment";
+import 'moment/min/locales';
+moment.locale('id');
+import Router from "next/router";
+import { getPelanggaranSanksi } from "@/actions/pelanggaran";
+import Select from "react-select";
+
+
+const selectInstanceId = 1;
+const checkIfFilesAreTooBig = (files) => {
+    let valid = true;
+    if (files) {
+        files.map((file) => {
+            if (file.size > 15 * 1024 * 1024) {
+                valid = false;
+            }
+        });
+    }
+    return valid;
+};
+
+const checkIfFilesAreCorrectType = (files) => {
+    let valid = true;
+    if (files) {
+        files.map((file) => {
+            if (!["image/jpeg", "image/png"].includes(file.type)) {
+                valid = false;
+            }
+        });
+    }
+    return valid;
+};
+
+const rekomendasiSchema = Yup.object().shape({
+    no_surat: Yup.string().required("Wajib isi no sanksi"),
+    keterangan: Yup.string().min(3, "Minimal 3 Huruf").max(200).required("Wajib isi keterangan"),
+    from_date: Yup.date().required("Wajib diisi"),
+    to_date: Yup.date().required("Wajib diisi"),
+    pelanggaran_id: Yup.array().required("Wajib isi pelanggaran"),
+    dokumen: Yup.array().required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+});
+
+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;
+    }
+}
+
+class InputTanggal extends Component {
+    constructor(props) {
+        super(props);
+        const tmt_awal = new Date();
+        this.state = {
+            dropdownOpen: false,
+            splitButtonOpen: false,
+            files: [],
+            sanksi: {},
+            data: {},
+            from_date: "",
+            to_date: "",
+            startDay: tmt_awal,
+            sanksi: {},
+            keteranganLaporan: "",
+            tmtCheck: false,
+        };
+    }
+
+    async componentDidMount() {
+        const { token, query } = this.props;
+        const { id } = query;
+        const sanksi = await getOneSanksi(token, id);
+        const { data: listSanksi } = await getPelanggaranSanksi(token)
+        this.setState({ sanksi, listSanksi })
+    }
+
+
+    toggleSplit = () => {
+        this.setState({
+            splitButtonOpen: !this.state.splitButtonOpen,
+        });
+    };
+
+    toggleDropDown = () => {
+        this.setState({
+            dropdownOpen: !this.state.dropdownOpen,
+        });
+    };
+
+    onDrop = (files) => {
+        this.setState({
+            files: files.map((file) =>
+                Object.assign(file, {
+                    preview: URL.createObjectURL(file),
+                })
+            ),
+            stat: "Added " + files.length + " file(s)",
+        });
+    };
+
+    uploadFiles = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.setState({
+            stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+        });
+    };
+
+    clearFiles = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.setState({
+            stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+        });
+        this.setState({
+            files: [],
+        });
+    };
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    };
+    setKeteranganPelaporan = (e) => {
+        this.setState({ keteranganLaporan: e.target.value });
+    };
+    handleTmtCheck = () => {
+        this.setState({ tmtCheck: !this.state.tmtCheck });
+    }
+
+
+    handelSimpan = async (data) => {
+        const { token, query } = this.props;
+        const { id } = query;
+        const formdata = new FormData();
+        formdata.append("no_surat", data.no_surat);
+        formdata.append("keterangan", data.keterangan);
+        formdata.append("from_date", data.from_date);
+        formdata.append("to_date", data.to_date);
+        formdata.append("pelanggaran_id", data.pelanggaran_id);
+        this.state.files.forEach((e) => {
+            formdata.append("dokumen", e);
+        });
+        const toastid = toast.loading("Please wait...");
+        const added = await update(token, id, formdata);
+        if (!added) {
+            toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+        } else {
+            toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+            Router.push("/app/naik-sanksi");
+
+        }
+
+    };
+    render() {
+        const { files } = this.state;
+
+        const thumbs = files.map((file, index) => (
+            <div md={3} key={index}>
+                <span className="text-left">{index + 1}.{file.name}</span>
+            </div>
+        ));
+        return (
+            <Card className="card-default">
+                <CardBody>
+                    <p className="lead bb">Dokumen Surat Turun Sanksi</p>
+                    <Formik
+                        initialValues={{
+                            no_surat: "",
+                            keterangan: "",
+                            from_date: "",
+                            to_date: "",
+                            pelanggaran_id: "",
+                            dokumen: [],
+                        }}
+                        validationSchema={rekomendasiSchema}
+                        onSubmit={this.handelSimpan}
+                    >
+                        {() => (
+                            <Form className="form-horizontal">
+                                <FormGroup row>
+                                    <label className="col-md-2 col-form-label">Nomor Sanksi</label>
+                                    <div className="col-md-10">
+                                        <Field name="no_surat">{({ field }) => <Input type="textarea" placeholder="Nomor Sanksi" {...field} />}</Field>
+                                        <ErrorMessage name="no_surat" component="div" className="form-text text-danger" />
+                                    </div>
+                                </FormGroup>
+                                <FormGroup row>
+                                    <label className="col-md-2 col-form-label">Keterangan</label>
+                                    <div className="col-md-10">
+                                        <Field name="keterangan">{({ field }) => <Input type="textarea" 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">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>
+                                </FormGroup>
+                                {this.state.tmtCheck && (
+                                    <FormGroup row className="mt-3">
+                                        <label className="col-md-2 col-form-label">Tanggal Penetapan Sanksi</label>
+                                        <span className="col-sm-3 float-left">
+                                            <Field name="from_date">
+                                                {({ field, form }) => (
+                                                    <DatePicker
+                                                        selected={this.state.from_date}
+                                                        onChange={(from_date) => {
+                                                            this.setState({ from_date })
+                                                            form.setFieldValue(field.name, from_date);
+                                                        }}
+                                                        dateFormat="dd/MM/yyyy"
+                                                        maxDate={this.state.startDay}
+                                                        placeholderText="Dari Tanggal"
+                                                        locale={id}
+                                                        className="form-control bg-white"
+                                                    />
+                                                )}
+                                            </Field>
+                                            <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
+                                        </span>
+                                    </FormGroup>
+                                )}
+                                {!this.state.tmtCheck && (
+                                    <FormGroup row className="mt-3">
+                                        <label className="col-md-2 col-form-label">Isi TMT :</label>
+                                        <div className="col-md-6">
+                                            <Row >
+                                                <Col>
+                                                    <FormGroup>
+                                                        <Field name="from_date">
+                                                            {({ field, form }) => (
+                                                                <DatePicker
+                                                                    selected={this.state.from_date}
+                                                                    onChange={(from_date) => {
+                                                                        this.setState({ from_date })
+                                                                        form.setFieldValue(field.name, from_date);
+                                                                    }}
+                                                                    dateFormat="dd/MM/yyyy"
+                                                                    maxDate={this.state.startDay}
+                                                                    placeholderText="Dari Tanggal"
+                                                                    locale={id}
+                                                                    className="form-control bg-white"
+                                                                />
+                                                            )}
+                                                        </Field>
+                                                        <ErrorMessage name="from_date" component="div" className="form-text text-danger" />
+                                                    </FormGroup>
+                                                </Col>
+                                                <Col>
+                                                    <FormGroup>
+                                                        <Field name="to_date">
+                                                            {({ field, form }) => (
+                                                                <DatePicker
+                                                                    selected={this.state.to_date}
+                                                                    onChange={(to_date) => {
+                                                                        this.setState({ to_date })
+                                                                        form.setFieldValue(field.name, to_date);
+                                                                    }}
+                                                                    dateFormat="dd/MM/yyyy"
+                                                                    minDate={this.state.from_date}
+                                                                    maxDate={addMonths(new Date(this.state.from_date), 6)}
+                                                                    placeholderText="Sampai tanggal"
+                                                                    locale={id}
+                                                                    className="form-control bg-white"
+                                                                />
+                                                            )}
+                                                        </Field>
+                                                        <ErrorMessage name="to_date" component="div" className="form-text text-danger" />
+                                                    </FormGroup>
+                                                </Col>
+                                            </Row>
+                                        </div>
+                                    </FormGroup>
+                                )}
+                                {!this.state.tmtCheck && (
+                                    <FormGroup row className="mt-1">
+                                        <label className="col-md-2 col-form-label">TMT berlaku</label>
+                                        <div className="col-md-10 mt-2">
+                                            <b>{this.state.from_date ? moment(this.state.from_date).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.to_date ? moment(this.state.to_date).format("DD-MM-YYYY") : "-"}</b>
+                                        </div>
+                                    </FormGroup>
+                                )}
+                                {!this.state.tmtCheck && (
+                                    <FormGroup row className="mt-1">
+                                        <label className="col-md-2 col-form-label">TMT</label>
+                                        <div className="col-md-10 mt-2">
+                                            <b>{this.state.to_date ? moment(this.state.to_date).diff(this.state.from_date, '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">
+                                        <Field name="pelanggaran_id">{({ field, form }) => <Select
+                                            options={this.props.listSanksi.map(e => ({ value: e, label: e }))}
+                                            // formatOptionLabel={formatOptionLabel}
+                                            isMulti
+                                            onChange={(e) => {
+                                                form.setFieldValue(field.name, e);
+                                            }}
+                                        />}</Field>
+                                        <ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
+                                    </div>
+                                </FormGroup>
+                                <FormGroup row className="mt-3">
+                                    <label className="col-md-2 col-form-label">Dokumen Perpanjangan Sanksi : <span className="text-danger">*</span></label>
+                                    <div className="col-md-10">
+                                        <Field name="dokumen">
+                                            {({ field, form }) => (
+                                                <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 {...getInputProps()} />
+                                                                <div className="dropzone-previews flex">
+                                                                    <div className="dropzone-style-1">
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
+                                                                            </div>
+                                                                        }
+                                                                        </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>
+                                    </div>
+                                </FormGroup>
+                                <FormGroup row>
+                                    <div className="col-xl-10">
+                                        <Button color className="color-3e3a8e btn-login" type="submit">
+                                            <span className="font-color-white">Kirim</span>
+                                        </Button>
+                                    </div>
+                                </FormGroup>
+                            </Form>
+                        )}
+                    </Formik>
+                </CardBody>
+            </Card>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(InputTanggal);

components/TurunSanksi/TableLaporan.js

@@ -0,0 +1,89 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+import 'moment/min/locales';
+moment.locale('id');
+
+function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
+	return (
+		<div className="card b ">
+			<div className="card-body card-over">
+				{listData && (
+					<Datatable options={{ responsive: false, ordering: true }}>
+						<table className="table w-100" data-order='[[3, "desc"]]'>
+							<thead>
+								<tr>
+									<th>No.Laporan</th>
+									<th>Deskripsi Laporan</th>
+									{<th>TMT Berlaku</th>}
+									{/* {!noBy && <th>Dibuat Oleh</th>} */}
+									{/* <th>Created</th> */}
+									<th>Aksi</th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.map((data) => {
+									return (
+										<tr key={data._id}>
+											<td>
+												{/* <td>{data.no_laporan}</td> */}
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<h4>{data.no_laporan}</h4>
+															<p>{moment(data.createdAt).format("DD-MMMM-YYYY")}</p>
+														</div>
+													</div>
+												</div>
+											</td>
+
+											<td>
+												<div className="table-desc">
+													<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>
+																<p className="w-105">{data.keterangan}</p>
+															</div>
+														</div>
+													</div>
+												</div>
+											</td>
+
+
+											<td>
+												{/* {data.sanksi.masa_berlaku?.to_date ? (<h4 className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</h4>) : (<h4 className="m-0">6 Bulan</h4>)} */}
+												<h4 className="w-105">Sanksi Administratif: {data.sanksi.pelanggaran.map((e) => e.label_sanksi)}</h4>
+												<p className="w-105">{data.sanksi.keterangan}</p>
+											</td>
+											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
+											<td>
+												<div className="ml-auto">
+													<Link
+														href={{
+															pathname: to,
+															query: { id: data.sanksi?._id },
+														}}
+													>
+														<Button className="btn-login" color>
+															<span className="font-color-white">
+																{linkName}
+															</span>
+														</Button>
+													</Link>
+												</div>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default TableLaporan;

components/TurunSanksi/TableRiwayat.js

@@ -0,0 +1,60 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import 'moment/min/locales';
+moment.locale('id');
+
+function TableRiwayat({ data, perbaikan }) {
+	return (
+		// <Datatable options={{ responsive: true }}>
+		<div className="card-over">
+			<table className="table table-striped my-4 w-100">
+				<thead>
+					<tr>
+						<th>Tanggal</th>
+						<th>Keterangan</th>
+						<th>Nomor Surat Sanksi</th>
+						<th>Dokumen Surat Sanksi</th>
+						<th>Dokumen Perbaikan</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>{moment(data.createdAt).format("D MMMM YYYY")}</td>
+						<td>{data.keterangan}</td>
+						<td>{data.no_sanksi}</td>
+						<td>
+							{data.dokumen.map((e, index) => (
+								<>
+									<em key="index" className="fa-lg far fa-file-code"></em>
+									<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+										{e.judul}
+									</a>
+									<br />
+								</>
+							))}
+						</td>
+						{perbaikan.length
+							? perbaikan.map((value) => (
+								<tr>
+									<td>
+										{value.dokumen.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+													{e.judul}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							))
+							: ""}
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		// </Datatable>
+	);
+}
+
+export default TableRiwayat;

pages/app/turun-sanksi/detail.js

@@ -0,0 +1,89 @@
+import React, { Component } from "react";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailSanksi from "@/components/PerpanjanganSanksi/DetailSanksi";
+import Link from "next/link";
+import DetailPT from "@/components/Main/DetailPT";
+import { getOneSanksi, addRekomendasiDelegasi } from "@/actions/sanksi";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+import TableRiwayat from "@/components/NaikSanksi/TableRiwayat"
+import InputTanggal from "../../../components/NaikSanksi/InputTanggal";
+import { getPelanggaran, getPelanggaranSanksi } from "@/actions/pelanggaran";
+
+
+
+class Detail extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+			files: [],
+			pt: {},
+			data: {},
+			listSanksi: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const idSanksi = query.id;
+		const sanksi = await getOneSanksi(token, idSanksi, { all: true });
+		const { data: listSanksi } = await getPelanggaranSanksi(token)
+		const pt = sanksi.data.laporan.pt;
+		this.setState({ sanksi, pt, listSanksi });
+
+	};
+
+
+	render() {
+		const { files, sanksi, pt, listSanksi } = this.state;
+		const { query, token } = this.props;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<span className="font-color-white">
+							Detail Perubahan Naik Sanksi
+						</span>
+						<div className="ml-auto">
+							<Link href="/app/naik-sanksi">
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
+							</Link>
+						</div>
+					</div>
+					{sanksi.data && (
+						<Row>
+
+							<Col xl="9">
+								<DetailSanksi data={sanksi.data} />
+								<InputTanggal query={query} token={token} data={sanksi.data} listSanksi={this.state.listSanksi} />
+								<Card className="card-default">
+									<CardHeader>
+										<CardTitle>Riwayat</CardTitle>
+									</CardHeader>
+									<CardBody>
+										<TableRiwayat data={sanksi.data} perbaikan={sanksi.data.perbaikan} />
+									</CardBody>
+								</Card>
+							</Col>
+							<Col lg="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
+						</Row>
+					)}
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Detail);

pages/app/turun-sanksi/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import { getSanksi } from "@/actions/sanksi";
+import TableLaporan from "@/components/NaikSanksi/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+
+class NaikSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
+			sanksi: {}
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const pelaporan = await getPelaporan(token, { sanksi: true });
+		const sanksi = await getSanksi(token)
+		this.setState({ pelaporan, sanksi });
+		console.log(this.state.pelaporan)
+	};
+
+	render() {
+		const { pelaporan, sanksi } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<span className="font-color-white">Perubahan Naik Sanksi</span>
+				</div>
+				<Row>
+					{/* <Col lg="12">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col> */}
+					<Col lg="12">{sanksi?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/naik-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(NaikSanksi);