navigasi tombol next>

pages/app/pelaporan/detail.js

@@ -1,67 +1,67 @@
-import React, { Component } from "react";
-import Header from "@/components/Main/Header";
-import DetailPT from "@/components/Main/DetailPT";
-import { getOneLaporan } from "@/actions/pelaporan";
-import DetailLaporan from "@/components/Main/DetailLaporan";
-import Link from "next/link";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody } from "reactstrap";
-import Loader from "@/components/Common/Loader";
-import { connect } from "react-redux";
-
-class DetailPelaporan extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-		};
-	}
-
-	static getInitialProps = async ({ query }) => {
-		return { query };
-	};
-
-	componentDidMount = async () => {
-		const { query } = this.props;
-		const pelaporan = await getOneLaporan(this.props.token, query.id);
-		this.setState({ pelaporan });
-	};
-
-	render() {
-		const { pelaporan } = this.state;
-		return (
-			<ContentWrapper unwrap>
-				{/* <Header /> */}
-				<div className="p-3">
-					<div className="content-heading">
-						<div>Detail Pelaporan</div>
-						<div className="ml-auto">
-							<Link href="/app/pelaporan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-							</Link>
-						</div>
-					</div>
-					<Row>
-						<Col xl="9">
-							{pelaporan.data ? (
-								<Card className="card-default">
-									<CardBody>
-										<Row>
-											<Col lg={12}>{<DetailLaporan data={pelaporan.data} />}</Col>
-										</Row>
-									</CardBody>
-								</Card>
-							) : (
-								<Loader />
-							)}
-						</Col>
-						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
-					</Row>
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(DetailPelaporan);
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getOneLaporan } from "@/actions/pelaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+
+class DetailPelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
+		const pelaporan = await getOneLaporan(this.props.token, query.id);
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Pelaporan</div>
+						<div className="ml-auto">
+							<Link href="/app/pelaporan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>{<DetailLaporan data={pelaporan.data} />}</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
+						</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(DetailPelaporan);

pages/app/pelaporan/index.js

@@ -1,57 +1,56 @@
-import React, { Component } from "react";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Link from "next/link";
-import { Row, Col, Button } from "reactstrap";
-import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
-import TableLaporan from "@/components/Main/TableLaporan";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-
-class Pelaporan extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-		};
-	}
-
-	componentDidMount = async () => {
-		const pelaporan = await getPelaporan(this.props.token);
-		this.setState({ pelaporan });
-	};
-
-	render() {
-		const { pelaporan } = this.state;
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<div>Pelaporan</div>
-					<div className="ml-auto">
-						<Link href="/app/penjadwalan">
-							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
-						</Link>
-					</div>
-				</div>
-				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
-					<Col lg="8">
-						<div className="mb-3 d-flex">
-							<div>
-								<Link href="/app/pelaporan/search">
-									<Button color="primary">Laporan Baru</Button>
-								</Link>
-							</div>
-						</div>
-						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
-					</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Pelaporan);
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+import { Row, Col, Button } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	componentDidMount = async () => {
+		const pelaporan = await getPelaporan(this.props.token);
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					Pelaporan
+					<div className="ml-auto"></div>
+					<Link href="/app/penjadwalan">
+						<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
+					</Link>
+				</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<div className="mb-3 d-flex">
+							<div>
+								<Link href="/app/pelaporan/search">
+									<Button color="primary">Laporan Baru</Button>
+								</Link>
+							</div>
+						</div>
+						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Pelaporan);

pages/app/pelaporan/new.js

@@ -1,69 +1,69 @@
-import React, { Component } from "react";
-import Header from "@/components/Main/Header";
-import DetailPT from "@/components/Main/DetailPT";
-import InputData from "@/components/Pelaporan/InputData";
-import Link from "next/link";
-import { getOnePT } from "@/actions/PT";
-import { connect } from "react-redux";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
-import Loader from "@/components/Common/Loader";
-
-class PelaporanNew extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pt: {},
-		};
-	}
-
-	static getInitialProps = async ({ query }) => {
-		return { query };
-	};
-
-	componentDidMount = async () => {
-		const { query, token } = this.props;
-		const pt = await getOnePT(token, query.ptId);
-		this.setState({ pt });
-	};
-
-	render() {
-		const { pt } = this.state;
-		return (
-			<ContentWrapper unwrap>
-				{/* <Header /> */}
-				<div className="p-3">
-					<div className="content-heading">
-						<div>
-							Pelaporan Baru
-							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
-						</div>
-						<div className="ml-auto">
-							<Link href="/app/pelaporan/search">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-							</Link>
-						</div>
-					</div>
-					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											<p className="lead bb">Informasi Laporan</p>
-											<InputData query={this.props.query} />
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
-						<Col xl="3">{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
-					</Row>
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(PelaporanNew);
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import InputData from "@/components/Pelaporan/InputData";
+import Link from "next/link";
+import { getOnePT } from "@/actions/PT";
+import { connect } from "react-redux";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+
+class PelaporanNew extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pt: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const pt = await getOnePT(token, query.ptId);
+		this.setState({ pt });
+	};
+
+	render() {
+		const { pt } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>
+							Pelaporan Baru
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</div>
+						<div className="ml-auto">
+							<Link href="/app/pelaporan/search">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<p className="lead bb">Informasi Laporan</p>
+											<InputData query={this.props.query} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(PelaporanNew);

pages/app/pelaporan/pelaporan_bak.js

@@ -1,902 +1,902 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Progress } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines';
-import Scrollable from '@/components/Common/Scrollable'
-import Datatable from '@/components/Tables/Datatable';
-
-class BugTracker extends Component {
-
-    newReportClick = (e, PT_ID) => {
-        //router = useRouter();
-        //const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-               
-                pathname: '/app/pelaporan.search'
-            }
-        );
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">Pelaporan</div>
-                <Row>
-                    <Col lg="4">
-                        {/* Aside card */}
-                        <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={ 48 } />
-                                    </div>
-                                    <div className="ml-auto">
-                                        <div className="col wd-xxs text-right">
-                                            <div className="text-bold text-muted">48%</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="card-body">
-                                <p>Metrics</p>
-                                <div className="row text-center">
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#23b7e5"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Issues</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[60,40]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#27c24c"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Bugs</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#ff902b"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Hours</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[30,70]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#f05050"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Assigned</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <table className="table bb">
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Assigned Hours</strong>
-                                        </td>
-                                        <td>68 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>32 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Issues</strong>
-                                        </td>
-                                        <td>19</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Bugs</strong>
-                                        </td>
-                                        <td>16</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Health</strong>
-                                        </td>
-                                        <td>
-                                            <em className="far fa-smile fa-lg text-warning"></em>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Recently closed</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:54678</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:55778</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:56878</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:57978</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:1107</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Last closed on</strong>
-                                        </td>
-                                        <td>12/01/2016</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        {/* end Aside card */}
-                    </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>
-                                {/* <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button> */}
-                                {/* <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-user-plus"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-pencil-alt"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-share"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-print"></em>
-                                </button> */}
-                            </div>
-                            {/* <div className="ml-auto">
-                                <p className="mb-0 mt-1">19 bugs / 16 issues</p>
-                            </div> */}
-                        </div>
-                        <div className="card b">
-                            <div className="card-body">
-                                <Datatable options={{responsive: true}}>
-                                    <table className="table w-100">
-                                        <thead>
-                                            <tr>
-                                                <th>Type</th>
-                                                <th>#ID</th>
-                                                <th>Description</th>
-                                                <th>Created</th>
-                                                <th>Priority</th>
-                                                <th>Asigned</th>
-                                                <th>Status</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Aliquam felis nibh, ultrices non elementum</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Aliquam condimentum enim a risus cursus blandit.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Sed at libero augue, in euismod tellus.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Praesent lacinia ultricies neque.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Pellentesque habitant morbi tristique</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Integer venenatis ultrices vulputate.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </Datatable>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default BugTracker;
-
-
+import React, { Component } from 'react';
+import Router from 'next/router'
+import ContentWrapper from '@/components/Layout/ContentWrapper';
+import { Row, Col, Progress } from 'reactstrap';
+
+import Sparkline from '@/components/Common/Sparklines';
+import Scrollable from '@/components/Common/Scrollable'
+import Datatable from '@/components/Tables/Datatable';
+
+class BugTracker extends Component {
+
+    newReportClick = (e, PT_ID) => {
+        //router = useRouter();
+        //const query = { ptId: PT_ID };
+        //    '/app/profile'
+        e.preventDefault();
+        Router.push(
+            {
+               
+                pathname: '/app/pelaporan.search'
+            }
+        );
+    }
+
+    render() {
+        return (
+            <ContentWrapper>
+                <div className="content-heading">Pelaporan</div>
+                <Row>
+                    <Col lg="4">
+                        {/* Aside card */}
+                        <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={ 48 } />
+                                    </div>
+                                    <div className="ml-auto">
+                                        <div className="col wd-xxs text-right">
+                                            <div className="text-bold text-muted">48%</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="card-body">
+                                <p>Metrics</p>
+                                <div className="row text-center">
+                                    <div className="col-3 col-lg-6 col-xl-3">
+                                     <Sparkline values={[20,80]}
+
+                                        options={{
+                                            type:"pie",
+                                            height:"50",
+                                            sliceColors:["#edf1f2", "#23b7e5"]
+                                        }}
+                                        className="sparkline"/>
+                                        <p className="mt-3">Issues</p>
+                                    </div>
+                                    <div className="col-3 col-lg-6 col-xl-3">
+                                     <Sparkline values={[60,40]}
+
+                                        options={{
+                                            type:"pie",
+                                            height:"50",
+                                            sliceColors:["#edf1f2", "#27c24c"]
+                                        }}
+                                        className="sparkline"/>
+                                        <p className="mt-3">Bugs</p>
+                                    </div>
+                                    <div className="col-3 col-lg-6 col-xl-3">
+                                     <Sparkline values={[20,80]}
+
+                                        options={{
+                                            type:"pie",
+                                            height:"50",
+                                            sliceColors:["#edf1f2", "#ff902b"]
+                                        }}
+                                        className="sparkline"/>
+                                        <p className="mt-3">Hours</p>
+                                    </div>
+                                    <div className="col-3 col-lg-6 col-xl-3">
+                                     <Sparkline values={[30,70]}
+
+                                        options={{
+                                            type:"pie",
+                                            height:"50",
+                                            sliceColors:["#edf1f2", "#f05050"]
+                                        }}
+                                        className="sparkline"/>
+                                        <p className="mt-3">Assigned</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <table className="table bb">
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            <strong>Assigned Hours</strong>
+                                        </td>
+                                        <td>68 hs</td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Time Consumed</strong>
+                                        </td>
+                                        <td>32 hs</td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Issues</strong>
+                                        </td>
+                                        <td>19</td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Bugs</strong>
+                                        </td>
+                                        <td>16</td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Health</strong>
+                                        </td>
+                                        <td>
+                                            <em className="far fa-smile fa-lg text-warning"></em>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Commits</strong>
+                                        </td>
+                                        <td>140</td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Recently closed</strong>
+                                        </td>
+                                        <td>
+                                            <Scrollable height="120px" className="list-group">
+                                                <table className="table table-bordered bg-transparent">
+                                                    <tbody>
+                                                        <tr>
+                                                            <td>
+                                                                <a className="text-muted" href="">BI:54678</a>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>
+                                                                <a className="text-muted" href="">BI:55778</a>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>
+                                                                <a className="text-muted" href="">BI:56878</a>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>
+                                                                <a className="text-muted" href="">BI:57978</a>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>
+                                                                <a className="text-muted" href="">BI:1107</a>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </Scrollable>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <strong>Last closed on</strong>
+                                        </td>
+                                        <td>12/01/2016</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        {/* end Aside card */}
+                    </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>
+                                {/* <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button> */}
+                                {/* <button className="btn btn-sm btn-secondary" type="button">
+                                    <em className="fa fa-user-plus"></em>
+                                </button>
+                                <button className="btn btn-sm btn-secondary" type="button">
+                                    <em className="fas fa-pencil-alt"></em>
+                                </button>
+                                <button className="btn btn-sm btn-secondary" type="button">
+                                    <em className="fas fa-share"></em>
+                                </button>
+                                <button className="btn btn-sm btn-secondary" type="button">
+                                    <em className="fa fa-print"></em>
+                                </button> */}
+                            </div>
+                            {/* <div className="ml-auto">
+                                <p className="mb-0 mt-1">19 bugs / 16 issues</p>
+                            </div> */}
+                        </div>
+                        <div className="card b">
+                            <div className="card-body">
+                                <Datatable options={{responsive: true}}>
+                                    <table className="table w-100">
+                                        <thead>
+                                            <tr>
+                                                <th>Type</th>
+                                                <th>#ID</th>
+                                                <th>Description</th>
+                                                <th>Created</th>
+                                                <th>Priority</th>
+                                                <th>Asigned</th>
+                                                <th>Status</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:54678</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sylvia Daniels</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:55778</td>
+                                                <td className="text-nowrap">
+                                                    <small>Aliquam felis nibh, ultrices non elementum</small>
+                                                </td>
+                                                <td>01/05/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg" data-title="low"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sherry Carroll</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:56878</td>
+                                                <td className="text-nowrap">
+                                                    <small>Aliquam condimentum enim a risus cursus blandit.</small>
+                                                </td>
+                                                <td>05/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Mitchell Jones</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:57978</td>
+                                                <td className="text-nowrap">
+                                                    <small>Sed at libero augue, in euismod tellus.</small>
+                                                </td>
+                                                <td>01/11/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Tracey Parker</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1107</td>
+                                                <td className="text-nowrap">
+                                                    <small>Praesent lacinia ultricies neque.</small>
+                                                </td>
+                                                <td>01/01/2015</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Warren Gray</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:1117</td>
+                                                <td className="text-nowrap">
+                                                    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
+                                                </td>
+                                                <td>11/05/2013</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Jackson Ramos</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:10127</td>
+                                                <td className="text-nowrap">
+                                                    <small>Pellentesque habitant morbi tristique</small>
+                                                </td>
+                                                <td>05/02/2014</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Ernest Berry</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:54678</td>
+                                                <td className="text-nowrap">
+                                                    <small>Integer venenatis ultrices vulputate.</small>
+                                                </td>
+                                                <td>01/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sylvia Daniels</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:55778</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/05/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg" data-title="low"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sherry Carroll</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:56878</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Mitchell Jones</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:57978</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/11/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Tracey Parker</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1107</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2015</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Warren Gray</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:1117</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>11/05/2013</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Jackson Ramos</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:10127</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/02/2014</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Ernest Berry</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:54678</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sylvia Daniels</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:55778</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/05/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg" data-title="low"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sherry Carroll</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:56878</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Mitchell Jones</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:57978</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/11/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Tracey Parker</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1107</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2015</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Warren Gray</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1117</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>11/05/2013</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Jackson Ramos</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:10127</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/02/2014</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Ernest Berry</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:54678</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sylvia Daniels</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:55778</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/05/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg" data-title="low"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sherry Carroll</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:56878</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Mitchell Jones</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:57978</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/11/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Tracey Parker</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1107</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2015</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Warren Gray</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:1117</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>11/05/2013</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Jackson Ramos</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:10127</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/02/2014</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Ernest Berry</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:54678</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sylvia Daniels</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:55778</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/05/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg" data-title="low"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Sherry Carroll</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:56878</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/01/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Mitchell Jones</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:57978</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/11/2016</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Tracey Parker</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1107</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>01/01/2015</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Warren Gray</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">bug</div>
+                                                </td>
+                                                <td>BI:1117</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>11/05/2013</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Jackson Ramos</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-success">open</div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="badge bg-gray-lighter">issue</div>
+                                                </td>
+                                                <td>BI:10127</td>
+                                                <td className="text-nowrap">
+                                                    <small>Maecenas mollis egestas convallis.</small>
+                                                </td>
+                                                <td>05/02/2014</td>
+                                                <td>
+                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
+                                                </td>
+                                                <td>
+                                                    <a href="">Ernest Berry</a>
+                                                </td>
+                                                <td>
+                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </Datatable>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+            </ContentWrapper>
+            );
+    }
+
+}
+
+export default BugTracker;
+
+

pages/app/pelaporan/search.js

@@ -1,178 +1,178 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
-import Link from "next/link";
-import { getPT, getPembina } from "@/actions/PT";
-import Select from "react-select";
-import "react-datetime/css/react-datetime.css";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-
-var pembina = [];
-const selectInstanceId = 1;
-class Search extends Component {
-	state = {
-		selectedOptionMulti: [],
-		data: [],
-		pembina: [],
-	};
-
-	componentDidMount = async () => {
-		const { user, token } = this.props;
-		if (user.role.id === 2020) {
-			const dataPembina = await getPembina(token);
-			this.setState({ pembina: dataPembina.data });
-		}
-	};
-
-	optionsPembina = (pembina) => {
-		return pembina.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
-	};
-
-	handleChangeSelectMulti = (selectedOptionMulti) => {
-		this.setState({ selectedOptionMulti });
-	};
-
-	renderInputGroup = (props) => {
-		return (
-			<div className="input-group date">
-				<input className="form-control" {...props} />
-				<span className="input-group-append input-group-addon">
-					<span className="input-group-text fas fa-calendar-alt"></span>
-				</span>
-			</div>
-		);
-	};
-
-	handleClick = (e, PT_ID) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/new",
-			query: { ptId: PT_ID },
-		});
-	};
-
-	fetchData = async () => {
-		const pembina = this.props.user.role.id === 2021 ? this.props.user.lembaga.id : this.state.selectedOptionMulti.map((e) => e.value).join(",");
-		const searchValue = document.getElementById("searchInput").value;
-		const jsonData = await getPT(this.props.token, { search: searchValue, pembina });
-		this.setState({ data: jsonData.data });
-	};
-
-	handleApplyClick = () => {
-		this.fetchData();
-		if (this.state.data && this.state.data.length) {
-			this.renderTableData();
-		}
-	};
-
-	handleSearchClick = () => {
-		this.fetchData();
-		if (this.state.data.length) {
-			this.renderTableData();
-		}
-	};
-
-	renderTableData() {
-		return (
-			this.state.data &&
-			this.state.data.map((pt, index) => {
-				return (
-					<tr>
-						<td>
-							<label>{index + 1}</label>
-						</td>
-						<td>
-							<div className="media align-items-center">
-								<a className="mr-3" href="">
-									<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-								</a>
-								<div className="media-body d-flex">
-									<div>
-										<h4 className="m-0">{pt.nama}</h4>
-										<small className="text-muted">
-											{pt.sk_pendirian} - {pt.website} - {pt.email}
-										</small>
-										<p>{pt.alamat.jalan}</p>
-										{this.props.user.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
-									</div>
-									<div className="ml-auto">
-										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
-											Buat Laporan
-										</Button>
-									</div>
-								</div>
-							</div>
-						</td>
-					</tr>
-				);
-			})
-		);
-	}
-
-	render() {
-		const { selectedOptionMulti, pembina } = this.state;
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<div>
-						Pelaporan
-						<small>Pilih Perguruan Tinggi</small>
-					</div>
-					<div className="ml-auto">
-						<Link href="/app/pelaporan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-						</Link>
-					</div>
-				</div>
-				<Row>
-					<Col lg={this.props.user.role.id === 2021 ? 12 : 9}>
-						<div className="form-group mb-4">
-							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
-							<div className="d-flex">
-								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
-									Search
-								</button>
-								<div className="ml-auto">{this.props.user.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
-							</div>
-						</div>
-						<div className="card card-default">
-							<div className="card-header">Search Results</div>
-							<Table striped bordered hover>
-								<thead>
-									<tr>
-										<th>No. </th>
-										<th>Description</th>
-									</tr>
-								</thead>
-								<tbody>{this.renderTableData()}</tbody>
-							</Table>
-							<div className="card-footer">
-								<div className="d-flex"></div>
-							</div>
-						</div>
-					</Col>
-					{this.props.user.role.id === 2021 ? (
-						""
-					) : (
-						<Col lg="3">
-							<h3 className="m-0 pb-3">Filters</h3>
-							<div className="form-group mb-4">
-								<label className="col-form-label mb-2">by Pembina</label>
-								<br />
-								<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
-							</div>
-							<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
-								Apply
-							</Button>
-						</Col>
-					)}
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Search);
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
+import Link from "next/link";
+import { getPT, getPembina } from "@/actions/PT";
+import Select from "react-select";
+import "react-datetime/css/react-datetime.css";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+
+var pembina = [];
+const selectInstanceId = 1;
+class Search extends Component {
+	state = {
+		selectedOptionMulti: [],
+		data: [],
+		pembina: [],
+	};
+
+	componentDidMount = async () => {
+		const { user, token } = this.props;
+		if (user.role.id === 2020) {
+			const dataPembina = await getPembina(token);
+			this.setState({ pembina: dataPembina.data });
+		}
+	};
+
+	optionsPembina = (pembina) => {
+		return pembina.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
+	};
+
+	handleChangeSelectMulti = (selectedOptionMulti) => {
+		this.setState({ selectedOptionMulti });
+	};
+
+	renderInputGroup = (props) => {
+		return (
+			<div className="input-group date">
+				<input className="form-control" {...props} />
+				<span className="input-group-append input-group-addon">
+					<span className="input-group-text fas fa-calendar-alt"></span>
+				</span>
+			</div>
+		);
+	};
+
+	handleClick = (e, PT_ID) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/new",
+			query: { ptId: PT_ID },
+		});
+	};
+
+	fetchData = async () => {
+		const pembina = this.props.user.role.id === 2021 ? this.props.user.lembaga.id : this.state.selectedOptionMulti.map((e) => e.value).join(",");
+		const searchValue = document.getElementById("searchInput").value;
+		const jsonData = await getPT(this.props.token, { search: searchValue, pembina });
+		this.setState({ data: jsonData.data });
+	};
+
+	handleApplyClick = () => {
+		this.fetchData();
+		if (this.state.data && this.state.data.length) {
+			this.renderTableData();
+		}
+	};
+
+	handleSearchClick = () => {
+		this.fetchData();
+		if (this.state.data.length) {
+			this.renderTableData();
+		}
+	};
+
+	renderTableData() {
+		return (
+			this.state.data &&
+			this.state.data.map((pt, index) => {
+				return (
+					<tr>
+						<td>
+							<label>{index + 1}</label>
+						</td>
+						<td>
+							<div className="media align-items-center">
+								<a className="mr-3" href="">
+									<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+								</a>
+								<div className="media-body d-flex">
+									<div>
+										<h4 className="m-0">{pt.nama}</h4>
+										<small className="text-muted">
+											{pt.sk_pendirian} - {pt.website} - {pt.email}
+										</small>
+										<p>{pt.alamat.jalan}</p>
+										{this.props.user.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
+									</div>
+									<div className="ml-auto">
+										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+											Buat Laporan
+										</Button>
+									</div>
+								</div>
+							</div>
+						</td>
+					</tr>
+				);
+			})
+		);
+	}
+
+	render() {
+		const { selectedOptionMulti, pembina } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>
+						Pelaporan
+						<small>Pilih Perguruan Tinggi</small>
+					</div>
+					<div className="ml-auto">
+						<Link href="/app/pelaporan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+					</div>
+				</div>
+				<Row>
+					<Col lg={this.props.user.role.id === 2021 ? 12 : 9}>
+						<div className="form-group mb-4">
+							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
+							<div className="d-flex">
+								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
+									Search
+								</button>
+								<div className="ml-auto">{this.props.user.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
+							</div>
+						</div>
+						<div className="card card-default">
+							<div className="card-header">Search Results</div>
+							<Table striped bordered hover>
+								<thead>
+									<tr>
+										<th>No. </th>
+										<th>Description</th>
+									</tr>
+								</thead>
+								<tbody>{this.renderTableData()}</tbody>
+							</Table>
+							<div className="card-footer">
+								<div className="d-flex"></div>
+							</div>
+						</div>
+					</Col>
+					{this.props.user.role.id === 2021 ? (
+						""
+					) : (
+						<Col lg="3">
+							<h3 className="m-0 pb-3">Filters</h3>
+							<div className="form-group mb-4">
+								<label className="col-form-label mb-2">by Pembina</label>
+								<br />
+								<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
+							</div>
+							<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+								Apply
+							</Button>
+						</Col>
+					)}
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Search);

pages/app/pemeriksaan/index.js

@@ -1,52 +1,52 @@
-import React, { Component } from "react";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col } from "reactstrap";
-import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
-import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-import Link from "next/link";
-
-class Pemeriksaan extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-		};
-	}
-
-	componentDidMount = async () => {
-		const { token } = this.props;
-		const pelaporan = await getPelaporan(token, { jadwal: true });
-		this.setState({ pelaporan });
-	};
-
-	render() {
-		const { pelaporan } = this.state;
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<div>Evaluasi</div>
-					<div className="ml-auto">
-						<Link href="/app/penjadwalan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-						</Link>
-						<Link href="/app/sanksi">
-							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
-						</Link>
-					</div>
-				</div>
-				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
-					<Col lg="8">{pelaporan?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Evaluasi" /> : <Loader />}</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Pemeriksaan);
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Link from "next/link";
+
+class Pemeriksaan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const pelaporan = await getPelaporan(token, { jadwal: true });
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>Evaluasi</div>
+					<div className="ml-auto">
+						<Link href="/app/penjadwalan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+						<Link href="/app/sanksi">
+							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
+						</Link>
+					</div>
+				</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">{pelaporan?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Evaluasi" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Pemeriksaan);

pages/app/pemeriksaan/new.js

@@ -1,94 +1,94 @@
-import React, { Component } from "react";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import DetailPT from "@/components/Main/DetailPT";
-import Header from "@/components/Main/Header";
-import DetailLaporan from "@/components/Main/DetailLaporan";
-import InputEvaluasi from "@/components/Pemeriksaan/InputEvaluasi";
-import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
-import { getOneLaporan } from "@/actions/pelaporan";
-import Link from "next/link";
-import { Row, Col, Card, CardBody, CardHeader, CardTitle } from "reactstrap";
-import Loader from "@/components/Common/Loader";
-import { connect } from "react-redux";
-
-class PemeriksaanNew extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-		};
-	}
-	static getInitialProps = async ({ query }) => {
-		return { query };
-	};
-
-	componentDidMount = async () => {
-		const { token, query } = this.props;
-		const pelaporan = await getOneLaporan(token, query.id);
-		this.setState({ pelaporan });
-	};
-
-	componentShouldUpdate(nextProps, nextState) {
-		return nextState.pelaporan !== this.state.pelaporan;
-	}
-
-	changePelaporan = (data) => {
-		this.setState({ pelaporan: data });
-	};
-
-	render() {
-		const { query, token } = this.props;
-		const { pelaporan } = this.state;
-		return (
-			<ContentWrapper unwrap>
-				{/* <Header /> */}
-				<div className="p-3">
-					<div className="content-heading">
-						<div>Evaluasi Pemeriksaan</div>
-						<div className="ml-auto">
-							<Link href="/app/pemeriksaan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-							</Link>
-						</div>
-					</div>
-					<Row>
-						<Col xl="9">
-							{pelaporan.data ? (
-								<Card className="card-default">
-									<CardBody>
-										<Row>
-											<Col lg={12}>
-												<DetailLaporan data={pelaporan.data} />
-												<InputEvaluasi query={query} token={token} changePelaporan={this.changePelaporan} />
-											</Col>
-										</Row>
-									</CardBody>
-								</Card>
-							) : (
-								<Loader />
-							)}
-						</Col>
-						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
-					</Row>
-					{pelaporan.data && (
-						<Row>
-							<Col>
-								<Card className="card-default">
-									<CardHeader>
-										<CardTitle>Riwayat Evaluasi</CardTitle>
-									</CardHeader>
-									<CardBody>
-										<TableRiwayat data={pelaporan.data} />
-									</CardBody>
-								</Card>
-							</Col>
-						</Row>
-					)}
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(PemeriksaanNew);
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailPT from "@/components/Main/DetailPT";
+import Header from "@/components/Main/Header";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import InputEvaluasi from "@/components/Pemeriksaan/InputEvaluasi";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import { getOneLaporan } from "@/actions/pelaporan";
+import Link from "next/link";
+import { Row, Col, Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+
+class PemeriksaanNew extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { token, query } = this.props;
+		const pelaporan = await getOneLaporan(token, query.id);
+		this.setState({ pelaporan });
+	};
+
+	componentShouldUpdate(nextProps, nextState) {
+		return nextState.pelaporan !== this.state.pelaporan;
+	}
+
+	changePelaporan = (data) => {
+		this.setState({ pelaporan: data });
+	};
+
+	render() {
+		const { query, token } = this.props;
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Evaluasi Pemeriksaan</div>
+						<div className="ml-auto">
+							<Link href="/app/pemeriksaan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailLaporan data={pelaporan.data} />
+												<InputEvaluasi query={query} token={token} changePelaporan={this.changePelaporan} />
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
+						</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
+					</Row>
+					{pelaporan.data && (
+						<Row>
+							<Col>
+								<Card className="card-default">
+									<CardHeader>
+										<CardTitle>Riwayat Evaluasi</CardTitle>
+									</CardHeader>
+									<CardBody>
+										<TableRiwayat data={pelaporan.data} />
+									</CardBody>
+								</Card>
+							</Col>
+						</Row>
+					)}
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(PemeriksaanNew);

pages/app/penjadwalan/index.js

@@ -1,52 +1,52 @@
-import React, { Component } from "react";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col } from "reactstrap";
-import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
-import TableLaporan from "@/components/Penjadwalan/TableLaporan";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-import Link from "next/link";
-
-class Penjadwalan extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-		};
-	}
-
-	componentDidMount = async () => {
-		const { token } = this.props;
-		const pelaporan = await getPelaporan(token);
-		this.setState({ pelaporan });
-	};
-
-	render() {
-		const { pelaporan } = this.state;
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<div>Penjadwalan Evaluasi</div>
-					<div className="ml-auto">
-						<Link href="/app/pelaporan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-						</Link>
-						<Link href="/app/pemeriksaan">
-							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
-						</Link>
-					</div>
-				</div>
-				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
-					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" /> : <Loader />}</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Penjadwalan);
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Penjadwalan/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Link from "next/link";
+
+class Penjadwalan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const pelaporan = await getPelaporan(token);
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>Penjadwalan Evaluasi</div>
+					<div className="ml-auto">
+						<Link href="/app/pelaporan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+						<Link href="/app/pemeriksaan">
+							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
+						</Link>
+					</div>
+				</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Penjadwalan);

pages/app/penjadwalan/todo.js

@@ -1,13 +1,13 @@
-import React from "react";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-
-// https://github.com/fullcalendar/fullcalendar-react/issues/17
-const DynamicCalendar = dynamic(() => import("../../../components/Extras/calendar.view.js"), {
-	ssr: false,
-});
-
-export default () => {
-	const router = useRouter();
-	return <DynamicCalendar query={router.query} />;
-};
+import React from "react";
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+// https://github.com/fullcalendar/fullcalendar-react/issues/17
+const DynamicCalendar = dynamic(() => import("../../../components/Extras/calendar.view.js"), {
+	ssr: false,
+});
+
+export default () => {
+	const router = useRouter();
+	return <DynamicCalendar query={router.query} />;
+};

pages/app/sanksi/detail.js

@@ -1,70 +1,70 @@
-import React, { Component } from "react";
-import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
-import Router from "next/router";
-import classnames from "classnames";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import DetailSanksi from "@/components/Main/DetailSanksi";
-import Header from "@/components/Main/Header";
-import Link from "next/link";
-import { getPelaporan } from "@/actions/pelaporan";
-import { getOneSanksi } from "@/actions/sanksi";
-import Loader from "@/components/Common/Loader";
-import { connect } from "react-redux";
-
-const stepNavitemStyle = {
-	backgroundColor: "#fcfcfc",
-};
-
-class Detail extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			sanksi: {},
-		};
-	}
-
-	static getInitialProps = async ({ query }) => {
-		return { query };
-	};
-
-	componentDidMount = async () => {
-		const { query, token } = this.props;
-		const sanksi = await getOneSanksi(token, query.id);
-		this.setState({ sanksi });
-	};
-
-	render() {
-		const { sanksi } = this.state;
-		return (
-			<ContentWrapper unwrap>
-				{/* <Header /> */}
-				<div className="p-3">
-					<div className="content-heading">
-						<div>Detail Sanksi</div>
-						<div className="ml-auto">
-							<Link href="/app/sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-							</Link>
-						</div>
-					</div>
-					{sanksi.data ? (
-						<Card className="card-default">
-							<CardBody>
-								<Row>
-									<Col>
-										<DetailSanksi data={sanksi.data} />
-									</Col>
-								</Row>
-							</CardBody>
-						</Card>
-					) : (
-						<Loader />
-					)}
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Detail);
+import React, { Component } from "react";
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
+import Router from "next/router";
+import classnames from "classnames";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Header from "@/components/Main/Header";
+import Link from "next/link";
+import { getPelaporan } from "@/actions/pelaporan";
+import { getOneSanksi } from "@/actions/sanksi";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+
+const stepNavitemStyle = {
+	backgroundColor: "#fcfcfc",
+};
+
+class Detail extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const sanksi = await getOneSanksi(token, query.id);
+		this.setState({ sanksi });
+	};
+
+	render() {
+		const { sanksi } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					{sanksi.data ? (
+						<Card className="card-default">
+							<CardBody>
+								<Row>
+									<Col>
+										<DetailSanksi data={sanksi.data} />
+									</Col>
+								</Row>
+							</CardBody>
+						</Card>
+					) : (
+						<Loader />
+					)}
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Detail);

pages/app/sanksi/index.js

@@ -1,49 +1,49 @@
-import React, { Component } from "react";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col } from "reactstrap";
-import { getPelaporan } from "@/actions/pelaporan";
-import CaseProgress from "@/components/Main/CaseProgress";
-import TableLaporan from "@/components/Sanksi/TableLaporan";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-import Link from "next/link";
-
-class Sanksi extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-		};
-	}
-
-	componentDidMount = async () => {
-		const { token } = this.props;
-		const pelaporan = await getPelaporan(token, { evaluasi: true });
-		this.setState({ pelaporan });
-	};
-
-	render() {
-		const { pelaporan } = this.state;
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<div>Sanksi</div>
-					<div className="ml-auto">
-						<Link href="/app/pemeriksaan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-						</Link>
-					</div>
-				</div>
-				<Row>
-					<Col lg="4">
-						<CaseProgress />
-					</Col>
-					<Col lg="8">{pelaporan.data ? <TableLaporan listData={pelaporan.data} /> : <Loader />}</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Sanksi);
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Sanksi/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Link from "next/link";
+
+class Sanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	componentDidMount = async () => {
+		const { token } = this.props;
+		const pelaporan = await getPelaporan(token, { evaluasi: true });
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>Sanksi</div>
+					<div className="ml-auto">
+						<Link href="/app/pemeriksaan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+					</div>
+				</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">{pelaporan.data ? <TableLaporan listData={pelaporan.data} /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Sanksi);

pages/app/sanksi/proses.js

@@ -1,260 +1,260 @@
-import React, { Component } from "react";
-import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
-import Router from "next/router";
-import classnames from "classnames";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import DetailLaporan from "@/components/Main/DetailLaporan";
-import Header from "@/components/Main/Header";
-import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
-import UploadSurat from "@/components/Sanksi/UploadSurat";
-import Ringkasan from "@/components/Sanksi/Ringkasan";
-import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
-import Link from "next/link";
-import { getOneLaporan } from "@/actions/pelaporan";
-import { createSanksi } from "@/actions/sanksi";
-import { getPelanggaran } from "@/actions/pelanggaran";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-import { ToastContainer, toast } from "react-toastify";
-
-const stepNavitemStyle = {
-	backgroundColor: "#fcfcfc",
-};
-
-class ProsesSanksi extends Component {
-	dataUpload = {};
-	constructor(props) {
-		super(props);
-		this.state = {
-			activeStep: "1",
-			dataUpload: null,
-			dataPelanggaran: {},
-			pelaporan: {},
-		};
-	}
-
-	static getInitialProps = async ({ query }) => {
-		return { query };
-	};
-
-	componentDidMount = async () => {
-		const { query, token } = this.props;
-		const { id } = query;
-		const pelaporan = await getOneLaporan(token, id);
-		this.setState({ pelaporan });
-	};
-
-	done = async (e) => {
-		const toastid = toast.loading("Please wait...");
-		try {
-			e.preventDefault();
-			const { query, token } = this.props;
-			const { id } = query;
-			const formdata = new FormData();
-			formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
-			formdata.append("keterangan", this.state.dataUpload.keterangan);
-			formdata.append("pelanggaran_id", this.state.dataPelanggaran.data.map((e) => e._id).join());
-			if (this.state.dataUpload.files.length > 0) {
-				this.state.dataUpload.files.forEach((e) => {
-					formdata.append("dokumen", e);
-				});
-			}
-			await createSanksi(token, id, formdata);
-			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-			Router.push({
-				pathname: "/app/sanksi",
-			});
-		} catch (error) {
-			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-		}
-	};
-
-	toggleStep = (activeStep) => () => {
-		if (this.state.activeStep !== activeStep) {
-			this.setState({
-				activeStep,
-			});
-		}
-	};
-
-	setCheckedData = async (data) => {
-		const { token } = this.props;
-		const result = await getPelanggaran(token, { id: data.join(",") });
-		this.setState({ dataPelanggaran: result });
-	};
-
-	setUploadSuratSanksi = (data) => {
-		this.setState({ dataUpload: data });
-	};
-
-	render() {
-		const { dataUpload, dataPelanggaran, pelaporan } = this.state;
-		return (
-			<ContentWrapper unwrap>
-				{/* <Header /> */}
-				<div className="p-3">
-					<div className="content-heading">
-						<div>Penetapan Sanksi</div>
-						<div className="ml-auto">
-							<Link href="/app/sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-							</Link>
-						</div>
-					</div>
-					<Card className="card-default">
-						<CardBody>
-							<Row>
-								<Col xs="4">
-									<Nav pills vertical={true}>
-										<NavItem style={stepNavitemStyle}>
-											<NavLink
-												tag="div"
-												className={classnames({
-													active: this.state.activeStep === "1",
-												})}
-												onClick={this.toggleStep("1")}
-											>
-												<h4 className="text-left my-3">1. Detail Laporan</h4>
-											</NavLink>
-										</NavItem>
-										<NavItem style={stepNavitemStyle}>
-											<NavLink
-												tag="div"
-												className={classnames({
-													active: this.state.activeStep === "2",
-												})}
-												onClick={this.toggleStep("2")}
-											>
-												<h4 className="text-left my-3">2. Hasil Evaluasi</h4>
-											</NavLink>
-										</NavItem>
-										<NavItem style={stepNavitemStyle}>
-											<NavLink
-												tag="div"
-												className={classnames({
-													active: this.state.activeStep === "3",
-												})}
-												onClick={this.toggleStep("3")}
-											>
-												<h4 className="text-left my-3">3. Penetapan Sanksi</h4>
-											</NavLink>
-										</NavItem>
-										<NavItem style={stepNavitemStyle}>
-											<NavLink
-												tag="div"
-												className={classnames({
-													active: this.state.activeStep === "4",
-												})}
-												onClick={this.toggleStep("4")}
-											>
-												<h4 className="text-left my-3">4. Nomor Surat Keputusan Sanksi</h4>
-											</NavLink>
-										</NavItem>
-										<NavItem style={stepNavitemStyle}>
-											<NavLink
-												tag="div"
-												className={classnames({
-													active: this.state.activeStep === "5",
-												})}
-												onClick={this.toggleStep("5")}
-											>
-												<h4 className="text-left my-3">5. Ringkasan</h4>
-											</NavLink>
-										</NavItem>
-									</Nav>
-								</Col>
-								<Col xs="8">
-									<TabContent activeTab={this.state.activeStep} className="border-0">
-										<TabPane tabId="1">
-											<div className="pt-3 mb-3">
-												<h2>Detail Laporan</h2>
-												{pelaporan.data ? <DetailLaporan noTitle data={pelaporan.data} /> : <Loader />}
-											</div>
-											<hr />
-											<div className="d-flex">
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("2")}>
-													Next
-												</Button>
-											</div>
-										</TabPane>
-										<TabPane tabId="2">
-											<div className="pt-3 mb-3">
-												<h2>Hasil Evaluasi</h2>
-												<Card className="card-default">
-													{pelaporan.data ? (
-														<CardBody>
-															<TableRiwayat data={pelaporan.data} />
-														</CardBody>
-													) : (
-														<Loader />
-													)}
-												</Card>
-											</div>
-											<hr />
-											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("1")}>
-													Previous
-												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("3")}>
-													Next
-												</Button>
-											</div>
-										</TabPane>
-										<TabPane tabId="3">
-											<div className="pt-3 mb-3">
-												<h2>Penetapan Sanksi</h2>
-												<TablePenetapanSanksi setCheckedData={this.setCheckedData} />
-											</div>
-											<hr />
-											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("2")}>
-													Previous
-												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("4")}>
-													Next
-												</Button>
-											</div>
-										</TabPane>
-										<TabPane tabId="4">
-											<div className="pt-3 mb-3">
-												<h2>Nomor Surat Keputusan Sanksi</h2>
-												<UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} />
-											</div>
-											<hr />
-											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("3")}>
-													Previous
-												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.toggleStep("5")}>
-													Next
-												</Button>
-											</div>
-										</TabPane>
-										<TabPane tabId="5">
-											<div className="pt-3 mb-3">
-												<h2>Ringkasan</h2>
-												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} /> : <Loader />}
-											</div>
-											<hr />
-											<div className="d-flex">
-												<Button color="secondary" onClick={this.toggleStep("4")}>
-													Previous
-												</Button>
-												<Button className="ml-auto" color="primary" onClick={this.done}>
-													Done
-												</Button>
-											</div>
-										</TabPane>
-									</TabContent>
-								</Col>
-							</Row>
-						</CardBody>
-					</Card>
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(ProsesSanksi);
+import React, { Component } from "react";
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
+import Router from "next/router";
+import classnames from "classnames";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Header from "@/components/Main/Header";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import UploadSurat from "@/components/Sanksi/UploadSurat";
+import Ringkasan from "@/components/Sanksi/Ringkasan";
+import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
+import Link from "next/link";
+import { getOneLaporan } from "@/actions/pelaporan";
+import { createSanksi } from "@/actions/sanksi";
+import { getPelanggaran } from "@/actions/pelanggaran";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import { ToastContainer, toast } from "react-toastify";
+
+const stepNavitemStyle = {
+	backgroundColor: "#fcfcfc",
+};
+
+class ProsesSanksi extends Component {
+	dataUpload = {};
+	constructor(props) {
+		super(props);
+		this.state = {
+			activeStep: "1",
+			dataUpload: null,
+			dataPelanggaran: {},
+			pelaporan: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query, token } = this.props;
+		const { id } = query;
+		const pelaporan = await getOneLaporan(token, id);
+		this.setState({ pelaporan });
+	};
+
+	done = async (e) => {
+		const toastid = toast.loading("Please wait...");
+		try {
+			e.preventDefault();
+			const { query, token } = this.props;
+			const { id } = query;
+			const formdata = new FormData();
+			formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
+			formdata.append("keterangan", this.state.dataUpload.keterangan);
+			formdata.append("pelanggaran_id", this.state.dataPelanggaran.data.map((e) => e._id).join());
+			if (this.state.dataUpload.files.length > 0) {
+				this.state.dataUpload.files.forEach((e) => {
+					formdata.append("dokumen", e);
+				});
+			}
+			await createSanksi(token, id, formdata);
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push({
+				pathname: "/app/sanksi",
+			});
+		} catch (error) {
+			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+		}
+	};
+
+	toggleStep = (activeStep) => () => {
+		if (this.state.activeStep !== activeStep) {
+			this.setState({
+				activeStep,
+			});
+		}
+	};
+
+	setCheckedData = async (data) => {
+		const { token } = this.props;
+		const result = await getPelanggaran(token, { id: data.join(",") });
+		this.setState({ dataPelanggaran: result });
+	};
+
+	setUploadSuratSanksi = (data) => {
+		this.setState({ dataUpload: data });
+	};
+
+	render() {
+		const { dataUpload, dataPelanggaran, pelaporan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Penetapan Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Card className="card-default">
+						<CardBody>
+							<Row>
+								<Col xs="4">
+									<Nav pills vertical={true}>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "1",
+												})}
+												onClick={this.toggleStep("1")}
+											>
+												<h4 className="text-left my-3">1. Detail Laporan</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "2",
+												})}
+												onClick={this.toggleStep("2")}
+											>
+												<h4 className="text-left my-3">2. Hasil Evaluasi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "3",
+												})}
+												onClick={this.toggleStep("3")}
+											>
+												<h4 className="text-left my-3">3. Penetapan Sanksi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "4",
+												})}
+												onClick={this.toggleStep("4")}
+											>
+												<h4 className="text-left my-3">4. Nomor Surat Keputusan Sanksi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "5",
+												})}
+												onClick={this.toggleStep("5")}
+											>
+												<h4 className="text-left my-3">5. Ringkasan</h4>
+											</NavLink>
+										</NavItem>
+									</Nav>
+								</Col>
+								<Col xs="8">
+									<TabContent activeTab={this.state.activeStep} className="border-0">
+										<TabPane tabId="1">
+											<div className="pt-3 mb-3">
+												<h2>Detail Laporan</h2>
+												{pelaporan.data ? <DetailLaporan noTitle data={pelaporan.data} /> : <Loader />}
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("2")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="2">
+											<div className="pt-3 mb-3">
+												<h2>Hasil Evaluasi</h2>
+												<Card className="card-default">
+													{pelaporan.data ? (
+														<CardBody>
+															<TableRiwayat data={pelaporan.data} />
+														</CardBody>
+													) : (
+														<Loader />
+													)}
+												</Card>
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("1")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("3")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="3">
+											<div className="pt-3 mb-3">
+												<h2>Penetapan Sanksi</h2>
+												<TablePenetapanSanksi setCheckedData={this.setCheckedData} />
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("2")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("4")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="4">
+											<div className="pt-3 mb-3">
+												<h2>Nomor Surat Keputusan Sanksi</h2>
+												<UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} />
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("3")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("5")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="5">
+											<div className="pt-3 mb-3">
+												<h2>Ringkasan</h2>
+												{pelaporan.data ? <Ringkasan dataLaporan={pelaporan.data} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} /> : <Loader />}
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("4")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.done}>
+													Done
+												</Button>
+											</div>
+										</TabPane>
+									</TabContent>
+								</Col>
+							</Row>
+						</CardBody>
+					</Card>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(ProsesSanksi);