mgv-backoffice 1.6.0 → 1.9.0

package/src/utils/format.ts

@@ -0,0 +1,89 @@
+/**
+ * Locale-aware display formatters shared across back-office tables, logs and
+ * charts. All are pure and dependency-free; they take the "missing value"
+ * branch seriously so callers can hand them raw API values (which may be
+ * null/strings) without pre-sanitising.
+ */
+
+const EM_DASH = '—'
+
+/**
+ * Format a number with a fixed number of fraction digits, rendering an
+ * em-dash for null/undefined/non-finite input. Accepts numeric strings so
+ * BigDecimal-as-string API payloads pass through unchanged.
+ */
+export function fmtNumber(n: number | string | null | undefined, digits = 4): string {
+  if (n === null || n === undefined) return EM_DASH
+  if (typeof n === 'string' && n.trim() === '') return EM_DASH
+  const v = typeof n === 'string' ? Number(n) : n
+  if (!isFinite(v)) return EM_DASH
+  return v.toLocaleString(undefined, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  })
+}
+
+/**
+ * Format an ISO date string or epoch value as a locale date-time, falling
+ * back to the raw value on parse failure and an em-dash on empty input.
+ * Accepts numbers so epoch-millis timestamps pass through unchanged.
+ */
+export function fmtDate(s: string | number | null | undefined): string {
+  if (s === null || s === undefined || s === '') return EM_DASH
+  const d = new Date(s)
+  if (isNaN(d.getTime())) return String(s)
+  return d.toLocaleString()
+}
+
+/**
+ * Format an epoch-millis timestamp as a compact "Mon D, HH:MM" label —
+ * the form used for chart axes and tooltips.
+ */
+export function fmtDateTime(ms: number): string {
+  return new Date(ms).toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+/**
+ * Format an epoch-millis timestamp as a short "Mon D" calendar label.
+ */
+export function fmtDateShort(ms: number): string {
+  return new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+/**
+ * Format a price with precision that scales to magnitude: penny stocks and
+ * sub-cent crypto get more decimals so the value never collapses to "0.00".
+ */
+export function fmtPrice(n: number): string {
+  if (!isFinite(n) || n === 0) return n.toFixed(2)
+  const abs = Math.abs(n)
+  let digits = 2
+  if (abs < 0.0001) digits = 8
+  else if (abs < 0.01) digits = 6
+  else if (abs < 1) digits = 4
+  else if (abs < 100) digits = 3
+  return n.toLocaleString(undefined, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  })
+}
+
+/**
+ * Format a percentage with an explicit sign (e.g. "+2.50%", "-1.00%").
+ */
+export function fmtPct(n: number, digits = 2): string {
+  return `${n >= 0 ? '+' : ''}${n.toFixed(digits)}%`
+}
+
+/**
+ * Format a signed USD amount with an explicit leading sign (e.g. "+$5.00").
+ */
+export function fmtUsd(v: number): string {
+  const sign = v < 0 ? '-' : '+'
+  return `${sign}$${Math.abs(v).toFixed(2)}`
+}

package/src/utils/httpColors.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import {
+  methodBadgeSolid,
+  methodBadgeBright,
+  statusBadgeSolid,
+  statusBadgeTinted,
+} from './httpColors'
+
+describe('methodBadgeSolid', () => {
+  it('maps known methods (case-insensitive)', () => {
+    expect(methodBadgeSolid('GET')).toBe('bg-blue-600')
+    expect(methodBadgeSolid('get')).toBe('bg-blue-600')
+    expect(methodBadgeSolid('DELETE')).toBe('bg-red-600')
+  })
+
+  it('falls back to gray for missing/unknown methods', () => {
+    expect(methodBadgeSolid()).toBe('bg-gray-600')
+    expect(methodBadgeSolid('TRACE')).toBe('bg-gray-600')
+  })
+})
+
+describe('methodBadgeBright', () => {
+  it('maps known methods', () => {
+    expect(methodBadgeBright('POST')).toBe('bg-green-500')
+  })
+
+  it('falls back to gray', () => {
+    expect(methodBadgeBright()).toBe('bg-gray-500')
+    expect(methodBadgeBright('WAT')).toBe('bg-gray-500')
+  })
+})
+
+describe('statusBadgeSolid', () => {
+  it('buckets by status class', () => {
+    expect(statusBadgeSolid(204)).toBe('bg-emerald-600')
+    expect(statusBadgeSolid(301)).toBe('bg-blue-600')
+    expect(statusBadgeSolid(404)).toBe('bg-amber-600')
+    expect(statusBadgeSolid(500)).toBe('bg-red-600')
+  })
+
+  it('falls back to gray for missing/unknown codes', () => {
+    expect(statusBadgeSolid()).toBe('bg-gray-600')
+    expect(statusBadgeSolid(100)).toBe('bg-gray-600')
+  })
+})
+
+describe('statusBadgeTinted', () => {
+  it('returns dark-theme classes', () => {
+    expect(statusBadgeTinted(200, true)).toBe('bg-green-500/15 text-green-400')
+    expect(statusBadgeTinted(404, true)).toBe('bg-yellow-500/15 text-yellow-400')
+    expect(statusBadgeTinted(500, true)).toBe('bg-red-500/15 text-red-400')
+  })
+
+  it('returns light-theme classes', () => {
+    expect(statusBadgeTinted(200, false)).toBe('bg-green-100 text-green-800')
+    expect(statusBadgeTinted(404, false)).toBe('bg-yellow-100 text-yellow-800')
+  })
+
+  it('defaults a missing status to 2xx', () => {
+    expect(statusBadgeTinted(undefined, false)).toBe('bg-green-100 text-green-800')
+  })
+})

package/src/utils/pnl.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { computePnL } from './pnl'
+
+describe('computePnL', () => {
+  it('computes absolute and percent PnL for a profitable position', () => {
+    expect(computePnL({ buyPrice: 100, lastPrice: 110, filledQty: 5 })).toEqual({
+      pnlUsd: 50,
+      pnlPct: 10,
+    })
+  })
+
+  it('computes a loss', () => {
+    expect(computePnL({ buyPrice: 100, lastPrice: 90, filledQty: 2 })).toEqual({
+      pnlUsd: -20,
+      pnlPct: -10,
+    })
+  })
+
+  it('accepts numeric strings', () => {
+    expect(computePnL({ buyPrice: '100', lastPrice: '110', filledQty: '5' })).toEqual({
+      pnlUsd: 50,
+      pnlPct: 10,
+    })
+  })
+
+  it('returns nulls when any input is missing', () => {
+    const nulls = { pnlUsd: null, pnlPct: null }
+    expect(computePnL({ buyPrice: null, lastPrice: 110, filledQty: 5 })).toEqual(nulls)
+    expect(computePnL({ buyPrice: 100, lastPrice: undefined, filledQty: 5 })).toEqual(nulls)
+    expect(computePnL({ buyPrice: 100, lastPrice: 110, filledQty: null })).toEqual(nulls)
+  })
+
+  it('returns nulls for non-finite inputs (guards Number(null) === 0 footgun)', () => {
+    expect(computePnL({ buyPrice: 100, lastPrice: 'abc', filledQty: 5 })).toEqual({
+      pnlUsd: null,
+      pnlPct: null,
+    })
+  })
+
+  it('returns nulls when buyPrice is not positive', () => {
+    const nulls = { pnlUsd: null, pnlPct: null }
+    expect(computePnL({ buyPrice: 0, lastPrice: 110, filledQty: 5 })).toEqual(nulls)
+    expect(computePnL({ buyPrice: -5, lastPrice: 110, filledQty: 5 })).toEqual(nulls)
+  })
+})

package/src/utils/pnl.ts

@@ -0,0 +1,40 @@
+/**
+ * Unrealised profit-and-loss for an open position, expressed in both
+ * absolute currency and percentage terms.
+ */
+export interface PnL {
+  pnlUsd: number | null
+  pnlPct: number | null
+}
+
+/** Minimal position shape needed to compute mark-to-market PnL. */
+export interface PnLInputs {
+  buyPrice: number | string | null | undefined
+  lastPrice: number | string | null | undefined
+  filledQty: number | string | null | undefined
+}
+
+/**
+ * Compute unrealised PnL from the latest observed market price. Returns
+ * `{ null, null }` when any input is missing or non-finite (a freshly opened
+ * position not yet priced, a corrupt row, etc.) so the UI can render a
+ * placeholder instead of a bogus figure.
+ *
+ * The explicit null guard matters: `Number(null) === 0`, which would
+ * otherwise silently produce PnL = -buyPrice * qty when a price is absent.
+ */
+export function computePnL(row: PnLInputs): PnL {
+  if (row.buyPrice == null || row.lastPrice == null || row.filledQty == null) {
+    return { pnlUsd: null, pnlPct: null }
+  }
+  const buy = Number(row.buyPrice)
+  const last = Number(row.lastPrice)
+  const qty = Number(row.filledQty)
+  if (!isFinite(buy) || !isFinite(last) || !isFinite(qty) || buy <= 0) {
+    return { pnlUsd: null, pnlPct: null }
+  }
+  return {
+    pnlUsd: (last - buy) * qty,
+    pnlPct: ((last - buy) / buy) * 100,
+  }
+}

package/src/utils/sanitizeHtml.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { sanitizeHtml, isSafeHref } from './sanitizeHtml'
+
+describe('sanitizeHtml', () => {
+  it('returns empty string for falsy input', () => {
+    expect(sanitizeHtml(null)).toBe('')
+    expect(sanitizeHtml(undefined)).toBe('')
+    expect(sanitizeHtml('')).toBe('')
+  })
+
+  it('keeps allow-listed formatting tags', () => {
+    expect(sanitizeHtml('<b>bold</b>')).toBe('<b>bold</b>')
+    expect(sanitizeHtml('<p>para</p>')).toBe('<p>para</p>')
+  })
+
+  it('drops script tags and their contents', () => {
+    expect(sanitizeHtml('<p>Hi<script>alert(1)</script></p>')).toBe('<p>Hi</p>')
+  })
+
+  it('drops style/iframe contents entirely', () => {
+    expect(sanitizeHtml('<div><style>.x{}</style>text</div>')).toBe('<div>text</div>')
+    expect(sanitizeHtml('<iframe src="x"></iframe>after')).toBe('after')
+  })
+
+  it('unwraps disallowed elements to their text', () => {
+    expect(sanitizeHtml('<h1>Title</h1>')).toBe('Title')
+  })
+
+  it('strips inline event handlers and other attributes', () => {
+    expect(sanitizeHtml('<p onclick="evil()">hi</p>')).toBe('<p>hi</p>')
+    expect(sanitizeHtml('<span class="x" style="color:red">y</span>')).toBe('<span>y</span>')
+  })
+
+  it('hardens safe anchors with rel/target', () => {
+    const out = sanitizeHtml('<a href="https://example.com">link</a>')
+    expect(out).toContain('href="https://example.com"')
+    expect(out).toContain('rel="noopener noreferrer"')
+    expect(out).toContain('target="_blank"')
+  })
+
+  it('strips unsafe href schemes', () => {
+    const out = sanitizeHtml('<a href="javascript:alert(1)">x</a>')
+    expect(out).not.toContain('javascript')
+    expect(out).not.toContain('href')
+    // No surviving href means no link-hardening attributes are added.
+    expect(out).not.toContain('target')
+  })
+
+  it('preserves the title attribute on anchors', () => {
+    const out = sanitizeHtml('<a href="https://x.io" title="hi">x</a>')
+    expect(out).toContain('title="hi"')
+  })
+})
+
+describe('isSafeHref', () => {
+  it('accepts safe schemes and relative/anchor links', () => {
+    expect(isSafeHref('http://x.com')).toBe(true)
+    expect(isSafeHref('https://x.com')).toBe(true)
+    expect(isSafeHref('mailto:a@b.com')).toBe(true)
+    expect(isSafeHref('tel:+123')).toBe(true)
+    expect(isSafeHref('/relative/path')).toBe(true)
+    expect(isSafeHref('#anchor')).toBe(true)
+    expect(isSafeHref('')).toBe(true)
+  })
+
+  it('rejects dangerous schemes', () => {
+    expect(isSafeHref('javascript:alert(1)')).toBe(false)
+    expect(isSafeHref('data:text/html,<script>')).toBe(false)
+    expect(isSafeHref('vbscript:msgbox')).toBe(false)
+    expect(isSafeHref('file:///etc/passwd')).toBe(false)
+  })
+
+  it('is case- and whitespace-insensitive', () => {
+    expect(isSafeHref('  JAVASCRIPT:alert(1)  ')).toBe(false)
+    expect(isSafeHref('  HTTPS://x.com  ')).toBe(true)
+  })
+})

package/src/utils/util.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { getBaseColor, getBaseColorOf } from './util'
+import { AlertEnum } from '../enums/AlertEnum'
+import { ColorsEnums } from '../enums/ColorsEnums'
+
+describe('getBaseColor', () => {
+  it('maps each alert variant to a Tailwind colour name', () => {
+    expect(getBaseColor(AlertEnum.ERROR)).toBe('red')
+    expect(getBaseColor(AlertEnum.SUCCESS)).toBe('green')
+    expect(getBaseColor(AlertEnum.INFO)).toBe('gray')
+    expect(getBaseColor(AlertEnum.WARNING)).toBe('yellow')
+  })
+})
+
+describe('getBaseColorOf', () => {
+  it('maps each colour enum to a Tailwind colour name', () => {
+    expect(getBaseColorOf(ColorsEnums.GREEN)).toBe('green')
+    expect(getBaseColorOf(ColorsEnums.RED)).toBe('red')
+    expect(getBaseColorOf(ColorsEnums.BLUE)).toBe('blue')
+    expect(getBaseColorOf(ColorsEnums.YELLOW)).toBe('yellow')
+    expect(getBaseColorOf(ColorsEnums.BLACK)).toBe('black')
+    expect(getBaseColorOf(ColorsEnums.GRAY)).toBe('gray')
+  })
+
+  it('returns an empty string for NONE', () => {
+    expect(getBaseColorOf(ColorsEnums.NONE)).toBe('')
+  })
+})