riwayat (table, flotchart)

components/Layout/Menu.js

@@ -1,87 +1,97 @@
 const Menu = [
-	{
-		heading: "Main Navigation",
-		translate: "sidebar.heading.HEADER",
-	},
-	{
-		name: "Pemantauan",
-		path: "/app/pemantauan",
-		icon: "icon-speedometer",
-		translate: "sidebar.nav.PEMANTAUAN",
-	},
-	{
-		name: "Laporan Delegasi",
-		path: "/app/laporan-delegasi",
-		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN_DELEGASI",
-	},
-	{
-		name: "Pelaporan",
-		path: "/app/pelaporan",
-		icon: "icon-note",
-		translate: "sidebar.nav.PELAPORAN",
-	},
-	// {
-	// 	name: "Pelaporan",
-	// 	icon: "icon-notebook",
-	// 	translate: "sidebar.nav.LAPORAN",
-	// 	submenu: [
-	// 		{
-	// 			name: "List Laporan",
-	// 			path: "/app/pelaporan",
-	// 		},
-	// 		{
-	// 			name: "Laporan ditutup",
-	// 			path: "/app/laporan-ditutup",
-	// 		},
-	// 	],
-	// },
-	{
-		name: "Penjadwalan Evaluasi",
-		path: "/app/penjadwalan",
-		icon: "icon-event",
-		translate: "sidebar.nav.PENJADWALAN",
-	},
-	{
-		name: "Pemeriksaan",
-		path: "/app/pemeriksaan",
-		icon: "icon-book-open",
-		translate: "sidebar.nav.PEMERIKSAAN",
-	},
-	{
-		name: "Sanksi",
-		path: "/app/sanksi",
-		icon: "icon-social-steam",
-		translate: "sidebar.nav.SANKSI",
-	},
-	{
-		heading: "Dikti Ristek/LLDIKTI",
-		translate: "sidebar.heading.DIKTI_RISTEK",
-	},
-	{
-		name: "Keberatan",
-		path: "/app/keberatan",
-		icon: "icon-hourglass",
-		translate: "sidebar.nav.KEBERATAN",
-	},
-	{
-		name: "Banding",
-		path: "/app/banding",
-		icon: "icon-directions",
-		translate: "sidebar.nav.BANDING",
-	},
-	{
-		name: "Pencabutan Sanksi",
-		path: "/app/pencabutan-sanksi",
-		icon: "icon-shield",
-		translate: "sidebar.nav.PENCABUTAN_SANKSI",
-	},
-	{
-		name: "Pemantauan Perbaikan",
-		path: "/app/pemantauan-perbaikan",
-		icon: "icon-graph",
-		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
-	},
+  {
+    heading: "Main Navigation",
+    translate: "sidebar.heading.HEADER",
+  },
+  {
+    name: "Pemantauan",
+    path: "/app/pemantauan",
+    icon: "icon-speedometer",
+    translate: "sidebar.nav.PEMANTAUAN",
+  },
+  {
+    name: "Laporan Delegasi",
+    path: "/app/laporan-delegasi",
+    icon: "icon-notebook",
+    translate: "sidebar.nav.LAPORAN_DELEGASI",
+  },
+  {
+    name: "Pelaporan",
+    path: "/app/pelaporan",
+    icon: "icon-note",
+    translate: "sidebar.nav.PELAPORAN",
+  },
+  // {
+  // 	name: "Pelaporan",
+  // 	icon: "icon-notebook",
+  // 	translate: "sidebar.nav.LAPORAN",
+  // 	submenu: [
+  // 		{
+  // 			name: "List Laporan",
+  // 			path: "/app/pelaporan",
+  // 		},
+  // 		{
+  // 			name: "Laporan ditutup",
+  // 			path: "/app/laporan-ditutup",
+  // 		},
+  // 	],
+  // },
+  {
+    name: "Penjadwalan Evaluasi",
+    path: "/app/penjadwalan",
+    icon: "icon-event",
+    translate: "sidebar.nav.PENJADWALAN",
+  },
+  {
+    name: "Pemeriksaan",
+    path: "/app/pemeriksaan",
+    icon: "icon-book-open",
+    translate: "sidebar.nav.PEMERIKSAAN",
+  },
+  {
+    name: "Sanksi",
+    path: "/app/sanksi",
+    icon: "icon-social-steam",
+    translate: "sidebar.nav.SANKSI",
+  },
+  {
+    heading: "Dikti Ristek/LLDIKTI",
+    translate: "sidebar.heading.DIKTI_RISTEK",
+  },
+  {
+    name: "Keberatan",
+    path: "/app/keberatan",
+    icon: "icon-hourglass",
+    translate: "sidebar.nav.KEBERATAN",
+  },
+  {
+    name: "Banding",
+    path: "/app/banding",
+    icon: "icon-directions",
+    translate: "sidebar.nav.BANDING",
+  },
+  {
+    name: "Pencabutan Sanksi",
+    path: "/app/pencabutan-sanksi",
+    icon: "icon-shield",
+    translate: "sidebar.nav.PENCABUTAN_SANKSI",
+  },
+  {
+    name: "Pemantauan Perbaikan",
+    path: "/app/pemantauan-perbaikan",
+    icon: "icon-graph",
+    translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+  },
+  {
+    heading: "Analytics Report",
+    translate: "sidebar.heading.ANALYTICS_REPORT",
+  },
+  {
+    name: "Riwayat",
+    path: "/app/riwayat",
+    icon: "icon-graph",
+    translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+  },
 ];
 
 export default Menu;

components/Riwayat/ChartData.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+
+import Sparkline from "@/components/Common/Sparklines.js";
+import FlotChart from "@/components/Charts/Flot.js";
+import {
+  ChartSpline,
+  ChartArea,
+  ChartBar,
+  ChartBarStacked,
+  ChartDonut,
+  ChartLine,
+  ChartPie,
+} from "@/components/Config/flot.setup.js";
+
+class ChartData extends Component {
+  render() {
+    return (
+      <Col lg={12}>
+        <Card className="card-default">
+          <CardBody>
+            <FlotChart
+              options={ChartSpline.options}
+              data={ChartSpline.data}
+              className="flot-chart"
+              height="250px"
+            />
+          </CardBody>
+          <div align="center">
+            <span>Data Statistik Pengunjung Tahun 2022</span>
+          </div>
+        </Card>
+      </Col>
+    );
+  }
+}
+export default ChartData;

components/Riwayat/TableRiwayat.js

@@ -0,0 +1,116 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Container, Progress } from "reactstrap";
+
+let ReactDataGrid = null;
+class TableRiwayat extends Component {
+  state = {
+    dataGridReady: false,
+  };
+
+  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,
+      },
+    ];
+
+    let originalRows = this.createRows(1000);
+    let rows = originalRows.slice(0);
+    this.state = { originalRows, rows };
+  }
+
+  componentDidMount() {
+    ReactDataGrid = require("react-data-grid");
+    this.setState({
+      dataGridReady: true,
+    });
+  }
+
+  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)),
+      });
+    }
+
+    return rows;
+  };
+
+  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;
+      }
+    };
+
+    const rows =
+      sortDirection === "NONE"
+        ? this.state.originalRows.slice(0)
+        : this.state.rows.sort(comparer);
+
+    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>
+    );
+  }
+}
+
+export default TableRiwayat;

pages/app/riwayat/index.js

@@ -0,0 +1,39 @@
+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 { getGraph, getExcel } from "@/actions/graph";
+import CaseProgress from "@/components/Pelaporan/CaseProgress";
+import TableLaporan from "@/components/Pelaporan/TableLaporan";
+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";
+
+class Riwayat extends Component {
+  render() {
+    return (
+      <ContentWrapper>
+        <div className="content-heading">
+          <span className="font-color-white">Riwayat</span>
+        </div>
+        <Row>
+          {/* <Col lg="4">
+                <CaseProgress />
+            </Col> */}
+          <Col lg="6">
+            <ChartDataBar />
+          </Col>
+          <Col lg="12">
+            <ChartData />
+            <TableRiwayat />
+          </Col>
+        </Row>
+      </ContentWrapper>
+    );
+  }
+}
+export default Riwayat;