Browse Source

commit dulu

yazid138 3 năm trước cách đây
mục cha
commit
54d7ec5e9e

+ 7 - 157
components/Extras/calendar.view.js

@@ -1,22 +1,18 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
-import { updateJadwal } from "../../actions/penjadwalan";
-import { getPelaporan } from "../../actions/pelaporan";
-import Select from "react-select";
+import { getPelaporan } from "@/actions/pelaporan";
+import { updateJadwal } from "@/actions/penjadwalan";
+import DetailLaporan from "@/components/Penjadwalan/DetailLaporan";
 import Link from "next/link";
-
-import Scrollable from "@/components/Common/Scrollable";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import bootstrapPlugin from "@fullcalendar/bootstrap";
-
 import events from "./calendar.events";
 
-const selectInstanceId = 1;
 class Calendar extends Component {
 	calendarEvents = events;
 
@@ -32,12 +28,10 @@ class Calendar extends Component {
 		super(props);
 		this.state = {
 			selectedEvent: null,
-			selectedOption: null,
 			evRemoveOnDrop: true,
 			evNewName: "",
 			externalEvents: [],
 			dataLaporan: [],
-			larporan: {},
 			dataEvent: [],
 		};
 	}
@@ -59,7 +53,7 @@ class Calendar extends Component {
 		this.getDataEvent();
 
 		// const cek = this.state.dataLaporan.data.filter((e) => e._number === this.props.query.number && e.pt_id == this.props.query.ptId)[0];
-		this.setState({ laporan: data[0] });
+		// this.setState({ laporan: data[0] });
 		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
 		if (data[0].penjadwalan) {
 			color = data[0].penjadwalan.background_color;
@@ -67,10 +61,6 @@ class Calendar extends Component {
 		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: "Jadwal Pemeriksaan - BI:" + this.props.query.number }] });
 	}
 
-	handleChangeSelect = (selectedOption) => {
-		this.setState({ selectedOption });
-	};
-
 	getDataEvent = () => {
 		const dataEvent = this.state.dataLaporan.data
 			.filter((e) => e.penjadwalan)
@@ -117,7 +107,7 @@ class Calendar extends Component {
 	};
 
 	render() {
-		const { externalEvents, selectedEvent, laporan } = this.state;
+		const { externalEvents, dataLaporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -126,7 +116,7 @@ class Calendar extends Component {
 						<small>Format pembuatan jadwal pemeriksaan v.0.1</small>
 					</div>
 					<div className="ml-auto">
-						<Link href="/app/penjadwalan" as="/app/penjadwalan">
+						<Link href="/app/penjadwalan">
 							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 						</Link>
 					</div>
@@ -157,147 +147,7 @@ class Calendar extends Component {
 											</div>
 										</CardBody>
 									</Card>
-									{/* Aside card */}
-									<div className="card b">
-										<CardHeader>
-											<CardTitle tag="h4">Detail Laporan</CardTitle>
-										</CardHeader>
-										<table className="table">
-											<tbody>
-												<tr>
-													<td>
-														<strong>Status</strong>
-													</td>
-													<td>
-														<Select
-															instanceId={selectInstanceId + 1}
-															value={this.state.selectedOption}
-															onChange={this.handleChangeSelect}
-															options={[
-																{ value: "ditolak", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
-																{ value: "mengubah sanksi", label: "Delegasi ke lldikti", className: "State-ACT" },
-																{ value: "mencabut sanksi", label: "Ditutup", className: "State-ACT" },
-															]}
-															required
-														/>
-													</td>
-												</tr>
-												<tr>
-													<td>
-														<strong>Nomor Laporan</strong>
-													</td>
-													<td>1155937274981</td>
-												</tr>
-												<tr>
-													<td>
-														<strong>Perguruan Tinggi</strong>
-													</td>
-													<td>Universitas Satyagama</td>
-												</tr>
-												<tr>
-													<td>
-														<strong>Jenis Pelanggaran</strong>
-													</td>
-													<td>
-														<Scrollable height="75px" className="list-group">
-															<ul>
-																<li>Lorem ipsum dolor sit amet.</li>
-																<li>Lorem, ipsum dolor.</li>
-																<li>Lorem ipsum dolor sit.</li>
-															</ul>
-														</Scrollable>
-													</td>
-												</tr>
-												<tr>
-													<td>
-														<strong>Keterangan Laporan</strong>
-													</td>
-													<td>
-														<Scrollable height="100px" className="list-group">
-															<p>
-																Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta iusto facilis ab animi molestiae totam quibusdam eveniet aperiam vitae! Voluptas, laboriosam tempore? Vitae, modi
-																asperiores.
-															</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>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-image"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				baground-lg.png
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				picture.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-word"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				applicat-diagrams.docx
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																</tbody>
-															</table>
-														</Scrollable>
-													</td>
-												</tr>
-											</tbody>
-										</table>
-									</div>
-									{/* end Aside card */}
+									{dataLaporan.data ? <DetailLaporan data={dataLaporan.data[0]} /> : ""}
 								</div>
 							</div>
 						</div>

+ 83 - 0
components/Main/CaseProgress.js

@@ -0,0 +1,83 @@
+import { Progress } from "reactstrap";
+import Sparkline from "@/components/Common/Sparklines";
+
+function CaseProgress() {
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<p>Overvall progress</p>
+				<div className="d-flex align-items-center mb-2">
+					<div className="w-100">
+						<Progress className="progress-xs m0" color="info" value={20} />
+					</div>
+					<div className="ml-auto">
+						<div className="col wd-xxs text-right">
+							<div className="text-bold text-muted">20%</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="card-body">
+				<p>Metrics</p>
+				<div className="row text-center">
+					<div className="col-6 col-lg-6 col-xl-6">
+						<Sparkline
+							values={[20, 80]}
+							options={{
+								type: "pie",
+								height: "50",
+								sliceColors: ["#edf1f2", "#23b7e5"],
+							}}
+							className="sparkline"
+						/>
+						<p className="mt-3">Open Case</p>
+					</div>
+					<div className="col-6 col-lg-6 col-xl-6">
+						<Sparkline
+							values={[80, 20]}
+							options={{
+								type: "pie",
+								height: "50",
+								sliceColors: ["#edf1f2", "#27c24c"],
+							}}
+							className="sparkline"
+						/>
+						<p className="mt-3">Close Case</p>
+					</div>
+				</div>
+			</div>
+			<table className="table bb">
+				<tbody>
+					<tr>
+						<td>
+							<strong>Open Case</strong>
+						</td>
+						<td>80</td>
+					</tr>
+					<tr>
+						<td>
+							<strong>Close Case</strong>
+						</td>
+						<td>20</td>
+					</tr>
+					<tr>
+						<td>
+							<strong>Performance</strong>
+						</td>
+						<td>
+							<em className="far fa-smile fa-lg text-warning"></em>
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<strong>Last Case Closed</strong>
+						</td>
+						<td>BI:1107 - 12/01/2016</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export default CaseProgress;

+ 88 - 0
components/Main/DetailLaporan.js

@@ -0,0 +1,88 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+
+function DetailLaporan({ data, noTitle = false }) {
+	return (
+		<>
+			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Laporan:</Col>
+					<Col md="8">
+						<strong>{data._number}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi:</Col>
+					<Col md="8">
+						<strong>Universitas Satyagama</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="75px" className="list-group">
+							<ul>
+								<li>Lorem ipsum dolor sit.</li>
+								<li>Lorem ipsum dolor sit.</li>
+								{/* {data.pelanggaran.map((e) => (
+									<li>{e.data}</li>
+								))} */}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.description}</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>
+				{data.status ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.status}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					""
+				)}
+				<FormGroup row>
+					<Col md="4">File Pendukung:</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.filename}
+												</a>
+											</td>
+										</tr>
+									))} */}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailLaporan;

+ 23 - 0
components/Main/DetailPT.js

@@ -0,0 +1,23 @@
+function DetailPT() {
+	return (
+		<div className="card card-default">
+			<div className="card-body">
+				<div className="text-center">
+					<h3 className="mt-0">Universitas Satyagama</h3>
+					<p>0742/O/1990</p>
+				</div>
+				<hr />
+				<ul className="list-unstyled px-4">
+					<li>
+						<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
+					</li>
+					<li>
+						<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
+}
+
+export default DetailPT;

+ 5 - 0
components/Main/DetailSanksi.js

@@ -0,0 +1,5 @@
+function Sanksi() {
+	return <div>Enter</div>;
+}
+
+export default Sanksi;

+ 18 - 0
components/Main/Header.js

@@ -0,0 +1,18 @@
+function Header() {
+	const styleHeaderText = {
+		color: "brown",
+	};
+
+	return (
+		<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
+			<div className="p-4 text-center" style={styleHeaderText}>
+				<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
+				<h3 className="m-0">Universitas Satyagama</h3>
+				<p>0742/O/1990</p>
+				<p>Jalan Kamal Raya No 2-A Cengkareng</p>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

+ 39 - 0
components/Main/RiwayatEvaluasi.js

@@ -0,0 +1,39 @@
+import Datatable from "@/components/Tables/Datatable";
+
+function RiwayatEvaluasi({ listData }) {
+	return (
+		<Datatable options={{ responsive: true }}>
+			<table className="table table-striped my-4 w-100">
+				<thead>
+					<tr>
+						<th>Tanggal</th>
+						<th>Judul Dokumen</th>
+						<th>File Pendukung</th>
+					</tr>
+				</thead>
+				<tbody>
+					{listData.map((data) => (
+						<tr>
+							<td>{data.tanggal}</td>
+							<td>{data.judul_dokumen}</td>
+							<td>
+								{data.file
+									.map((e) => (
+										<>
+											<em className="fa-lg far fa-file-code"></em>
+											<a className="text-muted" href="">
+												database.controller.js
+											</a>
+										</>
+									))
+									.join(",")}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</Datatable>
+	);
+}
+
+export default RiwayatEvaluasi;

+ 66 - 0
components/Main/TableLaporan.js

@@ -0,0 +1,66 @@
+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 }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Datatable options={{ responsive: true }}>
+					<table className="table w-100">
+						<thead>
+							<tr>
+								<th>#ID</th>
+								<th>Deskripsi Laporan</th>
+								{status ? <th>Status</th> : ""}
+								<th>Created</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							{listData.map((data) => {
+								return (
+									<tr key={data._id}>
+										<td>BI:{data._number}</td>
+										<td className="text-nowrap">
+											<div className="media align-items-center">
+												{/* <a className="mr-3" href="">
+											<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+										</a> */}
+												<div className="media-body d-flex">
+													<div>
+														<h4 className="m-0">Universitas Satyagama</h4>
+														<p>{data.description}</p>
+													</div>
+												</div>
+											</div>
+										</td>
+										{status ? <td>{data.status}</td> : ""}
+										<td>{moment(data.createdAt).fromNow()}</td>
+										<td>
+											<div className="ml-auto">
+												<Link
+													href={{
+														pathname: to,
+														query: { ptId: data.pt_id, number: data._number },
+													}}
+												>
+													<Button color="primary" size="sm">
+														{linkName}
+													</Button>
+												</Link>
+											</div>
+										</td>
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
+				</Datatable>
+			</div>
+		</div>
+	);
+}
+
+export default TableLaporan;

+ 42 - 0
components/Main/TableSanksi.js

@@ -0,0 +1,42 @@
+import Datatable from "@/components/Tables/Datatable";
+import Link from "next/link";
+import moment from "moment";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<Datatable options={{ responsive: true }}>
+			<table className="table w-100">
+				<thead>
+					<tr>
+						<th>Nomor Sanksi</th>
+						<th>Deskrispsi</th>
+						<th>Created</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					{listData.data.map((data) => {
+						return (
+							<tr key={data._id}>
+								<td>{data._number}</td>
+								<td>{data.deskripsi}</td>
+								<td>{moment(data.created_at).fromNow()}</td>
+								<td>
+									<div className="ml-auto">
+										<Link href={`${to}/ptId=${data.ptId}&number=${data.number}`}>
+											<button class="btn-oval btn btn-primary" size="sm">
+												{linkName}
+											</button>
+										</Link>
+									</div>
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		</Datatable>
+	);
+}
+
+export default TableSanksi;

+ 188 - 0
components/Pelaporan/InputData.js

@@ -0,0 +1,188 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { getPelanggaran } from "@/actions/pelanggaran";
+import { createPelaporan } from "@/actions/pelaporan";
+import Select from "react-select";
+import { Row, Col, FormGroup, Input } from "reactstrap";
+
+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;
+	}
+}
+
+const selectInstanceId = 1;
+export class InputData extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dropdownOpen: false,
+			splitButtonOpen: false,
+			selectedOptionMulti: [],
+			stat: "Waiting to add files..",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			keteranganLaporan: "",
+			files: [],
+			pelanggaran: [],
+		};
+	}
+
+	componentDidMount = async () => {
+		const pelanggaran = await getPelanggaran();
+		this.setState({ pelanggaran });
+	};
+
+	optionsJenisPelanggaran = (pelanggaran) => {
+		return pelanggaran.data.map((e) => ({ value: e._id, label: e.Pelanggaran, className: "State-ACT" }));
+	};
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: e.target.value });
+	};
+
+	toggleDropDown = () => {
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+	};
+
+	toggleSplit = () => {
+		this.setState({
+			splitButtonOpen: !this.state.splitButtonOpen,
+		});
+	};
+
+	handleChangeSelectMulti = (selectedOptionMulti) => {
+		this.setState({ selectedOptionMulti });
+	};
+
+	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 (e) => {
+		e.preventDefault();
+		const formdata = new FormData();
+		formdata.append("number", this.state.pelaporanNumber);
+		formdata.append("pt_id", this.props.query.ptId);
+		formdata.append("description", this.state.keteranganLaporan);
+		formdata.append("pelanggaran_id", this.state.selectedOptionMulti.map((e) => e.value).join());
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const create = await createPelaporan(formdata);
+		console.log(create);
+		// await this.props.dispatch(createPelaporan(formdata));
+		// this.props.dispatch(listPelaporan());
+		if (create) {
+			Router.push({
+				pathname: "/app/pelaporan",
+			});
+		}
+	};
+
+	render() {
+		const { selectedOptionMulti, files, pelanggaran } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+
+				
+				<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+					<FormGroup row>
+						<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
+						<div className="col-md-10">
+							<Input type="text" disabled value={this.state.pelaporanNumber} />
+							<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
+						</div>
+					</FormGroup>
+					<FormGroup row>
+						<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
+						<div className="col-md-10">
+							<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []} required />
+							<span className="form-text">Pilih Jenis Pelanggaran</span>
+						</div>
+					</FormGroup>
+					<FormGroup row>
+						<label className="col-md-2 col-form-label">Keterangan Laporan</label>
+						<div className="col-md-10">
+							<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
+							<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
+						</div>
+					</FormGroup>
+					<FormGroup row>
+						<label className="col-md-2 col-form-label">Upload File Pendukung</label>
+						<div className="col-md-10">
+							<DropzoneWrapper className="" onDrop={this.onDrop}>
+								{({ getRootProps, getInputProps, isDragActive }) => {
+									return (
+										<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+											<input {...getInputProps()} />
+											<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
+											<div className="d-flex align-items-center">
+												<small className="ml-auto">
+													<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+														Clear files
+													</button>
+												</small>
+											</div>
+										</div>
+									);
+								}}
+							</DropzoneWrapper>
+						</div>
+					</FormGroup>
+					<FormGroup row>
+						<div className="col-xl-10">
+							<button className="btn btn-sm btn-primary" type="submit">
+								Submit Laporan
+							</button>
+						</div>
+					</FormGroup>
+				</form>
+		);
+	}
+}
+
+export default InputData;

+ 170 - 0
components/Pemeriksaan/InputEvaluasi.js

@@ -0,0 +1,170 @@
+import React, { Component } from "react";
+import Datetime from "react-datetime";
+import moment from "moment";
+import {
+	Row,
+	Col,
+	FormGroup,
+	Input,
+} from "reactstrap";
+
+const selectInstanceId = 1;
+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;
+	}
+}
+
+export default class InputEvaluasi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dropdownOpen: false,
+			splitButtonOpen: false,
+			keteranganLaporan: "",
+			tanggal: moment().format("D MMMM YYYY"),
+			files: [],
+		};
+	}
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: 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 (e) => {
+		e.preventDefault();
+		const { number, ptId } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("description", this.state.keteranganLaporan);
+		formdata.append("date", this.state.tanggal);
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
+		if (inserted) {
+			Router.push({
+				pathname: "/app/pemeriksaan",
+			});
+		}
+	};
+
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<>
+				<p className="lead bb">Evaluasi</p>
+				<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+					<FormGroup>
+						<label>Tanggal Dokumen:</label>
+						<div>
+							<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
+							{/* <span className="form-text">Tanggal</span> */}
+						</div>
+					</FormGroup>
+					<FormGroup>
+						<label>Judul Dokumen:</label>
+						<div>
+							<Input type="text" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
+							{/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
+							{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+						</div>
+					</FormGroup>
+					<FormGroup>
+						<label>Upload File Pendukung:</label>
+						<div>
+							<DropzoneWrapper className="" onDrop={this.onDrop}>
+								{({ getRootProps, getInputProps, isDragActive }) => {
+									return (
+										<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+											<input {...getInputProps()} />
+											<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
+											<div className="d-flex align-items-center">
+												<small className="ml-auto">
+													<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+														Clear files
+													</button>
+												</small>
+											</div>
+										</div>
+									);
+								}}
+							</DropzoneWrapper>
+							<span className="form-text">Multiple files upload</span>
+						</div>
+					</FormGroup>
+					<FormGroup>
+						<div>
+							<button className="btn btn-sm btn-primary" type="submit">
+								Submit Evaluasi
+							</button>
+						</div>
+					</FormGroup>
+				</form>
+			</>
+		);
+	}
+}

+ 51 - 0
components/Pemeriksaan/TableRiwayat.js

@@ -0,0 +1,51 @@
+import Datatable from "@/components/Tables/Datatable";
+
+function TableRiwayat() {
+	return (
+		<Datatable options={{ responsive: true }}>
+			<table className="table table-striped my-4 w-100">
+				<thead>
+					<tr>
+						<th>Tanggal</th>
+						<th>Judul Dokumen</th>
+						<th>File Pendukung</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>23/01/2022</td>
+						<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
+						<td>
+							<em className="fa-lg far fa-file-code"></em>
+							<a className="text-muted" href="">
+								database.controller.js
+							</a>
+						</td>
+					</tr>
+					<tr>
+						<td>23/01/2022</td>
+						<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
+						<td>
+							<em className="fa-lg far fa-file-code"></em>
+							<a className="text-muted" href="">
+								database.controller.js
+							</a>
+						</td>
+					</tr>
+					<tr>
+						<td>23/01/2022</td>
+						<td>Lorem ipsum dolor sit.</td>
+						<td>
+							<em className="fa-lg far fa-file-code"></em>
+							<a className="text-muted" href="">
+								database.controller.js
+							</a>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Datatable>
+	);
+}
+
+export default TableRiwayat;

+ 114 - 0
components/Penjadwalan/DetailLaporan.js

@@ -0,0 +1,114 @@
+import React, { Component } from "react";
+import Select from "react-select";
+import Scrollable from "@/components/Common/Scrollable";
+import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+
+const selectInstanceId = 1;
+export class DetailLaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+		};
+	}
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	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={[
+											{ value: "ditolak", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
+											{ value: "mengubah sanksi", label: "Delegasi ke lldikti", className: "State-ACT" },
+											{ value: "mencabut sanksi", label: "Ditutup", className: "State-ACT" },
+										]}
+										required
+									/>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Nomor Laporan</strong>
+								</td>
+								<td>{data._number}</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Perguruan Tinggi</strong>
+								</td>
+								<td>Universitas Satyagama</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Jenis Pelanggaran</strong>
+								</td>
+								<td>
+									<Scrollable height="75px" className="list-group">
+										<ul>
+											<li>Lorem ipsum dolor sit amet.</li>
+											<li>Lorem, ipsum dolor.</li>
+											<li>Lorem ipsum dolor sit.</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>
+												<tr>
+													<td>
+														<em className="fa-lg far fa-file-code"></em>
+													</td>
+													<td>
+														<a className="text-muted" href="">
+															database.controller.js
+														</a>
+													</td>
+												</tr>
+											</tbody>
+										</table>
+									</Scrollable>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</CardBody>
+			</Card>
+		);
+	}
+}
+
+export default DetailLaporan;

+ 138 - 0
components/Sanksi/Ringkasan.js

@@ -0,0 +1,138 @@
+import Scrollable from "@/components/Common/Scrollable";
+import { Card, Row, Col, Table, FormGroup } from "reactstrap";
+
+function Ringkasan() {
+	return (
+		<>
+			<Row>
+				<Col>
+					<p className="lead bb">Detail Laporan</p>
+					<form className="form-horizontal">
+						<FormGroup row>
+							<Col md="4">Nomor Laporan:</Col>
+							<Col md="8">
+								<strong>987654</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Nama Perguruan Tinggi:</Col>
+							<Col md="8">
+								<strong>Universitas Satyagama</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Jenis Pelanggaran:</Col>
+							<Col md="8">
+								<Scrollable height="75px" className="list-group">
+									<ul>
+										<li>Lorem ipsum dolor sit amet.</li>
+										<li>Lorem, ipsum dolor.</li>
+										<li>Lorem ipsum dolor sit.</li>
+									</ul>
+								</Scrollable>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Keterangan Laporan:</Col>
+							<Col md="8">
+								<Scrollable height="100px" className="list-group">
+									<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed perferendis facere.</p>
+								</Scrollable>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Dibuat Pada:</Col>
+							<Col md="8">
+								<strong>23 Januari 2022</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Status</Col>
+							<Col md="8">
+								<div className="badge badge-info">Ditindaklanjuti</div>
+							</Col>
+						</FormGroup>
+					</form>
+				</Col>
+			</Row>
+			<Row>
+				<Col>
+					<p className="lead bb">Penetapan Sanksi</p>
+					<Card className="card-default">
+						<Table bordered hover responsive>
+							<thead>
+								<tr>
+									<th>No</th>
+									<th>Jenis Pelanggaran</th>
+									<th>Sanksi</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>1</td>
+									<td>
+										<div className="media align-items-center">
+											<div className="media-body d-flex">
+												<div>
+													<p>Pengelolaan perguruan tinggi tidak berprinsip nirlaba</p>
+													<p>TMT : 6 Bulan</p>
+													<p>Level Pelanggaran : Berat</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>
+										<div className="media align-items-center">
+											<div className="media-body d-flex">
+												<div>
+													<p>Penghentian pembinaan</p>
+													<p>Keterangan : Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan</p>
+												</div>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</Table>
+					</Card>
+				</Col>
+			</Row>
+			<Row>
+				<Col>
+					<p className="lead bb">Nomor Surat keputusan Sanksi</p>
+					<form className="form-horizontal">
+						<FormGroup row>
+							<Col md="4">Nomor Surat:</Col>
+							<Col md="8">
+								<strong>987654</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Surat Sanksi:</Col>
+							<Col md="8">
+								<Scrollable height="120px" className="list-group">
+									<table className="table table-bordered bg-transparent">
+										<tbody>
+											<tr>
+												<td>
+													<em className="fa-lg far fa-file-code"></em>
+												</td>
+												<td>
+													<a className="text-muted" href="">
+														database.controller.js
+													</a>
+												</td>
+											</tr>
+										</tbody>
+									</table>
+								</Scrollable>
+							</Col>
+						</FormGroup>
+					</form>
+				</Col>
+			</Row>
+		</>
+	);
+}
+
+export default Ringkasan;

+ 105 - 0
components/Sanksi/TablePenetapanSanksi.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+import { Card, Table } from "reactstrap";
+
+export class TablePenetapanSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hisJenisPelanggaran: [],
+			tbljenisPelanggaran: [],
+		};
+	}
+	handleApplyClick = () => {
+		const _noSangsi = document.getElementById("noSangsi").value;
+
+		const _hisJP = [];
+		//Get data for filter by checked
+		this.state.tbljenisPelanggaran.filter((_jp) => _jp.checked == true).map((selectedPelanggaran) => _hisJP.push(selectedPelanggaran));
+
+		this.state.hisJenisPelanggaran = [];
+		this.state.hisJenisPelanggaran.push({
+			noSangsi: _noSangsi,
+			pelanggaran: _hisJP,
+		});
+
+		console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran);
+	};
+	// handle particular changes on each checkbox
+	onHandleChange(listName, index) {
+		//set state to checkbox and data in promise mode
+		this.setState({
+			[listName]: this.state[listName].map((item, i) => (index !== i ? item : { ...item, checked: !this.state[listName][index].checked })),
+		});
+	}
+
+	renderTableData = () => {
+		return this.state.tbljenisPelanggaran.map((jp, index) => {
+			return (
+				<tr>
+					<td>
+						<label>{index + 1}</label>
+					</td>
+					<td>
+						<div className="media align-items-center">
+							<div className="media-body d-flex">
+								<div>
+									<p>{jp.Pelanggaran}</p>
+									<p>TMT : {jp.TMTBulan} Bulan</p>
+									<p>Level Pelanggaran : {jp.LabelSangsi}</p>
+								</div>
+							</div>
+						</div>
+					</td>
+					<td>
+						<div className="media align-items-center">
+							<div className="media-body d-flex">
+								<div>
+									<p>{jp.Sangsi}</p>
+									<p>Keterangan : {jp.KeteranganSangsi}</p>
+								</div>
+							</div>
+						</div>
+					</td>
+					<td>
+						<div className="checkbox c-checkbox">
+							<label>
+								{/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
+								<input
+									//name="cb"{jp.idPelanggaran}
+									type="checkbox"
+									// checked={
+									//     jp.checked=true
+									// }
+									checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
+									//{this.state.listA[0].checked}
+									onChange={(e) => this.onHandleChange("tbljenisPelanggaran", jp.idPelanggaran)}
+								/>
+								<span className="fa fa-check"></span>
+							</label>
+						</div>
+					</td>
+				</tr>
+			);
+		});
+	};
+
+	render() {
+		return (
+			<Card className="card-default">
+				<Table bordered hover responsive>
+					<thead>
+						<tr>
+							<th>No</th>
+							<th>Jenis Pelanggaran</th>
+							<th>Sanksi</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>{this.renderTableData()}</tbody>
+				</Table>
+			</Card>
+		);
+	}
+}
+
+export default TablePenetapanSanksi;

+ 99 - 0
components/Sanksi/UploadSurat.js

@@ -0,0 +1,99 @@
+import React, { Component } from "react";
+import { Row, Col, Input, FormGroup } from "reactstrap";
+
+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;
+	}
+}
+
+export class UploadSurat extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			files: [],
+		};
+	}
+
+	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: [],
+		});
+	};
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Nomor Surat</label>
+					<div className="col-md-10">
+						<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
+					</div>
+				</FormGroup>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi</label>
+					<div className="col-md-10">
+						<DropzoneWrapper className="" onDrop={this.onDrop}>
+							{({ getRootProps, getInputProps, isDragActive }) => {
+								return (
+									<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+										<input {...getInputProps()} />
+										<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
+										<div className="d-flex align-items-center">
+											<small className="ml-auto">
+												<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+													Clear files
+												</button>
+											</small>
+										</div>
+									</div>
+								);
+							}}
+						</DropzoneWrapper>
+						<span className="form-text">Multiple files upload</span>
+					</div>
+				</FormGroup>
+			</form>
+		);
+	}
+}
+
+export default UploadSurat;

+ 1 - 1
package.json

@@ -4,7 +4,7 @@
 	"description": "Angle - Bootstrap Admin Template",
 	"author": "@themicon_co",
 	"license": "https://wrapbootstrap.com/help/licenses",
-	"proxy": "http:localhost:5000",
+	"proxy": "http://localhost:5000",
 	"private": true,
 	"scripts": {
 		"dev": "(if exist .next rd /s /q .next 2>nul) && next",

+ 39 - 100
pages/app/pelaporan/detail.js

@@ -1,113 +1,52 @@
 import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getPelaporan } from "@/actions/pelaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Card, CardBody } from "reactstrap";
 
-import Sparkline from "@/components/Common/Sparklines";
-import Datatable from "@/components/Tables/Datatable";
-
-class PelaporanDetail extends Component {
-	constructor(props) {
-		super(props);
-	}
+class DetailPelaporan extends Component {
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
+	};
 
 	render() {
 		const { pelaporan } = this.props;
 		return (
-			<ContentWrapper>
-				<div className="content-heading">Pelaporan</div>
-				<Row>
-					<Col lg="4">
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
-					</Col>
-					<Col lg="8">
-						<div className="mb-3 d-flex">
-							<div>
-								<button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>
-									Laporan Baru
-								</button>
-							</div>
-						</div>
-						<div className="card b">
-							<div className="card-body"></div>
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Pelaporan</div>
+						<div className="ml-auto">
+							<Link href="/app/pelaporan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
 						</div>
-					</Col>
-				</Row>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailLaporan data={pelaporan.data[0]} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+				</div>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default PelaporanDetail;
+export default DetailPelaporan;

+ 10 - 146
pages/app/pelaporan/index.js

@@ -1,12 +1,10 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-import { getPelaporan } from "../../../actions/pelaporan";
-
-import Sparkline from "@/components/Common/Sparklines";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
+import Link from "next/link";
+import { Row, Col, Button } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -18,21 +16,6 @@ class Pelaporan extends Component {
 		return { pelaporan };
 	};
 
-	newReportClick = (e) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/search",
-		});
-	};
-
-	detailLaporanClick = (e, ptId, number) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/detail",
-			query: { ptId, number },
-		});
-	};
-
 	render() {
 		const { pelaporan } = this.props;
 		return (
@@ -40,136 +23,17 @@ class Pelaporan extends Component {
 				<div className="content-heading">Pelaporan</div>
 				<Row>
 					<Col lg="4">
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
+						<CaseProgress />
 					</Col>
 					<Col lg="8">
 						<div className="mb-3 d-flex">
 							<div>
-								<button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>
-									Laporan Baru
-								</button>
-							</div>
-						</div>
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-												<th></th>
-											</tr>
-										</thead>
-										<tbody>
-											{pelaporan.data.map((value) => {
-												return (
-													<tr key={value._id}>
-														<td>BI:{value._number}</td>
-														<td className="text-nowrap">
-															<div className="media align-items-center">
-																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-																<div className="media-body d-flex">
-																	<div>
-																		<h4 className="m-0">Universitas Satyagama</h4>
-																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																		<p>{value.description}</p>
-																	</div>
-																</div>
-															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-														<td>
-															<Button color="primary" onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>
-																Detail
-															</Button>
-														</td>
-													</tr>
-												);
-											})}
-										</tbody>
-									</table>
-								</Datatable>
+								<Link href="/app/pelaporan/search">
+									<Button color="primary">Laporan Baru</Button>
+								</Link>
 							</div>
 						</div>
+						<TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" />
 					</Col>
 				</Row>
 			</ContentWrapper>

+ 15 - 235
pages/app/pelaporan/new.js

@@ -1,169 +1,21 @@
 import React, { Component } from "react";
-import Router from "next/router";
-import { connect } from "react-redux";
-import { getPelanggaran } from "../../../actions/pelanggaran";
-import { createPelaporan } from "../../../actions/pelaporan";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import InputData from "@/components/Pelaporan/InputData";
 import Link from "next/link";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Select from "react-select";
-import {
-	Row,
-	Col,
-	Card,
-	CardHeader,
-	CardBody,
-	FormGroup,
-	FormFeedback,
-	FormText,
-	Label,
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButtonDropdown,
-	InputGroupText,
-	Input,
-	Button,
-	DropdownToggle,
-	DropdownMenu,
-	CustomInput,
-	DropdownItem,
-} from "reactstrap";
-
-const styleHeaderText = {
-	color: "brown",
-};
-
-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;
-	}
-}
-
-const selectInstanceId = 1;
-
-class FormStandard extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			dropdownOpen: false,
-			splitButtonOpen: false,
-			selectedOptionMulti: [],
-			stat: "Waiting to add files..",
-			pelaporanNumber: Math.floor(Date.now() * Math.random()),
-			keteranganLaporan: "",
-			files: [],
-		};
-	}
+import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 
+class PelaporanNew extends Component {
 	static getInitialProps = async ({ query }) => {
-		const pelanggaran = await getPelanggaran();
-		return { query, pelanggaran };
-	};
-
-	optionsJenisPelanggaran = () => {
-		return this.props.pelanggaran.data.map((e) => ({ value: e._id, label: e.Pelanggaran, className: "State-ACT" }));
-	};
-
-	setKeteranganPelaporan = (e) => {
-		this.setState({ keteranganLaporan: e.target.value });
-	};
-
-	toggleDropDown = () => {
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-	};
-
-	toggleSplit = () => {
-		this.setState({
-			splitButtonOpen: !this.state.splitButtonOpen,
-		});
-	};
-
-	handleChangeSelectMulti = (selectedOptionMulti) => {
-		this.setState({ selectedOptionMulti });
-	};
-
-	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 (e) => {
-		e.preventDefault();
-		const formdata = new FormData();
-		formdata.append("number", this.state.pelaporanNumber);
-		formdata.append("pt_id", this.props.query.ptId);
-		formdata.append("description", this.state.keteranganLaporan);
-		formdata.append("pelanggaran_id", this.state.selectedOptionMulti.map((e) => e.value).join());
-		if (this.state.files.length > 0) {
-			this.state.files.forEach((e) => {
-				formdata.append("files", e);
-			});
-		}
-
-		const create = await createPelaporan(formdata);
-		console.log(create);
-		// await this.props.dispatch(createPelaporan(formdata));
-		// this.props.dispatch(listPelaporan());
-		if (create) {
-			Router.push({
-				pathname: "/app/pelaporan",
-			});
-		}
+		return { query };
 	};
 
 	render() {
-		const { selectedOptionMulti, files } = this.state;
-
-		const thumbs = files.map((file, index) => (
-			<Col md={3} key={index}>
-				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
-			</Col>
-		));
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
+				<Header />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>
@@ -179,86 +31,18 @@ class FormStandard extends Component {
 					<Row>
 						<Col xl="9">
 							<Card className="card-default">
-								<CardHeader>
-									<label>Informasi Laporan</label>
-								</CardHeader>
 								<CardBody>
-									<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
-											<div className="col-md-10">
-												<Input type="text" disabled value={this.state.pelaporanNumber} />
-												<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
-											<div className="col-md-10">
-												<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={this.optionsJenisPelanggaran()} required />
-												<span className="form-text">Pilih Jenis Pelanggaran</span>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
-											<div className="col-md-10">
-												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
-												<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Upload File Pendukung</label>
-											<div className="col-md-10">
-												<DropzoneWrapper className="" onDrop={this.onDrop}>
-													{({ getRootProps, getInputProps, isDragActive }) => {
-														return (
-															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																<input {...getInputProps()} />
-																<div className="dropzone-previews flex">
-																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
-																</div>
-																<div className="d-flex align-items-center">
-																	<small className="ml-auto">
-																		<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																			Clear files
-																		</button>
-																	</small>
-																</div>
-															</div>
-														);
-													}}
-												</DropzoneWrapper>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<div className="col-xl-10">
-												<button className="btn btn-sm btn-primary" type="submit">
-													Submit Laporan
-												</button>
-											</div>
-										</FormGroup>
-									</form>
+									<Row>
+										<Col lg={12}>
+											<p className="lead bb">Informasi Laporan</p>
+											<InputData query={this.props.query} />
+										</Col>
+									</Row>
 								</CardBody>
 							</Card>
-							{/* END card */}
 						</Col>
 						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">Universitas Satyagama</h3>
-										<p>0742/O/1990</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
+							<DetailPT />
 						</Col>
 					</Row>
 				</div>
@@ -267,8 +51,4 @@ class FormStandard extends Component {
 	}
 }
 
-const mapStateToProps = (state) => ({
-	pelaporanCreate: state.pelaporanCreate,
-});
-
-export default FormStandard;
+export default PelaporanNew;

+ 8 - 140
pages/app/pemeriksaan/index.js

@@ -1,15 +1,11 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-import { getPelaporan } from "../../../actions/pelaporan";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
 
-import Sparkline from "@/components/Common/Sparklines";
-import Scrollable from "@/components/Common/Scrollable";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
-
-class BugTracker extends Component {
+class Pemeriksaan extends Component {
 	constructor(props) {
 		super(props);
 	}
@@ -19,14 +15,6 @@ class BugTracker extends Component {
 		return { pelaporan };
 	};
 
-	newProcessClick = (e, PT_ID, number) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pemeriksaan/new",
-			query: { ptId: PT_ID, number: number },
-		});
-	};
-
 	render() {
 		const { pelaporan } = this.props;
 		return (
@@ -34,130 +22,10 @@ class BugTracker extends Component {
 				<div className="content-heading">Evaluasi</div>
 				<Row>
 					<Col lg="4">
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
+						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-											</tr>
-										</thead>
-										<tbody>
-											{pelaporan.data.map((value) => {
-												return (
-													<tr>
-														<td>BI:{value._number}</td>
-														<td className="text-nowrap">
-															<div className="media align-items-center">
-																<a className="mr-3" href="">
-																	<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-																</a>
-																<div className="media-body d-flex">
-																	<div>
-																		<h4 className="m-0">Universitas Satyagama</h4>
-																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																		<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																		<p> </p>
-																	</div>
-																</div>
-															</div>
-														</td>
-														<td>{moment(value.created_at).fromNow()}</td>
-														<td>
-															<div className="ml-auto">
-																<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e, value.pt_id, value._number)}>
-																	Update Data
-																</button>
-															</div>
-														</td>
-													</tr>
-												);
-											})}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
+						<TableLaporan listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Detail" status />
 					</Col>
 				</Row>
 			</ContentWrapper>
@@ -165,4 +33,4 @@ class BugTracker extends Component {
 	}
 }
 
-export default BugTracker;
+export default Pemeriksaan;

+ 19 - 374
pages/app/pemeriksaan/new.js

@@ -1,162 +1,29 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Datetime from "react-datetime";
-import moment from "moment";
-import Scrollable from "@/components/Common/Scrollable";
-import { insertPemeriksaan } from "../../../actions/pemeriksaan";
-import Datatable from "@/components/Tables/Datatable";
+import DetailPT from "@/components/Main/DetailPT";
+import Header from "@/components/Main/Header";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import InputEvaluasi from "@/components/Pemeriksaan/InputEvaluasi";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import { getPelaporan } from "@/actions/pelaporan";
 import Link from "next/link";
-import {
-	Row,
-	Col,
-	Card,
-	CardHeader,
-	CardBody,
-	CardTitle,
-	FormGroup,
-	FormFeedback,
-	FormText,
-	Label,
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButtonDropdown,
-	InputGroupText,
-	Input,
-	Button,
-	DropdownToggle,
-	DropdownMenu,
-	CustomInput,
-	DropdownItem,
-} from "reactstrap";
+import { Row, Col, Card, CardBody, CardHeader, CardTitle } from "reactstrap";
 
-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;
-	}
-}
-
-const styleHeaderText = {
-	color: "brown",
-};
-
-const selectInstanceId = 1;
-
-class FormStandard extends Component {
-	state = {
-		dropdownOpen: false,
-		splitButtonOpen: false,
-		keteranganLaporan: "",
-		tanggal: moment().format("D MMMM YYYY"),
-		files: [],
-	};
-
-	static getInitialProps({ query }) {
-		return { query };
-	}
-
-	setKeteranganPelaporan = (e) => {
-		this.setState({ keteranganLaporan: e.target.value });
-	};
-
-	setTanggal = (moment) => {
-		this.setState({ tanggal: moment.format("D MMMM YYYY") });
-	};
-
-	toggleDropDown = () => {
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-	};
-
-	toggleSplit = () => {
-		this.setState({
-			splitButtonOpen: !this.state.splitButtonOpen,
-		});
-	};
-
-	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 (e) => {
-		e.preventDefault();
-		const { number, ptId } = this.props.query;
-		const formdata = new FormData();
-		formdata.append("description", this.state.keteranganLaporan);
-		formdata.append("date", this.state.tanggal);
-		if (this.state.files.length > 0) {
-			this.state.files.forEach((e) => {
-				formdata.append("files", e);
-			});
-		}
-
-		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
-		if (inserted) {
-			Router.push({
-				pathname: "/app/pemeriksaan",
-			});
-		}
+class PemeriksaanNew extends Component {
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
 	};
 
 	render() {
-		const { files } = this.state;
+		const { pelaporan } = this.props;
 
-		const thumbs = files.map((file, index) => (
-			<Col md={3} key={index}>
-				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
-			</Col>
-		));
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
+				<Header />
 				<div className="p-3">
 					<div className="content-heading">
-						<div>
-							Evaluasi Laporan
-							<small>Form update data evaluasi v.0.1</small>
-						</div>
+						<div>Evaluasi Laporan</div>
 						<div className="ml-auto">
 							<Link href="/app/pemeriksaan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
@@ -169,179 +36,10 @@ class FormStandard extends Component {
 								<CardBody>
 									<Row>
 										<Col lg="6">
-											<p className="lead bb">Detail Laporan</p>
-											<form className="form-horizontal">
-												<FormGroup row>
-													<Col md="4">Nomor Laporan:</Col>
-													<Col md="8">
-														<strong>987654</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Nama Perguruan Tinggi:</Col>
-													<Col md="8">
-														<strong>Universitas Satyagama</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Jenis Pelanggaran:</Col>
-													<Col md="8">
-														<Scrollable height="75px" className="list-group">
-															<ul>
-																<li>Lorem ipsum dolor sit amet.</li>
-																<li>Lorem, ipsum dolor.</li>
-																<li>Lorem ipsum dolor sit.</li>
-															</ul>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Keterangan Laporan:</Col>
-													<Col md="8">
-														<Scrollable height="100px" className="list-group">
-															<p>
-																Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
-																perferendis facere.
-															</p>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Dibuat Pada:</Col>
-													<Col md="8">
-														<strong>23 Januari 2022</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Status</Col>
-													<Col md="8">
-														<div className="badge badge-info">Ditindaklanjuti</div>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">File Pendukung</Col>
-													<Col md="8">
-														<Scrollable height="120px" className="list-group">
-															<table className="table table-bordered bg-transparent">
-																<tbody>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-image"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				baground-lg.png
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				picture.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-word"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				applicat-diagrams.docx
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																</tbody>
-															</table>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-											</form>
+											<DetailLaporan data={pelaporan.data[0]} />
 										</Col>
 										<Col lg={6}>
-											<p className="lead bb">Evaluasi</p>
-											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-												<FormGroup>
-													<label>Tanggal Dokumen:</label>
-													<div>
-														<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
-														{/* <span className="form-text">Tanggal</span> */}
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label>Judul Dokumen:</label>
-													<div>
-														<Input type="text" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
-														{/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
-														{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label>Upload File Pendukung:</label>
-													<div>
-														<DropzoneWrapper className="" onDrop={this.onDrop}>
-															{({ getRootProps, getInputProps, isDragActive }) => {
-																return (
-																	<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																		<input {...getInputProps()} />
-																		<div className="dropzone-previews flex">
-																			{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
-																		</div>
-																		<div className="d-flex align-items-center">
-																			<small className="ml-auto">
-																				<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																					Clear files
-																				</button>
-																			</small>
-																		</div>
-																	</div>
-																);
-															}}
-														</DropzoneWrapper>
-														<span className="form-text">Multiple files upload</span>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<div>
-														<button className="btn btn-sm btn-primary" type="submit">
-															Submit Evaluasi
-														</button>
-													</div>
-												</FormGroup>
-											</form>
+											<InputEvaluasi />
 										</Col>
 									</Row>
 								</CardBody>
@@ -349,23 +47,7 @@ class FormStandard extends Component {
 							{/* END card */}
 						</Col>
 						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">Universitas Satyagama</h3>
-										<p>0742/O/1990</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
+							<DetailPT />
 						</Col>
 					</Row>
 					<Row>
@@ -373,46 +55,9 @@ class FormStandard extends Component {
 							<Card className="card-default">
 								<CardHeader>
 									<CardTitle>Riwayat Evaluasi</CardTitle>
-									{/* <div className="text-sm">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.</div> */}
 								</CardHeader>
 								<CardBody>
-									<Datatable options={{ responsive: true }}>
-										<table className="table table-striped my-4 w-100">
-											<thead>
-												<tr>
-													<th>Tanggal</th>
-													<th>Judul Dokumen</th>
-													<th>File Pendukung</th>
-												</tr>
-											</thead>
-											<tbody>
-												<tr>
-													<td>23/01/2022</td>
-													<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
-													<td><em className="fa-lg far fa-file-code"></em>
-														<a className="text-muted" href="">
-															database.controller.js
-														</a></td>
-												</tr>
-												<tr>
-													<td>23/01/2022</td>
-													<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
-													<td><em className="fa-lg far fa-file-code"></em>
-														<a className="text-muted" href="">
-															database.controller.js
-														</a></td>
-												</tr>
-												<tr>
-													<td>23/01/2022</td>
-													<td>Lorem ipsum dolor sit.</td>
-													<td><em className="fa-lg far fa-file-code"></em>
-														<a className="text-muted" href="">
-															database.controller.js
-														</a></td>
-												</tr>
-											</tbody>
-										</table>
-									</Datatable>
+									<TableRiwayat />
 								</CardBody>
 							</Card>
 						</Col>
@@ -423,4 +68,4 @@ class FormStandard extends Component {
 	}
 }
 
-export default FormStandard;
+export default PemeriksaanNew;

+ 10 - 139
pages/app/penjadwalan/index.js

@@ -1,15 +1,11 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-import { getPelaporan } from "../../../actions/pelaporan";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
 
-import Sparkline from "@/components/Common/Sparklines";
-import Scrollable from "@/components/Common/Scrollable";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
-
-class BugTracker extends Component {
+class Penjadwalan extends Component {
 	constructor(props) {
 		super(props);
 	}
@@ -19,142 +15,17 @@ class BugTracker extends Component {
 		return { pelaporan };
 	};
 
-	newProcessClick = (e, PT_ID, number) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/penjadwalan/todo",
-			query: { ptId: PT_ID, number: number },
-		});
-	};
-
 	render() {
+		const { pelaporan } = this.props;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Pemeriksaan</div>
+				<div className="content-heading">Penjadwalan Evaluasi</div>
 				<Row>
 					<Col lg="4">
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
+						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-											</tr>
-										</thead>
-										<tbody>
-											{this.props.pelaporan.data.map((value) => (
-												<tr>
-													<td>BI:{value._number}</td>
-													<td className="text-nowrap">
-														<div className="media align-items-center">
-															<a className="mr-3" href="">
-																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-															</a>
-															<div className="media-body d-flex">
-																<div>
-																	<h4 className="m-0">Universitas Satyagama</h4>
-																	<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																	<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																	<p> </p>
-																</div>
-															</div>
-														</div>
-													</td>
-													<td>{moment(value.created_at).fromNow()}</td>
-													<td>
-														<div className="ml-auto">
-															<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e, value.pt_id, value._number)}>
-																Proses
-															</button>
-														</div>
-													</td>
-												</tr>
-											))}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
+						<TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" />
 					</Col>
 				</Row>
 			</ContentWrapper>
@@ -162,4 +33,4 @@ class BugTracker extends Component {
 	}
 }
 
-export default BugTracker;
+export default Penjadwalan;

+ 8 - 143
pages/app/sanksi/index.js

@@ -1,15 +1,11 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-import { getPelaporan } from "../../../actions/pelaporan";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
 
-import Sparkline from "@/components/Common/Sparklines";
-import Scrollable from "@/components/Common/Scrollable";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
-
-class BugTracker extends Component {
+class Sanksi extends Component {
 	constructor(props) {
 		super(props);
 	}
@@ -19,148 +15,17 @@ class BugTracker extends Component {
 		return { pelaporan };
 	};
 
-	newProcessClick = (e, PT_ID, number) => {
-		//temp variable for dev
-		PT_ID = "0BCE4DB7-B207-445D-8D03-0C54B7688252";
-		const query = { ptId: PT_ID };
-
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/sanksi/proses",
-			query: { ptId: PT_ID, number: number },
-		});
-	};
-
 	render() {
 		const { pelaporan } = this.props;
-		console.log(pelaporan);
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Sanksi</div>
 				<Row>
 					<Col lg="4">
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
+						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-											</tr>
-										</thead>
-										<tbody>
-											{this.props.pelaporan.data.map((value) => (
-												<tr>
-													<td>BI:{value._number}</td>
-													<td className="text-nowrap">
-														<div className="media align-items-center">
-															<a className="mr-3" href="">
-																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-															</a>
-															<div className="media-body d-flex">
-																<div>
-																	<h4 className="m-0">Universitas Satyagama</h4>
-																	<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																	<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																	<p> </p>
-																</div>
-															</div>
-														</div>
-													</td>
-													<td>{moment(value.created_at).fromNow()}</td>
-													<td>
-														<div className="ml-auto">
-															<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e, value.pt_id, value._number)}>
-																Proses Sanksi
-															</button>
-														</div>
-													</td>
-												</tr>
-											))}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
+						<TableLaporan listData={pelaporan.data} to="/app/sanksi/proses" linkName="Proses Sanksi" status />
 					</Col>
 				</Row>
 			</ContentWrapper>
@@ -168,4 +33,4 @@ class BugTracker extends Component {
 	}
 }
 
-export default BugTracker;
+export default Sanksi;

+ 31 - 893
pages/app/sanksi/proses.js

@@ -1,437 +1,32 @@
 import React, { Component } from "react";
-import { Card, CardHeader, CardFooter, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col, Table, Input, FormGroup, FormFeedback, FormText } from "reactstrap";
-import Scrollable from "@/components/Common/Scrollable";
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
 import classnames from "classnames";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Header from "@/components/Main/Header";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import UploadSurat from "@/components/Sanksi/UploadSurat";
+import Ringkasan from "@/components/Sanksi/Ringkasan";
+import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
 import Link from "next/link";
+import { getPelaporan } from "@/actions/pelaporan";
 
 const stepNavitemStyle = {
 	backgroundColor: "#fcfcfc",
 };
-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 ProsesSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			activeStep: "1",
+			files: [],
+		};
 	}
-}
-const styleHeaderText = {
-	color: "brown",
-};
-class FormWizardVertical extends Component {
-	state = {
-		activeStep: "1",
-		files: [],
-		hisJenisPelanggaran: [],
-		tbljenisPelanggaran: [
-			{
-				idPelanggaran: 0,
-				Pelanggaran: "Tidak Ada",
-				Sangsi: "Tanpa Sangsi",
-				KeteranganSangsi: "-",
-				LevelSangsi: 0,
-				LabelSangsi: "Tidak ada",
-				checked: false,
-				TMTBulan: 0,
-			},
-			{
-				idPelanggaran: 1,
-				Pelanggaran: "Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "-",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 2,
-				Pelanggaran: "Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "-",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 3,
-				Pelanggaran: "Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "-",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 4,
-				Pelanggaran:
-					"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 5,
-				Pelanggaran: "PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 6,
-				Pelanggaran:
-					"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 7,
-				Pelanggaran: "Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 8,
-				Pelanggaran: "Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 9,
-				Pelanggaran: "Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 10,
-				Pelanggaran: "Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 11,
-				Pelanggaran: "Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 12,
-				Pelanggaran: "Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 13,
-				Pelanggaran: "Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-				Sangsi: "Peringatan Tertulis",
-				KeteranganSangsi: "",
-				LevelSangsi: 1,
-				LabelSangsi: "Ringan",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 14,
-				Pelanggaran: "Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-				Sangsi: "Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-				KeteranganSangsi: "Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 15,
-				Pelanggaran: "Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penghentian sementara penerimaan Mahasiswa baru",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 16,
-				Pelanggaran: "Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan proses usul pembukaan Program Studi baru",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 17,
-				Pelanggaran: "Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 18,
-				Pelanggaran: "Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 19,
-				Pelanggaran: "Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 20,
-				Pelanggaran: "Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 21,
-				Pelanggaran: "Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 22,
-				Pelanggaran:
-					"Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 23,
-				Pelanggaran: "Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 24,
-				Pelanggaran: "Perguruan tinggi tidak memiliki statuta",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 25,
-				Pelanggaran: "Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 26,
-				Pelanggaran: "Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 27,
-				Pelanggaran: "Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 28,
-				Pelanggaran: "Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-				Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-				KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-				LevelSangsi: 2,
-				LabelSangsi: "Sedang",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 29,
-				Pelanggaran: "Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-				Sangsi: "Penghentian pembinaan",
-				KeteranganSangsi: "Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 30,
-				Pelanggaran: "Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-				Sangsi: "Penghentian pembinaan",
-				KeteranganSangsi: "Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 31,
-				Pelanggaran: "Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-				Sangsi: "Penghentian pembinaan",
-				KeteranganSangsi: "Penghentian penerimaan Mahasiswa baru",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 32,
-				Pelanggaran: "Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-				Sangsi: "Penghentian pembinaan",
-				KeteranganSangsi: "Larangan melakukan wisuda",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 33,
-				Pelanggaran: "Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-				Sangsi: "Penghentian pembinaan",
-				KeteranganSangsi: "Penghentian proses usul pembukaan Program Studi baru",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 34,
-				Pelanggaran: "Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-				Sangsi: "Penghentian pembinaan",
-				KeteranganSangsi: "Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 35,
-				Pelanggaran: "Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-				Sangsi: "Pencabutan izin Program Studi",
-				KeteranganSangsi: "",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 36,
-				Pelanggaran: "Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-				Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-				KeteranganSangsi: "",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 37,
-				Pelanggaran: "Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-				Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-				KeteranganSangsi: "",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 38,
-				Pelanggaran: "Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-				Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-				KeteranganSangsi: "",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-			{
-				idPelanggaran: 39,
-				Pelanggaran: "Terjadi sengketa",
-				Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-				KeteranganSangsi: "",
-				LevelSangsi: 3,
-				LabelSangsi: "Berat",
-				checked: false,
-				TMTBulan: 6,
-			},
-		],
+
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
 	};
 
 	toggleStep = (activeStep) => () => {
@@ -442,139 +37,16 @@ class FormWizardVertical extends Component {
 		}
 	};
 
-	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: [],
-		});
-	};
-
-	// handle particular changes on each checkbox
-	onHandleChange(listName, index) {
-		//set state to checkbox and data in promise mode
-		this.setState({
-			[listName]: this.state[listName].map((item, i) => (index !== i ? item : { ...item, checked: !this.state[listName][index].checked })),
-		});
-	}
-
-	// done = () => {
-	//     alert('Custom message without form submission.');
-	// };
-
-	handleApplyClick = () => {
-		const _noSangsi = document.getElementById("noSangsi").value;
-
-		const _hisJP = [];
-		//Get data for filter by checked
-		this.state.tbljenisPelanggaran.filter((_jp) => _jp.checked == true).map((selectedPelanggaran) => _hisJP.push(selectedPelanggaran));
-
-		this.state.hisJenisPelanggaran = [];
-		this.state.hisJenisPelanggaran.push({
-			noSangsi: _noSangsi,
-			pelanggaran: _hisJP,
-		});
-
-		console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran);
-	};
-
-	renderTableData() {
-		return this.state.tbljenisPelanggaran.map((jp, index) => {
-			return (
-				<tr>
-					<td>
-						<label>{index + 1}</label>
-					</td>
-					<td>
-						<div className="media align-items-center">
-							<div className="media-body d-flex">
-								<div>
-									<p>{jp.Pelanggaran}</p>
-									<p>TMT : {jp.TMTBulan} Bulan</p>
-									<p>Level Pelanggaran : {jp.LabelSangsi}</p>
-								</div>
-							</div>
-						</div>
-					</td>
-					<td>
-						<div className="media align-items-center">
-							<div className="media-body d-flex">
-								<div>
-									<p>{jp.Sangsi}</p>
-									<p>Keterangan : {jp.KeteranganSangsi}</p>
-								</div>
-							</div>
-						</div>
-					</td>
-					<td>
-						<div className="checkbox c-checkbox">
-							<label>
-								{/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
-								<input
-									//name="cb"{jp.idPelanggaran}
-									type="checkbox"
-									// checked={
-									//     jp.checked=true
-									// }
-									checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
-									//{this.state.listA[0].checked}
-									onChange={(e) => this.onHandleChange("tbljenisPelanggaran", jp.idPelanggaran)}
-								/>
-								<span className="fa fa-check"></span>
-							</label>
-						</div>
-					</td>
-				</tr>
-			);
-		});
-		//}
-	}
-
 	render() {
-		const { files } = this.state;
-
-		const thumbs = files.map((file, index) => (
-			<Col md={3} key={index}>
-				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
-			</Col>
-		));
+		const { pelaporan } = this.props;
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
+				<Header />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Penetapan Sanksi</div>
 						<div className="ml-auto">
-							<Link href="/app/pelaporan/search">
+							<Link href="/app/sanksi">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>
@@ -647,126 +119,7 @@ class FormWizardVertical extends Component {
 											<div className="pt-3 mb-3">
 												<fieldset>
 													<h2>Detail Laporan</h2>
-													<form className="form-horizontal">
-														<FormGroup row>
-															<Col md="4">Nomor Laporan:</Col>
-															<Col md="8">
-																<strong>987654</strong>
-															</Col>
-														</FormGroup>
-														<FormGroup row>
-															<Col md="4">Nama Perguruan Tinggi:</Col>
-															<Col md="8">
-																<strong>Universitas Satyagama</strong>
-															</Col>
-														</FormGroup>
-														<FormGroup row>
-															<Col md="4">Jenis Pelanggaran:</Col>
-															<Col md="8">
-																<Scrollable height="75px" className="list-group">
-																	<ul>
-																		<li>Lorem ipsum dolor sit amet.</li>
-																		<li>Lorem, ipsum dolor.</li>
-																		<li>Lorem ipsum dolor sit.</li>
-																	</ul>
-																</Scrollable>
-															</Col>
-														</FormGroup>
-														<FormGroup row>
-															<Col md="4">Keterangan Laporan:</Col>
-															<Col md="8">
-																<Scrollable height="100px" className="list-group">
-																	<p>
-																		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
-																		perferendis facere.
-																	</p>
-																</Scrollable>
-															</Col>
-														</FormGroup>
-														<FormGroup row>
-															<Col md="4">Dibuat Pada:</Col>
-															<Col md="8">
-																<strong>23 Januari 2022</strong>
-															</Col>
-														</FormGroup>
-														<FormGroup row>
-															<Col md="4">Status</Col>
-															<Col md="8">
-																<div className="badge badge-info">Ditindaklanjuti</div>
-															</Col>
-														</FormGroup>
-														<FormGroup row>
-															<Col md="4">File Pendukung</Col>
-															<Col md="8">
-																<Scrollable height="120px" className="list-group">
-																	<table className="table table-bordered bg-transparent">
-																		<tbody>
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-code"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href="">
-																						database.controller.js
-																					</a>
-																				</td>
-																			</tr>
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-image"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href="">
-																						baground-lg.png
-																					</a>
-																				</td>
-																			</tr>
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-code"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href="">
-																						picture.controller.js
-																					</a>
-																				</td>
-																			</tr>
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-word"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href="">
-																						applicat-diagrams.docx
-																					</a>
-																				</td>
-																			</tr>
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-code"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href="">
-																						database.controller.js
-																					</a>
-																				</td>
-																			</tr>
-																			<tr>
-																				<td>
-																					<em className="fa-lg far fa-file-code"></em>
-																				</td>
-																				<td>
-																					<a className="text-muted" href="">
-																						database.controller.js
-																					</a>
-																				</td>
-																			</tr>
-																		</tbody>
-																	</table>
-																</Scrollable>
-															</Col>
-														</FormGroup>
-													</form>
+													<DetailLaporan noTitle data={pelaporan.data[0]} />
 												</fieldset>
 											</div>
 											<hr />
@@ -782,47 +135,9 @@ class FormWizardVertical extends Component {
 												<fieldset>
 													<h2>Hasil Evaluasi</h2>
 													<Card className="card-default">
-														<Table bordered hover responsive>
-															<thead>
-																<tr>
-																	<th>Tanggal</th>
-																	<th>Judul Dokumen</th>
-																	<th>File Pendukung</th>
-																</tr>
-															</thead>
-															<tbody>
-																<tr>
-																	<td>23/01/2022</td>
-																	<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
-																	<td>
-																		<em className="fa-lg far fa-file-code"></em>
-																		<a className="text-muted" href="">
-																			database.controller.js
-																		</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>23/01/2022</td>
-																	<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
-																	<td>
-																		<em className="fa-lg far fa-file-code"></em>
-																		<a className="text-muted" href="">
-																			database.controller.js
-																		</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>23/01/2022</td>
-																	<td>Lorem ipsum dolor sit.</td>
-																	<td>
-																		<em className="fa-lg far fa-file-code"></em>
-																		<a className="text-muted" href="">
-																			database.controller.js
-																		</a>
-																	</td>
-																</tr>
-															</tbody>
-														</Table>
+														<CardBody>
+															<TableRiwayat />
+														</CardBody>
 													</Card>
 												</fieldset>
 											</div>
@@ -840,20 +155,7 @@ class FormWizardVertical extends Component {
 											<div className="pt-3 mb-3">
 												<fieldset>
 													<h2>Penetapan Sanksi</h2>
-													<Card className="card-default">
-														{/* START table-responsive */}
-														<Table bordered hover responsive>
-															<thead>
-																<tr>
-																	<th>No</th>
-																	<th>Jenis Pelanggaran</th>
-																	<th>Sanksi</th>
-																	<th></th>
-																</tr>
-															</thead>
-															<tbody>{this.renderTableData()}</tbody>
-														</Table>
-													</Card>
+													<TablePenetapanSanksi />
 												</fieldset>
 											</div>
 											<hr />
@@ -870,41 +172,7 @@ class FormWizardVertical extends Component {
 											<div className="pt-3 mb-3">
 												<fieldset>
 													<h2>Nomor Surat Keputusan Sanksi</h2>
-													<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-														<FormGroup row>
-															<label className="col-md-2 col-form-label">Nomor Surat</label>
-															<div className="col-md-10">
-																<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
-																{/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
-																{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
-															</div>
-														</FormGroup>
-														<FormGroup row>
-															<label className="col-md-2 col-form-label">Dokumen Surat Sanksi</label>
-															<div className="col-md-10">
-																<DropzoneWrapper className="" onDrop={this.onDrop}>
-																	{({ getRootProps, getInputProps, isDragActive }) => {
-																		return (
-																			<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																				<input {...getInputProps()} />
-																				<div className="dropzone-previews flex">
-																					{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
-																				</div>
-																				<div className="d-flex align-items-center">
-																					<small className="ml-auto">
-																						<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																							Clear files
-																						</button>
-																					</small>
-																				</div>
-																			</div>
-																		);
-																	}}
-																</DropzoneWrapper>
-																<span className="form-text">Multiple files upload</span>
-															</div>
-														</FormGroup>
-													</form>
+													<UploadSurat />
 												</fieldset>
 											</div>
 											<hr />
@@ -921,137 +189,7 @@ class FormWizardVertical extends Component {
 											<div className="pt-3 mb-3">
 												<fieldset>
 													<h2>Ringkasan</h2>
-													<Row>
-														<Col>
-															<p className="lead bb">Detail Laporan</p>
-															<form className="form-horizontal">
-																<FormGroup row>
-																	<Col md="4">Nomor Laporan:</Col>
-																	<Col md="8">
-																		<strong>987654</strong>
-																	</Col>
-																</FormGroup>
-																<FormGroup row>
-																	<Col md="4">Nama Perguruan Tinggi:</Col>
-																	<Col md="8">
-																		<strong>Universitas Satyagama</strong>
-																	</Col>
-																</FormGroup>
-																<FormGroup row>
-																	<Col md="4">Jenis Pelanggaran:</Col>
-																	<Col md="8">
-																		<Scrollable height="75px" className="list-group">
-																			<ul>
-																				<li>Lorem ipsum dolor sit amet.</li>
-																				<li>Lorem, ipsum dolor.</li>
-																				<li>Lorem ipsum dolor sit.</li>
-																			</ul>
-																		</Scrollable>
-																	</Col>
-																</FormGroup>
-																<FormGroup row>
-																	<Col md="4">Keterangan Laporan:</Col>
-																	<Col md="8">
-																		<Scrollable height="100px" className="list-group">
-																			<p>
-																				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam
-																				obcaecati sed perferendis facere.
-																			</p>
-																		</Scrollable>
-																	</Col>
-																</FormGroup>
-																<FormGroup row>
-																	<Col md="4">Dibuat Pada:</Col>
-																	<Col md="8">
-																		<strong>23 Januari 2022</strong>
-																	</Col>
-																</FormGroup>
-																<FormGroup row>
-																	<Col md="4">Status</Col>
-																	<Col md="8">
-																		<div className="badge badge-info">Ditindaklanjuti</div>
-																	</Col>
-																</FormGroup>
-																
-															</form>
-														</Col>
-													</Row>
-													<Row>
-														<Col>
-															<p className="lead bb">Penetapan Sanksi</p>
-															<Card className="card-default">
-																<Table bordered hover responsive>
-																	<thead>
-																		<tr>
-																			<th>No</th>
-																			<th>Jenis Pelanggaran</th>
-																			<th>Sanksi</th>
-																		</tr>
-																	</thead>
-																	<tbody>
-																		<tr>
-																			<td>1</td>
-																			<td>
-																				<div className="media align-items-center">
-																					<div className="media-body d-flex">
-																						<div>
-																							<p>Pengelolaan perguruan tinggi tidak berprinsip nirlaba</p>
-																							<p>TMT : 6 Bulan</p>
-																							<p>Level Pelanggaran : Berat</p>
-																						</div>
-																					</div>
-																				</div>
-																			</td>
-																			<td>
-																				<div className="media align-items-center">
-																					<div className="media-body d-flex">
-																						<div>
-																							<p>Penghentian pembinaan</p>
-																							<p>Keterangan : Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan</p>
-																						</div>
-																					</div>
-																				</div>
-																			</td>
-																		</tr>
-																	</tbody>
-																</Table>
-															</Card>
-														</Col>
-													</Row>
-													<Row>
-														<Col>
-															<p className="lead bb">Nomor Surat keputusan Sanksi</p>
-															<form className="form-horizontal">
-																<FormGroup row>
-																	<Col md="4">Nomor Surat:</Col>
-																	<Col md="8">
-																		<strong>987654</strong>
-																	</Col>
-																</FormGroup>
-																<FormGroup row>
-																	<Col md="4">Surat Sanksi:</Col>
-																	<Col md="8">
-																		<Scrollable height="120px" className="list-group">
-																			<table className="table table-bordered bg-transparent">
-																				<tbody>
-																					<tr>
-																						<td>
-																							<em className="fa-lg far fa-file-code"></em>
-																						</td>
-																						<td>
-																							<a className="text-muted" href="">
-																								database.controller.js
-																							</a>
-																						</td>
-																					</tr>
-																				</tbody>
-																			</table>
-																		</Scrollable>
-																	</Col>
-																</FormGroup>
-															</form>
-														</Col>
-													</Row>
+													<Ringkasan />
 												</fieldset>
 											</div>
 											<hr />
@@ -1075,4 +213,4 @@ class FormWizardVertical extends Component {
 	}
 }
 
-export default FormWizardVertical;
+export default ProsesSanksi;