src/app/admin/admin.scss

 @import 'color';
 
-.header {
-  padding-top: 32px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: center;
-}
 
-nav {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 1rem;
-  justify-content: center;
-  align-items: center;
-}
 
 .adminLayout {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: start;
   gap: 1rem;
   margin: auto;
   padding-bottom: 1rem;
   width: 80%;
 }
 
+
 h3.inline {
   display: flex;
   flex-direction: row;
@@ -44,6 +30,7 @@ h3.inline {
 
 ::ng-deep .red {
   color: $red;
+
   a {
     color: $red;
   }
@@ -57,3 +44,12 @@ h3.inline {
 ::ng-deep .ag-row-group-leaf-indent {
   margin-left: 0 !important;
 }
+
+::ng-deep .filter-option div {
+  min-height: 40px !important;
+  max-height: 40px !important;
+  justify-content: center;
+  border-radius: 20px !important;
+  font-size: 0.813rem !important;
+  box-shadow: none !important; /* Removes any shadow */
+}

src/app/admin/components/nav-bar/nav-bar.component.html

 <div class="header">
-  <h1>Administration</h1>
+  <div class="title-and-ghost">
+    <h1>Administration</h1>
+    <app-button
+      [variant]="'secondary'"
+      [label]="'Ghost'"
+      [type]="'button'"
+      (action)="openGhost()"
+    ></app-button>
+  </div>
   <nav>
     <app-button
+      [variant]="'tertiary'"
+      [label]="'Créer une structure'"
+      [type]="'button'"
+      (action)="router.navigateByUrl(routes.pendingStructures.link)"
+    ></app-button>
+    <app-button
+      [variant]="'tertiary'"
       [label]="'Revendication structure'"
-      [variant]="'secondary'"
+      [type]="'button'"
       (action)="router.navigateByUrl(routes.pendingStructures.link)"
-    />
+    ></app-button>
     <app-button
+      [variant]="'tertiary'"
       [label]="'Liste structures'"
-      [variant]="'secondary'"
+      [type]="'button'"
       (action)="router.navigateByUrl(routes.structuresList.link)"
-    />
+    ></app-button>
     <app-button
+      [variant]="'tertiary'"
       [label]="'Structures supprimées'"
-      [variant]="'secondary'"
+      [type]="'button'"
       (action)="router.navigateByUrl(routes.deletedStructures.link)"
-    />
+    ></app-button>
     <app-button
+      [variant]="'tertiary'"
       [label]="'Gestion des utilisateurs'"
-      [variant]="'secondary'"
+      [type]="'button'"
       (action)="router.navigateByUrl(routes.manageUsers.link)"
-    />
-    <app-button [label]="'Fonctions'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.jobsList.link)" />
+    ></app-button>
+    <app-button
+      [variant]="'tertiary'"
+      [label]="'Fonctions'"
+      [type]="'button'"
+      (action)="router.navigateByUrl(routes.jobsList.link)"
+    ></app-button>
     <app-button
+      [variant]="'tertiary'"
       [label]="'Employeurs'"
-      [variant]="'secondary'"
+      [type]="'button'"
       (action)="router.navigateByUrl(routes.employersList.link)"
-    />
+    ></app-button>
     <app-button
+      [variant]="'tertiary'"
       [label]="'CNFS Espace Coop'"
-      [variant]="'secondary'"
+      [type]="'button'"
       (action)="router.navigateByUrl(routes.espaceCoopCNFS.link)"
-    />
-    <app-button [variant]="'tertiary'" [label]="'Ghost'" (action)="openGhost()" />
+    ></app-button>
   </nav>
 </div>

src/app/admin/components/nav-bar/nav-bar.component.scss

+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: -0.5rem;
+
+  .title-and-ghost {
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 80%;
+    height: 2rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    justify-content: start;
+  }
+
+  nav {
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    width: 80%;
+  }
+
+  app-button {
+    height: 3.75rem;
+    position: relative;
+  }
+
+}

src/app/admin/components/nav-bar/nav-bar.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { ConfigService } from '../../../services/config.service';
-import { AdminRoutes } from '../../admin-routing.module';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {ConfigService} from '../../../services/config.service';
+import {AdminRoutes} from '../../admin-routing.module';
 
 @Component({
   selector: 'app-admin-nav-bar',
   templateUrl: './nav-bar.component.html',
-  styleUrl: '../../admin.scss',
+  styleUrls: ['./nav-bar.component.scss'],
 })
 export class NavBarComponent implements OnInit {
   public routes = AdminRoutes;
@@ -15,7 +15,8 @@ export class NavBarComponent implements OnInit {
   constructor(
     public router: Router,
     private configService: ConfigService,
-  ) {}
+  ) {
+  }
 
   ngOnInit(): void {
     this.configService.getConfig().then((config) => {

src/app/admin/components/structures-list/admin-structures-list.component.html

-<app-admin-nav-bar />
+<app-admin-nav-bar></app-admin-nav-bar>
+
+<div class="filters-containers">
+  <div *ngFor="let filterOption of filterOptions; let i = index">
+    <div class="filter">
+      <app-radio-option
+        [id]="filterOption.value"
+        [label]="filterOption.label"
+        [value]="filterOption.value"
+        [selected]="filter === filterOption.value"
+        (selectedEvent)="setFilter($event.value)"
+        class="filter-option"
+      ></app-radio-option>
+    </div>
+  </div>
+</div>
+
 <div *ngIf="isLoading" class="loader" aria-busy="true">
-  <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+  <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt/>
 </div>
 <div *ngIf="!isLoading" class="adminLayout">
-  <h2>Liste structures</h2>
-  <h3>Structures avec des données manquantes ({{ structuresIncomplete ? structuresIncomplete.length : 0 }})</h3>
-  <ag-grid-angular
-    *ngIf="structuresIncomplete.length"
-    class="ag-theme-alpine"
-    domLayout="autoHeight"
-    style="width: 100%"
-    [rowData]="structuresIncomplete"
-    [columnDefs]="columnDefs"
-    [rowHeight]="rowHeight"
-    [ngClass]="'red'"
-  />
-  <div *ngIf="!structuresIncomplete?.length">Aucune structure</div>
-
-  <h3>Structures en cours de revendication ({{ structuresInClaim.length }})</h3>
-  <ag-grid-angular
-    *ngIf="structuresInClaim.length"
-    class="ag-theme-alpine"
-    domLayout="autoHeight"
-    style="width: 100%"
-    [rowData]="structuresInClaim"
-    [columnDefs]="columnDefs"
-    [rowHeight]="rowHeight"
-  />
-  <div *ngIf="!structuresInClaim?.length">Aucune structure</div>
-
-  <h3>Structures à revendiquer ({{ structuresToClaim.length }})</h3>
-  <ag-grid-angular
-    *ngIf="structuresToClaim.length"
-    class="ag-theme-alpine"
-    domLayout="autoHeight"
-    style="width: 100%"
-    [rowData]="structuresToClaim"
-    [columnDefs]="columnDefs"
-    [rowHeight]="rowHeight"
-  />
-  <div *ngIf="!structuresToClaim?.length">Aucune structure</div>
-
-  <h3>Structures revendiquées ({{ structuresClaimed.length }})</h3>
-  <ag-grid-angular
-    *ngIf="structuresClaimed.length"
-    class="ag-theme-alpine"
-    domLayout="autoHeight"
-    style="width: 100%"
-    [rowData]="structuresClaimed"
-    [columnDefs]="columnDefs"
-    [rowHeight]="rowHeight"
-  />
-  <div *ngIf="!structuresClaimed?.length">Aucune structure</div>
+  <div *ngFor="let section of filteredSections" class="section">
+    <h3>{{ section.title }} ({{ section.data?.length || 0 }})</h3>
+    <ag-grid-angular
+      *ngIf="section.data?.length"
+      class="ag-theme-alpine"
+      domLayout="autoHeight"
+      style="width: 100%"
+      [rowData]="section.data"
+      [columnDefs]="columnDefs"
+      [rowHeight]="rowHeight"
+      [ngClass]="section.cssClass"
+    ></ag-grid-angular>
+    <div *ngIf="!section.data?.length" class="no-structures">Aucun renseignement</div>
+  </div>
 </div>

src/app/admin/components/structures-list/admin-structures-list.component.scss

+.section {
+  width: 100%;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+  text-decoration: none !important;
+
+  h3 {
+    margin-bottom: 1rem;
+    line-height: 110%;
+  }
+
+  .no-structures {
+    color: var(--grey-451-text, var(--grey-451-text, #767676));
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 120%;
+  }
+}
+
+.filters-containers {
+  width: 80%;
+  display: flex;
+  margin-left: 10%;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  padding-left: 1rem;
+}
+

src/app/admin/components/structures-list/admin-structures-list.component.ts

@@ -8,28 +8,37 @@ import { AdminService } from '../../services/admin.service';
 @Component({
   selector: 'app-admin-structures-list',
   templateUrl: './admin-structures-list.component.html',
-  styleUrls: ['../../admin.scss'],
+  styleUrls: ['../../admin.scss', 'admin-structures-list.component.scss'],
 })
 export class AdminStructuresListComponent implements OnInit {
   constructor(
     private adminService: AdminService,
     private datePipe: DatePipe,
-  ) {}
+  ) { }
+
   public structuresClaimed: AdminStructure[];
   public structuresInClaim: AdminStructure[];
   public structuresToClaim: AdminStructure[];
   public structuresIncomplete: AdminStructure[];
-  public isAll = false;
   public isLoading = true;
-  public rowHeight = 25;
+  public rowHeight = 48;
+  public filter: string = 'all';
+
+  public filterOptions = [
+    { label: 'Toutes les structures', value: 'all' },
+    { label: 'Données manquantes', value: 'incomplete' },
+    { label: 'En cours de revendication', value: 'inClaim' },
+    { label: 'À revendiquer', value: 'toClaim' },
+  ];
 
   public columnDefs: ColDef<AdminStructure>[] = [
     {
       headerName: 'Structure',
       cellRenderer: (params): string => this.renderLink(params.data),
       comparator(_, __, nodeA, nodeB): number {
-        return nodeA.data.structureName.toLowerCase() > nodeB.data.structureName.toLocaleLowerCase() ? -1 : 1;
+        return nodeA.data.structureName.toLowerCase() > nodeB.data.structureName.toLowerCase() ? -1 : 1;
       },
+      cellClass: 'cell-link',
       sortable: true,
       flex: 3,
     },
@@ -37,14 +46,15 @@ export class AdminStructuresListComponent implements OnInit {
       headerName: 'Date de mise à jour',
       field: 'updatedAt',
       valueFormatter: ({ value }): string => this.datePipe.transform(value, 'mediumDate'),
-      cellClass: (params): string => {
-        return params.data.isOutdated ? 'red' : '';
-      },
+      cellClass: (params): string => (params.data.isOutdated ? 'red' : ''),
       flex: 1,
       sortable: true,
     },
   ];
 
+  public gridSections = [];
+  public filteredSections = [];
+
   ngOnInit(): void {
     this.adminService
       .getAllStructureAdmin()
@@ -54,9 +64,51 @@ export class AdminStructuresListComponent implements OnInit {
         this.structuresInClaim = response.inClaim;
         this.structuresToClaim = response.toClaim;
         this.structuresIncomplete = response.incomplete;
+
+        this.gridSections = [
+          {
+            filter: 'incomplete',
+            title: 'Structures avec des données manquantes',
+            data: this.structuresIncomplete,
+            cssClass: 'red',
+          },
+          {
+            filter: 'inClaim',
+            title: 'Structures en cours de revendication',
+            data: this.structuresInClaim,
+            cssClass: '',
+          },
+          {
+            filter: 'toClaim',
+            title: 'Structures à revendiquer',
+            data: this.structuresToClaim,
+            cssClass: '',
+          },
+          {
+            filter: 'claimed',
+            title: 'Structures revendiquées',
+            data: this.structuresClaimed,
+            cssClass: '',
+          },
+        ];
+
+        this.updateFilteredSections();
       });
   }
 
+  setFilter(filter: string | boolean): void {
+    this.filter = filter as string;
+    this.updateFilteredSections();
+  }
+
+  updateFilteredSections(): void {
+    if (this.filter === 'all') {
+      this.filteredSections = this.gridSections;
+    } else {
+      this.filteredSections = this.gridSections.filter(section => section.filter === this.filter);
+    }
+  }
+
   private renderLink(structure: AdminStructure): string {
     return `<a href="/acteurs?structure=${structure.permalink}" target="_blank">${structure.structureName}</a>`;
   }

src/styles.scss

@@ -365,3 +365,5 @@ div.inline {
 .sb-colorRow {
   margin-block: 12px !important;
 }
+
+