@meddleware/treasury-ui 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/treasury-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "homepage": "https://docs.meddleware.co.uk/treasury/",
   "description": "Meddleware treasury console — organisation-level accounting across revenue streams (Sui and beyond). Read-only, desktop-console UI built on @meddleware/ui.",
   "author": "Meddleware <dev@meddleware.co.uk>",
@@ -23,7 +23,11 @@
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "lint:css": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:js": "eslint .",
+    "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
+    "lint:html": "html-validate \"src/**/*.vue\""
   },
   "exports": {
     ".": {
@@ -40,23 +44,41 @@
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.6",
-    "@meddleware/ui": "^0.1.27",
-    "@meddleware/wallet-adapter": "^0.0.8",
+    "@meddleware/design-tokens": "^0.1.7",
+    "@meddleware/ui": "^0.1.28",
+    "@meddleware/wallet-adapter": "^0.0.9",
     "@mysten/sui": "^2.33.0",
     "vue": "^3.5.43"
   },
   "devDependencies": {
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.5.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vuejs-accessibility": "^2.6.0",
+    "html-validate": "^11.16.1",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
     "jsdom": "^29.1.1",
+    "postcss": "^8.4.49",
+    "postcss-html": "^2.0.0",
+    "stylelint": "^17.15.0",
+    "stylelint-config-standard": "^40.0.0",
     "typescript": "~6.0.0",
     "vite": "^8.3.0",
     "vitest": "~5.0.1",
+    "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "~3.3.11"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

package/src/App.vue

@@ -22,7 +22,7 @@ const DEV_URL = import.meta.env.VITE_DEV_URL || 'https://dev.meddleware.co.uk/tr
       </template>
     </AppHeader>
 
-    <TreasuryView style="flex: 1; min-height: 0" />
+    <TreasuryView />
 
     <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL">
       <template #start>

package/src/TreasuryView.vue

@@ -11,18 +11,15 @@
 // view is consumed as a library by the dashboard or any other host.
 import './styles/qt.css'
 import { ref, computed } from 'vue'
-import { UiToolbar, UiToolbarButton } from '@meddleware/ui'
-import TabBar from './components/TabBar.vue'
-import StatusBar from './components/StatusBar.vue'
+import { AppTabNav, UiStatusBar, UiTabPanel, UiToolbar, type AppTab } from '@meddleware/ui'
 import OverviewTab from './tabs/OverviewTab.vue'
 import AccountsTab from './tabs/AccountsTab.vue'
 import ActivityTab from './tabs/ActivityTab.vue'
 import { useTreasuryActivity } from './composables/useTreasuryActivity.js'
 import { useEpoch } from './composables/useEpoch.js'
+import { NETWORK } from './config.js'
 
-import type { Tab } from './components/TabBar.vue'
-
-const TABS: Tab[] = [
+const TABS: AppTab[] = [
   { id: 'overview', label: 'Overview' },
   { id: 'accounts', label: 'Accounts' },
   { id: 'activity', label: 'Activity' },
@@ -45,17 +42,15 @@ const { epoch } = useEpoch()
 </script>
 
 <template>
-  <div class="dao-view">
-    <UiToolbar>
-      <UiToolbarButton @click="activeTab = 'overview'">🏦 Meddleware Treasury</UiToolbarButton>
-    </UiToolbar>
+  <div class="treasury-view">
+    <UiToolbar :actions="[{ id: 'home', label: '🏦 Meddleware Treasury' }]" @action="activeTab = 'overview'" />
 
-    <TabBar :tabs="TABS" v-model="activeTab" />
+    <AppTabNav v-model="activeTab" :tabs="TABS" id-prefix="treasury" variant="raised" aria-label="Treasury sections" />
 
-    <div class="dao-content">
+    <UiTabPanel id-prefix="treasury" :tab="activeTab" class="dao-content">
       <component :is="activeComponent" />
-    </div>
+    </UiTabPanel>
 
-    <StatusBar :epoch="epoch" :last-refresh="lastRefresh" :error="!!eventsError" />
+    <UiStatusBar :network="NETWORK" :healthy="!eventsError" :epoch="epoch" :last-refresh="lastRefresh" />
   </div>
 </template>

package/src/composables/useGates.ts

@@ -42,7 +42,7 @@ export function useGates() {
 
       // Fetch each Gate shared object referenced by the AdminCap's gate_id.
       const gateList = await Promise.all(
-        (objects ?? []).map(async (o: any): Promise<Gate | null> => {
+        (objects ?? []).map(async (o: { json?: { gate_id?: unknown } | null; object?: { json?: { gate_id?: unknown } | null } | null }): Promise<Gate | null> => {
           const capFields = o?.json ?? o?.object?.json
           const gateId = String(capFields?.gate_id ?? '')
           if (!gateId || gateId === 'undefined') return null

package/src/styles/qt.css

@@ -12,7 +12,7 @@
 
 /* ── Shell layout ────────────────────────────────────────────────────────── */
 
-.dao-view {
+.treasury-view {
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -49,7 +49,7 @@
   gap: 10px;
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
   .dao-overview-cols {
     grid-template-columns: 1fr;
   }
@@ -57,21 +57,32 @@
 
 /* ── Proposal progress bar ───────────────────────────────────────────────── */
 
+/* A native <progress>: engines paint the track/value with their own pseudo-elements. */
 .dao-progress {
+  display: block;
+  width: 100%;
   height: 6px;
+  margin: 3px 0;
+  appearance: none;
   background: var(--lift);
   border: 1px solid var(--border);
   border-radius: 1px;
   overflow: hidden;
-  margin: 3px 0;
 }
 
-.dao-progress__fill {
-  height: 100%;
+.dao-progress::-webkit-progress-bar {
+  background: var(--lift);
+}
+
+.dao-progress::-webkit-progress-value {
   background: var(--accent);
   transition: width 0.3s ease;
 }
 
+.dao-progress::-moz-progress-bar {
+  background: var(--accent);
+}
+
 /* ── Info tooltip marker ─────────────────────────────────────────────────── */
 
 .dao-info {
@@ -102,6 +113,24 @@
   margin-top: 10px;
 }
 
+/* ── Layout utilities ────────────────────────────────────────────────────── */
+
+/* Vertical stack of panels within a tab. */
+.dao-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dao-stack--tight {
+  gap: 8px;
+}
+
+/* Key/value readouts stay compact rather than spanning a wide panel. */
+.dao-stat-grid {
+  max-width: 480px;
+}
+
 /* ── Misc text utilities ─────────────────────────────────────────────────── */
 
 .dao-mono {
@@ -109,6 +138,18 @@
   font-size: 0.8rem;
 }
 
+.dao-mono--sm {
+  font-size: 0.7rem;
+}
+
+.dao-nowrap {
+  white-space: nowrap;
+}
+
+.dao-flush {
+  margin: 0;
+}
+
 .dao-muted {
   color: var(--muted);
   font-size: 0.78rem;

package/src/tabs/AccountsTab.vue

@@ -32,12 +32,12 @@ function formatPrice(mist: bigint): string {
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column; gap: 10px">
+  <div class="dao-stack">
     <UiPanel title="Sui Treasury Account">
       <p v-if="cfgLoading" class="dao-muted">Loading…</p>
       <p v-else-if="cfgErr" class="dao-muted">{{ cfgErr }}</p>
       <template v-else-if="config">
-        <UiStatGrid style="max-width: 480px">
+        <UiStatGrid class="dao-stat-grid">
           <UiStatRow label="Commission rate">{{ commissionPct }} ({{ config.commissionBps }} bps)</UiStatRow>
           <UiStatRow label="Current balance"><AmountCell :mist="balance" /></UiStatRow>
           <UiStatRow label="Treasury address" align="left">
@@ -61,7 +61,7 @@ function formatPrice(mist: bigint): string {
         <tr v-for="gate in gates" :key="gate.id">
           <td>{{ gate.name }}</td>
           <td class="dao-amount">{{ formatPrice(gate.price) }}</td>
-          <td class="dao-mono" style="font-size: 0.7rem; white-space: nowrap">
+          <td class="dao-mono dao-mono--sm dao-nowrap">
             <CopyableAddress :address="gate.id" label="Copy object ID">
               <ExplorerLink :href="suiExplorerUrl('object', gate.id, NETWORK)" :value="gate.id" />
             </CopyableAddress>

package/src/tabs/ActivityTab.vue

@@ -39,56 +39,69 @@ function badgeVariant(type: TreasuryEvent['type']): 'active' | 'closed' {
 </script>
 
 <template>
-  <div>
-    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px">
-      <p class="dao-section-title" style="margin: 0">Revenue Events</p>
-      <UiToolbarButton :disabled="loading" @click="reload">
-        {{ loading ? 'Loading…' : 'Refresh' }}
-      </UiToolbarButton>
-    </div>
+  <header class="activity__head">
+    <h2 class="dao-section-title">Revenue Events</h2>
+    <UiToolbarButton :disabled="loading" @click="reload">
+      {{ loading ? 'Loading…' : 'Refresh' }}
+    </UiToolbarButton>
+  </header>
 
-    <p v-if="error" class="dao-muted">{{ error }}</p>
+  <p v-if="error" class="dao-muted">{{ error }}</p>
 
-    <UiDataTable v-if="pageEvents.length || loading" :empty="'No events'">
-      <template #head>
-        <th>Type</th>
-        <th>
-          Address
-          <abbr class="dao-info" title="The wallet address associated with this event (recipient, creator, or initiator depending on event type). Click to view in explorer; click the copy icon to copy the full address.">?</abbr>
-        </th>
-        <th>
-          Block
-          <abbr class="dao-info" title="Sui checkpoint sequence number — equivalent to a block height in other blockchains. Each checkpoint finalizes a batch of transactions; higher numbers are more recent.">?</abbr>
-        </th>
-        <th>
-          Transaction
-          <abbr class="dao-info" title="Transaction digest — a unique identifier for the transaction that emitted this event. Click to view in explorer; click the copy icon to copy the full digest.">?</abbr>
-        </th>
-      </template>
-      <tr v-for="ev in pageEvents" :key="ev.txDigest">
-        <td><UiBadge :variant="badgeVariant(ev.type)">{{ eventLabel[ev.type] }}</UiBadge></td>
-        <td class="dao-mono" style="font-size: 0.72rem; white-space: nowrap">
-          <CopyableAddress v-if="ev.address && ev.address !== 'undefined'" :address="ev.address">
-            <ExplorerLink :href="suiExplorerUrl('account', ev.address, NETWORK)" :value="ev.address" />
-          </CopyableAddress>
-          <span v-else>—</span>
-        </td>
-        <td class="dao-mono" style="font-size: 0.72rem">
-          {{ ev.checkpoint ? '#' + ev.checkpoint : '—' }}
-        </td>
-        <td class="dao-mono" style="font-size: 0.72rem; white-space: nowrap">
-          <CopyableAddress :address="ev.txDigest" label="Copy transaction">
-            <ExplorerLink :href="suiExplorerUrl('txblock', ev.txDigest, NETWORK)" :value="ev.txDigest" />
-          </CopyableAddress>
-        </td>
-      </tr>
-    </UiDataTable>
-    <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
+  <UiDataTable v-if="pageEvents.length || loading" :empty="'No events'">
+    <template #head>
+      <th>Type</th>
+      <th>
+        Address
+        <abbr class="dao-info" title="The wallet address associated with this event (recipient, creator, or initiator depending on event type). Click to view in explorer; click the copy icon to copy the full address.">?</abbr>
+      </th>
+      <th>
+        Block
+        <abbr class="dao-info" title="Sui checkpoint sequence number — equivalent to a block height in other blockchains. Each checkpoint finalizes a batch of transactions; higher numbers are more recent.">?</abbr>
+      </th>
+      <th>
+        Transaction
+        <abbr class="dao-info" title="Transaction digest — a unique identifier for the transaction that emitted this event. Click to view in explorer; click the copy icon to copy the full digest.">?</abbr>
+      </th>
+    </template>
+    <tr v-for="ev in pageEvents" :key="ev.txDigest">
+      <td><UiBadge :variant="badgeVariant(ev.type)">{{ eventLabel[ev.type] }}</UiBadge></td>
+      <td class="dao-mono activity__cell dao-nowrap">
+        <CopyableAddress v-if="ev.address && ev.address !== 'undefined'" :address="ev.address">
+          <ExplorerLink :href="suiExplorerUrl('account', ev.address, NETWORK)" :value="ev.address" />
+        </CopyableAddress>
+        <span v-else>—</span>
+      </td>
+      <td class="dao-mono activity__cell">
+        {{ ev.checkpoint ? '#' + ev.checkpoint : '—' }}
+      </td>
+      <td class="dao-mono activity__cell dao-nowrap">
+        <CopyableAddress :address="ev.txDigest" label="Copy transaction">
+          <ExplorerLink :href="suiExplorerUrl('txblock', ev.txDigest, NETWORK)" :value="ev.txDigest" />
+        </CopyableAddress>
+      </td>
+    </tr>
+  </UiDataTable>
+  <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
 
-    <div v-if="totalPages > 1" class="dao-pagination">
-      <UiToolbarButton :disabled="page === 1" @click="prevPage">← Prev</UiToolbarButton>
-      <span class="dao-muted" style="font-size: 0.78rem">Page {{ page }} / {{ totalPages }}</span>
-      <UiToolbarButton :disabled="page === totalPages" @click="nextPage">Next →</UiToolbarButton>
-    </div>
-  </div>
+  <nav v-if="totalPages > 1" class="dao-pagination" aria-label="Event pages">
+    <UiToolbarButton :disabled="page === 1" @click="prevPage">← Prev</UiToolbarButton>
+    <span class="dao-muted">Page {{ page }} / {{ totalPages }}</span>
+    <UiToolbarButton :disabled="page === totalPages" @click="nextPage">Next →</UiToolbarButton>
+  </nav>
 </template>
+
+<style scoped>
+.activity__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.activity__head .dao-section-title {
+  margin: 0;
+}
+.activity__cell {
+  font-size: 0.72rem;
+}
+</style>

package/src/tabs/OverviewTab.vue

@@ -42,7 +42,7 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
 <template>
   <div class="dao-overview-cols">
     <!-- Left: treasury summary -->
-    <div style="display: flex; flex-direction: column; gap: 8px">
+    <div class="dao-stack dao-stack--tight">
       <UiPanel title="Treasury Balance">
         <UiStatGrid>
           <UiStatRow label="SUI balance"><AmountCell :mist="balance" /></UiStatRow>
@@ -51,7 +51,7 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
             <CopyableAddress v-if="config?.treasury" :address="config.treasury">
               <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
             </CopyableAddress>
-            <span v-else class="dao-mono" style="font-size: 0.7rem">—</span>
+            <span v-else class="dao-mono dao-mono--sm">—</span>
           </UiStatRow>
         </UiStatGrid>
       </UiPanel>
@@ -67,7 +67,7 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
 
     <!-- Right: recent activity -->
     <UiPanel title="Recent Activity">
-      <p v-if="eventsLoading" class="dao-muted" style="margin: 0">Loading events…</p>
+      <p v-if="eventsLoading" class="dao-muted dao-flush">Loading events…</p>
       <UiActivityFeed v-else-if="events.length">
         <UiActivityItem
           v-for="ev in events"

package/src/components/StatusBar.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-// Bottom status bar: network + health dot (error-driven), current epoch, and a
-// relative "refreshed Ns ago" timestamp. Built on the shared UiStatusBar/UiStatusDot.
-import { computed } from 'vue'
-import { UiStatusBar, UiStatusDot } from '@meddleware/ui'
-import { NETWORK } from '../config.js'
-
-const props = defineProps<{
-  epoch: number | null
-  lastRefresh: Date | null
-  error?: boolean
-}>()
-
-const dotStatus = computed<'ok' | 'error'>(() => (props.error ? 'error' : 'ok'))
-
-function timeAgo(d: Date): string {
-  const s = Math.floor((Date.now() - d.getTime()) / 1000)
-  if (s < 5) return 'just now'
-  if (s < 60) return `${s}s ago`
-  return `${Math.floor(s / 60)}m ago`
-}
-</script>
-
-<template>
-  <UiStatusBar>
-    <span class="mw-statusbar__item">
-      <UiStatusDot :status="dotStatus" />
-      {{ NETWORK.charAt(0).toUpperCase() + NETWORK.slice(1) }}
-    </span>
-    <span class="mw-statusbar__sep">│</span>
-    <span v-if="epoch !== null" class="mw-statusbar__item">Epoch {{ epoch }}</span>
-    <span v-else class="mw-statusbar__item dao-muted">Epoch —</span>
-    <span class="mw-statusbar__sep">│</span>
-    <span v-if="lastRefresh" class="mw-statusbar__item">Refreshed {{ timeAgo(lastRefresh) }}</span>
-    <span v-else class="mw-statusbar__item dao-muted">Loading…</span>
-  </UiStatusBar>
-</template>

package/src/components/TabBar.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-// Thin wrapper over AppTabNav variant="raised" from @meddleware/ui.
-// Keeps the app's internal import path stable while using the shared component.
-import { AppTabNav } from '@meddleware/ui'
-export type { AppTab as Tab } from '@meddleware/ui'
-
-defineProps<{ tabs: { id: string; label: string }[]; modelValue: string }>()
-const emit = defineEmits<{ 'update:modelValue': [id: string] }>()
-</script>
-
-<template>
-  <AppTabNav
-    :tabs="tabs"
-    :model-value="modelValue"
-    variant="raised"
-    aria-label="Treasury sections"
-    @update:model-value="emit('update:modelValue', $event)"
-  />
-</template>