mgv-backoffice 1.11.0 → 1.16.0

package/src/components/BaseCopyButton.vue

@@ -0,0 +1,135 @@
+<template>
+  <!--
+    Copy-to-clipboard icon button with transient "copied" feedback.
+    Click → writes `text` to the clipboard → swaps the clipboard icon
+    for a checkmark for `resetMs` → reverts. Emits `copied` / `error`
+    so the parent can surface its own toast (the button itself stays
+    silent — the icon swap is the built-in affordance).
+
+    Variants:
+      • ghost    — borderless `p-1` icon, emerald hover tint. The
+        affordance used next to inline IDs / code headers.
+      • bordered — `w-9 h-9` boxed button that turns emerald while
+        "copied". Pairs with a read-only input in a form row.
+
+    Copy strategy: the async Clipboard API where available, falling
+    back to a hidden-textarea `execCommand('copy')` so it still works
+    on insecure origins / older browsers.
+  -->
+  <button
+    type="button"
+    :title="title"
+    :aria-label="ariaLabel"
+    :class="buttonClass"
+    @click="handleCopy"
+  >
+    <ClipboardDocumentCheckIcon v-if="copied" :class="iconClass" aria-hidden="true" />
+    <ClipboardDocumentIcon v-else :class="iconClass" aria-hidden="true" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { ClipboardDocumentIcon, ClipboardDocumentCheckIcon } from '@heroicons/vue/24/outline'
+import { useTheme } from '../composables/useTheme'
+
+type CopyVariant = 'ghost' | 'bordered'
+
+const props = withDefaults(
+  defineProps<{
+    /** The text written to the clipboard on click. */
+    text: string
+    /** Used in the tooltip / aria-label, e.g. label="Stub ID" → "Copy Stub ID". */
+    label?: string
+    /** Visual style. See the component comment. */
+    variant?: CopyVariant
+    /** How long the checkmark stays before reverting (ms). */
+    resetMs?: number
+    /** Icon size class. */
+    iconClass?: string
+  }>(),
+  {
+    label: '',
+    variant: 'ghost',
+    resetMs: 1500,
+    iconClass: 'w-4 h-4',
+  },
+)
+
+const emit = defineEmits<{
+  copied: []
+  error: [error: unknown]
+}>()
+
+const { isDark } = useTheme()
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const title = computed(() => {
+  if (copied.value) return 'Copied!'
+  return props.label ? `Copy ${props.label}` : 'Copy'
+})
+const ariaLabel = computed(() => (props.label ? `Copy ${props.label}` : 'Copy'))
+
+const buttonClass = computed(() => {
+  if (props.variant === 'bordered') {
+    const base =
+      'inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0'
+    const state = copied.value
+      ? isDark.value
+        ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-400'
+        : 'border-emerald-300 bg-emerald-50 text-emerald-600'
+      : isDark.value
+        ? 'border-gray-600 text-gray-400 hover:text-gray-200 hover:bg-gray-800'
+        : 'border-gray-300 text-gray-400 hover:text-gray-600 hover:bg-gray-50'
+    return `${base} ${state}`
+  }
+  // ghost
+  const base = 'p-1 rounded transition-colors cursor-pointer'
+  const state = isDark.value
+    ? 'text-gray-400 hover:text-emerald-300 hover:bg-emerald-500/10'
+    : 'text-gray-500 hover:text-emerald-600 hover:bg-emerald-50'
+  return `${base} ${state}`
+})
+
+async function writeToClipboard(text: string): Promise<void> {
+  // Prefer the async Clipboard API, but fall back to execCommand if it
+  // is unavailable or throws (e.g. insecure origin / denied permission).
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return
+    }
+  } catch {
+    // fall through to the textarea fallback
+  }
+  const ta = document.createElement('textarea')
+  ta.value = text
+  ta.style.position = 'fixed'
+  ta.style.opacity = '0'
+  document.body.appendChild(ta)
+  ta.select()
+  const ok = document.execCommand('copy')
+  document.body.removeChild(ta)
+  if (!ok) throw new Error('Copy command was rejected')
+}
+
+async function handleCopy() {
+  try {
+    await writeToClipboard(props.text)
+    copied.value = true
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      copied.value = false
+    }, props.resetMs)
+    emit('copied')
+  } catch (e) {
+    emit('error', e)
+  }
+}
+
+onUnmounted(() => {
+  if (timer) clearTimeout(timer)
+})
+</script>

package/src/components/BaseEntityPickerModal.vue

@@ -21,7 +21,7 @@
 
     <!-- Loading -->
     <div v-if="loading" class="mt-4 flex justify-center py-6">
-      <BaseSpinner />
+      <BaseSpinner color="emerald" />
     </div>
 
     <!-- Error -->

package/src/components/BaseModalShell.vue

@@ -23,7 +23,45 @@
       :aria-labelledby="titleId"
       @click="onBackdrop"
     >
+      <!--
+        Scrollable layout — for large content modals. A flex column
+        capped at 90vh: header and footer stay fixed (`shrink-0`) while
+        the body scrolls (`overflow-y-auto flex-1`). Supports a subtitle
+        and a `header-actions` slot (e.g. a close button) on the right.
+      -->
       <div
+        v-if="scrollable"
+        class="relative w-full mx-4 rounded-lg shadow-xl max-h-[90vh] flex flex-col"
+        :class="[maxWidthClass, shellClass]"
+        @click.stop
+      >
+        <div class="flex items-start justify-between gap-4 p-6 border-b shrink-0" :class="t.border">
+          <div class="flex items-start gap-4 min-w-0">
+            <slot name="icon" />
+            <div class="flex-1 min-w-0">
+              <h3 :id="titleId" class="text-lg font-medium" :class="t.primaryText">
+                {{ title }}
+              </h3>
+              <p v-if="subtitle" class="text-sm mt-1 break-all" :class="t.mutedText">
+                {{ subtitle }}
+              </p>
+            </div>
+          </div>
+          <slot name="header-actions" />
+        </div>
+
+        <div class="p-6 overflow-y-auto flex-1">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" class="flex gap-3 justify-end p-6 border-t shrink-0" :class="t.border">
+          <slot name="footer" />
+        </div>
+      </div>
+
+      <!-- Compact layout (default) — small centered dialog. -->
+      <div
+        v-else
         class="relative w-full mx-4 rounded-lg shadow-xl"
         :class="[maxWidthClass, shellClass]"
         @click.stop
@@ -78,11 +116,25 @@ interface Props {
    * `backdrop` / handle their own Escape.
    */
   manualClose?: boolean
+  /**
+   * Switches to the scrollable layout — a flex column capped at 90vh
+   * with a fixed header/footer and a scrolling body. Use for large
+   * content modals (request detail, import preview, …) rather than the
+   * compact confirm-style default.
+   */
+  scrollable?: boolean
+  /**
+   * Optional muted line under the title. Only rendered in the
+   * scrollable layout.
+   */
+  subtitle?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   maxWidthClass: 'max-w-md',
   manualClose: false,
+  scrollable: false,
+  subtitle: '',
 })
 
 const emit = defineEmits<{

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

@@ -29,6 +29,7 @@ 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'
+export { default as BaseCopyButton } from './components/BaseCopyButton.vue'
 
 // Composables
 export { useTheme } from './composables/useTheme'

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 ────────────────────────────────────────────── */

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',