Add display consumtpion in boss mini card

src/components/Season/SeasonCardOnGoing.tsx

@@ -70,7 +70,6 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
     })
   }, [userSeason])
 
-  //TODO change icon and stars when finished
   return (
     <div className="cardContent onGoing">
       <div className="titleBlock">
@@ -125,11 +124,29 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
           <StarsContainer starNumber={userSeason.progress >= 15 ? 5 : 4} />
         </div>
       </div>
-      {userSeason.progress >= userSeason.target ? (
+      {userSeason.progress >= userSeason.target &&
+      userSeason.boss.state === UserBossState.UNLOCKED ? (
         <button className="smallCard goDuel" onClick={goDuel}>
           {t('season.card.ongoing.duel')}
           <StyledIcon className="circleStar" icon={seasonIcon} size={60} />
         </button>
+      ) : userSeason.boss.state === UserBossState.ONGOING ? (
+        <div className={'smallCard bossCard active'}>
+          <div className="finalDuel">
+            <span>{t('season.card.ongoing.duel')}</span>
+            <p className="starCount">
+              <span className="blueNumber">{`${userSeason.boss.userConsumption} €  `}</span>
+              <span>{` / ${userSeason.boss.threshold} €`}</span>
+            </p>
+          </div>
+          <StyledIcon className="circleStar" icon={seasonIcon} size={60} />
+        </div>
+      ) : userSeason.boss.state === UserBossState.DONE ? (
+        //TODO add open Modal onclick
+        <div className={'smallCard bossCard'}>
+          <span>{t('season.card.ongoing.duelDone')}</span>
+          <StyledIcon className="duelLocked" icon={duelLocked} size={60} />
+        </div>
       ) : (
         <div className={'smallCard bossCard'}>
           <p className="starCount">

src/components/Season/seasonCardOnGoing.scss

@@ -82,12 +82,28 @@
       margin: 0 0.3rem 0 0.7rem;
     }
   }
+  .finalDuel {
+    display: flex;
+    flex-direction: column;
+    .starCount {
+      span {
+        font-size: 1rem;
+        font-weight: 500;
+      }
+      .blueNumber {
+        margin-left: 0;
+      }
+    }
+  }
 }
 .bossCard {
   background: $dark-3;
   border: solid 1px rgba(97, 240, 242, 0.5);
   align-items: center;
   justify-content: space-between;
+  &.active {
+    background: $grey-linear-gradient-background;
+  }
 }
 .goDuel {
   align-items: center;

src/locales/fr.json

@@ -350,7 +350,8 @@
         "quiz": "Quiz",
         "mission": "Missions",
         "action": "Actions",
-        "duel": "Défi Final"
+        "duel": "Défi Final",
+        "duelDone": "Résultat du défi final"
       },
       "locked": {
         "desc": "À débloquer en terminant la saison précédente"