mgv-backoffice 1.9.0 → 1.13.0

package/src/components/BaseSpinner.vue

@@ -1,3 +1,76 @@
-<template>
-<div class="w-4 h-4 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
-</template>
+<template>
+  <!--
+    Animated loading spinner — a spinning ring with a neutral track and a
+    coloured leading arc.
+
+    Props:
+      • size  — diameter + ring thickness. 'sm' (16px) is the default and
+        reproduces the original spinner; 'md' (24px), 'lg' (32px) and
+        'xl' (48px) step up for full-page / empty-state loaders.
+      • color — the colour of the spinning arc (`border-t-*`). The track
+        stays neutral gray. Defaults to 'blue' to match the original.
+
+    With no props it renders exactly the legacy spinner, so existing
+    `<BaseSpinner />` call sites are unaffected.
+  -->
+  <div
+    class="border-gray-200 rounded-full animate-spin"
+    :class="[sizeClass, colorClass]"
+    role="status"
+    aria-label="Loading"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
+type SpinnerColor =
+  | 'blue'
+  | 'emerald'
+  | 'sky'
+  | 'indigo'
+  | 'teal'
+  | 'purple'
+  | 'red'
+  | 'amber'
+
+const props = withDefaults(
+  defineProps<{
+    size?: SpinnerSize
+    color?: SpinnerColor
+  }>(),
+  {
+    size: 'sm',
+    color: 'blue',
+  },
+)
+
+// Diameter pairs with a proportional ring thickness. Full literal strings
+// so Tailwind detects them at build time.
+const sizeClass = computed(() => {
+  const sizes: Record<SpinnerSize, string> = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-6 h-6 border-2',
+    lg: 'w-8 h-8 border-4',
+    xl: 'w-12 h-12 border-4',
+  }
+  return sizes[props.size]
+})
+
+// Only the leading arc (`border-t-*`) is tinted; the rest of the ring is
+// the neutral gray track from the template.
+const colorClass = computed(() => {
+  const colors: Record<SpinnerColor, string> = {
+    blue: 'border-t-blue-500',
+    emerald: 'border-t-emerald-500',
+    sky: 'border-t-sky-500',
+    indigo: 'border-t-indigo-500',
+    teal: 'border-t-teal-500',
+    purple: 'border-t-purple-500',
+    red: 'border-t-red-500',
+    amber: 'border-t-amber-500',
+  }
+  return colors[props.color]
+})
+</script>

package/src/components/EarningsCard.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EarningsCard from './EarningsCard.vue'
+
+describe('EarningsCard', () => {
+  it('formats a finite amount with currency and decimals', () => {
+    const w = mount(EarningsCard, { props: { amount: 1234.5, currency: '$', decimals: 2 } })
+    expect(w.text()).toContain('$1,234.50')
+  })
+
+  it('falls back to a zeroed amount when given NaN (never renders "NaN")', () => {
+    const w = mount(EarningsCard, { props: { amount: Number.NaN } })
+    expect(w.text()).not.toContain('NaN')
+    expect(w.text()).toContain('$0.00')
+  })
+
+  it('falls back to a zeroed amount when given Infinity', () => {
+    const w = mount(EarningsCard, { props: { amount: Number.POSITIVE_INFINITY } })
+    expect(w.text()).not.toContain('Infinity')
+    expect(w.text()).toContain('$0.00')
+  })
+
+  it('defaults to the orange accent for backward compatibility', () => {
+    const w = mount(EarningsCard, { props: { amount: 1 } })
+    expect(w.html()).toContain('border-orange-300')
+  })
+
+  it('applies the emerald accent when requested', () => {
+    const w = mount(EarningsCard, { props: { amount: 1, accent: 'emerald' } })
+    expect(w.html()).toContain('border-emerald-300')
+    expect(w.html()).not.toContain('border-orange-300')
+  })
+})

package/src/components/EarningsCard.vue

@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+/**
+ * Accent colour of the card. Defaults to `orange` so existing consumers are
+ * unaffected; `emerald` lets a host app tint the card to a green-themed brand.
+ * Each accent carries the full literal Tailwind class strings (rather than a
+ * single interpolated hue) so the classes are statically detectable and the
+ * two themes can differ in more than hue — e.g. orange renders the amount in
+ * neutral grey while emerald renders it in the accent itself.
+ */
+type Accent = 'orange' | 'emerald'
+
 interface Props {
   title?: string
   amount?: number
@@ -8,6 +18,7 @@ interface Props {
   badge?: string
   currency?: string
   decimals?: number
+  accent?: Accent
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -17,22 +28,61 @@ const props = withDefaults(defineProps<Props>(), {
   badge: '',
   currency: '$',
   decimals: 2,
+  accent: 'orange',
 })
 
+const ACCENTS: Record<Accent, {
+  border: string
+  badge: string
+  amount: string
+  subtitle: string
+  iconBox: string
+  icon: string
+}> = {
+  orange: {
+    border: 'border-orange-300 dark:border-orange-700',
+    badge: 'bg-orange-100 text-orange-500 dark:bg-orange-900/40 dark:text-orange-400',
+    amount: 'text-gray-400 dark:text-slate-300',
+    subtitle: 'text-orange-400 dark:text-orange-400',
+    iconBox: 'bg-orange-50 dark:bg-orange-900/30',
+    icon: 'text-orange-400',
+  },
+  emerald: {
+    border: 'border-emerald-300 dark:border-emerald-700',
+    badge: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400',
+    amount: 'text-emerald-500 dark:text-emerald-400',
+    subtitle: 'text-emerald-500 dark:text-emerald-400',
+    iconBox: 'bg-emerald-50 dark:bg-emerald-900/30',
+    icon: 'text-emerald-500',
+  },
+}
+
+const cls = computed(() => ACCENTS[props.accent])
+
 const formattedAmount = computed(() => {
-  return props.currency + props.amount.toLocaleString('en-US', {
-    minimumFractionDigits: props.decimals,
-    maximumFractionDigits: props.decimals,
-  })
+  // Guard against NaN/Infinity reaching toLocaleString (which would render the
+  // literal "NaN"); fall back to a zeroed amount so the card stays readable.
+  const amount = Number.isFinite(props.amount) ? props.amount : 0
+  return (
+    props.currency +
+    amount.toLocaleString('en-US', {
+      minimumFractionDigits: props.decimals,
+      maximumFractionDigits: props.decimals,
+    })
+  )
 })
 </script>
 
 <template>
-  <div class="relative rounded-xl border-2 border-dashed border-orange-300 bg-white p-6 dark:border-orange-700 dark:bg-slate-800">
+  <div
+    class="relative rounded-xl border-2 border-dashed bg-white p-6 dark:bg-slate-800"
+    :class="cls.border"
+  >
     <!-- 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 dark:bg-orange-900/40 dark:text-orange-400"
+      class="absolute right-4 top-4 rounded-md px-3 py-1 text-xs font-bold tracking-wide"
+      :class="cls.badge"
     >
       {{ badge }}
     </div>
@@ -46,20 +96,24 @@ const formattedAmount = computed(() => {
         </p>
 
         <!-- Amount -->
-        <p class="mt-1 text-4xl font-bold text-gray-400 dark:text-slate-300">
+        <p class="mt-1 text-4xl font-bold" :class="cls.amount">
           {{ formattedAmount }}
         </p>
 
         <!-- Subtitle -->
-        <p class="mt-1 text-sm font-medium text-orange-400 dark:text-orange-400">
+        <p class="mt-1 text-sm font-medium" :class="cls.subtitle">
           {{ subtitle }}
         </p>
       </div>
 
       <!-- Chart icon -->
-      <div class="mt-6 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 dark:bg-orange-900/30">
+      <div
+        class="mt-6 flex h-12 w-12 items-center justify-center rounded-xl"
+        :class="cls.iconBox"
+      >
         <svg
-          class="h-6 w-6 text-orange-400"
+          class="h-6 w-6"
+          :class="cls.icon"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"

package/src/enums/BaseButtonEnum.ts

@@ -4,6 +4,10 @@ export enum BaseButtonEnum {
     WHITE = "WHITE",
     DARK = "DARK",
     GREEN = "GREEN",
+    EMERALD = "EMERALD",
     YELLOW = "YELLOW",
     PURPLE = "PURPLE",
+    SKY = "SKY",
+    GRAY = "GRAY",
+    AMBER = "AMBER",
 }

package/src/utils/pnl.test.ts

@@ -42,4 +42,10 @@ describe('computePnL', () => {
     expect(computePnL({ buyPrice: 0, lastPrice: 110, filledQty: 5 })).toEqual(nulls)
     expect(computePnL({ buyPrice: -5, lastPrice: 110, filledQty: 5 })).toEqual(nulls)
   })
+
+  it('returns nulls when lastPrice is not positive (corrupt row / bad quote, not a real -100% loss)', () => {
+    const nulls = { pnlUsd: null, pnlPct: null }
+    expect(computePnL({ buyPrice: 100, lastPrice: 0, filledQty: 2 })).toEqual(nulls)
+    expect(computePnL({ buyPrice: 100, lastPrice: -5, filledQty: 2 })).toEqual(nulls)
+  })
 })

package/src/utils/pnl.ts

@@ -30,7 +30,12 @@ export function computePnL(row: PnLInputs): PnL {
   const buy = Number(row.buyPrice)
   const last = Number(row.lastPrice)
   const qty = Number(row.filledQty)
-  if (!isFinite(buy) || !isFinite(last) || !isFinite(qty) || buy <= 0) {
+  // `last <= 0` mirrors the `buy <= 0` guard: a real traded price is always
+  // positive, so a zero/negative last price means a corrupt row or a bad quote
+  // parse — never an asset that genuinely went to zero. Without this, such a row
+  // yields pnlUsd = (0 - buy) * qty = -notional, a phantom ~100% loss that
+  // silently drags portfolio totals far negative. Treat it as unpriced (null).
+  if (!isFinite(buy) || !isFinite(last) || !isFinite(qty) || buy <= 0 || last <= 0) {
     return { pnlUsd: null, pnlPct: null }
   }
   return {

package/tailwind.safelist.css

@@ -43,9 +43,25 @@
   bg-red-700 hover:bg-red-800 focus:ring-red-300 bg-red-400
   bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300
   bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 bg-purple-400
+  bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-300 bg-emerald-400
+  bg-sky-600 hover:bg-sky-700 focus:ring-sky-300 bg-sky-400
+  bg-amber-500 hover:bg-amber-600 focus:ring-amber-300 bg-amber-300
+  bg-gray-600 hover:bg-gray-700
   px-5 py-2.5 mr-2 mb-2 py-2 text-base py-3 px-6 py-3.5
-  font-medium rounded-lg rounded-full cursor-not-allowed
+  font-medium rounded-lg rounded-full cursor-not-allowed cursor-pointer
   inline w-4 h-4 me-3 animate-spin
+  border bg-transparent opacity-50 opacity-60
+  text-{blue,green,emerald,sky,red,amber,yellow,purple}-700
+  border-{blue,green,emerald,sky,red,amber,yellow,purple}-300
+  hover:bg-{blue,green,emerald,sky,red,amber,yellow,purple}-50
+  text-{blue,green,emerald,sky,red,amber,yellow,purple}-400
+  border-{blue,green,emerald,sky,red,amber,yellow,purple}-500/40
+  hover:bg-{blue,green,emerald,sky,red,amber,yellow,purple}-500/10
+  text-{blue,green,emerald,sky,yellow,purple}-600
+  text-red-500 text-amber-300
+  hover:bg-gray-100
+  text-gray-700 border-gray-300 hover:bg-gray-50
+  text-gray-500 text-gray-400 text-gray-300 border-gray-600 hover:bg-gray-800
 ");
 
 /* ── BaseToast ────────────────────────────────────────────── */
@@ -86,7 +102,9 @@
 
 /* ── BaseSpinner ──────────────────────────────────────────── */
 @source inline("
-  border-2 border-gray-200 border-t-blue-500 animate-spin
+  w-4 h-4 w-6 h-6 w-8 h-8 w-12 h-12 border-2 border-4
+  border-gray-200 rounded-full animate-spin
+  border-t-{blue,emerald,sky,indigo,teal,purple,red,amber}-500
 ");
 
 /* ── BaseRow ──────────────────────────────────────────────── */

package/tailwind.safelist.js

@@ -97,6 +97,23 @@ const safelist = [
   'hover:bg-purple-800',
   'focus:ring-purple-300',
   'bg-purple-400',
+  // EMERALD/SKY/AMBER/GRAY (filled) + outline + ghost variants
+  'bg-emerald-600', 'hover:bg-emerald-700', 'focus:ring-emerald-300', 'bg-emerald-400',
+  'bg-sky-600', 'hover:bg-sky-700', 'focus:ring-sky-300', 'bg-sky-400',
+  'bg-amber-500', 'hover:bg-amber-600', 'focus:ring-amber-300', 'bg-amber-300',
+  'bg-gray-600', 'hover:bg-gray-700',
+  'border', 'bg-transparent', 'opacity-50', 'opacity-60', 'cursor-pointer',
+  // outline tones
+  ...['blue', 'green', 'emerald', 'sky', 'red', 'amber', 'yellow', 'purple'].flatMap(c => [
+    `text-${c}-700`, `border-${c}-300`, `hover:bg-${c}-50`,
+    `text-${c}-400`, `border-${c}-500/40`, `hover:bg-${c}-500/10`,
+  ]),
+  // ghost tones (light 500/600 text, dark 300/400 text)
+  ...['blue', 'green', 'emerald', 'sky', 'yellow', 'purple'].flatMap(c => [`text-${c}-600`]),
+  'text-red-500', 'text-amber-300',
+  'hover:bg-gray-100',
+  'text-gray-700', 'border-gray-300', 'hover:bg-gray-50',
+  'text-gray-500', 'text-gray-400', 'text-gray-300', 'border-gray-600', 'hover:bg-gray-800',
   // Dynamic: switch on size
   'px-5',
   'py-2.5',
@@ -226,10 +243,19 @@ const safelist = [
   'text-green-500',
 
   // ── BaseSpinner ────────────────────────────────────────────
-  'border-2',
+  'w-4', 'h-4', 'w-6', 'h-6', 'w-8', 'h-8', 'w-12', 'h-12',
+  'border-2', 'border-4',
   'border-gray-200',
-  'border-t-blue-500',
+  'rounded-full',
   'animate-spin',
+  'border-t-blue-500',
+  'border-t-emerald-500',
+  'border-t-sky-500',
+  'border-t-indigo-500',
+  'border-t-teal-500',
+  'border-t-purple-500',
+  'border-t-red-500',
+  'border-t-amber-500',
 
   // ── BaseRow ────────────────────────────────────────────────
   'block',