laporan-delegasi

pages/app/laporan-delegasi/detail.js

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getOneLaporan } from "@/actions/pelaporan";
+import { getLog } from "@/actions/log";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
+import Loader from "@/components/Common/Loader";
+import { connect } from "react-redux";
+import Scrollable from "@/components/Common/Scrollable";
+import Timeline from "@/components/Main/Timeline";
+
+class DetailPelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+			pemantauan: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	componentDidMount = async () => {
+		const { query } = this.props;
+		const pelaporan = await getOneLaporan(this.props.token, query.id + "?delegasi=true");
+		const pemantauan = await getLog(this.props.token, query.id + "?delegasi=true&asc=true");
+		pemantauan.data = pemantauan.data.filter((e) => e.action != "CREATE LAPORAN");
+		this.setState({ pelaporan, pemantauan });
+	};
+
+	render() {
+		const { pelaporan, pemantauan } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				{/* <Header /> */}
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Laporan Delegasi</div>
+						<div className="ml-auto">
+							<Link href="/app/laporan-delegasi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							{pelaporan.data ? (
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												{<DetailLaporan data={pelaporan.data} />}
+												<p className="lead bb">Keterangan Delegasi</p>
+												<form className="form-horizontal">
+													<FormGroup row>
+														<Col md="4">Alasan Delegasi:</Col>
+														<Col md="8">
+															<Scrollable height="100px" className="list-group">
+																<p>{pelaporan.data.alasan_delegasi}</p>
+															</Scrollable>
+														</Col>
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							) : (
+								<Loader />
+							)}
+						</Col>
+						<Col xl="3">{pelaporan.data ? <DetailPT data={pelaporan.data.pt} /> : <Loader />}</Col>
+					</Row>
+					<Row>
+						{pemantauan.data && (
+							<Col xl={12}>
+								<Timeline data={pemantauan.data} />
+							</Col>
+						)}
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(DetailPelaporan);

pages/app/laporan-delegasi/index.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+import { Row, Col, Button } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelaporan: {},
+		};
+	}
+
+	componentDidMount = async () => {
+		const pelaporan = await getPelaporan(this.props.token, { delegasi: true });
+		this.setState({ pelaporan });
+	};
+
+	render() {
+		const { pelaporan } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>Laporan Delegasi</div>
+					<div className="ml-auto"></div>
+				</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/laporan-delegasi/detail" linkName="Detail" /> : <Loader />}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Pelaporan);