pemantauan dan revisi tombol next

pages/app/pelaporan/index.js

@@ -29,7 +29,9 @@ class Pelaporan extends Component {
 					Pelaporan
 					<div className="ml-auto"></div>
 					<Link href="/app/penjadwalan">
-						<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
+						<Button className="btn-header" color="info">
+							<h4>Penjadwalan &gt;</h4>
+						</Button>
 					</Link>
 				</div>
 				<Row>

pages/app/pemantauan/timeline.js

@@ -1,39 +1,54 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Header from "@/components/Main/Header";
-import DetailPT from "@/components/Main/DetailPT";
 import { getLog } from "@/actions/log";
-import { Row, Col } from "reactstrap";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
 import { getOnePT } from "@/actions/PT";
+import { connect } from "react-redux";
+import { getOneLaporan, getPelaporan } from "../../../actions/pelaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import Loader from "@/components/Common/Loader";
-import { connect } from "react-redux";
+import DetailPT from "@/components/Main/DetailPT";
+import moment from "moment";
+import Datatable from "@/components/Tables/Datatable";
+
 
 class Pemantauan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			pt: {},
 			log: {},
+			detailLaporanPt: {},
+			pelaporan: {},
+			pt: {},
 		};
 	}
 
+
 	static async getInitialProps({ query }) {
 		return { query };
 	}
 
 	componentDidMount = async () => {
 		const { query, token } = this.props;
-		const log = await getLog(token, query.ptId);
-		this.setState({ log });
-		const pt = await getOnePT(token, query.ptId);
-		this.setState({ pt });
+		const ptId = query.ptId
+		const pelaporan = await getPelaporan(token, { pt_id: ptId });
+		const pt = await getOnePT(token, ptId);
+		this.setState({ pelaporan, pt });
+
 	};
 
-	render() {
-		const { pt, log } = this.state;
+	handleLihatPemantaun = async (e, id_laporan) => {
+		const { token } = this.props;
+		const log = await getLog(token, id_laporan)
+		const detailLaporanPt = await getOneLaporan(token, id_laporan)
+		this.setState({ detailLaporanPt, log });
+	}
 
+	render() {
+		const { detailLaporanPt, log, pt, pelaporan } = this.state;
+		console.log(pelaporan)
 		return (
 			<ContentWrapper unwrap>
 				<div className="p-3">
@@ -46,14 +61,96 @@ class Pemantauan extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">{log?.data ? <Timeline data={log.data} /> : <Loader />}</Col>
-						<Col xl="3">{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
+						<Col xl={9}>
+							<div className="card b">
+								<div className="card-body">
+									{pelaporan.data?.length ? (
+										<Datatable options={{ responsive: false }}>
+											<table className="table w-100">
+												<thead>
+													<tr>
+														<th>Tanggal</th>
+														<th>No.Laporan</th>
+														<th>Deskripsi Laporan</th>
+														<th>Pelapor</th>
+														<th>Aksi</th>
+													</tr>
+												</thead>
+												<tbody>
+													{pelaporan.data.map((data) => {
+														return (
+															<tr key={data._id}>
+																<td>{moment(data.createdAt).format("DD/MM/YYYY")}</td>
+																<td>{data.no_laporan}</td>
+
+																<td className="text-nowrap">
+																	<div className="media align-items-center">
+																		<div className="media-body d-flex">
+																			<div>
+																				<p>{data.keterangan.length > 35 ? data.keterangan.substring(0, 35) + "..." : data.keterangan}</p>
+																			</div>
+																		</div>
+																	</div>
+																</td>
+
+																<td>{data.user.isPrivate ? "" : data.user.nama}</td>
+
+																<td>
+																	<div>
+
+																		<Button color="info" onClick={async (e) => {
+																			const { token } = this.props;
+																			const log = await getLog(token, data._id)
+																			const detailLaporanPt = await getOneLaporan(token, data._id)
+																			this.setState({ detailLaporanPt, log });
+																		}}>
+																			Detail
+																		</Button>
+
+																	</div>
+																</td>
+															</tr>
+														);
+													})}
+												</tbody>
+											</table>
+										</Datatable>
+									) : pelaporan.data ? "Pelaporan tidak ada" : <Loader />}
+								</div >
+							</div >
+						</Col>
+						<Col xl={3}>{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
+					</Row>
+					<Row>
+						<Col xl="12">
+							{detailLaporanPt.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												{<DetailLaporan data={detailLaporanPt.data} />}
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<div></div>
+							)}
+						</Col>
+					</Row>
+					<Row>
+						{log.data && (
+							<Col xl={"12"}>
+								<Timeline data={log.data} />
+							</Col>
+						)}
 					</Row>
 				</div>
+
+
 			</ContentWrapper>
 		);
 	}
 }
-
 const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Pemantauan);
+export default connect(mapStateToProps)(Pemantauan);

pages/app/pemeriksaan/index.js

@@ -7,6 +7,7 @@ import TableLaporan from "@/components/Pemeriksaan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Link from "next/link";
+import Button from "reactstrap/lib/Button";
 
 class Pemeriksaan extends Component {
 	constructor(props) {
@@ -30,10 +31,16 @@ class Pemeriksaan extends Component {
 					<div>Evaluasi</div>
 					<div className="ml-auto">
 						<Link href="/app/penjadwalan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							<Button className="btn-header" color="info">
+								<h4>&lt; Penjadwalan</h4>
+							</Button>
 						</Link>
 						<Link href="/app/sanksi">
-							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
+							<span className="margin-l-5">
+								<Button className="btn-header" color="info">
+									<h4>Sanksi &gt;</h4>
+								</Button>
+							</span>
 						</Link>
 					</div>
 				</div>

pages/app/penjadwalan/index.js

@@ -7,6 +7,7 @@ import TableLaporan from "@/components/Penjadwalan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Link from "next/link";
+import Button from "reactstrap/lib/Button";
 
 class Penjadwalan extends Component {
 	constructor(props) {
@@ -30,10 +31,16 @@ class Penjadwalan extends Component {
 					<div>Penjadwalan Evaluasi</div>
 					<div className="ml-auto">
 						<Link href="/app/pelaporan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							<Button className="btn-header" color="info">
+								<h4>&lt; Pelaporan</h4>
+							</Button>
 						</Link>
 						<Link href="/app/pemeriksaan">
-							<button className="btn btn-sm btn-secondary text-sm">next &gt;</button>
+							<span className="margin-l-5">
+								<Button className="btn-header" color="info">
+									<h4>Pemeriksaan &gt;</h4>
+								</Button>
+							</span>
 						</Link>
 					</div>
 				</div>

pages/app/sanksi/index.js

@@ -7,6 +7,7 @@ import TableLaporan from "@/components/Sanksi/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Link from "next/link";
+import Button from "reactstrap/lib/Button";
 
 class Sanksi extends Component {
 	constructor(props) {
@@ -30,7 +31,9 @@ class Sanksi extends Component {
 					<div>Sanksi</div>
 					<div className="ml-auto">
 						<Link href="/app/pemeriksaan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							<Button className="btn-header" color="info">
+								<h4>&lt; Pemeriksaan</h4>
+							</Button>
 						</Link>
 					</div>
 				</div>