Cell displays

import { DefaultDisplays } from "@antelopejs/interface-dms/base/table-view";

@Listable()
@Column({
  name: "Status",
  type: new DefaultDataTypes.SelectType({ items: JOB_RUN_STATUSES }),
  filterable: true,
  display: new DefaultDisplays.StatusPillDisplay({
    tones: { healthy: "success", running: "info", degraded: "warning", failing: "error" },
    subField: "lastError",
    liveValues: ["running"],
  }),
  size: 220,
})
declare status: JobRunStatus;

@Listable()
@Column({
  name: "Steps",
  type: new DefaultDataTypes.NumberType({ min: 0 }),
  display: new DefaultDisplays.ProgressDisplay({
    doneField: "doneSteps",
    totalField: "totalSteps",
    errorField: "failedSteps",
  }),
})
declare doneSteps: number;

import { type CellSubline, Column, DefaultDisplays } from "@antelopejs/interface-dms/base/table-view";

const SUB_STATE = "$saas.invoice.sub_state";
const day = (date: Date) => ({ type: "date", value: date.toISOString(), format: "day" }) as const;

@Listable()
@Column({
  name: "$saas.invoices.column.status",
  type: statusType("invoice"),
  display: new DefaultDisplays.StatusPillDisplay({
    tones: { draft: "neutral", open: "info", paid: "success", void: "neutral", uncollectible: "error" },
    subField: "statusDetail",
    subTone: "muted",
  }),
  size: 200,
})
declare status: InvoiceStatus;

@Listable(["status", "attemptCount", "nextPaymentAttemptAt", "dueAt"])
get statusDetail(): CellSubline | null {
  if (this.status === "open" && this.attemptCount) {
    return this.nextPaymentAttemptAt
      ? { text: { key: `${SUB_STATE}.retry`, params: { date: day(this.nextPaymentAttemptAt) } }, tone: "error" }
      : { text: `${SUB_STATE}.retries_over`, tone: "error" };
  }
  if (this.status === "open" && this.dueAt) {
    return { text: { key: `${SUB_STATE}.due`, params: { date: day(this.dueAt) } } };
  }
  if (this.status === "uncollectible") return { text: `${SUB_STATE}.written_off`, tone: "error" };
  return null;
}

{
  "saas": {
    "invoice": {
      "sub_state": {
        "retry": "Payment failed · retry {date}",
        "retries_over": "Payment failed · no retry left",
        "due": "Due {date}",
        "written_off": "Written off"
      }
    }
  }
}

// "Business" over "€29.00 × 23 seats / month"
@Column({ name: "$saas.workspaces.column.plan", type: new DefaultDataTypes.StringType(),
  display: new DefaultDisplays.TwoLineDisplay({ subField: "planDetail" }) })
declare planName: string | null;

@Listable(["planUnitAmountMinor", "currency", "seats", "planInterval"])
get planDetail(): ComposedText | null {
  if (!this.currency) return null;
  return {
    key: "$saas.workspaces.plan_cell.price_times_seats", // "{price} × {count} seat / {interval} | {price} × {count} seats / {interval}"
    params: {
      price: { type: "money", value: this.planUnitAmountMinor, currency: this.currency },
      count: { type: "count", value: this.seats },
      interval: { key: `$saas.workspaces.interval.${this.planInterval}` },
    },
  };
}

// "€49.00" over "At risk" in red, under a money column
@Column({ name: "$saas.workspaces.column.mrr", type: new MoneyCentsType(),
  display: new DefaultDisplays.TwoLineDisplay({ subField: "mrrNote" }) })
declare mrrMinor: number;

// "Renews in 3 days" over "Oct 12, 2026", red when the workspace will be suspended
@Column({ name: "$saas.workspaces.column.renews", type: new DefaultDataTypes.DateType(),
  display: new DefaultDisplays.TwoLineDisplay({ primaryField: "renewalSummary", subField: "renewalDate" }) })
declare renewsAt: Date | null;

@Listable(["renewalKind", "renewsAt"])
get renewalSummary(): ComposedText | null {
  if (!this.renewalKind || !this.renewsAt) return null;
  return { key: `$saas.workspaces.renewal.${this.renewalKind}`, params: { count: { type: "count", value: daysUntil(this.renewsAt) } } };
}

@Listable(["renewalKind", "renewsAt"])
get renewalDate(): CellSubline | null {
  if (!this.renewsAt) return null;
  return {
    text: { key: "$saas.workspaces.renewal.date", params: { date: { type: "date", value: this.renewsAt.toISOString() } } },
    tone: this.renewalKind === "suspends" ? "error" : undefined,
  };
}

const TONE_BY_CLASS: Record<number, Tone> = { 2: "success", 3: "info", 4: "warning", 5: "error" };

@Column({ name: "Status", type: new DefaultDataTypes.NumberType(),
  display: new DefaultDisplays.StatusPillDisplay({ toneField: "statusTone" }) })
declare status: number;

@Listable(["status"])
get statusTone(): Tone {
  return TONE_BY_CLASS[Math.floor(this.status / 100)] ?? "neutral";
}

const SLOW_MS = 1000;

// "2,149 ms" in orange for a slow request
@Column({ name: "Duration", type: new DefaultDataTypes.NumberType(),
  display: new DefaultDisplays.DurationDisplay({ format: "ms", toneField: "durationTone" }) })
declare durationMs: number;

@Listable(["durationMs"])
get durationTone(): Tone | null {
  return this.durationMs >= SLOW_MS ? "warning" : null;
}

// The error message in red, the other rows unchanged
@Column({ name: "Message", type: new DefaultDataTypes.StringType(),
  display: new DefaultDisplays.TextDisplay({ toneField: "messageTone" }) })
declare message: string;

@Listable(["status"])
get messageTone(): Tone | null {
  return this.status >= 500 ? "error" : null;
}

// The locales a template is written in: present ones solid, missing ones outlined.
@Column({ name: "Locales", type: new DefaultDataTypes.StringType(), display: new DefaultDisplays.PillsDisplay() })
get locales(): DefaultDisplays.PillItem[] {
  return LOCALES.map((locale) =>
    this.bodies[locale] ? { label: locale, tone: "primary", variant: "soft" } : { label: locale, variant: "outline" },
  );
}

import { ColumnDisplay, RegisterDisplay } from "@antelopejs/interface-dms/base/table-view";

@RegisterDisplay("automation:last-runs")
export class LastRunsDisplay extends ColumnDisplay<{ limit?: number }> {}

@Listable()
@Column({ name: "Last runs", type: new DefaultDataTypes.StringType(), display: new LastRunsDisplay({ limit: 12 }) })
declare lastRuns: string;