Change settings

src/views/LiveView.vue

@@ -35,53 +35,47 @@
           class="card2"
           :class="{ 'is-bh': c.kind==='bh', 'is-winner': c.isWinner }"
         >
-          <!-- WINNER RIBBON -->
+          <!-- Crown -->
           <div v-if="c.isWinner" class="card2__ribbon" aria-label="Top performer">👑</div>
 
-          <!-- TOP ROW: avatar + titles + primary metric -->
-          <div class="card2__row card2__row--top">
-            <div class="info">
-              <div class="avatar">
-                <img v-if="c.logo" :src="c.logo" alt="" />
-                <div v-else class="avatar__fallback" aria-hidden="true"></div>
-              </div>
-              <div class="titles">
-                <div class="title" :title="c.title">{{ c.title }}</div>
-                <div class="subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
-              </div>
+          <!-- Header: LOGO + title -->
+          <div class="card2__header">
+            <div class="avatar">
+              <img v-if="c.logo" :src="c.logo" alt="" />
+              <div v-else class="avatar__fallback" aria-hidden="true"></div>
             </div>
+            <div class="titleblock">
+              <div class="title" :title="c.kind==='bh' ? 'Buy & Hold' : c.title">{{ c.kind==='bh' ? 'Buy & Hold' : c.title }}</div>
+              <div class="subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
+            </div>
+          </div>
 
-            <div class="metrics">
-              <div class="primary">
-                <div class="primary__label">Balance</div>
-                <div class="primary__value">{{ fmtUSD(c.balance) }}</div>
-              </div>
-              <div class="delta" v-if="c.kind==='agent' && c.gapUsd != null">
-                <span
-                  class="delta__value"
-                  :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }"
-                >
+          <!-- KPIs: Net value, Profit, Delta Profit -->
+          <div class="card2__kpis">
+            <div class="kpi kpi--net">
+              <div class="kpi__label">Net value</div>
+              <div class="kpi__value">{{ fmtUSD(c.balance) }}</div>
+            </div>
+
+            <div class="kpi kpi--profit">
+              <div class="kpi__label">Profit</div>
+              <div class="pill" :class="{ pos: c.profitUsd >= 0, neg: c.profitUsd < 0 }">{{ signedMoney(c.profitUsd) }}</div>
+            </div>
+
+            <div class="kpi kpi--delta">
+              <div class="kpi__label">Delta profit</div>
+              <div class="pill" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
+                <template v-if="c.kind==='agent'">
                   <template v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</template>
                   <template v-else>{{ signedPct(c.gapPct) }}</template>
-                </span>
-                <span class="delta__label">vs B&H</span>
+                </template>
+                <template v-else>—</template>
               </div>
             </div>
           </div>
 
-          <!-- META ROW: type chip -->
-          <div class="card2__row card2__row--meta">
-            <div class="chips">
-              <span v-if="c.kind==='bh'" class="chip chip--neutral">Buy & Hold</span>
-              <span v-else class="chip chip--outline">Strategy</span>
-            </div>
-          </div>
-
-          <!-- FOOTER: date -->
-          <div class="card2__row card2__row--foot">
-            <div class="foot__left"></div>
-            <div class="foot__right">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
-          </div>
+          <!-- EOD bottom-right -->
+          <div class="card2__eod">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
         </div>
       </div>
     </section>
@@ -89,6 +83,8 @@
     <section v-else class="panel panel--cards">
       <div class="empty">No card data yet for <strong>{{ asset }}</strong>.</div>
     </section>
+      <div class="empty">No card data yet for <strong>{{ asset }}</strong>.</div>
+    </section>
   </div>
 </template>
 
@@ -259,11 +255,18 @@ watch(
         balance: first.perf.bhLast,
         date: first.perf.date,
         logo: ASSET_ICONS[assetCode] || null,
+        profitUsd: (first.perf.bhLast ?? 0) - 100000,
+        gapUsd: 0,
+        gapPct: 0,
         isWinner: false
       }
 
       // Agent cards (gap vs BH)
       const agentCards = perfs.map(({ sel, perf }) => {
+        const gapUsd = perf.stratLast - perf.bhLast
+        const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
+        const profitUsd = (perf.stratLast ?? 0) - 100000
+        return { => {
         const gapUsd = perf.stratLast - perf.bhLast
         const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
         return {
@@ -318,17 +321,18 @@ watch(
 .empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
 /* NEW GRID: fluid, auto-fit tiles */
-.cards-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+.cards-grid { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
 
 /* CARD v2 */
 .card2 {
   position: relative;
   display: grid;
   grid-template-rows: auto auto auto; /* rows: top, meta, foot */
-  gap: 12px;
-  padding: 14px;
+  gap: 14px;
+  padding: 16px;
+  min-height: 200px;
   border: 1px solid #EEF1F6;
-  border-radius: 14px;
+  border-radius: 16px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0,0,0,.04);
   transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
@@ -343,33 +347,30 @@ watch(
 /* row layout */
 .card2__row { display: grid; align-items: center; }
 .card2__row--top {
-  grid-template-columns: 48px minmax(0,1fr) auto; /* avatar | titles | metrics */
+  grid-template-columns: 1fr auto; /* info | metrics */
   column-gap: 12px;
 }
 .card2__row--meta { grid-template-columns: 1fr; }
 .card2__row--foot { grid-template-columns: 1fr auto; font-size: 12px; color: #5B6476; opacity: .9; margin-top: -4px; }
 
 /* avatar */
-.avatar { width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
+.avatar { width: 56px; height: 56px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
 .avatar img { width: 100%; height: 100%; object-fit: contain; }
 .avatar__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
 
 /* titles */
-.titles { min-width: 0; display: grid; gap: 2px; }
-.title {
-  font-weight: 800; color: #0F172A; line-height: 1.15;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-  overflow: hidden; font-size: clamp(16px, 1.4vw, 18px);
-}
-.subtitle { font-size: 12px; color: #5B6476; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.info { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 12px; min-width: 0; }
+.titles { min-width: 0; display: grid; gap: 4px; }
+.title { font-weight: 900; color: #0F172A; line-height: 1.1; font-size: clamp(18px, 1.6vw, 22px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.subtitle { font-size: 13px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* primary metric */
 .primary { text-align: right; }
-.primary__label { font-size: 11px; letter-spacing: .02em; color: #6B7280; }
-.primary__value { font-weight: 900; color: #0F172A; font-size: clamp(18px, 1.8vw, 22px); white-space: nowrap; }
+.primary__label { font-size: 12px; letter-spacing: .02em; color: #6B7280; }
+.primary__value { font-weight: 900; color: #0F172A; font-size: clamp(22px, 2.2vw, 28px); white-space: nowrap; }
 
-/* metrics wrapper (balance + delta in same row) */
-.metrics { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; }
+/* metrics wrapper */
+.metrics { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
 
 /* chips & delta */
 .chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
@@ -387,6 +388,16 @@ watch(
 .chip--neutral { background: #EEF2F7; color: #0F172A; }
 .chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
 
+.delta { display: flex; align-items: baseline; gap: 8px; }
+.delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
+.delta__value.pos { background: #DCFCE7; color: #166534; }
+.delta__value.neg { background: #FEE2E2; color: #B91C1C; }
+.delta__label { font-size: 11px; color: #64748B; }
+.chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.chip { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
+.chip--neutral { background: #EEF2F7; color: #0F172A; }
+.chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
+
 .delta { display: flex; align-items: baseline; gap: 8px; }
 .delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
 .delta__value.pos { background: #DCFCE7; color: #166534; }