commit

actions/cabutSanksi.js

@@ -13,7 +13,7 @@ export const addCabutSanksi = async ({ noSanksi, ptId }, data) => {
 
 export const addJawabanCabutSanksi = async ({ noSanksi, ptId }, data) => {
 	try {
-		const res = await fetch(`/cabut-sanksi/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
+		const res = await post(`/cabut-sanksi/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, data);
 		console.log(res);
 		return res.data;
 	} catch (error) {

actions/pelaporan.js

@@ -3,13 +3,18 @@ import { get, post } from "../config/request";
 export const getPelaporan = async (query = {}) => {
 	try {
 		let url = "/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";
+		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 get(url);
 		return res.data;
 	} catch (error) {

actions/sanksi.js

@@ -25,8 +25,8 @@ 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 get(url);

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/Keberatan/TableSanksi.js

@@ -7,56 +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>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>
+				{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>
-													</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>
+													</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>
 	);

components/Layout/MenuPT.js

@@ -28,12 +28,6 @@ const MenuPT = [
 			},
 		],
 	},
-	{
-		name: "Dokumen Perbaikan",
-		path: "/app/pt/dokumen-perbaikan",
-		icon: "icon-notebook",
-		translate: "sidebar.nav.PT_DOKUMEN_PERBAIKAN",
-	},
 	{
 		name: "Pencabutan Sanksi",
 		icon: "icon-notebook",
@@ -49,6 +43,12 @@ const MenuPT = [
 			},
 		],
 	},
+	{
+		name: "Dokumen Perbaikan",
+		path: "/app/pt/dokumen-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_DOKUMEN_PERBAIKAN",
+	},
 ];
 
 export default MenuPT;

components/Layout/SidebarUserBlock.js

@@ -14,7 +14,7 @@ class SidebarUserBlock extends Component {
 	async componentDidMount() {
 		// const user = await getUser();
 		const user = this.props.user;
-		this.setState({ user: user, role: user.peran[0].peran });
+		this.setState({ user, role: user.peran[0].peran });
 	}
 
 	componentDidUpdate(oldProps) {
@@ -32,7 +32,7 @@ class SidebarUserBlock extends Component {
 						{/* User picture */}
 						<div className="user-block-picture">
 							<div className="user-block-status">
-								<img className="img-thumbnail rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/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>

components/Main/DetailPT.js

@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { getPT } from "@/actions/PT";
-import { useSelector } from "react-redux";
 
 function DetailPT({ data }) {
 	return (
@@ -9,6 +7,8 @@ function DetailPT({ data }) {
 				<div className="text-center">
 					<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">
@@ -16,9 +16,14 @@ function DetailPT({ data }) {
 						<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
-					</li> */}
+					<li>
+						<em className="fa fa-phone fa-fw mr-3"></em>
+						{data.telepon}
+					</li>
+					<li>
+						<em className="fa fa-at fa-fw mr-3"></em>
+						{data.email}
+					</li>
 				</ul>
 			</div>
 		</div>

components/Main/TableLaporan.js

@@ -7,60 +7,62 @@ 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: 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>
+														</div>
 													</div>
 												</div>
-											</div>
-										</td>
-										{status ? (
+											</td>
+											{status ? (
+												<td>
+													<div className="badge badge-info">{data.status}</div>
+												</td>
+											) : (
+												""
+											)}
+											<td>{moment(data.createdAt).fromNow()}</td>
 											<td>
-												<div className="badge badge-info">{data.status}</div>
+												<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>
-										) : (
-											""
-										)}
-										<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>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</Datatable>
+				)}
 			</div>
 		</div>
 	);

components/Main/TableSanksi.js

@@ -7,54 +7,56 @@ 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: 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>
+																</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>{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

@@ -3,7 +3,7 @@ import moment from "moment";
 function Timeline({ data }) {
 	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
 	return (
-		<ul className="timeline">
+		<ul className="timeline-alt">
 			{data &&
 				date.map((value) => (
 					<>
@@ -13,8 +13,8 @@ function Timeline({ data }) {
 							.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">
@@ -22,17 +22,19 @@ function Timeline({ data }) {
 												<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_name}</strong>
 															<br />
 															{data.description}
+															<br />
+															<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
 														</p>
 													</div>
-													{data.files && (
+													{data.data.files && (
 														<>
 															<p className="text-muted my-2">Dokumen</p>
-															{data.files.map((e) => (
+															{data.data.files.map((e) => (
 																<div className="media bb p-2">
 																	<div className="media-body">
 																		<p className="m-0">

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

@@ -75,7 +75,7 @@ export class ModalPermohonan extends Component {
 				formdata.append("files", e);
 			});
 
-			const added = await addBanding({ noSanksi, ptId: user.data.peran[0].organisasi.id }, formdata);
+			const added = await addBanding({ noSanksi, ptId: user.peran[0].organisasi.id }, formdata);
 
 			if (added) {
 				Router.push({

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/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>
@@ -12,21 +12,24 @@ function Timeline({ data, dataPelaporan }) {
 						.filter((e) => e.for_pt && moment(e.createdAt).format("DD MMMM YYYY") === value)
 						.map((data, i) => (
 							<>
+								{console.log(data)}
 								<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_name}</strong>
 														<br />
 														{data.description}
+														<br />
+														<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
 													</p>
 												</div>
 												{data.data.files ? (

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/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: 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>
+														</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>
 	);

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/app/banding/detail.js

@@ -11,6 +11,7 @@ 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 { getPT } from "@/actions/PT";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -34,12 +35,20 @@ class JawabanBanding extends Component {
 		this.state = {
 			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 });
 	};
 
 	handleChangeSelect = (selectedOption) => {
@@ -97,8 +106,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 +116,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 +132,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>
@@ -181,14 +189,10 @@ 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>
 			</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/keberatan/detail.js

@@ -37,6 +37,7 @@ class DetailKeberatan extends Component {
 			files: [],
 			keterangan: "",
 			sanksi: {},
+			pt: {},
 		};
 	}
 
@@ -117,7 +118,7 @@ class DetailKeberatan extends Component {
 
 		return (
 			<ContentWrapper unwrap>
-				<Header />
+				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
 						<div>Permohonan Keberatan</div>
@@ -135,7 +136,7 @@ class DetailKeberatan extends Component {
 										<Col lg={12}>{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}</Col>
 									</Row>
 									<Row>
-										<Col lg={12}>{sanksi.data && sanksi.data.length && <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}>

pages/app/keberatan/index.js

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

pages/app/pelaporan/index.js

@@ -10,18 +10,19 @@ class Pelaporan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			user: {},
+			user: {
+				pelaporan: {},
+			},
 		};
 	}
 
-	static getInitialProps = async () => {
+	componentDidMount = async () => {
 		const pelaporan = await getPelaporan();
-		return { pelaporan };
+		this.setState({ pelaporan });
 	};
 
 	render() {
-		const { pelaporan } = this.props;
-		console.log(this.state.user);
+		const { pelaporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">Pelaporan</div>
@@ -37,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/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/timeline.js

@@ -6,6 +6,7 @@ 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) {
@@ -33,8 +34,16 @@ class Pemantauan extends Component {
 
 		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.data} />

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="Detail" status />
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pencabutan-sanksi/detail.js

@@ -11,6 +11,7 @@ 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 { getPT } from "@/actions/PT";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -35,12 +36,20 @@ 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 });
 	};
 
 	handleChangeSelect = (selectedOption) => {
@@ -104,8 +113,7 @@ class JawabanPencabutanSanksi extends Component {
 	};
 
 	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 +123,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 +139,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>
@@ -199,14 +207,10 @@ 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>
 			</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/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}>
@@ -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

@@ -22,7 +22,7 @@ class JawabanBanding extends Component {
 	componentDidMount = async () => {
 		const { user } = this.props;
 		const { noSanksi } = this.props.router.query;
-		const sanksi = await getSanksi({ noSanksi, ptId: user.data.peran[0].organisasi.id });
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
 		this.setState({ sanksi });
 	};
 
@@ -33,7 +33,7 @@ class JawabanBanding extends Component {
 				<Header />
 				<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>
@@ -46,20 +46,14 @@ class JawabanBanding extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											{sanksi && sanksi.data && (
-												<>
-													<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>
@@ -67,5 +61,5 @@ class JawabanBanding extends Component {
 	}
 }
 
-const mapStateToProps = (state) => ({ user: state.user });
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
 export default connect(mapStateToProps)(withRouter(JawabanBanding));

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

@@ -2,7 +2,7 @@ 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/TableSanksiJawaban";
+import TableSanksi from "@/components/PT/JawabanBanding/TableSanksiJawaban";
 import { connect } from "react-redux";
 class JawabanKeberatan extends Component {
 	constructor(props) {

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

@@ -11,6 +11,7 @@ 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);
@@ -23,7 +24,7 @@ class JawabanKeberatan extends Component {
 	componentDidMount = async () => {
 		const { user } = this.props;
 		const { noSanksi } = this.props.router.query;
-		const sanksi = await getSanksi({ noSanksi, ptId: user.data.peran[0].organisasi.id });
+		const sanksi = await getSanksi({ noSanksi, ptId: user.peran[0].organisasi.id });
 		this.setState({ sanksi });
 	};
 
@@ -56,36 +57,31 @@ class JawabanKeberatan extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											{sanksi && sanksi.data && (
-												<>
-													<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>{sanksi && sanksi.data && <Riwayat data={sanksi.data[0]} />}</Col>
+						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>
@@ -93,5 +89,5 @@ class JawabanKeberatan extends Component {
 	}
 }
 
-const mapStateToProps = (state) => ({ user: state.user });
+const mapStateToProps = (state) => ({ user: state.user, pt: state.pt });
 export default connect(mapStateToProps)(withRouter(JawabanKeberatan));

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

@@ -2,7 +2,7 @@ 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/TableSanksiJawaban";
+import TableSanksi from "@/components/PT/JawabanKeberatan/TableSanksiJawaban";
 import { connect } from "react-redux";
 
 class JawabanKeberatan extends Component {

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

@@ -7,17 +7,31 @@ 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 />
@@ -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

@@ -34,7 +34,6 @@ class Keberatan extends Component {
 
 	render() {
 		const { sanksi } = this.state;
-		console.log(sanksi);
 		return (
 			<ContentWrapper unwrap>
 				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.router.query} />
@@ -54,24 +53,21 @@ class Keberatan extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											{sanksi && sanksi.data && (
-												<>
-													<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>
@@ -80,7 +76,7 @@ class Keberatan extends Component {
 						<Col xl="3">{this.props.pt && <DetailPT data={this.props.pt[0]} />}</Col>
 					</Row>
 					<Row>
-						<Col>{sanksi && sanksi.data && <Riwayat data={sanksi.data[0]} />}</Col>
+						<Col>{sanksi?.data && <Riwayat data={sanksi.data[0]} />}</Col>
 					</Row>
 				</div>
 			</ContentWrapper>

pages/app/pt/pemantauan.js

@@ -6,15 +6,13 @@ import { getLog } from "@/actions/log";
 import { getPelaporan } from "@/actions/pelaporan";
 import { Row, Col } from "reactstrap";
 import Timeline from "@/components/PT/Timeline";
-import { getUser } from "@/actions/auth";
-import { getPT } from "@/actions/PT";
 import { connect } from "react-redux";
 
 class Pemantauan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			log: [], 
+			log: [],
 			pelaporan: {},
 		};
 	}

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}>
@@ -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/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>