add riwayat baru sampe pelaporan, untuk pemantauan dll blom di lakukan add riwayat

actions/log.js

@@ -1,7 +1,5 @@
-import { get } from "../config/request";
 import axios from "@/config/axios";
 import axios2 from "axios";
-import osValue from "../utils/osValue";
 
 export const getLog = async (token, laporan_id) => {
 	try {
@@ -46,7 +44,7 @@ export const getLogPublic = async ({ no_hp, no_laporan }) => {
 export const createLog = async (token, data) => {
 	try {
 		const jsonip = await axios2.get("https://jsonip.com", { mode: "cors" });
-		const res = await axios.post("/log", { os: window.navigator.platform, ipv4: jsonip.data.ip, ...data }, { headers: { Authorization: token } });
+		const res = await axios.post("/log", { os: navigator.userAgentData.platform, ipv4: jsonip.data.ip, ...data }, { headers: { Authorization: token } });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);
@@ -54,7 +52,7 @@ export const createLog = async (token, data) => {
 	}
 };
 
-export const getLogAdmin = async (token) => {
+export const getLog2 = async (token) => {
 	try {
 		const res = await axios.get(`/log`, { headers: { Authorization: token } });
 		return res.data;

components/Layout/Header.js

@@ -3,8 +3,7 @@ import Router from "next/router";
 import PropTypes from "prop-types";
 import Link from "next/link";
 import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, ListGroup, ListGroupItem } from "reactstrap";
-import { logout } from "@/actions/auth";
-import { createLog } from "../../actions/log";
+import { createLog } from "@/actions/log";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import * as actions from "../../store/actions/actions";

components/Riwayat/TableRiwayat.js

@@ -1,116 +1,126 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Container, Progress } from "reactstrap";
+import { getLog2 } from "@/actions/log";
+import { connect } from "react-redux";
+import moment from "moment";
 
 let ReactDataGrid = null;
 class TableRiwayat extends Component {
-  state = {
-    dataGridReady: false,
-  };
+	state = {
+		dataGridReady: false,
+		dataRiwayat: {},
+		rows: [],
+		originalRows: null,
+	};
 
-  constructor(props, context) {
-    super(props, context);
+	constructor(props, context) {
+		super(props, context);
 
-    this._columns = [
-      {
-        key: "timelapse",
-        name: "Timelapse",
-        sortable: true,
-      },
-      {
-        key: "username",
-        name: "Username",
-        sortable: true,
-      },
-      {
-        key: "menu",
-        name: "Menu",
-        sortable: true,
-      },
-      {
-        key: "deskripsi",
-        name: "Deskripsi",
-        sortable: true,
-      },
-    ];
+		this._columns = [
+			{
+				key: "timelapse",
+				name: "Timelapse",
+				sortable: true,
+			},
+			{
+				key: "username",
+				name: "Username",
+				sortable: true,
+			},
+			{
+				key: "ipv4",
+				name: "IPv4",
+				sortable: true,
+			},
+			{
+				key: "menu",
+				name: "Menu",
+				sortable: true,
+			},
+			{
+				key: "deskripsi",
+				name: "Deskripsi",
+				sortable: true,
+			},
+		];
+	}
 
-    let originalRows = this.createRows(1000);
-    let rows = originalRows.slice(0);
-    this.state = { originalRows, rows };
-  }
+	async componentDidMount() {
+		const { token } = this.props;
+		const dataRiwayat = await getLog2(token);
+		this.setState({ dataRiwayat });
+		ReactDataGrid = require("react-data-grid");
+		this.setState({
+			dataGridReady: true,
+		});
 
-  componentDidMount() {
-    ReactDataGrid = require("react-data-grid");
-    this.setState({
-      dataGridReady: true,
-    });
-  }
+		let originalRows = this.createRows(1000);
+		let rows = originalRows.slice(0);
+		this.setState({ rows, originalRows });
+	}
 
-  getRandomDate = (start, end) => {
-    return new Date(
-      start.getTime() + Math.random() * (end.getTime() - start.getTime())
-    ).toLocaleDateString();
-  };
+	getRandomDate = (start, end) => {
+		return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
+	};
 
-  createRows = () => {
-    let rows = [];
-    for (let i = 1; i < 11; i++) {
-      rows.push({
-        deskripsi: "deskripsi di sini",
-        complete: Math.min(100, Math.round(Math.random() * 110)),
-        menu: ["Pelaporan", "Login", "Penjadwalan", "Sanksi"][
-          Math.floor(Math.random() * 3 + 1)
-        ],
-        username: ["sugiyanto", "sugiyanti", "andi", "yazid"][
-          Math.floor(Math.random() * 3 + 1)
-        ],
-        timelapse: this.getRandomDate(new Date(2018, 3, 1), new Date()),
-        completeDate: this.getRandomDate(new Date(), new Date(2021, 0, 1)),
-      });
-    }
+	createRows = () => {
+		let rows = [];
+		const { dataRiwayat } = this.state;
+		if (dataRiwayat) {
+			dataRiwayat.data.forEach((e) => {
+				rows.push({
+					deskripsi: e.aktivitas,
+					complete: Math.min(100, Math.round(Math.random() * 110)),
+					ipv4: e.ipv4,
+					menu: e.menu || "-",
+					username: e.user.nama,
+					timelapse: moment(e.createdAt).toLocaleString(),
+					completeDate: this.getRandomDate(new Date(), new Date(2021, 0, 1)),
+				});
+			});
+		}
 
-    return rows;
-  };
+		return rows;
+	};
 
-  rowGetter = (i) => this.state.rows[i];
+	rowGetter = (i) => this.state.rows[i];
 
-  handleGridSort = (sortColumn, sortDirection) => {
-    const comparer = (a, b) => {
-      if (sortDirection === "ASC") {
-        return a[sortColumn] > b[sortColumn] ? 1 : -1;
-      } else if (sortDirection === "DESC") {
-        return a[sortColumn] < b[sortColumn] ? 1 : -1;
-      }
-    };
+	handleGridSort = (sortColumn, sortDirection) => {
+		const comparer = (a, b) => {
+			if (sortDirection === "ASC") {
+				return a[sortColumn] > b[sortColumn] ? 1 : -1;
+			} else if (sortDirection === "DESC") {
+				return a[sortColumn] < b[sortColumn] ? 1 : -1;
+			}
+		};
 
-    const rows =
-      sortDirection === "NONE"
-        ? this.state.originalRows.slice(0)
-        : this.state.rows.sort(comparer);
+		const rows = sortDirection === "NONE" ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);
 
-    this.setState({ rows });
-  };
+		this.setState({ rows });
+	};
 
-  render() {
-    return (
-      <ContentWrapper>
-        <Container fluid>
-          {this.state.dataGridReady && (
-            <ReactDataGrid
-              onGridSort={this.handleGridSort}
-              columns={this._columns}
-              rowGetter={this.rowGetter}
-              rowsCount={this.state.rows.length}
-              // minHeight={0}
-            />
-          )}
-        </Container>
-        <div align="center">
-          <span>Riwayat Pengguna</span>
-        </div>
-      </ContentWrapper>
-    );
-  }
+	render() {
+		return (
+			<ContentWrapper>
+				<Container fluid>
+					{this.state.dataGridReady && (
+						<ReactDataGrid
+							onGridSort={this.handleGridSort}
+							columns={this._columns}
+							rowGetter={this.rowGetter}
+							rowsCount={this.state.rows.length}
+							// minHeight={0}
+						/>
+					)}
+				</Container>
+				<div align="center">
+					<span>Riwayat Pengguna</span>
+				</div>
+			</ContentWrapper>
+		);
+	}
 }
 
-export default TableRiwayat;
+const mapStateToProps = (state) => ({ token: state.token });
+export default connect(mapStateToProps)(TableRiwayat);

package-lock.json

@@ -1936,7 +1936,7 @@
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
     },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
@@ -2550,6 +2550,19 @@
         }
       }
     },
+    "apexcharts": {
+      "version": "3.35.4",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.4.tgz",
+      "integrity": "sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "@fullcalendar/timegrid": "^4.4.2",
     "@react-google-maps/api": "1.13.0",
     "animate.css": "3.7.2",
+    "apexcharts": "^3.35.4",
     "axios": "^0.25.0",
     "bootstrap": "^4.6.0",
     "canvas": "^2.7.0",

pages/app/banding/detail.js

@@ -17,6 +17,7 @@ import { toast } from "react-toastify";
 import { connect } from "react-redux";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
+import { createLog } from "@/actions/log";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -80,6 +81,7 @@ class JawabanBanding extends Component {
 	componentDidMount = async () => {
 		const { query, token } = this.props;
 		const sanksi = await getOneSanksi(token, query.id, { banding: true });
+		await createLog(token, { aktivitas: `Mengakses halaman detail Banding dengan No. Sanksi ${sanksi.data.no_sanksi}`, menu: "Banding" });
 		const pt = sanksi.data.laporan.pt;
 		this.setState({ sanksi, pt });
 	};
@@ -163,15 +165,11 @@ class JawabanBanding extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<span className="font-color-white">
-							Jawaban Permohonan Banding
-						</span>
+						<span className="font-color-white">Jawaban Permohonan Banding</span>
 						<div className="ml-auto">
 							<Link href="/app/banding">
 								<Button className="color-3e3a8e" color>
-									<span className="font-color-white">
-										&lt; Kembali
-									</span>
+									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
 						</div>
@@ -262,17 +260,13 @@ class JawabanBanding extends Component {
 																		)}
 																	</Field>
 																	<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-																	<p className="mrgn-top-5">
-																		Ukuran setiap dokumen maksimal 15mb
-																	</p>
+																	<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 																</div>
 															</FormGroup>
 															<FormGroup row>
 																<div className="col-xl-10">
 																	<Button color className="color-3e3a8e" type="submit">
-																		<span className="font-color-white">
-																			Simpan
-																		</span>
+																		<span className="font-color-white">Simpan</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/app/banding/index.js

@@ -6,6 +6,7 @@ import TableSanksi from "@/components/Banding/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
+import { createLog } from "@/actions/log";
 
 class Banding extends Component {
 	constructor(props) {
@@ -17,6 +18,7 @@ class Banding extends Component {
 
 	componentDidMount = async () => {
 		const { token } = this.props;
+		await createLog(token, { aktivitas: "Mengakses halaman Banding", menu: "Banding" });
 		const sanksi = await getSanksi(token, { banding: true });
 		this.setState({ sanksi });
 	};
@@ -26,9 +28,7 @@ class Banding extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<span className="font-color-white">
-						Banding
-					</span>
+					<span className="font-color-white">Banding</span>
 				</div>
 				<Row>
 					{/* <Col lg="4">

pages/app/keberatan/detail.js

@@ -17,6 +17,7 @@ import { toast } from "react-toastify";
 import { connect } from "react-redux";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
+import { createLog } from "@/actions/log";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -84,6 +85,7 @@ class DetailKeberatan extends Component {
 	componentDidMount = async () => {
 		const { query, token } = this.props;
 		const sanksi = await getOneSanksi(token, query.id);
+		await createLog(token, { aktivitas: `Mengakses halaman detail Keberatan dengan No. Sanksi ${sanksi.data.no_sanksi}`, menu: "Keberatan" });
 		const pt = sanksi.data.laporan.pt;
 		this.setState({ sanksi, pt });
 	};
@@ -168,15 +170,11 @@ class DetailKeberatan extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<span className="font-color-white">
-							Permohonan Keberatan
-						</span>
+						<span className="font-color-white">Permohonan Keberatan</span>
 						<div className="ml-auto">
 							<Link href="/app/keberatan">
 								<Button className="color-3e3a8e" color>
-									<span className="font-color-white">
-										&lt; Kembali
-									</span>
+									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
 						</div>
@@ -285,9 +283,7 @@ class DetailKeberatan extends Component {
 																		)}
 																	</Field>
 																	<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-																	<p className="mrgn-top-5">
-																		Ukuran setiap dokumen maksimal 15mb
-																	</p>
+																	<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 																</div>
 															</FormGroup>
 															{/* <FormGroup>
@@ -295,9 +291,7 @@ class DetailKeberatan extends Component {
 															<FormGroup row>
 																<div className="col-xl-10">
 																	<Button color className="color-3e3a8e" type="submit">
-																		<span className="font-color-white">
-																			Simpan
-																		</span>
+																		<span className="font-color-white">Simpan</span>
 																	</Button>
 																</div>
 															</FormGroup>

pages/app/keberatan/index.js

@@ -6,6 +6,7 @@ import TableSanksi from "@/components/Keberatan/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
+import { createLog } from "@/actions/log";
 
 class Keberatan extends Component {
 	constructor(props) {
@@ -17,6 +18,7 @@ class Keberatan extends Component {
 
 	componentDidMount = async () => {
 		const { token } = this.props;
+		await createLog(token, { aktivitas: "Mengakses halaman Keberatan", menu: "Keberatan" });
 		const sanksi = await getSanksi(token, { keberatan: true });
 		this.setState({ sanksi });
 	};
@@ -26,9 +28,7 @@ class Keberatan extends Component {
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
-					<span className="font-color-white">
-						Keberatan
-					</span>
+					<span className="font-color-white">Keberatan</span>
 				</div>
 				<Row>
 					{/* <Col lg="4">

pages/app/laporan-delegasi/detail.js

@@ -11,6 +11,7 @@ import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
 import Scrollable from "@/components/Common/Scrollable";
 import Timeline from "@/components/Main/Timeline";
+import { createLog } from "@/actions/log";
 
 class DetailPelaporan extends Component {
 	constructor(props) {
@@ -26,8 +27,9 @@ class DetailPelaporan extends Component {
 	};
 
 	componentDidMount = async () => {
-		const { query } = this.props;
+		const { token, query } = this.props;
 		const pelaporan = await getOneLaporan(this.props.token, query.id + "?delegasi=true");
+		await createLog(token, { aktivitas: `Mengakses halaman detail Laporan Delegasi dengan No. Laporan ${pelaporan.data.no_laporan}`, menu: "Laporan Delegasi" });
 		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 });
@@ -40,15 +42,11 @@ class DetailPelaporan extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<span className="font-color-white">
-							Detail Laporan Delegasi
-						</span>
+						<span className="font-color-white">Detail Laporan Delegasi</span>
 						<div className="ml-auto">
 							<Link href="/app/laporan-delegasi">
 								<Button className="color-3e3a8e" color>
-									<span className="font-color-white">
-										&lt; Kembali
-									</span>
+									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
 						</div>

pages/app/laporan-delegasi/index.js

@@ -8,6 +8,7 @@ import TableLaporan from "@/components/Main/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Router from "next/router";
+import { createLog } from "@/actions/log";
 
 class Pelaporan extends Component {
 	constructor(props) {
@@ -20,6 +21,8 @@ class Pelaporan extends Component {
 	}
 
 	componentDidMount = async () => {
+		const { token } = this.props;
+		await createLog(token, { aktivitas: "Mengakses halaman Laporan Delegasi", menu: "Laporan Delegasi" });
 		const pelaporan = await getPelaporan(this.props.token, { delegasi: true });
 		const graph = await getGraph(this.props.token, { jumlahLaporan: true });
 		this.setState({ pelaporan, graph });

pages/app/pelaporan/detail.js

@@ -8,6 +8,7 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, Button, CardBody } from "reactstrap";
 import Loader from "@/components/Common/Loader";
 import { connect } from "react-redux";
+import { createLog } from "@/actions/log";
 
 class DetailPelaporan extends Component {
 	constructor(props) {
@@ -22,8 +23,9 @@ class DetailPelaporan extends Component {
 	};
 
 	componentDidMount = async () => {
-		const { query } = this.props;
+		const { token, query } = this.props;
 		const pelaporan = await getOneLaporan(this.props.token, query.id);
+		await createLog(token, { aktivitas: `Mengakses halaman detail Pelaporan dengan No. Laporan ${pelaporan.data.no_laporan}`, menu: "Pelaporan" });
 		this.setState({ pelaporan });
 	};
 
@@ -34,15 +36,11 @@ class DetailPelaporan extends Component {
 				{/* <Header /> */}
 				<div className="p-3">
 					<div className="content-heading">
-						<span className="font-color-white">
-							Detail Pelaporan
-						</span>
+						<span className="font-color-white">Detail Pelaporan</span>
 						<div className="ml-auto">
 							<Link href="/app/pelaporan">
 								<Button className="color-3e3a8e" color>
-									<span className="font-color-white">
-										&lt; Kembali
-									</span>
+									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
 						</div>

pages/app/pelaporan/index.js

@@ -9,111 +9,93 @@ import TableLaporan from "@/components/Pelaporan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Router from "next/router";
+import { createLog } from "@/actions/log";
 
 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 { token } = this.props;
+		await createLog(token, { aktivitas: "Mengakses halaman Pelaporan", menu: "Pelaporan" });
+		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 });

pages/app/pelaporan/new.js

@@ -8,6 +8,7 @@ import { connect } from "react-redux";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardHeader, CardBody, Button } from "reactstrap";
 import Loader from "@/components/Common/Loader";
+import { createLog } from "@/actions/log";
 
 class PelaporanNew extends Component {
 	constructor(props) {
@@ -24,6 +25,7 @@ class PelaporanNew extends Component {
 	componentDidMount = async () => {
 		const { query, token } = this.props;
 		const pt = await getOnePT(token, query.ptId);
+		await createLog(token, { aktivitas: `Mengakses halaman Buat Pelaporan untuk ${pt.data.nama}`, menu: "Pelaporan" });
 		this.setState({ pt });
 	};
 
@@ -41,9 +43,7 @@ class PelaporanNew extends Component {
 						<div className="ml-auto">
 							<Link href="/app/pelaporan/search">
 								<Button className="color-3e3a8e" color>
-									<span className="font-color-white">
-										&lt; Kembali
-									</span>
+									<span className="font-color-white">&lt; Kembali</span>
 								</Button>
 							</Link>
 						</div>

pages/app/pelaporan/search.js

@@ -8,6 +8,7 @@ import Select from "react-select";
 import "react-datetime/css/react-datetime.css";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
+import { createLog } from "@/actions/log";
 
 var pembina = [];
 const selectInstanceId = 1;
@@ -46,8 +47,10 @@ class Search extends Component {
 		);
 	};
 
-	handleClick = (e, PT_ID) => {
+	handleClick = async (e, PT_ID, pt_name) => {
 		e.preventDefault();
+		const { token } = this.props;
+		await createLog(token, { aktivitas: `Mencari ${pt_name} untuk Pembuatan Laporan`, menu: "Pelaporan" });
 		Router.push({
 			pathname: "/app/pelaporan/new",
 			query: { ptId: PT_ID },
@@ -104,10 +107,8 @@ class Search extends Component {
 										{this.props.user.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
 									</div>
 									<div className="ml-auto">
-										<Button color className="color-3e3a8e" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
-											<span className="font-color-white">
-												Buat Laporan
-											</span>
+										<Button color className="color-3e3a8e" size="sm" onClick={(e) => this.handleClick(e, pt.id, pt.nama)}>
+											<span className="font-color-white">Buat Laporan</span>
 										</Button>
 									</div>
 								</div>
@@ -131,9 +132,7 @@ class Search extends Component {
 					<div className="ml-auto">
 						<Link href="/app/pelaporan">
 							<Button className="color-3e3a8e" color>
-								<span className="font-color-white">
-									&lt; Kembali
-								</span>
+								<span className="font-color-white">&lt; Kembali</span>
 							</Button>
 						</Link>
 					</div>