|  | @@ -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 JawabanKeberatan extends Component {
 | 
	
		
			
				|  |  |  	constructor(props) {
 | 
	
	
		
			
				|  | @@ -14,151 +10,18 @@ class JawabanKeberatan extends Component {
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	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 },
 | 
	
		
			
				|  |  | -		});
 | 
	
		
			
				|  |  | +		const sanksi = await getSanksi({ keberatan: true, jawaban: true, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
 | 
	
		
			
				|  |  | +		return { sanksi };
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  | -		const { pelaporan } = this.props;
 | 
	
		
			
				|  |  | +		const { sanksi } = this.props;
 | 
	
		
			
				|  |  | +		console.log(sanksi);
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<ContentWrapper>
 | 
	
		
			
				|  |  |  				<div className="content-heading">Jawaban Atas Permohonan Keberatan</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>
 | 
	
		
			
				|  |  | -					</Col> */}
 | 
	
		
			
				|  |  | -					<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>
 | 
	
		
			
				|  |  | -											</tr>
 | 
	
		
			
				|  |  | -										</thead>
 | 
	
		
			
				|  |  | -										<tbody>
 | 
	
		
			
				|  |  | -											{/* {pelaporan.data.map((value) => {
 | 
	
		
			
				|  |  | -											return ( */}
 | 
	
		
			
				|  |  | -											<tr key={1}>
 | 
	
		
			
				|  |  | -												<td>BI:BI:408066447929</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. Quis, dolorum?</p>
 | 
	
		
			
				|  |  | -															</div>
 | 
	
		
			
				|  |  | -														</div>
 | 
	
		
			
				|  |  | -													</div>
 | 
	
		
			
				|  |  | -												</td>
 | 
	
		
			
				|  |  | -												<td>{moment().fromNow()}</td>
 | 
	
		
			
				|  |  | -												<td>
 | 
	
		
			
				|  |  | -													<Button color="primary" onClick={(e) => this.detailJawabanKeberatanClick(e)}>
 | 
	
		
			
				|  |  | -														Detail
 | 
	
		
			
				|  |  | -													</Button>
 | 
	
		
			
				|  |  | -												</td>
 | 
	
		
			
				|  |  | -											</tr>
 | 
	
		
			
				|  |  | -											{/* ); })} */}
 | 
	
		
			
				|  |  | -										</tbody>
 | 
	
		
			
				|  |  | -									</table>
 | 
	
		
			
				|  |  | -								</Datatable>
 | 
	
		
			
				|  |  | -							</div>
 | 
	
		
			
				|  |  | -						</div>
 | 
	
		
			
				|  |  | -					</Col>
 | 
	
		
			
				|  |  | +					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-keberatan/detail" linkName="Detail" /> : ""} </Col>
 | 
	
		
			
				|  |  |  				</Row>
 | 
	
		
			
				|  |  |  			</ContentWrapper>
 | 
	
		
			
				|  |  |  		);
 |