@meddleware/dao-ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dao-ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Meddleware DAO console — treasury overview, proposals, and governance on Sui.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",

package/src/DaoView.vue

@@ -2,7 +2,11 @@
 // Core DAO tool UI — tab-based console with desktop-application aesthetics.
 // Rendered standalone by App.vue and embedded in the dashboard at the default route.
 // All chain reads are read-only; no wallet connection is required to view data.
-import { ref, shallowRef, computed } from 'vue'
+//
+// qt.css is imported here (not just in main.ts) so the styles are included when
+// DaoView is consumed as a library by the dashboard or any other host.
+import './styles/qt.css'
+import { ref, computed } from 'vue'
 import TabBar from './components/TabBar.vue'
 import StatusBar from './components/StatusBar.vue'
 import OverviewTab from './tabs/OverviewTab.vue'
@@ -43,10 +47,6 @@ const { epoch } = useEpoch()
   <div class="dao-view">
     <div class="dao-toolbar">
       <button class="dao-toolbar__btn" @click="activeTab = 'overview'">🏛 Meddleware DAO</button>
-      <span class="dao-toolbar__sep" />
-      <span class="dao-muted" style="font-size: 0.75rem; padding: 0 4px">
-        access_gate · testnet
-      </span>
     </div>
 
     <TabBar :tabs="TABS" v-model="activeTab" />

package/src/composables/useDaoEvents.ts

@@ -5,7 +5,7 @@ import { PACKAGE_ID } from '../config.js'
 export interface DaoEvent {
   type: 'AccessMinted' | 'AccessConsumed' | 'GateCreated' | 'AccessBurned'
   txDigest: string
-  timestampMs: number
+  checkpoint: string | null
   address?: string
 }
 
@@ -47,7 +47,7 @@ export function useDaoEvents(limit = 20) {
           all.push({
             type: label as DaoEvent['type'],
             txDigest: e.transactionDigest,
-            timestampMs: 0,
+            checkpoint: e.checkpoint ?? null,
             address: String(f.recipient ?? f.creator ?? f.sender ?? ''),
           })
         }

package/src/styles/qt.css

@@ -131,6 +131,9 @@
   border-top: 1px solid var(--border);
   flex-shrink: 0;
   font-family: var(--font-mono);
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
 }
 
 .dao-statusbar__dot {

package/src/tabs/HistoryTab.vue

@@ -12,9 +12,8 @@ const eventLabel: Record<DaoEvent['type'], string> = {
   AccessBurned: 'Access Burned',
 }
 
-function shortTs(ms: number): string {
-  if (!ms) return '—'
-  return new Date(ms).toISOString().replace('T', ' ').slice(0, 19) + ' UTC'
+function shortCkpt(ckpt: string | null): string {
+  return ckpt ? `ckpt ${ckpt}` : '—'
 }
 
 function shortAddr(addr: string | undefined): string {
@@ -42,10 +41,10 @@ function explorerUrl(digest: string): string {
       <template #head>
         <th>Type</th>
         <th>Address</th>
-        <th>Time (UTC)</th>
+        <th>Checkpoint</th>
         <th>Tx</th>
       </template>
-      <tr v-for="ev in events" :key="ev.txDigest + ev.timestampMs">
+      <tr v-for="ev in events" :key="ev.txDigest">
         <td>
           <span
             class="dao-badge"
@@ -57,7 +56,7 @@ function explorerUrl(digest: string): string {
           >{{ eventLabel[ev.type] }}</span>
         </td>
         <td class="dao-mono" style="font-size: 0.72rem">{{ shortAddr(ev.address) }}</td>
-        <td class="dao-mono" style="font-size: 0.72rem">{{ shortTs(ev.timestampMs) }}</td>
+        <td class="dao-mono" style="font-size: 0.72rem">{{ shortCkpt(ev.checkpoint) }}</td>
         <td class="dao-mono" style="font-size: 0.72rem">
           <a :href="explorerUrl(ev.txDigest)" target="_blank" rel="noopener" style="color: var(--accent)">
             {{ ev.txDigest.slice(0, 8) }}…

package/src/tabs/OverviewTab.vue

@@ -5,19 +5,13 @@ import AmountCell from '../components/AmountCell.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useDaoEvents } from '../composables/useDaoEvents.js'
+import { useGates } from '../composables/useGates.js'
 import type { DaoEvent } from '../composables/useDaoEvents.js'
 
 const { config } = usePlatformConfig()
 const { balance } = useTreasury(() => config.value?.treasury ?? null)
 const { events, loading: eventsLoading } = useDaoEvents(12)
-
-function timeAgo(ms: number): string {
-  const s = Math.floor((Date.now() - ms) / 1000)
-  if (s < 5) return 'just now'
-  if (s < 60) return `${s}s ago`
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`
-  return `${Math.floor(s / 3600)}h ago`
-}
+const { gates } = useGates()
 
 const eventLabel: Record<DaoEvent['type'], string> = {
   AccessMinted: 'Access sold',
@@ -29,6 +23,9 @@ const eventLabel: Record<DaoEvent['type'], string> = {
 const commissionPct = computed(() =>
   config.value ? (config.value.commissionBps / 100).toFixed(2) + '%' : '—',
 )
+
+const accessesMinted = computed(() => events.value.filter((e) => e.type === 'AccessMinted').length)
+const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'AccessConsumed').length)
 </script>
 
 <template>
@@ -54,21 +51,17 @@ const commissionPct = computed(() =>
         </div>
       </Panel>
 
-      <Panel title="Platform Stats">
+      <Panel title="Platform Activity">
         <div class="dao-stat-grid">
-          <span class="dao-stat-grid__label">Strategy NAV</span>
-          <span class="dao-stat-grid__value dao-muted">—</span>
+          <span class="dao-stat-grid__label">Active gates</span>
+          <span class="dao-stat-grid__value dao-mono">{{ gates.length || '—' }}</span>
 
-          <span class="dao-stat-grid__label">Buyback/burn</span>
-          <span class="dao-stat-grid__value dao-muted">—</span>
+          <span class="dao-stat-grid__label">Accesses minted</span>
+          <span class="dao-stat-grid__value dao-mono">{{ accessesMinted || '—' }}</span>
 
-          <span class="dao-stat-grid__label">Fee distributor</span>
-          <span class="dao-stat-grid__value dao-muted">—</span>
+          <span class="dao-stat-grid__label">Accesses consumed</span>
+          <span class="dao-stat-grid__value dao-mono">{{ accessesConsumed || '—' }}</span>
         </div>
-        <p class="dao-muted" style="margin: 8px 0 0; font-size: 0.72rem">
-          Strategy NAV, buyback and fee distribution data will appear here when
-          <code>vault_core</code> and <code>vault_fee_distributor</code> are deployed.
-        </p>
       </Panel>
     </div>
 
@@ -76,10 +69,10 @@ const commissionPct = computed(() =>
     <Panel title="Recent Activity">
       <p v-if="eventsLoading" class="dao-muted" style="margin: 0">Loading events…</p>
       <ul v-else-if="events.length" class="dao-feed">
-        <li v-for="ev in events" :key="ev.txDigest + ev.timestampMs" class="dao-feed__item">
+        <li v-for="ev in events" :key="ev.txDigest" class="dao-feed__item">
           <span class="dao-feed__dot" />
           <span class="dao-feed__type">{{ eventLabel[ev.type] }}</span>
-          <span class="dao-feed__time">{{ timeAgo(ev.timestampMs) }}</span>
+          <span class="dao-feed__time">ckpt {{ ev.checkpoint ?? '?' }}</span>
         </li>
       </ul>
       <p v-else class="dao-placeholder">No recent events.</p>

package/src/tabs/ProposalsTab.vue

@@ -9,11 +9,6 @@ const { epoch } = useEpoch()
 
 <template>
   <div>
-    <div class="dao-notice">
-      On-chain governance proposals will appear here once <code>vault_dao</code> is deployed.
-      Contributions and voting will be enabled at that point.
-    </div>
-
     <template v-if="proposals.length > 0">
       <p class="dao-section-title">Active &amp; Pending Proposals</p>
       <ProposalRow