PTB-fe/components/Riwayat/TableRiwayat.js

import Datatable from "@/components/Tables/Datatable";
import Link from "next/link";
import moment from "moment";
import React, { Component } from "react";
import { getLog2 } from "@/actions/log";
import { connect } from "react-redux";
import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";


import Datetime from "react-datetime";

class TableRiwayat extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataRiwayat: "",
        };
    }
    componentDidMount = async () => {
        const { token } = this.props;
        const dataRiwayat = await getLog2(this.props.token);
        this.setState({ dataRiwayat });
    }

    render() {
        return (
            <div className="card b ">

                <div className="card-body card-over">
                    <span className=" ml-2 float-left">
                        <label className="col-form-label">Range Filter : </label>

                        <span className=" mr-2 ml-4">
                            <Datetime
                                timeFormat={false}
                                inputProps={{ className: "form-control" }}
                                value={"Default"}
                            />
                        </span>
                        <span>
                            <Datetime
                                timeFormat={false}
                                inputProps={{ className: "form-control" }}
                                value={"Default"}
                            />
                        </span>
                        <Button color= "info" className=" mt-4">Filter</Button>

                    </span>
                    {this.state.dataRiwayat && (
                        <Datatable options={{
                            responsive: false, ordering: false, keys: false, lengthChange: false, searching: true, aLengthMenu: [500], paging: true, scrollX: true, scrollY: "370px",
                            bordered: true, "pageLength": 100
                        }}>
                            <table className="table w-100" data-order='[[3, "desc"]]'>
                                <thead>
                                    <tr>
                                        <th>Timestamp</th>
                                        <th>Username</th>
                                        <th>IPv4</th>
                                        <th>Menu</th>
                                        <th>Deskripsi</th>
                                        {/* <th>Created</th> */}
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
                                        <tr>
                                            <td style={{ width: 175 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, HH:mm"))}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td >
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.user?.nama}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.ipv4}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td >
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.menu}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style={{ minWidth: 350 }}>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <p>{value.aktivitas}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    ))}

                                </tbody>
                            </table>
                        </Datatable>
                    )}
                </div>
            </div >
        );
    }
}
const mapStateToProps = (state) => ({ token: state.token });
export default connect(mapStateToProps)(TableRiwayat);