commit dulu ajah

pages/app/banding/detail.js

@@ -258,7 +258,7 @@ class JawabanBanding extends Component {
 											<p className="lead bb">Jawaban</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 												<FormGroup>
-													<label className="row-form-label">Status</label>
+													<label className="row-form-label">Status:</label>
 													<div className="row-md-10">
 														<Select
 															instanceId={selectInstanceId + 1}
@@ -274,7 +274,7 @@ class JawabanBanding extends Component {
 													</div>
 												</FormGroup>
 												<FormGroup>
-													<label className="row-form-label">Upload Dokumen Jawaban</label>
+													<label className="row-form-label">Dokumen Jawaban:</label>
 													<div className="row-md-10">
 														<DropzoneWrapper className="" onDrop={this.onDrop}>
 															{({ getRootProps, getInputProps, isDragActive }) => {

pages/app/keberatan/detail.js

@@ -114,7 +114,7 @@ class UploadKeberatan extends Component {
 				<div className="p-3">
 					<div className="content-heading">
 						<div>
-							Jawaban Permohonan Keberatan
+							Permohonan Keberatan
 							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
 						</div>
 						<div className="ml-auto">
@@ -258,7 +258,7 @@ class UploadKeberatan extends Component {
 											<p className="lead bb">Jawaban</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 												<FormGroup>
-													<label className="row-form-label">Status</label>
+													<label className="row-form-label">Status:</label>
 													<div className="row-md-10">
 														<Select
 															instanceId={selectInstanceId + 1}
@@ -275,14 +275,14 @@ class UploadKeberatan extends Component {
 													</div>
 												</FormGroup>
 												<FormGroup>
-													<label className="row-form-label">Keterangan Dokumen</label>
+													<label className="row-form-label">Keterangan Dokumen:</label>
 													<div className="row-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>
-													<label className="row-form-label">Upload Dokumen Jawaban</label>
+													<label className="row-form-label">Dokumen Jawaban:</label>
 													<div className="row-md-10">
 														<DropzoneWrapper className="" onDrop={this.onDrop}>
 															{({ getRootProps, getInputProps, isDragActive }) => {

pages/app/pemantauan-perbaikan/detail.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import Link from "next/link";
+import Scrollable from "@/components/Common/Scrollable";
 import Datatable from "@/components/Tables/Datatable";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
@@ -10,6 +11,7 @@ import {
 	Card,
 	CardHeader,
 	CardBody,
+	CardTitle,
 	FormGroup,
 	FormFeedback,
 	FormText,
@@ -62,6 +64,163 @@ class UploadKeberatan extends Component {
 					<Row>
 						<Col xl="9">
 							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<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>
+										</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>
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Card className="card-default">
+								<CardHeader>
+									<CardTitle>Riwayat Perbaikan Dokumen</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">
@@ -104,26 +263,6 @@ class UploadKeberatan extends Component {
 									</Datatable>
 								</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>
 						</Col>
 					</Row>
 				</div>

pages/app/pencabutan-sanksi/detail.js

@@ -259,7 +259,7 @@ class JawabanPencabutanSanksi extends Component {
 											<p className="lead bb">Jawaban</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 												<FormGroup>
-													<label className="row-form-label">Status</label>
+													<label className="row-form-label">Status:</label>
 													<div className="row-md-10">
 														<Select
 															instanceId={selectInstanceId + 1}
@@ -276,7 +276,7 @@ class JawabanPencabutanSanksi extends Component {
 												</FormGroup>
 												{selectedOption && selectedOption.value === "rekomendasi perbaikan" ? (
 													<FormGroup>
-														<label className="row-form-label">Keterangan</label>
+														<label className="row-form-label">Keterangan:</label>
 														<div className="row-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> */}
@@ -286,7 +286,7 @@ class JawabanPencabutanSanksi extends Component {
 													""
 												)}
 												<FormGroup>
-													<label className="row-form-label">{selectedOption && selectedOption.value === "diterima" ? "Upload Dokumen" : "Usulan Perbaikan"}</label>
+													<label className="row-form-label">Upload Dokumen:</label>
 													<div className="row-md-10">
 														<DropzoneWrapper className="" onDrop={this.onDrop}>
 															{({ getRootProps, getInputProps, isDragActive }) => {

pages/app/pt/dokumen-perbaikan/detail.js

@@ -0,0 +1,324 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import Datatable from "@/components/Tables/Datatable";
+import Scrollable from "@/components/Common/Scrollable";
+
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import {
+	Row,
+	Col,
+	Card,
+	CardHeader,
+	CardBody,
+	CardTitle,
+	FormGroup,
+	FormFeedback,
+	FormText,
+	Label,
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButtonDropdown,
+	InputGroupText,
+	Input,
+	Button,
+	DropdownToggle,
+	DropdownMenu,
+	CustomInput,
+	DropdownItem,
+} 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 UploadKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+		};
+	}
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	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 (
+			<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>
+				<div className="p-3">
+					<div className="content-heading">
+						<div>
+							Dokumen Perbaikan
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/keberatan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								{/* <CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader> */}
+								<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>
+										</Col>
+										<Col lg={6}>
+											<p className="lead bb">Dokumen Perbaikan</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Upload Dokumen:</label>
+													<div className="row-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>
+													<div className="row-xl-10">
+														<button className="btn btn-sm btn-primary" type="submit">
+															Kirim
+														</button>
+													</div>
+												</FormGroup>
+											</form>
+										</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>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default UploadKeberatan;

pages/app/pt/dokumen-perbaikan/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Progress, Button } from "reactstrap";
 import { getPelaporan } from "../../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
@@ -13,109 +13,26 @@ class Pelaporan extends Component {
 		super(props);
 	}
 
-	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan();
-		return { pelaporan };
-	};
-
-	newReportClick = (e) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/search",
-		});
-	};
+	// static getInitialProps = async () => {
+	// 	const pelaporan = await getPelaporan();
+	// 	return { pelaporan };
+	// };
 
 	detailLaporanClick = (e, ptId, number) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pelaporan/detail",
-			query: { ptId, number },
+			pathname: "/app/pt/dokumen-perbaikan/detail",
+			// query: { ptId, number },
 		});
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		// const { pelaporan } = this.props;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Dokumen Perbaikan</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">
+					<Col lg={12}>
 						<div className="card b">
 							<div className="card-body">
 								<Datatable options={{ responsive: true }}>
@@ -130,10 +47,10 @@ class Pelaporan extends Component {
 											</tr>
 										</thead>
 										<tbody>
-											{pelaporan.data.map((value) => {
-												return (
-													<tr key={value._id}>
-														<td>BI:{value._number}</td>
+											{/* {pelaporan.data.map((value) => {
+												return ( */}
+													<tr key={1}>
+														<td>BI:987654</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" />
@@ -141,21 +58,21 @@ class Pelaporan extends Component {
 																	<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>
+																		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, reiciendis.</p>
 																	</div>
 																</div>
 															</div>
 														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>{moment().fromNow()}</td>
 														<td>
 															<div className="inline wd-xxs badge badge-success">open</div>
 														</td>
 														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+															<Button color="primary" onClick={(e) => this.detailLaporanClick(e)}>Detail</Button>
 														</td>
 													</tr>
-												);
-											})}
+												{/* );
+											})} */}
 										</tbody>
 									</table>
 								</Datatable>

pages/app/pt/jawaban-banding/detail.js

@@ -0,0 +1,384 @@
+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 Datatable from "@/components/Tables/Datatable";
+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,
+	Modal,
+	ModalHeader,
+	ModalBody,
+	ModalFooter,
+} 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,
+		modal: false,
+		modal1: 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",
+			});
+		}
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
+	};
+
+	toggleModal1 = () => {
+		this.setState({
+			modal: false,
+		});
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	handleSimpan = () => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	handleYaClick = (e) => {
+		console.log("ya");
+	};
+
+	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 (
+			<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>
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Atas Permohonan Keberatan</div>
+						<div className="ml-auto">
+							<Link href="/app/pemeriksaan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<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>
+										</Col>
+										<Col lg={6}>
+											<p className="lead bb">Jawaban Banding</p>
+											<form className="form-horizontal">
+												<FormGroup>
+													<label md="4">Jawaban:</label>
+													<div md="8">
+														<h3>Diterima</h3>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Dokumen Jawaban:</label>
+													<div 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>
+													</div>
+												</FormGroup>
+											</form>
+										</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>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default FormStandard;

pages/app/pt/jawaban-banding/index.js

@@ -28,7 +28,7 @@ class JawabanKeberatan extends Component {
 	detailJawabanKeberatanClick = (e, ptId, number) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pt/jawaban-keberatan/detail",
+			pathname: "/app/pt/jawaban-banding/detail",
 			// query: { ptId, number },
 		});
 	};
@@ -39,83 +39,7 @@ class JawabanKeberatan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Atas Permohonan Banding</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">
+					<Col lg={12}>
 						<div className="card b">
 							<div className="card-body">
 								<Datatable options={{ responsive: true }}>
@@ -129,31 +53,31 @@ class JawabanKeberatan extends Component {
 											</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>
+											{/* {pelaporan.data.map((value) => {
+												return ( */}
+											<tr key={1}>
+												<td>BI:1155937274981</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>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, soluta.</p>
 															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<Button color="primary" onClick={(e) => this.detailJawabanKeberatanClick(e, value.pt_id, value.number)}>
-																Detail
-															</Button>
-														</td>
-													</tr>
-												);
-											})}
+														</div>
+													</div>
+												</td>
+												<td>{moment().fromNow()}</td>
+												<td>
+													<Button color="primary" onClick={(e) => this.detailJawabanKeberatanClick(e)}>
+														Detail
+													</Button>
+												</td>
+											</tr>
+											{/* );
+											})} */}
 										</tbody>
 									</table>
 								</Datatable>

pages/app/pt/jawaban-keberatan/detail.js

@@ -195,7 +195,7 @@ class FormStandard extends Component {
 							<Card className="card-default">
 								<CardBody>
 									<Row>
-										<Col lg={12}>
+										<Col lg={6}>
 											<p className="lead bb">Detail Laporan</p>
 											<form className="form-horizontal">
 												<FormGroup row>
@@ -316,8 +316,46 @@ class FormStandard extends Component {
 														</Scrollable>
 													</Col>
 												</FormGroup>
+											</form>
+										</Col>
+										<Col lg={6}>
+											<p className="lead bb">Jawaban Permohonan Keberatan</p>
+											<form className="form-horizontal">
+												<FormGroup>
+													<label md="4">Jawaban:</label>
+													<div md="8">
+														<h3>Ditolak</h3>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Keterangan:</label>
+													<div md="8">
+														<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque sint voluptates similique harum voluptatibus nesciunt sequi amet soluta eos sit?</p>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Dokumen Jawaban:</label>
+													<div 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>
+													</div>
+												</FormGroup>
 												<Button color="primary" onClick={this.toggleModal}>
-													Banding
+													Ajukan Banding
 												</Button>
 												<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
 													{/* <ModalHeader toggle={this.toggleModal}>Banding</ModalHeader> */}
@@ -364,7 +402,7 @@ class FormStandard extends Component {
 													</ModalBody>
 													<ModalFooter>
 														<Button color="primary" onClick={this.handleSimpan}>
-															Simpan
+															Kirim
 														</Button>{" "}
 													</ModalFooter>
 												</Modal>

pages/app/pt/jawaban-keberatan/index.js

@@ -39,7 +39,7 @@ class JawabanKeberatan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Atas Permohonan Keberatan</div>
 				<Row>
-					<Col lg="4">
+					{/* <Col lg="4">
 						<div className="card b">
 							<div className="card-body bb">
 								<p>Overvall progress</p>
@@ -114,8 +114,8 @@ class JawabanKeberatan extends Component {
 								</tbody>
 							</table>
 						</div>
-					</Col>
-					<Col lg="8">
+					</Col> */}
+					<Col lg={12}>
 						<div className="card b">
 							<div className="card-body">
 								<Datatable options={{ responsive: true }}>
@@ -129,31 +129,30 @@ class JawabanKeberatan extends Component {
 											</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>
+											{/* {pelaporan.data.map((value) => {
+											return ( */}
+											<tr key={1}>
+												<td>BI:BI:408066447929</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>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, dolorum?</p>
 															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<Button color="primary" onClick={(e) => this.detailJawabanKeberatanClick(e, value.pt_id, value.number)}>
-																Detail
-															</Button>
-														</td>
-													</tr>
-												);
-											})}
+														</div>
+													</div>
+												</td>
+												<td>{moment().fromNow()}</td>
+												<td>
+													<Button color="primary" onClick={(e) => this.detailJawabanKeberatanClick(e)}>
+														Detail
+													</Button>
+												</td>
+											</tr>
+											{/* ); })} */}
 										</tbody>
 									</table>
 								</Datatable>

pages/app/pt/jawaban-pencabutan-sanksi/detail.js

@@ -0,0 +1,384 @@
+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 Datatable from "@/components/Tables/Datatable";
+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,
+	Modal,
+	ModalHeader,
+	ModalBody,
+	ModalFooter,
+} 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,
+		modal: false,
+		modal1: 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",
+			});
+		}
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
+	};
+
+	toggleModal1 = () => {
+		this.setState({
+			modal: false,
+		});
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	handleSimpan = () => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	handleYaClick = (e) => {
+		console.log("ya");
+	};
+
+	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 (
+			<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>
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Permohonan Pencabutan Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/pemeriksaan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<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>
+										</Col>
+										<Col lg={6}>
+											<p className="lead bb">Jawaban Permohonan Pencabutan Sanksi</p>
+											<form className="form-horizontal">
+												<FormGroup>
+													<label md="4">Jawaban:</label>
+													<div md="8">
+														<h3>Diterima</h3>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Dokumen Jawaban:</label>
+													<div 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>
+													</div>
+												</FormGroup>
+											</form>
+										</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>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default FormStandard;

pages/app/pt/jawaban-pencabutan-sanksi/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Progress, Button } from "reactstrap";
 import { getPelaporan } from "../../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
@@ -18,18 +18,10 @@ 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 },
+			pathname: "/app/pt/jawaban-pencabutan-sanksi/detail",
 		});
 	};
 
@@ -39,83 +31,7 @@ class Pelaporan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Permohonan Pencabutan 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>
-					</Col>
-					<Col lg="8">
+					<Col lg={12}>
 						<div className="card b">
 							<div className="card-body">
 								<Datatable options={{ responsive: true }}>
@@ -130,32 +46,32 @@ class Pelaporan extends Component {
 											</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>
+											{/* {pelaporan.data.map((value) => {
+												return ( */}
+											<tr key={1}>
+												<td>BI:1155937274981</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>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, sit.</p>
 															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
-														</td>
-													</tr>
-												);
-											})}
+														</div>
+													</div>
+												</td>
+												<td>{moment().fromNow()}</td>
+												<td>
+													<div className="inline wd-xxs badge badge-success">open</div>
+												</td>
+												<td>
+													<Button color='primary' onClick={(e) => this.detailLaporanClick(e)}>Detail</Button>
+												</td>
+											</tr>
+											{/* );
+											})} */}
 										</tbody>
 									</table>
 								</Datatable>

pages/app/pt/keberatan/detail.js

@@ -0,0 +1,437 @@
+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 Datatable from "@/components/Tables/Datatable";
+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,
+	Modal,
+	ModalHeader,
+	ModalBody,
+	ModalFooter,
+} 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,
+		modal: false,
+		modal1: 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",
+			});
+		}
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
+	};
+
+	toggleModal1 = () => {
+		this.setState({
+			modal: false,
+		});
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	handleSimpan = () => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	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 (
+			<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>
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Permohonan Keberatan</div>
+						<div className="ml-auto">
+							<Link href="/app/pemeriksaan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<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>
+												<Button color="primary" onClick={this.toggleModal}>
+													Ajukan Permohonan Keberatan
+												</Button>
+												<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
+													{/* <ModalHeader toggle={this.toggleModal}>Banding</ModalHeader> */}
+													<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
+													<ModalFooter>
+														<Button color="primary" onClick={this.toggleModal1}>
+															Ya
+														</Button>{" "}
+														<Button color="secondary" onClick={this.toggleModal}>
+															Tidak
+														</Button>
+													</ModalFooter>
+												</Modal>
+												<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
+													<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Permohonan Keberatan</ModalHeader>
+													<ModalBody>
+														<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+															<FormGroup>
+																<label>Dokumen Permohonan Keberatan</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>
+														</form>
+													</ModalBody>
+													<ModalFooter>
+														<Button color="primary" onClick={this.handleSimpan}>
+															Kirim
+														</Button>{" "}
+													</ModalFooter>
+												</Modal>
+											</form>
+										</Col>
+										{/* <Col lg={6}>
+											<p className="lead bb">Permohonan Keberatan</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label>Upload dokumen</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">
+															Kirim
+														</button>
+													</div>
+												</FormGroup>
+											</form>
+										</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>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default FormStandard;

pages/app/pt/keberatan/index.js

@@ -16,117 +16,26 @@ class Keberatan extends Component {
 		};
 	}
 
-	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan();
-		return { pelaporan };
-	};
+	// static getInitialProps = async () => {
+	// 	const pelaporan = await getPelaporan();
+	// 	return { pelaporan };
+	// };
 
-	handleYaClick = (e) => {
+	detailKeberatanClick = (e, ptId, number) => {
 		e.preventDefault();
-		this.toggleModal();
 		Router.push({
-			pathname: "/app/pt/keberatan/upload",
-		});
-	};
-
-	handleTidakClick = (e) => {
-		e.preventDefault();
-		this.toggleModal();
-		Router.push({
-			pathname: "/app/pt/dokumen-perbaikan",
-		});
-	};
-
-	toggleModal = () => {
-		this.setState({
-			modal: !this.state.modal,
+			pathname: "/app/pt/keberatan/detail",
 		});
 	};
 
 	render() {
 		console.log(this.state);
-		const { pelaporan } = this.props;
+		// const { pelaporan } = this.props;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Permohonan Keberatan</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">
+					<Col lg={12}>
 						<div className="card b">
 							<div className="card-body">
 								<Table options={{ responsive: true }}>
@@ -141,58 +50,47 @@ class Keberatan extends Component {
 										</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>
+										{/* {pelaporan.data.map((value) => {
+											return ( */}
+										<tr key={1}>
+											<td>BI:408066447929</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>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, animi?</p>
 														</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={this.toggleModal}>
-															Ajukan
-														</Button>
-														<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
-															<ModalHeader toggle={this.toggleModal}>Permohonan Keberatan</ModalHeader>
-															<ModalBody>apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
-															<ModalFooter>
-																<Button color="primary" onClick={(e) => this.handleYaClick(e)}>
-																	Ya
-																</Button>{" "}
-																<Button color="secondary" onClick={(e) => this.handleTidakClick(e)}>
-																	Tidak
-																</Button>
-															</ModalFooter>
-														</Modal>
-														{/* <Swal options={this.state.swalOption} callback={this.swalCallback} className="btn btn-primary">
+													</div>
+												</div>
+											</td>
+											<td>{moment().fromNow()}</td>
+											<td>
+												<div className="inline wd-xxs badge badge-success">open</div>
+											</td>
+											<td>
+												<Button color="primary" onClick={(e) => this.detailKeberatanClick(e)}>
+													Detail
+												</Button>
+
+												{/* <Swal options={this.state.swalOption} callback={this.swalCallback} className="btn btn-primary">
 															Ajukan
 														</Swal> */}
-														{/* START card */}
-														{/* Button trigger modal */}
-														{/* <Button color="primary" onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)}>
+												{/* START card */}
+												{/* Button trigger modal */}
+												{/* <Button color="primary" onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)}>
 															Ajukan
 														</Button> */}
-														{/* END card */}
-														{/* <Button onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)} className="btn-primary">
+												{/* END card */}
+												{/* <Button onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)} className="btn-primary">
 															Ajukan
 														</Button> */}
-													</td>
-												</tr>
-											);
-										})}
+											</td>
+										</tr>
+										{/* );
+										})} */}
 									</tbody>
 									{/* </table> */}
 								</Table>

pages/app/pt/pencabutan-sanksi/detail.js

@@ -0,0 +1,324 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import Datatable from "@/components/Tables/Datatable";
+import Scrollable from "@/components/Common/Scrollable";
+
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import {
+	Row,
+	Col,
+	Card,
+	CardHeader,
+	CardBody,
+	CardTitle,
+	FormGroup,
+	FormFeedback,
+	FormText,
+	Label,
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButtonDropdown,
+	InputGroupText,
+	Input,
+	Button,
+	DropdownToggle,
+	DropdownMenu,
+	CustomInput,
+	DropdownItem,
+} 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 UploadKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+		};
+	}
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	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 (
+			<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>
+				<div className="p-3">
+					<div className="content-heading">
+						<div>
+							Permohonan Pencabutan Sanksi
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/keberatan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								{/* <CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader> */}
+								<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>
+										</Col>
+										<Col lg={6}>
+											<p className="lead bb">Permohonan Pencabutan Sanksi</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Upload Dokumen:</label>
+													<div className="row-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>
+													<div className="row-xl-10">
+														<button className="btn btn-sm btn-primary" type="submit">
+															Kirim
+														</button>
+													</div>
+												</FormGroup>
+											</form>
+										</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>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default UploadKeberatan;

pages/app/pt/pencabutan-sanksi/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Progress, Button } from "reactstrap";
 import { getPelaporan } from "../../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
@@ -18,18 +18,11 @@ 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 },
+			pathname: "/app/pt/pencabutan-sanksi/detail",
+			// query: { ptId, number },
 		});
 	};
 
@@ -39,83 +32,7 @@ class Pelaporan extends Component {
 			<ContentWrapper>
 				<div className="content-heading">Permohonan Pencabutan 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>
-					</Col>
-					<Col lg="8">
+					<Col lg={12}>
 						<div className="card b">
 							<div className="card-body">
 								<Datatable options={{ responsive: true }}>
@@ -130,32 +47,34 @@ class Pelaporan extends Component {
 											</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>
+											{/* {pelaporan.data.map((value) => {
+												return ( */}
+											<tr key={1}>
+												<td>BI:1155937274981</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>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, sit.</p>
 															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
-														</td>
-													</tr>
-												);
-											})}
+														</div>
+													</div>
+												</td>
+												<td>{moment().fromNow()}</td>
+												<td>
+													<div className="inline wd-xxs badge badge-success">open</div>
+												</td>
+												<td>
+													<Button color="primary" onClick={(e) => this.detailLaporanClick(e)}>
+														Detail
+													</Button>
+												</td>
+											</tr>
+											{/* );
+											})} */}
 										</tbody>
 									</table>
 								</Datatable>