feat(bills): link event label to its event detail page

The Anlass / event name on the invoice detail page and the bills list
now links through to /admin/events/:id when the invoice references a
real event row. The list link stops propagation so it doesn't trigger
the row's invoice navigation. Falls back to plain text when the invoice
carries only a free-text event snapshot. Customer portal unchanged
(no admin route access).
This commit is contained in:
Luca
2026-06-02 08:38:07 +02:00
parent 522cf2aa4a
commit 7c39a30957
2 changed files with 15 additions and 2 deletions
@@ -386,7 +386,14 @@ export const BillDetailPage: React.FC = () => {
<Card> <Card>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
{inv.eventName && ( {inv.eventName && (
<div><div className="text-neutral-600 dark:text-neutral-300">{t('bills.field.eventName', 'Event')}</div><div>{inv.eventName}{inv.eventDate ? ` · ${inv.eventDate}` : ''}</div></div> <div><div className="text-neutral-600 dark:text-neutral-300">{t('bills.field.eventName', 'Event')}</div>
<div>
{inv.eventId ? (
<Link to={`/admin/events/${inv.eventId}`} className="text-theme hover:underline">{inv.eventName}</Link>
) : inv.eventName}
{inv.eventDate ? ` · ${inv.eventDate}` : ''}
</div>
</div>
)} )}
<div><div className="text-neutral-600 dark:text-neutral-300">{t('bills.field.issueDate', 'Issued')}</div><div>{fmtDate(inv.issueDate)}</div></div> <div><div className="text-neutral-600 dark:text-neutral-300">{t('bills.field.issueDate', 'Issued')}</div><div>{fmtDate(inv.issueDate)}</div></div>
<div><div className="text-neutral-600 dark:text-neutral-300">{t('bills.field.dueDate', 'Due')}</div><div>{fmtDate(inv.dueDate)}</div></div> <div><div className="text-neutral-600 dark:text-neutral-300">{t('bills.field.dueDate', 'Due')}</div><div>{fmtDate(inv.dueDate)}</div></div>
@@ -167,7 +167,13 @@ export const BillsListPage: React.FC = () => {
)} )}
</td> </td>
<td className="px-3 py-2">{inv.customer.companyName || inv.customer.displayName || inv.customer.email}</td> <td className="px-3 py-2">{inv.customer.companyName || inv.customer.displayName || inv.customer.email}</td>
<td className="px-3 py-2 truncate max-w-xs">{inv.eventName || '—'}</td> <td className="px-3 py-2 truncate max-w-xs">
{inv.eventName
? (inv.eventId
? <Link to={`/admin/events/${inv.eventId}`} className="text-theme hover:underline" onClick={(e) => e.stopPropagation()}>{inv.eventName}</Link>
: inv.eventName)
: '—'}
</td>
<td className="px-3 py-2 text-xs text-muted-theme"> <td className="px-3 py-2 text-xs text-muted-theme">
{inv.installmentTotal > 1 ? `${inv.installmentIndex + 1}/${inv.installmentTotal} · ${inv.installmentLabel || ''}` : '—'} {inv.installmentTotal > 1 ? `${inv.installmentIndex + 1}/${inv.installmentTotal} · ${inv.installmentLabel || ''}` : '—'}
</td> </td>