pre build #7

Signed-off-by: rizqevo <rizqevo@hotmail.com>

.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+/.next
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/.vscode

.nowignore

@@ -0,0 +1,2 @@
+.next
+node_modules

Dockerfile

@@ -15,4 +15,4 @@ COPY . .
 EXPOSE 3000
 
 # Running the app
-CMD "npm" "run" "preview"
+CMD "npm" "start"

Jenkinsfile

@@ -1,9 +1,18 @@
+/*
+  1. added 
+     client_max_body_size 0;
+     to avoid 413 error
+*/
+
 node {
+  def app
+  def registryAddress
+  def registryCredential
   try {
-    environment {
-      registry = "10.2.200.235:50006"
-      registryCredential = 'localregistry'
-    }
+    // environment {
+      registryAddress = "https://registry.sidali.sixsenz.net"
+      registryCredential = 'DockerRegistry-ID'
+    // }
 	
     stage('Checkout') {
       checkout scm
@@ -21,19 +30,34 @@ node {
       sh 'printenv'
     }
 	
-    stage('Build Docker test'){
-     sh 'docker build -t ptb-fe -f Dockerfile .'
+    stage('Test Build'){
+     sh 'docker build -t ptb-be -f dockerfile .'
     }
 	
-    stage('Deploy'){
-      if(env.BRANCH_NAME == 'master'){
-		  script {
-            dockerImage = docker.build registry + ":$BUILD_NUMBER"
-			docker.withRegistry( '', registryCredential ) {
-              dockerImage.push()
+    stage('Build Deploy '){
+            // // now you are on slave labeled with 'label'
+            // def workspace = WORKSPACE
+            // // ${workspace} will now contain an absolute path to job workspace on slave
+
+            // workspace = env.WORKSPACE
+            // // ${workspace} will still contain an absolute path to job workspace on slave
+
+            // // When using a GString at least later Jenkins versions could only handle the env.WORKSPACE variant:
+            // echo "Current workspace is ${env.WORKSPACE}"
+
+            // // the current Jenkins instances will support the short syntax, too:
+            // echo "Current workspace is $WORKSPACE"
+        docker.withTool("myDocker"){
+            docker.withRegistry(registryAddress, registryCredential) {
+
+                def dockerImage = docker.build("ptb-fe:${env.BUILD_ID}")
+
+                /* Push the container to the custom Registry */
+                dockerImage.push()
+                dockerImage.push('latest')
             }
-          }
-       }
+        }
+
      }
   }
   catch (err) {

actions/notifikasi.js

@@ -0,0 +1,45 @@
+import { get, post } from "@/config/request";
+
+export const notifLaporanBaru = async (data) => {
+	try {
+		const response = await post("/notifikasi/laporan-baru", data);
+		return response.data;
+	} catch (error) {
+		if (error.response.data) return error.response.data;
+		console.log(error);
+		return false;
+	}
+};
+
+export const notifKeberatan = async (data) => {
+	try {
+		const response = await post("/notifikasi/keberatan", data);
+		return response.data;
+	} catch (error) {
+		if (error.response.data) return error.response.data;
+		console.log(error);
+		return false;
+	}
+};
+
+export const notifBanding = async (data) => {
+	try {
+		const response = await post("/notifikasi/banding", data);
+		return response.data;
+	} catch (error) {
+		if (error.response.data) return error.response.data;
+		console.log(error);
+		return false;
+	}
+};
+
+export const notifDocPerbaikan = async (data) => {
+	try {
+		const response = await post("/notifikasi/doc-perbaikan", data);
+		return response.data;
+	} catch (error) {
+		if (error.response.data) return error.response.data;
+		console.log(error);
+		return false;
+	}
+};

actions/pelaporan.js

@@ -5,7 +5,7 @@ export const getPelaporan = async (query = {}) => {
 	try {
 		let url = "/pelaporan";
 		if (query != null) {
-			const { number, ptId, penjadwalan, pemeriksaan, active } = query;
+			const { number, ptId, penjadwalan, pemeriksaan, active, role, orgId } = query;
 			url += "?";
 			const parseURL = [];
 			if (number) parseURL.push(`number=${number}`);
@@ -13,6 +13,10 @@ export const getPelaporan = async (query = {}) => {
 			if (penjadwalan) parseURL.push(`penjadwalan=true`);
 			if (pemeriksaan) parseURL.push(`pemeriksaan=true`);
 			if (active) parseURL.push(`active=${active}`);
+			if (role) {
+				parseURL.push(`role=${role}`);
+				if (role === "lldikti" && orgId) parseURL.push(`orgId=${orgId}`);
+			}
 			url += parseURL.join("&");
 		}
 
@@ -73,3 +77,13 @@ export const activeLaporan = async ({ number, ptId }) => {
 		return false;
 	}
 };
+
+export const changeRoleData = async ({ number, ptId }, data) => {
+	try {
+		const res = await post(`/pelaporan/change-role-data?number=${number}&ptId=${ptId}`, data);
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

actions/sanksi.js

@@ -15,7 +15,7 @@ export const getSanksi = async (query = {}) => {
 	try {
 		let url = "http://localhost:5000/sanksi";
 		if (query != null) {
-			const { ptId, noSanksi, keberatan, jawaban, banding, active, cabutSanksi, docPerbaikan } = query;
+			const { ptId, noSanksi, keberatan, jawaban, banding, active, cabutSanksi, docPerbaikan, role, orgId } = query;
 			url += "?";
 			const parseURL = [];
 			if (noSanksi) parseURL.push(`noSanksi=${noSanksi}`);
@@ -25,6 +25,10 @@ export const getSanksi = async (query = {}) => {
 			if (cabutSanksi) parseURL.push(`cabutSanksi=true`);
 			if (docPerbaikan) parseURL.push(`docPerbaikan=true`);
 			if (jawaban) parseURL.push(`jawaban=true`);
+			if (role) {
+				parseURL.push(`role=${role}`);
+				if (role === "lldikti" && orgId) parseURL.push(`orgId=${orgId}`);
+			}
 			parseURL.push(`active=${active || "true"}`);
 			url += parseURL.join("&");
 		}

components/Extras/calendar.view.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
-import { getPelaporan, addStatus, removeLaporan, activeLaporan } from "@/actions/pelaporan";
+import { Card, CardBody, CardHeader, CardTitle, Button } from "reactstrap";
+import { getPelaporan, addStatus, removeLaporan, activeLaporan, changeRoleData } from "@/actions/pelaporan";
 import { updateJadwal } from "@/actions/penjadwalan";
 import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
@@ -14,12 +14,19 @@ import bootstrapPlugin from "@fullcalendar/bootstrap";
 import events from "./calendar.events";
 import Select from "react-select";
 import moment from "moment";
+import { connect } from "react-redux";
 
 const status = [
-	{ value: "Ditindaklanjuti Dikti Ristek", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
+	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
 	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
 	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
 ];
+
+const statusLLDIKTI = [
+	{ value: "Ditindaklanjuti LLDIKTI", label: "Ditindaklanjuti LLDIKTI", className: "State-ACT" },
+	{ value: "Delegasi ke DIKTI", label: "Delegasi ke DIKTI", className: "State-ACT" },
+	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
 class Calendar extends Component {
 	calendarEvents = events;
 
@@ -58,7 +65,12 @@ class Calendar extends Component {
 			},
 		});
 
-		const dataLaporan = await getPelaporan({ penjadwalan: true, active: true });
+		const { organisasi, peran } = this.props.user.peran[0];
+
+		const queryDataLaporan = { role: peran.id === 2021 ? "lldikti" : "dikti", penjadwalan: true, active: true };
+		if (peran.id === 2021) queryDataLaporan.orgId = organisasi.id;
+		const dataLaporan = await getPelaporan(queryDataLaporan);
+
 		const laporan = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
 
 		this.setState({ dataLaporan });
@@ -73,6 +85,8 @@ class Calendar extends Component {
 		this.setState({ externalEvents: [{ id: this.props.query.number, color, name: `Jadwal Pemeriksaan - No.Laporan : ${this.props.query.number} - ${laporan.data[0].pt.nama}`, allDay: true }] });
 	}
 
+	getStatus = () => (this.props.user.peran[0].peran.id === 2021 ? statusLLDIKTI : status);
+
 	getDataEvent = () => {
 		const dataEvent = this.state.dataLaporan.data
 			.filter((e) => e.penjadwalan)
@@ -122,6 +136,7 @@ class Calendar extends Component {
 
 	defaultStatus = async (data) => {
 		const { ptId, number } = this.props.query;
+		const status = this.getStatus();
 		if (!data.status) {
 			await addStatus({ number, ptId }, { status: status[0].value });
 			return this.setState({ selectedOption: status[0] });
@@ -129,15 +144,25 @@ class Calendar extends Component {
 		return this.setState({ selectedOption: status.filter((e) => e.value === data.status)[0] });
 	};
 
-	handleChangeSelect = async (selectedOption) => {
+	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
+
+	handleSimpan = async (e) => {
+		const { selectedOption } = this.state;
 		const { ptId, number } = this.props.query;
 		this.setState({ selectedOption });
-		await addStatus({ number, ptId }, { status: selectedOption.value });
-		if (selectedOption.value === "Ditutup") {
+		if (selectedOption.value === this.getStatus()[1].value) {
+			const roleId = this.props.user.peran[0].peran.id;
+			await changeRoleData({ number, ptId }, { role_data: roleId === 2021 ? "dikti" : "lldikti" });
+			const statusData = roleId === 2021 ? status : statusLLDIKTI;
+			await addStatus({ number, ptId }, { status: statusData[0].value });
+			return;
+		}
+		if (selectedOption.value === this.getStatus()[2].value) {
 			await removeLaporan({ number, ptId });
 		} else if (!this.state.laporan.data[0].active) {
 			await activeLaporan({ number, ptId });
 		}
+		await addStatus({ number, ptId }, { status: selectedOption.value });
 	};
 
 	render() {
@@ -169,10 +194,13 @@ class Calendar extends Component {
 											<CardTitle tag="h4">Status Pelaporan</CardTitle>
 										</CardHeader>
 										<CardBody>
-											<Select value={selectedOption} onChange={this.handleChangeSelect} options={status} required />
+											<Select value={selectedOption} onChange={this.handleChangeSelect} options={this.getStatus()} required />
+											<Button onClick={this.handleSimpan} className="mt-2" color="primary" block>
+												Simpan
+											</Button>
 										</CardBody>
 									</Card>
-									{selectedOption?.value === "Ditutup" ? (
+									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
 										""
 									) : (
 										<>
@@ -268,4 +296,5 @@ class Calendar extends Component {
 	}
 }
 
-export default Calendar;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Calendar);

components/Layout/Header.js

@@ -78,7 +78,7 @@ class Header extends Component {
 					<div className="navbar-header">
 						<a className="navbar-brand" href="#/">
 							<div className="brand-logo">
-								<img className="img-fluid" src="/static/img/logo-inner.png" alt="App Logo" />
+								<img className="img-fluid" src="/static/img/logo-inner.png" alt="App Logo" style={{ height: 35 }} />
 							</div>
 							<div className="brand-logo-collapsed">
 								<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" />

components/Layout/Menu.js

@@ -8,7 +8,6 @@ const Menu = [
 		path: "/app/pemantauan",
 		icon: "icon-notebook",
 		translate: "sidebar.nav.PEMANTAUAN",
-		label: { value: 3, color: "success" },
 	},
 	{
 		name: "Pelaporan",
@@ -51,7 +50,7 @@ const Menu = [
 		translate: "sidebar.nav.BANDING",
 	},
 	{
-		name: "Permohonan Pencabutan Sanksi",
+		name: "Pencabutan Sanksi",
 		path: "/app/pencabutan-sanksi",
 		icon: "icon-notebook",
 		translate: "sidebar.nav.PENCABUTAN_SANKSI",

components/Layout/MenuLLDIKTI.js

@@ -0,0 +1,60 @@
+const Menu = [
+	{
+		heading: "Main Navigation",
+		translate: "sidebar.heading.HEADER",
+	},
+	{
+		name: "Pemantauan",
+		path: "/app/pemantauan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN",
+	},
+	{
+		name: "Pelaporan",
+		path: "/app/pelaporan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PELAPORAN",
+	},
+	{
+		name: "Penjadwalan Evaluasi",
+		path: "/app/penjadwalan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENJADWALAN",
+	},
+	{
+		name: "Pemeriksaan",
+		path: "/app/pemeriksaan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMERIKSAAN",
+	},
+	{
+		name: "Sanksi",
+		path: "/app/sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.SANKSI",
+	},
+	{
+		heading: "Dikti Ristek/LLDIKTI",
+		translate: "sidebar.heading.DIKTI_RISTEK",
+	},
+	{
+		name: "Keberatan",
+		path: "/app/keberatan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.KEBERATAN",
+	},
+	{
+		name: "Pencabutan Sanksi",
+		path: "/app/pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENCABUTAN_SANKSI",
+	},
+	{
+		name: "Pemantauan Perbaikan",
+		path: "/app/pemantauan-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+	},
+];
+
+export default Menu;

components/Layout/MenuPT.js

@@ -19,11 +19,11 @@ const MenuPT = [
 				path: "/app/pt/keberatan",
 			},
 			{
-				name: "b. Jawaban atas permohonan keberatan",
+				name: "b. Jawaban keberatan",
 				path: "/app/pt/jawaban-keberatan",
 			},
 			{
-				name: "c. Jawaban atas permohonan banding",
+				name: "c. Jawaban banding",
 				path: "/app/pt/jawaban-banding",
 			},
 		],
@@ -31,16 +31,20 @@ const MenuPT = [
 	{
 		name: "Pencabutan Sanksi",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.PENCABUTAN_SANKSI",
+		translate: "sidebar.nav.PENGAJUAN_KEBERATAN",
 		submenu: [
 			{
-				name: "Permohonan",
+				name: "a. Permohonan",
 				path: "/app/pt/pencabutan-sanksi",
 			},
 			{
-				name: "Jawaban",
+				name: "b. Jawaban",
 				path: "/app/pt/jawaban-pencabutan-sanksi",
 			},
+			// {
+			// 	name: "c. Jawaban banding",
+			// 	path: "/app/pt/jawaban-banding",
+			// },
 		],
 	},
 	{

components/Layout/Sidebar.js

@@ -13,6 +13,7 @@ import SidebarUserBlock from "./SidebarUserBlock";
 // import { getUser } from "@/actions/auth";
 
 import Menu from "./Menu.js";
+import MenuLLDIKTI from "./MenuLLDIKTI.js";
 import MenuPT from "./MenuPT.js";
 // localStorage.getItem("user");
 // import Menu from './MenuPT.js';
@@ -147,7 +148,7 @@ class Sidebar extends Component {
 	async componentDidMount() {
 		// const user = await getUser();
 		const user = this.props.user;
-		this.menu = user.peran[0].peran.id === 2022 ? MenuPT : Menu;
+		this.menu = user.peran[0].peran.id === 2022 ? MenuPT : user.peran[0].peran.id === 2021 ? MenuLLDIKTI : Menu;
 		// prepare the flags to handle menu collapsed states
 		this.buildCollapseList();
 

components/Main/Login.js

@@ -92,10 +92,10 @@ class Login extends Component {
 	render() {
 		return (
 			<Card className="card card-flat">
-				<img className="card-img-top" src="/static/img/logo.png" alt="Logo" />
+				<img className="card-img-top" src="/static/img/logo-inner.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>
+					<h5 className="card-title text-center py-2 bg-gray">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h5>
 					{this.state.error}
 					<form onSubmit={this.onSubmit} method="post" name="formLogin">
 						<div className="form-group">
@@ -117,6 +117,8 @@ class Login extends Component {
 							<span className="invalid-feedback">Field is required</span>
 						</div>
 						<div className="required">* Required fields</div>
+						<span>Login Menggunakan Akun PDDIKTI</span>
+
 						<Button color="info" type="submit" block className=" mt-3">
 							Login
 						</Button>

components/Main/TableLaporan.js

@@ -3,7 +3,7 @@ import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
 
-function TableLaporan({ listData, to, linkName, status = false }) {
+function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
 	return (
 		<div className="card b">
 			<div className="card-body">
@@ -15,7 +15,7 @@ function TableLaporan({ listData, to, linkName, status = false }) {
 									<th>No.Laporan</th>
 									<th>Deskripsi Laporan</th>
 									{status ? <th>Status</th> : ""}
-									<th>Dibuat Oleh</th>
+									{!noBy && <th>Dibuat Oleh</th>}
 									<th>Created</th>
 									<th></th>
 								</tr>
@@ -42,7 +42,7 @@ function TableLaporan({ listData, to, linkName, status = false }) {
 											) : (
 												""
 											)}
-											<td>{data.user_id.isPrivate ? "" : data.user_id.nama}</td>
+											{!noBy && <td>{data.user_id.isPrivate ? "" : data.user_id.nama}</td>}
 											<td>{moment(data.createdAt).fromNow()}</td>
 											<td>
 												<div className="ml-auto">

components/Main/TableSanksi.js

@@ -14,7 +14,7 @@ function TableSanksi({ listData, to, linkName }) {
 								<tr>
 									<th>Nomor Sanksi</th>
 									<th>Keterangan Sanksi</th>
-									<th>Dibuat Oleh</th>
+									{listData?.sanksi?.user_id.nama && <th>Dibuat Oleh</th>}
 									<th>Created</th>
 									<th></th>
 								</tr>
@@ -35,7 +35,7 @@ function TableSanksi({ listData, to, linkName }) {
 															</div>
 														</div>
 													</td>
-													<td>{data.sanksi.user_id.nama}</td>
+													{data.sanksi.user_id?.nama && <td>{data.sanksi.user_id.nama}</td>}
 													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
 													<td>
 														<div className="ml-auto">

components/Main/Timeline.js

@@ -35,7 +35,7 @@ function Timeline({ data, noFile = false }) {
 															<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
 														</p>
 													</div>
-													{(!noFile || data.for_public) && data.data.files && (
+													{!noFile && data.data.files && (
 														<>
 															<p className="text-muted my-2">Dokumen</p>
 															{data.data.files.map((e) => (

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -2,8 +2,8 @@ import React, { Component } from "react";
 import Router from "next/router";
 import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { addBanding } from "@/actions/banding";
-import { addDocPerbaikan } from "@/actions/docPerbaikan";
 import { connect } from "react-redux";
+import { notifBanding } from "@/actions/notifikasi";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -67,7 +67,7 @@ export class ModalPermohonan extends Component {
 
 	onSubmit = async (e) => {
 		e.preventDefault();
-		const { user, query } = this.props;
+		const { user, query, data } = this.props;
 		const { noSanksi } = query;
 		const formdata = new FormData();
 		if (this.state.files.length > 0) {
@@ -78,6 +78,7 @@ export class ModalPermohonan extends Component {
 			const added = await addBanding({ noSanksi, ptId: user.peran[0].organisasi.id }, formdata);
 
 			if (added) {
+				const notif = await notifBanding({ lembaga: data.sanksi.user.lembaga, pt_name: user.peran[0].organisasi.nama, no_sanksi: data.sanksi.no_sanksi });
 				Router.push({
 					pathname: "/app/pt/jawaban-keberatan",
 				});

components/PT/Keberatan/ModalPermohonan.js

@@ -3,6 +3,7 @@ import Router from "next/router";
 import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { addKeberatan } from "@/actions/keberatan";
 import { connect } from "react-redux";
+import { notifKeberatan } from "@/actions/notifikasi";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -66,7 +67,7 @@ export class ModalPermohonan extends Component {
 
 	onSubmit = async (e) => {
 		e.preventDefault();
-		const { user, query } = this.props;
+		const { user, query, data } = this.props;
 		const { noSanksi } = query;
 		const formdata = new FormData();
 		if (this.state.files.length > 0) {
@@ -81,6 +82,9 @@ export class ModalPermohonan extends Component {
 			// await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
 			// console.log(added);
 			if (added) {
+				// console.log({ lembaga: data.sanksi.user.lembaga, pt_name: user.peran[0].organisasi.nama, no_laporan: data.sanksi.no_sanksi });
+				await notifKeberatan({ lembaga: data.sanksi.user.lembaga, pt_name: user.peran[0].organisasi.nama, no_sanksi: data.sanksi.no_sanksi });
+				// console.log(notif);
 				Router.push({
 					pathname: "/app/pt/keberatan",
 				});
@@ -97,6 +101,7 @@ export class ModalPermohonan extends Component {
 
 	render() {
 		const { files } = this.state;
+		// console.log(this.props.data.sanksi);
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>

components/Pelaporan/InputData.js

@@ -104,6 +104,8 @@ export class InputData extends Component {
 		formdata.append("pt_id", this.props.query.ptId);
 		formdata.append("description", this.state.keteranganLaporan);
 		formdata.append("is_public", false);
+		if (user.peran[0].peran.id === 2021) 
+			formdata.append("role_data", "lldikti");
 		formdata.append("pelanggaran", this.state.selectedOptionMulti.map((e) => e.value).join());
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {

components/Pemeriksaan/TableRiwayat.js

@@ -25,6 +25,7 @@ function TableRiwayat({ data }) {
 										<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
 											{e.name}
 										</a>
+										<br />
 									</>
 								))}
 							</td>

components/Sanksi/TablePenetapanSanksi.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { Card, Table } from "reactstrap";
 import { getPelanggaran } from "@/actions/pelanggaran";
+import { connect } from "react-redux";
 
 export class TablePenetapanSanksi extends Component {
 	checkedData = [];
@@ -14,7 +15,9 @@ export class TablePenetapanSanksi extends Component {
 	}
 
 	componentDidMount = async () => {
+		const { user } = this.props;
 		const pelanggaran = await getPelanggaran();
+		if (user.peran[0].peran.id === 2021) pelanggaran.data = pelanggaran.data.filter((e) => e.level_sanksi === 1);
 		this.setState({ pelanggaran });
 	};
 
@@ -85,4 +88,5 @@ export class TablePenetapanSanksi extends Component {
 	}
 }
 
-export default TablePenetapanSanksi;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(TablePenetapanSanksi);

pages/app/PT-ID.json

@@ -0,0 +1,57 @@
+[
+    {
+        "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/_middleware.js

@@ -0,0 +1,8 @@
+import { NextResponse, NextRequest } from "next/server";
+
+export async function middleware(req, ev) {
+	if (!req.session.user) {
+		return NextResponse.redirect("/login");
+	}
+	return NextResponse.next();
+}

pages/app/calendar.js

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,411 @@
+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

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
 import BasePage from "@/components/Layout/BasePage";
-import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Jumbotron } from "reactstrap";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
+import Login from "@/components/Main/Login";
 
 const menu = [
 	{
@@ -10,17 +11,13 @@ const menu = [
 		path: "/app",
 	},
 	{
-		title: "Membuat Laporan",
+		title: "Buat Laporan",
 		path: "/laporan/new",
 	},
 	{
 		title: "Pemantauan",
 		path: "/pemantauan",
 	},
-	{
-		title: "Login",
-		path: "/login",
-	},
 ];
 class App extends Component {
 	constructor(props) {
@@ -43,7 +40,7 @@ class App extends Component {
 			<div>
 				<Navbar color="info" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
+						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali Dikti
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -59,9 +56,24 @@ class App extends Component {
 					</Collapse>
 				</Navbar>
 				<ContentWrapper>
-					<Row>
-						<Col lg={8} className="block-center d-block "></Col>
-					</Row>
+					<Jumbotron>
+						<Row>
+							<Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
+								<h1 className="display-5">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
+								<p className="lead">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
+								<hr className="my-4" />
+								<p>Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
+								<p className="lead">
+									<Link href="/laporan/new">
+										<button className="btn btn-info btn-lg">Buat Laporan</button>
+									</Link>
+								</p>
+							</Col>
+							<Col>
+								<Login />
+							</Col>
+						</Row>
+					</Jumbotron>
 				</ContentWrapper>
 			</div>
 		);

pages/app/keberatan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/Keberatan/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
+import { connect } from "react-redux";
 
 class Keberatan extends Component {
 	constructor(props) {
@@ -14,7 +15,10 @@ class Keberatan extends Component {
 	}
 
 	componentDidMount = async () => {
-		const sanksi = await getSanksi({ keberatan: true });
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti", keberatan: true };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const sanksi = await getSanksi(query);
 		this.setState({ sanksi });
 	};
 
@@ -36,4 +40,5 @@ class Keberatan extends Component {
 	}
 }
 
-export default Keberatan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Keberatan);

pages/app/pelaporan/index.js

@@ -5,6 +5,7 @@ import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
+import { connect } from "react-redux";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -17,7 +18,10 @@ class Pelaporan extends Component {
 	}
 
 	componentDidMount = async () => {
-		const pelaporan = await getPelaporan();
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti" };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const pelaporan = await getPelaporan(query);
 		this.setState({ pelaporan });
 	};
 
@@ -46,4 +50,5 @@ class Pelaporan extends Component {
 	}
 }
 
-export default Pelaporan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Pelaporan);

pages/app/pelaporan/search.js

@@ -11,6 +11,7 @@ import "rc-slider/assets/index.css";
 import Select from "react-select";
 // DateTimePicker
 import "react-datetime/css/react-datetime.css";
+import { connect } from "react-redux";
 
 var pembina = [];
 const selectInstanceId = 1;
@@ -46,7 +47,6 @@ class Search extends Component {
 	};
 
 	handleClick = (e, PT_ID) => {
-		const query = { ptId: PT_ID };
 		e.preventDefault();
 		Router.push({
 			pathname: "/app/pelaporan/new",
@@ -55,7 +55,7 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
-		const pembina = this.state.selectedOptionMulti.join(",");
+		const pembina = this.props.user.peran[0].peran.id === 2021 ? this.props.user.peran[0].organisasi.id : this.state.selectedOptionMulti.join(",");
 		const searchValue = document.getElementById("searchInput").value;
 		const jsonData = await getPT({ search: searchValue, pembina });
 		this.setState({ data: jsonData.data });
@@ -96,6 +96,7 @@ class Search extends Component {
 											{pt.sk_pendirian} - {pt.website} - {pt.email}
 										</small>
 										<p>{pt.alamat.jalan}</p>
+										{this.props.user.peran[0].peran.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
 									</div>
 									<div className="ml-auto">
 										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
@@ -113,8 +114,6 @@ class Search extends Component {
 
 	render() {
 		const { selectedOptionMulti, pembina } = this.state;
-		console.log(pembina);
-
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -129,14 +128,14 @@ class Search extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="9">
+					<Col lg={this.props.user.peran[0].peran.id === 2021 ? 12 : 9}>
 						<div className="form-group mb-4">
 							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
 							<div className="d-flex">
 								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
 									Search
 								</button>
-								<div className="ml-auto"></div>
+								<div className="ml-auto">{this.props.user.peran[0].peran.id === 2021 && `Pembina: ${this.props.user.peran[0].organisasi.nama}`}</div>
 							</div>
 						</div>
 						<div className="card card-default">
@@ -155,21 +154,26 @@ class Search extends Component {
 							</div>
 						</div>
 					</Col>
-					<Col lg="3">
-						<h3 className="m-0 pb-3">Filters</h3>
-						<div className="form-group mb-4">
-							<label className="col-form-label mb-2">by Pembina</label>
-							<br />
-							<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
-						</div>
-						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
-							Apply
-						</Button>
-					</Col>
+					{this.props.user.peran[0].peran.id === 2021 ? (
+						""
+					) : (
+						<Col lg="3">
+							<h3 className="m-0 pb-3">Filters</h3>
+							<div className="form-group mb-4">
+								<label className="col-form-label mb-2">by Pembina</label>
+								<br />
+								<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
+							</div>
+							<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+								Apply
+							</Button>
+						</Col>
+					)}
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default Search;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Search);

pages/app/pemantauan-perbaikan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/Main/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
+import { connect } from "react-redux";
 
 class PemantauanPerbaikan extends Component {
 	constructor(props) {
@@ -14,7 +15,10 @@ class PemantauanPerbaikan extends Component {
 	}
 
 	componentDidMount = async () => {
-		const sanksi = await getSanksi({ docPerbaikan: true });
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti", docPerbaikan: true };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const sanksi = await getSanksi(query);
 		this.setState({ sanksi });
 	};
 
@@ -36,4 +40,5 @@ class PemantauanPerbaikan extends Component {
 	}
 }
 
-export default PemantauanPerbaikan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(PemantauanPerbaikan);

pages/app/pemantauan/index.js

@@ -1,20 +1,14 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
-// React Slider
+import { Row, Col, Button, Table } from "reactstrap";
 import { getPT, getPembina } from "@/actions/PT";
-import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
 // React Select
 import Select from "react-select";
 // DateTimePicker
-import Datetime from "react-datetime";
 import "react-datetime/css/react-datetime.css";
-
-import https from "https";
-
-import CardTool from "@/components/Common/CardTool";
+import { connect } from "react-redux";
 
 // import dummyData from "../PT-ID.json";
 
@@ -28,7 +22,7 @@ class Search extends Component {
 
 	componentDidMount = async () => {
 		const dataPembina = await getPembina();
-		this.setState({ pembina: dataPembina.data });
+		if (dataPembina) this.setState({ pembina: dataPembina.data });
 	};
 
 	optionsPembina = (pembina) => {
@@ -59,10 +53,10 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
-		const pembina = this.state.selectedOptionMulti.join(",");
+		const pembina = this.props.user.peran[0].peran.id === 2021 ? this.props.user.peran[0].organisasi.id : this.state.selectedOptionMulti.join(",");
 		const searchValue = document.getElementById("searchInput").value;
 		const jsonData = await getPT({ search: searchValue, pembina });
-		this.setState({ data: jsonData.data });
+		this.setState({ data: jsonData.data ? jsonData.data : [] });
 	};
 
 	handleApplyClick = () => {
@@ -100,6 +94,7 @@ class Search extends Component {
 											{pt.sk_pendirian} - {pt.website} - {pt.email}
 										</small>
 										<p>{pt.alamat.jalan}</p>
+										{this.props.user.peran[0].peran.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
 									</div>
 									<div className="ml-auto">
 										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
@@ -117,7 +112,6 @@ class Search extends Component {
 
 	render() {
 		const { selectedOptionMulti, pembina } = this.state;
-		// console.log(pembina);
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -127,14 +121,14 @@ class Search extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="9">
+					<Col lg={this.props.user.peran[0].peran.id === 2021 ? 12 : 9}>
 						<div className="form-group mb-4">
 							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
 							<div className="d-flex">
 								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
 									Search
 								</button>
-								<div className="ml-auto"></div>
+								<div className="ml-auto">{this.props.user.peran[0].peran.id === 2021 && `Pembina: ${this.props.user.peran[0].organisasi.nama}`}</div>
 							</div>
 						</div>
 						{/* START card */}
@@ -157,21 +151,26 @@ class Search extends Component {
 						</div>
 						{/* END card */}
 					</Col>
-					<Col lg="3">
-						<h3 className="m-0 pb-3">Filters</h3>
-						<div className="form-group mb-4">
-							<label className="col-form-label mb-2">by Pembina</label>
-							<br />
-							<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
-						</div>
-						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
-							Apply
-						</Button>
-					</Col>
+					{this.props.user.peran[0].peran.id === 2021 ? (
+						""
+					) : (
+						<Col lg="3">
+							<h3 className="m-0 pb-3">Filters</h3>
+							<div className="form-group mb-4">
+								<label className="col-form-label mb-2">by Pembina</label>
+								<br />
+								<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
+							</div>
+							<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+								Apply
+							</Button>
+						</Col>
+					)}
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default Search;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Search);

pages/app/pemeriksaan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
+import { connect } from "react-redux";
 
 class Pemeriksaan extends Component {
 	constructor(props) {
@@ -14,7 +15,10 @@ class Pemeriksaan extends Component {
 	}
 
 	componentDidMount = async () => {
-		const pelaporan = await getPelaporan({ penjadwalan: true, active: true });
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti", penjadwalan: true, active: true };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const pelaporan = await getPelaporan(query);
 		this.setState({ pelaporan });
 	};
 
@@ -28,7 +32,7 @@ class Pemeriksaan extends Component {
 						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<TableLaporan listData={pelaporan?.data} to="/app/pemeriksaan/new" linkName="Evaluasi" status />
+						<TableLaporan noBy listData={pelaporan?.data} to="/app/pemeriksaan/new" linkName="Evaluasi" status />
 					</Col>
 				</Row>
 			</ContentWrapper>
@@ -36,4 +40,5 @@ class Pemeriksaan extends Component {
 	}
 }
 
-export default Pemeriksaan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Pemeriksaan);

pages/app/pencabutan-sanksi/detail.js

@@ -201,7 +201,7 @@ class JawabanPencabutanSanksi extends Component {
 												</FormGroup>
 												<FormGroup>
 													<div className="row-xl-10">
-														<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.cabut_sanksi.jawaban ? this.toggleModal : this.handelSimpan}>
+														<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.cabut_sanksi.jawaban ? this.toggleModal : this.handleSimpan}>
 															Simpan
 														</Button>
 													</div>
@@ -221,7 +221,7 @@ class JawabanPencabutanSanksi extends Component {
 				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
 					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>
 					<ModalFooter>
-						<Button color="primary" onClick={this.handelSimpan}>
+						<Button color="primary" onClick={this.handleSimpan}>
 							Ya
 						</Button>{" "}
 						<Button color="secondary" onClick={this.toggleModal}>

pages/app/pencabutan-sanksi/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/PencabutanSanksi/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
+import { connect } from "react-redux";
 
 class PencabutanSanksi extends Component {
 	constructor(props) {
@@ -14,7 +15,10 @@ class PencabutanSanksi extends Component {
 	}
 
 	componentDidMount = async () => {
-		const sanksi = await getSanksi({ cabutSanksi: true });
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti", cabutSanksi: true };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const sanksi = await getSanksi(query);
 		this.setState({ sanksi });
 	};
 
@@ -36,4 +40,5 @@ class PencabutanSanksi extends Component {
 	}
 }
 
-export default PencabutanSanksi;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(PencabutanSanksi);

pages/app/penjadwalan/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableLaporan from "@/components/Main/TableLaporan";
+import { connect } from "react-redux";
 
 class Penjadwalan extends Component {
 	constructor(props) {
@@ -14,7 +15,10 @@ class Penjadwalan extends Component {
 	}
 
 	componentDidMount = async () => {
-		const pelaporan = await getPelaporan();
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti" };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const pelaporan = await getPelaporan(query);
 		this.setState({ pelaporan });
 	};
 
@@ -36,4 +40,5 @@ class Penjadwalan extends Component {
 	}
 }
 
-export default Penjadwalan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Penjadwalan);

pages/app/projectdetails.js

@@ -0,0 +1,425 @@
+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

@@ -0,0 +1,892 @@
+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/pt/dokumen-perbaikan/detail.js

@@ -10,6 +10,7 @@ import Riwayat from "@/components/PT/DocPerbaikan/Riwayat";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button, Input } from "reactstrap";
 import { connect } from "react-redux";
+import { notifDocPerbaikan } from "@/actions/notifikasi";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -76,16 +77,19 @@ class DetailPerbaikanDoc extends Component {
 
 	handleKirim = async (e) => {
 		e.preventDefault();
-		const { keterangan } = this.state;
+		const { keterangan, sanksi } = this.state;
 		const { noSanksi } = this.props.query;
+		const { user } = this.props;
+		const org_id = user.peran[0].organisasi.id;
 		const formdata = new FormData();
 		formdata.append("description", keterangan);
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
-			const added = await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			const added = await addDocPerbaikan({ noSanksi, ptId: org_id }, formdata);
 			if (added) {
+				await notifDocPerbaikan({ lembaga: sanksi.data[0].sanksi.user.lembaga, pt_name: user.peran[0].organisasi.nama, no_sanksi: sanksi.data[0].sanksi.no_sanksi });
 				Router.push({
 					pathname: "/app/pt/dokumen-perbaikan",
 				});

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

@@ -40,7 +40,7 @@ class JawabanKeberatan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} />
+				{sanksi?.data && <ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} data={sanksi.data[0]} />}
 				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
@@ -60,6 +60,7 @@ class JawabanKeberatan extends Component {
 											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
 											{sanksi?.data && <DetailJawaban data={sanksi.data[0]} />}
 											{sanksi?.data &&
+												sanksi.data[0].sanksi.keberatan.jawaban.status !== "Membatalkan Keputusan" &&
 												(new Date(sanksi.data[0].sanksi.close_banding).getTime() > Date.now() ? (
 													<>
 														<p>
@@ -81,7 +82,7 @@ class JawabanKeberatan extends Component {
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
+						<Col>{sanksi?.data && sanksi.data[0].sanksi.keberatan.jawaban.status !== "Membatalkan Keputusan" && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pt/keberatan/detail.js

@@ -36,7 +36,7 @@ class Keberatan extends Component {
 		const { sanksi } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} />
+				{sanksi?.data && <ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} data={sanksi.data[0]} />}
 				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">

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

@@ -77,12 +77,14 @@ class DetailPencabutanSanksi extends Component {
 	handleKirim = async (e) => {
 		e.preventDefault();
 		const { noSanksi } = this.props.query;
+		const { user } = this.props;
+		const org_id = user.peran[0].organisasi.id;
 		const formdata = new FormData();
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
-			const added = await addCabutSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			const added = await addCabutSanksi({ noSanksi, ptId: org_id }, formdata);
 			if (added) {
 				Router.push({
 					pathname: "/app/pt/pencabutan-sanksi",

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

@@ -3,28 +3,35 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
 import TableSanksi from "@/components/PT/TableSanksi";
+import { connect } from "react-redux";
 
 class PencabutanSanksi extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const sanksi = await getSanksi({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { sanksi };
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const org_id = user.peran[0].organisasi.id;
+		const sanksi = await getSanksi({ ptId: org_id });
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
 				<Row>
-					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default PencabutanSanksi;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(PencabutanSanksi);

pages/app/sanksi/index.js

@@ -4,6 +4,7 @@ import { Row, Col } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import CaseProgress from "@/components/Main/CaseProgress";
 import TableLaporan from "@/components/Sanksi/TableLaporan";
+import { connect } from "react-redux";
 
 class Sanksi extends Component {
 	constructor(props) {
@@ -14,7 +15,10 @@ class Sanksi extends Component {
 	}
 
 	componentDidMount = async () => {
-		const pelaporan = await getPelaporan({ pemeriksaan: true, active: true });
+		const { organisasi, peran } = this.props.user.peran[0];
+		const query = { role: peran.id === 2021 ? "lldikti" : "dikti", pemeriksaan: true, active: true };
+		if (peran.id === 2021) query.orgId = organisasi.id;
+		const pelaporan = await getPelaporan(query);
 		this.setState({ pelaporan });
 	};
 
@@ -36,4 +40,5 @@ class Sanksi extends Component {
 	}
 }
 
-export default Sanksi;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Sanksi);

pages/app/sanksi/proses.js

@@ -13,6 +13,7 @@ import Link from "next/link";
 import { getPelaporan } from "@/actions/pelaporan";
 import { createSanksi } from "@/actions/sanksi";
 import { getPelanggaranId } from "@/actions/pelanggaran";
+import { connect } from "react-redux";
 
 const stepNavitemStyle = {
 	backgroundColor: "#fcfcfc",
@@ -45,6 +46,7 @@ class ProsesSanksi extends Component {
 		const { ptId, number } = this.props.query;
 		const formdata = new FormData();
 		formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
+		formdata.append("user", this.props.user._id);
 		formdata.append("description", this.state.dataUpload.keterangan);
 		formdata.append("pelanggaran", this.state.dataPelanggaran.data.map((e) => e._id).join());
 		if (this.state.dataUpload.files.length > 0) {
@@ -241,4 +243,5 @@ class ProsesSanksi extends Component {
 	}
 }
 
-export default ProsesSanksi;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(ProsesSanksi);

pages/app/timeline.dikti.bak

@@ -0,0 +1,186 @@
+                <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

@@ -0,0 +1,194 @@
+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

@@ -0,0 +1,450 @@
+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/laporan/new/index.js

@@ -1,8 +1,10 @@
 import React, { Component } from "react";
+import Router from "next/router";
 import BasePage from "@/components/Layout/BasePage";
 import { getPT } from "@/actions/PT";
 import { getPelanggaran } from "@/actions/pelanggaran";
 import { createPelaporan } from "@/actions/pelaporan";
+import { notifLaporanBaru } from "@/actions/notifikasi";
 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";
@@ -24,17 +26,13 @@ const menu = [
 		path: "/app",
 	},
 	{
-		title: "Membuat Laporan",
+		title: "Buat Laporan",
 		path: "/laporan/new",
 	},
 	{
 		title: "Pemantauan",
 		path: "/pemantauan",
 	},
-	{
-		title: "Login",
-		path: "/login",
-	},
 ];
 const selectInstanceId = 1;
 class App extends Component {
@@ -43,7 +41,6 @@ class App extends Component {
 		this.state = {
 			isOpen: false,
 			inputValue: "",
-			stat: "Waiting to add files..",
 			pelaporanNumber: Math.floor(Date.now() * Math.random()),
 			nama: "",
 			alamat: "",
@@ -100,11 +97,25 @@ class App extends Component {
 		e.preventDefault();
 		const { nama } = this.state;
 		const user_id = await this.createUser();
-		await this.createLaporan(user_id, nama);
+		if (user_id) {
+			const laporan = await this.createLaporan(user_id, nama);
+			if (laporan) {
+				await this.sendNotif();
+				Router.push("/laporan/new");
+			}
+		}
+
 		// validasi
 		// if (nama === '')  msgError.push({nama: 'Wajib diisi'})
 	};
 
+	sendNotif = async () => {
+		const { nama, no_hp, selectedPerguruanTinggi, keteranganLaporan, pelaporanNumber, selectedJenis } = this.state;
+		const description = `${selectedJenis.map((e) => e.label).join(", ")} dengan keterangan ${keteranganLaporan}`;
+		// const description = keteranganLaporan;
+		return await notifLaporanBaru({ nama, pt_name: selectedPerguruanTinggi.label, description, no_laporan: pelaporanNumber.toString() });
+	};
+
 	createUser = async () => {
 		const { nama, alamat, no_hp, email, fileIdentitas, isPrivate } = this.state;
 		const dataUser = new FormData();
@@ -123,8 +134,8 @@ class App extends Component {
 		const { pelaporanNumber, selectedPerguruanTinggi, keteranganLaporan, selectedJenis, files } = this.state;
 		const formdata = new FormData();
 		formdata.append("number", pelaporanNumber);
-		formdata.append("user_id", user_id);
 		formdata.append("pt_id", selectedPerguruanTinggi.value);
+		formdata.append("user_id", user_id);
 		formdata.append("description", keteranganLaporan);
 		formdata.append("is_public", true);
 		formdata.append("nama", nama);
@@ -145,7 +156,7 @@ class App extends Component {
 			<div>
 				<Navbar color="info" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
+						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali Dikti
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>
@@ -167,6 +178,16 @@ class App extends Component {
 								<CardBody>
 									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
 										<p className="lead bb">Identitas Pelapor</p>
+										<FormGroup row>
+											<div className="col-xl-10">
+												<div className="checkbox c-checkbox">
+													<label>
+														<Input type="checkbox" onChange={(e) => this.setState({ isPrivate: !isPrivate })} defaultChecked="" />
+														<span className="fa fa-check"></span>Apakah anda ingin merahasiakan identitas anda
+													</label>
+												</div>
+											</div>
+										</FormGroup>
 										<FormGroup row>
 											<label className="col-md-2 col-form-label">Nama Pelapor</label>
 											<div className="col-md-10">
@@ -237,12 +258,6 @@ class App extends Component {
 										</FormGroup>
 										<FormGroup row>
 											<div className="col-xl-10">
-												<div className="checkbox c-checkbox">
-													<label>
-														<Input type="checkbox" onChange={(e) => this.setState({ isPrivate: !isPrivate })} defaultChecked="" />
-														<span className="fa fa-check"></span>Apakah anda ingin merahasiakan identitas anda
-													</label>
-												</div>
 												<div className="checkbox c-checkbox">
 													<label>
 														<Input type="checkbox" onChange={(e) => this.setState({ confirm: !confirm })} defaultChecked="" />

pages/pages/error500.js

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

pages/pages/lock.js

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

pages/pages/maintenance.js

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

pages/pages/notfound.js

@@ -0,0 +1,52 @@
+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;

pages/pages/recover.js

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

pages/pages/register.js

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

pages/pemantauan.js

@@ -14,17 +14,13 @@ const menu = [
 		path: "/app",
 	},
 	{
-		title: "Membuat Laporan",
+		title: "Buat Laporan",
 		path: "/laporan/new",
 	},
 	{
 		title: "Pemantauan",
 		path: "/pemantauan",
 	},
-	{
-		title: "Login",
-		path: "/login",
-	},
 ];
 class App extends Component {
 	constructor(props) {
@@ -62,7 +58,7 @@ class App extends Component {
 			<div>
 				<Navbar color="info" expand="md" dark>
 					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
+						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali Dikti
 					</NavbarBrand>
 					<NavbarToggler onClick={this.toggleCollapse} />
 					<Collapse isOpen={this.state.isOpen} navbar>

pages/singleview.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Trans } from '@/components/Common/Translate';
+import ContentWrapper from '@/components/Layout/ContentWrapper';
+import { Row, Col, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+class SingleView extends React.Component {
+
+    state = {
+      dropdownOpen: false
+    }
+
+    changeLanguage = lng => {
+        this.props.changeLanguage(lng);
+    }
+
+    toggle = () => {
+        this.setState({
+            dropdownOpen: !this.state.dropdownOpen
+        });
+    }
+
+    render() {
+        return (
+            <ContentWrapper>
+                <div className="content-heading">
+                   <div>Single View
+                      <small><Trans i18nKey='dashboard.WELCOME'></Trans></small>
+                   </div>
+                    { /* START Language list */ }
+                    <div className="ml-auto">
+                        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+                            <DropdownToggle>
+                                English
+                            </DropdownToggle>
+                            <DropdownMenu className="dropdown-menu-right-forced animated fadeInUpShort">
+                                <DropdownItem onClick={() => this.changeLanguage('en')}>English</DropdownItem>
+                                <DropdownItem onClick={() => this.changeLanguage('es')}>Spanish</DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
+                    { /* END Language list */ }
+                </div>
+                <Row>
+                    <Col xs={12} className="text-center">
+                        <h2 className="text-thin">Single view content</h2>
+                        <p>
+                            This project is an application skeleton. You can use it to quickly bootstrap your ReactJS webapp projects and dev environment for these projects.
+                            <br/>
+                            The seed app doesn't do much and has most of the feature removed so you can add theme as per your needs just following the demo app examples.
+                        </p>
+                    </Col>
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+
+export default SingleView;