add perpanjangan sanksi

actions/sanksi.js

@@ -1,4 +1,5 @@
 import axiosAPI from "../config/axios";
+import axios from "../config/axios";
 import { createLog } from "./log";
 
 export const createSanksi = async (token, id, data) => {
@@ -63,3 +64,8 @@ export const addRekomendasiDelegasi = async (token, id, data) => {
 		return false;
 	}
 };
+export const editTmt = async (token, id, data) => {
+	const res = await axios.put(`sanksi/tmt/update/${id}`, data, { headers: { Authorization: token } });
+	await createLog(token, { aktivitas: `Berhasil perpanjangan sanksi, id: ${id}` });
+	return res.data;
+};

components/Extras/calendar.view.js

@@ -3,7 +3,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Card, CardBody, CardHeader, CardTitle, Button, Row, Col, FormGroup, Input } from "reactstrap";
 import { getPelaporan, getOneLaporan, updateLaporan } from "@/actions/pelaporan";
 import { updateJadwal } from "@/actions/penjadwalan";
-import DetailLaporan from "@/components/Main/DetailLaporan";
+import DetailLaporan from "@/components/Penjadwalan/DetailLaporan";
 import Link from "next/link";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";

components/Layout/Menu.js

@@ -76,19 +76,19 @@ const Menu = [
 	{
 		name: "Rekomendasi Delegasi",
 		path: "/app/rekomendasi-delegasi",
-		icon: "icon-film",
+		icon: "icon-paper-plane",
 		translate: "sidebar.nav.REKOMENDASI_DELEGASI",
 	},
 	{
 		name: "Perpanjangan Sanksi",
 		path: "/app/perpanjangan-sanksi",
-		icon: "icon-film",
+		icon: "icon-pencil",
 		translate: "sidebar.nav.PERPANJANGAN_SANKSI",
 	},
 	{
 		name: "Perubahan Sanksi",
 		path: "/app/perubahan-sanksi",
-		icon: "icon-film",
+		icon: "fas fa-dna",
 		translate: "sidebar.nav.PERUBAHAN_SANKSI",
 		submenu: [
 			{

components/Pemeriksaan/DetailLaporan.js

@@ -0,0 +1,167 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+import { useSelector } from "react-redux";
+
+function DetailLaporan({ data, noTitle = false, noStatus = false }) {
+	const user = useSelector((state) => state.user);
+	return (
+		<>
+			{(!data.user.isPrivate || user?.role.id === 2020) && (
+				<>
+					{noTitle ? (
+						""
+					) : (
+						<div className="header-1">
+							<h2 className="card-title-1">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</h2>
+						</div>
+					)}
+					{data.user.nama && (
+						<FormGroup row>
+							<Col md="4">Nama Pelapor:</Col>
+							<Col md="8">
+								<strong>{data.user.nama}</strong>
+							</Col>
+						</FormGroup>
+					)}
+					<FormGroup row>
+						<Col md="4">Nomor yang dapat dihubungi:</Col>
+						<Col md="8">
+							<strong>
+								{data.user.no_hp} {data.user.verified && "(Terverifikasi)"}
+							</strong>
+						</Col>
+					</FormGroup>
+					{data.user.email && (
+						<FormGroup row>
+							<Col md="4">Email:</Col>
+							<Col md="8">
+								<strong>{data.user.email}</strong>
+							</Col>
+						</FormGroup>
+					)}
+
+					{data.user.isPublic && (
+						<>
+							{data.user.alamat && (
+								<FormGroup row>
+									<Col md="4">Alamat:</Col>
+									<Col md="8">
+										<strong>{data.user.alamat}</strong>
+									</Col>
+								</FormGroup>
+							)}
+							{data.user.foto && (
+								<FormGroup row>
+									<Col md="4">Foto Kartu Identitas:</Col>
+									<Col md="8">
+										<img src={data.user.foto.path} height={200} alt="Foto Identitas" />
+									</Col>
+								</FormGroup>
+							)}
+						</>
+					)}
+					{data.user.isPrivate && (
+						<FormGroup row>
+							<Col md="4">Dirahasiakan</Col>
+							<Col md="8">
+								<strong>Ya</strong>
+							</Col>
+						</FormGroup>
+					)}
+				</>
+			)}
+			{noTitle ? (
+				""
+			) : (
+				<div className="header-1">
+					<h2 className="card-title-1">Detail Laporan</h2>
+				</div>
+			)}
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Laporan:</Col>
+					<Col md="8">
+						<strong>{data.no_laporan}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi yang Dilaporkan:</Col>
+					<Col md="8">
+						<strong>{data.pt.nama}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="125px" className="list-group">
+							<ul>
+								{data.pelanggaran.map((e) => (
+									<li>{e.pelanggaran}</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</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>
+				{!noStatus && data.aktif ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-danger">Ditutup</div>
+						</Col>
+					</FormGroup>
+				)}
+				{/* <FormGroup row>
+					<Col md="4">Prioritas:</Col>
+					<Col md="8">{data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>}</Col>
+				</FormGroup> */}
+				<FormGroup row>
+					<Col md="4">Dokumen Pendukung:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.dokumen.map((e, index) => (
+										<tr key={`files-${index}`}>
+											<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>
+		</>
+	);
+}
+
+export default DetailLaporan;

components/Penjadwalan/DetailLaporan.js

@@ -1,124 +1,167 @@
-import React, { Component } from "react";
-import Select from "react-select";
 import Scrollable from "@/components/Common/Scrollable";
-import { addStatus } from "@/actions/pelaporan";
-import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+import { useSelector } from "react-redux";
 
-const status = [
-	{ value: "Ditindaklanjuti Dikti Ristek", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
-	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
-	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
-];
-const selectInstanceId = 1;
-export class DetailLaporan extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			selectedOption: null,
-		};
-	}
+function DetailLaporan({ data, noTitle = false, noStatus = false }) {
+	const user = useSelector((state) => state.user);
+	return (
+		<>
+			{(!data.user.isPrivate || user?.role.id === 2020) && (
+				<>
+					{noTitle ? (
+						""
+					) : (
+						<div className="header-1">
+							<h2 className="card-title-1">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</h2>
+						</div>
+					)}
+					{data.user.nama && (
+						<FormGroup row>
+							<Col md="4">Nama Pelapor:</Col>
+							<Col md="8">
+								<strong>{data.user.nama}</strong>
+							</Col>
+						</FormGroup>
+					)}
+					<FormGroup row>
+						<Col md="4">Nomor yang dapat dihubungi:</Col>
+						<Col md="8">
+							<strong>
+								{data.user.no_hp} {data.user.verified && "(Terverifikasi)"}
+							</strong>
+						</Col>
+					</FormGroup>
+					{data.user.email && (
+						<FormGroup row>
+							<Col md="4">Email:</Col>
+							<Col md="8">
+								<strong>{data.user.email}</strong>
+							</Col>
+						</FormGroup>
+					)}
 
-	componentDidMount = () => {
-		const { data } = this.props;
-		if (data.status) {
-			const selectedOption = status.filter((e) => e.value === data.status)[0];
-			this.setState({ selectedOption });
-		} else {
-			this.setState({ selectedOption: { value: "Ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" } });
-			// const tes = await addStatus({ number, ptId }, { status: data.status || "ditindaklanjuti" });
-		}
-	};
-
-	handleChangeSelect = async (selectedOption) => {
-		const { ptId, number } = this.props.query;
-		this.props.handleChangeSelect(selectedOption);
-		this.setState({ selectedOption });
-		await addStatus({ number, ptId }, { status: selectedOption.value });
-	};
-
-	render() {
-		const { data } = this.props;
-		return (
-			<Card className="card b">
-				<CardHeader>
-					<CardTitle tag="h4">Detail Laporan</CardTitle>
-				</CardHeader>
-				<CardBody>
-					<table className="table">
-						<tbody>
-							<tr>
-								<td>
-									<strong>Status</strong>
-								</td>
-								<td>
-									<Select instanceId={selectInstanceId + 1} value={this.state.selectedOption} onChange={this.handleChangeSelect} options={status} required />
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<strong>Nomor Laporan</strong>
-								</td>
-								<td>{data._number}</td>
-							</tr>
-							<tr>
-								<td>
-									<strong>Perguruan Tinggi</strong>
-								</td>
-								<td>{data.pt.nama}</td>
-							</tr>
-							<tr>
-								<td>
-									<strong>Jenis Pelanggaran</strong>
-								</td>
-								<td>
-									<Scrollable height="75px" className="list-group">
-										<ul>{data.pelanggaran ? data.pelanggaran.map((e) => <li>{e.pelanggaran}</li>) : ""}</ul>
-									</Scrollable>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<strong>Keterangan Laporan</strong>
-								</td>
-								<td>
-									<Scrollable height="100px" className="list-group">
-										<p>{data.description}</p>
-									</Scrollable>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<strong>File Pendukung</strong>
-								</td>
-								<td>
-									<Scrollable height="120px" className="list-group">
-										<table className="table table-bordered bg-transparent">
-											<tbody>
-												{data.files
-													? data.files.map((e) => (
-														<tr>
-															<td>
-																<em className="fa-lg far fa-file-code"></em>
-															</td>
-															<td>
-																<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
-																	{e.name}
-																</a>
-															</td>
-														</tr>
-													))
-													: ""}
-											</tbody>
-										</table>
-									</Scrollable>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</CardBody>
-			</Card>
-		);
-	}
+					{data.user.isPublic && (
+						<>
+							{data.user.alamat && (
+								<FormGroup row>
+									<Col md="4">Alamat:</Col>
+									<Col md="8">
+										<strong>{data.user.alamat}</strong>
+									</Col>
+								</FormGroup>
+							)}
+							{data.user.foto && (
+								<FormGroup row>
+									<Col md="4">Foto Kartu Identitas:</Col>
+									<Col md="8">
+										<img src={data.user.foto.path} height={200} alt="Foto Identitas" />
+									</Col>
+								</FormGroup>
+							)}
+						</>
+					)}
+					{data.user.isPrivate && (
+						<FormGroup row>
+							<Col md="4">Dirahasiakan</Col>
+							<Col md="8">
+								<strong>Ya</strong>
+							</Col>
+						</FormGroup>
+					)}
+				</>
+			)}
+			{noTitle ? (
+				""
+			) : (
+				<div className="header-1">
+					<h2 className="card-title-1">Detail Laporan</h2>
+				</div>
+			)}
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Laporan:</Col>
+					<Col md="8">
+						<strong>{data.no_laporan}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi yang Dilaporkan:</Col>
+					<Col md="8">
+						<strong>{data.pt.nama}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="125px" className="list-group">
+							<ul>
+								{data.pelanggaran.map((e) => (
+									<li>{e.pelanggaran}</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</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>
+				{noStatus && data.aktif ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-danger">Ditutup</div>
+						</Col>
+					</FormGroup>
+				)}
+				{/* <FormGroup row>
+					<Col md="4">Prioritas:</Col>
+					<Col md="8">{data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>}</Col>
+				</FormGroup> */}
+				<FormGroup row>
+					<Col md="4">Dokumen Pendukung:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.dokumen.map((e, index) => (
+										<tr key={`files-${index}`}>
+											<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>
+		</>
+	);
 }
 
 export default DetailLaporan;

components/PerpanjanganSanksi/DetailSanksi.js

@@ -0,0 +1,128 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+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>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Nomor Surat:</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/PerpanjanganSanksi/InputTanggal.js

@@ -0,0 +1,301 @@
+import React, { Component } from "react";
+import { insertPemeriksaan } from "@/actions/pemeriksaan";
+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, editTmt } from "@/actions/sanksi";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import ms from "ms";
+import { addDays, addMonths } from 'date-fns';
+import id from 'date-fns/locale/id';
+import { addRekomendasiDelegasi } from "../../actions/sanksi";
+import moment from "moment-timezone";
+
+
+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({
+    from_date: Yup.date().notRequired("Wajib diisi"),
+    to_date: Yup.date().notRequired("Wajib diisi"),
+    dokumen: Yup.array().min(1).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: {},
+        };
+    }
+
+    async componentDidMount() {
+        const { token, query } = this.props;
+        const { id } = query;
+        const sanksi = await getOneSanksi(token, id);
+        this.setState({ sanksi })
+        console.log(this.state.sanksi)
+    }
+
+
+    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 };
+    };
+
+
+    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);
+        this.state.files.forEach((e) => {
+            formdata.append("dokumen", e);
+        });
+        const toastid = toast.loading("Please wait...");
+        const added = await editTmt(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 });
+            const sanksi = await getOneSanksi(token, id);
+            this.setState({ sanksi, files: [], from_date: "", to_date: "" });
+            resetForm();
+
+        }
+
+    };
+    render() {
+        const { files, sanksi } = 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">Perpanjangan Sanksi</p>
+                    <Formik
+                        initialValues={{
+                            dokumen: [],
+                            from_date: "",
+                            to_date: "",
+
+                        }}
+                        validationSchema={rekomendasiSchema}
+                        onSubmit={async (data) => {
+                            this.setState({ data });
+                            await this.handelSimpan();
+                        }}
+                    >
+                        {() => (
+                            <Form className="form-horizontal">
+                                <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>
+                                    </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/PerpanjanganSanksi/TableLaporan.js

@@ -0,0 +1,86 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+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>)}
+												<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;

pages/app/pemeriksaan/new.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import DetailPT from "@/components/Main/DetailPT";
 import Header from "@/components/Main/Header";
-import DetailLaporan from "@/components/Main/DetailLaporan";
+import DetailLaporan from "@/components/Pemeriksaan/DetailLaporan";
 import InputEvaluasi from "@/components/Pemeriksaan/InputEvaluasi";
 import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
 import { getOneLaporan } from "@/actions/pelaporan";

pages/app/perpanjangan-sanksi/detail.js

@@ -0,0 +1,87 @@
+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 TableRiwayat from "@/components/RekomendasiDelegasi/TableRiwayat"
+import InputRekomendasi from "@/components/RekomendasiDelegasi/InputRekomendasi";
+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 InputTanggal from "../../../components/PerpanjanganSanksi/InputTanggal";
+
+
+class Detail extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+			files: [],
+			pt: {},
+			data: {},
+		};
+	}
+
+	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 pt = sanksi.data.laporan.pt;
+		this.setState({ sanksi, pt });
+
+	};
+
+
+	render() {
+		const { files, sanksi, pt } = this.state;
+		const { query, token } = this.props;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<span className="font-color-white">
+							Perpanjangan Sanksi
+						</span>
+						<div className="ml-auto">
+							<Link href="/app/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} />
+								{/* <Card className="card-default">
+									<CardHeader>
+										<CardTitle>Riwayat Evaluasi</CardTitle>
+									</CardHeader>
+									<CardBody>
+										<TableRiwayat data={sanksi.data} />
+									</CardBody>
+								</Card> */}
+								<InputTanggal query={query} token={token} data={sanksi.data} />
+								{/* <In query={query} token={token} data={sanksi.data} /> */}
+							</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/perpanjangan-sanksi/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import { getGraph, getExcel } from "@/actions/graph";
+import CaseProgress from "@/components/Pemeriksaan/CaseProgress";
+import TableLaporan from "@/components/PerpanjanganSanksi/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Link from "next/link";
+import Button from "reactstrap/lib/Button";
+import Router from "next/router";
+import { getSanksi } from "@/actions/sanksi";
+
+class Pemeriksaan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+			graph: {},
+			tahun: new Date().getFullYear(),
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const pelaporan = await getPelaporan(token, { sanksi: true, aktif: true });
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<span className="font-color-white">Perpanjangan Masa 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">{pelaporan?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/perpanjangan-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Pemeriksaan);