feat: split admin dashboard, improve match ops, and player closed-match UX

Admin: add match/player overview sub-nav; refine settlement flow and league
match management UI; improve action button enabled/disabled styles; enhance
logo upload and outright odds sync.

API: expose matchPhase/bettingOpen for closed matches; league publish guards;
settlement preview with auto score save; outright team auto-sync.

Player: watermark for closed/settled states; keep match and bet details visible;
remove default login credentials.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/components/MatchBetCard.vue

@@ -2,6 +2,8 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { teamFlagUrl } from '../utils/teamFlag';
+import StatusWatermark from './StatusWatermark.vue';
+import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
 
 const props = defineProps<{
   match: {
@@ -13,6 +15,14 @@ const props = defineProps<{
     homeTeamLogoUrl?: string | null;
     awayTeamLogoUrl?: string | null;
     startTime: string;
+    bettingOpen?: boolean;
+    matchPhase?: MatchPhase;
+    score?: {
+      htHome: number;
+      htAway: number;
+      ftHome: number;
+      ftAway: number;
+    } | null;
   };
 }>();
 
@@ -44,12 +54,36 @@ const awayFlagUrl = computed(() =>
 
 const homeIsLogo = computed(() => Boolean(props.match.homeTeamLogoUrl?.trim()));
 const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
+
+const bettingOpen = computed(() => props.match.bettingOpen !== false);
+
+const phase = computed(
+  () => props.match.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
+);
+
+const phaseLabel = computed(() => matchPhaseLabel(t, phase.value));
+
+const liveScoreText = computed(() => {
+  const s = props.match.score;
+  if (!s) return '';
+  return `${s.ftHome} - ${s.ftAway}`;
+});
 </script>
 
 <template>
-  <article class="match-card">
+  <article
+    class="match-card"
+    :class="{ 'match-card--phase': phase !== 'open' }"
+    @click="emit('bet', match.id)"
+  >
+    <StatusWatermark
+      v-if="phase !== 'open'"
+      :label="phaseLabel"
+      :variant="matchPhaseVariant(phase)"
+      size="sm"
+    />
+
     <div class="teams-row">
-      <!-- Home -->
       <div class="team">
         <span class="team-name">{{ match.homeTeamName }}</span>
         <img
@@ -61,13 +95,12 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
         />
       </div>
 
-      <!-- Center -->
       <div class="center-col">
         <span class="kickoff">{{ kickoffText }}</span>
-        <span class="vs">VS</span>
+        <span v-if="phase !== 'open' && liveScoreText" class="live-score">{{ liveScoreText }}</span>
+        <span v-else class="vs">VS</span>
       </div>
 
-      <!-- Away -->
       <div class="team">
         <span class="team-name">{{ match.awayTeamName }}</span>
         <img
@@ -80,14 +113,20 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
       </div>
     </div>
 
-    <button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
-      {{ t('bet.place_bet_short') }}
+    <button
+      type="button"
+      class="bet-btn"
+      :class="bettingOpen ? 'btn-gold-outline' : 'bet-btn--view'"
+      @click.stop="emit('bet', match.id)"
+    >
+      {{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
     </button>
   </article>
 </template>
 
 <style scoped>
 .match-card {
+  position: relative;
   background: #0d0d0d;
   border: 1px solid rgba(255, 215, 0, 0.25);
   border-radius: 6px;
@@ -97,9 +136,17 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
   align-items: center;
   gap: 8px;
   min-width: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.match-card--phase {
+  border-color: rgba(140, 140, 140, 0.35);
 }
 
 .teams-row {
+  position: relative;
+  z-index: 2;
   display: flex;
   align-items: center;
   width: 100%;
@@ -132,6 +179,10 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
   align-self: stretch;
 }
 
+.match-card--phase .team-name {
+  color: #d8d8d8;
+}
+
 .team-flag {
   width: 72px;
   height: 48px;
@@ -165,6 +216,14 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }
 
+.live-score {
+  font-size: 20px;
+  font-weight: 900;
+  color: #fff;
+  line-height: 1;
+  letter-spacing: 0.04em;
+}
+
 .vs {
   font-size: 22px;
   font-weight: 900;
@@ -175,6 +234,8 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
 }
 
 .bet-btn {
+  position: relative;
+  z-index: 2;
   width: auto;
   min-width: 80px;
   padding: 5px 24px;
@@ -183,4 +244,10 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
   letter-spacing: 0.04em;
   line-height: 1.2;
 }
+
+.bet-btn--view {
+  background: #1a1a1a;
+  border: 1px solid #444;
+  color: #aaa;
+}
 </style>