progres rekomendasi delegasi

actions/sanksi.js

@@ -11,7 +11,7 @@ export const getSanksi = async (token, query = {}) => {
 	try {
 		let url = "/sanksi";
 		if (query != {}) {
-			const { keberatan, jawaban, banding, cabutSanksi, perbaikan, aktif } = query;
+			const { keberatan, jawaban, banding, cabutSanksi, perbaikan, aktif, delegasi } = query;
 			url += "?";
 			const parseURL = [];
 			if (keberatan) parseURL.push(`keberatan=true`);
@@ -19,6 +19,7 @@ export const getSanksi = async (token, query = {}) => {
 			if (cabutSanksi) parseURL.push(`cabutSanksi=true`);
 			if (perbaikan) parseURL.push(`perbaikan=true`);
 			if (jawaban) parseURL.push(`jawaban=true`);
+			if (delegasi) parseURL.push(`delegasi=true`);
 			if (aktif === false) parseURL.push(`aktif=false`);
 			url += parseURL.join("&");
 		}

components/Layout/Menu.js

@@ -67,6 +67,43 @@ const Menu = [
 		icon: "icon-shield",
 		translate: "sidebar.nav.PENCABUTAN_SANKSI",
 	},
+
+	///////------OPERASIONAL SANKSI-------\\\\\\
+	{
+		heading: "Operasional Sanksi",
+		translate: "sidebar.heading.OPERASIONAL_SANKSI",
+	},
+	{
+		name: "Rekomendasi Delegasi",
+		path: "/app/rekomendasi-delegasi",
+		icon: "icon-film",
+		translate: "sidebar.nav.REKOMENDASI_DELEGASI",
+	},
+	{
+		name: "Perpanjangan Sanksi",
+		path: "/app/perpanjangan-sanksi",
+		icon: "icon-film",
+		translate: "sidebar.nav.PERPANJANGAN_SANKSI",
+	},
+	{
+		name: "Perubahan Sanksi",
+		path: "/app/perubahan-sanksi",
+		icon: "icon-film",
+		translate: "sidebar.nav.PERUBAHAN_SANKSI",
+		submenu: [
+			{
+				name: "a. Naik Sanksi",
+				path: "/app/perubahan-sanksi/naik-sanksi",
+			},
+			{
+				name: "b. Jawaban keberatan",
+				path: "/app/perubahan-sanksi/turun-sanksi",
+			},
+		],
+	},
+
+	///////------ANALYTICS REPORT------\\\\\\\\\\\
+
 	{
 		heading: "Analytics Report",
 		translate: "sidebar.heading.ANALYTICS_REPORT",
@@ -83,6 +120,8 @@ const Menu = [
 		icon: "far fa-check-circle",
 		translate: "sidebar.nav.Pelaporan-tuntas",
 	},
+
+	/////////------BANTUAN-------\\\\\\\\\\\
 	{
 		heading: "Bantuan",
 		translate: "sidebar.heading.BANTUAN",

components/Layout/MenuLLDIKTI.js

@@ -55,6 +55,42 @@ const Menu = [
 		icon: "icon-shield",
 		translate: "sidebar.nav.PENCABUTAN_SANKSI",
 	},
+	///////------OPERASIONAL SANKSI-------\\\\\\
+	{
+		heading: "Operasional Sanksi",
+		translate: "sidebar.heading.OPERASIONAL_SANKSI",
+	},
+	{
+		name: "Rekomendasi Delegasi",
+		path: "/app/rekomendasi-delegasi",
+		icon: "icon-film",
+		translate: "sidebar.nav.REKOMENDASI_DELEGASI",
+	},
+	{
+		name: "Perpanjangan Sanksi",
+		path: "/app/perpanjangan-sanksi",
+		icon: "icon-film",
+		translate: "sidebar.nav.PERPANJANGAN_SANKSI",
+	},
+	{
+		name: "Perubahan Sanksi",
+		path: "/app/perubahan-sanksi",
+		icon: "icon-film",
+		translate: "sidebar.nav.PERUBAHAN_SANKSI",
+		submenu: [
+			{
+				name: "a. Naik Sanksi",
+				path: "/app/perubahan-sanksi/naik-sanksi",
+			},
+			{
+				name: "b. Jawaban keberatan",
+				path: "/app/perubahan-sanksi/turun-sanksi",
+			},
+		],
+	},
+
+	///////------ANALYTICS REPORT------\\\\\\\\\\\
+
 	{
 		heading: "Analytics Report",
 		translate: "sidebar.heading.ANALYTICS_REPORT",
@@ -65,6 +101,9 @@ const Menu = [
 		icon: "far fa-check-circle",
 		translate: "sidebar.nav.Pelaporan-tuntas",
 	},
+
+	/////////------BANTUAN-------\\\\\\\\\\\
+
 	{
 		heading: "Bantuan",
 		translate: "sidebar.heading.BANTUAN",

components/RekomendasiDelegasi/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/RekomendasiDelegasi/DetailSanksi.js

@@ -0,0 +1,109 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup, Table } from "reactstrap";
+import { API_URL } from "@/env";
+
+function DetailSanksi({ data, noTitle = false }) {
+	return (
+		<>
+			{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="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>
+				<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>
+			</form>
+		</>
+	);
+}
+
+export default DetailSanksi;

components/RekomendasiDelegasi/InputEvaluasi.js

@@ -0,0 +1,289 @@
+import React, { Component } from "react";
+import { insertPemeriksaan } from "@/actions/pemeriksaan";
+import Router from "next/router";
+import Datetime from "react-datetime";
+import moment from "moment";
+import { Row, Col, FormGroup, Input, Button } from "reactstrap";
+import { ToastContainer, toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { connect } from "react-redux";
+
+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 evaluasiSchema = Yup.object().shape({
+	tanggal: Yup.date().required("Wajib diisi"),
+	judul: Yup.string().min(3).max(150).required("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 InputEvaluasi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dropdownOpen: false,
+			splitButtonOpen: false,
+			judulEvaluasi: "",
+			tanggal: moment().format("D MMMM YYYY"),
+			files: [],
+			delegasichecklist: false,
+			rolelldikti: false,
+		};
+	}
+
+	setjudulEvaluasi = (e) => {
+		this.setState({ judulEvaluasi: e.target.value });
+	};
+
+	setTanggal = (moment) => {
+		this.setState({ tanggal: moment.format("D MMMM YYYY") });
+	};
+
+	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: [],
+		});
+	};
+
+	onSubmit = async (data, { resetForm }) => {
+		const { token, query } = this.props;
+		const { id } = query;
+		const formdata = new FormData();
+		formdata.append("judul", data.judul);
+		formdata.append("tanggal", data.tanggal);
+		data.dokumen.forEach((e) => {
+			formdata.append("dokumen", e);
+		});
+		if (this.state.delegasichecklist == true) {
+			await toast.promise(insertPemeriksaan(token, id, formdata), {
+				pending: "Loading",
+				success: "Success",
+				error: "Error",
+
+			});
+
+			data.change_role = "true";
+			data.keterangan = "delegasi ke DIKTI"
+			Router.push("/app/pemeriksaan");
+			update = await updateLaporan(token, id, data);
+		} else {
+			await toast.promise(insertPemeriksaan(token, id, formdata), {
+				pending: "Loading",
+				success: "Success",
+				error: "Error",
+			});
+		}
+		this.setState({ files: [] });
+		resetForm();
+		const pelaporan = await getOneLaporan(token, query.id);
+		this.props.changePelaporan(pelaporan);
+	};
+
+	handlechecklist = () => {
+		this.setState({ delegasichecklist: !this.state.delegasichecklist })
+	};
+	// getStatus = () => (this.props.user?.role.id == 2021 ? this.setState({ rolelldikti: !this.state.rolelldikti }) : "")
+
+
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<div md={3} key={index}>
+				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
+				<span className="text-left">{index + 1}.{file.name}</span>
+			</div>
+		));
+		return (
+			<>
+				<p className="lead bb">Evaluasi</p>
+				<Formik
+					initialValues={{
+						tanggal: new Date(),
+						judul: "",
+						dokumen: [],
+					}}
+					validationSchema={evaluasiSchema}
+					onSubmit={this.onSubmit}
+				>
+					<Form className="form-horizontal">
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Tanggal Dokumen</label>
+							<div className="col-md-10">
+								<Field name="tanggal">
+									{({ field, form }) => (
+										<Datetime
+											timeFormat={false}
+											inputProps={{ className: "form-control" }}
+											value={field.value}
+											onChange={(e) => {
+												form.setFieldValue(field.name, e);
+											}}
+										/>
+									)}
+								</Field>
+								<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
+							</div>
+						</FormGroup>
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Judul Dokumen</label>
+							<div className="col-md-10">
+								<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
+								<ErrorMessage name="judul" component="div" className="form-text text-danger" />
+							</div>
+						</FormGroup>
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
+							<div className="col-md-10">
+								<Field name="dokumen">
+									{({ field, form, meta }) => (
+										<DropzoneWrapper
+											className=""
+											onDrop={(e) => {
+												this.onDrop(e);
+												form.setFieldValue(field.name, e);
+											}}
+										>
+											{({ getRootProps, getInputProps, isDragActive }) => {
+												return (
+													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
+														<input name="dokumen" {...getInputProps()} />
+														<div className="dropzone-style-1">
+															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <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">Klik untuk upload dokumen</h5>
+																</div>
+															}
+															</div>
+														</div>
+														<div className="d-flex align-items-center">
+															<small className="ml-auto">
+																<button
+																	type="button"
+																	className="btn btn-link"
+																	onClick={(e) => {
+																		this.clearFiles(e);
+																		form.setFieldValue(field.name, []);
+																	}}
+																>
+																	Reset dokumen
+																</button>
+															</small>
+														</div>
+													</div>
+												);
+											}}
+										</DropzoneWrapper>
+									)}
+								</Field>
+								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+								<p className="mrgn-top-5">
+									Ukuran setiap dokumen maksimal 15mb
+								</p>
+							</div>
+						</FormGroup>
+						{this.props.user?.role.id === 2021 ? (
+							<FormGroup row>
+								<label className="col-md-2 col-form-label">Delegasi ke dikti</label>
+								<div className="col-md-10 mt-2">
+									<div className="checkbox c-checkbox">
+										<label>
+											<Input type="checkbox" onChange={this.handlechecklist} defaultChecked={this.state.delegasichecklist} />
+											<span className="fa fa-check"></span></label>
+									</div>
+								</div>
+							</FormGroup>
+						) : ("")}
+						<FormGroup row>
+							<div className="col-xl-10">
+								<Button color className="btn-login" type="submit">
+									<span className="font-color-white">
+										Simpan Evaluasi
+									</span>
+								</Button>
+							</div>
+						</FormGroup>
+					</Form>
+				</Formik>
+			</>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(InputEvaluasi);

components/RekomendasiDelegasi/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";
+
+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>
+									{status && <th>Status</th>}
+									{!noBy && <th>Dibuat Oleh</th>}
+									{/* <th>Created</th> */}
+									<th></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>
+
+											{status ? (
+												<td>
+													<h4 className="m-0">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Delegasi Ke LLDIKTI"}</h4>
+													<p className="w-105">Sanksi Administratif: {data.sanksi.pelanggaran.map((e) => e.label_sanksi)}</p>
+												</td>
+											) : (
+												""
+											)}
+											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
+											<td>
+												<div className="ml-auto">
+													<Link
+														href={{
+															pathname: to,
+															query: { id: data._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/RekomendasiDelegasi/TableRiwayat.js

@@ -0,0 +1,42 @@
+import Datatable from "@/components/Tables/Datatable";
+
+function TableRiwayat({ data }) {
+	return (
+		// <Datatable options={{ responsive: true }}>
+		<div className="card-over">
+			<table className="table table-striped my-4 w-100">
+				<thead>
+					<tr>
+						<th>Tanggal Dibuat</th>
+						<th>Tanggal Dokumen</th>
+						<th>Judul Dokumen</th>
+						<th>File Pendukung</th>
+					</tr>
+				</thead>
+				<tbody>
+					{data.evaluasi.map((e, index) => (
+						<tr key={index}>
+							<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
+							<td>{moment(e.tanggal).format("D MMMM YYYY")}</td>
+							<td>{e.judul}</td>
+							<td>
+								{e.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>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+		// </Datatable>
+	);
+}
+
+export default TableRiwayat;

pages/app/rekomendasi-delegasi/detail.js

@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
+import Router from "next/router";
+import classnames from "classnames";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailSanksi from "@/components/RekomendasiDelegasi/DetailSanksi";
+import Header from "@/components/Main/Header";
+import Link from "next/link";
+import { getPelaporan } from "@/actions/pelaporan";
+import { getOneSanksi } from "@/actions/sanksi";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+
+const stepNavitemStyle = {
+	backgroundColor: "#fcfcfc",
+};
+
+class Detail extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const sanksi = await getOneSanksi(token, query.id);
+		this.setState({ sanksi });
+		console.log = (this.state.sanksi)
+	};
+
+	render() {
+		const { sanksi } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<span className="font-color-white">
+							Rekomendasi
+						</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 && (
+						<Card className="card-default">
+							<CardBody>
+								<Row>
+									<Col>
+										<DetailSanksi data={sanksi.data} />
+									</Col>
+								</Row>
+							</CardBody>
+						</Card>
+					)}
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Detail);

pages/app/rekomendasi-delegasi/index.js

@@ -0,0 +1,50 @@
+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/RekomendasiDelegasi/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, { delegasi: true, sanksi: true });
+		this.setState({ pelaporan });
+		console.log = (this.state.pelaporan);
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<span className="font-color-white">
+						Evaluasi </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/rekomendasi-delegasi/detail" linkName="Detail" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Pemeriksaan);