Merge branch 'master' of https://source.sidali.sixsenz.net/andifebri/PTB-fe

components/Layout/Menu.js

@@ -21,21 +21,6 @@ const Menu = [
 		icon: "icon-note",
 		translate: "sidebar.nav.PELAPORAN",
 	},
-	// {
-	// 	name: "Pelaporan",
-	// 	icon: "icon-notebook",
-	// 	translate: "sidebar.nav.LAPORAN",
-	// 	submenu: [
-	// 		{
-	// 			name: "List Laporan",
-	// 			path: "/app/pelaporan",
-	// 		},
-	// 		{
-	// 			name: "Laporan ditutup",
-	// 			path: "/app/laporan-ditutup",
-	// 		},
-	// 	],
-	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",
@@ -92,6 +77,12 @@ const Menu = [
 		icon: "icon-film",
 		translate: "sidebar.nav.Riwayat",
 	},
+	{
+		name: "Pelaporan Tuntas",
+		path: "/app/tuntas",
+		icon: "far fa-check-circle",
+		translate: "sidebar.nav.Pelaporan-tuntas",
+	},
 	{
 		heading: "Bantuan",
 		translate: "sidebar.heading.BANTUAN",

components/Layout/MenuLLDIKTI.js

@@ -21,21 +21,6 @@ const Menu = [
 		icon: "icon-note",
 		translate: "sidebar.nav.PELAPORAN",
 	},
-	// {
-	// 	name: "Pelaporan",
-	// 	icon: "icon-notebook",
-	// 	translate: "sidebar.nav.LAPORAN",
-	// 	submenu: [
-	// 		{
-	// 			name: "List Laporan",
-	// 			path: "/app/pelaporan",
-	// 		},
-	// 		{
-	// 			name: "Laporan ditutup",
-	// 			path: "/app/laporan-ditutup",
-	// 		},
-	// 	],
-	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",
@@ -86,6 +71,12 @@ const Menu = [
 		icon: "icon-film",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},
+	{
+		name: "Pelaporan Tuntas",
+		path: "/app/tuntas",
+		icon: "far fa-check-circle",
+		translate: "sidebar.nav.Pelaporan-tuntas",
+	},
 	{
 		heading: "Bantuan",
 		translate: "sidebar.heading.BANTUAN",

components/PelaporanTuntas/CaseProgress.js

@@ -0,0 +1,130 @@
+import React, { Component, useState, useEffect } from "react";
+import { Progress } from "reactstrap";
+import Sparkline from "@/components/Common/Sparklines";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import FlotChart from "@/components/Charts/Flot.js";
+import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
+import Datatable from "@/components/Tables/Datatable";
+import MorrisChart from "@/components/Charts//Morris";
+import { Button } from "reactstrap";
+
+function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
+	const ChartBar = {
+		data: [
+			{
+				// "label": "Complete",
+				color: "#287DAD",
+				data: [["Selesai", data.evaluasi.hasEvaluasi]],
+			},
+			{
+				// "label": "In Progress",
+				color: "#FD4233",
+				data: [["Ditutup", data.evaluasi.notHasEvaluasi]],
+			},
+		],
+
+		options: {
+			series: {
+				bars: {
+					align: "center",
+					lineWidth: 0,
+					show: true,
+					barWidth: 0.2,
+					fill: 0.9,
+				},
+			},
+			grid: {
+				borderColor: "#eee",
+				borderWidth: 1,
+				hoverable: true,
+				backgroundColor: "#fcfcfc",
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: (label, x, y) => x + " : " + y,
+			},
+			xaxis: {
+				tickColor: "#fcfcfc",
+				mode: "categories",
+			},
+			yaxis: {
+				// position: 'right' or 'left'
+				tickColor: "#eee",
+			},
+			shadowSize: 0,
+		},
+	};
+
+	const ChartPie = {
+		data: [
+			{
+				label: "Selesai",
+				color: "#287DAD",
+				data: [data.evaluasi.hasEvaluasi],
+			},
+			{
+				label: "Ditutup",
+				color: "#FD4233",
+				data: [data.evaluasi.notHasEvaluasi],
+			},
+		],
+
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
+
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun {tahun} </b>
+					<Button className="float-right button-hidden icon-eksport" onClick={excel}>
+						<img src="/static/img/eksport.png"></img>
+					</Button>
+				</div>
+				<div className="header-1">
+					<h2 className="card-title-1">Perkembangan</h2>
+				</div>
+				<div className="w-401">
+					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
+				</div>
+			</div>
+			<div className="card-body">
+				<div className="header-1">
+					<h2 className="card-title-1">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div>
+		</div>
+	);
+}
+
+export default CaseProgress;

components/PelaporanTuntas/DetailLaporan.js

@@ -0,0 +1,162 @@
+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">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/PelaporanTuntas/TableLaporan.js

@@ -0,0 +1,79 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableLaporan({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body card-over">
+				{listData && (
+					<Datatable options={{ responsive: false }}>
+						<table className="table w-100" data-order='[[2, "asc"], [3, "desc"]]'>
+							<thead>
+								<tr>
+									<th>No.Laporan</th>
+									<th>Deskripsi Laporan</th>
+									<th>Status</th>
+									{/* <th>Created</th> */}
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.map((data) => {
+									return (
+										<tr key={data._id}>
+											<td>
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<h4>{data.no_laporan}</h4>
+															<p>{moment(data.createdAt).format("MM-DD-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.evaluasi?.length ? <div className="badge badge-green">Selesai</div> : <div className="badge badge-red">Ditutup</div>}
+											</td>
+											<td>
+												<div className="ml-auto">
+													<Link
+														href={{
+															pathname: to,
+															query: { id: data._id },
+														}}
+													>
+														<Button className="color-3e3a8e btn-login loader" color>
+															<span className="font-color-white">
+																{linkName}
+															</span>
+														</Button>
+													</Link>
+												</div>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
+			</div>
+		</div >
+	);
+}
+
+export default TableLaporan;

components/Riwayat/TableRiwayat.js

@@ -78,7 +78,7 @@ class TableRiwayat extends Component {
 		if (dataRiwayat) {
 			dataRiwayat.data.forEach((e) => {
 				rows.push({
-					deskripsi: this.getover(e.aktivitas),
+					deskripsi: (e.aktivitas),
 					complete: Math.min(100, Math.round(Math.random() * 110)),
 					ipv4: e.ipv4 || "-",
 					menu: e.menu || "-",

components/Riwayat/TableRiwayatt.js

@@ -0,0 +1,104 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+import React, { Component } from "react";
+import { getLog2 } from "@/actions/log";
+import { connect } from "react-redux";
+
+class TableRiwayatt extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dataRiwayat: "",
+        };
+    }
+    componentDidMount = async () => {
+        const { token } = this.props;
+        const dataRiwayat = await getLog2(this.props.token);
+        this.setState({ dataRiwayat });
+    }
+
+    render() {
+        console.log(this.state.dataRiwayat.data?.map(e => e.id))
+        return (
+            <div className="card b ">
+                <div style={{ height: 500 }} className="card-body card-over">
+                    {this.state.dataRiwayat && (
+                        <Datatable options={{
+                            responsive: false, ordering: false, keys: false, lengthChange: false, searching: false, aLengthMenu: [500], paging: false, scrollX: true, scrollY: "370px",
+                            bordered: true
+                        }}>
+                            <table className="table w-100" data-order='[[3, "desc"]]'>
+                                <thead>
+                                    <tr>
+                                        <th>Timelapse</th>
+                                        <th>Username</th>
+                                        <th>IPv4</th>
+                                        <th>Menu</th>
+                                        <th>Deskripsi</th>
+                                        {/* <th>Created</th> */}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
+                                        <tr>
+                                            <td style={{ width: 175 }}>
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, hh:mm a"))}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td style={{ minWidth: 130 }}>
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <p>{value.user?.nama}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td style={{ minWidth: 120 }}>
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <p>{value.ipv4}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td style={{ minWidth: 150 }}>
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <p>{value.menu}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td style={{ minWidth: 350 }}>
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <p>{value.aktivitas}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+
+                                </tbody>
+                            </table>
+                        </Datatable>
+                    )}
+                </div>
+            </div >
+        );
+    }
+}
+const mapStateToProps = (state) => ({ token: state.token });
+export default connect(mapStateToProps)(TableRiwayatt);

components/Sanksi/Ringkasan.js

@@ -18,7 +18,7 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 						<FormGroup row>
 							<Col md="4">Nama Perguruan Tinggi:</Col>
 							<Col md="8">
-								<strong>Universitas Satyagama</strong>
+								<strong>{dataLaporan.pt.nama}</strong>
 							</Col>
 						</FormGroup>
 						<FormGroup row>
@@ -112,34 +112,38 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
 							</Col>
 						</FormGroup>
-						<FormGroup row>
-							<Col md="4">TMT Berlaku:</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.akhirsanksi ? (
-										<p>
-											{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
-						<FormGroup row>
-							<Col md="4">TMT :</Col>
-							<Col md="8">
-								<strong>
-									{dataUpload && dataUpload.akhirsanksi ? (
-										<p>
-											{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
-										</p>
-									) : (
-										""
-									)}
-								</strong>
-							</Col>
-						</FormGroup>
+						{dataUpload && !dataUpload.tmtCheck ? (
+							<FormGroup row>
+								<Col md="4">TMT Berlaku:</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.akhirsanksi ? (
+											<p>
+												{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						) : ("")}
+						{dataUpload && !dataUpload.tmtCheck ? (
+							<FormGroup row>
+								<Col md="4">TMT :</Col>
+								<Col md="8">
+									<strong>
+										{dataUpload && dataUpload.akhirsanksi ? (
+											<p>
+												{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
+											</p>
+										) : (
+											""
+										)}
+									</strong>
+								</Col>
+							</FormGroup>
+						) : ("")}
 						<FormGroup row>
 							<Col md="4">Sanksi:</Col>
 							<Col md="8">

components/Sanksi/UploadSurat.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Input, FormGroup } from "reactstrap";
+import { Row, Col, Input, FormGroup, Label } from "reactstrap";
 import Select from "react-select";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -78,6 +78,7 @@ export class UploadSurat extends Component {
 			isiTmt: "",
 			awalsanksi: "",
 			akhirsanksi: "",
+			tmtCheck: false,
 		};
 	}
 
@@ -132,6 +133,9 @@ export class UploadSurat extends Component {
 	handleChangeListSanksi = (listSanksi) => {
 		this.setState({ listSanksi }, this.toRingkasan);
 	};
+	handleTmtCheck = () => {
+		this.setState({ tmtCheck: !this.state.tmtCheck }, this.toRingkasan);
+	}
 	render() {
 		const { files } = this.state;
 
@@ -142,6 +146,7 @@ export class UploadSurat extends Component {
 				</span>
 			</div>
 		));
+		console.log(this.state.tmtCheck)
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 				<FormGroup row>
@@ -156,44 +161,60 @@ export class UploadSurat extends Component {
 						<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
 					</div>
 				</FormGroup>
-				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">Isi TMT</label>
-					<span className="col-sm-3 float-left">
-						<DatePicker
-							selected={this.state.awalsanksi}
-							onChange={(awalsanksi) => {
-								this.setState({ awalsanksi }, this.toRingkasan)
-							}}
-							dateFormat="dd/MM/yyyy"
-							maxDate={this.state.startDay}
-							placeholderText="Dari Tanggal"
-						/>
-					</span>
-					<span className="col-sm-3 float-right">
-						<DatePicker
-							selected={this.state.akhirsanksi}
-							onChange={(akhirsanksi) => {
-								this.setState({ akhirsanksi }, this.toRingkasan)
-							}}
-							dateFormat="dd/MM/yyyy"
-							minDate={this.state.awalsanksi}
-							maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
-							placeholderText="Sampai tanggal"
-						/>
-					</span>
-				</FormGroup>
-				<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.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b>
-					</div>
-				</FormGroup>
-				<FormGroup row className="mt-1">
-					<label className="col-md-2 col-form-label">TMT</label>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Tidak Perlu TMT</label>
 					<div className="col-md-10 mt-2">
-						<b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, 'month') : "-"} bulan</b>
+						<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">Isi TMT</label>
+						<span className="col-sm-3 float-left">
+							<DatePicker
+								selected={this.state.awalsanksi}
+								onChange={(awalsanksi) => {
+									this.setState({ awalsanksi }, this.toRingkasan)
+								}}
+								dateFormat="dd/MM/yyyy"
+								maxDate={this.state.startDay}
+								placeholderText="Dari Tanggal"
+							/>
+						</span>
+						<span className="col-sm-3 float-right">
+							<DatePicker
+								selected={this.state.akhirsanksi}
+								onChange={(akhirsanksi) => {
+									this.setState({ akhirsanksi }, this.toRingkasan)
+								}}
+								dateFormat="dd/MM/yyyy"
+								minDate={this.state.awalsanksi}
+								maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
+								placeholderText="Sampai tanggal"
+							/>
+						</span>
+					</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.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).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.akhirsanksi ? moment(this.state.akhirsanksi).diff(this.state.awalsanksi, '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">
@@ -244,7 +265,7 @@ export class UploadSurat extends Component {
 						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
-			</form>
+			</form >
 		);
 	}
 }

pages/app/riwayat/index.js

@@ -17,6 +17,7 @@ import ChartRadar from "../../../components/Riwayat/ChartRadarBelum";
 import ChartRadarBelum from "../../../components/Riwayat/ChartRadarBelum";
 import ChartRadarSudah from "../../../components/Riwayat/ChartRadarSudah";
 import TableRadar from "../../../components/Riwayat/TableRadar";
+import TableRiwayatt from "../../../components/Riwayat/TableRiwayatt";
 
 
 class Riwayat extends Component {
@@ -41,7 +42,10 @@ class Riwayat extends Component {
           </Col>
           <TableRadar />
           <ChartData />
-          <TableRiwayat />
+          {/* <TableRiwayat /> */}
+          <Col lg="12">
+            <TableRiwayatt />
+          </Col>
         </Row>
       </ContentWrapper>
     );

pages/app/tuntas/detail.js

@@ -0,0 +1,71 @@
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getOneLaporan } from "@/actions/pelaporan";
+import DetailLaporan from "@/components/PelaporanTuntas/DetailLaporan";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, Button, CardBody } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+import { createLog } from "@/actions/log";
+
+class DetailPelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { token, query } = this.props;
+		const pelaporan = await getOneLaporan(this.props.token, query.id);
+		await createLog(token, { aktivitas: `Mengakses halaman detail Pelaporan Tuntas dengan No. Laporan ${pelaporan.data.no_laporan}`, menu: "Pelaporan" });
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<span className="font-color-white">Detail Pelaporan</span>
+						<div className="ml-auto">
+							<Link href="/app/tuntas">
+								<Button className="btn-login" color>
+									<span className="font-color-white">&lt; Kembali</span>
+								</Button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>{<DetailLaporan data={pelaporan.data} />}</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
+						</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(DetailPelaporan);

pages/app/tuntas/index.js

@@ -0,0 +1,71 @@
+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/PelaporanTuntas/CaseProgress";
+import TableLaporan from "@/components/PelaporanTuntas/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";
+
+class PelaporanTuntas 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, { jadwal: true });
+        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true });
+        this.setState({ pelaporan, graph });
+    };
+
+    nextButton = async () => {
+        const tahun = this.state.tahun + 1;
+        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+        this.setState({ graph, tahun });
+    };
+
+    prevButton = async () => {
+        const tahun = this.state.tahun - 1;
+        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+        this.setState({ graph, tahun });
+    };
+
+    shouldComponentUpdate = (prevProps, prevState) => {
+        if (prevState.graph !== this.state.graph) return true;
+    };
+
+    excel = () => {
+        const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
+        Router.push(url);
+    };
+
+    render() {
+        const { pelaporan, graph } = this.state;
+        return (
+            <ContentWrapper>
+                <div className="content-heading">
+                    <span className="font-color-white">
+                        Pelaporan Tuntas
+                    </span>
+                </div>
+                <Row>
+                    <Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col>
+                    <Col lg="8">{pelaporan?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/tuntas/detail" linkName="Detail" /> : <Loader />}</Col>
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(PelaporanTuntas);