mgv-backoffice 1.4.0 → 1.8.0

package/src/components/EarningsCard.vue

@@ -7,6 +7,7 @@ interface Props {
   subtitle?: string
   badge?: string
   currency?: string
+  decimals?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,22 +16,23 @@ const props = withDefaults(defineProps<Props>(), {
   subtitle: 'Lifetime commission',
   badge: '',
   currency: '$',
+  decimals: 2,
 })
 
 const formattedAmount = computed(() => {
   return props.currency + props.amount.toLocaleString('en-US', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
+    minimumFractionDigits: props.decimals,
+    maximumFractionDigits: props.decimals,
   })
 })
 </script>
 
 <template>
-  <div class="relative rounded-xl border-2 border-dashed border-orange-300 bg-white p-6">
+  <div class="relative rounded-xl border-2 border-dashed border-orange-300 bg-white p-6 dark:border-orange-700 dark:bg-slate-800">
     <!-- Badge -->
     <div
       v-if="badge"
-      class="absolute right-4 top-4 rounded-md bg-orange-100 px-3 py-1 text-xs font-bold tracking-wide text-orange-500"
+      class="absolute right-4 top-4 rounded-md bg-orange-100 px-3 py-1 text-xs font-bold tracking-wide text-orange-500 dark:bg-orange-900/40 dark:text-orange-400"
     >
       {{ badge }}
     </div>
@@ -39,23 +41,23 @@ const formattedAmount = computed(() => {
     <div class="flex items-start justify-between">
       <div>
         <!-- Title -->
-        <p class="text-sm font-bold tracking-wide text-gray-800">
+        <p class="text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200">
           {{ title }}
         </p>
 
         <!-- Amount -->
-        <p class="mt-1 text-4xl font-bold text-gray-400">
+        <p class="mt-1 text-4xl font-bold text-gray-400 dark:text-slate-300">
           {{ formattedAmount }}
         </p>
 
         <!-- Subtitle -->
-        <p class="mt-1 text-sm font-medium text-orange-400">
+        <p class="mt-1 text-sm font-medium text-orange-400 dark:text-orange-400">
           {{ subtitle }}
         </p>
       </div>
 
       <!-- Chart icon -->
-      <div class="mt-6 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50">
+      <div class="mt-6 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 dark:bg-orange-900/30">
         <svg
           class="h-6 w-6 text-orange-400"
           viewBox="0 0 24 24"

package/src/index.ts

@@ -26,6 +26,9 @@ export { default as BaseNotFoundPage } from './components/BaseNotFoundPage.vue'
 export { default as BaseSidebar } from './components/BaseSidebar.vue'
 export { default as BaseEntityPickerModal } from './components/BaseEntityPickerModal.vue'
 export { default as BaseAppLayout } from './components/BaseAppLayout.vue'
+export { default as BasePageHeader } from './components/BasePageHeader.vue'
+export { default as BaseToolbarButton } from './components/BaseToolbarButton.vue'
+export { default as BaseActionButton } from './components/BaseActionButton.vue'
 
 // Composables
 export { useTheme } from './composables/useTheme'
@@ -62,3 +65,15 @@ export {
   statusBadgeSolid,
   statusBadgeTinted,
 } from './utils/httpColors'
+export { sanitizeHtml, isSafeHref } from './utils/sanitizeHtml'
+export {
+  fmtNumber,
+  fmtDate,
+  fmtDateTime,
+  fmtDateShort,
+  fmtPrice,
+  fmtPct,
+  fmtUsd,
+} from './utils/format'
+export { computePnL } from './utils/pnl'
+export type { PnL, PnLInputs } from './utils/pnl'

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
+  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
+  try {
+    return new Date(s).toLocaleString()
+  } catch {
+    return String(s)
+  }
+}
+
+/**
+ * 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 {
+  return `${v >= 0 ? '+' : ''}$${v.toFixed(2)}`
+}

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.ts

@@ -0,0 +1,116 @@
+/**
+ * Allow-list HTML sanitizer for strings bound into `v-html`.
+ *
+ * Use whenever rich HTML from any source (backend payloads, user input,
+ * imported content) is rendered via `v-html`. Even "trusted" sources
+ * should be sanitised belt-and-suspenders so a future change can't
+ * smuggle script tags, inline event handlers, or `javascript:` hrefs
+ * into the page.
+ *
+ * Implementation:
+ *   1. Parse with `DOMParser` into an off-document tree.
+ *   2. Walk the tree once, replacing any disallowed element with its
+ *      `textContent` (the readable text survives, the wrapper is gone).
+ *   3. On every element, strip every attribute except the per-tag
+ *      allow-list below.
+ *   4. Re-validate `a[href]` against an explicit scheme whitelist —
+ *      `javascript:`, `data:`, `vbscript:`, and `file:` are rejected.
+ *   5. Force `rel="noopener noreferrer" target="_blank"` on every
+ *      surviving anchor so external links can't reach back through
+ *      `window.opener`.
+ *
+ * Returns the cleaned HTML string, ready for `v-html`. Browser-only —
+ * relies on `DOMParser`.
+ */
+
+const ALLOWED_TAGS: ReadonlySet<string> = new Set([
+  'A', 'B', 'STRONG', 'I', 'EM', 'CODE', 'PRE', 'BR',
+  'P', 'UL', 'OL', 'LI', 'SPAN', 'DIV',
+])
+
+/**
+ * Tags whose contents are also dropped (not unwrapped as text). For
+ * most disallowed elements we keep the inner text so the user-visible
+ * copy survives even when the wrapper is stripped, but for
+ * code-bearing elements like `<script>` and `<style>` the inner text
+ * is the payload itself — leaving it as a visible text node would
+ * splat raw JS / CSS source into the rendered output. Drop the
+ * element entirely instead.
+ */
+const STRIP_WITH_CONTENT: ReadonlySet<string> = new Set([
+  'SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'NOSCRIPT', 'TEMPLATE',
+])
+
+const ALLOWED_ATTRS_BY_TAG: Readonly<Record<string, ReadonlySet<string>>> = {
+  A: new Set(['href', 'title']),
+}
+
+/**
+ * Returns true when the supplied href is safe to render as-is. Blocks
+ * every scheme that has historically been a vector for XSS or local-
+ * file leakage.
+ */
+export function isSafeHref(value: string): boolean {
+  const trimmed = value.trim().toLowerCase()
+  return (
+    trimmed.startsWith('http://')
+    || trimmed.startsWith('https://')
+    || trimmed.startsWith('mailto:')
+    || trimmed.startsWith('tel:')
+    || trimmed.startsWith('/')
+    || trimmed.startsWith('#')
+    || trimmed === ''
+  )
+}
+
+function sanitizeNode(node: Node): void {
+  if (node.nodeType !== Node.ELEMENT_NODE) return
+  const el = node as Element
+  const tag = el.tagName.toUpperCase()
+  // Disallowed element: replace with its textContent so the text the
+  // user is meant to read survives, but the wrapper is gone. For
+  // code-bearing elements (`<script>`, `<style>`, etc.) we drop the
+  // contents too so the JS/CSS source itself doesn't render as
+  // visible text.
+  if (!ALLOWED_TAGS.has(tag)) {
+    if (STRIP_WITH_CONTENT.has(tag)) {
+      el.remove()
+    } else {
+      el.replaceWith(document.createTextNode(el.textContent ?? ''))
+    }
+    return
+  }
+  // Strip every attribute that isn't in the per-tag allow-list, and
+  // re-validate `a[href]` against `isSafeHref`.
+  const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tag] ?? new Set<string>()
+  for (const attr of Array.from(el.attributes)) {
+    if (!allowedAttrs.has(attr.name.toLowerCase())) {
+      el.removeAttribute(attr.name)
+      continue
+    }
+    if (tag === 'A' && attr.name.toLowerCase() === 'href' && !isSafeHref(attr.value)) {
+      el.removeAttribute(attr.name)
+    }
+  }
+  // External-link hardening: every surviving anchor opens safely.
+  if (tag === 'A' && el.hasAttribute('href')) {
+    el.setAttribute('rel', 'noopener noreferrer')
+    el.setAttribute('target', '_blank')
+  }
+  // Recurse over children — copy the live list first so removals don't
+  // skip siblings.
+  for (const child of Array.from(el.childNodes)) {
+    sanitizeNode(child)
+  }
+}
+
+export function sanitizeHtml(raw: string | undefined | null): string {
+  if (!raw) return ''
+  const doc = new DOMParser().parseFromString(`<div>${raw}</div>`, 'text/html')
+  const root = doc.body.firstElementChild
+  if (!root) return ''
+  for (const child of Array.from(root.childNodes)) {
+    sanitizeNode(child)
+  }
+  return root.innerHTML
+}