commit

actions/PT.js

@@ -7,8 +7,11 @@ export const getPT = async (params) => {
 			url += "?";
 			if (params.id) {
 				url += `id=${params.id}`;
-			} else if (params.search) {
-				url += `search=${params.search}`;
+			} else if (params.search || params.pembina) {
+				const parseURL = [];
+				if (params.search) parseURL.push(`search=${params.search}`);
+				if (params.pembina) parseURL.push(`pembina=${params.pembina}`);
+				url += parseURL.join('&')
 			}
 		}
 		const response = await get(url);

components/Layout/Header.js

@@ -56,7 +56,7 @@ class Header extends Component {
 		e.preventDefault();
 		const cek = await logout();
 		if (cek.success) {
-			Router.push({ pathname: "/login" });
+			Router.push({ pathname: "/app" });
 		}
 	};
 

components/Layout/Menu.js

@@ -8,6 +8,7 @@ const Menu = [
 		path: "/app/pemantauan",
 		icon: "icon-notebook",
 		translate: "sidebar.nav.PEMANTAUAN",
+		label: { value: 3, color: "success" },
 	},
 	{
 		name: "Pelaporan",

components/Main/Login.js

@@ -0,0 +1,136 @@
+import React, { Component } from "react";
+import { Input, Card, CardBody, Button } from "reactstrap";
+import Router from "next/router";
+import FormValidator from "@/components/Forms/Validator.js";
+import { connect } from "react-redux";
+import { login, getUser } from "@/actions/auth";
+import axiosAPI from "@/config/axios";
+import { getPT } from "@/actions/PT";
+
+class Login extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			/* Group each form state in an object.
+           Property name MUST match the form name */
+			error: null,
+			formLogin: {
+				username: "",
+				password: "",
+			},
+		};
+	}
+
+	/**
+	 * 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 = async (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();
+		if (!hasError) {
+			const { username, password } = this.state.formLogin;
+			const auth = await login(username, password);
+			if (auth.success) {
+				axiosAPI.defaults.headers.Authorization = `Bearer ${auth.access_token}`;
+				const dataUser = await getUser();
+				this.props.setUser(dataUser.data);
+				if (dataUser.data.peran[0].peran.id === 2022) {
+					const org_id = dataUser.data.peran[0].organisasi.id;
+					const pt = await getPT({ id: org_id });
+					if (pt?.success) {
+						this.props.setPT(pt.data);
+					}
+					Router.push({ pathname: "/app/pt/pemantauan" });
+				} else {
+					Router.push({ pathname: "/app/pemantauan" });
+				}
+			} else {
+				this.setState({ error: auth.message || auth.error });
+			}
+		}
+		// 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 (
+			<Card className="card card-flat">
+				<img className="card-img-top" src="/static/img/logo.png" alt="Logo" />
+				<CardBody className="card-body">
+					{" "}
+					<h5 className="card-title text-center py-2 bg-gray">Aplikasi Pengendalian Kelembagaan Pendidikan Tinggi (Aldila Dikti)</h5>
+					{this.state.error}
+					<form onSubmit={this.onSubmit} method="post" name="formLogin">
+						<div className="form-group">
+							<label className="col-form-label">Username *</label>
+							<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
+							{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
+						</div>
+						<div className="form-group">
+							<label className="col-form-label">Password *</label>
+							<Input
+								type="password"
+								id="id-password"
+								name="password"
+								invalid={this.hasError("formLogin", "password", "required")}
+								onChange={this.validateOnChange}
+								data-validate='["required"]'
+								value={this.state.formLogin.password}
+							/>
+							<span className="invalid-feedback">Field is required</span>
+						</div>
+						<div className="required">* Required fields</div>
+						<Button color="info" type="submit" block className=" mt-3">
+							Login
+						</Button>
+					</form>
+				</CardBody>
+			</Card>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user });
+const mapDispatchToProps = (dispatch) => ({
+	setUser: (payload) => dispatch({ type: "SET_USER", payload }),
+	setPT: (payload) => dispatch({ type: "SET_PT", payload }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

components/Main/PublicPage.js

@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { getPT } from "@/actions/PT";
+import { getPelanggaran } from "@/actions/pelanggaran";
+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 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 PublicPage extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+			inputValue: "",
+			stat: "Waiting to add files..",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			nama: "",
+			alamat: "",
+			no_hp: "",
+			email: "",
+			fileIdentitas: null,
+			pelanggaran: [],
+			selectedPerguruanTinggi: {},
+			selectedJenis: [],
+			keteranganLaporan: "",
+			files: [],
+		};
+	}
+
+	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}>
+									<NavLink href={e.path}>{e.title}</NavLink>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Row>
+						<Col lg={8} className="block-center d-block ">
+							{this.props.children}
+						</Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+PublicPage.Layout = BasePage;
+
+export default PublicPage;

components/Pelaporan/InputData.js

@@ -100,7 +100,7 @@ export class InputData extends Component {
 		e.preventDefault();
 		const formdata = new FormData();
 		formdata.append("number", this.state.pelaporanNumber);
-		formdata.append("user_id", user.id);
+		formdata.append("user_id", user._id);
 		formdata.append("pt_id", this.props.query.ptId);
 		formdata.append("description", this.state.keteranganLaporan);
 		formdata.append("pelanggaran", this.state.selectedOptionMulti.map((e) => e.value).join());

pages/404.js

@@ -0,0 +1,24 @@
+import React from "react";
+import BasePage from "@/components/Layout/BasePage";
+import Link from "next/link";
+
+const NotFound = (props) => (
+	<div className="abs-center wd-xl">
+		<div className="text-center mb-4">
+			<div className="text-lg mb-3">404</div>
+			<p className="lead m-0">We couldn't find this page.</p>
+			<p>The page you are looking for does not exists.</p>
+		</div>
+
+		<div className="p-3 text-center">
+			<span>Aplikasi Pengendalian Kelembagaan Pendidikan Tinggi (Aldila Dikti)</span>
+			<br />
+			<span className="mr-2">&copy;</span>
+			<span>2022</span>
+		</div>
+	</div>
+);
+
+NotFound.Layout = BasePage;
+
+export default NotFound;

pages/app/PT-ID.json

@@ -1,57 +0,0 @@
-[
-    {
-        "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"
-        }
-    }
-]

pages/app/calendar.js

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

pages/app/faq.js

@@ -1,411 +0,0 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Card, CardHeader, CardBody, CardTitle, Collapse } from 'reactstrap';
-
-class Faq extends Component {
-
-    state = {
-        oneAtATime: true,
-        accordionState: [
-            false, false, false, false, false, false,
-            false, false, false, false, false, false,
-            false, false, false, false, false, false
-        ]
-    }
-
-    /* id is the index in the accordionState array */
-    toggleAccordion = id => {
-        let accordionState = this.state.accordionState.map((val,i) => {
-            return id === i ? !val : (this.state.oneAtATime ? false : val)
-        })
-        this.setState({
-            accordionState
-        })
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="container container-md">
-                    <Row className="mb-3">
-                        <Col lg="8">
-                            <div className="h1 text-bold">FAQs</div>
-                            <p className="text-muted">Praesent id mauris urna, et tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-                        </Col>
-                        <Col lg="4">
-                            <Card>
-                                <CardBody className="text-center">
-                                    <p className="mb-3">Sed semper diam vitae purus tristique at scelerisque massa ultricies.</p>
-                                    <button className="btn btn-info" type="button">Contact support</button>
-                                </CardBody>
-                            </Card>
-                        </Col>
-                    </Row>
-                    <h4 className="my-3 py-4 text-dark">Some presale Questions</h4>
-                    <div>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(0)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[0]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(1)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[1]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(2)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[2]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(3)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[3]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(4)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[4]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                    </div>
-                    <h4 className="my-3 py-4 text-dark">Buyer Questions</h4>
-                    <div>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(5)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[5]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(6)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[6]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(7)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[7]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(8)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[8]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                    </div>
-                    <h4 className="my-3 py-4 text-dark">Seller Questions</h4>
-                    <div>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(9)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[9]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(10)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[10]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(11)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[11]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                        <Card className="b0 mb-2">
-                            <CardHeader onClick={() => this.toggleAccordion(12)}>
-                                <CardTitle tag="h4">
-                                    <a className="text-inherit">
-                                        <small>
-                                            <em className="fa fa-plus text-primary mr-2"></em>
-                                        </small>
-                                        <span>How can I change the color?</span>
-                                    </a>
-                                </CardTitle>
-                            </CardHeader>
-                            <Collapse isOpen={this.state.accordionState[12]}>
-                                <CardBody>
-                                    <p>Donec congue sagittis mi sit amet tincidunt. Quisque sollicitudin massa vel erat tincidunt blandit. Curabitur quis leo nulla. Phasellus faucibus placerat luctus. Integer fermentum molestie massa at congue. Quisque quis quam dictum diam volutpat adipiscing.</p>
-                                    <p>Proin ut urna enim.</p>
-                                    <div className="text-right">
-                                        <small className="text-muted mr-2">Was this information useful?</small>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-up text-muted"></em>
-                                        </button>
-                                        <button className="btn btn-secondary btn-xs" type="button">
-                                            <em className="fa fa-thumbs-down text-muted"></em>
-                                        </button>
-                                    </div>
-                                </CardBody>
-                            </Collapse>
-                        </Card>
-                    </div>
-                </div>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Faq;

pages/app/index.js

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { getPT } from "@/actions/PT";
+import { getPelanggaran } from "@/actions/pelanggaran";
+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 ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+
+const loadOptions = (inputValue, callback) => {
+	setTimeout(async () => {
+		const pt = await getPT({ search: inputValue });
+		const data = pt.data.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
+		callback(data);
+	}, 1000);
+};
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Membuat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+	{
+		title: "Login",
+		path: "/login",
+	},
+];
+const selectInstanceId = 1;
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	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 "></Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;

pages/app/pelaporan/search.js

@@ -19,7 +19,6 @@ class Search extends Component {
 		selectedOptionMulti: [],
 		data: [],
 		pembina: [],
-		search: "",
 	};
 
 	componentDidMount = async () => {
@@ -56,16 +55,15 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
+		const pembina = this.state.selectedOptionMulti.join(",");
 		const searchValue = document.getElementById("searchInput").value;
-		this.setState({ search: searchValue });
-		const jsonData = await getPT({ search: searchValue });
+		const jsonData = await getPT({ search: searchValue, pembina });
 		this.setState({ data: jsonData.data });
 	};
 
 	handleApplyClick = () => {
-		// console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
 		this.fetchData();
-		if (this.state.data.length) {
+		if (this.state.data && this.state.data.length) {
 			this.renderTableData();
 		}
 	};

pages/app/pemantauan/index.js

@@ -16,7 +16,7 @@ import https from "https";
 
 import CardTool from "@/components/Common/CardTool";
 
-import dummyData from "../PT-ID.json";
+// import dummyData from "../PT-ID.json";
 
 const selectInstanceId = 1;
 class Search extends Component {
@@ -24,7 +24,6 @@ class Search extends Component {
 		pembina: [],
 		selectedOptionMulti: [],
 		data: [],
-		search: "",
 	};
 
 	componentDidMount = async () => {
@@ -60,14 +59,13 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
+		const pembina = this.state.selectedOptionMulti.join(",");
 		const searchValue = document.getElementById("searchInput").value;
-		this.setState({ search: searchValue });
-		const jsonData = await getPT({ search: searchValue });
+		const jsonData = await getPT({ search: searchValue, pembina });
 		this.setState({ data: jsonData.data });
 	};
 
 	handleApplyClick = () => {
-		// console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
 		this.fetchData();
 		if (this.state.data && this.state.data.length) {
 			this.renderTableData();
@@ -119,7 +117,7 @@ class Search extends Component {
 
 	render() {
 		const { selectedOptionMulti, pembina } = this.state;
-		console.log(pembina);
+		// console.log(pembina);
 		return (
 			<ContentWrapper>
 				<div className="content-heading">

pages/app/projectdetails.js

@@ -1,425 +0,0 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Progress } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines';
-import Scrollable from '@/components/Common/Scrollable'
-
-class ProjectDetails extends Component {
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    <div>Project #1 Management
-                        <small>In lacinia tellus vitae nisl consectetur pellentesque.</small>
-                    </div>
-                </div>
-                <Row>
-                    <Col xl="8">
-                        {/* Main card */}
-                        <div className="card b">
-                            <div className="card-header">
-                                <div className="float-right mt-2">
-                                    <div className="badge badge-info">started</div>
-                                </div>
-                                <h4 className="my-2">
-                                    <span>Project #1</span>
-                                </h4>
-                            </div>
-                            <div className="card-body bb bt">
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb48" src="/static/img/user/03.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/02.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/04.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/05.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/06.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/07.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/08.jpg" alt="project member"/>
-                                </a>
-                                <a className="inline" href="">
-                                    <img className="rounded-circle thumb24" src="/static/img/user/09.jpg" alt="project member"/>
-                                </a>
-                                <div className="float-right mt-2">
-                                    <button className="btn btn-secondary" type="button">Add Member</button>
-                                </div>
-                            </div>
-                            <div className="card-body">
-                                <h4>Description</h4>
-                                <p>Nam eget risus tellus. Vestibulum pretium mollis ligula, at ultrices quam egestas et. Sed mattis tincidunt ligula, ac porttitor lectus porttitor condimentum. Ut et ligula ante, nec mollis lacus. Aliquam erat volutpat. Aliquam auctor diam ut urna lacinia faucibus. Proin est sapien, convallis non hendrerit nec, laoreet ut ipsum. Aenean vehicula, nulla vel pharetra accumsan, elit risus pretium arcu, nec ultrices urna ligula vel nunc. Cras porttitor orci eget nibh pharetra mollis.</p>
-                                <p>Maecenas at porta purus. Ut eu aliquam orci. Praesent in libero at neque gravida venenatis auctor nec arcu.</p>
-                                <p className="text-right">
-                                    <button className="btn btn-secondary" type="button">View all documents</button>
-                                </p>
-                            </div>
-                            <div className="card-body">
-                                <p>
-                                    <small className="float-left">Activity over time</small>
-                                    <Sparkline tag="span" options={{
-                                            type:"line",
-                                            height:"100",
-                                            width:"100%",
-                                            lineWidth:"3",
-                                            lineColor:"#23b7e5",
-                                            chartRangeMin:"0",
-                                            spotColor:"#888",
-                                            minSpotColor:"#23b7e5",
-                                            maxSpotColor:"#23b7e5",
-                                            fillColor:"#e5f2fa",
-                                            highlightLineColor:"#fff",
-                                            spotRadius:"5",
-                                            resize:true
-                                        }}
-                                        values={[2,4,5,6,10,7,8,5,7,7,11,8,6,9,11,9,13,14,12,16]}
-                                        className="sparkline text-center"/>
-                                </p>
-                            </div>
-                            <div className="card-body">
-                                <Row className="text-center">
-                                    <Col xs="4">
-                                        <Sparkline options={{
-                                                type:"pie",
-                                                height:"60",
-                                                sliceColors:['#edf1f2', '#23b7e5']
-                                            }}
-                                            values={[20,80]}
-                                            className="sparkline"/>
-                                        <p className="mt-3">Issues</p>
-                                    </Col>
-                                    <Col xs="4">
-                                        <Sparkline options={{
-                                                type:"pie",
-                                                height:"60",
-                                                sliceColors:['#edf1f2', '#27c24c']
-                                            }}
-                                            values={[60,40]}
-                                            className="sparkline"/>
-                                        <p className="mt-3">Commits</p>
-                                    </Col>
-                                    <Col xs="4">
-                                        <Sparkline options={{
-                                                type:"pie",
-                                                height:"60",
-                                                sliceColors:['#edf1f2', '#ff902b']
-                                            }}
-                                            values={[90,10]}
-                                            className="sparkline"/>
-                                        <p className="mt-3">Files</p>
-                                    </Col>
-                                </Row>
-                            </div>
-                        </div>
-                        {/* End Main card */}
-                        {/* Team messages */}
-                        <div className="card card-default">
-                            <div className="card-header">
-                                <div className="px-2 float-right badge badge-danger">5</div>
-                                <div className="px-2 mr-2 float-right badge badge-success">12</div>
-                                <div className="card-title">Team messages</div>
-                            </div>
-                            {/* START list group */}
-                            <Scrollable height="180px" className="list-group">
-                                {/* START list group item */}
-                                <div className="list-group-item list-group-item-action">
-                                    <div className="media">
-                                        <img className="align-self-start mx-2 circle thumb32" src="/static/img/user/02.jpg" alt="Avatar"/>
-                                        <div className="media-body text-truncate">
-                                            <p className="mb-1">
-                                                <strong className="text-primary">
-                                                    <span className="circle bg-success circle-lg text-left"></span>
-                                                    <span>Catherine Ellis</span>
-                                                </strong>
-                                            </p>
-                                            <p className="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
-                                        </div>
-                                        <div className="ml-auto">
-                                            <small className="text-muted ml-2">2h</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                {/* END list group item */}
-                                {/* START list group item */}
-                                <div className="list-group-item list-group-item-action">
-                                    <div className="media">
-                                        <img className="align-self-start mx-2 circle thumb32" src="/static/img/user/03.jpg" alt="Avatar"/>
-                                        <div className="media-body text-truncate">
-                                            <p className="mb-1">
-                                                <strong className="text-primary">
-                                                    <span className="circle bg-success circle-lg text-left"></span>
-                                                    <span>Jessica Silva</span>
-                                                </strong>
-                                            </p>
-                                            <p className="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
-                                        </div>
-                                        <div className="ml-auto">
-                                            <small className="text-muted ml-2">3h</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                {/* END list group item */}
-                                {/* START list group item */}
-                                <div className="list-group-item list-group-item-action">
-                                    <div className="media">
-                                        <img className="align-self-start mx-2 circle thumb32" src="/static/img/user/09.jpg" alt="Avatar"/>
-                                        <div className="media-body text-truncate">
-                                            <p className="mb-1">
-                                                <strong className="text-primary">
-                                                    <span className="circle bg-danger circle-lg text-left"></span>
-                                                    <span>Jessie Wells</span>
-                                                </strong>
-                                            </p>
-                                            <p className="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
-                                        </div>
-                                        <div className="ml-auto">
-                                            <small className="text-muted ml-2">4h</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                {/* END list group item */}
-                                {/* START list group item */}
-                                <div className="list-group-item list-group-item-action">
-                                    <div className="media">
-                                        <img className="align-self-start mx-2 circle thumb32" src="/static/img/user/12.jpg" alt="Avatar"/>
-                                        <div className="media-body text-truncate">
-                                            <p className="mb-1">
-                                                <strong className="text-primary">
-                                                    <span className="circle bg-danger circle-lg text-left"></span>
-                                                    <span>Rosa Burke</span>
-                                                </strong>
-                                            </p>
-                                            <p className="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
-                                        </div>
-                                        <div className="ml-auto">
-                                            <small className="text-muted ml-2">1d</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                {/* END list group item */}
-                                {/* START list group item */}
-                                <div className="list-group-item list-group-item-action">
-                                    <div className="media">
-                                        <img className="align-self-start mx-2 circle thumb32" src="/static/img/user/10.jpg" alt="Avatar"/>
-                                        <div className="media-body text-truncate">
-                                            <p className="mb-1">
-                                                <strong className="text-primary">
-                                                    <span className="circle bg-danger circle-lg text-left"></span>
-                                                    <span>Michelle Lane</span>
-                                                </strong>
-                                            </p>
-                                            <p className="mb-1 text-sm">Mauris eleifend, libero nec cursus lacinia...</p>
-                                        </div>
-                                        <div className="ml-auto">
-                                            <small className="text-muted ml-2">2d</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                {/* END list group item */}
-                            </Scrollable>
-                            {/* END list group */}
-                            {/* START card footer */}
-                            <div className="card-footer">
-                                <div className="input-group">
-                                    <input className="form-control form-control-sm" type="text" placeholder="Search message .."/>
-                                    <span className="input-group-btn">
-                                        <button className="btn btn-secondary btn-sm" type="submit">
-                                            <i className="fa fa-search"></i>
-                                        </button>
-                                    </span>
-                                </div>
-                            </div>
-                            {/* END card-footer */}
-                        </div>
-                        {/* End Team messages */}
-                    </Col>
-                    <Col xl="4">
-                        {/* Aside card */}
-                        <div className="card b">
-                            <div className="card-body bb">
-                                <div className="clearfix">
-                                    <div className="float-left">
-                                        <button className="btn btn-secondary btn-oval" type="button">
-                                            <em className="fa fa-play fa-fw text-muted"></em>
-                                            <span>Start</span>
-                                        </button>
-                                        <button className="btn btn-secondary btn-oval" type="button">
-                                            <em className="fa fa-pause fa-fw text-muted"></em>
-                                            <span>Pause</span>
-                                        </button>
-                                    </div>
-                                    <div className="float-right">
-                                        <button className="btn btn-danger btn-oval" type="button">Cancel</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="card-body bb">
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100">
-                                        <Progress className="progress-xs m-0" color="info" value="48"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">48%</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="card-body">
-                                <ul className="list-inline my-2">
-                                    <li className="list-inline-item">
-                                        <div className="badge p-1 bg-warning">priority</div>
-                                    </li>
-                                    <li className="list-inline-item">
-                                        <div className="badge p-1 bg-gray">angularjs</div>
-                                    </li>
-                                    <li className="list-inline-item">
-                                        <div className="badge p-1 bg-gray">jquery</div>
-                                    </li>
-                                    <li className="list-inline-item">
-                                        <div className="badge p-1 bg-gray">gulp</div>
-                                    </li>
-                                    <li className="list-inline-item">
-                                        <div className="badge p-1 bg-gray">git</div>
-                                    </li>
-                                    <li className="list-inline-item">
-                                        <div className="badge p-1 bg-gray">ios</div>
-                                    </li>
-                                </ul>
-                            </div>
-                            <table className="table">
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>02/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Estimated Hours</strong>
-                                        </td>
-                                        <td>122hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>62hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Issues</strong>
-                                        </td>
-                                        <td>39</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Files</strong>
-                                        </td>
-                                        <td>87</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <p>Tara Sanders</p>
-                                            <p>Alan Smith</p>
-                                            <p>Priscilla Peters</p>
-                                            <p>Madison Willis</p>
-                                            <p>Lesa Marshall</p>
-                                            <p>Kylie Freeman</p>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Recent files</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <em className="fa-lg far fa-file-code"></em>
-                                                            </td>
-                                                            <td>
-                                                                <a className="text-muted" href="">database.controller.js</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <em className="fa-lg far fa-file-image"></em>
-                                                            </td>
-                                                            <td>
-                                                                <a className="text-muted" href="">baground-lg.png</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <em className="fa-lg far fa-file-code"></em>
-                                                            </td>
-                                                            <td>
-                                                                <a className="text-muted" href="">picture.controller.js</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <em className="fa-lg far fa-file-word"></em>
-                                                            </td>
-                                                            <td>
-                                                                <a className="text-muted" href="">applicat-diagrams.docx</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <em className="fa-lg far fa-file-code"></em>
-                                                            </td>
-                                                            <td>
-                                                                <a className="text-muted" href="">database.controller.js</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <em className="fa-lg far fa-file-code"></em>
-                                                            </td>
-                                                            <td>
-                                                                <a className="text-muted" href="">database.controller.js</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                            <p className="text-right">
-                                <a className="btn btn-link" href="">Open repository</a>
-                            </p>
-                        </div>
-                        {/* end Aside card */}
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default ProjectDetails;

pages/app/projects.js

@@ -1,892 +0,0 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Progress, Row, Col, Card, CardHeader, CardBody, CardFooter, Table } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines';
-
-class Projects extends Component {
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">Projects
-                    <div className="ml-auto">
-                        <button className="btn btn-secondary btn-sm" type="button">Create project</button>
-                    </div>
-                </div>
-                <Row>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-info">started</div>
-                                </div>
-                                <h4 className="m-0">Project #1</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="22" color="warning"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">22%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>01/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+5</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-info">started</div>
-                                </div>
-                                <h4 className="m-0">Project #2</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="80" color="success"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">80%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>02/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+6</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-info">started</div>
-                                </div>
-                                <h4 className="m-0">Project #3</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="50" color="info"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">50%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>03/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+7</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-warning">paused</div>
-                                </div>
-                                <h4 className="m-0">Project #4</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="22" color="warning"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">22%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>04/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+8</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge bg-gray">pending</div>
-                                </div>
-                                <h4 className="m-0">Project #5</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <p className="m-0 text-center">This project does not register progress.</p>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>05/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+9</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-success">completed</div>
-                                </div>
-                                <h4 className="m-0">Project #6</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="100" color="success"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">100%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>06/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+10</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge bg-gray-dark">canceled</div>
-                                </div>
-                                <h4 className="m-0">Project #7</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="30" color="warning"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">30%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>04/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+8</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-info">started</div>
-                                </div>
-                                <h4 className="m-0">Project #8</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="10" color="danger"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">10%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>05/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+9</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                    <Col xl="4" lg="6">
-                        <Card className="b">
-                            <CardHeader>
-                                <div className="float-right">
-                                    <div className="badge badge-success">completed</div>
-                                </div>
-                                <h4 className="m-0">Project #9</h4>
-                                <small className="text-muted">Sed amet lectus id.</small>
-                            </CardHeader>
-                            <CardBody>
-                                <div className="d-flex align-items-center">
-                                    <div className="w-100" data-title="Health">
-                                        <Progress className="progress-xs m-0" value="100" color="success"/>
-                                    </div>
-                                    <div className="wd-xxs text-right">
-                                        <div className="text-bold text-muted">100%</div>
-                                    </div>
-                                </div>
-                            </CardBody>
-                            <Table>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Start date</strong>
-                                        </td>
-                                        <td>06/01/2016</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Members</strong>
-                                        </td>
-                                        <td>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/02.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/04.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/05.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/06.jpg" alt="project member"/>
-                                            </a>
-                                            <a className="inline" href="">
-                                                <strong>+10</strong>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Leader</strong>
-                                        </td>
-                                        <td>
-                                            <a href="" title="Team leader">
-                                                <img className="rounded-circle thumb24 mr-1" src="/static/img/user/03.jpg" alt="project member"/>
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Metrics</strong>
-                                        </td>
-                                        <td>
-                                             <Sparkline values={[20,80]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#23b7e5"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[60,40]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#27c24c"]
-                                                }}
-                                                className="sparkline inline mr-2"/>
-                                             <Sparkline values={[90,10]}
-
-                                                options={{
-                                                    type:"pie",
-                                                    height:"24",
-                                                    sliceColors:["#edf1f2", "#ff902b"]
-                                                }}
-                                                className="sparkline inline"/>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            <CardFooter className="text-center">
-                                <button className="btn btn-secondary" type="button">Manage project</button>
-                            </CardFooter>
-                        </Card>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-}
-
-export default Projects;
-
-

pages/app/timeline.dikti.bak

@@ -1,186 +0,0 @@
-                <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>
-                                        {/* <li>
-                                            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status
-                                            
-                                                <DropdownToggle caret color="link">
-                                                </DropdownToggle>
-                                                <DropdownMenu className="animated fadeInUpShort">
-                                                    <DropdownItem>
-                                                        <em className="fa fa-lock mr-2"></em>Status Sample 1
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-lock-open mr-2"></em>Status Sample 2
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-low-vision mr-2"></em>Status Sample 3
-                                                    </DropdownItem>
-                                                </DropdownMenu>
-                                            </Dropdown>
-                                        </li> */}
-                                        {/* <li>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>
-                                            <div class="dropdown">
-                                                <button type="button" aria-haspopup="true" aria-expanded="false" class="btn btn-secondary">Status
-                                                </button>
-                                                <div tabindex="-1" role="menu" aria-hidden="true" class="animated bounceInDown dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Action</button><button type="button" tabindex="0" class="dropdown-item">Another action</button><button type="button" tabindex="0" class="dropdown-item active">Active Item</button><div tabindex="-1" class="dropdown-divider"></div><button type="button" tabindex="0" class="dropdown-item">Separated link</button></div>
-                                            </div>
-                                        </li> */}
-                                       {/* <li> */}
-                                        {/* <em className="fa fa-graduation-cap fa-fw mr-3"></em> */}
-                                                {/* <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                                <DropdownToggle caret color="link">
-                                                    <em className="fa fa-paperclip">Status</em>
-                                                </DropdownToggle>
-                                                <DropdownMenu className="animated fadeInUpShort">
-                                                    <DropdownItem>
-                                                        <em className="fa fa-download mr-2"></em>Download
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-share mr-2"></em>Send to
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-times mr-2"></em>Delete
-                                                    </DropdownItem>
-                                                </DropdownMenu>
-                                            </Dropdown> */}
-                                        {/* </li> */}
-                                    </ul>
-                                </div>
-                            </div>
-                            
-                        </Col>
-                    </Row>
-                </div>

pages/app/timeline.js

@@ -1,194 +0,0 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-
-class Timeline extends Component {
-
-    state = {
-        dropdownOpen: false,
-        timelineAlt: false
-    }
-
-    toggleDD = () => this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-    })
-
-    toggleTimeline = e => {
-        this.setState({
-            timelineAlt: e.target.checked
-        })
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    Timeline
-                    <div className="ml-auto">
-                        <div className="d-flex align-items-center">
-                            <small className="mr-2">Alternative</small>
-                            <label className="switch m-0">
-                                <input type="checkbox" defaultChecked={this.state.timelineAlt} onChange={this.toggleTimeline} />
-                                <span></span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-                {/* START timeline */}
-                <ul className={this.state.timelineAlt ? "timeline-alt" : "timeline"}>
-                    <li className="timeline-separator" data-datetime="Now"></li>
-                    {/* START timeline item */}
-                    <li>
-                        <div className="timeline-badge primary">
-                            <em className="fa fa-users"></em>
-                        </div>
-                        <div className="timeline-card">
-                            <div className="popover left">
-                                <h4 className="popover-header">Client Meeting</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Av 123 St - Floor 2
-                                        <br/>
-                                        <small>Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat.</small>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline item */}
-                    <li className="timeline-inverted">
-                        <div className="timeline-badge warning">
-                            <em className="fa fa-phone"></em>
-                        </div>
-                        <div className="timeline-card">
-                            <div className="popover right">
-                                <h4 className="popover-header">Call</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Michael
-                                        <a href="tel:+011654524578">(+011) 6545 24578 ext. 132</a>
-                                        <br/>
-                                        <small>Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat.</small>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline separator */}
-                    <li className="timeline-separator" data-datetime="Yesterday"></li>
-                    {/* END timeline separator */}
-                    {/* START timeline item */}
-                    <li>
-                        <div className="timeline-badge danger">
-                            <em className="fas fa-video"></em>
-                        </div>
-                        <div className="timeline-card">
-                            <div className="popover left">
-                                <h4 className="popover-header">Conference</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Join development group</p>
-                                    <small>
-                                        <a href="skype:echo123?call">
-                                            <em className="fa fa-phone mr-2"></em>Call the Skype Echo</a>
-                                    </small>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline item */}
-                    <li className="timeline-inverted">
-                        <div className="timeline-card">
-                            <div className="popover right">
-                                <h4 className="popover-header">Appointment</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>
-                                    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                        <DropdownToggle caret color="link">
-                                            <em className="fa fa-paperclip"></em>
-                                        </DropdownToggle>
-                                        <DropdownMenu className="animated fadeInUpShort">
-                                            <DropdownItem>
-                                                <em className="fa fa-download mr-2"></em>Download
-                                            </DropdownItem>
-                                            <DropdownItem>
-                                                <em className="fa fa-share mr-2"></em>Send to
-                                            </DropdownItem>
-                                            <DropdownItem>
-                                                <em className="fa fa-times mr-2"></em>Delete
-                                            </DropdownItem>
-                                        </DropdownMenu>
-                                    </Dropdown>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline item */}
-                    <li>
-                        <div className="timeline-badge info">
-                            <em className="fa fa-plane"></em>
-                        </div>
-                        <div className="timeline-card">
-                            <div className="popover left">
-                                <h4 className="popover-header">Fly</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline item */}
-                    <li>
-                        <div className="timeline-card">
-                            <div className="popover left">
-                                <h4 className="popover-header">Appointment</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline separator */}
-                    <li className="timeline-separator" data-datetime="2014-05-21"></li>
-                    {/* END timeline separator */}
-                    {/* START timeline item */}
-                    <li className="timeline-inverted">
-                        <div className="timeline-badge success">
-                            <em className="fa fa-music"></em>
-                        </div>
-                        <div className="timeline-card">
-                            <div className="popover right">
-                                <h4 className="popover-header">Relax</h4>
-                                <div className="arrow"></div>
-                                <div className="popover-body">
-                                    <p>Listen some music</p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    {/* END timeline item */}
-                    {/* START timeline item */}
-                    <li className="timeline-end">
-                        <a className="timeline-badge" href="#more">
-                            <em className="fa fa-plus"></em>
-                        </a>
-                    </li>
-                    {/* END timeline item */}
-                </ul>
-                {/* END timeline */}
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Timeline;

pages/app/userlist.js

@@ -1,450 +0,0 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines.js';
-
-class TableExtended extends Component {
-
-    state = {
-        listA: [{checked: false}, {checked: false}, {checked: false}],
-        listB: [{checked: false}, {checked: false}, {checked: false}]
-    }
-
-    // handle global when click on header checkbox
-    handleCheckList(listName, checkStat) {
-        this.setState({
-            [listName]: this.state[listName].map(item => ({...item, checked: checkStat}))
-        });
-    }
-    handleCheckListA = e => this.handleCheckList('listA', e.target.checked)
-    handleCheckListB = e => this.handleCheckList('listB', e.target.checked)
-
-    // handle particular changes on each checkbox
-    handleChange = (listName, index) => {
-        this.setState({
-            [listName]: this.state[listName].map((item, i) => (index !== i ? item : {...item, checked: !this.state[listName][index].checked} ) )
-        });
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    <div>Tables
-                        <small>A showcase of different components inside tables</small>
-                    </div>
-                </div>
-                {/* START card */}
-                <Card className="card-default">
-                    <CardHeader>Demo Table #1</CardHeader>
-                    {/* START table-responsive */}
-                    <Table bordered hover responsive>
-                        <thead>
-                            <tr>
-                                <th>UID</th>
-                                <th>Picture</th>
-                                <th>Username</th>
-                                <th>First Name</th>
-                                <th>Last Name</th>
-                                <th>Email</th>
-                                <th>Profile</th>
-                                <th>Last Login</th>
-                                <th data-check-all>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" onChange={this.handleCheckListA}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>1</td>
-                                <td>
-                                    <div className="media">
-                                        <img className="img-fluid circle" src="/static/img/user/01.jpg" alt="Avater"/>
-                                    </div>
-                                </td>
-                                <td>@twitter</td>
-                                <td>Larry</td>
-                                <td>the Bird</td>
-                                <td>mail@example.com</td>
-                                <td className="text-center">
-                                    <div className="radial-bar radial-bar-25 radial-bar-xs" data-label="25%"></div>
-                                </td>
-                                <td>1 week</td>
-                                <td>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" checked={this.state.listA[0].checked} onChange={e => this.handleChange('listA', 0)}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>2</td>
-                                <td>
-                                    <div className="media">
-                                        <img className="img-fluid circle" src="/static/img/user/02.jpg" alt="Avater"/>
-                                    </div>
-                                </td>
-                                <td>@mdo</td>
-                                <td>Mark</td>
-                                <td>Otto</td>
-                                <td>mail@example.com</td>
-                                <td className="text-center">
-                                    <div className="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div>
-                                </td>
-                                <td>25 minutes</td>
-                                <td>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" checked={this.state.listA[1].checked} onChange={e => this.handleChange('listA', 1)}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>3</td>
-                                <td>
-                                    <div className="media">
-                                        <img className="img-fluid circle" src="/static/img/user/03.jpg" alt="Avater"/>
-                                    </div>
-                                </td>
-                                <td>@fat</td>
-                                <td>Jacob</td>
-                                <td>Thornton</td>
-                                <td>mail@example.com</td>
-                                <td className="text-center">
-                                    <div className="radial-bar radial-bar-80 radial-bar-xs" data-label="80%"></div>
-                                </td>
-                                <td>10 hours</td>
-                                <td>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" checked={this.state.listA[2].checked} onChange={e => this.handleChange('listA', 2)}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </Table>
-                    {/* END table-responsive */}
-                    <CardFooter>
-                        <div className="d-flex">
-                            <div>
-                                <div className="input-group">
-                                    <input className="form-control" type="text" placeholder="Search"/>
-                                    <div className="input-group-append">
-                                        <button className="btn btn-secondary" type="Search">Button</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="ml-auto">
-                                <div className="input-group float-right">
-                                    <select className="custom-select" id="inputGroupSelect04">
-                                        <option value="0">Bulk action</option>
-                                        <option value="1">Delete</option>
-                                        <option value="2">Clone</option>
-                                        <option value="3">Export</option>
-                                    </select>
-                                    <div className="input-group-append">
-                                        <button className="btn btn-secondary" type="button">Apply</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </CardFooter>
-                </Card>
-                {/* START card */}
-                <Card className="card-default">
-                    <CardHeader>Demo Table #2</CardHeader>
-                    {/* START table-responsive */}
-                    <Table striped bordered hover responsive>
-                        <thead>
-                            <tr>
-                                <th data-check-all>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" onChange={this.handleCheckListB}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </th>
-                                <th>Description</th>
-                                <th>Active</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" checked={this.state.listB[0].checked} onChange={e => this.handleChange('listB', 0)}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div className="media">
-                                        <a className="float-left" href="">
-                                            <img className="img-fluid circle" src="/static/img/user/01.jpg" alt="Avatar"/>
-                                        </a>
-                                        <div className="media-body">
-                                            <div className="float-right badge badge-info">admin</div>
-                                            <h4>Holly Wallace</h4>
-                                            <p>Username: holly123</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
-                                    </div>
-                                </td>
-                                <td className="text-center">
-                                    <label className="switch">
-                                        <input type="checkbox"/>
-                                        <span></span>
-                                    </label>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" checked={this.state.listB[1].checked} onChange={e => this.handleChange('listB', 1)}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div className="media">
-                                        <a className="float-left" href="">
-                                            <img className="img-fluid circle" src="/static/img/user/03.jpg" alt="Avatar"/>
-                                        </a>
-                                        <div className="media-body">
-                                            <div className="float-right badge badge-info">writer</div>
-                                            <h4>Alexis Foster</h4>
-                                            <p>Username: ali89</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
-                                    </div>
-                                </td>
-                                <td className="text-center">
-                                    <label className="switch">
-                                        <input type="checkbox" defaultChecked/>
-                                        <span></span>
-                                    </label>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <div className="checkbox c-checkbox">
-                                        <label>
-                                            <input type="checkbox" checked={this.state.listB[2].checked} onChange={e => this.handleChange('listB', 2)}/>
-                                            <span className="fa fa-check"></span>
-                                        </label>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div className="media">
-                                        <a className="float-left" href="">
-                                            <img className="img-fluid circle" src="/static/img/user/05.jpg" alt="Avatar"/>
-                                        </a>
-                                        <div className="media-body">
-                                            <div className="float-right badge badge-info">editor</div>
-                                            <h4>Mario Miles</h4>
-                                            <p>Username: mariomiles</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
-                                    </div>
-                                </td>
-                                <td className="text-center">
-                                    <label className="switch">
-                                        <input type="checkbox" defaultChecked/>
-                                        <span></span>
-                                    </label>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </Table>
-                    {/* END table-responsive */}
-                    <CardFooter>
-                        <div className="d-flex align-items-center">
-                            <div>
-                                <div className="input-group">
-                                    <select className="custom-select" id="inputGroupSelect04">
-                                        <option value="0">Bulk action</option>
-                                        <option value="1">Delete</option>
-                                        <option value="2">Clone</option>
-                                        <option value="3">Export</option>
-                                    </select>
-                                    <div className="input-group-append">
-                                        <button className="btn btn-secondary" type="button">Apply</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="ml-auto">
-                                <Pagination className="pagination-sm">
-                                    <PaginationItem>
-                                      <PaginationLink previous href="" />
-                                    </PaginationItem>
-                                    <PaginationItem>
-                                      <PaginationLink href="">
-                                        1
-                                      </PaginationLink>
-                                    </PaginationItem>
-                                    <PaginationItem>
-                                      <PaginationLink href="">
-                                        2
-                                      </PaginationLink>
-                                    </PaginationItem>
-                                    <PaginationItem>
-                                      <PaginationLink href="">
-                                        3
-                                      </PaginationLink>
-                                    </PaginationItem>
-                                    <PaginationItem>
-                                      <PaginationLink next href="" />
-                                    </PaginationItem>
-                                </Pagination>
-                            </div>
-                        </div>
-                    </CardFooter>
-                </Card>
-                {/* END card */}
-                {/* START row */}
-                <Row>
-                    <Col xl="6">
-                        {/* START card */}
-                        <Card className="card-default">
-                            <CardHeader>Demo Tabl</CardHeader>
-                            {/* START table-responsive */}
-                            <Table striped bordered hover responsive>
-                                <thead>
-                                    <tr>
-                                        <th>Task name</th>
-                                        <th>Progress</th>
-                                        <th>Deadline</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>Nunc luctus, quam non condimentum ornare</td>
-                                        <td>
-                                            <div className="progress progress-xs">
-                                                <div className="progress-bar progress-bar-striped bg-success" role="progressbar" style={{width: '80%'}}>
-                                                    <span className="sr-only">80% Complete</span>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        <td>05/05/2014</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Integer in convallis felis.</td>
-                                        <td>
-                                            <div className="progress progress-xs">
-                                                <div className="progress-bar progress-bar-striped bg-danger" role="progressbar" style={{width: '20%'}}>
-                                                    <span className="sr-only">20% Complete</span>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        <td>15/05/2014</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Nullam sit amet magna vestibulum libero dapibus iaculis.</td>
-                                        <td>
-                                            <div className="progress progress-xs">
-                                                <div className="progress-bar progress-bar-striped bg-info" role="progressbar" style={{width: '50%'}}>
-                                                    <span className="sr-only">50% Complete</span>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        <td>05/10/2014</td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            {/* END table-responsive */}
-                        </Card>
-                        {/* END card */}
-                    </Col>
-                    <Col xl="6">
-                        {/* START card */}
-                        <Card className="card-default">
-                            <CardHeader>Demo Table #4</CardHeader>
-                            {/* START table-responsive */}
-                            <Table striped bordered hover responsive>
-                                <thead>
-                                    <tr>
-                                        <th>Project</th>
-                                        <th>Activity</th>
-                                        <th>Completion</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>Bootstrap 5.x</td>
-                                        <td>
-                                            <Sparkline options={{
-                                                barColor:"#5d9cec",
-                                                height:20,
-                                                barWidth:5,
-                                                barSpacing:2,
-                                                resize:true
-                                                }}
-                                                values={[1,4,4,7,5,9,10]}
-
-                                            />
-                                        </td>
-                                        <td>
-                                            <div className="badge badge-danger">Canceled</div>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>Web Engine</td>
-                                        <td>
-                                            <Sparkline options={{
-                                                barColor:"#7266ba",
-                                                height:20,
-                                                barWidth:5,
-                                                barSpacing:2,
-                                                resize:true
-                                                }}
-                                                values={[1,4,4,10,5,9,2]}
-
-                                            />
-                                        </td>
-                                        <td>
-                                            <div className="badge badge-success">Complete</div>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>Nullam sit amet</td>
-                                        <td>
-                                            <Sparkline options={{
-                                                barColor:"#23b7e5",
-                                                height:20,
-                                                barWidth:5,
-                                                barSpacing:2,
-                                                resize:true
-                                                }}
-                                                values={[1,4,4,7,5,9,4]}
-
-                                            />
-                                        </td>
-                                        <td>
-                                            <div className="badge badge-warning">Delayed</div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </Table>
-                            {/* END table-responsive */}
-                        </Card>
-                        {/* END card */}
-                    </Col>
-                </Row>
-                {/* END row */}
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default TableExtended;

pages/index.js

@@ -1,7 +1,8 @@
 import React from "react";
 import Router from "next/router";
 
-const defaultPage = 'login';
+// const defaultPage = 'login';
+const defaultPage = "app";
 //const defaultPage = 'app/profile';
 //const defaultPage = "app/pemantauan";
 //const defaultPage = 'singleview';

pages/laporan/new/index.js

@@ -0,0 +1,226 @@
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { getPT } from "@/actions/PT";
+import { getPelanggaran } from "@/actions/pelanggaran";
+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";
+
+const loadOptions = (inputValue, callback) => {
+	setTimeout(async () => {
+		const pt = await getPT({ search: inputValue });
+		const data = pt.data.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
+		callback(data);
+	}, 1000);
+};
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Membuat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+	{
+		title: "Login",
+		path: "/login",
+	},
+];
+const selectInstanceId = 1;
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+			inputValue: "",
+			stat: "Waiting to add files..",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			nama: "",
+			alamat: "",
+			no_hp: "",
+			email: "",
+			fileIdentitas: null,
+			pelanggaran: [],
+			selectedPerguruanTinggi: {},
+			selectedJenis: [],
+			keteranganLaporan: "",
+			files: [],
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	componentDidMount = async () => {
+		const pelanggaran = await getPelanggaran();
+		this.setState({ pelanggaran });
+	};
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	optionsJenisPelanggaran = (pelanggaran) => {
+		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
+	};
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: e.target.value });
+	};
+
+	handleChangeSelectJenis = (selectedJenis) => {
+		this.setState({ selectedJenis });
+	};
+
+	handleChangeSelectPerguruanTinggi = (selectedPerguruanTinggi) => {
+		this.setState({ selectedPerguruanTinggi });
+	};
+
+	handleInputChange = (newValue) => {
+		const inputValue = newValue.replace(/\W/g, "");
+		this.setState({ inputValue });
+		return inputValue;
+	};
+
+	render() {
+		const { selectedJenis, pelanggaran } = this.state;
+		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>
+								<CardBody>
+									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
+										<p className="lead bb">Identitas Pelapor</p>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Nama Pelapor</label>
+											<div className="col-md-10">
+												<Input type="text" value={this.state.nama} onChange={(e) => this.setState({ nama: 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>
+											<label className="col-md-2 col-form-label">Email</label>
+											<div className="col-md-10">
+												<Input type="email" value={this.state.email} onChange={(e) => this.setState({ email: e.target.value })} required />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Alamat</label>
+											<div className="col-md-10">
+												<Input type="textarea" value={this.state.alamat} onChange={(e) => this.setState({ alamat: e.target.value })} required />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Foto Identitas Diri</label>
+											<div className="col-md-10">
+												<Input type="file" onChange={(e) => this.setState({ fileIdentitas: e.target.files[0] })} />
+											</div>
+										</FormGroup>
+										<p className="lead bb">Detail Laporan</p>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
+											<div className="col-md-10">
+												<Input type="text" disabled value={this.state.pelaporanNumber} />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Perguruan Tinggi</label>
+											<div className="col-md-10">
+												<AsyncSelect cacheOptions loadOptions={loadOptions} defaultOptions onChange={this.handleChangeSelectPerguruanTinggi} onInputChange={this.handleInputChange} required />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
+											<div className="col-md-10">
+												<Select
+													instanceId={selectInstanceId + 1}
+													isMulti
+													value={selectedJenis}
+													onChange={this.handleChangeSelectJenis}
+													options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
+													required
+												/>
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
+											<div className="col-md-10">
+												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<label className="col-md-2 col-form-label">File Pendukung</label>
+											<div className="col-md-10">
+												<Input type="file" multiple onChange={(e) => this.setState({ files: e.target.files })} />
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<div className="col-xl-10">
+												<div className="checkbox c-checkbox">
+													<label>
+														<Input type="checkbox" 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="" />
+														<span className="fa fa-check"></span>Apakah Data yang anda Laporkan sudah benar
+													</label>
+												</div>
+											</div>
+										</FormGroup>
+										<FormGroup row>
+											<div className="col-12 col-lg-2">
+												<Button color="info" block type="submit">
+													Kirim Laporan
+												</Button>
+											</div>
+										</FormGroup>
+									</form>
+								</CardBody>
+							</Card>
+						</Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;

pages/login.js

@@ -1,142 +1,16 @@
-import { connect } from "react-redux";
-import { login, getUser, refreshToken } from "@/actions/auth";
-import axiosAPI from "@/config/axios";
-import { getPT } from "@/actions/PT";
-
 import React, { Component } from "react";
+import Login from "@/components/Main/Login";
 import BasePage from "@/components/Layout/BasePage";
-import { Row, Col, Input, Card, CardHeader, CardBody, Button, CardFooter, CustomInput } from "reactstrap";
-import Router from "next/router";
-import FormValidator from "@/components/Forms/Validator.js";
-
-class Login extends Component {
-	constructor(props) {
-		super(props);
-	}
-	state = {
-		/* Group each form state in an object.
-           Property name MUST match the form name */
-		error: null,
-		formLogin: {
-			username: "",
-			password: "",
-		},
-	};
-
-	/**
-	 * 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 = async (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();
-		if (!hasError) {
-			const { username, password } = this.state.formLogin;
-			const auth = await login(username, password);
-			console.log(auth);
-			if (auth.success) {
-				axiosAPI.defaults.headers.Authorization = `Bearer ${auth.access_token}`;
-				const dataUser = await getUser();
-				console.log(dataUser);
-				this.props.setUser(dataUser.data);
-				if (dataUser.data.peran[0].peran.id === 2022) {
-					const org_id = dataUser.data.peran[0].organisasi.id;
-					const pt = await getPT({ id: org_id });
-					if (pt?.success) {
-						this.props.setPT(pt.data);
-					}
-					Router.push({ pathname: "/app/pt/pemantauan" });
-				} else {
-					Router.push({ pathname: "/app/pemantauan" });
-				}
-			} else {
-				this.setState({ error: auth.message || auth.error });
-			}
-		}
-		// 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];
-	};
 
+class LoginPage extends Component {
 	render() {
 		return (
 			<div className="block-center mt-4 wd-xl">
-				<Card className="card card-flat">
-					<img className="card-img-top" src="/static/img/logo.png" alt="Logo" />
-					<CardBody className="card-body">
-						{" "}
-						<h5 className="card-title text-center py-2 bg-gray">Aplikasi Perguruan Tinggi Bermasalah </h5>
-						{this.state.error}
-						<form onSubmit={this.onSubmit} method="post" name="formLogin">
-							<div className="form-group">
-								<label className="col-form-label">Username *</label>
-								<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
-								{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
-							</div>
-							<div className="form-group">
-								<label className="col-form-label">Password *</label>
-								<Input
-									type="password"
-									id="id-password"
-									name="password"
-									invalid={this.hasError("formLogin", "password", "required")}
-									onChange={this.validateOnChange}
-									data-validate='["required"]'
-									value={this.state.formLogin.password}
-								/>
-								<span className="invalid-feedback">Field is required</span>
-							</div>
-							<div className="required">* Required fields</div>
-							<Button color="primary" type="submit" block className=" mt-3">
-								Login
-							</Button>
-						</form>
-					</CardBody>
-				</Card>
+				<Login />
 			</div>
 		);
 	}
 }
-Login.Layout = BasePage;
-const mapStateToProps = (state) => ({ user: state.user });
-const mapDispatchToProps = (dispatch) => ({
-	setUser: (payload) => dispatch({ type: "SET_USER", payload }),
-	setPT: (payload) => dispatch({ type: "SET_PT", payload }),
-});
 
-export default connect(mapStateToProps, mapDispatchToProps)(Login);
+LoginPage.Layout = BasePage;
+export default LoginPage;

pages/pages/notfound.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import BasePage from '@/components/Layout/BasePage';
-import Link from 'next/link';
-
-const NotFound = props => (
-    <div className="abs-center wd-xl">
-        <div className="text-center mb-4">
-            <div className="text-lg mb-3">404</div>
-            <p className="lead m-0">We couldn't find this page.</p>
-            <p>The page you are looking for does not exists.</p>
-        </div>
-        <div className="input-group mb-4">
-            <input className="form-control" type="text" placeholder="Try with a search" />
-            <span className="input-group-btn">
-                <button className="btn btn-secondary" type="button">
-                    <em className="fa fa-search" />
-                </button>
-            </span>
-        </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>
-);
-
-NotFound.Layout = BasePage;
-
-export default NotFound;