ptb-fe/components/Riwayat/TableLaporan.js

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='[[0, "desc"]]'>
                            <thead>
                                <tr>
                                    <th>No.Laporan</th>
                                    <th style={{
                                 whiteSpace:"nowrap",
                                }}>Tanggal Laporan</th>
                                    <th>Deskripsi Laporan</th>
                                     <th>Status</th>
                                    {/* {!noBy && <th>Dibuat Oleh</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>
                                                            <p  style={{ display: "none" }}>{data.createdAt}</p>
                                                            <h4>{data.no_laporan}</h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>

											<td>
												{/* <td>{data.no_laporan}</td> */}
												<div className="media align-items-center">
													<div className="media-body">
														<div>
														<p  style={{ display: "none" }}>{data.createdAt}</p>
															<h4>{moment(data.createdAt).format("DD-MM-YYYY")}</h4>
														</div>
													</div>
												</div>
											</td>
                                            <td className=" col-md-6">
                                                <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>
                                                                <p className="">{data.keterangan.length>100?data.keterangan.substring(0, 100) + "..." : data.keterangan}</p>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>

                                            {data.step ? (
                                                <td>
                                                    <div className="badge badge-success">{data.step}</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;