commit 29/10/22

actions/graph.js

@@ -70,14 +70,25 @@ export const getlaporanselesai = async (token) => {
 		return false;
 	}
 };
-export const getjumlahStatusLaporan = async (token) => {
+export const getjumlahStatusLaporan = async (token, query = {}) => {
 	try {
 		let url = API_URL + "/graph/jumlahStatusLaporan";
+		if (query != null) {
+			const { pembina_id } = query;
+			url += "?";
+			const parseURL = [];
+			if (pembina_id) {
+				parseURL.push(`pembina_id=${pembina_id}`);
+			}
+
+
+			url += parseURL.join("&");
+		}
 		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
 		return false;
 	}
-}
+};
 

actions/pelaporan.js

@@ -132,6 +132,25 @@ export const jumlahLaporan = async (token) => {
 		return false;
 	}
 };
+export const getlaporanByPembina = async (token, idPembina, query = {}) => {
+	try {
+		let url = `/laporan/byPembina/${idPembina}`;
+		if (query != null) {
+			const { idPembina } = query;
+			url += "?";
+			const parseURL = [];
+			if (idPembina) {
+				parseURL.push(`idPembina=${idPembina}`);
+			}
+			url += parseURL.join("&");
+		}
+		const res = await axiosAPI.get(url, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
 
 // export const activeLaporan = async ({ number, ptId }) => {
 // 	try {

components/Riwayat/TableLaporan.js

@@ -0,0 +1,90 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
+    return (
+        <div className="card b ">
+            <div className="card-body card-over">
+                {listData && (
+                    <Datatable options={{ responsive: false, ordering: true }}>
+                        <table className="table w-100" data-order='[[1, "desc"]]'>
+                            <thead>
+                                <tr>
+                                    <th>No.Laporan</th>
+                                    <th>Deskripsi Laporan</th>
+                                    {status && <th>Status</th>}
+                                    {!noBy && <th>Dibuat Oleh</th>}
+                                    {/* <th>Created</th> */}
+                                    {/* <th></th> */}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {listData.map((data) => {
+                                    return (
+                                        <tr key={data._id}>
+                                            <td>
+                                                {/* <td>{data.no_laporan}</td> */}
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <h4>{data.no_laporan}</h4>
+                                                            <p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+
+                                            <td>
+                                                <div className="table-desc">
+                                                    <div className="media align-items-center">
+                                                        <div className="media-body d-flex">
+                                                            <div>
+                                                                <h4 className="m-0">{data.pt.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
+                                                                {/* <h4 className="m-0">{data.pt.nama}</h4> */}
+                                                                {/* <p className="w-105">{data.keterangan.length > 150 ? data.keterangan.substring(0, 150) + "..." : data.keterangan}</p> */}
+                                                                <p className="w-105">{data.keterangan}</p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+
+                                            {status ? (
+                                                <td>
+                                                    <div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+                                                </td>
+                                            ) : (
+                                                ""
+                                            )}
+                                            {!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
+                                            {/* <td>
+                                                <div className="ml-auto">
+                                                    <Link
+                                                        href={{
+                                                            pathname: to,
+                                                            query: { id: data._id },
+                                                        }}
+                                                    >
+                                                        <Button className="btn-login" color>
+                                                            <span className="font-color-white">
+                                                                {linkName}
+                                                            </span>
+                                                        </Button>
+                                                    </Link>
+                                                </div>
+                                            </td> */}
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </table>
+                    </Datatable>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default TableLaporan;

pages/app/Bantuan/index.js

@@ -37,6 +37,10 @@ class Bantuan extends React.Component {
                                             </Button>
                                         </span>
                                     </a>
+                                    <div style={{
+                                        marginTop: "20px",
+                                        fontSize: "15px"
+                                    }}>Buku Panduan versi 7.3</div>
                                 </p>
 
                             </Col>
@@ -47,7 +51,7 @@ class Bantuan extends React.Component {
                     </Jumbotron>
                 </ContentWrapper>
 
-            </div>
+            </div >
 
         )
     }

pages/app/pemantauan/index.js

@@ -58,40 +58,8 @@ class Search extends Component {
 		const searchValue = document.getElementById("searchInput").value;
 		const jsonData = await getPT(this.props.token, { search: searchValue, pembina });
 		this.setState({ data: jsonData.data ? jsonData.data : [] });
-		// console.log(this.state.data)
 	};
-
-	// handleApplyClick = () => {
-	// 	this.fetchData();
-	// 	if (this.state.data && this.state.data.length > 0) {
-	// 		this.renderTableData();
-	// 		this.setState({ noData: true });
-	// 		// this.setState({ noData: false });
-
-	// 	}
-	// 	this.checknodata();
-	// 	// else {
-	// 	// 	this.setState({ noData: true })
-	// 	// }
-	// };
-
-	// handleSearchClick = () => {
-	// 	this.fetchData();
-	// 	if (this.state.data && this.state.data.length) {
-	// 		this.renderTableData();
-	// 		this.setState({ noData: true });
-	// 		// this.setState({ noData: false });
-	// 	}
-	// 	else {
-	// 		// this.setState({ noData: true });
-
-	// 		this.checknodata();
-	// 	}
-	// };
-
-
 	renderTableData() {
-		console.log(this.state.data)
 		return (
 			this.state.data &&
 			this.state.data.map((pt, index) => {

pages/app/riwayat/detail.js

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+import { Row, Col, Button } from "reactstrap";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Router from "next/router";
+import TableRiwayat from "@/components/Riwayat/TableRiwayat";
+import ChartData from "@/components/Riwayat/ChartData";
+import ChartDataBar from "@/components/Riwayat/ChartDataBar";
+import Maps from "@/components/Riwayat/Maps"
+import TableRiwayatt from "../../../components/Riwayat/TableRiwayatt";
+import TableRadarr from "../../../components/Riwayat/TableRadarr";
+import { getjumlahStatusLaporan } from "../../../actions/graph";
+import { getOneLaporan, getPelaporan, getlaporanByPembina } from "../../../actions/pelaporan";
+import ChartRadarB from "../../../components/Riwayat/ChartRadarB";
+import ChartRadarA from "../../../components/Riwayat/ChartRadarA";
+import TableLaporan from "../../../components/Riwayat/TableLaporan";
+
+
+
+class laporanByPembina extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            laporanPembina: {},
+            // pembina: {},
+
+        };
+    }
+
+    static getInitialProps = async ({ query }) => {
+        return { query };
+    }
+
+    componentDidMount = async () => {
+        const { token, query } = this.props;
+        const id = query.id;
+        const idPembina = id;
+        const laporanPembina = await getlaporanByPembina(token, idPembina);
+        // const pembina = laporanPembina.data.laporan.map((e) => e.pt.pembina)
+        this.setState({ laporanPembina });
+    };
+
+    render() {
+        const { laporanPembina } = this.state;
+        return (
+            <ContentWrapper>
+                <div className="content-heading">
+                    <span className="font-color-white">List Laporan Wilayah</span>
+                </div>
+                <Row>
+                    <Col lg="12">
+                        {laporanPembina?.data ? < TableLaporan listData={laporanPembina.data.laporan} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
+                    </Col>
+                </Row>
+            </ContentWrapper>
+        );
+    }
+}
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(laporanByPembina);

pages/app/riwayat/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
-import { Row, Col, Button } from "reactstrap";
+import { Row, Col, Button, Card, CardBody, Table } from "reactstrap";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Router from "next/router";
@@ -9,7 +9,6 @@ import TableRiwayat from "@/components/Riwayat/TableRiwayat";
 import ChartData from "@/components/Riwayat/ChartData";
 import ChartDataBar from "@/components/Riwayat/ChartDataBar";
 import Maps from "@/components/Riwayat/Maps"
-import TableRadar from "../../../components/Riwayat/TableRadar";
 import TableRiwayatt from "../../../components/Riwayat/TableRiwayatt";
 import TableRadarr from "../../../components/Riwayat/TableRadarr";
 import { getjumlahStatusLaporan } from "../../../actions/graph";
@@ -18,6 +17,7 @@ import ChartRadarA from "../../../components/Riwayat/ChartRadarA";
 
 
 
+
 class Riwayat extends Component {
   constructor(props) {
     super(props);
@@ -25,15 +25,21 @@ class Riwayat extends Component {
       jumlahStatusLaporan: {}
     };
   }
-
+  handleClick = (e, idPembina) => {
+    e.preventDefault();
+    Router.push({
+      pathname: "/app/riwayat/detail",
+      query: { id: idPembina },
+    });
+  };
 
   componentDidMount = async () => {
     const { token } = this.props;
-    const jumlahStatusLaporan = await getjumlahStatusLaporan(this.props.token);
+    const jumlahStatusLaporan = await getjumlahStatusLaporan(token);
     this.setState({ jumlahStatusLaporan });
-    // console.log(data)
   };
 
+
   render() {
     const { jumlahStatusLaporan } = this.state;
     return (
@@ -55,7 +61,110 @@ class Riwayat extends Component {
             <ChartRadarB />
           </Col>
           <Col lg="12">
-            {jumlahStatusLaporan?.data ? <TableRadarr listData={jumlahStatusLaporan.data} /> : <Loader />}
+            {/* {jumlahStatusLaporan?.data ? <TableRadarr listData={jumlahStatusLaporan.data} to="/app/riwayat/detail" /> : <Loader />} */}
+            <Card className="card-default">
+              <CardBody>
+                <Table bordered responsive>
+                  <thead>
+                    <tr >
+                      <th>Wilayah LLDikti\Menu</th>
+                      <th style={{
+                        backgroundColor: '#80b1ff',
+                        color: "black",
+                      }}>Penjadwalan Evaluasi</th>
+                      <th style={{
+                        backgroundColor: '#de8383',
+                        color: "black",
+                      }}>Pemeriksaan</th>
+                      <th style={{
+                        backgroundColor: '#fdda80',
+                        color: "black",
+                      }}>Sanksi</th>
+                      <th style={{
+                        backgroundColor: '#cfab80',
+                        color: "black",
+                      }}>Keberatan</th>
+                      <th style={{
+                        backgroundColor: '#ef90df',
+                        color: "black",
+                      }}>Banding</th>
+                      <th style={{
+                        backgroundColor: '#80df89',
+                        color: "black",
+                      }}>Pemantauan Perbaikan</th>
+                      <th style={{
+                        backgroundColor: '#a3d4d1',
+                        color: "black",
+                      }}>Pencabutan Sanksi</th>
+                      <th style={{
+                        backgroundColor: '#a3d4d1',
+                        color: "black",
+                      }}>Lihat laporan</th>
+                      {/* <th style={{
+                        backgroundColor: '#a3d4d1',
+                        color: "black",
+                      }}>list laporan</th> */}
+                    </tr>
+                  </thead>
+                  {jumlahStatusLaporan.data && jumlahStatusLaporan.data.map((data) => {
+                    return (
+                      <tr key={data.id}>
+                        <td>{data.pembina.name}</td>
+                        <td style={{
+                          backgroundColor: '#80b1ff',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_jadwal_evaluasi}</td>
+                        <td style={{
+                          backgroundColor: '#de8383',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_pemeriksaan}</td>
+                        <td style={{
+                          backgroundColor: '#fdda80',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_sanksi}</td>
+                        <td style={{
+                          backgroundColor: '#cfab80',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_keberatan}</td>
+                        <td style={{
+                          backgroundColor: '#ef90df',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_banding}</td>
+                        <td style={{
+                          backgroundColor: '#80df89',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_pemantauan_perbaikan}</td>
+                        <td style={{
+                          backgroundColor: '#a3d4d1',
+                          color: "black",
+                          textAlign: "center",
+                        }}>{data.jumlah_pencabutan_sanksi}
+                        </td>
+
+                        <td style={{
+                          backgroundColor: '#a3d4d1',
+                          color: "black",
+                          textAlign: "center",
+                        }}><div className="ml-auto">
+                            <Button className="color-3e3a8e" color size="sm" onClick={(e) => this.handleClick(e, data.pembina.id)}>
+                              <span className="font-color-white">
+                                View
+                              </span>
+                            </Button>
+                          </div>
+                        </td>
+
+                      </tr>)
+                  })}
+                </Table>
+              </CardBody>
+            </Card>
           </Col>
           {/* <Col lg="12">
             {jumlahStatusLaporan?.data ? <TableRadar listData={jumlahStatusLaporan.data} /> : <Loader />}
@@ -70,4 +179,5 @@ class Riwayat extends Component {
     );
   }
 }
-export default Riwayat;
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Riwayat);