From 05d8ba81177622c0e82849f12b60064896bbda76 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 22 Aug 2025 12:52:30 +0200
Subject: [PATCH] csc multiple selectors

---
 .../filters/filters-group/filters-group.html  |  9 ++--
 .../filters/filters-group/filters-group.scss  |  6 +++
 .../inputs/multi-selector/multi-selector.html |  4 +-
 .../inputs/multi-selector/multi-selector.ts   |  3 +-
 sae-csc/src/app/app.routes.ts                 | 16 +++++-
 sae-csc/src/app/pages/login/login.html        | 11 ++--
 sae-csc/src/app/pages/login/login.scss        |  3 +-
 sae-csc/src/app/pages/login/login.ts          |  4 +-
 sae-csc/src/app/pages/main/main.html          |  5 +-
 sae-csc/src/app/pages/main/main.scss          |  3 +-
 .../bottom-navigation/bottom-navigation.html  |  7 +++
 .../bottom-navigation/bottom-navigation.scss  | 50 ++++++++++++++++---
 .../src/styles/app/styles/pages/_main.scss    | 44 ----------------
 13 files changed, 96 insertions(+), 69 deletions(-)

diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
index 4cf882f..b47a1bc 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
@@ -1,8 +1,11 @@
 <div class="filter-group">
   <div class="selectors">
-
-
-    <sae-multi-selector></sae-multi-selector>
+    <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
+    <sae-multi-selector [label]="'ATA'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Part number'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>
+    <sae-multi-selector [label]="'On-wing/off-wing'"></sae-multi-selector>
   </div>
   <div class="chips-listing">
     <!--    liste de chips-->
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
index 51ee03e..f5f37ac 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
@@ -1,5 +1,11 @@
 @use '../../src/styles/variables';
 
+.selectors {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
 .dropdown {
   .dropdown-button {
     padding: 10px;
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index 1329a80..bee9fae 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
@@ -1,8 +1,8 @@
 <!--    sélecteurs-->
 <div class="input-box">
   <i class="ri-search-line"></i>
-  <!--      <div class="label">Engine type</div>-->
-  <input class="is-hidden" placeholder="Engine type" type="text">
+  <div class="label">{{ label }}</div>
+  <input class="is-hidden" placeholder="{{label}}" type="text">
   <div class="dropdown">
     <div class="dropdown-button">
 
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
index 5645da9..523bfd5 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'sae-multi-selector',
@@ -7,5 +7,6 @@ import {Component} from '@angular/core';
   styleUrl: './multi-selector.scss'
 })
 export class MultiSelector {
+  @Input() label!: string;
 
 }
diff --git a/sae-csc/src/app/app.routes.ts b/sae-csc/src/app/app.routes.ts
index d04fe9f..cbbff13 100644
--- a/sae-csc/src/app/app.routes.ts
+++ b/sae-csc/src/app/app.routes.ts
@@ -8,13 +8,25 @@ export const routes: Routes = [{
   path: '',
   component: Main
 },
+  {
+    path: 'login',
+    component: Login
+  },
   {
     path: 'admin',
     component: Admin
   },
   {
-    path: 'login',
-    component: Login
+    path: 'home',
+    component: Main
+  },
+  {
+    path: 'main',
+    component: Main
+  },
+  {
+    path: 'login/home',
+    component: Main
   },
   {
     path: 'similar-cases',
diff --git a/sae-csc/src/app/pages/login/login.html b/sae-csc/src/app/pages/login/login.html
index 70c0f61..331d54a 100644
--- a/sae-csc/src/app/pages/login/login.html
+++ b/sae-csc/src/app/pages/login/login.html
@@ -26,12 +26,15 @@
           </a>
         </p>
         <p>
-          <button class="button has-gradient">
+          <a class="button has-gradient" routerLink="/home">
           <span class="label">
-          Login to start |
+          Login to start
           </span>
+            <span class="pipe">
+              |
+            </span>
             <i class="ri-arrow-right-line"></i>
-          </button>
+          </a>
         </p>
 
       </div>
@@ -49,5 +52,5 @@
       <!--      right-->
     </div>
   </div>
-  
+
 </div>
diff --git a/sae-csc/src/app/pages/login/login.scss b/sae-csc/src/app/pages/login/login.scss
index b43cfe3..0d0514a 100644
--- a/sae-csc/src/app/pages/login/login.scss
+++ b/sae-csc/src/app/pages/login/login.scss
@@ -25,7 +25,6 @@
     margin-bottom: 40px;
 
     a {
-      color: var(--Dark-brand-primary-400, #337DC3);
 
       /* Body/Body 4/Sb */
       font-family: Barlow;
@@ -36,6 +35,8 @@
       &:hover {
         color: white;
       }
+
+      text-decoration: none;
     }
   }
 
diff --git a/sae-csc/src/app/pages/login/login.ts b/sae-csc/src/app/pages/login/login.ts
index 9a422e2..8eed97a 100644
--- a/sae-csc/src/app/pages/login/login.ts
+++ b/sae-csc/src/app/pages/login/login.ts
@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {LoginForm} from 'sae-lib/forms/login-form/login-form';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-login',
   imports: [
-    LoginForm
+    RouterLink
   ],
   templateUrl: './login.html',
   styleUrl: './login.scss'
diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html
index 1d6d35a..4fcb30e 100644
--- a/sae-csc/src/app/pages/main/main.html
+++ b/sae-csc/src/app/pages/main/main.html
@@ -32,7 +32,10 @@
       </h2>
       <!--filters-->
       <!--      advanced filters-->
-      <sae-filters-group></sae-filters-group>
+      <div class="filters-container">
+
+        <sae-filters-group></sae-filters-group>
+      </div>
     </div>
   </main>
   <footer>
diff --git a/sae-csc/src/app/pages/main/main.scss b/sae-csc/src/app/pages/main/main.scss
index ac6d613..2238d93 100644
--- a/sae-csc/src/app/pages/main/main.scss
+++ b/sae-csc/src/app/pages/main/main.scss
@@ -14,7 +14,8 @@
 
 #translation_request {
   .helper {
-    padding-left: 4.5%;
+    padding-left: 5.3vw;
+    padding-bottom: 16px;
   }
 }
 
diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html
index a6016a0..e19e4bd 100644
--- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html
+++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html
@@ -9,7 +9,14 @@
   </nav>
   <div class="fixed-navigation">
     <button class="next-step" routerLink="similar-cases">
+      <span class="label">
+
       Search similar cases
+      </span>
+      <span class="pipe">
+        |
+      </span>
+      <i class="ri-arrow-right-line"></i>
     </button>
   </div>
 </div>
diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
index 717d914..585ef17 100644
--- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
+++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
@@ -1,14 +1,48 @@
-.next-step{
-  color: var(--color-text-invert, #FFF);
+.bottom-navigation {
+  padding: 0 60px 16px;
+
+  .nav-item {
+    display: inline-flex;
+    padding: 12px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-text-title, #255B8E);
+    leading-trim: both;
+    text-edge: cap;
+
+    /* Text/text-button */
+    font-family: var(--Fonts-Font-text, Barlow);
+    font-size: var(--Font-Base, 14px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%; /* 14px */
+    letter-spacing: 1.12px;
+    text-transform: uppercase;
+    margin-left: -12px;
+    cursor: pointer;
+
+    &:hover {
+      color: white;
+      background: var(--color-primary, #073A7C);
+    }
+  }
+}
+
+.next-step {
   text-align: center;
   leading-trim: both;
   text-edge: cap;
+  min-width: 230px;
+  padding: 14px 16px;
+  border-radius: 10px;
 
-  /* Text/text-button */
-  font-family: var(--Fonts-Font-text, Barlow);
-  font-size: var(--Font-Base, 14px);
-  font-style: normal;
+  color: var(--Light-base-solid-white, #FFF);
+
+  font-size: 16px;
   font-weight: 600;
-  line-height: 100%; /* 14px */
-  letter-spacing: 1.12px;
+  line-height: 24px;
+
+  background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+
 }
diff --git a/sae-csc/src/styles/app/styles/pages/_main.scss b/sae-csc/src/styles/app/styles/pages/_main.scss
index 6d135f5..09bbf2c 100644
--- a/sae-csc/src/styles/app/styles/pages/_main.scss
+++ b/sae-csc/src/styles/app/styles/pages/_main.scss
@@ -58,30 +58,6 @@
 }
 
 
-.bottom-navigation {
-  .nav-item {
-
-    display: inline-flex;
-    padding: 12px 16px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-
-    color: var(--color-text-title, #255B8E);
-    leading-trim: both;
-    text-edge: cap;
-
-    /* Text/text-button */
-    font-family: var(--Fonts-Font-text, Barlow);
-    font-size: var(--Font-Base, 14px);
-    font-style: normal;
-    font-weight: 600;
-    line-height: 100%; /* 14px */
-    letter-spacing: 1.12px;
-
-  }
-}
-
 .fixed-navigation {
   display: flex;
   position: fixed;
@@ -97,24 +73,4 @@
   box-shadow: 0 -10px 20px 0 rgba(30, 31, 34, 0.05);
 
 
-  .next-step {
-    display: flex;
-    padding: 12px;
-    align-items: center;
-    gap: 5px;
-    border: 1px solid white;
-    border-radius: 8px;
-    background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%), #FFF;
-    min-width: 200px;
-
-
-    color: var(--color-text-invert, #FFF);
-    text-align: center;
-    font-size: var(--Font-Base, 14px);
-    font-style: normal;
-    font-weight: 600;
-
-    letter-spacing: 1.12px;
-
-  }
 }