|  | @@ -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 CaseProgress from "@/components/Main/CaseProgress";
 | 
	
		
			
				|  |  | +import TableSanksi from "@/components/Main/TableSanksi";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  class Keberatan extends Component {
 | 
	
		
			
				|  |  |  	constructor(props) {
 | 
	
	
		
			
				|  | @@ -14,154 +10,19 @@ class Keberatan extends Component {
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	static getInitialProps = async () => {
 | 
	
		
			
				|  |  | -		const pelaporan = await getPelaporan();
 | 
	
		
			
				|  |  | -		return { pelaporan };
 | 
	
		
			
				|  |  | -	};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -	newReportClick = (e) => {
 | 
	
		
			
				|  |  | -		e.preventDefault();
 | 
	
		
			
				|  |  | -		Router.push({
 | 
	
		
			
				|  |  | -			pathname: "/app/pelaporan/search",
 | 
	
		
			
				|  |  | -		});
 | 
	
		
			
				|  |  | -	};
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -	detailKeberatanClick = (e, ptId, number) => {
 | 
	
		
			
				|  |  | -		e.preventDefault();
 | 
	
		
			
				|  |  | -		Router.push({
 | 
	
		
			
				|  |  | -			pathname: "/app/keberatan/detail",
 | 
	
		
			
				|  |  | -		});
 | 
	
		
			
				|  |  | +		return {};
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  | -		const { pelaporan } = this.props;
 | 
	
		
			
				|  |  | +		const { sanksi } = this.props;
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<ContentWrapper>
 | 
	
		
			
				|  |  |  				<div className="content-heading">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="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.detailKeberatanClick(e, value.pt_id, value.number)}>
 | 
	
		
			
				|  |  | -																Detail
 | 
	
		
			
				|  |  | -															</Button>
 | 
	
		
			
				|  |  | -														</td>
 | 
	
		
			
				|  |  | -													</tr>
 | 
	
		
			
				|  |  | -												);
 | 
	
		
			
				|  |  | -											})}
 | 
	
		
			
				|  |  | -										</tbody>
 | 
	
		
			
				|  |  | -									</table>
 | 
	
		
			
				|  |  | -								</Datatable>
 | 
	
		
			
				|  |  | -							</div>
 | 
	
		
			
				|  |  | -						</div>
 | 
	
		
			
				|  |  | +						<CaseProgress />
 | 
	
		
			
				|  |  |  					</Col>
 | 
	
		
			
				|  |  | +					<Col lg="8">{/* <TableSanksi listData={sanksi.data} to="/app/keberatan/detail" linkName="Detail" /> */}</Col>
 | 
	
		
			
				|  |  |  				</Row>
 | 
	
		
			
				|  |  |  			</ContentWrapper>
 | 
	
		
			
				|  |  |  		);
 |