shellphone.app/app/settings/components/billing/billing-history.tsx

import { IoChevronBack, IoChevronForward } from "react-icons/io5";
import clsx from "clsx";

import usePaymentsHistory from "../../hooks/use-payments-history";

export default function BillingHistory() {
	const {
		payments,
		count,
		skip,
		pagesNumber,
		currentPage,
		goToPreviousPage,
		hasPreviousPage,
		goToNextPage,
		hasNextPage,
		setPage,
	} = usePaymentsHistory();

	if (payments.length === 0) {
		return null;
	}

	return (
		<section className="bg-white pt-6 shadow sm:rounded-md sm:overflow-hidden">
			<div className="px-4 sm:px-6">
				<h2 className="text-lg leading-6 font-medium text-gray-900">Billing history</h2>
			</div>
			<div className="mt-6 flex flex-col">
				<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
					<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
						<div className="overflow-hidden border-t border-gray-200">
							<table className="min-w-full divide-y divide-gray-200">
								<thead className="bg-gray-50">
									<tr>
										<th
											scope="col"
											className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
										>
											Date
										</th>
										<th
											scope="col"
											className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
										>
											Amount
										</th>
										<th
											scope="col"
											className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
										>
											Status
										</th>
										<th
											scope="col"
											className="relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
										>
											<span className="sr-only">View receipt</span>
										</th>
									</tr>
								</thead>
								<tbody className="bg-white divide-y divide-gray-200">
									{payments.map((payment) => (
										<tr key={payment.id}>
											<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
												<time>{new Date(payment.payout_date).toDateString()}</time>
											</td>
											<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
												{Intl.NumberFormat(undefined, {
													style: "currency",
													currency: payment.currency,
													currencyDisplay: "narrowSymbol",
												}).format(payment.amount)}
											</td>
											<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
												{payment.is_paid === 1 ? "Paid" : "Upcoming"}
											</td>
											<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
												{typeof payment.receipt_url !== "undefined" ? (
													<a
														href={payment.receipt_url}
														target="_blank"
														rel="noopener noreferrer"
														className="text-primary-600 hover:text-primary-900"
													>
														View receipt
													</a>
												) : null}
											</td>
										</tr>
									))}
								</tbody>
							</table>

							<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
								<div className="flex-1 flex justify-between sm:hidden">
									<button
										onClick={goToPreviousPage}
										className={clsx(
											"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50",
											!hasPreviousPage && "invisible",
										)}
									>
										Previous
									</button>
									<p className="text-sm text-gray-700 self-center">
										Page <span className="font-medium">1</span> of{" "}
										<span className="font-medium">4</span>
									</p>
									<button
										onClick={goToNextPage}
										className={clsx(
											"ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50",
											!hasNextPage && "invisible",
										)}
									>
										Next
									</button>
								</div>
								<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
									<div>
										<p className="text-sm text-gray-700">
											Showing <span className="font-medium">{skip + 1}</span> to{" "}
											<span className="font-medium">{skip + payments.length}</span> of{" "}
											<span className="font-medium">{count}</span> results
										</p>
									</div>
									<div>
										<nav
											className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
											aria-label="Pagination"
										>
											<button
												onClick={goToPreviousPage}
												className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
											>
												<span className="sr-only">Previous</span>
												<IoChevronBack className="h-5 w-5" aria-hidden="true" />
											</button>
											{pagesNumber.map((pageNumber) => (
												<button
													key={`billing-history-button-page-${pageNumber}`}
													onClick={() => setPage(pageNumber)}
													className={clsx(
														"relative inline-flex items-center px-4 py-2 border text-sm font-medium",
														pageNumber === currentPage
															? "z-10 bg-indigo-50 border-indigo-500 text-indigo-600"
															: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50",
													)}
												>
													{pageNumber}
												</button>
											))}
											<button
												onClick={goToNextPage}
												className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
											>
												<span className="sr-only">Next</span>
												<IoChevronForward className="h-5 w-5" aria-hidden="true" />
											</button>
										</nav>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
}