github-such-software/xmrcheckout
1
0
Fork 0
mirror of https://github.com/Such-Software/xmrcheckout.git synced 2026-10-17 05:51:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: simplify invoices table columns

Browse Source
This commit is contained in:
xmrcheckout
2026-01-09 13:50:46 +00:00
parent 274c5d80a7
commit 4c86be83f5
1 changed files with 40 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/invoice-panel.tsx
+40 -82
View File
@@ -863,16 +863,31 @@ export default function InvoicePanel({
invoice.archived_at ? "bg-ink/5" : ""
}`}
>
<button
className="grid gap-1 text-left"
type="button"
<div
className="grid cursor-pointer gap-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink/15 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60"
role="button"
tabIndex={0}
onClick={() => toggleInvoice(invoice.id)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
toggleInvoice(invoice.id);
}
}}
>
<span className="font-mono text-xs text-ink">{invoice.id}</span>
<Link
className="w-fit font-mono text-xs text-ink underline underline-offset-4"
href={`/invoice/${invoice.id}`}
target="_blank"
rel="noreferrer"
onClick={(event) => event.stopPropagation()}
>
{invoice.id}
</Link>
<span className="text-xs text-ink-soft">
{invoice.address.slice(0, 18)}…{invoice.address.slice(-10)}
</span>
</button>
</div>
<div className="mt-3 flex flex-wrap gap-2">
{invoice.archived_at ? (
<span className="rounded-full border border-stroke bg-white/60 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-ink">
@@ -895,34 +910,8 @@ export default function InvoicePanel({
{formatXmrAmount(invoice.amount_xmr)} XMR
</p>
</div>
<div className="grid gap-1">
<p className={labelClass}>Created</p>
<p
className="text-sm text-ink"
title={formatRelativeTime(invoice.created_at) ?? undefined}
>
{formatTimestamp(invoice.created_at)}
</p>
</div>
<div className="grid gap-1">
<p className={labelClass}>Expires</p>
<p
className="text-sm text-ink"
title={formatRelativeTime(invoice.expires_at) ?? undefined}
>
{formatTimestamp(invoice.expires_at)}
</p>
</div>
</div>
<div className="mt-4 flex flex-wrap gap-2">
<Link
className={smallSecondaryButton}
href={`/invoice/${invoice.id}`}
target="_blank"
rel="noreferrer"
>
Open
</Link>
<button
className={smallSecondaryButton}
type="button"
@@ -1055,19 +1044,6 @@ export default function InvoicePanel({
Status
</Link>
</th>
<th className="px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-ink-soft">
<Link className="underline underline-offset-4" href={sortHref("created_at")}>
Created
</Link>
</th>
<th className="px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-ink-soft">
<Link className="underline underline-offset-4" href={sortHref("expires_at")}>
Expires
</Link>
</th>
<th className="px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-ink-soft">
Actions
</th>
</tr>
</thead>
<tbody>
@@ -1085,18 +1061,31 @@ export default function InvoicePanel({
className={`border-b border-stroke ${invoice.archived_at ? "bg-ink/5" : ""}`}
>
<td className="max-w-[320px] px-4 py-3 align-top">
<button
className="grid gap-1 text-left"
type="button"
<div
className="grid cursor-pointer gap-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink/15 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60"
role="button"
tabIndex={0}
onClick={() => toggleInvoice(invoice.id)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
toggleInvoice(invoice.id);
}
}}
>
<Link
className="w-fit break-words font-mono text-xs text-ink underline underline-offset-4"
href={`/invoice/${invoice.id}`}
target="_blank"
rel="noreferrer"
onClick={(event) => event.stopPropagation()}
>
<span className="break-words font-mono text-xs text-ink">
{invoice.id}
</span>
</Link>
<span className="break-words text-xs text-ink-soft">
{invoice.address.slice(0, 18)}…{invoice.address.slice(-10)}
</span>
</button>
</div>
<div className="mt-2 flex flex-wrap gap-2">
{invoice.archived_at ? (
<span className="rounded-full border border-stroke bg-white/60 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-ink">
@@ -1118,41 +1107,10 @@ export default function InvoicePanel({
{formatStatus(invoice.status)}
</span>
</td>
<td
className="px-4 py-3 align-top text-ink whitespace-nowrap"
title={formatRelativeTime(invoice.created_at) ?? undefined}
>
{formatTimestamp(invoice.created_at)}
</td>
<td
className="px-4 py-3 align-top text-ink whitespace-nowrap"
title={formatRelativeTime(invoice.expires_at) ?? undefined}
>
{formatTimestamp(invoice.expires_at)}
</td>
<td className="px-4 py-3 align-top">
<div className="flex flex-wrap gap-2">
<Link
className={smallSecondaryButton}
href={`/invoice/${invoice.id}`}
target="_blank"
rel="noreferrer"
>
Open
</Link>
<button
className={smallSecondaryButton}
type="button"
onClick={() => toggleInvoice(invoice.id)}
>
{isExpanded ? "Hide" : "Details"}
</button>
</div>
</td>
</tr>
{isExpanded ? (
<tr className="border-b border-stroke">
<td className="px-4 py-4" colSpan={6}>
<td className="px-4 py-4" colSpan={3}>
<div className="grid gap-4 rounded-xl border border-stroke bg-white/80 p-4 shadow-soft">
<div className="grid gap-3 sm:grid-cols-2">
<div className="grid gap-2">