Merge branch 'release/0.0.7'

.gitignore

@@ -17,3 +17,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/.vscode

actions/PT.js

@@ -0,0 +1,40 @@
+import { get } from "@/config/request";
+
+export const getPT = async (params) => {
+	try {
+		let url = "/perguruan-tinggi";
+		if (params) {
+			url += "?";
+			if (params.id) {
+				url += `id=${params.id}`;
+			} else if (params.search || params.pembina) {
+				const parseURL = [];
+				if (params.search) parseURL.push(`search=${params.search}`);
+				if (params.pembina) parseURL.push(`pembina=${params.pembina}`);
+				url += parseURL.join('&')
+			}
+		}
+		const response = await get(url);
+		return response.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const getPembina = async (params) => {
+	try {
+		let url = "/perguruan-tinggi/lembaga";
+		if (params) {
+			url += "?";
+			if (params.search) {
+				url += `search=${params.search}`;
+			}
+		}
+		const response = await get(url);
+		return response.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

actions/auth.js

@@ -1,19 +1,17 @@
-import axios from "axios";
-import axiosJWT from "../config/axios";
-import qs from "qs";
+import { get } from "../config/request";
+import axiosAPI from "../config/axios";
 
 export const login = async (username, password) => {
 	try {
-		const data = qs.stringify({
+		const data = {
 			username,
 			password,
-		});
+		};
 
-		const response = await axios.post("http://localhost:5000/login", data, {
+		const response = await axiosAPI.post("/login", data, {
 			headers: {
-				"Content-Type": "application/x-www-form-urlencoded",
+				"Content-Type": "application/json",
 			},
-			withCredentials: true,
 		});
 
 		return response.data;
@@ -24,7 +22,7 @@ export const login = async (username, password) => {
 
 export const refreshToken = async () => {
 	try {
-		const response = await axios.get("http://localhost:5000/token", { withCredentials: true });
+		const response = await axiosAPI.get("/token");
 		return response.data;
 	} catch (error) {
 		if (error.response) return error.response.data;
@@ -33,7 +31,7 @@ export const refreshToken = async () => {
 
 export const getUser = async () => {
 	try {
-		const response = await axiosJWT.get("http://localhost:5000/user");
+		const response = await get("/user");
 		return response.data;
 	} catch (error) {
 		if (error.response) return error.response.data;
@@ -42,9 +40,7 @@ export const getUser = async () => {
 
 export const logout = async () => {
 	try {
-		const response = await axios.delete("http://localhost:5000/logout", {
-			withCredentials: true,
-		});
+		const response = await axiosAPI.delete("/logout");
 		return response.data;
 	} catch (error) {
 		if (error.response) return error.response.data;

actions/banding.js

@@ -1,35 +1,27 @@
-import { addLog } from "./log";
+import { post } from "../config/request";
 
 export const addBanding = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/banding/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
+		const res = await post(`/banding/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
 		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "banding" }, description: "membuat permohonan banding" });
-		return result;
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
+		// addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
 		return false;
 	}
 };
 
 export const addJawabanBanding = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/banding/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
+		const res = await post(`/banding/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
 		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "banding" }, description: "membuat permohonan banding" });
-		return result;
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
+		// addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
 		return false;
 	}
 };

actions/cabutSanksi.js

@@ -1,35 +1,23 @@
-import { addLog } from "./log";
+import { post } from "../config/request";
 
 export const addCabutSanksi = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/cabut-sanksi/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
-		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "cabut-sanksi" }, description: "membuat permohonan cabut-sanksi" });
-		return result;
+		const res = await post(`http://localhost:5000/cabut-sanksi/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "ADD", from: { data: "cabut-sanksi" }, description: error.message || "membuat permohonan banding" });
 		return false;
 	}
 };
 
 export const addJawabanCabutSanksi = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/cabut-sanksi/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
-		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "cabut-sanksi" }, description: "membuat jawaban permohonan cabut-sanksi" });
-		return result;
+		const res = await post(`/cabut-sanksi/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		// addLog({ status: "FAIL", action: "ADD", from: { data: "cabut-sanksi" }, description: error.message || "membuat jawaban permohonan banding" });
 		return false;
 	}
 };

actions/docPerbaikan.js

@@ -1,12 +1,10 @@
+import { post } from "../config/request";
+
 export const addDocPerbaikan = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/doc-perbaikan/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
-		return result;
+		const res = await post(`/doc-perbaikan/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;

actions/keberatan.js

@@ -1,35 +1,23 @@
-import { addLog } from "./log";
+import { post } from "../config/request";
 
 export const addKeberatan = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/keberatan/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
-		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "keberatan" }, description: "membuat permohonan keberatan" });
-		return result;
+		const res = await post(`/keberatan/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "ADD", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
 		return false;
 	}
 };
 
 export const addJawabanKeberatan = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/keberatan/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
-		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "keberatan" }, description: "membuat permohonan keberatan" });
-		return result;
+		const res = await post(`/keberatan/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		console.log(res);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "ADD", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
 		return false;
 	}
 };

actions/log.js

@@ -1,28 +1,22 @@
-export const getLog = async ({ ptId }) => {
+import { get } from "../config/request";
+
+export const getLog = async ({ ptId, isPT }) => {
 	try {
-		const res = await fetch(`http://localhost:5000/log?ptId=${ptId}`);
-		return await res.json();
+		let url = `/log?ptId=${ptId}`;
+		if (isPT) url += `&isPT=true`;
+		const res = await get(url);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;
 	}
 };
 
-export const addLog = async (data) => {
+export const getLogPublic = async ({ ptId, laporanId }) => {
 	try {
-		const myHeaders = new Headers();
-		myHeaders.append("Content-Type", "application/json");
-
-		const raw = JSON.stringify(data);
-
-		const requestOptions = {
-			method: "POST",
-			body: raw,
-			headers: myHeaders,
-		};
-
-		const updated = await fetch(`http://localhost:5000/log/add`, requestOptions);
-		return await updated.json();
+		let url = `/log/public?ptId=${ptId}&laporan=${laporanId}`;
+		const res = await get(url);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;

actions/pelaporan.js

@@ -1,50 +1,73 @@
-import { addLog } from "./log";
+import { get, post, del, put } from "../config/request";
+import axiosAPI from "../config/axios";
 
 export const getPelaporan = async (query = {}) => {
 	try {
-		let url = "http://localhost:5000/pelaporan";
-		if (query.ptId && query.number) {
-			url += `?number=${query.number}&ptId=${query.ptId}`;
-		} else if (query.penjadwalan) {
-			url += "?penjadwalan=true";
-		} else if (query.pemeriksaan) {
-			url += "?pemeriksaan=true";
+		let url = "/pelaporan";
+		if (query != null) {
+			const { number, ptId, penjadwalan, pemeriksaan, active } = query;
+			url += "?";
+			const parseURL = [];
+			if (number) parseURL.push(`number=${number}`);
+			if (ptId) parseURL.push(`ptId=${ptId}`);
+			if (penjadwalan) parseURL.push(`penjadwalan=true`);
+			if (pemeriksaan) parseURL.push(`pemeriksaan=true`);
+			if (active) parseURL.push(`active=${active}`);
+			url += parseURL.join("&");
 		}
-		const res = await fetch(url);
-		return await res.json();
+
+		const res = await get(url);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;
 	}
 };
 
+export const getPelaporanPublic = async ({ number, noHp }) => {
+	try {
+		const res = await get(`/pelaporan/public?number=${number}&noHp=${noHp}`);
+		return res.data;
+	} catch (error) {
+		console.log("error", error.response.data);
+		return false;
+	}
+};
+
 export const createPelaporan = async (data) => {
 	try {
-		const res = await fetch("http://localhost:5000/pelaporan/create", {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.created._id, data: "pelaporan" }, description: "membuat laporan" });
-		return result;
+		const res = await axiosAPI.post("/pelaporan/create", data);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "CREATE", from: { data: "pelaporan" }, description: error.message || "membuat laporan" });
 		return false;
 	}
 };
 
 export const addStatus = async ({ number, ptId }, data) => {
 	try {
-		const myHeaders = new Headers();
-		myHeaders.append("Content-Type", "application/json");
-		const raw = JSON.stringify(data);
-		const res = await fetch(`http://localhost:5000/pelaporan/status/add?number=${number}&ptId=${ptId}`, {
-			method: "POST",
-			body: raw,
-			headers: myHeaders,
-		});
-		return await res.json();
+		const res = await post(`/pelaporan/status/add?number=${number}&ptId=${ptId}`, data);
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const removeLaporan = async ({ number, ptId }) => {
+	try {
+		const res = await del(`/pelaporan/remove?number=${number}&ptId=${ptId}`);
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const activeLaporan = async ({ number, ptId }) => {
+	try {
+		const res = await put(`/pelaporan/active?number=${number}&ptId=${ptId}`);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;

actions/pemeriksaan.js

@@ -1,19 +1,11 @@
-import { addLog } from "./log";
+import { post } from "../config/request";
 
 export const insertPemeriksaan = async ({ number, ptId }, data) => {
 	try {
-		const requestOptions = {
-			method: "POST",
-			body: data,
-		};
-
-		const res = await fetch(`http://localhost:5000/pelaporan/pemeriksaan/create?number=${number}&ptId=${ptId}`, requestOptions);
-		const result = await res.json();
-		addLog({ status: "SUCCESS", action: "ADD", from: { id: result.added._id, data: "pemeriksaan" }, description: "menambah evaluasi" });
-		return result;
+		const res = await post(`/pelaporan/pemeriksaan/create?number=${number}&ptId=${ptId}`, data);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "ADD", from: { data: "pemeriksaan" }, description: error.message || "menambah evaluasi" });
 		return false;
 	}
 };

actions/penjadwalan.js

@@ -1,25 +1,22 @@
-import { addLog } from "./log";
+import { post } from "../config/request";
 
 export const updateJadwal = async ({ number, ptId }, data) => {
 	try {
-		const myHeaders = new Headers();
-		myHeaders.append("Content-Type", "application/json");
+		// const myHeaders = new Headers();
+		// myHeaders.append("Content-Type", "application/json");
 
-		const raw = JSON.stringify(data);
+		// const raw = JSON.stringify(data);
 
-		const requestOptions = {
-			method: "POST",
-			body: raw,
-			headers: myHeaders,
-		};
+		// const requestOptions = {
+		// 	method: "POST",
+		// 	body: raw,
+		// 	headers: myHeaders,
+		// };
 
-		const updated = await fetch(`http://localhost:5000/pelaporan/jadwal/add?number=${number}&ptId=${ptId}`, requestOptions);
-		const result = await updated.json();
-		addLog({ status: "SUCCESS", action: "UPDATE", from: { id: result.added._id, data: "penjadwalan" }, description: "mengubah jadwal pemeriksaan" });
-		return result;
+		const res = await post(`/pelaporan/jadwal/add?number=${number}&ptId=${ptId}`, data);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "UPDATE", from: { data: "penjadwalan" }, description: error.message || "mengubah jadwal pemeriksaan" });
 		return false;
 	}
 };

actions/sanksi.js

@@ -1,18 +1,12 @@
-import { addLog } from "./log";
+import { post, get } from "../config/request";
 
 export const createSanksi = async ({ number, ptId }, data) => {
 	try {
-		const res = await fetch(`http://localhost:5000/sanksi/create?number=${number}&ptId=${ptId}`, {
-			method: "POST",
-			body: data,
-		});
-		const result = await res.json();
-		console.log(result);
-		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "sanksi" }, description: "membuat sanksi" });
-		return result;
+		const res = await post(`/sanksi/create?number=${number}&ptId=${ptId}`, data);
+		console.log(res);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
-		addLog({ status: "FAIL", action: "CREATE", from: { data: "sanksi" }, description: error.message || "membuat sanksi" });
 		return false;
 	}
 };
@@ -31,12 +25,12 @@ export const getSanksi = async (query = {}) => {
 			if (cabutSanksi) parseURL.push(`cabutSanksi=true`);
 			if (docPerbaikan) parseURL.push(`docPerbaikan=true`);
 			if (jawaban) parseURL.push(`jawaban=true`);
+			parseURL.push(`active=${active || "true"}`);
 			url += parseURL.join("&");
-			url += "&active=true";
 		}
 
-		const res = await fetch(url);
-		return await res.json();
+		const res = await get(url);
+		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;

actions/user.js

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

components/Banding/Riwayat.js

@@ -3,7 +3,6 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 
 function Riwayat({ data }) {
-	const jawaban = data.sanksi.banding.jawaban;
 	return (
 		<Card className="card-default">
 			<CardHeader>
@@ -20,12 +19,12 @@ function Riwayat({ data }) {
 							</tr>
 						</thead>
 						<tbody>
-							{jawaban ? (
+							{data ? (
 								<tr>
-									<td>{moment(jawaban.createAt).format("DD MMMM YYYY")}</td>
-									<td>{jawaban.status}</td>
+									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
+									<td>{data.status}</td>
 									<td>
-										{jawaban.files.map((e) => (
+										{data.files.map((e) => (
 											<>
 												<em className="fa-lg far fa-file-code"></em>
 												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>

components/Banding/TableSanksi.js

@@ -0,0 +1,67 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				{listData && (
+					<Datatable options={{ responsive: true }}>
+						<table className="table w-100">
+							<thead>
+								<tr>
+									<th>Nomor Sanksi</th>
+									<th>Keterangan Sanksi</th>
+									<th>Created</th>
+									<th>Status</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.length
+									? listData.map((data) => {
+											return (
+												<tr key={data._id}>
+													<td>{data.sanksi.no_sanksi}</td>
+													<td>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<h4 className="m-0">Universitas Satyagama</h4>
+																	<p>{data.sanksi.description}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+													<td>{data.sanksi.banding.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+													<td>
+														<div className="ml-auto">
+															<Link
+																href={{
+																	pathname: to,
+																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+																}}
+															>
+																<Button color="primary" size="sm">
+																	{linkName}
+																</Button>
+															</Link>
+														</div>
+													</td>
+												</tr>
+											);
+									  })
+									: ""}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/DocPerbaikan/Riwayat.js

@@ -15,6 +15,7 @@ function Riwayat({ data }) {
 						<thead>
 							<tr>
 								<th>Tanggal</th>
+								<th>Keterangan</th>
 								<th>Dokumen</th>
 							</tr>
 						</thead>
@@ -23,6 +24,7 @@ function Riwayat({ data }) {
 								? data.map((value) => (
 										<tr>
 											<td>{moment(value.createAt).format("DD MMMM YYYY")}</td>
+											<td>{value.description}</td>
 											<td>
 												{value.files.map((e) => (
 													<>

components/Extras/calendar.view.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
-import { getPelaporan } from "@/actions/pelaporan";
+import { getPelaporan, addStatus, removeLaporan, activeLaporan } from "@/actions/pelaporan";
 import { updateJadwal } from "@/actions/penjadwalan";
-import DetailLaporan from "@/components/Penjadwalan/DetailLaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -12,7 +12,14 @@ import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import bootstrapPlugin from "@fullcalendar/bootstrap";
 import events from "./calendar.events";
+import Select from "react-select";
+import moment from "moment";
 
+const status = [
+	{ value: "Ditindaklanjuti Dikti Ristek", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
+	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
+	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
 class Calendar extends Component {
 	calendarEvents = events;
 
@@ -21,7 +28,7 @@ class Calendar extends Component {
 	calendarHeader = {
 		left: "prev,next today",
 		center: "title",
-		right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+		right: "dayGridMonth,timeGridWeek,timeGridDay",
 	};
 
 	constructor(props) {
@@ -38,6 +45,8 @@ class Calendar extends Component {
 		};
 	}
 
+	static getInitialProps = ({ query }) => ({ query });
+
 	async componentDidMount() {
 		/* initialize the external events */
 		new Draggable(this.refs.externalEventsList, {
@@ -49,24 +58,26 @@ class Calendar extends Component {
 			},
 		});
 
-		const dataLaporan = await getPelaporan({ penjadwalan: true });
-		const { data } = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
+		const dataLaporan = await getPelaporan({ penjadwalan: true, active: true });
+		const laporan = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
+
 		this.setState({ dataLaporan });
 		this.getDataEvent();
-
+		await this.defaultStatus(laporan.data[0]);
 		// const cek = this.state.dataLaporan.data.filter((e) => e._number === this.props.query.number && e.pt_id == this.props.query.ptId)[0];
-		this.setState({ laporan: data[0] });
+		this.setState({ laporan });
 		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
-		if (data[0].penjadwalan) {
-			color = data[0].penjadwalan.background_color;
+		if (laporan.data[0].penjadwalan) {
+			color = laporan.data[0].penjadwalan.background_color;
 		}
-		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: `Jadwal Pemeriksaan - BI: ${this.props.query.number} - Universitas Satyagama` }] });
+		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 }] });
 	}
 
 	getDataEvent = () => {
 		const dataEvent = this.state.dataLaporan.data
 			.filter((e) => e.penjadwalan)
 			.map((e) => ({
+				id: e._id,
 				title: e.penjadwalan.title,
 				start: new Date(e.penjadwalan.from_date),
 				end: new Date(e.penjadwalan.to_date),
@@ -76,12 +87,13 @@ class Calendar extends Component {
 		this.setState({ dataEvent });
 	};
 
-	dayClick = (date) => {
-		this.setState({
-			selectedEvent: {
-				date: date.dateStr,
-			},
-		});
+	eventClick = (info) => {
+		const data = {
+			title: info.event.title,
+			start: moment(info.event.start).format("DD MMMM YYYY"),
+			end: moment(info.event.end - 1).format("DD MMMM YYYY"),
+		};
+		this.setState({ selectedEvent: data });
 	};
 
 	addEvent(event) {
@@ -108,19 +120,32 @@ class Calendar extends Component {
 		const update = await updateJadwal({ number, ptId }, data);
 	};
 
-	handleChangeSelect = (selectedOption) => {
+	defaultStatus = async (data) => {
+		const { ptId, number } = this.props.query;
+		if (!data.status) {
+			await addStatus({ number, ptId }, { status: status[0].value });
+			return this.setState({ selectedOption: status[0] });
+		}
+		return this.setState({ selectedOption: status.filter((e) => e.value === data.status)[0] });
+	};
+
+	handleChangeSelect = async (selectedOption) => {
+		const { ptId, number } = this.props.query;
 		this.setState({ selectedOption });
+		await addStatus({ number, ptId }, { status: selectedOption.value });
+		if (selectedOption.value === "Ditutup") {
+			await removeLaporan({ number, ptId });
+		} else if (!this.state.laporan.data[0].active) {
+			await activeLaporan({ number, ptId });
+		}
 	};
 
 	render() {
-		const { externalEvents, laporan, selectedOption } = this.state;
+		const { externalEvents, laporan, selectedOption, selectedEvent } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<div>
-						Jadwal Pemeriksaan
-						<small>Format pembuatan jadwal pemeriksaan v.0.1</small>
-					</div>
+					<div>Jadwal Pemeriksaan</div>
 					<div className="ml-auto">
 						<Link href="/app/penjadwalan">
 							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
@@ -128,36 +153,90 @@ class Calendar extends Component {
 					</div>
 				</div>
 				<div className="calendar-app">
+					<div class="row">
+						<div class="col">
+							<Card className="card-default">
+								<CardBody>{laporan.data && <DetailLaporan noStatus query={this.props.query} data={laporan.data[0]} handleChangeSelect={this.handleChangeSelect} />}</CardBody>
+							</Card>
+						</div>
+					</div>
 					<div className="row">
 						<div className="col-xl-4 col-lg-5">
 							<div className="row">
 								<div className="col-lg-12 col-md-6 col-12">
-									{selectedOption && selectedOption.value === "ditutup" ? (
+									<Card className="card-default">
+										<CardHeader>
+											<CardTitle tag="h4">Status Pelaporan</CardTitle>
+										</CardHeader>
+										<CardBody>
+											<Select value={selectedOption} onChange={this.handleChangeSelect} options={status} required />
+										</CardBody>
+									</Card>
+									{selectedOption?.value === "Ditutup" ? (
 										""
 									) : (
-										<Card className="card-default" title="">
-											<CardHeader>
-												<CardTitle tag="h4">Daftar Pemeriksaan</CardTitle>
-											</CardHeader>
-											<CardBody>
-												<div className="external-events" ref="externalEventsList">
-													{externalEvents.map((ev) => (
-														<div
-															className="fce-event"
-															style={{
-																backgroundColor: ev.color,
-															}}
-															key={ev.name + ev.color}
-															data-id={ev.id}
-														>
-															{ev.name}
-														</div>
-													))}
-												</div>
-											</CardBody>
-										</Card>
+										<>
+											<Card className="card-default" title="">
+												<CardHeader>
+													<CardTitle tag="h4">Daftar Pemeriksaan</CardTitle>
+												</CardHeader>
+												<CardBody>
+													<div className="external-events" ref="externalEventsList">
+														{externalEvents.map((ev) => (
+															<div
+																className="fce-event"
+																style={{
+																	backgroundColor: ev.color,
+																}}
+																key={ev.name + ev.color}
+																data-id={ev.id}
+															>
+																{ev.name}
+															</div>
+														))}
+													</div>
+												</CardBody>
+											</Card>
+											{laporan.data && laporan.data[0].penjadwalan && (
+												<Card className="card-default">
+													<CardHeader>
+														<CardTitle tag="h4">Jadwal Pemeriksaan</CardTitle>
+													</CardHeader>
+													<CardBody>
+														<table className="table">
+															<tbody>
+																<tr>
+																	<td>Judul</td>
+																	<td>{laporan.data[0].penjadwalan.title}</td>
+																</tr>
+																<tr>
+																	<td>Waktu</td>
+																	<td>{`${moment(laporan.data[0].penjadwalan.from_date).format("DD MMMM YYYY")} ${
+																		moment(laporan.data[0].penjadwalan.from_date).format("DD MMMM YYYY") === moment(laporan.data[0].penjadwalan.to_date).format("DD MMMM YYYY")
+																			? ""
+																			: `- ${moment(laporan.data[0].penjadwalan.to_date).add(-1, "d").format("DD MMMM YYYY")}`
+																	}`}</td>
+																</tr>
+															</tbody>
+														</table>
+													</CardBody>
+												</Card>
+											)}
+										</>
 									)}
-									{laporan ? <DetailLaporan query={this.props.query} data={laporan} handleChangeSelect={this.handleChangeSelect} /> : ""}
+									<div className="mb-3">
+										{selectedEvent && (
+											<div>
+												<p>Selected:</p>
+												<div className="box-placeholder">{JSON.stringify(selectedEvent)}</div>
+											</div>
+										)}
+										{!selectedEvent && (
+											<div>
+												<p>Click calendar to show information</p>
+											</div>
+										)}
+									</div>
 								</div>
 							</div>
 						</div>
@@ -174,7 +253,7 @@ class Calendar extends Component {
 										editable={true}
 										droppable={true}
 										deepChangeDetection={true}
-										dateClick={this.dayClick}
+										eventClick={this.eventClick}
 										eventReceive={this.handleEventReceive}
 										eventDrop={this.handleEventCalendar}
 										eventResize={this.handleEventCalendar}

components/Keberatan/Riwayat.js

@@ -3,7 +3,6 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 
 function Riwayat({ data }) {
-	const jawaban = data.sanksi.keberatan.jawaban;
 	return (
 		<Card className="card-default">
 			<CardHeader>
@@ -21,13 +20,13 @@ function Riwayat({ data }) {
 							</tr>
 						</thead>
 						<tbody>
-							{jawaban ? (
+							{data ? (
 								<tr>
-									<td>{moment(jawaban.createAt).format("DD MMMM YYYY")}</td>
-									<td>{jawaban.status}</td>
-									<td>{jawaban.description}</td>
+									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
+									<td>{data.status}</td>
+									<td>{data.description}</td>
 									<td>
-										{jawaban.files.map((e) => (
+										{data.files.map((e) => (
 											<>
 												<em className="fa-lg far fa-file-code"></em>
 												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>

components/Keberatan/TableSanksi.js

@@ -0,0 +1,67 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				{listData && (
+					<Datatable options={{ responsive: true }}>
+						<table className="table w-100">
+							<thead>
+								<tr>
+									<th>Nomor Sanksi</th>
+									<th>Keterangan Sanksi</th>
+									<th>Created</th>
+									<th>Status</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.length
+									? listData.map((data) => {
+											return (
+												<tr key={data._id}>
+													<td>{data.sanksi.no_sanksi}</td>
+													<td>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<h4 className="m-0">Universitas Satyagama</h4>
+																	<p>{data.sanksi.description}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+													<td>{data.sanksi.keberatan.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+													<td>
+														<div className="ml-auto">
+															<Link
+																href={{
+																	pathname: to,
+																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+																}}
+															>
+																<Button color="primary" size="sm">
+																	{linkName}
+																</Button>
+															</Link>
+														</div>
+													</td>
+												</tr>
+											);
+									  })
+									: ""}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/Layout/Header.js

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

components/Layout/Menu.js

@@ -8,6 +8,7 @@ const Menu = [
 		path: "/app/pemantauan",
 		icon: "icon-notebook",
 		translate: "sidebar.nav.PEMANTAUAN",
+		label: { value: 3, color: "success" },
 	},
 	{
 		name: "Pelaporan",
@@ -49,19 +50,18 @@ const Menu = [
 		icon: "icon-notebook",
 		translate: "sidebar.nav.BANDING",
 	},
-	{
-		name: "Pemantauan Perbaikan",
-		path: "/app/pemantauan-perbaikan",
-		icon: "icon-notebook",
-		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
-	},
 	{
 		name: "Permohonan Pencabutan Sanksi",
 		path: "/app/pencabutan-sanksi",
 		icon: "icon-notebook",
 		translate: "sidebar.nav.PENCABUTAN_SANKSI",
 	},
+	{
+		name: "Pemantauan Perbaikan",
+		path: "/app/pemantauan-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+	},
 ];
 
 export default Menu;
-``;

components/Layout/MenuPT.js

@@ -29,24 +29,26 @@ const MenuPT = [
 		],
 	},
 	{
-		name: "Dokumen Perbaikan",
-		path: "/app/pt/dokumen-perbaikan",
-		icon: "icon-notebook",
-		translate: "sidebar.nav.PT_DOKUMEN_PERBAIKAN",
-	},
-	{
-		name: "Permohonan Pencabutan Sanksi",
-		path: "/app/pt/pencabutan-sanksi",
+		name: "Pencabutan Sanksi",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.PT_PENCABUTAN_SANKSI",
+		translate: "sidebar.nav.PENCABUTAN_SANKSI",
+		submenu: [
+			{
+				name: "Permohonan",
+				path: "/app/pt/pencabutan-sanksi",
+			},
+			{
+				name: "Jawaban",
+				path: "/app/pt/jawaban-pencabutan-sanksi",
+			},
+		],
 	},
 	{
-		name: "Jawaban Permohonan Pencabutan Sanksi",
-		path: "/app/pt/jawaban-pencabutan-sanksi",
+		name: "Dokumen Perbaikan",
+		path: "/app/pt/dokumen-perbaikan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.PT_JAWABAN_PENCABUTAN_SANKSI",
+		translate: "sidebar.nav.PT_DOKUMEN_PERBAIKAN",
 	},
 ];
 
 export default MenuPT;
-``;

components/Layout/Sidebar.js

@@ -10,7 +10,7 @@ import { bindActionCreators } from "redux";
 import * as actions from "../../store/actions/actions";
 
 import SidebarUserBlock from "./SidebarUserBlock";
-import { getUser } from "@/actions/auth";
+// import { getUser } from "@/actions/auth";
 
 import Menu from "./Menu.js";
 import MenuPT from "./MenuPT.js";
@@ -145,10 +145,9 @@ class Sidebar extends Component {
 	};
 
 	async componentDidMount() {
-		// this.menu = JSON.parse(sessionStorage.getItem("user")).peran[0].peran.id === 2 ? MenuPT : Menu;
-		const user = await getUser();
-		// dataUser.data.peran[0].peran.id === 2;
-		this.menu = user.data.peran[0].peran.id === 2 ? MenuPT : Menu;
+		// const user = await getUser();
+		const user = this.props.user;
+		this.menu = user.peran[0].peran.id === 2022 ? MenuPT : Menu;
 		// prepare the flags to handle menu collapsed states
 		this.buildCollapseList();
 
@@ -318,7 +317,7 @@ Sidebar.propTypes = {
 	settings: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({ settings: state.settings });
+const mapStateToProps = (state) => ({ settings: state.settings, user: state.user });
 const mapDispatchToProps = (dispatch) => ({
 	actions: bindActionCreators(actions, dispatch),
 });

components/Layout/SidebarUserBlock.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Collapse } from "reactstrap";
-import { getUser } from "@/actions/auth";
 
 import { connect } from "react-redux";
 
@@ -13,8 +12,9 @@ class SidebarUserBlock extends Component {
 	};
 
 	async componentDidMount() {
-		const user = await getUser();
-		this.setState({ user: user.data, role: user.data.peran[0].peran.nama });
+		// const user = await getUser();
+		const user = this.props.user;
+		this.setState({ user, role: user.peran[0].peran });
 	}
 
 	componentDidUpdate(oldProps) {
@@ -32,14 +32,14 @@ class SidebarUserBlock extends Component {
 						{/* User picture */}
 						<div className="user-block-picture">
 							<div className="user-block-status">
-								<img className="img-thumbnail rounded-circle" src="/static/img/logo-single.png" alt="Avatar" width="60" height="60" />
+								<img className="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/static/img/logo-single.png"} alt="Avatar" width="60" height="60" />
 								<div className="circle bg-success circle-lg"></div>
 							</div>
 						</div>
 						{/* Name and Job */}
 						<div className="user-block-info">
 							<span className="user-block-name">{user.nama}</span>
-							<span className="user-block-role">{role}</span>
+							<span className="user-block-role">{role.nama}</span>
 						</div>
 					</div>
 				</div>
@@ -52,6 +52,6 @@ SidebarUserBlock.propTypes = {
 	showUserBlock: PropTypes.bool,
 };
 
-const mapStateToProps = (state) => ({ showUserBlock: state.settings.showUserBlock });
+const mapStateToProps = (state) => ({ showUserBlock: state.settings.showUserBlock, user: state.user });
 
 export default connect(mapStateToProps)(SidebarUserBlock);

components/Main/DetailLaporan.js

@@ -1,10 +1,55 @@
+import React, { useEffect, useState } from "react";
 import Scrollable from "@/components/Common/Scrollable";
 import moment from "moment";
 import { Col, FormGroup } from "reactstrap";
+import { useSelector } from "react-redux";
+import { getPT } from "@/actions/PT";
+
+function DetailLaporan({ data, noTitle = false, noStatus = false }) {
+	const user = useSelector((state) => state.user);
 
-function DetailLaporan({ data, noTitle = false }) {
 	return (
 		<>
+			{(!data.user_id.isPrivate || user.peran[0].peran.id === 2020) && (
+				<>
+					{noTitle ? "" : <p className="lead bb">Identitas Pelapor - {data.user_id.isPublic ? "Umum" : "Internal"}</p>}
+					<FormGroup row>
+						<Col md="4">Nama Pelapor:</Col>
+						<Col md="8">
+							<strong>{data.user_id.nama}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Nomor yang dapat dihubungi:</Col>
+						<Col md="8">
+							<strong>{data.user_id.no_hp}</strong>
+						</Col>
+					</FormGroup>
+					<FormGroup row>
+						<Col md="4">Email:</Col>
+						<Col md="8">
+							<strong>{data.user_id.email}</strong>
+						</Col>
+					</FormGroup>
+
+					{data.user_id.isPublic && (
+						<>
+							<FormGroup row>
+								<Col md="4">Alamat:</Col>
+								<Col md="8">
+									<strong>{data.user_id.alamat}</strong>
+								</Col>
+							</FormGroup>
+							<FormGroup row>
+								<Col md="4">Foto Identitas:</Col>
+								<Col md="8">
+									<img src={`data:${data.user_id.files[0].type};base64, ${Buffer.from(data.user_id.files[0].data).toString("base64")}`} height={200} alt="Foto Identitas" />
+								</Col>
+							</FormGroup>
+						</>
+					)}
+				</>
+			)}
 			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
 			<form className="form-horizontal">
 				<FormGroup row>
@@ -16,7 +61,7 @@ function DetailLaporan({ data, noTitle = false }) {
 				<FormGroup row>
 					<Col md="4">Nama Perguruan Tinggi:</Col>
 					<Col md="8">
-						<strong>Universitas Satyagama</strong>
+						<strong>{data.pt.nama}</strong>
 					</Col>
 				</FormGroup>
 				<FormGroup row>
@@ -45,7 +90,7 @@ function DetailLaporan({ data, noTitle = false }) {
 						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
 					</Col>
 				</FormGroup>
-				{data.status ? (
+				{!noStatus && data.status ? (
 					<FormGroup row>
 						<Col md="4">Status:</Col>
 						<Col md="8">
@@ -61,8 +106,8 @@ function DetailLaporan({ data, noTitle = false }) {
 						<Scrollable height="120px" className="list-group">
 							<table className="table table-bordered bg-transparent">
 								<tbody>
-									{data.files.map((e) => (
-										<tr>
+									{data.files.map((e, index) => (
+										<tr key={`files-${index}`}>
 											<td>
 												<em className="fa-lg far fa-file-code"></em>
 											</td>

components/Main/DetailPT.js

@@ -1,18 +1,26 @@
-function DetailPT() {
+function DetailPT({ data }) {
 	return (
 		<div className="card card-default">
 			<div className="card-body">
 				<div className="text-center">
-					<h3 className="mt-0">Universitas Satyagama</h3>
-					<p>0742/O/1990</p>
+					<h3 className="mt-0">{data.nama}</h3>
+					<p>{data.sk_pendirian}</p>
+					<p>Pembina: {data.pembina.nama}</p>
+					<p>{`${data.alamat.jalan} ${data.alamat.rt ? `rt ${data.alamat.rt}` : ""} ${data.alamat.rw ? `rt ${data.alamat.rw}` : ""}, ${data.alamat.kab_kota.nama}, ${data.propinsi.nama}`}</p>
 				</div>
 				<hr />
 				<ul className="list-unstyled px-4">
 					<li>
-						<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
+						<em className="fa fa-globe fa-fw mr-3"></em>
+						<a href={`https://${data.website}`}>{data.website}</a>
 					</li>
 					<li>
-						<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
+						<em className="fa fa-phone fa-fw mr-3"></em>
+						{data.telepon}
+					</li>
+					<li>
+						<em className="fa fa-at fa-fw mr-3"></em>
+						<a href={`mailto:${data.email}`}>{data.email}</a>
 					</li>
 				</ul>
 			</div>

components/Main/DetailSanksi.js

@@ -16,7 +16,7 @@ function DetailSanksi({ data, noTitle = false }) {
 				<FormGroup row>
 					<Col md="4">Nama Perguruan Tinggi:</Col>
 					<Col md="8">
-						<strong>Universitas Satyagama</strong>
+						<strong>{data.pt.nama}</strong>
 					</Col>
 				</FormGroup>
 

components/Main/Header.js

@@ -1,4 +1,4 @@
-function Header() {
+function Header({ data }) {
 	const styleHeaderText = {
 		color: "brown",
 	};
@@ -7,9 +7,9 @@ function Header() {
 		<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
 			<div className="p-4 text-center" style={styleHeaderText}>
 				<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-				<h3 className="m-0">Universitas Satyagama</h3>
-				<p>0742/O/1990</p>
-				<p>Jalan Kamal Raya No 2-A Cengkareng</p>
+				<h3 className="m-0">{data.nama}</h3>
+				<p>{data.sk_pendirian}</p>
+				<p>{`${data.alamat.jalan} ${data.alamat.rt ? `rt ${data.alamat.rt}` : ""} ${data.alamat.rw ? `rt ${data.alamat.rw}` : ""}, ${data.alamat.kab_kota.nama}, ${data.propinsi.nama}`}</p>
 			</div>
 		</div>
 	);

components/Main/Login.js

@@ -0,0 +1,136 @@
+import React, { Component } from "react";
+import { Input, Card, CardBody, Button } from "reactstrap";
+import Router from "next/router";
+import FormValidator from "@/components/Forms/Validator.js";
+import { connect } from "react-redux";
+import { login, getUser } from "@/actions/auth";
+import axiosAPI from "@/config/axios";
+import { getPT } from "@/actions/PT";
+
+class Login extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			/* Group each form state in an object.
+           Property name MUST match the form name */
+			error: null,
+			formLogin: {
+				username: "",
+				password: "",
+			},
+		};
+	}
+
+	/**
+	 * Validate input using onChange event
+	 * @param  {String} formName The name of the form in the state object
+	 * @return {Function} a function used for the event
+	 */
+	validateOnChange = (event) => {
+		const input = event.target;
+		const form = input.form;
+		const value = input.type === "checkbox" ? input.checked : input.value;
+
+		const result = FormValidator.validate(input);
+
+		this.setState({
+			[form.name]: {
+				...this.state[form.name],
+				[input.name]: value,
+				errors: {
+					...this.state[form.name].errors,
+					[input.name]: result,
+				},
+			},
+		});
+	};
+
+	onSubmit = async (e) => {
+		const form = e.target;
+		const inputs = [...form.elements].filter((i) => ["INPUT", "SELECT"].includes(i.nodeName));
+
+		const { errors, hasError } = FormValidator.bulkValidate(inputs);
+
+		this.setState({
+			[form.name]: {
+				...this.state[form.name],
+				errors,
+			},
+		});
+
+		console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
+		e.preventDefault();
+		if (!hasError) {
+			const { username, password } = this.state.formLogin;
+			const auth = await login(username, password);
+			if (auth.success) {
+				axiosAPI.defaults.headers.Authorization = `Bearer ${auth.access_token}`;
+				const dataUser = await getUser();
+				this.props.setUser(dataUser.data);
+				if (dataUser.data.peran[0].peran.id === 2022) {
+					const org_id = dataUser.data.peran[0].organisasi.id;
+					const pt = await getPT({ id: org_id });
+					if (pt?.success) {
+						this.props.setPT(pt.data);
+					}
+					Router.push({ pathname: "/app/pt/pemantauan" });
+				} else {
+					Router.push({ pathname: "/app/pemantauan" });
+				}
+			} else {
+				this.setState({ error: auth.message || auth.error });
+			}
+		}
+		// e.preventDefault();
+	};
+
+	/* Simplify error check */
+	hasError = (formName, inputName, method) => {
+		return this.state[formName] && this.state[formName].errors && this.state[formName].errors[inputName] && this.state[formName].errors[inputName][method];
+	};
+
+	render() {
+		return (
+			<Card className="card card-flat">
+				<img className="card-img-top" src="/static/img/logo.png" alt="Logo" />
+				<CardBody className="card-body">
+					{" "}
+					<h5 className="card-title text-center py-2 bg-gray">Aplikasi Pengendalian Kelembagaan Pendidikan Tinggi (Aldila Dikti)</h5>
+					{this.state.error}
+					<form onSubmit={this.onSubmit} method="post" name="formLogin">
+						<div className="form-group">
+							<label className="col-form-label">Username *</label>
+							<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
+							{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
+						</div>
+						<div className="form-group">
+							<label className="col-form-label">Password *</label>
+							<Input
+								type="password"
+								id="id-password"
+								name="password"
+								invalid={this.hasError("formLogin", "password", "required")}
+								onChange={this.validateOnChange}
+								data-validate='["required"]'
+								value={this.state.formLogin.password}
+							/>
+							<span className="invalid-feedback">Field is required</span>
+						</div>
+						<div className="required">* Required fields</div>
+						<Button color="info" type="submit" block className=" mt-3">
+							Login
+						</Button>
+					</form>
+				</CardBody>
+			</Card>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user });
+const mapDispatchToProps = (dispatch) => ({
+	setUser: (payload) => dispatch({ type: "SET_USER", payload }),
+	setPT: (payload) => dispatch({ type: "SET_PT", payload }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

components/Main/PublicPage.js

@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { getPT } from "@/actions/PT";
+import { getPelanggaran } from "@/actions/pelanggaran";
+import Select from "react-select";
+import AsyncSelect from "react-select/async";
+import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Membuat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+	{
+		title: "Login",
+		path: "/login",
+	},
+];
+class PublicPage extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+			inputValue: "",
+			stat: "Waiting to add files..",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			nama: "",
+			alamat: "",
+			no_hp: "",
+			email: "",
+			fileIdentitas: null,
+			pelanggaran: [],
+			selectedPerguruanTinggi: {},
+			selectedJenis: [],
+			keteranganLaporan: "",
+			files: [],
+		};
+	}
+
+	render() {
+		return (
+			<div>
+				<Navbar color="info" expand="md" dark>
+					<NavbarBrand href="/">
+						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
+					</NavbarBrand>
+					<NavbarToggler onClick={this.toggleCollapse} />
+					<Collapse isOpen={this.state.isOpen} navbar>
+						<Nav className="ml-auto" navbar>
+							{menu.map((e) => (
+								<NavItem active={e.path === this.props.pathname ? true : false}>
+									<NavLink href={e.path}>{e.title}</NavLink>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Row>
+						<Col lg={8} className="block-center d-block ">
+							{this.props.children}
+						</Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+PublicPage.Layout = BasePage;
+
+export default PublicPage;

components/Main/TableLaporan.js

@@ -7,54 +7,64 @@ function TableLaporan({ listData, to, linkName, status = false }) {
 	return (
 		<div className="card b">
 			<div className="card-body">
-				<Datatable options={{ responsive: true }}>
-					<table className="table w-100">
-						<thead>
-							<tr>
-								<th>#ID</th>
-								<th>Deskripsi Laporan</th>
-								{status ? <th>Status</th> : ""}
-								<th>Created</th>
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							{listData.map((data) => {
-								return (
-									<tr key={data._id}>
-										<td>{data._number}</td>
-										<td className="text-nowrap">
-											<div className="media align-items-center">
-												<div className="media-body d-flex">
-													<div>
-														<h4 className="m-0">Universitas Satyagama</h4>
-														<p>{data.description}</p>
+				{listData && (
+					<Datatable options={{ responsive: false }}>
+						<table className="table w-100">
+							<thead>
+								<tr>
+									<th>No.Laporan</th>
+									<th>Deskripsi Laporan</th>
+									{status ? <th>Status</th> : ""}
+									<th>Dibuat Oleh</th>
+									<th>Created</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.map((data) => {
+									return (
+										<tr key={data._id}>
+											<td>{data._number}</td>
+											<td className="text-nowrap">
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<h4 className="m-0">{data.pt.nama}</h4>
+															<p>{data.description}</p>
+														</div>
 													</div>
 												</div>
-											</div>
-										</td>
-										{status ? <td>{data.status}</td> : ""}
-										<td>{moment(data.createdAt).fromNow()}</td>
-										<td>
-											<div className="ml-auto">
-												<Link
-													href={{
-														pathname: to,
-														query: { ptId: data.pt_id, number: data._number },
-													}}
-												>
-													<Button color="primary" size="sm">
-														{linkName}
-													</Button>
-												</Link>
-											</div>
-										</td>
-									</tr>
-								);
-							})}
-						</tbody>
-					</table>
-				</Datatable>
+											</td>
+											{status ? (
+												<td>
+													<div className="badge badge-info">{data.status}</div>
+												</td>
+											) : (
+												""
+											)}
+											<td>{data.user_id.isPrivate ? "" : data.user_id.nama}</td>
+											<td>{moment(data.createdAt).fromNow()}</td>
+											<td>
+												<div className="ml-auto">
+													<Link
+														href={{
+															pathname: to,
+															query: { ptId: data.pt_id, number: data._number },
+														}}
+													>
+														<Button color="primary" size="sm">
+															{linkName}
+														</Button>
+													</Link>
+												</div>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
 			</div>
 		</div>
 	);

components/Main/TableSanksi.js

@@ -7,54 +7,58 @@ function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">
 			<div className="card-body">
-				<Datatable options={{ responsive: true }}>
-					<table className="table w-100">
-						<thead>
-							<tr>
-								<th>Nomor Sanksi</th>
-								<th>Keterangan Sanksi</th>
-								<th>Created</th>
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							{listData.length
-								? listData.map((data) => {
-										return (
-											<tr key={data._id}>
-												<td>{data.sanksi.no_sanksi}</td>
-												<td>
-													<div className="media align-items-center">
-														<div className="media-body d-flex">
-															<div>
-																<h4 className="m-0">Universitas Satyagama</h4>
-																<p>{data.sanksi.description}</p>
+				{listData && (
+					<Datatable options={{ responsive: false }}>
+						<table className="table w-100">
+							<thead>
+								<tr>
+									<th>Nomor Sanksi</th>
+									<th>Keterangan Sanksi</th>
+									<th>Dibuat Oleh</th>
+									<th>Created</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.length
+									? listData.map((data) => {
+											return (
+												<tr key={data._id}>
+													<td>{data.sanksi.no_sanksi}</td>
+													<td>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<h4 className="m-0">Universitas Satyagama</h4>
+																	<p>{data.sanksi.description}</p>
+																</div>
 															</div>
 														</div>
-													</div>
-												</td>
-												<td>{moment(data.sanksi.createdAt).fromNow()}</td>
-												<td>
-													<div className="ml-auto">
-														<Link
-															href={{
-																pathname: to,
-																query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
-															}}
-														>
-															<Button color="primary" size="sm">
-																{linkName}
-															</Button>
-														</Link>
-													</div>
-												</td>
-											</tr>
-										);
-								  })
-								: ""}
-						</tbody>
-					</table>
-				</Datatable>
+													</td>
+													<td>{data.sanksi.user_id.nama}</td>
+													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+													<td>
+														<div className="ml-auto">
+															<Link
+																href={{
+																	pathname: to,
+																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+																}}
+															>
+																<Button color="primary" size="sm">
+																	{linkName}
+																</Button>
+															</Link>
+														</div>
+													</td>
+												</tr>
+											);
+									  })
+									: ""}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
 			</div>
 		</div>
 	);

components/Main/Timeline.js

@@ -1,59 +1,64 @@
 import moment from "moment";
 
-function Timeline({ data }) {
-	const date = [...new Set(data.data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
+function Timeline({ data, noFile = false }) {
+	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
 	return (
-		<ul className="timeline">
-			{date.map((value) => (
-				<>
-					<li className="timeline-separator" data-datetime={value}></li>
-					{data.data
-						.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
-						.map((data, i) => (
-							<>
-								<li className={data.role === "PT" ? "timeline-inverted" : ""}>
-									<div className="timeline-badge info">
-										<em className="far fa-file"></em>
-									</div>
+		<ul className="timeline-alt">
+			{data &&
+				date.map((value) => (
+					<>
+						<li className="timeline-separator" data-datetime={value}></li>
+						{data
+							.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
+							.map((data, i) => (
+								<>
+									<li className={data.role === "PT" ? "timeline-inverted" : ""}>
+										<div className={`timeline-badge ${data.role === "PT" ? " danger" : "info"}`}>
+											<em className={`fas fa-${data.role === "PT" ? "graduation-cap" : "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">
-														<strong>{data.role}</strong>
-														<br />
-														{data.description}
-													</p>
-												</div>
-												{data.data.files ? (
-													<>
-														<p className="text-muted my-2">Dokumen</p>
-														{data.data.files.map((e) => (
-															<div className="media bb p-2">
-																<div className="media-body">
-																	<p className="m-0">
-																		<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
-																			<strong>{e.name}</strong>
-																		</a>
-																	</p>
+										<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${data.role === "PT" ? "/univ-avatar.png" : data.role === "UMUM" ? "/user/user.png" : "/logo-single.png"}`}
+															alt="Avatar"
+														/>
+														<p className="m-0">
+															<strong>{data.role_name}</strong>
+															<br />
+															{data.description}
+															<br />
+															<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
+														</p>
+													</div>
+													{(!noFile || data.for_public) && data.data.files && (
+														<>
+															<p className="text-muted my-2">Dokumen</p>
+															{data.data.files.map((e) => (
+																<div className="media bb p-2">
+																	<div className="media-body">
+																		<p className="m-0">
+																			<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+																				<strong>{e.name}</strong>
+																			</a>
+																		</p>
+																	</div>
 																</div>
-															</div>
-														))}
-													</>
-												) : (
-													""
-												)}
+															))}
+														</>
+													)}
+												</div>
 											</div>
 										</div>
-									</div>
-								</li>
-							</>
-						))}
-				</>
-			))}
+									</li>
+								</>
+							))}
+					</>
+				))}
 
 			<li className="timeline-end">
 				<a className="timeline-badge">

components/PT/CabutSanksi/TableSanksiJawaban.js

@@ -0,0 +1,55 @@
+import moment from "moment";
+import { Button, Table } from "reactstrap";
+import Link from "next/link";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Table className="table w-100">
+					<thead>
+						<tr>
+							<th>Nomor Sanksi</th>
+							<th>Keterangan Sanksi</th>
+							<th>Created</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{listData.map((data) => {
+							return (
+								<tr key={data._id}>
+									<td>{data.sanksi.no_sanksi}</td>
+									<td className="text-nowrap">
+										<div className="media align-items-center">
+											{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
+											<div className="media-body d-flex">
+												<div>
+													<h4 className="m-0">Universitas Satyagama</h4>
+													{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
+													<p>{data.sanksi.description}</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>{moment(data.sanksi.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.sanksi.cabut_sanksi?.jawaban ? (
+											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
+												<Button color="primary">{linkName}</Button>
+											</Link>
+										) : (
+											<div className="badge-info badge">Menunggu Jawaban</div>
+										)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</Table>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/PT/DocPerbaikan/Riwayat.js

@@ -3,7 +3,6 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 
 function Riwayat({ data }) {
-	console.log(data);
 	return (
 		<Card className="card-default">
 			<CardHeader>
@@ -15,14 +14,16 @@ function Riwayat({ data }) {
 						<thead>
 							<tr>
 								<th>Tanggal</th>
+								<th>Ketarangan</th>
 								<th>Dokumen</th>
 							</tr>
 						</thead>
 						<tbody>
-							{data.length
+							{data && data.length
 								? data.map((value) => (
 										<tr>
 											<td>{moment(value.createAt).format("DD MMMM YYYY")}</td>
+											<td>{value.description}</td>
 											<td>
 												{value.files.map((e) => (
 													<>

components/PT/JawabanBanding/TableSanksiJawaban.js

@@ -0,0 +1,55 @@
+import moment from "moment";
+import { Button, Table } from "reactstrap";
+import Link from "next/link";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Table className="table w-100">
+					<thead>
+						<tr>
+							<th>Nomor Sanksi</th>
+							<th>Keterangan Sanksi</th>
+							<th>Created</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{listData.map((data) => {
+							return (
+								<tr key={data._id}>
+									<td>{data.sanksi.no_sanksi}</td>
+									<td className="text-nowrap">
+										<div className="media align-items-center">
+											{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
+											<div className="media-body d-flex">
+												<div>
+													<h4 className="m-0">Universitas Satyagama</h4>
+													{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
+													<p>{data.sanksi.description}</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>{moment(data.sanksi.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.sanksi.banding?.jawaban ? (
+											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
+												<Button color="primary">{linkName}</Button>
+											</Link>
+										) : (
+											<div className="badge-info badge">Menunggu Jawaban</div>
+										)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</Table>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -3,6 +3,7 @@ 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";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -66,14 +67,15 @@ export class ModalPermohonan extends Component {
 
 	onSubmit = async (e) => {
 		e.preventDefault();
-		const { noSanksi } = this.props.query;
+		const { user, query } = this.props;
+		const { noSanksi } = query;
 		const formdata = new FormData();
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
 
-			const added = await addBanding({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			const added = await addBanding({ noSanksi, ptId: user.peran[0].organisasi.id }, formdata);
 
 			if (added) {
 				Router.push({
@@ -151,4 +153,5 @@ export class ModalPermohonan extends Component {
 	}
 }
 
-export default ModalPermohonan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(ModalPermohonan);

components/PT/JawabanKeberatan/TableSanksiJawaban.js

@@ -0,0 +1,55 @@
+import moment from "moment";
+import { Button, Table } from "reactstrap";
+import Link from "next/link";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Table className="table w-100">
+					<thead>
+						<tr>
+							<th>Nomor Sanksi</th>
+							<th>Keterangan Sanksi</th>
+							<th>Created</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{listData.map((data) => {
+							return (
+								<tr key={data._id}>
+									<td>{data.sanksi.no_sanksi}</td>
+									<td className="text-nowrap">
+										<div className="media align-items-center">
+											{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
+											<div className="media-body d-flex">
+												<div>
+													<h4 className="m-0">Universitas Satyagama</h4>
+													{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
+													<p>{data.sanksi.description}</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>{moment(data.sanksi.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.sanksi.keberatan?.jawaban ? (
+											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
+												<Button color="primary">{linkName}</Button>
+											</Link>
+										) : (
+											<div className="badge-info badge">Menunggu Jawaban</div>
+										)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</Table>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/PT/JawabanPencabutanSanksi/TableSanksiJawaban.js

@@ -0,0 +1,55 @@
+import moment from "moment";
+import { Button, Table } from "reactstrap";
+import Link from "next/link";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Table className="table w-100">
+					<thead>
+						<tr>
+							<th>Nomor Sanksi</th>
+							<th>Keterangan Sanksi</th>
+							<th>Created</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{listData.map((data) => {
+							return (
+								<tr key={data._id}>
+									<td>{data.sanksi.no_sanksi}</td>
+									<td className="text-nowrap">
+										<div className="media align-items-center">
+											{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
+											<div className="media-body d-flex">
+												<div>
+													<h4 className="m-0">Universitas Satyagama</h4>
+													{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
+													<p>{data.sanksi.description}</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>{moment(data.sanksi.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.sanksi.cabut_sanksi?.jawaban ? (
+											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
+												<Button color="primary">{linkName}</Button>
+											</Link>
+										) : (
+											<div className="badge-info badge">Menunggu Jawaban</div>
+										)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</Table>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/PT/Keberatan/ModalPermohonan.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import Router from "next/router";
 import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { addKeberatan } from "@/actions/keberatan";
-import { addDocPerbaikan } from "@/actions/docPerbaikan";
+import { connect } from "react-redux";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -66,14 +66,15 @@ export class ModalPermohonan extends Component {
 
 	onSubmit = async (e) => {
 		e.preventDefault();
-		const { noSanksi } = this.props.query;
+		const { user, query } = this.props;
+		const { noSanksi } = query;
 		const formdata = new FormData();
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
 
-			const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			const added = await addKeberatan({ noSanksi, ptId: user.peran[0].organisasi.id }, formdata);
 			// formdata.append("keberatan", added.add.sanksi.keberatan._id);
 			// formdata.append("data", added.add.sanksi.keberatan._id);
 			// formdata.append("model", "Keberatan");
@@ -155,4 +156,5 @@ export class ModalPermohonan extends Component {
 	}
 }
 
-export default ModalPermohonan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(ModalPermohonan);

components/PT/TableSanksi.js

@@ -12,7 +12,7 @@ function TableSanksi({ listData, to, linkName }) {
 							<th>Nomor Sanksi</th>
 							<th>Keterangan Sanksi</th>
 							<th>Created</th>
-							<th></th>
+							<th>Status</th>
 						</tr>
 					</thead>
 					<tbody>

components/PT/TableSanksiJawaban.js

@@ -0,0 +1,55 @@
+import moment from "moment";
+import { Button, Table } from "reactstrap";
+import Link from "next/link";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Table className="table w-100">
+					<thead>
+						<tr>
+							<th>Nomor Sanksi</th>
+							<th>Keterangan Sanksi</th>
+							<th>Created</th>
+							<th>Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						{listData.map((data) => {
+							return (
+								<tr key={data._id}>
+									<td>{data.sanksi.no_sanksi}</td>
+									<td className="text-nowrap">
+										<div className="media align-items-center">
+											{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
+											<div className="media-body d-flex">
+												<div>
+													<h4 className="m-0">Universitas Satyagama</h4>
+													{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
+													<p>{data.sanksi.description}</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>{moment(data.sanksi.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.sanksi.keberatan?.jawaban || data.sanksi.banding?.jawaban || data.sanksi.cabut_sanksi?.jawaban ? (
+											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
+												<Button color="primary">{linkName}</Button>
+											</Link>
+										) : (
+											<div className="badge-info badge">Menunggu Jawaban</div>
+										)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</Table>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/PT/Timeline.js

@@ -4,7 +4,7 @@ function Timeline({ data, dataPelaporan }) {
 	const jadwal = dataPelaporan;
 	const date = [...new Set(data.data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
 	return (
-		<ul className="timeline">
+		<ul className="timeline-alt">
 			{date.map((value) => (
 				<>
 					<li className="timeline-separator" data-datetime={value}></li>
@@ -13,20 +13,22 @@ function Timeline({ data, dataPelaporan }) {
 						.map((data, i) => (
 							<>
 								<li className={data.role === "PT" ? "timeline-inverted" : ""}>
-									<div className="timeline-badge info">
-										<em className="far fa-file"></em>
+									<div className={`timeline-badge ${data.role === "PT" ? " danger" : "info"}`}>
+										<em className={`fas fa-${data.role === "PT" ? "graduation-cap" : "file"}`}></em>
 									</div>
 
 									<div className="timeline-card">
-										<div className="popover right">
+										<div className={`popover ${data.role === "PT" ? "right" : "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" />
+													<img className="mr-3 rounded-circle thumb48" src={`/static/img${data.role === "PT" ? "/univ-avatar.png" : "/logo-single.png"}`} alt="Avatar" />
 													<p className="m-0">
-														<strong>{data.role}</strong>
+														<strong>{ data.role_name}</strong>
 														<br />
 														{data.description}
+														<br />
+														<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
 													</p>
 												</div>
 												{data.data.files ? (

components/Pelaporan/InputData.js

@@ -4,6 +4,7 @@ import { getPelanggaran } from "@/actions/pelanggaran";
 import { createPelaporan } from "@/actions/pelaporan";
 import Select from "react-select";
 import { Row, Col, FormGroup, Input } from "reactstrap";
+import { connect } from "react-redux";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -95,11 +96,14 @@ export class InputData extends Component {
 	};
 
 	onSubmit = async (e) => {
+		const { user } = this.props;
 		e.preventDefault();
 		const formdata = new FormData();
 		formdata.append("number", this.state.pelaporanNumber);
+		formdata.append("user_id", user._id);
 		formdata.append("pt_id", this.props.query.ptId);
 		formdata.append("description", this.state.keteranganLaporan);
+		formdata.append("is_public", false);
 		formdata.append("pelanggaran", this.state.selectedOptionMulti.map((e) => e.value).join());
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {
@@ -109,6 +113,7 @@ export class InputData extends Component {
 
 		const create = await createPelaporan(formdata);
 		// console.log(create);
+		// console.log(create);
 		// await this.props.dispatch(createPelaporan(formdata));
 		// this.props.dispatch(listPelaporan());
 		if (create) {
@@ -183,4 +188,5 @@ export class InputData extends Component {
 	}
 }
 
-export default InputData;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(InputData);

components/Pemeriksaan/InputEvaluasi.js

@@ -156,7 +156,7 @@ export default class InputEvaluasi extends Component {
 					<FormGroup>
 						<div>
 							<button className="btn btn-sm btn-primary" type="submit">
-								Submit Evaluasi
+								Simpan Evaluasi
 							</button>
 						</div>
 					</FormGroup>

components/Pemeriksaan/TableRiwayat.js

@@ -6,20 +6,20 @@ function TableRiwayat({ data }) {
 			<table className="table table-striped my-4 w-100">
 				<thead>
 					<tr>
-                        <th>Tanggal Dibuat</th>
+						<th>Tanggal Dibuat</th>
 						<th>Tanggal Dokumen</th>
 						<th>Judul Dokumen</th>
 						<th>File Pendukung</th>
 					</tr>
 				</thead>
 				<tbody>
-					{data.penjadwalan.pemeriksaan.map((e) => (
-						<tr>
+					{data.penjadwalan.pemeriksaan.map((e, index) => (
+						<tr key={`riwayatPemeriksaan-${index}`}>
 							<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
 							<td>{moment(e.date).format("D MMMM YYYY")}</td>
 							<td>{e.title}</td>
 							<td>
-								{e.files.map((e) => (
+								{e.files.map((e, index) => (
 									<>
 										<em className="fa-lg far fa-file-code"></em>
 										<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>

components/PencabutanSanksi/TableSanksi.js

@@ -0,0 +1,67 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				{listData && (
+					<Datatable options={{ responsive: true }}>
+						<table className="table w-100">
+							<thead>
+								<tr>
+									<th>Nomor Sanksi</th>
+									<th>Keterangan Sanksi</th>
+									<th>Created</th>
+									<th>Status</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.length
+									? listData.map((data) => {
+											return (
+												<tr key={data._id}>
+													<td>{data.sanksi.no_sanksi}</td>
+													<td>
+														<div className="media align-items-center">
+															<div className="media-body d-flex">
+																<div>
+																	<h4 className="m-0">Universitas Satyagama</h4>
+																	<p>{data.sanksi.description}</p>
+																</div>
+															</div>
+														</div>
+													</td>
+													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+													<td>{data.sanksi.cabut_sanksi.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+													<td>
+														<div className="ml-auto">
+															<Link
+																href={{
+																	pathname: to,
+																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+																}}
+															>
+																<Button color="primary" size="sm">
+																	{linkName}
+																</Button>
+															</Link>
+														</div>
+													</td>
+												</tr>
+											);
+									  })
+									: ""}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/Penjadwalan/DetailLaporan.js

@@ -4,6 +4,11 @@ import Scrollable from "@/components/Common/Scrollable";
 import { addStatus } from "@/actions/pelaporan";
 import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
 
+const status = [
+	{ value: "Ditindaklanjuti Dikti Ristek", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
+	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
+	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
 const selectInstanceId = 1;
 export class DetailLaporan extends Component {
 	constructor(props) {
@@ -13,21 +18,26 @@ export class DetailLaporan extends Component {
 		};
 	}
 
-	componentDidMount = async () => {
-		this.setState({ selectedOption: { value: "ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" } });
-		// const tes = await addStatus({ number, ptId }, { status: data.status || "ditindaklanjuti" });
+	componentDidMount = () => {
+		const { data } = this.props;
+		if (data.status) {
+			const selectedOption = status.filter((e) => e.value === data.status)[0];
+			this.setState({ selectedOption });
+		} else {
+			this.setState({ selectedOption: { value: "Ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" } });
+			// const tes = await addStatus({ number, ptId }, { status: data.status || "ditindaklanjuti" });
+		}
 	};
 
 	handleChangeSelect = async (selectedOption) => {
 		const { ptId, number } = this.props.query;
 		this.props.handleChangeSelect(selectedOption);
 		this.setState({ selectedOption });
-		const tes = await addStatus({ number, ptId }, { status: selectedOption.value });
+		await addStatus({ number, ptId }, { status: selectedOption.value });
 	};
 
 	render() {
 		const { data } = this.props;
-		console.log(data);
 		return (
 			<Card className="card b">
 				<CardHeader>
@@ -41,17 +51,7 @@ export class DetailLaporan extends Component {
 									<strong>Status</strong>
 								</td>
 								<td>
-									<Select
-										instanceId={selectInstanceId + 1}
-										value={this.state.selectedOption}
-										onChange={this.handleChangeSelect}
-										options={[
-											{ value: "ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
-											{ value: "delegasi ke lldikti", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
-											{ value: "ditutup", label: "Ditutup", className: "State-ACT" },
-										]}
-										required
-									/>
+									<Select instanceId={selectInstanceId + 1} value={this.state.selectedOption} onChange={this.handleChangeSelect} options={status} required />
 								</td>
 							</tr>
 							<tr>

components/Public/DetailLaporan.js

@@ -0,0 +1,86 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+
+function DetailLaporan({ data }) {
+	return (
+		<>
+			<p className="lead bb">Detail Laporan</p>
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Laporan:</Col>
+					<Col md="8">
+						<strong>{data._number}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi:</Col>
+					<Col md="8">
+						<strong>{data.pt.nama}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="125px" className="list-group">
+							<ul>
+								{data.pelanggaran.map((e) => (
+									<li>{e.pelanggaran}</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.description}</p>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				{data.status ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.status}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					""
+				)}
+				<FormGroup row>
+					<Col md="4">File Pendukung:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.files.map((e, index) => (
+										<tr key={`files-${index}`}>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailLaporan;

components/Sanksi/TableLaporan.js

@@ -7,54 +7,58 @@ function TableLaporan({ listData }) {
 	return (
 		<div className="card b">
 			<div className="card-body">
-				<Datatable options={{ responsive: true }}>
-					<table className="table w-100">
-						<thead>
-							<tr>
-								<th>#ID</th>
-								<th>Deskripsi Laporan</th>
-								<th>Status</th>
-								<th>Created</th>
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							{listData.map((data) => {
-								return (
-									<tr key={data._id}>
-										<td>{data._number}</td>
-										<td className="text-nowrap">
-											<div className="media align-items-center">
-												<div className="media-body d-flex">
-													<div>
-														<h4 className="m-0">Universitas Satyagama</h4>
-														<p>{data.description}</p>
+				{listData && (
+					<Datatable options={{ responsive: false }}>
+						<table className="table w-100">
+							<thead>
+								<tr>
+									<th>#ID</th>
+									<th>Deskripsi Laporan</th>
+									<th>Status</th>
+									<th>Created</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								{listData.map((data) => {
+									return (
+										<tr key={data._id}>
+											<td>{data._number}</td>
+											<td className="text-nowrap">
+												<div className="media align-items-center">
+													<div className="media-body d-flex">
+														<div>
+															<h4 className="m-0">{data.pt.nama}</h4>
+															<p>{data.description}</p>
+														</div>
 													</div>
 												</div>
-											</div>
-										</td>
-										<td>{data.status}</td>
-										<td>{moment(data.createdAt).fromNow()}</td>
-										<td>
-											<div className="ml-auto">
-												<Link
-													href={{
-														pathname: data.sanksi ? "/app/sanksi/detail" : "/app/sanksi/proses",
-														query: { ptId: data.pt_id, number: data._number },
-													}}
-												>
-													<Button color="primary" size="sm">
-														{data.sanksi ? "Detail" : "Proses Sanksi"}
-													</Button>
-												</Link>
-											</div>
-										</td>
-									</tr>
-								);
-							})}
-						</tbody>
-					</table>
-				</Datatable>
+											</td>
+											<td>
+												<div className="badge badge-info">{data.status}</div>
+											</td>
+											<td>{moment(data.createdAt).fromNow()}</td>
+											<td>
+												<div className="ml-auto">
+													<Link
+														href={{
+															pathname: data.sanksi ? "/app/sanksi/detail" : "/app/sanksi/proses",
+															query: { ptId: data.pt_id, number: data._number },
+														}}
+													>
+														<Button color="primary" size="sm">
+															{data.sanksi ? "Detail" : "Proses Sanksi"}
+														</Button>
+													</Link>
+												</div>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
 			</div>
 		</div>
 	);

config/axios.js

@@ -1,27 +1,41 @@
 import axios from "axios";
-import { refreshToken } from "@/actions/auth";
 // import jwt_decode from "jwt-decode";
 
-const axiosJWT = axios.create();
+const axiosAPI = axios.create({
+	baseURL: "http://localhost:5000",
+	withCredentials: true,
+});
 
-axiosJWT.interceptors.request.use(
-	async (config) => {
-		// const response = await refreshToken();
-		// const decoded = jwt_decode(response.access_token);
-		// const expire = decoded.exp;
-		// const currentDate = Date.now();
-		// if (expire * 1000 < currentDate) {
-		const response = await refreshToken();
-		config.headers = {
-			Authorization: `Bearer ${response.access_token}`,
-		};
-		config.withCredentials = true;
-		return config;
-		// }
-	},
-	(error) => {
-		return Promise.reject(error);
-	}
-);
+// axiosJWT.interceptors.request.use(
+// 	async (config) => {
+// 		// const response = await refreshToken();
+// 		// const decoded = jwt_decode(response.access_token);
+// 		// const expire = decoded.exp;
+// 		// const currentDate = Date.now();
+// 		// if (expire * 1000 < currentDate) {
+// 		const response = await refreshToken();
+// 		// console.log(response);
+// 		if (response.success) config.headers.Authorization = `Bearer ${response.access_token}`;
+// 		// config.withCredentials = true;
+// 		return config;
+// 		// }
+// 	},
+// 	async (error) => {
+// 		const originalConfig = err.config;
+// 		// if (error.response.status === 403 || error.response.status === 401) {
+// 		try {
+// 			const response = await refreshToken();
+// 			if (response.success) {
+// 				// axiosJWT.defaults.headers.Authorization = `Bearer ${response.access_token}`;
+// 				originalConfig.headers.Authorization = `Bearer ${response.access_token}`;
+// 				return axiosJWT(originalConfig);
+// 			}
+// 		} catch (error) {
+// 			return Promise.reject(error);
+// 		}
+// 		// }
+// 		return Promise.reject(error);
+// 	}
+// );
 
-export default axiosJWT;
+export default axiosAPI;

config/request.js

@@ -0,0 +1,68 @@
+import axiosAPI from "./axios";
+import { refreshToken } from "@/actions/auth";
+
+const handleRequest = async (request) => {
+	try {
+		return await request();
+	} catch (error) {
+		if (error?.response?.status === 401) {
+			try {
+				const token = await refreshToken();
+				if (token.success) {
+					axiosAPI.defaults.headers.Authorization = `Bearer ${token.access_token}`;
+					return await request();
+				}
+				return false;
+			} catch (error) {
+				console.log(error);
+				return false;
+			}
+		}
+		console.log(error);
+		return false;
+	}
+};
+
+export const get = async (url, config = null) => {
+	try {
+		const request = () => axiosAPI.get(url, config);
+		const res = await handleRequest(request);
+		return res;
+	} catch (error) {
+		console.log(error);
+		return false;
+	}
+};
+
+export const post = async (url, data, config = null) => {
+	try {
+		const request = () => axiosAPI.post(url, data, config);
+		const res = await handleRequest(request);
+		return res;
+	} catch (error) {
+		console.log(error);
+		return false;
+	}
+};
+
+export const put = async (url, data, config = null) => {
+	try {
+		const request = () => axiosAPI.put(url, data, config);
+		const res = await handleRequest(request);
+		return res;
+	} catch (error) {
+		console.log(error);
+		return false;
+	}
+};
+
+export const del = async (url, config = null) => {
+	try {
+		const request = () => axiosAPI.delete(url, config);
+		const res = await handleRequest(request);
+		return res;
+	} catch (error) {
+		console.log(error);
+		return false;
+	}
+};

next.config.js

@@ -4,48 +4,48 @@ const withSass = require("@zeit/next-sass");
 const withCss = require("@zeit/next-css");
 
 module.exports = withSass(
-    withCss({
-        // target: 'serverless',
-        webpack: config => {
-            // Fixes npm packages that depend on `fs` module
-            config.node = {
-                fs: "empty"
-            };
+	withCss({
+		target: "serverless",
+		webpack: (config) => {
+			// Fixes npm packages that depend on `fs` module
+			config.node = {
+				fs: "empty",
+			};
 
-            // Resolves alias to root folder
-            config.resolve.alias["@"] = __dirname;
+			// Resolves alias to root folder
+			config.resolve.alias["@"] = __dirname;
 
-            // Provide alias for plugins
-            config.plugins.push(
-                new webpack.ProvidePlugin({
-                    $: "jquery",
-                    jQuery: "jquery",
-                    "window.jQuery": "jquery",
-                    "window.moment": "moment",
-                    moment: "moment",
-                    Raphael: "raphael" // required by morris.js
-                })
-            );
+			// Provide alias for plugins
+			config.plugins.push(
+				new webpack.ProvidePlugin({
+					$: "jquery",
+					jQuery: "jquery",
+					"window.jQuery": "jquery",
+					"window.moment": "moment",
+					moment: "moment",
+					Raphael: "raphael", // required by morris.js
+				})
+			);
 
-            // Fix for flot resize
-            config.module.rules.push({
-                test: /jquery\.flot\.resize\.js$/,
-                use: ["imports-loader?this=>window"]
-            });
+			// Fix for flot resize
+			config.module.rules.push({
+				test: /jquery\.flot\.resize\.js$/,
+				use: ["imports-loader?this=>window"],
+			});
 
-            // Font face support
-            config.module.rules.push({
-                test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
-                use: {
-                    loader: "url-loader",
-                    options: {
-                        limit: 100000,
-                        name: "[name].[ext]"
-                    }
-                }
-            });
+			// Font face support
+			config.module.rules.push({
+				test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
+				use: {
+					loader: "url-loader",
+					options: {
+						limit: 100000,
+						name: "[name].[ext]",
+					},
+				},
+			});
 
-            return config;
-        }
-    })
+			return config;
+		},
+	})
 );

package-lock.json

@@ -8813,6 +8813,15 @@
         }
       }
     },
+    "react-sticky": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/react-sticky/-/react-sticky-6.0.3.tgz",
+      "integrity": "sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==",
+      "requires": {
+        "prop-types": "^15.5.8",
+        "raf": "^3.3.0"
+      }
+    },
     "react-toastify": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-4.5.2.tgz",

package.json

@@ -88,6 +88,7 @@
 		"react-perfect-scrollbar": "1.5.8",
 		"react-redux": "^7.2.6",
 		"react-select": "^3.0.4",
+		"react-sticky": "^6.0.3",
 		"react-toastify": "4.5.2",
 		"react-transition-group": "4.2.2",
 		"reactstrap": "^8.0.1",

pages/404.js

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

pages/app/PT-ID.json

@@ -1,57 +0,0 @@
-[
-    {
-        "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-        "kode": "031031",
-        "kode_satker": null,
-        "nama": "Universitas Satyagama",
-        "nama_singkat": "USG",
-        "sk_pendirian": "0742/O/1990",
-        "tgl_sk_pendirian": "1990-12-22",
-        "sk_operasional": null,
-        "tgl_sk_operasional": null,
-        "status": "A",
-        "alamat": {
-            "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
-            "rt": null,
-            "rw": null,
-            "dusun": null,
-            "kelurahan": "-",
-            "kode_pos": "11730",
-            "kab_kota": {
-                "id": "016200",
-                "nama": "Kota Jakarta Barat"
-            }
-        },
-        "propinsi": {
-            "id": "010000",
-            "nama": "Prov. D.K.I. Jakarta"
-        },
-        "telepon": "(021) 5452377-78",
-        "faksimile": "(021) 54391325",
-        "website": "www.satyagama.ac.id",
-        "email": "info@satyagama.ac.id",
-        "status_milik": {
-            "id": "3",
-            "nama": "Yayasan"
-        },
-        "pembina": {
-            "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
-            "nama": "LLDIKTI III"
-        },
-        "bentuk_pendidikan": {
-            "id": "23",
-            "nama": "Universitas"
-        },
-        "last_update": "2021-12-08",
-        "negara": {
-            "id": "ID",
-            "nama": "Indonesia"
-        },
-        "pimpinan": {
-            "id": "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
-            "nama": "DEWI SULISTYANI",
-            "tmt_sk_pengangkatan": "2021-03-17",
-            "tst_sk_pengangkatan": "2025-03-17"
-        }
-    }
-]

pages/app/_middleware.js

@@ -1,8 +0,0 @@
-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/banding/detail.js

@@ -10,7 +10,8 @@ import Riwayat from "@/components/Banding/Riwayat";
 import { getSanksi } from "@/actions/sanksi";
 import { addJawabanBanding } from "@/actions/banding";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { getPT } from "@/actions/PT";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -32,14 +33,29 @@ class JawabanBanding extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
+			modal: false,
 			selectedOption: null,
 			files: [],
+			sanksi: {},
+			pt: {},
 		};
 	}
 
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const sanksi = await getSanksi(query);
-		return { sanksi, query };
+		const pt = await getPT({ id: query.ptId });
+		this.setState({ pt, sanksi });
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
 	};
 
 	handleChangeSelect = (selectedOption) => {
@@ -97,8 +113,7 @@ class JawabanBanding extends Component {
 	};
 
 	render() {
-		const { files } = this.state;
-		const { sanksi } = this.props;
+		const { files, sanksi, pt } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -108,7 +123,7 @@ class JawabanBanding extends Component {
 
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Jawaban Permohonan Banding</div>
@@ -124,8 +139,8 @@ class JawabanBanding extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-											<PermohonanPT data={sanksi.data[0].sanksi.banding} title="Permohonan Banding" />
+											{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}
+											{sanksi.data && sanksi.data.length && <PermohonanPT data={sanksi.data[0].sanksi.banding} title="Permohonan Banding" />}
 											<p className="lead bb">Jawaban</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 												<FormGroup>
@@ -170,7 +185,7 @@ class JawabanBanding extends Component {
 												</FormGroup>
 												<FormGroup>
 													<div className="row-xl-10">
-														<Button color="primary" onClick={this.handelSimpan} type="submit">
+														<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.banding.jawaban ? this.toggleModal : this.handelSimpan}>
 															Simpan
 														</Button>
 													</div>
@@ -181,16 +196,23 @@ class JawabanBanding extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl={3}>
-							<DetailPT />
-						</Col>
+						<Col xl={3}>{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0]} />
-						</Col>
+						<Col>{sanksi.data && sanksi.data.length && <Riwayat data={sanksi.data[0].sanksi.banding.jawaban} />}</Col>
 					</Row>
 				</div>
+				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
+					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.handelSimpan}>
+							Ya
+						</Button>{" "}
+						<Button color="secondary" onClick={this.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
 			</ContentWrapper>
 		);
 	}

pages/app/banding/index.js

@@ -2,21 +2,24 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
-import TableSanksi from "@/components/Main/TableSanksi";
+import TableSanksi from "@/components/Banding/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 
 class Banding extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
+	componentDidMount = async () => {
 		const sanksi = await getSanksi({ banding: true });
-		return { sanksi };
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Banding</div>

pages/app/calendar.js

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

pages/app/faq.js

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

pages/app/index.js

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Membuat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+	{
+		title: "Login",
+		path: "/login",
+	},
+];
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	render() {
+		return (
+			<div>
+				<Navbar color="info" expand="md" dark>
+					<NavbarBrand href="/">
+						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
+					</NavbarBrand>
+					<NavbarToggler onClick={this.toggleCollapse} />
+					<Collapse isOpen={this.state.isOpen} navbar>
+						<Nav className="ml-auto" navbar>
+							{menu.map((e) => (
+								<NavItem active={e.path === this.props.pathname ? true : false}>
+									<Link href={e.path}>
+										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+									</Link>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Row>
+						<Col lg={8} className="block-center d-block "></Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;

pages/app/keberatan/detail.js

@@ -10,7 +10,8 @@ import Riwayat from "@/components/Keberatan/Riwayat";
 import { getSanksi } from "@/actions/sanksi";
 import { addJawabanKeberatan } from "@/actions/keberatan";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { getPT } from "@/actions/PT";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -32,15 +33,30 @@ class DetailKeberatan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
+			modal: false,
 			selectedOption: null,
 			files: [],
 			keterangan: "",
+			sanksi: {},
+			pt: {},
 		};
 	}
 
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const sanksi = await getSanksi(query);
-		return { sanksi, query };
+		const pt = await getPT({ id: query.ptId });
+		this.setState({ pt, sanksi });
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
 	};
 
 	handleChangeSelect = (selectedOption) => {
@@ -88,19 +104,19 @@ class DetailKeberatan extends Component {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
+			const added = await addJawabanKeberatan({ noSanksi, ptId }, formdata);
+			if (added) {
+				Router.push({
+					pathname: "/app/keberatan",
+				});
+			}
 		}
 
-		const added = await addJawabanKeberatan({ noSanksi, ptId }, formdata);
-		if (added) {
-			Router.push({
-				pathname: "/app/keberatan",
-			});
-		}
+		
 	};
 
 	render() {
-		const { files } = this.state;
-		const { sanksi } = this.props;
+		const { files, sanksi, pt } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -110,7 +126,7 @@ class DetailKeberatan extends Component {
 
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Permohonan Keberatan</div>
@@ -125,14 +141,10 @@ class DetailKeberatan extends Component {
 							<Card className="card-default">
 								<CardBody>
 									<Row>
-										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-										</Col>
+										<Col lg={12}>{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}</Col>
 									</Row>
 									<Row>
-										<Col lg={12}>
-											<PermohonanPT data={sanksi.data[0].sanksi.keberatan} />
-										</Col>
+										<Col lg={12}>{sanksi.data && sanksi.data.length && <PermohonanPT data={sanksi.data[0].sanksi.keberatan} title="Permohonan Keberatan" />}</Col>
 									</Row>
 									<Row>
 										<Col lg={12}>
@@ -188,7 +200,7 @@ class DetailKeberatan extends Component {
 												</FormGroup>
 												{/* <FormGroup>
 													<div className="row-xl-10"> */}
-												<Button color="primary" onClick={this.handelSimpan} type="submit">
+												<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.keberatan.jawaban ? this.toggleModal : this.handelSimpan}>
 													Simpan
 												</Button>
 												{/* </div>
@@ -199,16 +211,23 @@ class DetailKeberatan extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0]} />
-						</Col>
+						<Col>{sanksi.data && sanksi.data.length && <Riwayat data={sanksi.data[0].sanksi.keberatan.jawaban} />}</Col>
 					</Row>
 				</div>
+				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
+					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.handelSimpan}>
+							Ya
+						</Button>{" "}
+						<Button color="secondary" onClick={this.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
 			</ContentWrapper>
 		);
 	}

pages/app/keberatan/index.js

@@ -2,21 +2,24 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
-import TableSanksi from "@/components/Main/TableSanksi";
+import TableSanksi from "@/components/Keberatan/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 
 class Keberatan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const sanksi = await getSanksi({keberatan: true});
-		return { sanksi };
+	componentDidMount = async () => {
+		const sanksi = await getSanksi({ keberatan: true });
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Keberatan</div>

pages/app/pelaporan/detail.js

@@ -8,16 +8,28 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody } from "reactstrap";
 
 class DetailPelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
-		return { query, pelaporan };
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Detail Pelaporan</div>
@@ -32,16 +44,12 @@ class DetailPelaporan extends Component {
 							<Card className="card-default">
 								<CardBody>
 									<Row>
-										<Col lg={12}>
-											<DetailLaporan data={pelaporan.data[0]} />
-										</Col>
+										<Col lg={12}>{pelaporan.data && <DetailLaporan data={pelaporan.data[0]} />}</Col>
 									</Row>
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{pelaporan.data && <DetailPT data={pelaporan.data[0].pt} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pelaporan/index.js

@@ -9,15 +9,20 @@ import TableLaporan from "@/components/Main/TableLaporan";
 class Pelaporan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			user: {
+				pelaporan: {},
+			},
+		};
 	}
 
-	static getInitialProps = async () => {
+	componentDidMount = async () => {
 		const pelaporan = await getPelaporan();
-		return { pelaporan };
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Pelaporan</div>
@@ -33,7 +38,7 @@ class Pelaporan extends Component {
 								</Link>
 							</div>
 						</div>
-						<TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" />
+						<TableLaporan listData={pelaporan?.data} to="/app/pelaporan/detail" linkName="Detail" />
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pelaporan/new.js

@@ -3,19 +3,34 @@ import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import InputData from "@/components/Pelaporan/InputData";
 import Link from "next/link";
+import { getPT } from "@/actions/PT";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 
 class PelaporanNew extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pt: {},
+		};
+	}
+
 	static getInitialProps = async ({ query }) => {
 		return { query };
 	};
 
+	componentDidMount = async () => {
+		const { query } = this.props;
+		const pt = await getPT({ id: query.ptId });
+		this.setState({ pt });
+	};
+
 	render() {
+		const { pt } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>
@@ -41,9 +56,7 @@ class PelaporanNew extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pelaporan/search.js

@@ -3,42 +3,31 @@ import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
 import Link from "next/link";
-
+import { getPT, getPembina } from "@/actions/PT";
 // React Slider
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
 // React Select
 import Select from "react-select";
 // DateTimePicker
-import Datetime from "react-datetime";
 import "react-datetime/css/react-datetime.css";
 
-import https from "https";
-
-import CardTool from "@/components/Common/CardTool";
-
-import dummyData from "../PT-ID.json";
-
 var pembina = [];
-
+const selectInstanceId = 1;
 class Search extends Component {
-	static async getInitialProps(ctx) {
-		pembina = [];
-		const httpsAgent = new https.Agent({
-			rejectUnauthorized: false,
-		});
-
-		const jsonPembina = [{ id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F", nama: "Badan Intelijen Negara", singkatan: "BIN" }];
-		var numrows = jsonPembina.length;
-
-		for (var i = 0; i < numrows; i++) {
-			pembina.push({ value: jsonPembina[i].id, label: jsonPembina[i].nama, className: "State-" + jsonPembina[i].singkatan });
-		}
-	}
-
 	state = {
 		selectedOptionMulti: [],
 		data: [],
+		pembina: [],
+	};
+
+	componentDidMount = async () => {
+		const dataPembina = await getPembina();
+		this.setState({ pembina: dataPembina.data });
+	};
+
+	optionsPembina = (pembina) => {
+		return pembina.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
 	};
 
 	handleChangeSelectMulti = (selectedOptionMulti) => {
@@ -66,73 +55,65 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
-		var qPembina = "";
-		if (this.state.selectedOptionMulti.value !== undefined) {
-			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
-		}
-
-		const searchValue = "q=" + document.getElementById("searchInput").value;
-
-		const httpsAgent = new https.Agent({
-			rejectUnauthorized: false,
-		});
-		const jsonData = dummyData;
-
-		this.setState({ data: jsonData });
-		console.log("jsonData : ", jsonData);
+		const pembina = this.state.selectedOptionMulti.join(",");
+		const searchValue = document.getElementById("searchInput").value;
+		const jsonData = await getPT({ search: searchValue, pembina });
+		this.setState({ data: jsonData.data });
 	};
 
 	handleApplyClick = () => {
-		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
 		this.fetchData();
-		if (this.state.data.length > 0) {
+		if (this.state.data && this.state.data.length) {
 			this.renderTableData();
 		}
 	};
 
 	handleSearchClick = () => {
 		this.fetchData();
-		if (this.state.data.length > 0) {
+		if (this.state.data.length) {
 			this.renderTableData();
 		}
 	};
 
 	renderTableData() {
-		return this.state.data.map((pt, index) => {
-			return (
-				<tr>
-					<td>
-						<label>{index + 1}</label>
-					</td>
-					<td>
-						<div className="media align-items-center">
-							<a className="mr-3" href="">
-								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-							</a>
-							<div className="media-body d-flex">
-								<div>
-									<h4 className="m-0">{pt.nama}</h4>
-									<small className="text-muted">
-										{pt.sk_pendirian} - {pt.website} - {pt.email}
-									</small>
-									<p>{pt.alamat.jalan}</p>
-								</div>
-								<div className="ml-auto">
-									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
-										Buat Laporan
-									</Button>
+		return (
+			this.state.data &&
+			this.state.data.map((pt, index) => {
+				return (
+					<tr>
+						<td>
+							<label>{index + 1}</label>
+						</td>
+						<td>
+							<div className="media align-items-center">
+								<a className="mr-3" href="">
+									<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+								</a>
+								<div className="media-body d-flex">
+									<div>
+										<h4 className="m-0">{pt.nama}</h4>
+										<small className="text-muted">
+											{pt.sk_pendirian} - {pt.website} - {pt.email}
+										</small>
+										<p>{pt.alamat.jalan}</p>
+									</div>
+									<div className="ml-auto">
+										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+											Buat Laporan
+										</Button>
+									</div>
 								</div>
 							</div>
-						</div>
-					</td>
-				</tr>
-			);
-		});
-		//}
+						</td>
+					</tr>
+				);
+			})
+		);
 	}
 
 	render() {
-		const { selectedOptionMulti } = this.state;
+		const { selectedOptionMulti, pembina } = this.state;
+		console.log(pembina);
 
 		return (
 			<ContentWrapper>
@@ -179,7 +160,7 @@ class Search extends Component {
 						<div className="form-group mb-4">
 							<label className="col-form-label mb-2">by Pembina</label>
 							<br />
-							<Select name="multi-select-name" isMulti simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina} />
+							<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

pages/app/pemantauan-perbaikan/detail.js

@@ -7,23 +7,33 @@ import Riwayat from "@/components/DocPerbaikan/Riwayat";
 import { getSanksi } from "@/actions/sanksi";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody } from "reactstrap";
+import { getPT } from "@/actions/PT";
 
 class PemantauanDokumen extends Component {
 	constructor(props) {
 		super(props);
-		this.state = {};
+		this.state = {
+			sanksi: {},
+			pt: {},
+		};
 	}
 
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const sanksi = await getSanksi(query);
-		return { sanksi, query };
+		const pt = await getPT({ id: query.ptId });
+		this.setState({ pt, sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi, pt } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Detail Pemantauan Perbaikan</div>
@@ -38,21 +48,15 @@ class PemantauanDokumen extends Component {
 							<Card className="card-default">
 								<CardBody>
 									<Row>
-										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-										</Col>
+										<Col lg={12}>{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}</Col>
 									</Row>
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />
-						</Col>
+						<Col>{sanksi.data && sanksi.data.length && <Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pemantauan-perbaikan/index.js

@@ -8,15 +8,18 @@ import { getSanksi } from "@/actions/sanksi";
 class PemantauanPerbaikan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
+	componentDidMount = async () => {
 		const sanksi = await getSanksi({ docPerbaikan: true });
-		return { sanksi };
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Pemantauan Perbaikan</div>

pages/app/pemantauan/index.js

@@ -3,6 +3,7 @@ import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
 // React Slider
+import { getPT, getPembina } from "@/actions/PT";
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
 // React Select
@@ -15,23 +16,25 @@ import https from "https";
 
 import CardTool from "@/components/Common/CardTool";
 
-import dummyData from "../PT-ID.json";
-
-var pembina = [];
+// import dummyData from "../PT-ID.json";
 
+const selectInstanceId = 1;
 class Search extends Component {
-	static async getInitialProps(ctx) {
-		pembina = [];
-		const httpsAgent = new https.Agent({
-			rejectUnauthorized: false,
-		});
-	}
-
 	state = {
+		pembina: [],
 		selectedOptionMulti: [],
 		data: [],
 	};
 
+	componentDidMount = async () => {
+		const dataPembina = await getPembina();
+		this.setState({ pembina: dataPembina.data });
+	};
+
+	optionsPembina = (pembina) => {
+		return pembina.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
+	};
+
 	handleChangeSelectMulti = (selectedOptionMulti) => {
 		this.setState({ selectedOptionMulti });
 	};
@@ -48,7 +51,6 @@ class Search extends Component {
 	};
 
 	handleClick = (e, PT_ID) => {
-		const query = { ptId: PT_ID };
 		e.preventDefault();
 		Router.push({
 			pathname: "/app/pemantauan/timeline",
@@ -57,77 +59,65 @@ class Search extends Component {
 	};
 
 	fetchData = async () => {
-		var qPembina = "";
-		console.log("this.state.selectedOptionMulti.value : ", this.state.selectedOptionMulti.value);
-		if (this.state.selectedOptionMulti.value !== undefined) {
-			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
-		}
-
-		const searchValue = "q=" + document.getElementById("searchInput").value;
-
-		const httpsAgent = new https.Agent({
-			rejectUnauthorized: false,
-		});
-
-		const jsonData = dummyData;
-
-		this.setState({ data: jsonData });
+		const pembina = this.state.selectedOptionMulti.join(",");
+		const searchValue = document.getElementById("searchInput").value;
+		const jsonData = await getPT({ search: searchValue, pembina });
+		this.setState({ data: jsonData.data });
 	};
 
 	handleApplyClick = () => {
-		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
 		this.fetchData();
-		if (this.state.data.length > 0) {
+		if (this.state.data && this.state.data.length) {
 			this.renderTableData();
 		}
 	};
 
 	handleSearchClick = () => {
 		this.fetchData();
-		if (this.state.data.length > 0) {
+		if (this.state.data && this.state.data.length) {
 			this.renderTableData();
 		}
 	};
 
 	renderTableData() {
-
-		return this.state.data.map((pt, index) => {
-			return (
-				<tr>
-					<td>
-						<label>{index + 1}</label>
-					</td>
-					<td>
-						<div className="media align-items-center">
-							<a className="mr-3" href="">
-								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-							</a>
-							<div className="media-body d-flex">
-								<div>
-									<h4 className="m-0">{pt.nama}</h4>
-									<small className="text-muted">
-										{pt.sk_pendirian} - {pt.website} - {pt.email}
-									</small>
-									<p>{pt.alamat.jalan}</p>
-								</div>
-								<div className="ml-auto">
-									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
-										View
-									</Button>
+		return (
+			this.state.data &&
+			this.state.data.map((pt, index) => {
+				return (
+					<tr>
+						<td>
+							<label>{index + 1}</label>
+						</td>
+						<td>
+							<div className="media align-items-center">
+								<a className="mr-3" href="">
+									<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+								</a>
+								<div className="media-body d-flex">
+									<div>
+										<h4 className="m-0">{pt.nama}</h4>
+										<small className="text-muted">
+											{pt.sk_pendirian} - {pt.website} - {pt.email}
+										</small>
+										<p>{pt.alamat.jalan}</p>
+									</div>
+									<div className="ml-auto">
+										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+											View
+										</Button>
+									</div>
 								</div>
 							</div>
-						</div>
-					</td>
-				</tr>
-			);
-		});
-		//}
+						</td>
+					</tr>
+				);
+			})
+		);
 	}
 
 	render() {
-		// used for react select
-		const { selectedOptionMulti } = this.state;
-
+		const { selectedOptionMulti, pembina } = this.state;
+		// console.log(pembina);
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -144,15 +134,12 @@ class Search extends Component {
 								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
 									Search
 								</button>
-								<div className="ml-auto">
-								</div>
+								<div className="ml-auto"></div>
 							</div>
 						</div>
 						{/* START card */}
 						<div className="card card-default">
-							<div className="card-header">
-								Search Results
-							</div>
+							<div className="card-header">Search Results</div>
 							{/* START table-responsive */}
 							<Table striped bordered hover>
 								<thead>
@@ -165,8 +152,7 @@ class Search extends Component {
 							</Table>
 							{/* END table-responsive */}
 							<div className="card-footer">
-								<div className="d-flex">
-								</div>
+								<div className="d-flex"></div>
 							</div>
 						</div>
 						{/* END card */}
@@ -176,7 +162,7 @@ class Search extends Component {
 						<div className="form-group mb-4">
 							<label className="col-form-label mb-2">by Pembina</label>
 							<br />
-							<Select name="multi-select-name" multi simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina} />
+							<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

pages/app/pemantauan/timeline.js

@@ -5,30 +5,50 @@ import DetailPT from "@/components/Main/DetailPT";
 import { getLog } from "@/actions/log";
 import { Row, Col } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
+import { getPT } from "@/actions/PT";
+import Link from "next/link";
 
 class Pemantauan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			pt: {},
+			log: {},
+		};
 	}
 
 	static async getInitialProps({ query }) {
-		const log = await getLog({ ptId: query.ptId });
-		return { log };
+		return { query };
 	}
 
+	componentDidMount = async () => {
+		const { query } = this.props;
+		const log = await getLog({ ptId: query.ptId });
+		this.setState({ log });
+		const pt = await getPT({ id: query.ptId });
+		this.setState({ pt });
+	};
+
 	render() {
-		const { log } = this.props;
+		const { pt, log } = this.state;
+
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
+					<div className="content-heading">
+						<div>Pemantauan {pt?.data && pt.data[0].nama}</div>
+						<div className="ml-auto">
+							<Link href="/app/pemantauan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
 					<Row>
 						<Col xl="9">
-							<Timeline data={log} />
-						</Col>
-						<Col xl="3">
-							<DetailPT />
+							<Timeline data={log.data} />
 						</Col>
+						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pemeriksaan/index.js

@@ -8,15 +8,18 @@ import TableLaporan from "@/components/Main/TableLaporan";
 class Pemeriksaan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			pelaporan: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan({ penjadwalan: true });
-		return { pelaporan };
+	componentDidMount = async () => {
+		const pelaporan = await getPelaporan({ penjadwalan: true, active: true });
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Evaluasi</div>
@@ -25,7 +28,7 @@ class Pemeriksaan extends Component {
 						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<TableLaporan listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Detail" status />
+						<TableLaporan listData={pelaporan?.data} to="/app/pemeriksaan/new" linkName="Evaluasi" status />
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pemeriksaan/new.js

@@ -10,20 +10,31 @@ import Link from "next/link";
 import { Row, Col, Card, CardBody, CardHeader, CardTitle } from "reactstrap";
 
 class PemeriksaanNew extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
-		return { query, pelaporan };
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan, query } = this.props;
-
+		const { query } = this.props;
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Evaluasi Laporan</div>
+						<div>Evaluasi Pemeriksaan</div>
 						<div className="ml-auto">
 							<Link href="/app/pemeriksaan">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
@@ -36,16 +47,14 @@ class PemeriksaanNew extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailLaporan data={pelaporan.data[0]} />
+											{pelaporan.data && pelaporan.data.length && <DetailLaporan data={pelaporan.data[0]} />}
 											<InputEvaluasi query={query} />
 										</Col>
 									</Row>
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{pelaporan.data && pelaporan.data.length && <DetailPT data={pelaporan.data[0].pt} />}</Col>
 					</Row>
 					<Row>
 						<Col>
@@ -53,9 +62,7 @@ class PemeriksaanNew extends Component {
 								<CardHeader>
 									<CardTitle>Riwayat Evaluasi</CardTitle>
 								</CardHeader>
-								<CardBody>
-									<TableRiwayat data={pelaporan.data[0]} />
-								</CardBody>
+								<CardBody>{pelaporan.data && pelaporan.data.length && <TableRiwayat data={pelaporan.data[0]} />}</CardBody>
 							</Card>
 						</Col>
 					</Row>

pages/app/pencabutan-sanksi/detail.js

@@ -10,7 +10,8 @@ import Riwayat from "@/components/PencabutanSanksi/Riwayat";
 import { getSanksi } from "@/actions/sanksi";
 import { addJawabanCabutSanksi } from "@/actions/cabutSanksi";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody, FormGroup, Button, Input } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Button, Input, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { getPT } from "@/actions/PT";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -35,12 +36,26 @@ class JawabanPencabutanSanksi extends Component {
 			selectedOption: null,
 			files: [],
 			keterangan: "",
+			sanksi: {},
+			pt: {},
 		};
 	}
 
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const sanksi = await getSanksi(query);
-		return { sanksi, query };
+		const pt = await getPT({ id: query.ptId });
+		this.setState({ pt, sanksi });
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
 	};
 
 	handleChangeSelect = (selectedOption) => {
@@ -92,20 +107,18 @@ class JawabanPencabutanSanksi extends Component {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
-		}
-
-		const added = await addJawabanCabutSanksi({ noSanksi, ptId }, formdata);
-		// console.log(added);
-		if (added) {
-			Router.push({
-				pathname: "/app/pencabutan-sanksi",
-			});
+			const added = await addJawabanCabutSanksi({ noSanksi, ptId }, formdata);
+			// console.log(added);
+			if (added) {
+				Router.push({
+					pathname: "/app/pencabutan-sanksi",
+				});
+			}
 		}
 	};
 
 	render() {
-		const { files, selectedOption } = this.state;
-		const { sanksi } = this.props;
+		const { files, selectedOption, sanksi, pt } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -115,7 +128,7 @@ class JawabanPencabutanSanksi extends Component {
 
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Jawaban Permohonan Pencabutan Sanksi</div>
@@ -131,8 +144,8 @@ class JawabanPencabutanSanksi extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-											<PermohonanPT data={sanksi.data[0].sanksi.cabut_sanksi} />
+											{sanksi.data && <DetailSanksi data={sanksi.data[0]} />}
+											{sanksi.data && <PermohonanPT data={sanksi.data[0].sanksi.cabut_sanksi} />}
 											<p className="lead bb">Jawaban</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 												<FormGroup>
@@ -188,7 +201,7 @@ class JawabanPencabutanSanksi extends Component {
 												</FormGroup>
 												<FormGroup>
 													<div className="row-xl-10">
-														<Button color="primary" onClick={this.handleSimpan} type="submit">
+														<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.cabut_sanksi.jawaban ? this.toggleModal : this.handelSimpan}>
 															Simpan
 														</Button>
 													</div>
@@ -199,16 +212,23 @@ class JawabanPencabutanSanksi extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{pt.data && <DetailPT data={pt.data[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0]} />
-						</Col>
+						<Col>{sanksi.data && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
+				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
+					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.handelSimpan}>
+							Ya
+						</Button>{" "}
+						<Button color="secondary" onClick={this.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
 			</ContentWrapper>
 		);
 	}

pages/app/pencabutan-sanksi/index.js

@@ -2,21 +2,24 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import CaseProgress from "@/components/Main/CaseProgress";
-import TableSanksi from "@/components/Main/TableSanksi";
+import TableSanksi from "@/components/PencabutanSanksi/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 
 class PencabutanSanksi extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
+	componentDidMount = async () => {
 		const sanksi = await getSanksi({ cabutSanksi: true });
-		return { sanksi };
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Permohonan Pencabutan Sanksi</div>

pages/app/penjadwalan/index.js

@@ -8,15 +8,18 @@ import TableLaporan from "@/components/Main/TableLaporan";
 class Penjadwalan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			pelaporan: {},
+		};
 	}
 
-	static getInitialProps = async () => {
+	componentDidMount = async () => {
 		const pelaporan = await getPelaporan();
-		return { pelaporan };
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Penjadwalan Evaluasi</div>
@@ -25,7 +28,7 @@ class Penjadwalan extends Component {
 						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" />
+						<TableLaporan listData={pelaporan?.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" />
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/projectdetails.js

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

pages/app/projects.js

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

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

@@ -8,7 +8,8 @@ import DetailPT from "@/components/Main/DetailPT";
 import DetailSanksi from "@/components/Main/DetailSanksi";
 import Riwayat from "@/components/PT/DocPerbaikan/Riwayat";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Button, Input } from "reactstrap";
+import { connect } from "react-redux";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -29,14 +30,19 @@ class DetailPerbaikanDoc extends Component {
 		super(props);
 		this.state = {
 			files: [],
+			sanksi: {},
+			keterangan: "",
 		};
 	}
 
-	static async getInitialProps({ query }) {
-		const { noSanksi } = query;
-		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { query, sanksi };
-	}
+	static getInitialProps = ({ query }) => ({ query });
+
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const { noSanksi } = this.props.query;
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
+		this.setState({ sanksi });
+	};
 
 	onDrop = (files) => {
 		this.setState({
@@ -70,8 +76,10 @@ class DetailPerbaikanDoc extends Component {
 
 	handleKirim = async (e) => {
 		e.preventDefault();
+		const { keterangan } = this.state;
 		const { noSanksi } = this.props.query;
 		const formdata = new FormData();
+		formdata.append("description", keterangan);
 		if (this.state.files.length > 0) {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
@@ -86,8 +94,7 @@ class DetailPerbaikanDoc extends Component {
 	};
 
 	render() {
-		const { files } = this.state;
-		const { sanksi } = this.props;
+		const { files, sanksi } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -97,7 +104,7 @@ class DetailPerbaikanDoc extends Component {
 
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Dokumen Perbaikan</div>
@@ -113,9 +120,16 @@ class DetailPerbaikanDoc extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
+											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
 											<p className="lead bb">Dokumen Perbaikan</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Keterangan:</label>
+													<div className="row-md-10">
+														<Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
+														{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+													</div>
+												</FormGroup>
 												<FormGroup>
 													<label className="row-form-label">Upload Dokumen:</label>
 													<div className="row-md-10">
@@ -153,13 +167,11 @@ class DetailPerbaikanDoc extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
 						<Col>
-							<Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />
+							<Riwayat data={sanksi?.data && sanksi.data[0].sanksi.doc_perbaikan} />
 						</Col>
 					</Row>
 				</div>
@@ -168,4 +180,5 @@ class DetailPerbaikanDoc extends Component {
 	}
 }
 
-export default DetailPerbaikanDoc;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(DetailPerbaikanDoc);

pages/app/pt/dokumen-perbaikan/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 Pelaporan 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">Dokumen Perbaikan</div>
 				<Row>
-					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/dokumen-perbaikan/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/dokumen-perbaikan/detail" linkName="Detail" /> : ""}</Col>
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default Pelaporan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Pelaporan);

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

@@ -7,38 +7,33 @@ import DetailSanksi from "@/components/Main/DetailSanksi";
 import DetailJawaban from "@/components/PT/JawabanBanding/DetailJawaban";
 import Link from "next/link";
 import { Row, Col, Card, CardBody, Button } from "reactstrap";
+import { connect } from "react-redux";
+import { withRouter } from "next/router";
 
 class JawabanBanding extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			modal: false,
+			sanksi: {},
 		};
 	}
 
-	static async getInitialProps({ query }) {
-		const { noSanksi } = query;
-		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { query, sanksi };
-	}
-
-	toggleModal = (value = true) => {
-		if (!value) {
-			this.setState({ modal: false });
-		} else {
-			this.setState({ modal: !this.state.modal });
-		}
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const { noSanksi } = this.props.router.query;
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
-
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
-						<div>Jawaban Atas Permohonan Keberatan</div>
+						<div>Jawaban Atas Permohonan Banding</div>
 						<div className="ml-auto">
 							<Link href="/app/pt/jawaban-banding">
 								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
@@ -51,16 +46,14 @@ class JawabanBanding extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-											<DetailJawaban data={sanksi.data[0]} />
+											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
+											{sanksi?.data && <DetailJawaban data={sanksi.data[0]} />}
 										</Col>
 									</Row>
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -68,4 +61,5 @@ class JawabanBanding extends Component {
 	}
 }
 
-export default JawabanBanding;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(withRouter(JawabanBanding));

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

@@ -2,29 +2,35 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
-import TableSanksi from "@/components/PT/TableSanksi";
-
+import TableSanksi from "@/components/PT/JawabanBanding/TableSanksiJawaban";
+import { connect } from "react-redux";
 class JawabanKeberatan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const sanksi = await getSanksi({ banding: true, jawaban: true, 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({ banding: true, ptId: org_id });
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Atas Permohonan Banding</div>
 				<Row>
-					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-banding/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-banding/detail" linkName="Detail" /> : ""}</Col>
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default JawabanKeberatan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(JawabanKeberatan);

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

@@ -9,20 +9,24 @@ import ModalPermohonan from "@/components/PT/JawabanKeberatan/ModalPermohonan";
 import Riwayat from "@/components/PT/JawabanKeberatan/Riwayat";
 import Link from "next/link";
 import { Row, Col, Card, CardBody, Button } from "reactstrap";
+import { connect } from "react-redux";
+import { withRouter } from "next/router";
 
 class JawabanKeberatan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			modal: false,
+			sanksi: {},
 		};
 	}
 
-	static async getInitialProps({ query }) {
-		const { noSanksi } = query;
-		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { query, sanksi };
-	}
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const { noSanksi } = this.props.router.query;
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
+		this.setState({ sanksi });
+	};
 
 	toggleModal = (value = true) => {
 		if (!value) {
@@ -33,12 +37,11 @@ class JawabanKeberatan extends Component {
 	};
 
 	render() {
-		const { sanksi } = this.props;
-
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.query} />
-				<Header />
+				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Jawaban Atas Permohonan Keberatan</div>
@@ -54,34 +57,31 @@ class JawabanKeberatan extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-											<DetailJawaban data={sanksi.data[0]} />
-											{new Date(sanksi.data[0].sanksi.close_banding).getTime() > Date.now() ? (
-												<>
-													<p>
-														Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat menekan tombol
-														di bawah ini paling lambat {moment(sanksi.data[0].sanksi.close_banding).format("DD MMMM YYYY")}
-													</p>
-													<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.banding || false}>
-														Ajukan Banding
-													</Button>
-												</>
-											) : (
-												<p>Pengajuan ditutup</p>
-											)}
+											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
+											{sanksi?.data && <DetailJawaban data={sanksi.data[0]} />}
+											{sanksi?.data &&
+												(new Date(sanksi.data[0].sanksi.close_banding).getTime() > Date.now() ? (
+													<>
+														<p>
+															Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat menekan
+															tombol di bawah ini paling lambat {moment(sanksi.data[0].sanksi.close_banding).format("DD MMMM YYYY")}
+														</p>
+														<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.banding || false}>
+															Ajukan Banding
+														</Button>
+													</>
+												) : (
+													<p>Pengajuan ditutup</p>
+												))}
 										</Col>
 									</Row>
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0]} />
-						</Col>
+						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -89,4 +89,5 @@ class JawabanKeberatan extends Component {
 	}
 }
 
-export default JawabanKeberatan;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(withRouter(JawabanKeberatan));

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

@@ -2,30 +2,36 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
-import TableSanksi from "@/components/PT/TableSanksi";
+import TableSanksi from "@/components/PT/JawabanKeberatan/TableSanksiJawaban";
+import { connect } from "react-redux";
 
 class JawabanKeberatan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const sanksi = await getSanksi({ keberatan: true, jawaban: true, 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({ keberatan: true, ptId: org_id });
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
-		console.log(sanksi);
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Atas Permohonan Keberatan</div>
 				<Row>
-					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-keberatan/detail" linkName="Detail" /> : ""} </Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-keberatan/detail" linkName="Detail" /> : ""} </Col>
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default JawabanKeberatan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(JawabanKeberatan);

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

@@ -7,20 +7,34 @@ import DetailSanksi from "@/components/Main/DetailSanksi";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Scrollable from "@/components/Common/Scrollable";
 import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
+import { connect } from "react-redux";
 
 class DetailJawabanPencabutanSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			sanksi: {},
+		};
+	}
+
 	static async getInitialProps({ query }) {
-		const { noSanksi } = query;
-		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { query, sanksi };
+		return { query };
 	}
 
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const { noSanksi } = this.props.query;
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
+		console.log(sanksi);
+		this.setState({ sanksi });
+	};
+
 	render() {
-		const { sanksi } = this.props;
-		const { jawaban } = sanksi.data[0].sanksi.cabut_sanksi;
+		const { sanksi } = this.state;
+		const { jawaban } = (sanksi.data && sanksi.data[0].sanksi.cabut_sanksi) || {};
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Jawaban Permohonan Pencabutan Sanksi</div>
@@ -36,19 +50,19 @@ class DetailJawabanPencabutanSanksi extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
+											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
 											<p className="lead bb">Jawaban Permohonan Pencabutan Sanksi</p>
 											<form className="form-horizontal">
 												<FormGroup>
 													<label md="4">Jawaban:</label>
 													<div md="8">
-														<h3>{jawaban.status}</h3>
+														<h3>{jawaban && jawaban.status}</h3>
 													</div>
 												</FormGroup>
 												<FormGroup>
 													<label md="4">Keterangan:</label>
 													<div md="8">
-														<p>{jawaban.description}</p>
+														<p>{jawaban && jawaban.description}</p>
 													</div>
 												</FormGroup>
 												<FormGroup>
@@ -57,18 +71,19 @@ class DetailJawabanPencabutanSanksi extends Component {
 														<Scrollable height="120px" className="list-group">
 															<table className="table table-bordered bg-transparent">
 																<tbody>
-																	{jawaban.files.map((e) => (
-																		<tr>
-																			<td>
-																				<em className="fa-lg far fa-file-code"></em>
-																			</td>
-																			<td>
-																				<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
-																					{e.name}
-																				</a>
-																			</td>
-																		</tr>
-																	))}
+																	{jawaban &&
+																		jawaban.files.map((e) => (
+																			<tr>
+																				<td>
+																					<em className="fa-lg far fa-file-code"></em>
+																				</td>
+																				<td>
+																					<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+																						{e.name}
+																					</a>
+																				</td>
+																			</tr>
+																		))}
 																</tbody>
 															</table>
 														</Scrollable>
@@ -80,9 +95,7 @@ class DetailJawabanPencabutanSanksi extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -90,4 +103,5 @@ class DetailJawabanPencabutanSanksi extends Component {
 	}
 }
 
-export default DetailJawabanPencabutanSanksi;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(DetailJawabanPencabutanSanksi);

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

@@ -2,29 +2,36 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col } from "reactstrap";
 import { getSanksi } from "@/actions/sanksi";
-import TableSanksi from "@/components/PT/TableSanksi";
+import TableSanksi from "@/components/PT/JawabanPencabutanSanksi/TableSanksiJawaban";
+import { connect } from "react-redux";
 
-class Pelaporan extends Component {
+class JawabanCabutSanksi extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			sanksi: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const sanksi = await getSanksi({ cabutSanksi: true, jawaban: true, 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({ cabutSanksi: true, ptId: org_id });
+		this.setState({ sanksi });
 	};
 
 	render() {
-		const { sanksi } = this.props;
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
 				<Row>
-					<Col lg={12}>{sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data && sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default Pelaporan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(JawabanCabutSanksi);

pages/app/pt/keberatan/detail.js

@@ -9,17 +9,20 @@ import ModalPermohonan from "@/components/PT/Keberatan/ModalPermohonan";
 import Link from "next/link";
 import moment from "moment";
 import { Row, Col, Card, CardBody, Button } from "reactstrap";
-
+import { connect } from "react-redux";
+import { withRouter } from "next/router";
 class Keberatan extends Component {
 	state = {
 		modal: false,
+		sanksi: {},
 	};
 
-	static async getInitialProps({ query }) {
-		const { noSanksi } = query;
-		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { query, sanksi };
-	}
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const { noSanksi } = this.props.router.query;
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
+		this.setState({ sanksi });
+	};
 
 	toggleModal = (value = true) => {
 		if (!value) {
@@ -30,12 +33,11 @@ class Keberatan extends Component {
 	};
 
 	render() {
-		const { sanksi } = this.props;
-		console.log(sanksi);
+		const { sanksi } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.query} />
-				<Header />
+				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Permohonan Keberatan</div>
@@ -51,33 +53,30 @@ class Keberatan extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
-											{new Date(sanksi.data[0].sanksi.close_keberatan).getTime() > Date.now() ? (
-												<>
-													<p>
-														Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini paling lambat{" "}
-														{moment(sanksi.data[0].sanksi.close_keberatan).format("DD MMMM YYYY")}
-													</p>
-													<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.keberatan || false}>
-														Ajukan Permohonan Keberatan
-													</Button>
-												</>
-											) : (
-												<p>Pengajuan ditutup</p>
-											)}
+											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
+											{sanksi?.data &&
+												(new Date(sanksi.data[0].sanksi.close_keberatan).getTime() > Date.now() ? (
+													<>
+														<p>
+															Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini paling lambat{" "}
+															{moment(sanksi.data[0].sanksi.close_keberatan).format("DD MMMM YYYY")}
+														</p>
+														<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.keberatan || false}>
+															Ajukan Permohonan Keberatan
+														</Button>
+													</>
+												) : (
+													<p>Pengajuan ditutup</p>
+												))}
 										</Col>
 									</Row>
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0]} />
-						</Col>
+						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -85,4 +84,5 @@ class Keberatan extends Component {
 	}
 }
 
-export default Keberatan;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(withRouter(Keberatan));

pages/app/pt/keberatan/index.js

@@ -3,28 +3,34 @@ 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 Keberatan 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 Keberatan</div>
 				<Row>
-					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/keberatan/detail" linkName="Detail" /> : ""}</Col>
+					<Col lg={12}>{sanksi.data?.length ? <TableSanksi listData={sanksi.data} to="/app/pt/keberatan/detail" linkName="Detail" /> : ""}</Col>
 				</Row>
 			</ContentWrapper>
 		);
 	}
 }
 
-export default Keberatan;
+const mapStateToProps = (state) => ({ user: state.user });
+export default connect(mapStateToProps)(Keberatan);

pages/app/pt/pemantauan.js

@@ -6,31 +6,33 @@ import { getLog } from "@/actions/log";
 import { getPelaporan } from "@/actions/pelaporan";
 import { Row, Col } from "reactstrap";
 import Timeline from "@/components/PT/Timeline";
+import { connect } from "react-redux";
 
 class Pemantauan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			log: [],
+			pelaporan: {},
+		};
 	}
 
-	static async getInitialProps({ query }) {
-		const log = await getLog({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		const pelaporan = await getPelaporan({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { log, pelaporan };
-	}
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const log = await getLog({ ptId: user.peran[0].organisasi.id, isPT: true });
+		const pelaporan = await getPelaporan({ ptId: user.peran[0].organisasi.id });
+		this.setState({ log, pelaporan });
+	};
 
 	render() {
-		const { log, pelaporan } = this.props;
+		const { log, pelaporan } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<Row>
-						<Col xl="9">
-							<Timeline data={log} dataPelaporan={pelaporan.data[0]} />
-						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="9">{log && pelaporan.data && <Timeline data={log} dataPelaporan={pelaporan.data[0]} />}</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -38,4 +40,5 @@ class Pemantauan extends Component {
 	}
 }
 
-export default Pemantauan;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(Pemantauan);

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

@@ -9,6 +9,7 @@ import Riwayat from "@/components/PT/CabutSanksi/Riwayat";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
 import { addCabutSanksi } from "@/actions/cabutSanksi";
+import { connect } from "react-redux";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -33,11 +34,16 @@ class DetailPencabutanSanksi extends Component {
 	}
 
 	static async getInitialProps({ query }) {
-		const { noSanksi } = query;
-		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
-		return { query, sanksi };
+		return { query };
 	}
 
+	componentDidMount = async () => {
+		const { user } = this.props;
+		const { noSanksi } = this.props.query;
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
+		this.setState({ sanksi });
+	};
+
 	onDrop = (files) => {
 		this.setState({
 			files: files.map((file) =>
@@ -86,8 +92,7 @@ class DetailPencabutanSanksi extends Component {
 	};
 
 	render() {
-		const { sanksi } = this.props;
-		const { files } = this.state;
+		const { files, sanksi } = this.state;
 
 		const thumbs = files.map((file, index) => (
 			<Col md={3} key={index}>
@@ -96,7 +101,7 @@ class DetailPencabutanSanksi extends Component {
 		));
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				<Header data={this.props.pt[0]} />
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Permohonan Pencabutan Sanksi</div>
@@ -112,7 +117,7 @@ class DetailPencabutanSanksi extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<DetailSanksi data={sanksi.data[0]} />
+											{sanksi?.data && <DetailSanksi data={sanksi.data[0]} />}
 											<p className="lead bb">Permohonan Pencabutan Sanksi</p>
 											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 												<FormGroup>
@@ -140,11 +145,13 @@ class DetailPencabutanSanksi extends Component {
 													</div>
 												</FormGroup>
 												<FormGroup>
-													<div className="row-xl-10">
-														<Button color="primary" onClick={this.handleKirim} disabled={sanksi.data[0].sanksi.cabut_sanksi || false} type="submit">
-															Kirim
-														</Button>
-													</div>
+													{sanksi?.data && (
+														<div className="row-xl-10">
+															<Button color="primary" onClick={this.handleKirim} disabled={sanksi.data[0].sanksi.cabut_sanksi || false} type="submit">
+																Kirim
+															</Button>
+														</div>
+													)}
 												</FormGroup>
 											</form>
 										</Col>
@@ -152,14 +159,10 @@ class DetailPencabutanSanksi extends Component {
 								</CardBody>
 							</Card>
 						</Col>
-						<Col xl="3">
-							<DetailPT />
-						</Col>
+						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>
-							<Riwayat data={sanksi.data[0]} />
-						</Col>
+						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -167,4 +170,5 @@ class DetailPencabutanSanksi extends Component {
 	}
 }
 
-export default DetailPencabutanSanksi;
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
+export default connect(mapStateToProps)(DetailPencabutanSanksi);

pages/app/sanksi/detail.js

@@ -16,11 +16,6 @@ const stepNavitemStyle = {
 class Detail extends Component {
 	constructor(props) {
 		super(props);
-		this.state = {
-			activeStep: "1",
-			checkedData: [],
-			dataUpload: null,
-		};
 	}
 
 	static getInitialProps = async ({ query }) => {
@@ -28,48 +23,11 @@ class Detail extends Component {
 		return { query, pelaporan };
 	};
 
-	done = async (e) => {
-		e.preventDefault();
-		const { ptId, number } = this.props.query;
-		const formdata = new FormData();
-		formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
-		formdata.append("description", this.state.dataUpload.keterangan);
-		formdata.append("pelanggaran", this.state.checkedData.map((e) => e._id).join());
-		if (this.state.dataUpload.files.length > 0) {
-			this.state.dataUpload.files.forEach((e) => {
-				formdata.append("files", e);
-			});
-		}
-		const create = await createSanksi({ ptId, number }, formdata);
-		// console.log(create);
-		if (create) {
-			Router.push({
-				pathname: "/app/sanksi",
-			});
-		}
-	};
-
-	toggleStep = (activeStep) => () => {
-		if (this.state.activeStep !== activeStep) {
-			this.setState({
-				activeStep,
-			});
-		}
-	};
-
-	setCheckedData = (data) => {
-		this.setState({ checkedData: data });
-	};
-
-	setUploadSuratSanksi = (data) => {
-		this.setState({ dataUpload: data });
-	};
-
 	render() {
 		const { pelaporan } = this.props;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Detail Sanksi</div>
@@ -82,35 +40,8 @@ class Detail extends Component {
 					<Card className="card-default">
 						<CardBody>
 							<Row>
-								<Col xs="4">
-									<Nav pills vertical={true}>
-										<NavItem style={stepNavitemStyle}>
-											<NavLink
-												tag="div"
-												className={classnames({
-													active: this.state.activeStep === "1",
-												})}
-												onClick={this.toggleStep("1")}
-											>
-												<h4 className="text-left my-3">1. Detail Sanksi</h4>
-											</NavLink>
-										</NavItem>
-									</Nav>
-								</Col>
-								<Col xs="8">
-									<TabContent activeTab={this.state.activeStep} className="border-0">
-										<TabPane tabId="1">
-											<div className="pt-3 mb-3">
-												<h2>Detail Sanksi</h2>
-												<Row>
-													<Col>
-														<DetailSanksi noTitle data={pelaporan.data[0]} />
-													</Col>
-												</Row>
-											</div>
-											<hr />
-										</TabPane>
-									</TabContent>
+								<Col>
+									<DetailSanksi data={pelaporan.data[0]} />
 								</Col>
 							</Row>
 						</CardBody>

pages/app/sanksi/index.js

@@ -8,15 +8,18 @@ import TableLaporan from "@/components/Sanksi/TableLaporan";
 class Sanksi extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			pelaporan: {},
+		};
 	}
 
-	static getInitialProps = async () => {
-		const pelaporan = await getPelaporan({ pemeriksaan: true });
-		return { pelaporan };
+	componentDidMount = async () => {
+		const pelaporan = await getPelaporan({ pemeriksaan: true, active: true });
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan } = this.props;
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Sanksi</div>
@@ -25,7 +28,7 @@ class Sanksi extends Component {
 						<CaseProgress />
 					</Col>
 					<Col lg="8">
-						<TableLaporan listData={pelaporan.data} />
+						<TableLaporan listData={pelaporan?.data} />
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/sanksi/proses.js

@@ -26,12 +26,18 @@ class ProsesSanksi extends Component {
 			activeStep: "1",
 			dataUpload: null,
 			dataPelanggaran: {},
+			pelaporan: null,
 		};
 	}
 
 	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
 		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
-		return { query, pelaporan };
+		this.setState({ pelaporan });
 	};
 
 	done = async (e) => {
@@ -73,11 +79,10 @@ class ProsesSanksi extends Component {
 	};
 
 	render() {
-		const { pelaporan } = this.props;
-		const { dataUpload, dataPelanggaran } = this.state;
+		const { dataUpload, dataPelanggaran, pelaporan } = this.state;
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Penetapan Sanksi</div>
@@ -154,7 +159,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="1">
 											<div className="pt-3 mb-3">
 												<h2>Detail Laporan</h2>
-												<DetailLaporan noTitle data={pelaporan.data[0]} />
+												{pelaporan?.data && <DetailLaporan noTitle data={pelaporan.data[0]} />}
 											</div>
 											<hr />
 											<div className="d-flex">
@@ -167,9 +172,7 @@ class ProsesSanksi extends Component {
 											<div className="pt-3 mb-3">
 												<h2>Hasil Evaluasi</h2>
 												<Card className="card-default">
-													<CardBody>
-														<TableRiwayat data={pelaporan.data[0]} />
-													</CardBody>
+													<CardBody>{pelaporan?.data && <TableRiwayat data={pelaporan.data[0]} />}</CardBody>
 												</Card>
 											</div>
 											<hr />
@@ -215,7 +218,7 @@ class ProsesSanksi extends Component {
 										<TabPane tabId="5">
 											<div className="pt-3 mb-3">
 												<h2>Ringkasan</h2>
-												<Ringkasan dataLaporan={pelaporan.data[0]} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} />
+												{pelaporan?.data && <Ringkasan dataLaporan={pelaporan.data[0]} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} />}
 											</div>
 											<hr />
 											<div className="d-flex">

pages/app/timeline.dikti.bak

@@ -1,186 +0,0 @@
-                <div className="p-3">
-                    <Row>
-                        <Col xl="9">
-                            <ul className="timeline">
-                                <li className="timeline-separator" data-datetime="Today"></li>
-                                <li className="timeline-inverted">
-                                    <div className="timeline-badge info">
-                                        <em className="far fa-file"></em>
-                                    </div>
-                                    <div className="timeline-card">
-                                        <div className="popover right">
-                                            <div className="arrow"></div>
-                                            <div className="popover-body">
-                                                <div className="d-flex align-items-center mb-3">
-                                                    <img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar"/>
-                                                    <p className="m-0">
-                                                        {/* <a className="text-muted" href=""> */}
-                                                            <strong>Admin</strong>
-                                                        {/* </a> */}
-                                                        <br/>Upload Bukti Perbaikan 
-                                                        {/* <em className="fa fa-paperclip"></em> */}
-                                                        <Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
-                                                            {/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
-                                                                {/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
-                                                                <DropdownToggle caret color="link">
-                                                                    <em className="fa fa-paperclip"></em>
-                                                                </DropdownToggle>
-                                                                <DropdownMenu className="animated fadeInUpShort">
-                                                                    <DropdownItem>
-                                                                        <em className="fa fa-lock mr-2"></em>Upload
-                                                                    </DropdownItem>
-                                                                </DropdownMenu>
-                                                            </Dropdown>
-                                                        </p> 
-                                                        {/* <li> */}
-
-
-                                                        {/* </li> */}
-                                                </div>
-                                                {/* <a href="">
-                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
-                                                </a> */}
-                                                <p className="text-muted my-2">3 Logs</p>
-                                                <div className="media bb p-2">
-                                                    <img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar"/>
-                                                    <div className="media-body">
-                                                        <p className="m-0">
-                                                            <a href="">
-                                                                <strong>Universitas Username</strong>
-                                                            </a>
-                                                        </p>
-                                                        <div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
-                                                    </div>
-                                                    <small className="ml-auto text-muted">12m ago</small>
-                                                </div>
-                                                <div className="media bb p-2">
-                                                    <img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar"/>
-                                                    <div className="media-body">
-                                                        <p className="m-0">
-                                                            <a href="">
-                                                                <strong>Universitas Username</strong>
-                                                            </a>
-                                                        </p>
-                                                        <div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
-                                                    </div>
-                                                    <small className="ml-auto text-muted">30m ago</small>
-                                                </div>
-                                                <div className="media bb p-2">
-                                                    <img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar"/>
-                                                    <div className="media-body">
-                                                        <p className="m-0">
-                                                            <a href="">
-                                                                <strong>Universitas Username</strong>
-                                                            </a>
-                                                        </p>
-                                                        <div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
-                                                    </div>
-                                                    <small className="ml-auto text-muted">30m ago</small>
-                                                </div>
-                                                {/* <form className="mt-2" method="post" action="#">
-                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
-                                                </form> */}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div className="timeline-badge danger">
-                                        <em className="fas fa-ticket-alt"></em>
-                                    </div>
-                                    <div className="timeline-card">
-                                        <div className="popover left">
-                                            <div className="arrow"></div>
-                                            <div className="popover-body">
-                                                <div className="d-flex align-items-center mb-3">
-                                                    <img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar"/>
-                                                    <p className="m-0">
-                                                        {/* <a className="text-muted" href=""> */}
-                                                            <strong>Admin</strong>
-                                                        {/* </a> */}
-                                                        <br/>opened project
-                                                        <a className="ml-2" href="">#548795</a>
-                                                    </p>
-                                                </div>
-                                                <p>
-                                                    <em>&mdash; Project description sample</em>
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li className="timeline-end">
-                                    <a className="timeline-badge">
-                                        <em className="fa fa-plus"></em>
-                                    </a>
-                                </li>
-                            </ul>
-                        </Col>
-                        <Col xl="3">
-                            <div className="card card-default">
-                                <div className="card-body">
-                                    <div className="text-center">
-                                        <h3 className="mt-0">{this.props.data.nama}</h3>
-                                        <p>{this.props.data.sk_pendirian}</p>
-                                    </div>
-                                    <hr/>
-                                    <ul className="list-unstyled px-4">
-                                        <li>
-                                            <em className="fa fa-globe fa-fw mr-3"></em>{this.props.data.website}
-                                        </li>
-                                        <li>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-                                        </li>
-                                        {/* <li>
-                                            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status
-                                            
-                                                <DropdownToggle caret color="link">
-                                                </DropdownToggle>
-                                                <DropdownMenu className="animated fadeInUpShort">
-                                                    <DropdownItem>
-                                                        <em className="fa fa-lock mr-2"></em>Status Sample 1
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-lock-open mr-2"></em>Status Sample 2
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-low-vision mr-2"></em>Status Sample 3
-                                                    </DropdownItem>
-                                                </DropdownMenu>
-                                            </Dropdown>
-                                        </li> */}
-                                        {/* <li>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>
-                                            <div class="dropdown">
-                                                <button type="button" aria-haspopup="true" aria-expanded="false" class="btn btn-secondary">Status
-                                                </button>
-                                                <div tabindex="-1" role="menu" aria-hidden="true" class="animated bounceInDown dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Action</button><button type="button" tabindex="0" class="dropdown-item">Another action</button><button type="button" tabindex="0" class="dropdown-item active">Active Item</button><div tabindex="-1" class="dropdown-divider"></div><button type="button" tabindex="0" class="dropdown-item">Separated link</button></div>
-                                            </div>
-                                        </li> */}
-                                       {/* <li> */}
-                                        {/* <em className="fa fa-graduation-cap fa-fw mr-3"></em> */}
-                                                {/* <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                                <DropdownToggle caret color="link">
-                                                    <em className="fa fa-paperclip">Status</em>
-                                                </DropdownToggle>
-                                                <DropdownMenu className="animated fadeInUpShort">
-                                                    <DropdownItem>
-                                                        <em className="fa fa-download mr-2"></em>Download
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-share mr-2"></em>Send to
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-times mr-2"></em>Delete
-                                                    </DropdownItem>
-                                                </DropdownMenu>
-                                            </Dropdown> */}
-                                        {/* </li> */}
-                                    </ul>
-                                </div>
-                            </div>
-                            
-                        </Col>
-                    </Row>
-                </div>

pages/app/timeline.js

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

pages/app/userlist.js

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

pages/index.js

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