add menu pelaporan tuntas

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;

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);