mgv-backoffice 1.36.3 → 1.38.0

package/src/components/BaseStatCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <component
+    :is="to ? RouterLink : 'div'"
+    v-bind="to ? { to } : {}"
+    class="relative block rounded-xl border-2 border-dashed bg-white p-5 transition-colors dark:bg-slate-800"
+    :class="[cls.border, to ? 'hover:bg-slate-50 dark:hover:bg-slate-700/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500' : '']"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0 text-left">
+        <p class="truncate text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200">
+          {{ title }}
+        </p>
+        <p class="mt-1 truncate text-3xl font-bold" :class="cls.value">
+          {{ value }}
+        </p>
+        <p v-if="subtitle" class="mt-1 text-sm font-medium" :class="cls.subtitle">
+          {{ subtitle }}
+        </p>
+        <slot />
+      </div>
+      <div
+        v-if="$slots.icon"
+        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl"
+        :class="cls.iconBox"
+      >
+        <slot name="icon" :icon-class="`h-6 w-6 ${cls.icon}`" />
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+/**
+ * Dashboard stat tile in the EarningsCard style (dashed accent border,
+ * bold title, big value, accent subtitle, tinted icon chip) but for any
+ * value — counts, labels, pre-formatted numbers. Pass `to` to make the whole
+ * card a router link. The `icon` slot fills the chip (receives `iconClass`);
+ * the `default` slot adds extra content under the subtitle.
+ *
+ */
+import { computed } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+
+type Accent = 'emerald' | 'sky' | 'amber' | 'red' | 'slate'
+
+interface Props {
+  title: string
+  value?: string | number
+  subtitle?: string
+  /** Border / value / subtitle / icon tint. */
+  accent?: Accent
+  /** Makes the card a router link. */
+  to?: RouteLocationRaw
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  subtitle: '',
+  accent: 'emerald',
+  to: undefined,
+})
+
+// Full literal class strings per accent so Tailwind can see every class.
+const ACCENTS: Record<Accent, { border: string; value: string; subtitle: string; iconBox: string; icon: string }> = {
+  emerald: {
+    border: 'border-emerald-300 dark:border-emerald-700',
+    value: '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',
+  },
+  sky: {
+    border: 'border-sky-300 dark:border-sky-700',
+    value: 'text-sky-500 dark:text-sky-400',
+    subtitle: 'text-sky-500 dark:text-sky-400',
+    iconBox: 'bg-sky-50 dark:bg-sky-900/30',
+    icon: 'text-sky-500',
+  },
+  amber: {
+    border: 'border-amber-300 dark:border-amber-700',
+    value: 'text-amber-500 dark:text-amber-400',
+    subtitle: 'text-amber-500 dark:text-amber-400',
+    iconBox: 'bg-amber-50 dark:bg-amber-900/30',
+    icon: 'text-amber-500',
+  },
+  red: {
+    border: 'border-red-300 dark:border-red-700',
+    value: 'text-red-500 dark:text-red-400',
+    subtitle: 'text-red-500 dark:text-red-400',
+    iconBox: 'bg-red-50 dark:bg-red-900/30',
+    icon: 'text-red-500',
+  },
+  slate: {
+    border: 'border-slate-300 dark:border-slate-600',
+    value: 'text-slate-700 dark:text-slate-200',
+    subtitle: 'text-slate-500 dark:text-slate-400',
+    iconBox: 'bg-slate-100 dark:bg-slate-700/50',
+    icon: 'text-slate-500 dark:text-slate-300',
+  },
+}
+
+const cls = computed(() => ACCENTS[props.accent])
+</script>

package/src/components/BaseTable.test.ts

@@ -1,55 +1,69 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseTable from './BaseTable.vue'
-import type { TableColumn } from '../types/table'
-
-const columns: TableColumn[] = [
-  { label: 'Symbol' },
-  { label: 'Qty', align: 'right' },
-  { label: 'Bought' },
-]
-
-describe('BaseTable', () => {
-  it('renders header cells with right-alignment where requested', () => {
-    const wrapper = mount(BaseTable, { props: { columns } })
-    const ths = wrapper.findAll('th')
-    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
-    expect(ths[1].classes()).toContain('text-right')
-    expect(ths[0].classes()).not.toContain('text-right')
-    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
-  })
-
-  it('renders caller rows through the default slot', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns },
-      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
-    })
-    expect(wrapper.find('tbody td').text()).toBe('AMD')
-    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
-  })
-
-  it('renders the empty-state row spanning every column when empty', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: true, emptyText: 'Nothing here.' },
-    })
-    const td = wrapper.find('tbody td')
-    expect(td.attributes('colspan')).toBe('3')
-    expect(td.text()).toBe('Nothing here.')
-  })
-
-  it('prefers the empty slot over emptyText', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: true, emptyText: 'fallback' },
-      slots: { empty: 'No trades match your filters.' },
-    })
-    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
-  })
-
-  it('renders no empty-state row when not empty', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: false },
-      slots: { default: '<tr><td>row</td></tr>' },
-    })
-    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseTable from './BaseTable.vue'
+import type { TableColumn } from '../types/table'
+
+const columns: TableColumn[] = [
+  { label: 'Symbol' },
+  { label: 'Qty', align: 'right' },
+  { label: 'Bought' },
+]
+
+describe('BaseTable', () => {
+  it('renders header cells with right-alignment where requested', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    const ths = wrapper.findAll('th')
+    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
+    expect(ths[1].classes()).toContain('text-right')
+    expect(ths[0].classes()).not.toContain('text-right')
+    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
+  })
+
+  it('renders caller rows through the default slot', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns },
+      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('AMD')
+    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
+  })
+
+  it('renders the empty-state row spanning every column when empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'Nothing here.' },
+    })
+    const td = wrapper.find('tbody td')
+    expect(td.attributes('colspan')).toBe('3')
+    expect(td.text()).toBe('Nothing here.')
+  })
+
+  it('prefers the empty slot over emptyText', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'fallback' },
+      slots: { empty: 'No trades match your filters.' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
+  })
+
+  it('renders no empty-state row when not empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: false },
+      slots: { default: '<tr><td>row</td></tr>' },
+    })
+    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
+  })
+
+  it('has no card chrome by default and adds it with `card`', () => {
+    const plain = mount(BaseTable, { props: { columns } })
+    expect(plain.classes()).not.toContain('border')
+    const card = mount(BaseTable, { props: { columns, card: true } })
+    expect(card.classes()).toEqual(
+      expect.arrayContaining(['overflow-x-auto', 'rounded-xl', 'border']),
+    )
+  })
+
+  it('draws row dividers on the body', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    expect(wrapper.find('tbody').classes()).toEqual(expect.arrayContaining(['divide-y']))
+  })
+})

package/src/components/BaseTable.vue

@@ -1,50 +1,62 @@
-<template>
-  <!--
-    Styling shell for data tables — NOT a data grid. Owns the table skin
-    (slate header band, px-4 py-3 header cells, empty-state row); rows are
-    the caller's own <tr> markup via the default slot, so cell content and
-    per-cell styling stay fully in the caller's hands.
-
-    Wrap it yourself for scrolling/card chrome (e.g. inside a BaseRow with
-    overflow-x-auto). Same `dark:`-variant note as BaseInput.
-  -->
-  <table class="w-full text-sm">
-    <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
-      <tr class="text-left">
-        <th
-          v-for="(col, i) in columns"
-          :key="i"
-          class="px-4 py-3"
-          :class="col.align === 'right' ? 'text-right' : ''"
-        >
-          {{ col.label }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-if="empty">
-        <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
-          <slot name="empty">{{ emptyText }}</slot>
-        </td>
-      </tr>
-      <slot />
-    </tbody>
-  </table>
-</template>
-
-<script setup lang="ts">
-import type { TableColumn } from '../types/table'
-
-interface Props {
-  columns: TableColumn[]
-  /** True when there are no rows — renders the empty-state row. */
-  empty?: boolean
-  /** Fallback empty-state text; the `empty` slot overrides it. */
-  emptyText?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  empty: false,
-  emptyText: 'No rows.',
-})
-</script>
+<template>
+  <div :class="card ? CARD_CLASS : undefined">
+    <!--
+      Styling shell for data tables — NOT a data grid. Owns the table skin
+      (slate header band, px-4 py-3 header cells, row dividers + hover,
+      empty-state row); rows are the caller's own <tr> markup via the default
+      slot, so cell content and per-cell styling stay fully in the caller's hands.
+
+      `card` adds the shared card chrome (rounded border, surface, horizontal
+      scroll). Leave it off when the caller already wraps the table itself
+      (e.g. inside a BaseRow with overflow-x-auto). Same `dark:`-variant note
+      as BaseInput.
+    -->
+    <table class="w-full text-sm">
+      <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
+        <tr class="text-left border-b border-slate-200 dark:border-slate-700">
+          <th
+            v-for="(col, i) in columns"
+            :key="i"
+            class="px-4 py-3"
+            :class="col.align === 'right' ? 'text-right' : ''"
+          >
+            {{ col.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="divide-y divide-slate-200 dark:divide-slate-700 [&>tr]:transition-colors [&>tr:hover]:bg-slate-50 dark:[&>tr:hover]:bg-slate-800/40"
+      >
+        <tr v-if="empty">
+          <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
+            <slot name="empty">{{ emptyText }}</slot>
+          </td>
+        </tr>
+        <slot />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TableColumn } from '../types/table'
+
+const CARD_CLASS =
+  'overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900'
+
+interface Props {
+  columns: TableColumn[]
+  /** True when there are no rows — renders the empty-state row. */
+  empty?: boolean
+  /** Fallback empty-state text; the `empty` slot overrides it. */
+  emptyText?: string
+  /** Wrap the table in the rounded, bordered, horizontally scrolling card. */
+  card?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  empty: false,
+  emptyText: 'No rows.',
+  card: false,
+})
+</script>

package/src/index.ts

@@ -53,6 +53,14 @@ export { default as BasePillPickerModal } from './components/BasePillPickerModal
 export { default as BaseBarDistribution } from './components/BaseBarDistribution.vue'
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
+// Components — third-party wrappers
+export { default as BaseDateTimePicker } from './components/BaseDateTimePicker.vue'
+export type { DateTimePickerMode } from './components/BaseDateTimePicker.vue'
+export { default as BaseSearchSelect } from './components/BaseSearchSelect.vue'
+export { default as BaseCard } from './components/BaseCard.vue'
+export { default as BaseField } from './components/BaseField.vue'
+export { default as BaseStatCard } from './components/BaseStatCard.vue'
+
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
 export type { UseThemeOptions } from './composables/useTheme'

package/src/style.css

@@ -30,3 +30,61 @@
 body {
   font-family: var(--font-sans);
 }
+
+/* BaseDateTimePicker skin: re-point @vuepic/vue-datepicker's CSS variables at
+   the lib palette (emerald accent, slate surfaces — same as BaseInput). The
+   picker is third-party markup, so its variables are the only styling hook;
+   Tailwind utilities can't reach inside it. `html` prefix out-specifies the
+   package's own `.dp--theme-*` blocks regardless of stylesheet order. */
+html .dp--theme-light,
+html .dp--theme-dark {
+  --dp-font-family: var(--font-sans);
+  --dp-font-size: 0.875rem;
+  --dp-border-radius: 0.25rem;
+  --dp-cell-border-radius: 0.25rem;
+  --dp-input-padding: 8px 30px 8px 12px;
+  --dp-primary-text-color: #fff;
+}
+html .dp--theme-light {
+  --dp-background-color: #f8fafc;   /* slate-50  */
+  --dp-text-color: #0f172a;         /* slate-900 */
+  --dp-hover-color: #f1f5f9;        /* slate-100 */
+  --dp-hover-text-color: #0f172a;
+  --dp-hover-icon-color: #64748b;   /* slate-500 */
+  --dp-icon-color: #94a3b8;         /* slate-400 */
+  --dp-primary-color: #059669;      /* emerald-600 */
+  --dp-primary-disabled-color: #6ee7b7; /* emerald-300 */
+  --dp-secondary-color: #94a3b8;
+  --dp-border-color: #cbd5e1;       /* slate-300 */
+  --dp-menu-border-color: #cbd5e1;
+  --dp-border-color-hover: #94a3b8;
+  --dp-border-color-focus: #10b981; /* emerald-500 */
+  --dp-highlight-color: rgb(16 185 129 / 0.12);
+  --dp-success-color: #10b981;
+  --dp-danger-color: #ef4444;       /* red-500 */
+  --dp-marker-color: #ef4444;
+}
+html .dp--theme-dark {
+  --dp-background-color: #0f172a;   /* slate-900 */
+  --dp-text-color: #f1f5f9;         /* slate-100 */
+  --dp-hover-color: #1e293b;        /* slate-800 */
+  --dp-hover-text-color: #f1f5f9;
+  --dp-hover-icon-color: #cbd5e1;   /* slate-300 */
+  --dp-icon-color: #64748b;         /* slate-500 */
+  --dp-primary-color: #059669;      /* emerald-600 */
+  --dp-primary-disabled-color: #065f46; /* emerald-800 */
+  --dp-secondary-color: #64748b;
+  --dp-border-color: #475569;       /* slate-600 */
+  --dp-menu-border-color: #334155;  /* slate-700 */
+  --dp-border-color-hover: #64748b;
+  --dp-border-color-focus: #10b981; /* emerald-500 */
+  --dp-highlight-color: rgb(16 185 129 / 0.2);
+  --dp-disabled-color: #1e293b;
+  --dp-disabled-color-text: #64748b;
+  --dp-scroll-bar-background: #0f172a;
+  --dp-scroll-bar-color: #334155;
+  --dp-success-color: #10b981;
+  --dp-danger-color: #ef4444;
+  --dp-marker-color: #ef4444;
+  --dp-tooltip-color: #1e293b;
+}