Cancelled/rejected orders render as an empty Status cell (a-tag color="default" is not a valid preset)

[johnsontamiwt]

Describe the bug

In Broker Accounts → Open Orders, an Alpaca order whose status is canceled renders as an empty cell. The status text and its tag are both invisible. filled orders in the same table render normally.

The backend is correct — alpaca_trading/client.py returns "status": _enum_value(o.status), i.e. "canceled" — and the frontend's statusColor() already recognises the value. The problem is the colour it returns:

statusColor(s) {
  const t = String(s || "").toLowerCase();
  return t === "filled" ? "green"
       : t === "canceled" || t === "cancelled" || t === "rejected" || t === "expired" ? "default"
       : t === "partially_filled" || t === "pending_new" || t === "accepted" || t === "new" ? "blue"
       : "orange";
}

"default" is not a valid a-tag colour. ant-design-vue only treats these as preset colours:

["pink","red","yellow","orange","cyan","green","blue","purple",
 "geekblue","magenta","volcano","gold","lime"]

So for a cancelled order isPresetColor("default") is false, and the Tag component takes the custom-colour path:

• getTagStyle() returns { backgroundColor: "default" } — an invalid CSS value the browser drops, so the tag has no background;
• getTagClassName() adds ant-tag-has-color, whose stylesheet rules are .ant-tag-has-color { border-color: transparent } and .ant-tag-has-color { color: #fff }.

The result is white text on no background with no border. filled is unaffected because "green" is a valid preset.

This affects every status that maps to "default": canceled, cancelled, rejected, expired — so a rejected order is invisible too, which matters more than a cancelled one.

The same statusColor() is used by the IBKR orders table, so IBKR cancelled/rejected orders are affected identically.

Steps to reproduce

1. Connect an Alpaca paper account under Broker Accounts.
2. Place an order that will not fill immediately (e.g. a far-off limit order on SPY).
3. Cancel it.
4. Open Broker Accounts → Alpaca → Open Orders.
5. The cancelled row's Status cell appears empty, while filled rows show a green tag.

Confirmed against the API response: GET /api/alpaca/orders returns "status": "canceled" for that row, so the value does reach the client.

Expected behavior

A cancelled, rejected or expired order shows a readable status tag — the default grey tag is the usual choice for a neutral state.

Passing no colour at all renders ant-design-vue's default grey tag, which is what "default" was presumably meant to express:

: t === "canceled" || t === "cancelled" || t === "rejected" || t === "expired" ? ""

"volcano" would be a reasonable alternative for rejected specifically, since it reads as a failure rather than a neutral outcome.

Filing this here because the SPA lives in the private QuantDinger-Vue repo and has no public issue tracker. Happy to open the PR there if a maintainer can grant access.

Deployment method

Docker Compose

Relevant logs

Backend VERSION: 5.0.1
Frontend: built from ghcr.io/openbyteinc/quantdinger-frontend (image version label 5.0.16)
Evidence read from the shipped bundles in the frontend container:
  assets/index-CU2gELkk.js          -> statusColor(), BrokerOrdersTable
  assets/ant-design-vue-D53c_Sr_.js -> preset colour list + ATag isPresetColor/getTagStyle
  assets/ant-design-vue-*.css       -> .ant-tag-has-color { border-color: transparent } / { color: #fff }

Backend response for the cancelled order (field name and value are correct):
  {"id": "...", "symbol": "SPY", "status": "canceled", ...}

No backend errors are logged; this is purely a rendering issue.