commit

pages/app/pelaporan/index.js

@@ -5,82 +5,115 @@ import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import { getGraph, getExcel } from "@/actions/graph";
 import CaseProgress from "@/components/Pelaporan/CaseProgress";
-import TableLaporan from "@/components/pelaporan/TableLaporan";
+import TableLaporan from "@/components/Pelaporan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
-import Router from 'next/router'
+import Router from "next/router";
 
 class Pelaporan extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			pelaporan: {},
-			graph: {},
-			tahun: new Date().getFullYear(),
-			newLaporan: [],
-		};
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      pelaporan: {},
+      graph: {},
+      tahun: new Date().getFullYear(),
+      newLaporan: [],
+    };
+  }
 
-	componentDidMount = async () => {
-		const pelaporan = await getPelaporan(this.props.token);
-		const graph = await getGraph(this.props.token, { laporanTahun: true, newLaporan: true, jumlahLaporan: true });
-		const newLaporan = graph.data.newLaporan;
-		this.setState({ pelaporan, graph, newLaporan });
-	};
+  componentDidMount = async () => {
+    const pelaporan = await getPelaporan(this.props.token);
+    const graph = await getGraph(this.props.token, {
+      laporanTahun: true,
+      newLaporan: true,
+      jumlahLaporan: true,
+    });
+    const newLaporan = graph.data.newLaporan;
+    this.setState({ pelaporan, graph, newLaporan });
+  };
 
-	nextButton = async () => {
-		const tahun = this.state.tahun + 1;
-		const graph = await getGraph(this.props.token, { laporanTahun: true, jumlahLaporan: true, tahun });
-		this.setState({ graph, tahun });
-	};
+  nextButton = async () => {
+    const tahun = this.state.tahun + 1;
+    const graph = await getGraph(this.props.token, {
+      laporanTahun: true,
+      jumlahLaporan: true,
+      tahun,
+    });
+    this.setState({ graph, tahun });
+  };
 
-	prevButton = async () => {
-		const tahun = this.state.tahun - 1;
-		const graph = await getGraph(this.props.token, { laporanTahun: true, jumlahLaporan: true, tahun });
-		this.setState({ graph, tahun });
-	};
+  prevButton = async () => {
+    const tahun = this.state.tahun - 1;
+    const graph = await getGraph(this.props.token, {
+      laporanTahun: true,
+      jumlahLaporan: true,
+      tahun,
+    });
+    this.setState({ graph, tahun });
+  };
 
-	shouldComponentUpdate = (prevProps, prevState) => {
-		if (prevState.graph !== this.state.graph) return true;
-	};
+  shouldComponentUpdate = (prevProps, prevState) => {
+    if (prevState.graph !== this.state.graph) return true;
+  };
 
-	excel = () => {
-		const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
-		Router.push(url);
-	};
+  excel = () => {
+    const url = getExcel(this.props.token, "Laporan", {
+      tahun: this.state.tahun,
+    });
+    Router.push(url);
+  };
 
-	render() {
-		const { pelaporan, graph, newLaporan } = this.state;
+  render() {
+    const { pelaporan, graph, newLaporan } = this.state;
 
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<span className="font-color-white">
-						Pelaporan
-					</span>
-					<div className="ml-auto"></div>
-					<Link href="/app/penjadwalan">
-						<Button className="btn-header" color>
-							<h4 className="font-color-white">Penjadwalan &gt;</h4>
-						</Button>
-					</Link>
-				</div>
-				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} excel={this.excel} /> : <Loader />}</Col>
-					<Col lg="8">
-						<div className="mb-3 d-flex">
-							{/* <div className="margin-left-auto">
+    return (
+      <ContentWrapper>
+        <div className="content-heading">
+          <span className="font-color-white">Pelaporan</span>
+          <div className="ml-auto"></div>
+          <Link href="/app/penjadwalan">
+            <Button className="btn-header" color>
+              <h4 className="font-color-white">Penjadwalan &gt;</h4>
+            </Button>
+          </Link>
+        </div>
+        <Row>
+          <Col lg="4">
+            {graph?.data ? (
+              <CaseProgress
+                data={graph.data}
+                nextButton={this.nextButton}
+                prevButton={this.prevButton}
+                tahun={this.state.tahun}
+                newLaporan={newLaporan}
+                excel={this.excel}
+              />
+            ) : (
+              <Loader />
+            )}
+          </Col>
+          <Col lg="8">
+            <div className="mb-3 d-flex">
+              {/* <div className="margin-left-auto">
 								<Link href="/app/pelaporan/search">
 									<Button className="color-3e3a8e" color="purple">Laporan Baru</Button>
 								</Link>
 							</div> */}
-						</div>
-						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
-					</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
+            </div>
+            {pelaporan?.data ? (
+              <TableLaporan
+                listData={pelaporan.data}
+                to="/app/pelaporan/detail"
+                linkName="Detail"
+              />
+            ) : (
+              <Loader />
+            )}
+          </Col>
+        </Row>
+      </ContentWrapper>
+    );
+  }
 }
 
 const mapStateToProps = (state) => ({ user: state.user, token: state.token });