commit

pages/app/pemantauan-perbaikan/detail.js

@@ -1,62 +1,34 @@
 import React, { Component } from "react";
-import Router from "next/router";
+import DetailSanksi from "@/components/Main/DetailSanksi";
 import Link from "next/link";
-import Scrollable from "@/components/Common/Scrollable";
-import Datatable from "@/components/Tables/Datatable";
-
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import Riwayat from "@/components/PT/Riwayat";
+import { getSanksi } from "@/actions/sanksi";
 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";
-
-const styleHeaderText = {
-	color: "brown",
-};
+import { Row, Col, Card, CardBody } from "reactstrap";
 
-class UploadKeberatan extends Component {
+class PemantauanDokumen extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {};
 	}
 
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
 	render() {
+		const { sanksi } = this.props;
 		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>
-							Detail Pemantauan Perbaikan
-							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
-						</div>
+						<div>Detail Pemantauan Perbaikan</div>
 						<div className="ml-auto">
-							<Link href="/app/pt/keberatan">
+							<Link href="/app/pemantauan-perbaikan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
 							</Link>
 						</div>
@@ -67,202 +39,19 @@ class UploadKeberatan extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<p className="lead bb">Detail Laporan</p>
-											<form className="form-horizontal">
-												<FormGroup row>
-													<Col md="4">Nomor Laporan:</Col>
-													<Col md="8">
-														<strong>987654</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Nama Perguruan Tinggi:</Col>
-													<Col md="8">
-														<strong>Universitas Satyagama</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Jenis Pelanggaran:</Col>
-													<Col md="8">
-														<Scrollable height="75px" className="list-group">
-															<ul>
-																<li>Lorem ipsum dolor sit amet.</li>
-																<li>Lorem, ipsum dolor.</li>
-																<li>Lorem ipsum dolor sit.</li>
-															</ul>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Keterangan Laporan:</Col>
-													<Col md="8">
-														<Scrollable height="100px" className="list-group">
-															<p>
-																Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
-																perferendis facere.
-															</p>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Dibuat Pada:</Col>
-													<Col md="8">
-														<strong>23 Januari 2022</strong>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">Status</Col>
-													<Col md="8">
-														<div className="badge badge-info">Ditindaklanjuti</div>
-													</Col>
-												</FormGroup>
-												<FormGroup row>
-													<Col md="4">File Pendukung</Col>
-													<Col md="8">
-														<Scrollable height="120px" className="list-group">
-															<table className="table table-bordered bg-transparent">
-																<tbody>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-image"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				baground-lg.png
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				picture.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-word"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				applicat-diagrams.docx
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																	<tr>
-																		<td>
-																			<em className="fa-lg far fa-file-code"></em>
-																		</td>
-																		<td>
-																			<a className="text-muted" href="">
-																				database.controller.js
-																			</a>
-																		</td>
-																	</tr>
-																</tbody>
-															</table>
-														</Scrollable>
-													</Col>
-												</FormGroup>
-											</form>
+											<DetailSanksi data={sanksi.data[0]} />
 										</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 Perbaikan Dokumen</CardTitle>
-									{/* <div className="text-sm">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.</div> */}
-								</CardHeader>
-								<CardBody>
-									<Datatable options={{ responsive: true }}>
-										<table className="table table-striped my-4 w-100">
-											<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>
+							<Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />
 						</Col>
 					</Row>
 				</div>
@@ -271,4 +60,4 @@ class UploadKeberatan extends Component {
 	}
 }
 
-export default UploadKeberatan;
+export default PemantauanDokumen;

pages/app/pemantauan-perbaikan/index.js

@@ -1,194 +1,33 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } 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 PemantauanPerbaikan extends Component {
 	constructor(props) {
 		super(props);
-		this.state = {
-			modal: false,
-			dataModal: {},
-		};
 	}
 
 	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan();
-		return { pelaporan };
-	};
-
-	newReportClick = (e) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/search",
-		});
+		const sanksi = await getSanksi({ docPerbaikan: true });
+		return { sanksi };
 	};
 
-	detailPemantauanPerbaikanClick = (e, ptId, number) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pemantauan-perbaikan/detail",
-			// query: { ptId, number },
-		});
-	};
-
-	firstModalClick = (value) => {
-		this.setState({ dataModal: value });
-		this.toggleModal();
-	};
-
-	toggleModal = () => {
-		this.setState({
-			modal: !this.state.modal,
-		});
-	};
-
-	renderModal = () => (
-		<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
-			<ModalHeader toggle={this.toggleModal}>Detail {this.state.dataModal._number}</ModalHeader>
-			<ModalBody></ModalBody>
-		</Modal>
-	);
-
 	render() {
-		const { pelaporan } = this.props;
+		const { sanksi } = this.props;
 		return (
 			<ContentWrapper>
-				<div className="content-heading">Pemantauan Perbaikan</div>
+				<div className="content-heading">Banding</div>
 				<Row>
 					<Col lg="4">
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
+						<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>
-														<div className="inline wd-xxs badge badge-success">open</div>
-													</td> */}
-														<td>
-															<Button color="primary" onClick={(e) => this.detailPemantauanPerbaikanClick(e)}>
-																Detail
-															</Button>
-
-															{/* <button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button> */}
-														</td>
-													</tr>
-												);
-											})}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
+						<TableSanksi listData={sanksi.data} to="/app/pemantauan-perbaikan/detail" linkName="Detail" />
 					</Col>
 				</Row>
-				{this.renderModal()}
 			</ContentWrapper>
 		);
 	}