untuk hari ini sudah

components/Layout/Menu.js

@@ -46,67 +46,87 @@ const Menu = [
 		translate: "sidebar.nav.SEARCH",
 	},
 	{
-		name: "Perguruan Tinggi",
-		icon: "icon-graduation",
-		translate: "sidebar.nav.DASHBOARD",
-		submenu: [
-			{
-				name: "Pemantauan",
-				path: "/dashboard/dashboardv1",
-			},
-			{
-				name: "1.a Permohonan Keberatan",
-				path: "/dashboard/dashboardv1",
-			},
-			{
-				name: "1.b Jawaban atas permohonan keberatan",
-				path: "/dashboard/dashboardv1",
-			},
-			{
-				name: "1.c Jawaban atas permohonan banding",
-				path: "/dashboard/dashboardv1",
-			},
-			{
-				name: "Dokumen Perbaikan",
-				path: "/dashboard/dashboardv2",
-			},
-			{
-				name: "Permohonan Pencabutan Sanksi",
-				path: "/dashboard/dashboardv3",
-			},
-			{
-				name: "Jawaban Permohonan Pencabutan Sanksi",
-				path: "/dashboard/dashboardv3",
-			},
-		],
+		heading: "Bukan PT",
+		translate: "sidebar.heading.BUKAN_PT",
 	},
 	{
-		name: "Bukan PT",
-		icon: "icon-user",
-		translate: "sidebar.nav.DASHBOARD",
+		name: "Pemantauan",
+		path: "/app/pemantauan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN",
+	},
+	{
+		name: "Keberatan",
+		path: "/app/keberatan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.KEBERATAN",
+	},
+	{
+		name: "Banding",
+		path: "/app/banding",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.BANDING",
+	},
+	{
+		name: "Pemantauan Perbaikan",
+		path: "/app/pemantauan-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+	},
+	{
+		name: "Permohonan Pencabutan Sanksi",
+		path: "/app/pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENCABUTAN_SANKSI",
+	},
+	{
+		heading: "Perguruan Tinggi",
+		translate: "sidebar.heading.PERGURUAN_TINGGI",
+	},
+	{
+		name: "Pemantauan",
+		path: "/app/pt/pemantauan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_PEMANTAUAN",
+	},
+	{
+		name: "Pengajuan Keberatan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENGAJUAN_KEBERATAN",
 		submenu: [
 			{
-				name: "Pemantauan",
-				path: "/dashboard/dashboardv1",
-			},
-			{
-				name: "Keberatan",
-				path: "/dashboard/dashboardv2",
+				name: "a. Permohonan Keberatan",
+				path: "/app/pt/keberatan",
 			},
 			{
-				name: "Banding",
-				path: "/dashboard/dashboardv3",
+				name: "b. Jawaban atas permohonan keberatan",
+				path: "/app/pt/jawaban-keberatan",
 			},
 			{
-				name: "Pemantauan Perbaikan",
-				path: "/dashboard/dashboardv3",
-			},
-			{
-				name: "Pencabutan Sanksi",
-				path: "/dashboard/dashboardv3",
+				name: "c. Jawaban atas permohonan banding",
+				path: "/app/pt/jawaban-banding",
 			},
 		],
 	},
+	{
+		name: "Dokumen Perbaikan",
+		path: "/app/pt/dokumen-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_DOKUMEN_PERBAIKAN",
+	},
+	{
+		name: "Permohonan Pencabutan Sanksi",
+		path: "/app/pt/pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_PENCABUTAN_SANKSI",
+	},
+	{
+		name: "Jawaban Permohonan Pencabutan Sanksi",
+		path: "/app/pt/jawaban-pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_JAWABAN_PENCABUTAN_SANKSI",
+	},
+
 	// {
 	// 	name: "FAQ",
 	// 	path: "/app/faq",

pages/app/banding.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Banding</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/keberatan.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Keberatan</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pelaporan/detail.js

@@ -1,12 +1,9 @@
 import React, { Component } from "react";
-import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Progress } from "reactstrap";
-import { getPelaporan } from "../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
 
 class PelaporanDetail extends Component {
 	constructor(props) {
@@ -104,48 +101,7 @@ class PelaporanDetail extends Component {
 							</div>
 						</div>
 						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-											</tr>
-										</thead>
-										<tbody>
-											{pelaporan.data.map((value) => {
-												return (
-													<tr key={value._id}>
-														<td>BI:{value._number}</td>
-														<td className="text-nowrap">
-															<div className="media align-items-center">
-																<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">Universitas Satyagama</h4>
-																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																		<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																		<p> </p>
-																	</div>
-																</div>
-															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-													</tr>
-												);
-											})}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
+							<div className="card-body"></div>
 						</div>
 					</Col>
 				</Row>

pages/app/pelaporan/index.js

@@ -20,11 +20,19 @@ class Pelaporan extends Component {
 
 	newReportClick = (e) => {
 		e.preventDefault();
-		Router.push({ 
+		Router.push({
 			pathname: "/app/pelaporan/search",
 		});
 	};
 
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
 	render() {
 		const { pelaporan } = this.props;
 		return (
@@ -125,6 +133,7 @@ class Pelaporan extends Component {
 												<th>Description</th>
 												<th>Created</th>
 												<th>Status</th>
+												<th></th>
 											</tr>
 										</thead>
 										<tbody>
@@ -134,15 +143,12 @@ class Pelaporan extends Component {
 														<td>BI:{value._number}</td>
 														<td className="text-nowrap">
 															<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>
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
 																<div className="media-body d-flex">
 																	<div>
 																		<h4 className="m-0">Universitas Satyagama</h4>
 																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																		<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																		<p> </p>
+																		<p>{value.description}</p>
 																	</div>
 																</div>
 															</div>
@@ -151,6 +157,9 @@ class Pelaporan extends Component {
 														<td>
 															<div className="inline wd-xxs badge badge-success">open</div>
 														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
 													</tr>
 												);
 											})}

pages/app/pemantauan-perbaikan/index.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Pemantauan Perbaikan</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pemantauan/index.js

@@ -0,0 +1,191 @@
+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";
+// React Slider
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+// React Select
+import Select from "react-select";
+// DateTimePicker
+import Datetime from "react-datetime";
+import "react-datetime/css/react-datetime.css";
+
+import https from "https";
+
+import CardTool from "@/components/Common/CardTool";
+
+import dummyData from "../PT-ID.json";
+
+var pembina = [];
+
+class Search extends Component {
+	static async getInitialProps(ctx) {
+		pembina = [];
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+	}
+
+	state = {
+		selectedOptionMulti: [],
+		data: [],
+	};
+
+	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) => {
+		const query = { ptId: PT_ID };
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pemantauan/timeline",
+			query: { ptId: PT_ID },
+		});
+	};
+
+	fetchData = async () => {
+		var qPembina = "";
+		console.log("this.state.selectedOptionMulti.value : ", this.state.selectedOptionMulti.value);
+		if (this.state.selectedOptionMulti.value !== undefined) {
+			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
+		}
+
+		const searchValue = "q=" + document.getElementById("searchInput").value;
+
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+
+		const jsonData = dummyData;
+
+		this.setState({ data: jsonData });
+	};
+
+	handleApplyClick = () => {
+		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
+		this.fetchData();
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	handleSearchClick = () => {
+		this.fetchData();
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	renderTableData() {
+
+		return 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>
+								</div>
+								<div className="ml-auto">
+									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+										View
+									</Button>
+								</div>
+							</div>
+						</div>
+					</td>
+				</tr>
+			);
+		});
+		//}
+	}
+
+	render() {
+		// used for react select
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>
+						Search
+						<small>Search and filter results</small>
+					</div>
+				</div>
+				<Row>
+					<Col lg="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">
+								</div>
+							</div>
+						</div>
+						{/* START card */}
+						<div className="card card-default">
+							<div className="card-header">
+								Search Results
+							</div>
+							{/* START table-responsive */}
+							<Table striped bordered hover>
+								<thead>
+									<tr>
+										<th>No. </th>
+										<th>Description</th>
+									</tr>
+								</thead>
+								<tbody>{this.renderTableData()}</tbody>
+							</Table>
+							{/* END table-responsive */}
+							<div className="card-footer">
+								<div className="d-flex">
+								</div>
+							</div>
+						</div>
+						{/* END card */}
+					</Col>
+					<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 name="multi-select-name" multi simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina} />
+						</div>
+						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+							Apply
+						</Button>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Search;

pages/app/pemantauan/timeline.js

@@ -0,0 +1,337 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import {
+	Row,
+	Col,
+	Card,
+	Button,
+	CardHeader,
+	CardFooter,
+	Table,
+	Nav,
+	NavItem,
+	NavLink,
+	TabContent,
+	TabPane,
+	Pagination,
+	PaginationItem,
+	PaginationLink,
+	ListGroup,
+	ListGroupItem,
+	Dropdown,
+	DropdownMenu,
+	DropdownToggle,
+	DropdownItem,
+} from "reactstrap";
+//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import Select from "react-select";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+import { GetServerSideProps, NextPage } from "next";
+import ErrorPage from "next/error";
+import fetch from "node-fetch";
+
+import https from "https";
+
+const containerStyle = {
+	width: "100%",
+	height: "155px",
+};
+
+import FormWizardVertical from "../pt.wizard.vertical.js";
+
+var jenisPelanggaran = [];
+
+//const qpt_id = {};
+
+//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
+
+// Demo with custom style
+const DemoMapCustomStyle = (props) => (
+	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
+		<Marker position={props.location} />
+	</GoogleMap>
+);
+
+const styleHeaderText = {
+	color: "brown",
+};
+
+class Profile extends Component {
+	toggleTab = (tab) => {
+		if (this.state.activeTab !== tab) {
+			this.setState({
+				activeTab: tab,
+			});
+		}
+	};
+
+	static async getInitialProps({ query }) {
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+		const json = [
+			{
+				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
+				kode: "031031",
+				kode_satker: null,
+				nama: "Universitas Satyagama",
+				nama_singkat: "USG",
+				sk_pendirian: "0742/O/1990",
+				tgl_sk_pendirian: "1990-12-22",
+				sk_operasional: null,
+				tgl_sk_operasional: null,
+				status: "A",
+				alamat: {
+					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
+					rt: null,
+					rw: null,
+					dusun: null,
+					kelurahan: "-",
+					kode_pos: "11730",
+					kab_kota: {
+						id: "016200",
+						nama: "Kota Jakarta Barat",
+					},
+				},
+				propinsi: {
+					id: "010000",
+					nama: "Prov. D.K.I. Jakarta",
+				},
+				telepon: "(021) 5452377-78",
+				faksimile: "(021) 54391325",
+				website: "www.satyagama.ac.id",
+				email: "info@satyagama.ac.id",
+				status_milik: {
+					id: "3",
+					nama: "Yayasan",
+				},
+				pembina: {
+					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
+					nama: "LLDIKTI III",
+				},
+				bentuk_pendidikan: {
+					id: "23",
+					nama: "Universitas",
+				},
+				last_update: "2021-12-08",
+				negara: {
+					id: "ID",
+					nama: "Indonesia",
+				},
+				pimpinan: {
+					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
+					nama: "DEWI SULISTYANI",
+					tmt_sk_pengangkatan: "2021-03-17",
+					tst_sk_pengangkatan: "2025-03-17",
+				},
+			},
+		];
+		console.log("json : ", json);
+
+		return { data: json[0] };
+	}
+
+	state = {
+		dropdownOpen: false,
+		dropdownOpenUpload: false,
+		timelineAlt: false,
+		location: { lat: 33.7906731, lng: -117.8357194 },
+		customStyle: [
+			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
+			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
+			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
+			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
+			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
+			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
+			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
+			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
+			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
+		],
+		listA: [],
+		selectedOptionMulti: [],
+		activeTab: "tasks",
+	};
+
+	toggleDD = () =>
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+
+	toggleDDUpload = () =>
+		this.setState({
+			dropdownOpenUpload: !this.state.dropdownOpenUpload,
+		});
+
+	toggleTimeline = (e) => {
+		this.setState({
+			timelineAlt: e.target.checked,
+		});
+	};
+
+	render() {
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper unwrap>
+				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
+					<div className="p-4 text-center" style={styleHeaderText}>
+						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
+						<h3 className="m-0">{this.props.data.nama}</h3>
+						<p>{this.props.data.sk_pendirian}</p>
+						<p>{this.props.data.alamat.jalan}</p>
+					</div>
+				</div>
+				<div className="p-3">
+					<Row>
+						<Col xl="9">
+							<ul className="timeline">
+								<li className="timeline-separator" data-datetime="Today"></li>
+								<li className="timeline-inverted">
+									<div className="timeline-badge info">
+										<em className="far fa-file"></em>
+									</div>
+									<div className="timeline-card">
+										<div className="popover right">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														Upload Bukti Perbaikan
+														{/* <em className="fa fa-paperclip"></em> */}
+														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
+															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
+															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
+															<DropdownToggle caret color="link">
+																<em className="fa fa-paperclip"></em>
+															</DropdownToggle>
+															<DropdownMenu className="animated fadeInUpShort">
+																<DropdownItem>
+																	<em className="fa fa-lock mr-2"></em>Upload
+																</DropdownItem>
+															</DropdownMenu>
+														</Dropdown>
+													</p>
+													{/* <li> */}
+
+													{/* </li> */}
+												</div>
+												{/* <a href="">
+                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
+                                                </a> */}
+												<p className="text-muted my-2">3 Logs</p>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">12m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												{/* <form className="mt-2" method="post" action="#">
+                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
+                                                </form> */}
+											</div>
+										</div>
+									</div>
+								</li>
+								<li>
+									<div className="timeline-badge danger">
+										<em className="fas fa-ticket-alt"></em>
+									</div>
+									<div className="timeline-card">
+										<div className="popover left">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														opened project
+														<a className="ml-2" href="">
+															#548795
+														</a>
+													</p>
+												</div>
+												<p>
+													<em>&mdash; Project description sample</em>
+												</p>
+											</div>
+										</div>
+									</div>
+								</li>
+								<li className="timeline-end">
+									<a className="timeline-badge">
+										<em className="fa fa-plus"></em>
+									</a>
+								</li>
+							</ul>
+						</Col>
+						<Col xl="3">
+							<div className="card card-default">
+								<div className="card-body">
+									<div className="text-center">
+										<h3 className="mt-0">{this.props.data.nama}</h3>
+										<p>{this.props.data.sk_pendirian}</p>
+									</div>
+									<hr />
+									<ul className="list-unstyled px-4">
+										<li>
+											<em className="fa fa-globe fa-fw mr-3"></em>
+											{this.props.data.website}
+										</li>
+										<li>
+											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
+										</li>
+									</ul>
+								</div>
+							</div>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Profile;

pages/app/pencabutan-sanksi.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/dokumen-perbaikan/index.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Dokumen Perbaikan</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/jawaban-banding/index.js

@@ -0,0 +1,113 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+
+class PelaporanDetail extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Pelaporan</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="mb-3 d-flex">
+							<div>
+								<button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>
+									Laporan Baru
+								</button>
+							</div>
+						</div>
+						<div className="card b">
+							<div className="card-body"></div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PelaporanDetail;

pages/app/pt/jawaban-keberatan/index.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Jawaban Atas Permohonan Keberatan</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/jawaban-pencabutan-sanksi/index.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/keberatan/index.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Permohonan Keberatan</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/pemantauan.js

@@ -0,0 +1,337 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import {
+	Row,
+	Col,
+	Card,
+	Button,
+	CardHeader,
+	CardFooter,
+	Table,
+	Nav,
+	NavItem,
+	NavLink,
+	TabContent,
+	TabPane,
+	Pagination,
+	PaginationItem,
+	PaginationLink,
+	ListGroup,
+	ListGroupItem,
+	Dropdown,
+	DropdownMenu,
+	DropdownToggle,
+	DropdownItem,
+} from "reactstrap";
+//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import Select from "react-select";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+import { GetServerSideProps, NextPage } from "next";
+import ErrorPage from "next/error";
+import fetch from "node-fetch";
+
+import https from "https";
+
+const containerStyle = {
+	width: "100%",
+	height: "155px",
+};
+
+import FormWizardVertical from "../pt.wizard.vertical.js";
+
+var jenisPelanggaran = [];
+
+//const qpt_id = {};
+
+//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
+
+// Demo with custom style
+const DemoMapCustomStyle = (props) => (
+	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
+		<Marker position={props.location} />
+	</GoogleMap>
+);
+
+const styleHeaderText = {
+	color: "brown",
+};
+
+class Profile extends Component {
+	toggleTab = (tab) => {
+		if (this.state.activeTab !== tab) {
+			this.setState({
+				activeTab: tab,
+			});
+		}
+	};
+
+	static async getInitialProps({ query }) {
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+		const json = [
+			{
+				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
+				kode: "031031",
+				kode_satker: null,
+				nama: "Universitas Satyagama",
+				nama_singkat: "USG",
+				sk_pendirian: "0742/O/1990",
+				tgl_sk_pendirian: "1990-12-22",
+				sk_operasional: null,
+				tgl_sk_operasional: null,
+				status: "A",
+				alamat: {
+					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
+					rt: null,
+					rw: null,
+					dusun: null,
+					kelurahan: "-",
+					kode_pos: "11730",
+					kab_kota: {
+						id: "016200",
+						nama: "Kota Jakarta Barat",
+					},
+				},
+				propinsi: {
+					id: "010000",
+					nama: "Prov. D.K.I. Jakarta",
+				},
+				telepon: "(021) 5452377-78",
+				faksimile: "(021) 54391325",
+				website: "www.satyagama.ac.id",
+				email: "info@satyagama.ac.id",
+				status_milik: {
+					id: "3",
+					nama: "Yayasan",
+				},
+				pembina: {
+					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
+					nama: "LLDIKTI III",
+				},
+				bentuk_pendidikan: {
+					id: "23",
+					nama: "Universitas",
+				},
+				last_update: "2021-12-08",
+				negara: {
+					id: "ID",
+					nama: "Indonesia",
+				},
+				pimpinan: {
+					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
+					nama: "DEWI SULISTYANI",
+					tmt_sk_pengangkatan: "2021-03-17",
+					tst_sk_pengangkatan: "2025-03-17",
+				},
+			},
+		];
+		console.log("json : ", json);
+
+		return { data: json[0] };
+	}
+
+	state = {
+		dropdownOpen: false,
+		dropdownOpenUpload: false,
+		timelineAlt: false,
+		location: { lat: 33.7906731, lng: -117.8357194 },
+		customStyle: [
+			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
+			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
+			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
+			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
+			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
+			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
+			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
+			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
+			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
+		],
+		listA: [],
+		selectedOptionMulti: [],
+		activeTab: "tasks",
+	};
+
+	toggleDD = () =>
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+
+	toggleDDUpload = () =>
+		this.setState({
+			dropdownOpenUpload: !this.state.dropdownOpenUpload,
+		});
+
+	toggleTimeline = (e) => {
+		this.setState({
+			timelineAlt: e.target.checked,
+		});
+	};
+
+	render() {
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper unwrap>
+				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
+					<div className="p-4 text-center" style={styleHeaderText}>
+						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
+						<h3 className="m-0">{this.props.data.nama}</h3>
+						<p>{this.props.data.sk_pendirian}</p>
+						<p>{this.props.data.alamat.jalan}</p>
+					</div>
+				</div>
+				<div className="p-3">
+					<Row>
+						<Col xl="9">
+							<ul className="timeline">
+								<li className="timeline-separator" data-datetime="Today"></li>
+								<li className="timeline-inverted">
+									<div className="timeline-badge info">
+										<em className="far fa-file"></em>
+									</div>
+									<div className="timeline-card">
+										<div className="popover right">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														Upload Bukti Perbaikan
+														{/* <em className="fa fa-paperclip"></em> */}
+														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
+															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
+															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
+															<DropdownToggle caret color="link">
+																<em className="fa fa-paperclip"></em>
+															</DropdownToggle>
+															<DropdownMenu className="animated fadeInUpShort">
+																<DropdownItem>
+																	<em className="fa fa-lock mr-2"></em>Upload
+																</DropdownItem>
+															</DropdownMenu>
+														</Dropdown>
+													</p>
+													{/* <li> */}
+
+													{/* </li> */}
+												</div>
+												{/* <a href="">
+                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
+                                                </a> */}
+												<p className="text-muted my-2">3 Logs</p>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">12m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												{/* <form className="mt-2" method="post" action="#">
+                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
+                                                </form> */}
+											</div>
+										</div>
+									</div>
+								</li>
+								<li>
+									<div className="timeline-badge danger">
+										<em className="fas fa-ticket-alt"></em>
+									</div>
+									<div className="timeline-card">
+										<div className="popover left">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														opened project
+														<a className="ml-2" href="">
+															#548795
+														</a>
+													</p>
+												</div>
+												<p>
+													<em>&mdash; Project description sample</em>
+												</p>
+											</div>
+										</div>
+									</div>
+								</li>
+								<li className="timeline-end">
+									<a className="timeline-badge">
+										<em className="fa fa-plus"></em>
+									</a>
+								</li>
+							</ul>
+						</Col>
+						<Col xl="3">
+							<div className="card card-default">
+								<div className="card-body">
+									<div className="text-center">
+										<h3 className="mt-0">{this.props.data.nama}</h3>
+										<p>{this.props.data.sk_pendirian}</p>
+									</div>
+									<hr />
+									<ul className="list-unstyled px-4">
+										<li>
+											<em className="fa fa-globe fa-fw mr-3"></em>
+											{this.props.data.website}
+										</li>
+										<li>
+											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
+										</li>
+									</ul>
+								</div>
+							</div>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Profile;

pages/app/pt/pencabutan-sanksi/index.js

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Progress } from "reactstrap";
+import { getPelaporan } from "../../../../actions/pelaporan";
+
+import Sparkline from "@/components/Common/Sparklines";
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	newReportClick = (e) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/search",
+		});
+	};
+
+	detailLaporanClick = (e, ptId, number) => {
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/detail",
+			query: { ptId, number },
+		});
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
+				<Row>
+					<Col lg="4">
+						<div className="card b">
+							<div className="card-body bb">
+								<p>Overvall progress</p>
+								<div className="d-flex align-items-center mb-2">
+									<div className="w-100">
+										<Progress className="progress-xs m0" color="info" value={20} />
+									</div>
+									<div className="ml-auto">
+										<div className="col wd-xxs text-right">
+											<div className="text-bold text-muted">20%</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="card-body">
+								<p>Metrics</p>
+								<div className="row text-center">
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[20, 80]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#23b7e5"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Open Case</p>
+									</div>
+									<div className="col-6 col-lg-6 col-xl-6">
+										<Sparkline
+											values={[80, 20]}
+											options={{
+												type: "pie",
+												height: "50",
+												sliceColors: ["#edf1f2", "#27c24c"],
+											}}
+											className="sparkline"
+										/>
+										<p className="mt-3">Close Case</p>
+									</div>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									<tr>
+										<td>
+											<strong>Open Case</strong>
+										</td>
+										<td>80</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Close Case</strong>
+										</td>
+										<td>20</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Performance</strong>
+										</td>
+										<td>
+											<em className="far fa-smile fa-lg text-warning"></em>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<strong>Last Case Closed</strong>
+										</td>
+										<td>BI:1107 - 12/01/2016</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</Col>
+					<Col lg="8">
+						<div className="card b">
+							<div className="card-body">
+								<Datatable options={{ responsive: true }}>
+									<table className="table w-100">
+										<thead>
+											<tr>
+												<th>#ID</th>
+												<th>Description</th>
+												<th>Created</th>
+												<th>Status</th>
+												<th></th>
+											</tr>
+										</thead>
+										<tbody>
+											{pelaporan.data.map((value) => {
+												return (
+													<tr key={value._id}>
+														<td>BI:{value._number}</td>
+														<td className="text-nowrap">
+															<div className="media align-items-center">
+																<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+																<div className="media-body d-flex">
+																	<div>
+																		<h4 className="m-0">Universitas Satyagama</h4>
+																		<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
+																		<p>{value.description}</p>
+																	</div>
+																</div>
+															</div>
+														</td>
+														<td>{moment(value.createdAt).fromNow()}</td>
+														<td>
+															<div className="inline wd-xxs badge badge-success">open</div>
+														</td>
+														<td>
+															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/search.js

@@ -1,248 +1,226 @@
-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 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";
 // React Slider
-import Slider from 'rc-slider';
-import 'rc-slider/assets/index.css';
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
 // React Select
-import Select from 'react-select';
+import Select from "react-select";
 // DateTimePicker
-import Datetime from 'react-datetime';
-import 'react-datetime/css/react-datetime.css';
+import Datetime from "react-datetime";
+import "react-datetime/css/react-datetime.css";
 
+import https from "https";
 
-import https from 'https';
-
-
-
-import CardTool from '@/components/Common/CardTool'
-
+import CardTool from "@/components/Common/CardTool";
 
+import dummyData from "./PT-ID.json";
 
 var pembina = [];
 
-
 class Search extends Component {
-
-    
-
-    static async getInitialProps(ctx) {
-
-        pembina = [];
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-         
-         const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/lembaga-non-sp', { 
-            method: 'get', 
-            headers: new Headers({
-              'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-              'Accept': 'application/json'
-            }),
-            agent: httpsAgent
-          }
-         )
-
-         
-        const jsonPembina = await res.json();
-        //jsonPembina = JSON.parse(jsonPembina);
-        // id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F",nama: "Badan Intelijen Negara",singkatan: "BIN"
-        // { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
-
-
-
-        var numrows = jsonPembina.length;
-
-        for (var i = 0; i < numrows; i++) {
-            pembina.push({value:jsonPembina[i].id, label:jsonPembina[i].nama, className: 'State-'+jsonPembina[i].singkatan});
-        }
-
-        console.log('pembina : ', pembina);
-
-        
-        //return { data: json }
-      }
-
-    state = {
-        selectedOptionMulti: [],
-        data: []
-    }
-
-
-    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) => {
-        //router = useRouter();
-        const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-                pathname: '/app/profile-pt',
-                query: { ptId: PT_ID }
-            }
-        );
-    }
-
-    fetchData = async () => {
-        var qPembina = "";
-        console.log('this.state.selectedOptionMulti.value : ', this.state.selectedOptionMulti.value);
-        if (this.state.selectedOptionMulti.value !== undefined ){
-            qPembina = '&pembina='+this.state.selectedOptionMulti.value;
-        }
-
-        //console.log('qpembina : ', qPembina);
-        const searchValue = 'q='+document.getElementById('searchInput').value;
-
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-          //console.log('post agent : ');
-
-
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
-         const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt?'+searchValue+qPembina, { 
-            method: 'get', 
-            headers: new Headers({
-              'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-              'Accept': 'application/json'
-            }),
-            agent: httpsAgent
-          }
-         )
-         
-        const jsonData = await res.json();
-        
-        this.setState({ data: jsonData });
-        //console.log('jsonData : ', jsonData);
-        //Get unique for filter by pembina
-        // const uniquePembina = [
-        //     new Set(jsonData.map(
-        //         item => item.pembina.nama
-        //     ))
-        // ]
-
-
-    };
-
-
-    handleApplyClick = () => {
-        console.log('selectedOptionMulti : ',this.state.selectedOptionMulti);
-        //const dataTables = this.fetchData().jsonData;
-        this.fetchData();
-        //console.log('this.state.data :', this.state.data);
-        if (this.state.data.length > 0){
-            this.renderTableData();
-        }
-    }
-
-    handleSearchClick = () => {
-
-        //const dataTables = this.fetchData().jsonData;
-        this.fetchData();
-        //console.log('this.state.data :', this.state.data);
-        if (this.state.data.length > 0){
-            this.renderTableData();
-        }
-    }
-
-    renderTableData() {
-        //const dataTable = this.props.data;
-        //if (dataTable === true ) {
-
-
-            return 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>
-                                    </div>
-                                    <div className="ml-auto">
-                                        <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-            )
-            })
-        //}
-     }
-
-    render() {
-        // used for react select
-        const { selectedOptionMulti } = this.state;
-
-        
-
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    <div>Search
-                        <small>Search and filter results</small>
-                    </div>
-                </div>
-                <Row>
-                    <Col lg="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">
-                                    {/* <label className="c-checkbox">
+	static async getInitialProps(ctx) {
+		pembina = [];
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+
+		//  const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/lembaga-non-sp', {
+		//     method: 'get',
+		//     headers: new Headers({
+		//       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5',
+		//       'Accept': 'application/json'
+		//     }),
+		//     agent: httpsAgent
+		//   }
+		//  )
+
+		// const jsonPembina = await res.json();
+		//jsonPembina = JSON.parse(jsonPembina);
+		// id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F",nama: "Badan Intelijen Negara",singkatan: "BIN"
+		// { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
+
+		// var numrows = jsonPembina.length;
+
+		// for (var i = 0; i < numrows; i++) {
+		// 	pembina.push({ value: jsonPembina[i].id, label: jsonPembina[i].nama, className: "State-" + jsonPembina[i].singkatan });
+		// }
+
+		// console.log("pembina : ", pembina);
+
+		//return { data: json }
+	}
+
+	state = {
+		selectedOptionMulti: [],
+		data: [],
+	};
+
+	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) => {
+		//router = useRouter();
+		const query = { ptId: PT_ID };
+		//    '/app/profile'
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/profile-pt",
+			query: { ptId: PT_ID },
+		});
+	};
+
+	fetchData = async () => {
+		var qPembina = "";
+		console.log("this.state.selectedOptionMulti.value : ", this.state.selectedOptionMulti.value);
+		if (this.state.selectedOptionMulti.value !== undefined) {
+			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
+		}
+
+		//console.log('qpembina : ', qPembina);
+		const searchValue = "q=" + document.getElementById("searchInput").value;
+
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+
+		//console.log('post agent : ');
+
+		//const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', {
+		// const res = await fetch("https://api.kemdikbud.go.id:8243/pddikti/1.2/pt?" + searchValue + qPembina, {
+		// 	method: "get",
+		// 	headers: new Headers({
+		// 		Authorization: "Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5",
+		// 		Accept: "application/json",
+		// 	}),
+		// 	agent: httpsAgent,
+		// });
+
+		const jsonData = dummyData;
+
+		this.setState({ data: jsonData });
+		//console.log('jsonData : ', jsonData);
+		//Get unique for filter by pembina
+		// const uniquePembina = [
+		//     new Set(jsonData.map(
+		//         item => item.pembina.nama
+		//     ))
+		// ]
+	};
+
+	handleApplyClick = () => {
+		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
+		//const dataTables = this.fetchData().jsonData;
+		this.fetchData();
+		//console.log('this.state.data :', this.state.data);
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	handleSearchClick = () => {
+		//const dataTables = this.fetchData().jsonData;
+		this.fetchData();
+		//console.log('this.state.data :', this.state.data);
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	renderTableData() {
+		//const dataTable = this.props.data;
+		//if (dataTable === true ) {
+
+		return 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>
+								</div>
+								<div className="ml-auto">
+									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+										View
+									</Button>
+								</div>
+							</div>
+						</div>
+					</td>
+				</tr>
+			);
+		});
+		//}
+	}
+
+	render() {
+		// used for react select
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>
+						Search
+						<small>Search and filter results</small>
+					</div>
+				</div>
+				<Row>
+					<Col lg="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">
+									{/* <label className="c-checkbox">
                                         <input id="inlineCheckbox10" type="checkbox" defaultValue="option1"/>
                                         <span className="fa fa-check"></span>Nama Perguruan Tinggi</label> */}
-                                    {/* <label className="c-checkbox">
+									{/* <label className="c-checkbox">
                                         <input id="inlineCheckbox20" type="checkbox" defaultValue="option2"/>
                                         <span className="fa fa-check"></span>Pembina</label> */}
-                                    {/* <label className="c-checkbox">
+									{/* <label className="c-checkbox">
                                         <input id="inlineCheckbox30" type="checkbox" defaultValue="option3"/>
                                         <span className="fa fa-check"></span>Apps</label> */}
-                                </div>
-                            </div>
-                        </div>
-                        {/* START card */}
-                        <div className="card card-default">
-                            <div className="card-header">
-                                {/* <CardTool refresh onRefresh={(_,done) => setTimeout(done,2000)}/> */}
-                                Search Results
-                            </div>
-                            {/* START table-responsive */}
-                            <Table striped bordered hover>
-                                <thead>
-                                    <tr>
-                                        {/* <th data-check-all="" className="wd-xxs">
+								</div>
+							</div>
+						</div>
+						{/* START card */}
+						<div className="card card-default">
+							<div className="card-header">
+								{/* <CardTool refresh onRefresh={(_,done) => setTimeout(done,2000)}/> */}
+								Search Results
+							</div>
+							{/* START table-responsive */}
+							<Table striped bordered hover>
+								<thead>
+									<tr>
+										{/* <th data-check-all="" className="wd-xxs">
                                             <div className="checkbox c-checkbox">
                                                 <label className="m-0">
                                                     <input type="checkbox"/>
@@ -250,20 +228,17 @@ class Search extends Component {
                                                 </label>
                                             </div>
                                         </th> */}
-                                        <th>No. </th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {this.renderTableData()}
-
-                                </tbody>
-                            </Table>
-                            {/* END table-responsive */}
-                            <div className="card-footer">
-                                <div className="d-flex">
-                                    {/* <button className="btn btn-sm btn-secondary">Clear</button> */}
-                                    {/* <nav className="ml-auto">
+										<th>No. </th>
+										<th>Description</th>
+									</tr>
+								</thead>
+								<tbody>{this.renderTableData()}</tbody>
+							</Table>
+							{/* END table-responsive */}
+							<div className="card-footer">
+								<div className="d-flex">
+									{/* <button className="btn btn-sm btn-secondary">Clear</button> */}
+									{/* <nav className="ml-auto">
                                         <Pagination size="sm">
                                             <PaginationItem active>
                                                 <PaginationLink>1</PaginationLink>
@@ -279,32 +254,26 @@ class Search extends Component {
                                             </PaginationItem>
                                         </Pagination>
                                     </nav> */}
-                                </div>
-                            </div>
-                        </div>
-                        {/* END card */}
-                    </Col>
-                    <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
-                                name="multi-select-name"
-                                multi
-                                simpleValue
-                                value={selectedOptionMulti}
-                                onChange={this.handleChangeSelectMulti}
-                                options={pembina}
-                            />
-                        </div>
-                        <Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>Apply</Button>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
+								</div>
+							</div>
+						</div>
+						{/* END card */}
+					</Col>
+					<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 name="multi-select-name" multi simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina} />
+						</div>
+						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+							Apply
+						</Button>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
 }
 
 export default Search;