up results cases blocks

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

@@ -7,16 +7,50 @@
     <div class="button button-toggle chevron">v</div>
   </div>
   <div class="row tabs">
-    <div class="tab-item" (click)="selectCaseTab('information')">
+    <div (click)="selectCaseTab('information')" class="tab-item is-active">
       <i class="ri-file-list-2-line"></i>
       <div class="label">
         Information
       </div>
     </div>
+    <div (click)="selectCaseTab('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')" class="tab-item">
+      <i class="ri-file-list-2-line"></i>
+      <div class="label">
+        Answer Sent
+      </div>
+    </div>
+    <div (click)="selectCaseTab('engine_part')" class="tab-item">
+      <i class="ri-file-list-2-line"></i>
+      <div class="label">
+        Engine part
+      </div>
+    </div>
+    <div (click)="selectCaseTab('findings')" class="tab-item">
+      <i class="ri-file-list-2-line"></i>
+      <div class="label">
+        Findings
+      </div>
+    </div>
+    <div (click)="selectCaseTab('dica')" class="tab-item">
+      <i class="ri-file-list-2-line"></i>
+      <div class="label">
+        DICA
+      </div>
+    </div>
 
   </div>
-  <div class="row selected-tab-content">
+  <div class="row selected-tab-content summary">
-    AI’s summary : Work stoppage case for CFM56-7B engine (ESN: 894773) at MTU Zhuhai. LPC Stage 3 blade platform
+    <strong>
+
+
+      AI’s summary :</strong> Work stoppage case for CFM56-7B engine (ESN: 894773) at MTU Zhuhai. LPC Stage 3 blade
+    platform
     dislocation detected during shop visit BSI. Maximum dislocation: 1.22mm axial, 0.63mm radial. Customer requests
     evaluation, acceptance criteria, or DICA for further action. No corresponding limits in AMM 72-00-00 BSI inspection
     chapter.
@@ -30,5 +64,13 @@
       <span class="label">Chrono ID :</span>
       <span class="value">CSC/CFM/2023-10/00446-A</span>
     </div>
+    <div class="info-item">
+      <span class="label">Responsable Team :</span>
+      <span class="value">FO-CFM</span>
+    </div>
+    <div class="info-item">
+      <span class="label">GE Instruction:</span>
+      <span class="value">-</span>
+    </div>
   </div>
 </div>

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

@@ -0,0 +1,69 @@
+:host {
+  background: white;
+  padding: 16px;
+  display: block;
+  border-radius: 8px;
+
+  .title {
+    color: var(--Black-text, #1B1D27);
+    text-align: left;
+    font-family: Barlow;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+  }
+
+  .info-item {
+    .label {
+      font-weight: 600;
+    }
+  }
+
+  .summary {
+    border-top: 1px solid grey;
+    padding-top: 10px;
+  }
+
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .case-more-infos {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: start;
+
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    .value {
+      padding-left: 6px;
+      padding-right: 30px;
+    }
+  }
+
+  .tab-item {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    padding-bottom: 6px;
+
+    label {
+      padding-left: 6px;
+      display: inline-block;
+    }
+
+    &.is-active {
+      border-bottom: 2px solid black;
+    }
+
+  }
+
+  .summary {
+    max-width: 80ch;
+  }
+}

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

@@ -2,31 +2,30 @@
 
   <header>
     <div class="row">
-
-      <button class="button">
-        toggle
-      </button>
       <div class="title-box">
         Work stoppage case for CFM56-7B engine (ESN: 802379)...
 
       </div>
-      <div class="buttons">
+      <div class="actions">
         <button class="button">
           new question
         </button>
         <button class="button">
-          Search similar cases
+          Search solutions
+          <i class="ri-search-2-line"></i>
         </button>
       </div>
     </div>
     <div class="row filters-row">
-      <sae-filters-group></sae-filters-group>
+      <!--      <sae-filters-group></sae-filters-group>-->
     </div>
   </header>
   <main>
 
     <div class="row bot-talks">
-      <sae-bot-talks></sae-bot-talks>
+      <sae-bot-talks
+        [links]="[{}]"
+        [message]="'I found useful document(s) which can help to answer to this question ! Check if these documents are applied to similar cases'"></sae-bot-talks>
 
     </div>
     <div class="tabs-container">
@@ -34,12 +33,12 @@
 
         <div class="columns">
           <div class="column">
-            <div class="tab-button is-active">
+            <div class="tab-button similar is-active">
               Similar cases
             </div>
           </div>
           <div class="column">
-            <div class="tab-button is-active">
+            <div class="tab-button tech-manual">
               Technical manual
             </div>
           </div>
@@ -47,24 +46,20 @@
       </div>
       <div class="tabs-body">
 
+        <div class="tabs-search">
+          <i class="ri-search-2-line search"></i>
+
+          <input class="search" placeholder="Use keywords for a precise research" type="text">
+        </div>
+        <div class="tabs-results">
+          11 cases found, 3 cases suggested
+        </div>
 
         @if (displayedTab == 'similar-cases') {
           <div id="similar_cases_tab">
-            <div class="top-bar">
-<!--              <input type="text" class="search-input" [(ngModel)]="searchInput">-->
-              <div class="chips-container">
-                <button class="button chips">
 
-                  DICA
-                </button>
-
-              </div>
-            </div>
             <div class="row">
               <div class="columns">
-                <div class="found-infos column">
-                  24 cases found, 3 cases suggested by AI
-                </div>
                 <div class="toggle-ai-suggestion column">
                   AI suggestions
                   <!--              applied-->
@@ -76,6 +71,9 @@
 
               <!--           boucle des résultats-->
               <app-case-result></app-case-result>
+              <app-case-result></app-case-result>
+              <app-case-result></app-case-result>
+              <app-case-result></app-case-result>
 
             </div>
           </div>

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

@@ -1,3 +1,122 @@
-.toggle-ai-suggestion {
+
+:host {
+
+  padding: 64px;
+
+  .title-box {
+    color: #1B1D27;
+    font-family: Barlow;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 140%; /* 28px */
+
+    margin-bottom: 24px;
+  }
+
+  header {
+    button {
+      color: #255B8E;
+      color: var(--Colors-Principal-Normal, #255B8E);
+
+      /* Body/Body 3/Sb */
+      font-family: Barlow;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px; /* 150% */
+
+      display: inline-flex;
+      height: 44px;
+      padding: 14px 16px;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+      border-radius: 10px;
+      border: 1px solid var(--Colors-Principal-Normal, #255B8E);
+      background: #FFF;
+
+      + button {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .toggle-ai-suggestion {
     color: #A86CFD;
+  }
+
+  .tabs-body {
+    padding: 24px 20px;
+    gap: 32px;
+    border-radius: 8px;
+    background: #E3EAF1;
+    margin-top: 10px;
+  }
+
+  .tabs-search {
+    color: #525668;
+    font-family: Barlow;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 16px;
+    width: 100%;
+    min-width: 976px;
+    display: block;
+    padding: 16px;
+    margin: 5px auto;
+  }
+
+  .tabs-results {
+    color: #083B7D;
+    font-family: "Source Sans Pro";
+    font-size: 16px;
+    font-style: italic;
+    font-weight: 600;
+    line-height: 140%;
+    margin-top: 40px;
+  }
+
+  .tab-button {
+    padding: 16px;
+    text-align: center;
+    border-radius: 8px;
+    color: var(--Black-text, #1B1D27);
+    font-family: Barlow;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 140%;
+
+    &.is-active {
+      background: #E3EAF1;
+      color: #000;
+      font-size: 20px;
+      font-weight: 600;
+      line-height: normal;
+
+    }
+  }
+
+  .indicator {
+    ::before {
+      width: 12px;
+      height: 12px;
+      background: blue;
+
+    }
+  }
+
+  #similar_cases_tab {
+    .cases-results {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      app-case-result {
+        margin-bottom: 8px;
+      }
+    }
+  }
 }