change view and add weekly tss changes

src/components/UserDashboard.vue

@@ -130,6 +130,30 @@
             Total gain
           </div>
         </div>
+
+        <div class="metric-card metric-card-featured">
+          <div class="metric-icon-wrapper">
+            <div class="icon-badge icon-badge-tss">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="metric-label">Weekly TSS</div>
+          <div class="metric-value">{{ currentWeekTSS }}</div>
+          <div class="metric-change" :class="tssChangeClass">
+            <svg v-if="tssChangePercent > 0" viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+            </svg>
+            <svg v-else-if="tssChangePercent < 0" viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+            </svg>
+            <svg v-else viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+              <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
+            </svg>
+            {{ tssChangeText }}
+          </div>
+        </div>
       </div>
 
       <!-- Recent Activity Section -->
@@ -328,6 +352,86 @@ const currentDate = computed(() => {
   })
 })
 
+// Helper to get start of week (Monday)
+function getWeekStart(date) {
+  const d = new Date(date)
+  const day = d.getDay()
+  const diff = d.getDate() - day + (day === 0 ? -6 : 1) // Adjust for Monday start
+  d.setDate(diff)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
+// Helper to get end of week (Sunday)
+function getWeekEnd(date) {
+  const start = getWeekStart(date)
+  const end = new Date(start)
+  end.setDate(end.getDate() + 6)
+  end.setHours(23, 59, 59, 999)
+  return end
+}
+
+// Calculate TSS for a date range
+function calculateTSSForRange(workouts, startDate, endDate) {
+  return workouts
+    .filter(w => {
+      const workoutDate = new Date(w.scheduled_date)
+      return workoutDate >= startDate &&
+             workoutDate <= endDate &&
+             w.status === 'completed' &&
+             w.tss != null
+    })
+    .reduce((sum, w) => sum + (w.tss || 0), 0)
+}
+
+// Current week TSS
+const currentWeekTSS = computed(() => {
+  const now = new Date()
+  const weekStart = getWeekStart(now)
+  const weekEnd = getWeekEnd(now)
+  const tss = calculateTSSForRange(recentWorkouts.value, weekStart, weekEnd)
+  return Math.round(tss)
+})
+
+// Previous week TSS
+const previousWeekTSS = computed(() => {
+  const now = new Date()
+  const currentWeekStart = getWeekStart(now)
+  const prevWeekEnd = new Date(currentWeekStart)
+  prevWeekEnd.setDate(prevWeekEnd.getDate() - 1)
+  prevWeekEnd.setHours(23, 59, 59, 999)
+  const prevWeekStart = getWeekStart(prevWeekEnd)
+  const tss = calculateTSSForRange(recentWorkouts.value, prevWeekStart, prevWeekEnd)
+  return Math.round(tss)
+})
+
+// TSS percentage change from previous week
+const tssChangePercent = computed(() => {
+  if (previousWeekTSS.value === 0) {
+    return currentWeekTSS.value > 0 ? 100 : 0
+  }
+  return Math.round(((currentWeekTSS.value - previousWeekTSS.value) / previousWeekTSS.value) * 100)
+})
+
+// TSS change display text
+const tssChangeText = computed(() => {
+  if (previousWeekTSS.value === 0 && currentWeekTSS.value === 0) {
+    return 'No data'
+  }
+  if (previousWeekTSS.value === 0) {
+    return '+100% vs last week'
+  }
+  const sign = tssChangePercent.value >= 0 ? '+' : ''
+  return `${sign}${tssChangePercent.value}% vs last week`
+})
+
+// TSS change CSS class
+const tssChangeClass = computed(() => {
+  if (tssChangePercent.value > 0) return 'positive'
+  if (tssChangePercent.value < 0) return 'negative'
+  return 'neutral'
+})
+
 onMounted(async () => {
   try {
     await loadRecentWorkouts()
@@ -567,6 +671,23 @@ body.sidebar-collapsed .dashboard-container {
   background: linear-gradient(135deg, #e63946, #d62828);
 }
 
+.icon-badge-tss {
+  background: linear-gradient(135deg, #8b5cf6, #6366f1);
+}
+
+.metric-card-featured {
+  border: 2px solid var(--color-primary);
+  background: linear-gradient(135deg, var(--color-surface), rgba(102, 126, 234, 0.05));
+}
+
+.metric-change.negative {
+  color: #ef4444;
+}
+
+.metric-change.neutral {
+  color: var(--color-text-secondary);
+}
+
 /* Workouts List */
 .workouts-list-modern {
   display: flex;