|  | @@ -0,0 +1,104 @@
 | 
	
		
			
				|  |  | +import Datatable from "@/components/Tables/Datatable";
 | 
	
		
			
				|  |  | +import { Button } from "reactstrap";
 | 
	
		
			
				|  |  | +import Link from "next/link";
 | 
	
		
			
				|  |  | +import moment from "moment";
 | 
	
		
			
				|  |  | +import React, { Component } from "react";
 | 
	
		
			
				|  |  | +import { getLog2 } from "@/actions/log";
 | 
	
		
			
				|  |  | +import { connect } from "react-redux";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +class TableRiwayatt 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() {
 | 
	
		
			
				|  |  | +        console.log(this.state.dataRiwayat.data?.map(e => e.id))
 | 
	
		
			
				|  |  | +        return (
 | 
	
		
			
				|  |  | +            <div className="card b ">
 | 
	
		
			
				|  |  | +                <div style={{ height: 500 }} className="card-body card-over">
 | 
	
		
			
				|  |  | +                    {this.state.dataRiwayat && (
 | 
	
		
			
				|  |  | +                        <Datatable options={{
 | 
	
		
			
				|  |  | +                            responsive: false, ordering: false, keys: false, lengthChange: false, searching: false, aLengthMenu: [500], paging: false, scrollX: true, scrollY: "370px",
 | 
	
		
			
				|  |  | +                            bordered: true
 | 
	
		
			
				|  |  | +                        }}>
 | 
	
		
			
				|  |  | +                            <table className="table w-100" data-order='[[3, "desc"]]'>
 | 
	
		
			
				|  |  | +                                <thead>
 | 
	
		
			
				|  |  | +                                    <tr>
 | 
	
		
			
				|  |  | +                                        <th>Timelapse</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 a"))}</p>
 | 
	
		
			
				|  |  | +                                                        </div>
 | 
	
		
			
				|  |  | +                                                    </div>
 | 
	
		
			
				|  |  | +                                                </div>
 | 
	
		
			
				|  |  | +                                            </td>
 | 
	
		
			
				|  |  | +                                            <td style={{ minWidth: 130 }}>
 | 
	
		
			
				|  |  | +                                                <div className="media align-items-center">
 | 
	
		
			
				|  |  | +                                                    <div className="media-body d-flex">
 | 
	
		
			
				|  |  | +                                                        <div>
 | 
	
		
			
				|  |  | +                                                            <p>{value.user?.nama}</p>
 | 
	
		
			
				|  |  | +                                                        </div>
 | 
	
		
			
				|  |  | +                                                    </div>
 | 
	
		
			
				|  |  | +                                                </div>
 | 
	
		
			
				|  |  | +                                            </td>
 | 
	
		
			
				|  |  | +                                            <td style={{ minWidth: 120 }}>
 | 
	
		
			
				|  |  | +                                                <div className="media align-items-center">
 | 
	
		
			
				|  |  | +                                                    <div className="media-body d-flex">
 | 
	
		
			
				|  |  | +                                                        <div>
 | 
	
		
			
				|  |  | +                                                            <p>{value.ipv4}</p>
 | 
	
		
			
				|  |  | +                                                        </div>
 | 
	
		
			
				|  |  | +                                                    </div>
 | 
	
		
			
				|  |  | +                                                </div>
 | 
	
		
			
				|  |  | +                                            </td>
 | 
	
		
			
				|  |  | +                                            <td style={{ minWidth: 150 }}>
 | 
	
		
			
				|  |  | +                                                <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)(TableRiwayatt);
 |