commit

actions/banding.js

@@ -0,0 +1,35 @@
+import { addLog } from "./log";
+
+export const addBanding = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/banding/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "banding" }, description: "membuat permohonan banding" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
+		return false;
+	}
+};
+
+export const addJawabanBanding = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/banding/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "banding" }, description: "membuat permohonan banding" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
+		return false;
+	}
+};

actions/keberatan.js

@@ -12,7 +12,7 @@ export const addKeberatan = async ({ noSanksi, ptId }, data) => {
 		return result;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "CREATE", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
+		addLog({ status: "FAIL", action: "ADD", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
 		return false;
 	}
 };
@@ -29,7 +29,7 @@ export const addJawabanKeberatan = async ({ noSanksi, ptId }, data) => {
 		return result;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "CREATE", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
+		addLog({ status: "FAIL", action: "ADD", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
 		return false;
 	}
 };

components/PT/JawabanKeberatan/DetailJawaban.js

@@ -0,0 +1,50 @@
+import { Row, Col, Card, CardHeader, CardBody, CardTitle, FormGroup, FormFeedback, FormText, Label, InputGroup, InputGroupAddon, InputGroupButtonDropdown, InputGroupText, Input, Button } from "reactstrap";
+import Scrollable from "@/components/Common/Scrollable";
+
+function DetailJawaban({ data }) {
+	const { jawaban } = data.sanksi.keberatan;
+	return (
+		<>
+			<p className="lead bb">Jawaban Permohonan Keberatan</p>
+			<form className="form-horizontal">
+				<FormGroup>
+					<label md="4">Jawaban:</label>
+					<div md="8">
+						<h3>{jawaban.status}</h3>
+					</div>
+				</FormGroup>
+				<FormGroup>
+					<label md="4">Keterangan:</label>
+					<div md="8">
+						<p>{jawaban.description}</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>
+									{jawaban.files.map((e) => (
+										<tr>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</div>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailJawaban;

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -0,0 +1,131 @@
+import React, { Component } from "react";
+import { Row, Col, FormGroup, Button, 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;
+	}
+}
+
+export class ModalPermohonan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal1: false,
+			files: [],
+		};
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	toggleModal1 = () => {
+		this.props.toggleModal(false);
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	handleKirim = () => {
+		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 (
+			<>
+				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
+					<ModalBody>Apakah anda akan mengajukan banding?</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.toggleModal1}>
+							Ya
+						</Button>{" "}
+						<Button color="secondary" onClick={this.props.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
+				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
+					<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Banding</ModalHeader>
+					<ModalBody>
+						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+							<FormGroup>
+								<label>Dokumen Banding</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.handleKirim}>
+							Kirim
+						</Button>
+					</ModalFooter>
+				</Modal>
+			</>
+		);
+	}
+}
+
+export default ModalPermohonan;

components/PT/JawabanKeberatan/Riwayat.js

@@ -0,0 +1,47 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const { banding } = data.sanksi;
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Dokumen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{banding ? (
+								<tr>
+									<td>{moment(banding.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{banding.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/PT/Keberatan/ModalPermohonan.js

@@ -0,0 +1,152 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { addKeberatan } from "@/actions/keberatan";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+export class ModalPermohonan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal1: false,
+			files: [],
+		};
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	toggleModal1 = () => {
+		this.props.toggleModal(false);
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	onSubmit = async (e) => {
+		e.preventDefault();
+		const { noSanksi } = this.props.query;
+		const formdata = new FormData();
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+		if (added) {
+			Router.push({
+				pathname: "/app/pt/keberatan",
+			});
+		}
+	};
+
+	handleKirim = (e) => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+		this.onSubmit(e);
+	};
+
+	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 (
+			<>
+				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
+					<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.props.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
+				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
+					<ModalHeader toggle={this.toggleModal1}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
+					<ModalBody>
+						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+							<FormGroup>
+								<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah dokumen pendukungnya</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.handleKirim}>
+							Kirim
+						</Button>
+					</ModalFooter>
+				</Modal>
+			</>
+		);
+	}
+}
+
+export default ModalPermohonan;

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

@@ -1,186 +1,44 @@
 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 { getSanksi } from "@/actions/sanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import DetailJawaban from "@/components/PT/JawabanKeberatan/DetailJawaban";
+import ModalPermohonan from "@/components/PT/JawabanKeberatan/ModalPermohonan";
+import Riwayat from "@/components/PT/JawabanKeberatan/Riwayat";
 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;
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
 
 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 };
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal: false,
+		};
 	}
 
-	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);
-			});
-		}
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
 
-		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
-		if (inserted) {
-			Router.push({
-				pathname: "/app/pemeriksaan",
-			});
+	toggleModal = (value = true) => {
+		if (!value) {
+			this.setState({ modal: false });
+		} else {
+			this.setState({ modal: !this.state.modal });
 		}
 	};
 
-	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 { sanksi } = this.props;
 
-		const thumbs = files.map((file, index) => (
-			<Col md={3} key={index}>
-				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
-			</Col>
-		));
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
+				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.query} />
+				<Header />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Jawaban Atas Permohonan Keberatan</div>
@@ -196,241 +54,29 @@ class FormStandard extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={6}>
-											<p className="lead bb">Detail Laporan</p>
-											<form className="form-horizontal">
-												<FormGroup row>
-													<Col md="4">Nomor Laporan:</Col>
-													<Col md="8">
-														<strong>987654</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Nama Perguruan Tinggi:</Col>
-													<Col md="8">
-														<strong>Universitas Satyagama</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Jenis Pelanggaran:</Col>
-													<Col md="8">
-														<Scrollable height="75px" className="list-group">
-															<ul>
-																<li>Lorem ipsum dolor sit amet.</li>
-																<li>Lorem, ipsum dolor.</li>
-																<li>Lorem ipsum dolor sit.</li>
-															</ul>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Keterangan Laporan:</Col>
-													<Col md="8">
-														<Scrollable height="100px" className="list-group">
-															<p>
-																Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
-																perferendis facere.
-															</p>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Dibuat Pada:</Col>
-													<Col md="8">
-														<strong>23 Januari 2022</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Status</Col>
-													<Col md="8">
-														<div className="badge badge-info">Ditindaklanjuti</div>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">File Pendukung</Col>
-													<Col md="8">
-														<Scrollable height="120px" className="list-group">
-															<table className="table table-bordered bg-transparent">
-																<tbody>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-image"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				baground-lg.png
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				picture.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-word"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				applicat-diagrams.docx
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																</tbody>
-															</table>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-											</form>
+											<DetailSanksi data={sanksi.data[0]} />
 										</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}>
-													Ajukan Banding
-												</Button>
-												<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
-													{/* <ModalHeader toggle={this.toggleModal}>Banding</ModalHeader> */}
-													<ModalBody>Apakah anda akan mengajukan banding?</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 Banding</ModalHeader>
-													<ModalBody>
-														<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-															<FormGroup>
-																<label>Dokumen Banding</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>
+											<DetailJawaban data={sanksi.data[0]} />
+											<p>
+												Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat menekan tombol di
+												bawah ini (10 Hari Kerja)
+											</p>
+											<Button color="primary" onClick={this.toggleModal}>
+												Ajukan Banding
+											</Button>
 										</Col>
 									</Row>
 								</CardBody>
 							</Card>
-							{/* END card */}
 						</Col>
 						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">Universitas Satyagama</h3>
-										<p>0742/O/1990</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0]} />
 						</Col>
 					</Row>
 				</div>

pages/app/pt/keberatan/detail.js

@@ -1,34 +1,17 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { getSanksi } from "@/actions/sanksi";
-import { addKeberatan } from "@/actions/keberatan";
 import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import DetailSanksi from "@/components/Main/DetailSanksi";
 import Riwayat from "@/components/PT/Keberatan/Riwayat";
+import ModalPermohonan from "@/components/PT/Keberatan/ModalPermohonan";
 import Link from "next/link";
-import { Row, Col, Card, CardBody, FormGroup, Button, 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;
-	}
-}
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
 
 class Keberatan extends Component {
 	state = {
 		modal: false,
-		modal1: false,
-		files: [],
 	};
 
 	static async getInitialProps({ query }) {
@@ -37,87 +20,19 @@ class Keberatan extends Component {
 		return { query, sanksi };
 	}
 
-	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 { noSanksi } = this.props.query;
-		const formdata = new FormData();
-		if (this.state.files.length > 0) {
-			this.state.files.forEach((e) => {
-				formdata.append("files", e);
-			});
-		}
-
-		const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
-		if (added) {
-			Router.push({
-				pathname: "/app/pt/keberatan",
-			});
+	toggleModal = (value = true) => {
+		if (!value) {
+			this.setState({ modal: false });
+		} else {
+			this.setState({ modal: !this.state.modal });
 		}
 	};
 
-	toggleModal = () => {
-		this.setState({
-			modal: !this.state.modal,
-		});
-	};
-
-	toggleModal1 = () => {
-		this.setState({
-			modal: false,
-		});
-		this.setState({
-			modal1: !this.state.modal1,
-		});
-	};
-
-	handleKirim = (e) => {
-		this.setState({
-			modal1: !this.state.modal1,
-		});
-		this.onSubmit(e);
-	};
-
 	render() {
-		const { files } = this.state;
 		const { sanksi } = this.props;
-
-		const thumbs = files.map((file, index) => (
-			<Col md={3} key={index}>
-				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
-			</Col>
-		));
 		return (
 			<ContentWrapper unwrap>
+				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.query} />
 				<Header />
 				<div className="p-3">
 					<div className="content-heading">
@@ -139,55 +54,6 @@ class Keberatan extends Component {
 											<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}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
-												<ModalBody>
-													<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-														<FormGroup>
-															<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah dokumen pendukungnya</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.handleKirim}>
-														Kirim
-													</Button>
-												</ModalFooter>
-											</Modal>
 										</Col>
 									</Row>
 								</CardBody>