Added the closing date to the table, and narrowed its columns to fit

The backend's new closing_date, the bid deadline, is a Closing column
before the start and end dates, which are now the contract's: the
details dialog calls them Contract start and Contract end. Closing
sorts soonest first, with no date last, and shows the time it closes
in the cell's tooltip and in the dialog. The API types are regenerated
for it.

To make room, the SME suitable column is now an SME badge beside the
status, shown only when it's suitable, so the Status column sorts by
status alone and a stored SME sort goes back to the default. The Mark
column is narrower. An opportunity without a status is shown as
Unknown, in the colours of the statuses without their own, such as
Cancelled and Withdrawn, rather than as a blank badge or a dash.
This commit is contained in:
bwilliams committed 2026-10-21 14:47:56 +01:00
1 parent c678b02662
commit 3bb2711276
10 files changed
+65 -42

No files matched your search

+10 -10
View File
@@ -14,7 +14,7 @@ import {
import { api } from '@/api/client';
import { errorText } from '@/lib/errors';
import { statusLabel } from '@/lib/filterOpportunities';
import { formatDate, formatMoney } from '@/lib/format';
import { formatDate, formatDateTime, formatMoney } from '@/lib/format';
import { noticeSite, uuidLabel } from '@/lib/opportunities';
import type { Opportunity } from '@/types/Opportunities';
import { ReleaseTabs } from './ReleaseTabs';
@@ -102,19 +102,19 @@ export function OpportunityDialog(props: Props): JSX.Element {
<dl class={detailList}>
<dt class="text-muted">Status</dt>
<dd>
<Show when={opportunity().status} fallback="—">
<span
class={`inline-block rounded px-2 py-0.5 font-semibold ${statusBadge(opportunity().status)}`}
>
{statusLabel(opportunity().status)}
</span>
</Show>
<span
class={`inline-block rounded px-2 py-0.5 font-semibold ${statusBadge(opportunity().status)}`}
>
{statusLabel(opportunity().status)}
</span>
</dd>
<dt class="text-muted">Published</dt>
<dd>{formatDate(opportunity().latest_release_date)}</dd>
<dt class="text-muted">Start</dt>
<dt class="text-muted">Closing</dt>
<dd>{formatDateTime(opportunity().closing_date)}</dd>
<dt class="text-muted">Contract start</dt>
<dd>{formatDate(opportunity().start_date)}</dd>
<dt class="text-muted">End</dt>
<dt class="text-muted">Contract end</dt>
<dd>{formatDate(opportunity().end_date)}</dd>
<dt class="text-muted">Value</dt>
<dd>{formatMoney(opportunity().gross_value)}</dd>