ptb-fe/components/Main/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 }) {
	return (
		<div className="card b">
			<div className="card-body">
				<Datatable options={{ responsive: true }}>
					<table className="table w-100">
						<thead>
							<tr>
								<th>#ID</th>
								<th>Deskripsi Laporan</th>
								{status ? <th>Status</th> : ""}
								<th>Created</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{listData.map((data) => {
								return (
									<tr key={data._id}>
										<td>{data._number}</td>
										<td className="text-nowrap">
											<div className="media align-items-center">
												<div className="media-body d-flex">
													<div>
														<h4 className="m-0">Universitas Satyagama</h4>
														<p>{data.description}</p>
													</div>
												</div>
											</div>
										</td>
										{status ? (
											<td>
												<div className="badge badge-info">{data.status}</div>
											</td>
										) : (
											""
										)}
										<td>{moment(data.createdAt).fromNow()}</td>
										<td>
											<div className="ml-auto">
												<Link
													href={{
														pathname: to,
														query: { ptId: data.pt_id, number: data._number },
													}}
												>
													<Button color="primary" size="sm">
														{linkName}
													</Button>
												</Link>
											</div>
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</Datatable>
			</div>
		</div>
	);
}

export default TableLaporan;