commit dulu

components/Common/Scrollable.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 // Perfect Scrollbar
 import PerfectScrollbar from 'react-perfect-scrollbar';
-import 'react-perfect-scrollbar/dist/css/styles.css';
 
 // ensure rails are shown over the rest
 const fixRailsZIndex = '.ps__rail-y, ps__rail-x {z-index: 999999; }';

pages/_app.js

@@ -54,6 +54,7 @@ import "react-datetime/css/react-datetime.css";
 // ======================
 import "../styles/bootstrap.scss";
 import "../styles/app.scss";
+import "react-perfect-scrollbar/dist/css/styles.css";
 
 // https://nextjs.org/docs/#custom-app
 

pages/app/banding/detail.js

@@ -3,6 +3,7 @@ import Router from "next/router";
 import Link from "next/link";
 import Select from "react-select";
 import Scrollable from "@/components/Common/Scrollable";
+import Datatable from "@/components/Tables/Datatable";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import {
@@ -11,6 +12,7 @@ import {
 	Card,
 	CardHeader,
 	CardBody,
+	CardTitle,
 	FormGroup,
 	FormFeedback,
 	FormText,
@@ -130,48 +132,53 @@ class JawabanBanding extends Component {
 								<CardBody>
 									<Row>
 										<Col lg="6">
-											<p className="lead bb">Detail</p>
+											<p className="lead bb">Detail Laporan</p>
 											<form className="form-horizontal">
 												<FormGroup row>
-													<Col md="4">Order ID:</Col>
+													<Col md="4">Nomor Laporan:</Col>
 													<Col md="8">
 														<strong>987654</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
-													<Col md="4">Purchased On:</Col>
+													<Col md="4">Nama Perguruan Tinggi:</Col>
 													<Col md="8">
-														<strong>03/11/2015 10:10</strong>
+														<strong>Universitas Satyagama</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
-													<Col md="4">Client Name:</Col>
+													<Col md="4">Jenis Pelanggaran:</Col>
 													<Col md="8">
-														<strong>Addison Nichols</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Items:</Col>
-													<Col md="8">
-														<strong>547</strong>
+														<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">Amount:</Col>
+													<Col md="4">Keterangan Laporan:</Col>
 													<Col md="8">
-														<strong>$515.20</strong>
+														<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">Shipment:</Col>
+													<Col md="4">Dibuat Pada:</Col>
 													<Col md="8">
-														<strong>04/10/2015</strong>
+														<strong>23 Januari 2022</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
 													<Col md="4">Status</Col>
 													<Col md="8">
-														<div className="badge badge-info">Shipped</div>
+														<div className="badge badge-info">Ditindaklanjuti</div>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
@@ -324,6 +331,61 @@ class JawabanBanding extends Component {
 							</div>
 						</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>Dokumen Jawaban</th>
+												</tr>
+											</thead>
+											<tbody>
+												<tr>
+													<td>23/01/2022</td>
+													<td>Ditolak</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>Ditolak</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>Ditolak</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>
+						</Col>
+					</Row>
 				</div>
 			</ContentWrapper>
 		);

pages/app/keberatan/detail.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import Router from "next/router";
 import Link from "next/link";
 import Select from "react-select";
+import Datatable from "@/components/Tables/Datatable";
 import Scrollable from "@/components/Common/Scrollable";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
@@ -11,6 +12,7 @@ import {
 	Card,
 	CardHeader,
 	CardBody,
+	CardTitle,
 	FormGroup,
 	FormFeedback,
 	FormText,
@@ -130,48 +132,53 @@ class UploadKeberatan extends Component {
 								<CardBody>
 									<Row>
 										<Col lg="6">
-											<p className="lead bb">Detail</p>
+											<p className="lead bb">Detail Laporan</p>
 											<form className="form-horizontal">
 												<FormGroup row>
-													<Col md="4">Order ID:</Col>
+													<Col md="4">Nomor Laporan:</Col>
 													<Col md="8">
 														<strong>987654</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
-													<Col md="4">Purchased On:</Col>
+													<Col md="4">Nama Perguruan Tinggi:</Col>
 													<Col md="8">
-														<strong>03/11/2015 10:10</strong>
+														<strong>Universitas Satyagama</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
-													<Col md="4">Client Name:</Col>
+													<Col md="4">Jenis Pelanggaran:</Col>
 													<Col md="8">
-														<strong>Addison Nichols</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Items:</Col>
-													<Col md="8">
-														<strong>547</strong>
+														<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">Amount:</Col>
+													<Col md="4">Keterangan Laporan:</Col>
 													<Col md="8">
-														<strong>$515.20</strong>
+														<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">Shipment:</Col>
+													<Col md="4">Dibuat Pada:</Col>
 													<Col md="8">
-														<strong>04/10/2015</strong>
+														<strong>23 Januari 2022</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
 													<Col md="4">Status</Col>
 													<Col md="8">
-														<div className="badge badge-info">Shipped</div>
+														<div className="badge badge-info">Ditindaklanjuti</div>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
@@ -332,6 +339,65 @@ class UploadKeberatan extends Component {
 							</div>
 						</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 Dokumen</th>
+													<th>Dokumen Jawaban</th>
+												</tr>
+											</thead>
+											<tbody>
+												<tr>
+													<td>23/01/2022</td>
+													<td>Ditolak</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>Ditolak</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>Ditolak</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>
+						</Col>
+					</Row>
 				</div>
 			</ContentWrapper>
 		);

pages/app/pemantauan-perbaikan/detail.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import Link from "next/link";
+import Datatable from "@/components/Tables/Datatable";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import {
@@ -61,10 +62,47 @@ class UploadKeberatan extends Component {
 					<Row>
 						<Col xl="9">
 							<Card className="card-default">
-								<CardHeader>
-									<label>Informasi Dokumen</label>
-								</CardHeader>
-								<CardBody></CardBody>
+								<CardBody>
+									<Datatable options={{ responsive: true }}>
+										<table className="table table-striped my-4 w-100">
+											<thead>
+												<tr>
+													<th>Tanggal</th>
+													<th>Dokumen Perbaikan</th>
+												</tr>
+											</thead>
+											<tbody>
+												<tr>
+													<td>23/01/2022</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>
+														<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>
+														<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>
 							{/* END card */}
 						</Col>

pages/app/pemeriksaan/new.js

@@ -389,17 +389,26 @@ class FormStandard extends Component {
 												<tr>
 													<td>23/01/2022</td>
 													<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
-													<td>c</td>
+													<td><em className="fa-lg far fa-file-code"></em>
+														<a className="text-muted" href="">
+															database.controller.js
+														</a></td>
 												</tr>
 												<tr>
 													<td>23/01/2022</td>
 													<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
-													<td>c</td>
+													<td><em className="fa-lg far fa-file-code"></em>
+														<a className="text-muted" href="">
+															database.controller.js
+														</a></td>
 												</tr>
 												<tr>
 													<td>23/01/2022</td>
 													<td>Lorem ipsum dolor sit.</td>
-													<td>v</td>
+													<td><em className="fa-lg far fa-file-code"></em>
+														<a className="text-muted" href="">
+															database.controller.js
+														</a></td>
 												</tr>
 											</tbody>
 										</table>

pages/app/pencabutan-sanksi/detail.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import Router from "next/router";
 import Link from "next/link";
 import Select from "react-select";
+import Datatable from "@/components/Tables/Datatable";
 import Scrollable from "@/components/Common/Scrollable";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
@@ -11,6 +12,7 @@ import {
 	Card,
 	CardHeader,
 	CardBody,
+	CardTitle,
 	FormGroup,
 	FormFeedback,
 	FormText,
@@ -131,48 +133,53 @@ class JawabanPencabutanSanksi extends Component {
 								<CardBody>
 									<Row>
 										<Col lg="6">
-											<p className="lead bb">Detail</p>
+											<p className="lead bb">Detail Laporan</p>
 											<form className="form-horizontal">
 												<FormGroup row>
-													<Col md="4">Order ID:</Col>
+													<Col md="4">Nomor Laporan:</Col>
 													<Col md="8">
 														<strong>987654</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
-													<Col md="4">Purchased On:</Col>
+													<Col md="4">Nama Perguruan Tinggi:</Col>
 													<Col md="8">
-														<strong>03/11/2015 10:10</strong>
+														<strong>Universitas Satyagama</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
-													<Col md="4">Client Name:</Col>
+													<Col md="4">Jenis Pelanggaran:</Col>
 													<Col md="8">
-														<strong>Addison Nichols</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Items:</Col>
-													<Col md="8">
-														<strong>547</strong>
+														<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">Amount:</Col>
+													<Col md="4">Keterangan Laporan:</Col>
 													<Col md="8">
-														<strong>$515.20</strong>
+														<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">Shipment:</Col>
+													<Col md="4">Dibuat Pada:</Col>
 													<Col md="8">
-														<strong>04/10/2015</strong>
+														<strong>23 Januari 2022</strong>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
 													<Col md="4">Status</Col>
 													<Col md="8">
-														<div className="badge badge-info">Shipped</div>
+														<div className="badge badge-info">Ditindaklanjuti</div>
 													</Col>
 												</FormGroup>
 												<FormGroup row>
@@ -336,6 +343,65 @@ class JawabanPencabutanSanksi extends Component {
 							</div>
 						</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>
+						</Col>
+					</Row>
 				</div>
 			</ContentWrapper>
 		);

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

@@ -1,20 +1,43 @@
 import React, { Component } from "react";
+import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Progress, Button } from "reactstrap";
+import { getPelaporan } from "../../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
 
-class PelaporanDetail extends Component {
+class JawabanKeberatan extends Component {
 	constructor(props) {
 		super(props);
 	}
 
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailJawabanKeberatanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pt/jawaban-keberatan/detail",
+			// query: { ptId, number },
+		});
+	};
+
 	render() {
 		const { pelaporan } = this.props;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Pelaporan</div>
+				<div className="content-heading">Jawaban Atas Permohonan Banding</div>
 				<Row>
 					<Col lg="4">
 						<div className="card b">
@@ -93,15 +116,48 @@ class PelaporanDetail extends Component {
 						</div>
 					</Col>
 					<Col lg="8">
-						<div className="mb-3 d-flex">
-							<div>
-								<button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>
-									Laporan Baru
-								</button>
-							</div>
-						</div>
 						<div className="card b">
-							<div className="card-body"></div>
+							<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.detailJawabanKeberatanClick(e, value.pt_id, value.number)}>
+																Detail
+															</Button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
 						</div>
 					</Col>
 				</Row>
@@ -110,4 +166,4 @@ class PelaporanDetail extends Component {
 	}
 }
 
-export default PelaporanDetail;
+export default JawabanKeberatan;