added tabs in cases

sae-csc/src/app/pages/similar-cases/case-result/case-result.html

@@ -1,17 +1,29 @@
 <div class="case-result">
 
   <!--case result-->
-  <div class="title">
+  <header class="case-header">
+
+    <div class="title">
     <span class="label">
 
     7B / 72-21-02 / Booster blades stg 3 / LPC STG.3 BLADES DISLOCATION / 894773
 
     </span>
-    <i class="ri-arrow-down-s-line"></i>
+      <i class="ri-arrow-down-s-line"></i>
-  </div>
+
+
+    </div>
+    <div class="actions">
+      @if (case.suggested) {
+        <div class="magic-text">
+
+          <i class="ri ri-magic-fill"></i>
+          Suggested
+        </div>
+      }
+    </div>
+  </header>
   <div class="row tabs">
-
-
     <div (click)="selectCaseTab('information')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
          class="tab-item">
       <i class="ri-file-list-2-line"></i>
@@ -19,34 +31,34 @@
         Information
       </div>
     </div>
-    <div (click)="selectCaseTab('original_question')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
+    <div (click)="selectCaseTab('original_question')" [ngClass]="{ 'is-active' : activeTab == 'original_question' }"
          class="tab-item">
       <i class="ri-file-list-2-line"></i>
       <div class="label">
         Original Question
       </div>
     </div>
-    <div (click)="selectCaseTab('answer_sent')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
+    <div (click)="selectCaseTab('answer_sent')" [ngClass]="{ 'is-active' : activeTab == 'answer_sent' }"
          class="tab-item">
       <i class="ri-file-list-2-line"></i>
       <div class="label">
         Answer Sent
       </div>
     </div>
-    <div (click)="selectCaseTab('engine_part')" [ngClass]="{ 'is-active' : activeTab == 'information' }"
+    <div (click)="selectCaseTab('engine_part')" [ngClass]="{ 'is-active' : activeTab == 'engine_part' }"
          class="tab-item">
       <i class="ri-file-list-2-line"></i>
       <div class="label">
         Engine part
       </div>
     </div>
-    <div (click)="selectCaseTab('findings')" [ngClass]="{ 'is-active' : activeTab == 'information' }" class="tab-item">
+    <div (click)="selectCaseTab('findings')" [ngClass]="{ 'is-active' : activeTab == 'findings' }" class="tab-item">
       <i class="ri-file-list-2-line"></i>
       <div class="label">
         Findings
       </div>
     </div>
-    <div (click)="selectCaseTab('dica')" [ngClass]="{ 'is-active' : activeTab == 'information' }" class="tab-item">
+    <div (click)="selectCaseTab('dica')" [ngClass]="{ 'is-active' : activeTab == 'dica' }" class="tab-item">
       <i class="ri-file-list-2-line"></i>
       <div class="label">
         DICA
@@ -69,6 +81,10 @@
     @if (activeTab == 'dica') {
       {{ case.DICA }}
       {{ case.DICA_file }}
+    } @else {
+      @if (activeTab[case] == 'dica') {
+        {{ activeTab[case] }}
+      }
     }
 
 

sae-csc/src/app/pages/similar-cases/case-result/case-result.scss

@@ -1,9 +1,24 @@
+@use '../../../../styles/variables-barrel' as variables;
+
 :host {
   background: white;
   padding: 16px;
   display: block;
   border-radius: 8px;
 
+  .magic-text {
+    color: variables.$csc-magic-color;
+  }
+
+
+  .case-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+  }
+
   .title {
     color: var(--Black-text, #1B1D27);
     text-align: left;
@@ -69,7 +84,9 @@
 
   }
 
-  .summary {
+
-    max-width: 80ch;
+  .selected-tab-content {
+    min-height: 3rem;
   }
+
 }

sae-csc/src/app/pages/similar-cases/similar-cases.html

@@ -101,15 +101,6 @@
         @if (displayedTab == 'similar-cases') {
           <div id="similar_cases_tab">
 
-            <!--            <div class="row">-->
-            <!--              <div class="columns">-->
-            <!--                <div class="toggle-ai-suggestion column">-->
-            <!--                  AI suggestions-->
-            <!--                  &lt;!&ndash;              applied&ndash;&gt;-->
-            <!--                  &lt;!&ndash;              disabled&ndash;&gt;-->
-            <!--                </div>-->
-            <!--              </div>-->
-            <!--            </div>-->
             <div class="row cases-results">
 
               <!--           boucle des résultats-->

sae-csc/src/app/styles/_app.scss

@@ -1,6 +1,4 @@
-
 // dev tools
 @use '_global.scss';
 @use '_debug.scss';
-@use '_variables.scss';