|  | @@ -8,6 +8,7 @@ import Header from "@/components/Main/Header";
 | 
	
		
			
				|  |  |  import Link from "next/link";
 | 
	
		
			
				|  |  |  import { getPelaporan } from "@/actions/pelaporan";
 | 
	
		
			
				|  |  |  import { createSanksi } from "@/actions/sanksi";
 | 
	
		
			
				|  |  | +import Loader from "@/components/Common/Loader";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const stepNavitemStyle = {
 | 
	
		
			
				|  |  |  	backgroundColor: "#fcfcfc",
 | 
	
	
		
			
				|  | @@ -16,15 +17,23 @@ const stepNavitemStyle = {
 | 
	
		
			
				|  |  |  class Detail extends Component {
 | 
	
		
			
				|  |  |  	constructor(props) {
 | 
	
		
			
				|  |  |  		super(props);
 | 
	
		
			
				|  |  | +		this.state = {
 | 
	
		
			
				|  |  | +			pelaporan: {},
 | 
	
		
			
				|  |  | +		};
 | 
	
		
			
				|  |  |  	}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	static getInitialProps = async ({ query }) => {
 | 
	
		
			
				|  |  | +		return { query };
 | 
	
		
			
				|  |  | +	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	componentDidMount = async () => {
 | 
	
		
			
				|  |  | +		const { query } = this.props;
 | 
	
		
			
				|  |  |  		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
 | 
	
		
			
				|  |  | -		return { query, pelaporan };
 | 
	
		
			
				|  |  | +		this.setState({ pelaporan });
 | 
	
		
			
				|  |  |  	};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  	render() {
 | 
	
		
			
				|  |  | -		const { pelaporan } = this.props;
 | 
	
		
			
				|  |  | +		const { pelaporan } = this.state;
 | 
	
		
			
				|  |  |  		return (
 | 
	
		
			
				|  |  |  			<ContentWrapper unwrap>
 | 
	
		
			
				|  |  |  				{/* <Header /> */}
 | 
	
	
		
			
				|  | @@ -40,9 +49,7 @@ class Detail extends Component {
 | 
	
		
			
				|  |  |  					<Card className="card-default">
 | 
	
		
			
				|  |  |  						<CardBody>
 | 
	
		
			
				|  |  |  							<Row>
 | 
	
		
			
				|  |  | -								<Col>
 | 
	
		
			
				|  |  | -									<DetailSanksi data={pelaporan.data[0]} />
 | 
	
		
			
				|  |  | -								</Col>
 | 
	
		
			
				|  |  | +								<Col>{pelaporan?.data ? <DetailSanksi data={pelaporan.data[0]} /> : <Loader />}</Col>
 | 
	
		
			
				|  |  |  							</Row>
 | 
	
		
			
				|  |  |  						</CardBody>
 | 
	
		
			
				|  |  |  					</Card>
 |