udah cukup

actions/cabutSanksi.js

@@ -0,0 +1,35 @@
+import { addLog } from "./log";
+
+export const addCabutSanksi = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/cabut-sanksi/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: "cabut-sanksi" }, description: "membuat permohonan cabut-sanksi" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "cabut-sanksi" }, description: error.message || "membuat permohonan banding" });
+		return false;
+	}
+};
+
+export const addJawabanCabutSanksi = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/cabut-sanksi/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: "cabut-sanksi" }, description: "membuat jawaban permohonan cabut-sanksi" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "cabut-sanksi" }, description: error.message || "membuat jawaban permohonan banding" });
+		return false;
+	}
+};

actions/sanksi.js

@@ -22,21 +22,27 @@ export const getSanksi = async (query = {}) => {
 		let url = "http://localhost:5000/sanksi";
 
 		if (query.ptId && query.noSanksi) {
-			url += `?noSanksi=${query.noSanksi}&ptId=${query.ptId}`; // Detail
+			url += `?noSanksi=${query.noSanksi}&ptId=${query.ptId}&active=true`; // Detail
+		} else if (query.ptId && query.cabutSanksi && query.jawaban) {
+			url += `?ptId=${query.ptId}&cabutSanksi=true&jawaban=true&active=true`; // untuk PT Jawaban Keberatan
+		} else if (query.ptId && query.keberatan) {
+			url += `?ptId=${query.ptId}&cabutSanksi=true&active=true`; // untuk PT Keberatan & Detail
 		} else if (query.ptId && query.keberatan && query.jawaban) {
-			url += `?ptId=${query.ptId}&keberatan=true&jawaban=true`; // untuk PT Jawaban Keberatan
+			url += `?ptId=${query.ptId}&keberatan=true&jawaban=true&active=true`; // untuk PT Jawaban Keberatan
 		} else if (query.ptId && query.keberatan) {
-			url += `?ptId=${query.ptId}&keberatan=true`; // untuk PT Keberatan & Detail
+			url += `?ptId=${query.ptId}&keberatan=true&active=true`; // untuk PT Keberatan & Detail
 		} else if (query.ptId && query.banding && query.jawaban) {
 			url += `?ptId=${query.ptId}&banding=true&jawaban=true`; // untuk PT Jawaban Keberatan
 		} else if (query.ptId && query.banding) {
-			url += `?ptId=${query.ptId}&banding=true`; // untuk PT Keberatan & Detail
+			url += `?ptId=${query.ptId}&banding=true&active=true`; // untuk PT Keberatan & Detail
 		} else if (query.keberatan) {
-			url += `?keberatan=true`;
+			url += `?keberatan=true&active=true`;
 		} else if (query.banding) {
-			url += `?banding=true`;
+			url += `?banding=true&active=true`;
+		} else if (query.cabutSanksi) {
+			url += `?cabutSanksi=true&active=true`;
 		} else if (query.ptId) {
-			url += `?ptId=${query.ptId}`; // Untuk LLDIKTI
+			url += `?ptId=${query.ptId}&active=true`; // Untuk LLDIKTI
 		}
 
 		const res = await fetch(url);

components/PT/JawabanPencabutanSanksi/DetailJawaban.js

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

components/PT/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 }) {
+	console.log(data);
+	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>
+							{data ? (
+								<tr>
+									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.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/PencabutanSanksi/Riwayat.js

@@ -0,0 +1,51 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const { jawaban } = data.sanksi.cabut_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>Status</th>
+								<th>Keterangan</th>
+								<th>Dokumen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{jawaban ? (
+								<tr>
+									<td>{moment(jawaban.createAt).format("DD MMMM YYYY")}</td>
+									<td>{jawaban.status}</td>
+									<td>{jawaban.description}</td>
+									<td>
+										{jawaban.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;

pages/app/keberatan/detail.js

@@ -115,7 +115,7 @@ class DetailKeberatan extends Component {
 					<div className="content-heading">
 						<div>Permohonan Keberatan</div>
 						<div className="ml-auto">
-							<Link href="/app/pt/keberatan">
+							<Link href="/app/keberatan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>

pages/app/pencabutan-sanksi/detail.js

@@ -2,32 +2,15 @@ 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 DetailSanksi from "@/components/Main/DetailSanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import PermohonanPT from "@/components/Main/PermohonanPT";
+import Riwayat from "@/components/PencabutanSanksi/Riwayat";
+import { getSanksi } from "@/actions/sanksi";
+import { addJawabanCabutSanksi } from "@/actions/cabutSanksi";
 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";
+import { Row, Col, Card, CardBody, FormGroup, Button, Input } from "reactstrap";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -43,10 +26,6 @@ class DropzoneWrapper extends Component {
 	}
 }
 
-const styleHeaderText = {
-	color: "brown",
-};
-
 const selectInstanceId = 1;
 
 class JawabanPencabutanSanksi extends Component {
@@ -55,9 +34,15 @@ class JawabanPencabutanSanksi extends Component {
 		this.state = {
 			selectedOption: null,
 			files: [],
+			keterangan: "",
 		};
 	}
 
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
 	handleChangeSelect = (selectedOption) => {
 		this.setState({ selectedOption });
 	};
@@ -92,9 +77,35 @@ class JawabanPencabutanSanksi extends Component {
 		});
 	};
 
+	setKeterangan = (e) => {
+		this.setState({ keterangan: e.target.value });
+	};
+
+	handleSimpan = async (e) => {
+		e.preventDefault();
+		const { selectedOption, keterangan } = this.state;
+		const { noSanksi, ptId } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("status", selectedOption.value);
+		formdata.append("description", keterangan);
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const added = await addJawabanCabutSanksi({ noSanksi, ptId }, formdata);
+		// console.log(added);
+		if (added) {
+			Router.push({
+				pathname: "/app/pencabutan-sanksi",
+			});
+		}
+	};
+
 	render() {
 		const { files, selectedOption } = this.state;
-		console.log(this.state);
+		const { sanksi } = this.props;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -104,22 +115,12 @@ class JawabanPencabutanSanksi extends Component {
 
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
+				<Header />
 				<div className="p-3">
 					<div className="content-heading">
-						<div>
-							Permohonan Pencabutan Sanksi
-							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
-						</div>
+						<div>Jawaban Permohonan Pencabutan Sanksi</div>
 						<div className="ml-auto">
-							<Link href="/app/pt/keberatan">
+							<Link href="/app/pencabutan-sanksi">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>
@@ -127,279 +128,94 @@ class JawabanPencabutanSanksi extends Component {
 					<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>
+											<DetailSanksi data={sanksi.data[0]} />
 										</Col>
 										<Col lg={6}>
-											<p className="lead bb">Jawaban</p>
-											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-												<FormGroup>
-													<label className="row-form-label">Status:</label>
-													<div className="row-md-10">
-														<Select
-															instanceId={selectInstanceId + 1}
-															value={this.state.selectedOption}
-															onChange={this.handleChangeSelect}
-															options={[
-																{ value: "diterima", label: "Diterima", className: "State-ACT" },
-																{ value: "rekomendasi perbaikan", label: "Rekomendasi Perbaikan", className: "State-ACT" },
-															]}
-															required
-														/>
-														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
-													</div>
-												</FormGroup>
-												{selectedOption && selectedOption.value === "rekomendasi perbaikan" ? (
-													<FormGroup>
-														<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> */}
-														</div>
-													</FormGroup>
-												) : (
-													""
-												)}
-												<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">
-															Simpan
-														</button>
-													</div>
-												</FormGroup>
-											</form>
+											<Row>
+												<Col>
+													<PermohonanPT data={sanksi.data[0]} />
+												</Col>
+											</Row>
+											<Row>
+												<Col>
+													<p className="lead bb">Jawaban</p>
+													<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+														<FormGroup>
+															<label className="row-form-label">Status:</label>
+															<div className="row-md-10">
+																<Select
+																	instanceId={selectInstanceId + 1}
+																	value={this.state.selectedOption}
+																	onChange={this.handleChangeSelect}
+																	options={[
+																		{ value: "diterima", label: "Diterima", className: "State-ACT" },
+																		{ value: "rekomendasi perbaikan", label: "Rekomendasi Perbaikan", className: "State-ACT" },
+																	]}
+																	required
+																/>
+																{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+															</div>
+														</FormGroup>
+														{selectedOption && selectedOption.value === "rekomendasi perbaikan" ? (
+															<FormGroup>
+																<label className="row-form-label">Keterangan:</label>
+																<div className="row-md-10">
+																	<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
+																	{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+																</div>
+															</FormGroup>
+														) : (
+															""
+														)}
+														<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 color="primary" onClick={this.handleSimpan} type="submit">
+																	Simpan
+																</Button>
+															</div>
+														</FormGroup>
+													</form>
+												</Col>
+											</Row>
 										</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>
-							<Card className="card-default">
-								<CardHeader>
-									<CardTitle>Riwayat</CardTitle>
-									{/* <div className="text-sm">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.</div> */}
-								</CardHeader>
-								<CardBody>
-									<Datatable options={{ responsive: true }}>
-										<table className="table table-striped my-4 w-100">
-											<thead>
-												<tr>
-													<th>Tanggal</th>
-													<th>Status</th>
-													<th>Keterangan</th>
-													<th>Dokumen</th>
-												</tr>
-											</thead>
-											<tbody>
-												<tr>
-													<td>23/01/2022</td>
-													<td>Rekomendasi Perbaikan</td>
-													<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
-													<td>
-														<em className="fa-lg far fa-file-code"></em>
-														<a className="text-muted" href="">
-															database.controller.js
-														</a>
-													</td>
-												</tr>
-												<tr>
-													<td>23/01/2022</td>
-													<td>Rekomendasi Perbaikan</td>
-													<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
-													<td>
-														<em className="fa-lg far fa-file-code"></em>
-														<a className="text-muted" href="">
-															database.controller.js
-														</a>
-													</td>
-												</tr>
-												<tr>
-													<td>23/01/2022</td>
-													<td>Rekomendasi Perbaikan</td>
-													<td>Lorem ipsum dolor sit.</td>
-													<td>
-														<em className="fa-lg far fa-file-code"></em>
-														<a className="text-muted" href="">
-															database.controller.js
-														</a>
-													</td>
-												</tr>
-											</tbody>
-										</table>
-									</Datatable>
-								</CardBody>
-							</Card>
+							<Riwayat data={sanksi.data[0]} />
 						</Col>
 					</Row>
 				</div>

pages/app/pencabutan-sanksi/index.js

@@ -1,12 +1,9 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-import { getPelaporan } from "../../../actions/pelaporan";
-
-import Sparkline from "@/components/Common/Sparklines";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
+import { Row, Col } from "reactstrap";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
 
 class PencabutanSanksi extends Component {
 	constructor(props) {
@@ -14,151 +11,21 @@ class PencabutanSanksi extends Component {
 	}
 
 	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan();
-		return { pelaporan };
-	};
-
-	newReportClick = (e) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pencabutan-sanksi/detail",
-		});
-	};
-
-	detailPencabutanSanksiClick = (e, ptId, number) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pencabutan-sanksi/detail",
-			// query: { ptId, number },
-		});
+		const sanksi = await getSanksi({ cabutSanksi: true });
+		return { sanksi };
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { sanksi } = this.props;
 		return (
 			<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>
+						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-											</tr>
-										</thead>
-										<tbody>
-											{pelaporan.data.map((value) => {
-												return (
-													<tr key={value._id}>
-														<td>BI:{value._number}</td>
-														<td className="text-nowrap">
-															<div className="media align-items-center">
-																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-																<div className="media-body d-flex">
-																	<div>
-																		<h4 className="m-0">Universitas Satyagama</h4>
-																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																		<p>{value.description}</p>
-																	</div>
-																</div>
-															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<Button color="primary" onClick={(e) => this.detailPencabutanSanksiClick(e, value.pt_id, value.number)}>
-																Detail
-															</Button>
-														</td>
-													</tr>
-												);
-											})}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
+						<TableSanksi listData={sanksi.data} to="/app/pencabutan-sanksi/detail" linkName="Detail" />
 					</Col>
 				</Row>
 			</ContentWrapper>

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

@@ -43,7 +43,7 @@ class JawabanKeberatan extends Component {
 					<div className="content-heading">
 						<div>Jawaban Atas Permohonan Keberatan</div>
 						<div className="ml-auto">
-							<Link href="/app/pemeriksaan">
+							<Link href="/app/pt/jawaban-keberatan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>

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

@@ -1,191 +1,31 @@
 import React, { Component } from "react";
-import Router from "next/router";
+import Link from "next/link";
+import { getSanksi } from "@/actions/sanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import DetailSanksi from "@/components/Main/DetailSanksi";
 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;
-	}
-}
+import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
 
-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 };
+class DetailJawabanPencabutanSanksi extends Component {
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
 	}
 
-	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>
-		));
+		const { sanksi } = this.props;
+		const { jawaban } = sanksi.data[0].sanksi.cabut_sanksi;
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
+				<Header />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Jawaban Permohonan Pencabutan Sanksi</div>
 						<div className="ml-auto">
-							<Link href="/app/pemeriksaan">
+							<Link href="/app/pt/jawaban-pencabutan-sanksi">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>
@@ -196,127 +36,7 @@ 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 Pencabutan Sanksi</p>
@@ -324,7 +44,13 @@ class FormStandard extends Component {
 												<FormGroup>
 													<label md="4">Jawaban:</label>
 													<div md="8">
-														<h3>Diterima</h3>
+														<h3>{jawaban.status}</h3>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Keterangan:</label>
+													<div md="8">
+														<p>{jawaban.description}</p>
 													</div>
 												</FormGroup>
 												<FormGroup>
@@ -333,16 +59,18 @@ class FormStandard extends Component {
 														<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>
+																	{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>
@@ -353,26 +81,9 @@ class FormStandard extends Component {
 									</Row>
 								</CardBody>
 							</Card>
-							{/* END card */}
 						</Col>
 						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">Universitas Satyagama</h3>
-										<p>0742/O/1990</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
+							<DetailPT />
 						</Col>
 					</Row>
 				</div>
@@ -381,4 +92,4 @@ class FormStandard extends Component {
 	}
 }
 
-export default FormStandard;
+export default DetailJawabanPencabutanSanksi;

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

@@ -1,12 +1,8 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-import { getPelaporan } from "../../../../actions/pelaporan";
-
-import Sparkline from "@/components/Common/Sparklines";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -14,70 +10,17 @@ class Pelaporan extends Component {
 	}
 
 	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan();
-		return { pelaporan };
-	};
-
-	detailLaporanClick = (e, ptId, number) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pt/jawaban-pencabutan-sanksi/detail",
-		});
+		const sanksi = await getSanksi({ cabutSanksi: true, jawaban: true, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { sanksi } = this.props;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
 				<Row>
-					<Col lg={12}>
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-												<th></th>
-											</tr>
-										</thead>
-										<tbody>
-											{/* {pelaporan.data.map((value) => {
-												return ( */}
-											<tr key={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>
-														</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>
-							</div>
-						</div>
-					</Col>
+					<Col lg={12}>{sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pt/keberatan/detail.js

@@ -38,7 +38,7 @@ class Keberatan extends Component {
 					<div className="content-heading">
 						<div>Permohonan Keberatan</div>
 						<div className="ml-auto">
-							<Link href="/app/keberatan">
+							<Link href="/app/pt/keberatan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>

pages/app/pt/keberatan/upload.js

@@ -1,358 +0,0 @@
-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,
-} from "reactstrap";
-
-let Dropzone = null;
-class DropzoneWrapper extends Component {
-	state = {
-		isClient: false,
-	};
-	componentDidMount = () => {
-		Dropzone = require("react-dropzone").default;
-		this.setState({ isClient: true });
-	};
-	render() {
-		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
-	}
-}
-
-const styleHeaderText = {
-	color: "brown",
-};
-
-const selectInstanceId = 1;
-
-class FormStandard extends Component {
-	state = {
-		dropdownOpen: false,
-		splitButtonOpen: false,
-		keteranganLaporan: "",
-		tanggal: moment().format("D MMMM YYYY"),
-		files: [],
-	};
-
-	static getInitialProps({ query }) {
-		return { query };
-	}
-
-	setKeteranganPelaporan = (e) => {
-		this.setState({ keteranganLaporan: e.target.value });
-	};
-
-	setTanggal = (moment) => {
-		this.setState({ tanggal: moment.format("D MMMM YYYY") });
-	};
-
-	toggleDropDown = () => {
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-	};
-
-	toggleSplit = () => {
-		this.setState({
-			splitButtonOpen: !this.state.splitButtonOpen,
-		});
-	};
-
-	onDrop = (files) => {
-		this.setState({
-			files: files.map((file) =>
-				Object.assign(file, {
-					preview: URL.createObjectURL(file),
-				})
-			),
-			stat: "Added " + files.length + " file(s)",
-		});
-	};
-
-	uploadFiles = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		this.setState({
-			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
-		});
-	};
-
-	clearFiles = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		this.setState({
-			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
-		});
-		this.setState({
-			files: [],
-		});
-	};
-
-	onSubmit = async (e) => {
-		e.preventDefault();
-		const { number, ptId } = this.props.query;
-		const formdata = new FormData();
-		formdata.append("description", this.state.keteranganLaporan);
-		formdata.append("date", this.state.tanggal);
-		if (this.state.files.length > 0) {
-			this.state.files.forEach((e) => {
-				formdata.append("files", e);
-			});
-		}
-
-		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
-		if (inserted) {
-			Router.push({
-				pathname: "/app/pemeriksaan",
-			});
-		}
-	};
-
-	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>Upload Dokumen 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">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/pencabutan-sanksi/detail.js

@@ -5,8 +5,10 @@ import { getSanksi } from "@/actions/sanksi";
 import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import DetailSanksi from "@/components/Main/DetailSanksi";
+import Riwayat from "@/components/PT/Riwayat";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
+import { addCabutSanksi } from "@/actions/cabutSanksi";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -36,10 +38,6 @@ class DetailPencabutanSanksi extends Component {
 		return { query, sanksi };
 	}
 
-	handleChangeSelect = (selectedOption) => {
-		this.setState({ selectedOption });
-	};
-
 	onDrop = (files) => {
 		this.setState({
 			files: files.map((file) =>
@@ -70,6 +68,24 @@ class DetailPencabutanSanksi extends Component {
 		});
 	};
 
+	handleKirim = 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 addCabutSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+		if (added) {
+			Router.push({
+				pathname: "/app/pt/pencabutan-sanksi",
+			});
+		}
+	};
+
 	render() {
 		const { sanksi } = this.props;
 		const { files } = this.state;
@@ -128,9 +144,9 @@ class DetailPencabutanSanksi extends Component {
 												</FormGroup>
 												<FormGroup>
 													<div className="row-xl-10">
-														<button className="btn btn-sm btn-primary" type="submit">
+														<Button color="primary" onClick={this.handleKirim} type="submit">
 															Kirim
-														</button>
+														</Button>
 													</div>
 												</FormGroup>
 											</form>
@@ -143,6 +159,11 @@ class DetailPencabutanSanksi extends Component {
 							<DetailPT />
 						</Col>
 					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0].sanksi.cabut_sanksi} />
+						</Col>
+					</Row>
 				</div>
 			</ContentWrapper>
 		);