commit

actions/pelaporan.js

@@ -1,4 +1,5 @@
 import { get, post } from "../config/request";
+import axiosAPI from "../config/axios";
 
 export const getPelaporan = async (query = {}) => {
 	try {
@@ -25,7 +26,7 @@ export const getPelaporan = async (query = {}) => {
 
 export const createPelaporan = async (data) => {
 	try {
-		const res = await post("/pelaporan/create", data);
+		const res = await axiosAPI.post("/pelaporan/create", data);
 		return res.data;
 	} catch (error) {
 		console.log("error", error);

actions/user.js

@@ -0,0 +1,19 @@
+import axiosAPI from "../config/axios";
+
+export const getPublicUser = async () => {
+	try {
+		const response = await axiosAPI.get("/user/public");
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+
+export const createPublicUser = async (data) => {
+	try {
+		const response = await axiosAPI.post("/user/create", data);
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};

components/Extras/calendar.view.js

@@ -3,7 +3,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import { updateJadwal } from "@/actions/penjadwalan";
-import DetailLaporan from "@/components/Penjadwalan/DetailLaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -12,7 +12,14 @@ import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import bootstrapPlugin from "@fullcalendar/bootstrap";
 import events from "./calendar.events";
-
+import Select from "react-select";
+import { addStatus } from "@/actions/pelaporan";
+
+const status = [
+	{ value: "Ditindaklanjuti Dikti Ristek", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
+	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
+	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
 class Calendar extends Component {
 	calendarEvents = events;
 
@@ -38,6 +45,8 @@ class Calendar extends Component {
 		};
 	}
 
+	static getInitialProps = ({ query }) => ({ query });
+
 	async componentDidMount() {
 		/* initialize the external events */
 		new Draggable(this.refs.externalEventsList, {
@@ -50,15 +59,15 @@ class Calendar extends Component {
 		});
 
 		const dataLaporan = await getPelaporan({ penjadwalan: true });
-		const { data } = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
+		const laporan = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
 		this.setState({ dataLaporan });
 		this.getDataEvent();
-
+		await this.defaultStatus(laporan.data[0]);
 		// const cek = this.state.dataLaporan.data.filter((e) => e._number === this.props.query.number && e.pt_id == this.props.query.ptId)[0];
-		this.setState({ laporan: data[0] });
+		this.setState({ laporan });
 		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
-		if (data[0].penjadwalan) {
-			color = data[0].penjadwalan.background_color;
+		if (laporan.data[0].penjadwalan) {
+			color = laporan.data[0].penjadwalan.background_color;
 		}
 		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: `Jadwal Pemeriksaan - BI: ${this.props.query.number} - Universitas Satyagama` }] });
 	}
@@ -108,8 +117,19 @@ class Calendar extends Component {
 		const update = await updateJadwal({ number, ptId }, data);
 	};
 
-	handleChangeSelect = (selectedOption) => {
+	defaultStatus = async (data) => {
+		const { ptId, number } = this.props.query;
+		if (!data.status) {
+			await addStatus({ number, ptId }, { status: status[0].value });
+			return this.setState({ selectedOption: status[0] });
+		}
+		return this.setState({ selectedOption: status.filter((e) => e.value === data.status)[0] });
+	};
+
+	handleChangeSelect = async (selectedOption) => {
+		const { ptId, number } = this.props.query;
 		this.setState({ selectedOption });
+		await addStatus({ number, ptId }, { status: selectedOption.value });
 	};
 
 	render() {
@@ -128,11 +148,26 @@ class Calendar extends Component {
 					</div>
 				</div>
 				<div className="calendar-app">
+					<div class="row">
+						<div class="col">
+							<Card className="card-default">
+								<CardBody>{laporan.data && <DetailLaporan noStatus query={this.props.query} data={laporan.data[0]} handleChangeSelect={this.handleChangeSelect} />}</CardBody>
+							</Card>
+						</div>
+					</div>
 					<div className="row">
 						<div className="col-xl-4 col-lg-5">
 							<div className="row">
 								<div className="col-lg-12 col-md-6 col-12">
-									{selectedOption && selectedOption.value === "Ditutup" ? (
+									<Card className="card-default">
+										<CardHeader>
+											<CardTitle tag="h4">Status Pelaporan</CardTitle>
+										</CardHeader>
+										<CardBody>
+											<Select value={selectedOption} onChange={this.handleChangeSelect} options={status} required />
+										</CardBody>
+									</Card>
+									{selectedOption?.value === "Ditutup" ? (
 										""
 									) : (
 										<Card className="card-default" title="">
@@ -157,7 +192,6 @@ class Calendar extends Component {
 											</CardBody>
 										</Card>
 									)}
-									{laporan && <DetailLaporan query={this.props.query} data={laporan} handleChangeSelect={this.handleChangeSelect} />}
 								</div>
 							</div>
 						</div>

components/Main/DetailLaporan.js

@@ -1,10 +1,53 @@
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
 import { Col, FormGroup } from "reactstrap";
+import { useSelector } from "react-redux";
 
-function DetailLaporan({ data, noTitle = false }) {
+function DetailLaporan({ data, noTitle = false, noStatus = false }) {
+	const user = useSelector((state) => state.user);
 	return (
 		<>
+			{!data.user_id.isPrivate ||
+				(user.peran[0].peran.id === 2020 && (
+					<>
+						{noTitle ? "" : <p className="lead bb">Identitas Pelapor - {data.user_id.isPublic ? "Umum" : "Internal"}</p>}
+						<FormGroup row>
+							<Col md="4">Nama Pelapor:</Col>
+							<Col md="8">
+								<strong>{data.user_id.nama}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Nomor yang dapat dihubungi:</Col>
+							<Col md="8">
+								<strong>{data.user_id.no_hp}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Email:</Col>
+							<Col md="8">
+								<strong>{data.user_id.email}</strong>
+							</Col>
+						</FormGroup>
+
+						{data.user_id.isPublic && (
+							<>
+								<FormGroup row>
+									<Col md="4">Alamat:</Col>
+									<Col md="8">
+										<strong>{data.user_id.alamat}</strong>
+									</Col>
+								</FormGroup>
+								<FormGroup row>
+									<Col md="4">Foto Identitas:</Col>
+									<Col md="8">
+										<img src={`data:${data.user_id.files[0].type};base64, ${Buffer.from(data.user_id.files[0].data).toString("base64")}`} height={200} alt="Foto Identitas" />
+									</Col>
+								</FormGroup>
+							</>
+						)}
+					</>
+				))}
 			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
 			<form className="form-horizontal">
 				<FormGroup row>
@@ -45,7 +88,7 @@ function DetailLaporan({ data, noTitle = false }) {
 						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
 					</Col>
 				</FormGroup>
-				{data.status ? (
+				{!noStatus && data.status ? (
 					<FormGroup row>
 						<Col md="4">Status:</Col>
 						<Col md="8">

components/Main/TableLaporan.js

@@ -12,9 +12,10 @@ function TableLaporan({ listData, to, linkName, status = false }) {
 						<table className="table w-100">
 							<thead>
 								<tr>
-									<th>#ID</th>
+									<th>No.Laporan</th>
 									<th>Deskripsi Laporan</th>
 									{status ? <th>Status</th> : ""}
+									<th>Dibuat Oleh</th>
 									<th>Created</th>
 									<th></th>
 								</tr>
@@ -41,6 +42,7 @@ function TableLaporan({ listData, to, linkName, status = false }) {
 											) : (
 												""
 											)}
+											<td>{data.user_id.isPrivate ? "" : data.user_id.nama}</td>
 											<td>{moment(data.createdAt).fromNow()}</td>
 											<td>
 												<div className="ml-auto">

pages/app/pelaporan/detail.js

@@ -13,23 +13,24 @@ class DetailPelaporan extends Component {
 		super(props);
 		this.state = {
 			pt: {},
+			pelaporan: {},
 		};
 	}
 
 	static getInitialProps = async ({ query }) => {
-		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
-		return { query, pelaporan };
+		return { query };
 	};
 
 	componentDidMount = async () => {
 		const { query } = this.props;
 		const pt = await getPT({ id: query.ptId });
-		this.setState({ pt });
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		this.setState({ pt, pelaporan });
 	};
 
 	render() {
-		const { pt } = this.state;
-		const { pelaporan } = this.props;
+		const { pt, pelaporan } = this.state;
+		console.log(pelaporan);
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}
@@ -47,9 +48,7 @@ class DetailPelaporan extends Component {
 							<Card className="card-default">
 								<CardBody>
 									<Row>
-										<Col lg={12}>
-											<DetailLaporan data={pelaporan.data[0]} />
-										</Col>
+										<Col lg={12}>{pelaporan.data && <DetailLaporan data={pelaporan.data[0]} />}</Col>
 									</Row>
 								</CardBody>
 							</Card>

pages/laporan/new/index.js

@@ -2,11 +2,13 @@ import React, { Component } from "react";
 import BasePage from "@/components/Layout/BasePage";
 import { getPT } from "@/actions/PT";
 import { getPelanggaran } from "@/actions/pelanggaran";
+import { createPelaporan } from "@/actions/pelaporan";
 import Select from "react-select";
 import AsyncSelect from "react-select/async";
 import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { createPublicUser } from "@/actions/user";
 
 const loadOptions = (inputValue, callback) => {
 	setTimeout(async () => {
@@ -53,6 +55,9 @@ class App extends Component {
 			selectedJenis: [],
 			keteranganLaporan: "",
 			files: [],
+			isPrivate: false,
+			confirm: false,
+			msgError: [],
 		};
 	}
 
@@ -91,8 +96,49 @@ class App extends Component {
 		return inputValue;
 	};
 
+	handleKirim = async (e) => {
+		e.preventDefault();
+		const user_id = await this.createUser();
+		await this.createLaporan(user_id);
+		// validasi
+		// if (nama === '')  msgError.push({nama: 'Wajib diisi'})
+	};
+
+	createUser = async () => {
+		const { nama, alamat, no_hp, email, fileIdentitas, isPrivate } = this.state;
+		const dataUser = new FormData();
+		dataUser.append("nama", nama);
+		dataUser.append("no_hp", no_hp);
+		dataUser.append("email", email);
+		dataUser.append("alamat", alamat);
+		dataUser.append("files", fileIdentitas);
+		dataUser.append("isPrivate", isPrivate);
+		const userPublic = await createPublicUser(dataUser);
+		if (userPublic.success) return userPublic.created._id;
+		return false;
+	};
+
+	createLaporan = async (user_id) => {
+		const { pelaporanNumber, selectedPerguruanTinggi, keteranganLaporan, selectedJenis, files } = this.state;
+		const formdata = new FormData();
+		formdata.append("number", pelaporanNumber);
+		formdata.append("user_id", user_id);
+		formdata.append("pt_id", selectedPerguruanTinggi.value);
+		formdata.append("description", keteranganLaporan);
+		formdata.append("pelanggaran", selectedJenis.map((e) => e.value).join());
+		if (files.length > 0) {
+			Array.from(files).forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+		const create = await createPelaporan(formdata);
+		console.log(create);
+		if (create.success) return create;
+		return false;
+	};
+
 	render() {
-		const { selectedJenis, pelanggaran } = this.state;
+		const { selectedJenis, pelanggaran, confirm, isPrivate } = this.state;
 		return (
 			<div>
 				<Navbar color="info" expand="md" dark>
@@ -115,7 +161,7 @@ class App extends Component {
 				<ContentWrapper>
 					<Row>
 						<Col lg={8} className="block-center d-block ">
-							<Card>
+							<Card className="card-default">
 								<CardBody>
 									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
 										<p className="lead bb">Identitas Pelapor</p>
@@ -191,13 +237,13 @@ class App extends Component {
 											<div className="col-xl-10">
 												<div className="checkbox c-checkbox">
 													<label>
-														<Input type="checkbox" defaultChecked="" />
+														<Input type="checkbox" onChange={(e) => this.setState({ isPrivate: !isPrivate })} defaultChecked="" />
 														<span className="fa fa-check"></span>Apakah anda ingin merahasiakan identitas anda
 													</label>
 												</div>
 												<div className="checkbox c-checkbox">
 													<label>
-														<Input type="checkbox" defaultChecked="" />
+														<Input type="checkbox" onChange={(e) => this.setState({ confirm: !confirm })} defaultChecked="" />
 														<span className="fa fa-check"></span>Apakah Data yang anda Laporkan sudah benar
 													</label>
 												</div>
@@ -205,7 +251,7 @@ class App extends Component {
 										</FormGroup>
 										<FormGroup row>
 											<div className="col-12 col-lg-2">
-												<Button color="info" block type="submit">
+												<Button color="info" block type="submit" onClick={this.handleKirim}>
 													Kirim Laporan
 												</Button>
 											</div>

pages/pages/error500.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import BasePage from '@/components/Layout/BasePage';
-import Link from 'next/link';
-
-const Error500 = props => (
-    <div className="abs-center wd-xl">
-        <div className="text-center mb-4">
-            <div className="mb-3">
-                <em className="fa fa-wrench fa-5x text-muted" />
-            </div>
-            <div className="text-lg mb-3">500</div>
-            <p className="lead m-0">Oh! Something went wrong :(</p>
-            <p>Don't worry, we're now checking this.</p>
-            <p>In the meantime, please try one of those links below or come back in a moment</p>
-        </div>
-        <ul className="list-inline text-center text-sm mb-4">
-            <li className="list-inline-item">
-                <Link href="/dashboard/dashboardv1">
-                    <a className="text-muted">Go to App</a>
-                </Link>
-            </li>
-            <li className="text-muted list-inline-item">|</li>
-            <li className="list-inline-item">
-                <Link href="/pages/login" as="/login">
-                    <a className="text-muted">Login</a>
-                </Link>
-            </li>
-            <li className="text-muted list-inline-item">|</li>
-            <li className="list-inline-item">
-                <Link href="/pages/register" as="/register">
-                    <a className="text-muted">Register</a>
-                </Link>
-            </li>
-        </ul>
-        <div className="p-3 text-center">
-            <span className="mr-2">&copy;</span>
-            <span>2020</span>
-            <span className="mx-2">-</span>
-            <span>Angle</span>
-            <br />
-            <span>Bootstrap Admin Template</span>
-        </div>
-    </div>
-);
-
-Error500.Layout = BasePage;
-
-export default Error500;

pages/pages/lock.js

@@ -1,57 +0,0 @@
-import React, { Component } from 'react';
-import BasePage from '@/components/Layout/BasePage';
-import Link from 'next/link';
-
-class Lock extends Component {
-
-    render() {
-        return (
-            <div className="abs-center wd-xl">
-                <div className="d-flex justify-content-center">
-                    <div className="p-2">
-                        <img className="img-fluid img-thumbnail rounded-circle" src="/static/img/user/02.jpg" alt="Avatar" width="60" height="60"/>
-                    </div>
-                </div>
-                <div className="card b0">
-                    <div className="card-body">
-                        <p className="text-center">Please login to unlock your screen.</p>
-                        <form>
-                            <div className="form-group">
-                                <div className="input-group with-focus">
-                                    <input className="form-control border-right-0" id="exampleInputEmail1" type="email" placeholder="Enter email" autoComplete="off" required/>
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-lock"></em>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="d-flex">
-                                <div className="mt-1">
-                                    <Link href="/pages/recover" as="/recover">
-                                        <small className="text-muted">Forgot your password?</small>
-                                    </Link>
-                                </div>
-                                <div className="ml-auto">
-                                    <Link href="/dashboard/dashboardv1"><button className="btn btn-sm btn-primary">Unlock</button></Link>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div className="p-3 text-center">
-                    <span className="mr-2">&copy;</span>
-                    <span>2020</span>
-                    <span className="mx-2">-</span>
-                    <span>Angle</span>
-                    <br/>
-                    <span>Bootstrap Admin Template</span>
-                </div>
-            </div>
-        );
-    }
-}
-
-Lock.Layout = BasePage
-
-export default Lock;

pages/pages/maintenance.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import BasePage from '@/components/Layout/BasePage';
-
-const Maintenance = props => (
-    <div className="abs-center">
-        <div className="text-center my-3">
-            <h1 className="mb-3">
-                <sup>
-                    <em className="fa fa-cog fa-2x text-muted fa-spin text-info"></em>
-                </sup>
-                <em className="fa fa-cog fa-5x text-muted fa-spin text-purple"></em>
-                <em className="fa fa-cog fa-lg text-muted fa-spin text-success"></em>
-            </h1>
-            <div className="text-bold text-lg mb-3">SITE IS UNDER MAINTENANCE</div>
-            <p className="lead m-0">We'll back online shortly!</p>
-        </div>
-    </div>
-)
-
-Maintenance.Layout = BasePage
-
-export default Maintenance;

pages/pages/recover.js

@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import BasePage from '@/components/Layout/BasePage';
-
-class Recover extends Component {
-
-    render() {
-        return (
-            <div className="block-center mt-4 wd-xl">
-                {/* START card */}
-                <div className="card card-flat">
-                    <div className="card-header text-center bg-dark">
-                        <a href="">
-                            <img className="block-center rounded" src="/static/img/logo.png" alt="Logo"/>
-                        </a>
-                    </div>
-                    <div className="card-body">
-                        <p className="text-center py-2">PASSWORD RESET</p>
-                        <form>
-                            <p className="text-center">Fill with your mail to receive instructions on how to reset your password.</p>
-                            <div className="form-group">
-                                <label className="text-muted" htmlFor="resetInputEmail1">Email address</label>
-                                <div className="input-group with-focus">
-                                    <input className="form-control border-right-0" id="resetInputEmail1" type="email" placeholder="Enter email" autoComplete="off"/>
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-envelope"></em>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                            <button className="btn btn-danger btn-block" type="button">Reset</button>
-                        </form>
-                    </div>
-                </div>
-                {/* END card */}
-                <div className="p-3 text-center">
-                    <span className="mr-2">&copy;</span>
-                    <span>2020</span>
-                    <span className="mx-2">-</span>
-                    <span>Angle</span>
-                    <br/>
-                    <span>Bootstrap Admin Template</span>
-                </div>
-            </div>
-        );
-    }
-}
-
-Recover.Layout = BasePage;
-
-export default Recover;

pages/pages/register.js

@@ -1,175 +0,0 @@
-import React, { Component } from 'react';
-import BasePage from '@/components/Layout/BasePage';
-import Link from 'next/link';
-import { Input, CustomInput } from 'reactstrap';
-
-import FormValidator from '@/components/Forms/Validator.js';
-
-class Register extends Component {
-
-    state = {
-        formRegister: {
-            email: '',
-            password: '',
-            password2: '',
-            terms: false
-        }
-    }
-
-     /**
-      * Validate input using onChange event
-      * @param  {String} formName The name of the form in the state object
-      * @return {Function} a function used for the event
-      */
-    validateOnChange = event => {
-        const input = event.target;
-        const form = input.form
-        const value = input.type === 'checkbox' ? input.checked : input.value;
-
-        const result = FormValidator.validate(input);
-
-        this.setState({
-            [form.name]: {
-                ...this.state[form.name],
-                [input.name]: value,
-                errors: {
-                    ...this.state[form.name].errors,
-                    [input.name]: result
-                }
-            }
-        });
-
-    }
-
-    onSubmit = e => {
-        const form = e.target;
-        const inputs = [...form.elements].filter(i => ['INPUT', 'SELECT'].includes(i.nodeName))
-
-        const { errors, hasError } = FormValidator.bulkValidate(inputs)
-
-        this.setState({
-            [form.name]: {
-                ...this.state[form.name],
-                errors
-            }
-        });
-
-        console.log(hasError ? 'Form has errors. Check!' : 'Form Submitted!')
-
-        e.preventDefault()
-    }
-
-    /* Simplify error check */
-    hasError = (formName, inputName, method) => {
-        return  this.state[formName] &&
-                this.state[formName].errors &&
-                this.state[formName].errors[inputName] &&
-                this.state[formName].errors[inputName][method]
-    }
-
-    render() {
-        return (
-            <div className="block-center mt-4 wd-xl">
-                {/* START card */}
-                <div className="card card-flat">
-                    <div className="card-header text-center bg-dark">
-                        <a href="">
-                            <img className="block-center" src="/static/img/logo.png" alt="Logo"/>
-                        </a>
-                    </div>
-                    <div className="card-body">
-                        <p className="text-center py-2">SIGNUP TO GET INSTANT ACCESS.</p>
-                        <form className="mb-3" name="formRegister" onSubmit={this.onSubmit}>
-                            <div className="form-group">
-                                <label className="text-muted" htmlFor="signupInputEmail1">Email address</label>
-                                <div className="input-group with-focus">
-                                    <Input type="email"
-                                        name="email"
-                                        className="border-right-0"
-                                        placeholder="Enter email"
-                                        invalid={this.hasError('formRegister','email','required')||this.hasError('formRegister','email','email')}
-                                        onChange={this.validateOnChange}
-                                        data-validate='["required", "email"]'
-                                        value={this.state.formRegister.email}/>
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-envelope"></em>
-                                        </span>
-                                    </div>
-                                    { this.hasError('formRegister','email','required') && <span className="invalid-feedback">Field is required</span> }
-                                    { this.hasError('formRegister','email','email') && <span className="invalid-feedback">Field must be valid email</span> }
-                                </div>
-                            </div>
-                            <div className="form-group">
-                                <label className="text-muted" htmlFor="signupInputPassword1">Password</label>
-                                <div className="input-group with-focus">
-                                    <Input type="text"
-                                        id="id-password"
-                                        name="password"
-                                        className="border-right-0"
-                                        placeholder="Password"
-                                        invalid={this.hasError('formRegister','password','required')}
-                                        onChange={this.validateOnChange}
-                                        data-validate='["required"]'
-                                        value={this.state.formRegister.password}
-                                    />
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-lock"></em>
-                                        </span>
-                                    </div>
-                                    <span className="invalid-feedback">Field is required</span>
-                                </div>
-                            </div>
-                            <div className="form-group">
-                                <label className="text-muted" htmlFor="signupInputRePassword1">Retype Password</label>
-                                <div className="input-group with-focus">
-                                    <Input type="text" name="password2"
-                                        className="border-right-0"
-                                        placeholder="Retype assword"
-                                        invalid={this.hasError('formRegister','password2','equalto')}
-                                        onChange={this.validateOnChange}
-                                        data-validate='["equalto"]'
-                                        value={this.state.formRegister.password2}
-                                        data-param="id-password"
-                                    />
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-lock"></em>
-                                        </span>
-                                    </div>
-                                    <span className="invalid-feedback">Field must be equal to previous</span>
-                                </div>
-                            </div>
-                            <CustomInput type="checkbox" id="terms"
-                                name="terms"
-                                label="I agree with the terms"
-                                invalid={this.hasError('formRegister','terms','required')}
-                                onChange={this.validateOnChange}
-                                data-validate='["required"]'
-                                checked={this.state.formRegister.terms}>
-                                    <span className="invalid-feedback">Field is required</span>
-                                </CustomInput>
-                            <button className="btn btn-block btn-primary mt-3" type="submit">Create account</button>
-                        </form>
-                        <p className="pt-3 text-center">Have an account?</p>
-                        <Link href="/pages/login" as="/login"><button type="button" className="btn btn-block btn-secondary">Signup</button></Link>
-                    </div>
-                </div>
-                {/* END card */}
-                <div className="p-3 text-center">
-                    <span className="mr-2">&copy;</span>
-                    <span>2020</span>
-                    <span className="mx-2">-</span>
-                    <span>Angle</span>
-                    <br/>
-                    <span>Bootstrap Admin Template</span>
-                </div>
-            </div>
-        );
-    }
-}
-
-Register.Layout = BasePage
-
-export default Register;

pages/pemantauan.js

@@ -0,0 +1,110 @@
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Membuat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+	{
+		title: "Login",
+		path: "/login",
+	},
+];
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+			no_laporan: "",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			no_hp: "",
+			msgError: [],
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	handleLihatPemantaun = async (e) => {
+		e.preventDefault();
+		// validasi
+		// if (nama === '')  msgError.push({nama: 'Wajib diisi'})
+	};
+
+	render() {
+		return (
+			<div>
+				<Navbar color="info" expand="md" dark>
+					<NavbarBrand href="/">
+						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
+					</NavbarBrand>
+					<NavbarToggler onClick={this.toggleCollapse} />
+					<Collapse isOpen={this.state.isOpen} navbar>
+						<Nav className="ml-auto" navbar>
+							{menu.map((e) => (
+								<NavItem active={e.path === this.props.pathname ? true : false}>
+									<Link href={e.path}>
+										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+									</Link>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Row>
+						<Col lg={8} className="block-center d-block ">
+							<Card className="card-default">
+								<CardBody>
+									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
+										<p className="lead bb">Pemantauan</p>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Nomor Laporan</label>
+											<div className="col-md-10">
+												<Input type="text" value={this.state.no_laporan} onChange={(e) => this.setState({ no_laporan: e.target.value })} required />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
+											<div className="col-md-10">
+												<Input type="text" value={this.state.no_hp} onChange={(e) => this.setState({ no_hp: e.target.value })} required />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<div className="col-12 col-lg-2">
+												<Button color="info" block type="submit" onClick={this.handleLihatPemantaun}>
+													Lihat Pemantauan
+												</Button>
+											</div>
+										</FormGroup>
+									</form>
+								</CardBody>
+							</Card>
+						</Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;