tes

actions/sanksi.js

@@ -17,9 +17,11 @@ export const createSanksi = async ({ number, ptId }, data) => {
 	}
 };
 
-export const getSanksi = async () => {
+export const getSanksi = async (query = {}) => {
 	try {
-		const res = await fetch(`http://localhost:5000/sanksi/`);
+		let url = "http://localhost:5000/sanksi";
+		if (query.ptId && query.noSanksi) url += `?noSanksi=${query.noSanksi}&ptId=${query.ptId}`;
+		const res = await fetch(url);
 		return await res.json();
 	} catch (error) {
 		console.log("error", error);

components/Keberatan/Riwayat.js

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

components/Main/DetailSanksi.js

@@ -1,5 +1,76 @@
-function Sanksi() {
-	return <div>Enter</div>;
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+
+function DetailSanksi({ data, noTitle = false }) {
+	return (
+		<>
+			{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Sanksi:</Col>
+					<Col md="8">
+						<strong>{data.sanksi.no_sanksi}</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>
+								{data.sanksi.pelanggaran.map((e) => (
+									<li>Lorem ipsum dolor sit.</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.sanksi.description}</p>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.sanksi.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dokumen Sanksi:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.sanksi.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>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
 }
 
-export default Sanksi;
+export default DetailSanksi;

components/Main/TableSanksi.js

@@ -12,7 +12,7 @@ function TableSanksi({ listData, to, linkName }) {
 						<thead>
 							<tr>
 								<th>Nomor Sanksi</th>
-								<th>Deskrispsi</th>
+								<th>Keterangan Sanksi</th>
 								<th>Created</th>
 								<th></th>
 							</tr>
@@ -21,24 +21,24 @@ function TableSanksi({ listData, to, linkName }) {
 							{listData.map((data) => {
 								return (
 									<tr key={data._id}>
-										<td>{data._noSanksi}</td>
+										<td>{data.sanksi.no_sanksi}</td>
 										<td>
 											<div className="media align-items-center">
 												<div className="media-body d-flex">
 													<div>
 														<h4 className="m-0">Universitas Satyagama</h4>
-														<p>{data.description}</p>
+														<p>{data.sanksi.description}</p>
 													</div>
 												</div>
 											</div>
 										</td>
-										<td>{moment(data.createdAt).fromNow()}</td>
+										<td>{moment(data.sanksi.createdAt).fromNow()}</td>
 										<td>
 											<div className="ml-auto">
 												<Link
 													href={{
 														pathname: to,
-														query: { noSanksi: data._noSanksi },
+														query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
 													}}
 												>
 													<Button color="primary" size="sm">

pages/app/keberatan/detail.js

@@ -1,9 +1,11 @@
 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 { getSanksi } from "@/actions/sanksi";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import {
@@ -43,10 +45,6 @@ class DropzoneWrapper extends Component {
 	}
 }
 
-const styleHeaderText = {
-	color: "brown",
-};
-
 const selectInstanceId = 1;
 
 class UploadKeberatan extends Component {
@@ -58,6 +56,11 @@ class UploadKeberatan extends Component {
 		};
 	}
 
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
 	handleChangeSelect = (selectedOption) => {
 		this.setState({ selectedOption });
 	};
@@ -94,6 +97,8 @@ class UploadKeberatan extends Component {
 
 	render() {
 		const { files } = this.state;
+		const { sanksi } = this.props;
+		console.log(sanksi);
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -103,14 +108,7 @@ class UploadKeberatan 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>
@@ -131,128 +129,8 @@ class UploadKeberatan extends Component {
 								</CardHeader> */}
 								<CardBody>
 									<Row>
-										<Col lg="6">
-											<p className="lead bb">Detail Laporan</p>
-											<form className="form-horizontal">
-												<FormGroup row>
-													<Col md="4">Nomor Laporan:</Col>
-													<Col md="8">
-														<strong>987654</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Nama Perguruan Tinggi:</Col>
-													<Col md="8">
-														<strong>Universitas Satyagama</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Jenis Pelanggaran:</Col>
-													<Col md="8">
-														<Scrollable height="75px" className="list-group">
-															<ul>
-																<li>Lorem ipsum dolor sit amet.</li>
-																<li>Lorem, ipsum dolor.</li>
-																<li>Lorem ipsum dolor sit.</li>
-															</ul>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Keterangan Laporan:</Col>
-													<Col md="8">
-														<Scrollable height="100px" className="list-group">
-															<p>
-																Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
-																perferendis facere.
-															</p>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Dibuat Pada:</Col>
-													<Col md="8">
-														<strong>23 Januari 2022</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Status</Col>
-													<Col md="8">
-														<div className="badge badge-info">Ditindaklanjuti</div>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">File Pendukung</Col>
-													<Col md="8">
-														<Scrollable height="120px" className="list-group">
-															<table className="table table-bordered bg-transparent">
-																<tbody>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-image"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				baground-lg.png
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				picture.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-word"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				applicat-diagrams.docx
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																</tbody>
-															</table>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-											</form>
+										<Col lg={6}>
+											<DetailSanksi data={sanksi.data[0]} />
 										</Col>
 										<Col lg={6}>
 											<p className="lead bb">Jawaban</p>
@@ -320,23 +198,7 @@ class UploadKeberatan extends Component {
 							{/* END card */}
 						</Col>
 						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">Universitas Satyagama</h3>
-										<p>0742/O/1990</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
+							<DetailPT />
 						</Col>
 					</Row>
 					<Row>

pages/app/keberatan/index.js

@@ -3,6 +3,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
 
 class Keberatan extends Component {
 	constructor(props) {
@@ -10,7 +11,8 @@ class Keberatan extends Component {
 	}
 
 	static getInitialProps = async () => {
-		return {};
+		const sanksi = await getSanksi();
+		return { sanksi };
 	};
 
 	render() {
@@ -23,7 +25,7 @@ class Keberatan extends Component {
 						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						{/* <TableSanksi listData={pelaporan.data} to="/app/keberatan/detail" linkName="Detail" /> */}
+						<TableSanksi listData={sanksi.data} to="/app/keberatan/detail" linkName="Detail" />
 					</Col>
 				</Row>
 			</ContentWrapper>