fix button graph1

components/Delegasi/CaseProgress.js

@@ -8,7 +8,7 @@ import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "
 import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 
-function CaseProgress({ data, user }) {
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
 	const ChartPie = {
 		data: [
 			{
@@ -109,13 +109,13 @@ function CaseProgress({ data, user }) {
 		<div className="card b">
 			<div className="card-body bb">
 				<div className="margin-botton-20 text-tahun">
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
 						<img src="/static/img/previous.png"></img>
 					</Button>
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
 						<img src="/static/img/next.png"></img>
 					</Button>
-					<b className="text-tahun">Tahun 2022 </b>
+					<b className="text-tahun">Tahun {tahun} </b>
 					<Button className="float-right button-hidden icon-eksport">
 						<img src="/static/img/Eksport.png"></img>
 					</Button>

components/Pelaporan/CaseProgress.js

@@ -6,9 +6,8 @@ import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLin
 import Datatable from "@/components/Tables/Datatable";
 import { useState, useEffect } from "react";
 
-function CaseProgress({ data }) {
+function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan }) {
 	const laporan_pertahun = data.laporan_perTahun;
-	const laporan_terbaru = data.newLaporan;
 
 	const [chartData, setChartData] = useState([
 		{
@@ -67,7 +66,6 @@ function CaseProgress({ data }) {
 		}
 	};
 
-
 	const ChartPie = {
 		data: [
 			{
@@ -112,13 +110,13 @@ function CaseProgress({ data }) {
 		<div className="card b">
 			<div className="card-body bb">
 				<div className="margin-botton-20 text-tahun">
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
 						<img src="/static/img/previous.png"></img>
 					</Button>
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
 						<img src="/static/img/next.png"></img>
 					</Button>
-					<b className="text-tahun">Tahun 2022 </b>
+					<b className="text-tahun">Tahun {tahun} </b>
 					<Button className="float-right button-hidden icon-eksport">
 						<img src="/static/img/Eksport.png"></img>
 					</Button>
@@ -140,7 +138,7 @@ function CaseProgress({ data }) {
 				<div className="header-1">
 					<h2 className="card-title-1">Laporan Terbaru</h2>
 				</div>
-				{laporan_terbaru.map((value) => (
+				{newLaporan.map((value) => (
 					<h5 className="card-title text-left py-2 bg-gray border-radius-login">
 						<b className="f-size">{`${value.no_laporan} - ${value.pt.nama}`}</b>
 					</h5>

components/Pemeriksaan/CaseProgress.js

@@ -8,9 +8,7 @@ import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
-
-
-function CaseProgress({ data }) {
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
 	const ChartBar = {
 		data: [
 			{
@@ -57,7 +55,6 @@ function CaseProgress({ data }) {
 		},
 	};
 
-
 	const ChartPie = {
 		data: [
 			{
@@ -102,13 +99,13 @@ function CaseProgress({ data }) {
 		<div className="card b">
 			<div className="card-body bb">
 				<div className="margin-botton-20 text-tahun">
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
 						<img src="/static/img/previous.png"></img>
 					</Button>
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
 						<img src="/static/img/next.png"></img>
 					</Button>
-					<b className="text-tahun">Tahun 2022 </b>
+					<b className="text-tahun">Tahun {tahun} </b>
 					<Button className="float-right button-hidden icon-eksport">
 						<img src="/static/img/Eksport.png"></img>
 					</Button>

components/Penjadwalan/CaseProgress.js

@@ -8,9 +8,7 @@ import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
 import { Button } from "reactstrap";
 
-
-
-function CaseProgress({ data }) {
+function CaseProgress({ data, nextButton, prevButton, tahun }) {
 	const ChartBar = {
 		data: [
 			{
@@ -57,7 +55,6 @@ function CaseProgress({ data }) {
 		},
 	};
 
-
 	const ChartPie = {
 		data: [
 			{
@@ -102,13 +99,13 @@ function CaseProgress({ data }) {
 		<div className="card b">
 			<div className="card-body bb">
 				<div className="margin-botton-20 text-tahun">
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
 						<img src="/static/img/previous.png"></img>
 					</Button>
-					<Button className="float-left button-hidden icon-next">
+					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
 						<img src="/static/img/next.png"></img>
 					</Button>
-					<b className="text-tahun">Tahun 2022 </b>
+					<b className="text-tahun">Tahun {tahun} </b>
 					<Button className="float-right button-hidden icon-eksport">
 						<img src="/static/img/Eksport.png"></img>
 					</Button>

pages/app/laporan-delegasi/index.js

@@ -15,6 +15,7 @@ class Pelaporan extends Component {
 		this.state = {
 			pelaporan: {},
 			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
@@ -24,6 +25,22 @@ class Pelaporan extends Component {
 		this.setState({ pelaporan, graph });
 	};
 
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { jumlahLaporan: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { jumlahLaporan: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -33,7 +50,7 @@ class Pelaporan extends Component {
 					<div className="ml-auto"></div>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} user={this.props.user} /> : <Loader />}</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/laporan-delegasi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pelaporan/index.js

@@ -15,17 +15,37 @@ class Pelaporan extends Component {
 		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 });
-		this.setState({ pelaporan, graph });
+		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, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { laporanTahun: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
 	};
 
 	render() {
-		const { pelaporan, graph } = this.state;
+		const { pelaporan, graph, newLaporan } = this.state;
+
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -38,7 +58,7 @@ class Pelaporan extends Component {
 					</Link>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} /> : <Loader />}</Col>
 					<Col lg="8">
 						<div className="mb-3 d-flex">
 							<div>

pages/app/pemeriksaan/index.js

@@ -16,6 +16,7 @@ class Pemeriksaan extends Component {
 		this.state = {
 			pelaporan: {},
 			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
@@ -26,6 +27,22 @@ class Pemeriksaan extends Component {
 		this.setState({ pelaporan, graph });
 	};
 
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -49,7 +66,7 @@ class Pemeriksaan extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan status noBy listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Evaluasi" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>

pages/app/penjadwalan/index.js

@@ -16,6 +16,7 @@ class Penjadwalan extends Component {
 		this.state = {
 			pelaporan: {},
 			graph: {},
+			tahun: new Date().getFullYear(),
 		};
 	}
 
@@ -26,6 +27,22 @@ class Penjadwalan extends Component {
 		this.setState({ pelaporan, graph });
 	};
 
+	nextButton = async () => {
+		const tahun = this.state.tahun + 1;
+		const graph = await getGraph(this.props.token, { jadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	prevButton = async () => {
+		const tahun = this.state.tahun - 1;
+		const graph = await getGraph(this.props.token, { jadwal: true, tahun });
+		this.setState({ graph, tahun });
+	};
+
+	shouldComponentUpdate = (prevProps, prevState) => {
+		if (prevState.graph !== this.state.graph) return true;
+	};
+
 	render() {
 		const { pelaporan, graph } = this.state;
 		return (
@@ -49,7 +66,7 @@ class Penjadwalan extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} /> : <Loader />}</Col>
+					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} /> : <Loader />}</Col>
 					<Col lg="8">{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>