Jon Staab
65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import { A } from "@solidjs/router"
|
|
import { Show } from "solid-js"
|
|
import { getProfilePicture } from "applesauce-core/helpers/profile"
|
|
import { invoiceStatus, type Invoice } from "@/lib/api"
|
|
import CopyNpub from "@/components/CopyNpub"
|
|
import { useProfileMetadata } from "@/lib/hooks"
|
|
import { formatPeriod, formatUsd } from "@/lib/format"
|
|
|
|
const invoiceStatusStyles: Record<string, string> = {
|
|
open: "bg-yellow-50 text-yellow-700 border-yellow-200",
|
|
paid: "bg-green-50 text-green-700 border-green-200",
|
|
void: "bg-gray-100 text-gray-500 border-gray-200",
|
|
}
|
|
|
|
type AdminInvoiceListItemProps = {
|
|
invoice: Invoice
|
|
href: string
|
|
showTenant?: boolean
|
|
}
|
|
|
|
export default function AdminInvoiceListItem(props: AdminInvoiceListItemProps) {
|
|
// Resolve the owning tenant's profile from the event store. The list that
|
|
// passes `showTenant` is responsible for priming these profiles in one batch,
|
|
// so this subscription does not prime on its own.
|
|
const metadata = useProfileMetadata(() => (props.showTenant ? props.invoice.tenant_pubkey : undefined), { prime: false })
|
|
|
|
const status = () => invoiceStatus(props.invoice)
|
|
|
|
return (
|
|
<li>
|
|
<A href={props.href} class="block rounded-lg border border-gray-200 bg-white p-4 hover:border-gray-300">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<p class="font-medium text-gray-900">{formatUsd(props.invoice.amount)}</p>
|
|
<p class="text-xs text-gray-500">{formatPeriod(props.invoice.period_start, props.invoice.period_end)}</p>
|
|
<Show when={props.showTenant}>
|
|
<div class="mt-1.5 flex items-center gap-2">
|
|
<Show
|
|
when={getProfilePicture(metadata())}
|
|
fallback={
|
|
<div class="h-5 w-5 flex-shrink-0 rounded-full bg-gray-200 flex items-center justify-center text-[10px] text-gray-500">
|
|
{((metadata()?.name || metadata()?.display_name) || props.invoice.tenant_pubkey).slice(0, 1).toUpperCase()}
|
|
</div>
|
|
}
|
|
>
|
|
<img src={getProfilePicture(metadata())} alt="" class="h-5 w-5 flex-shrink-0 rounded-full object-cover" />
|
|
</Show>
|
|
<Show
|
|
when={metadata()?.name || metadata()?.display_name}
|
|
fallback={<CopyNpub pubkey={props.invoice.tenant_pubkey} class="text-xs text-gray-500" />}
|
|
>
|
|
<span class="text-xs text-gray-500 truncate">{metadata()?.name || metadata()?.display_name}</span>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
<span class={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${invoiceStatusStyles[status()] ?? "bg-gray-100 text-gray-500 border-gray-200"}`}>
|
|
{status()}
|
|
</span>
|
|
</div>
|
|
</A>
|
|
</li>
|
|
)
|
|
}
|