From e8f4fbf66d41a03a5206721e492bfa435be4ea76 Mon Sep 17 00:00:00 2001
From: Sylvain Jermini <sylvain.jermini@syjer.com>
Date: Tue, 13 Dec 2022 18:58:17 +0100
Subject: [PATCH] Admin initial setup: add filtering + some icons (#1156)

* add icons + initial work for org switching #1127

* add stubs for more parts #1127

* add filter for lazy load expired events #1127
---
 frontend-admin/src/app/app-routing.module.ts  |  2 +-
 frontend-admin/src/app/app.component.html     |  3 +-
 frontend-admin/src/app/app.component.spec.ts  | 35 ------------------
 frontend-admin/src/app/app.component.ts       | 18 +++++++++-
 frontend-admin/src/app/app.module.ts          |  8 ++---
 .../dashboard-menu.component.html             |  6 ++--
 .../app/dashboard/dashboard.component.html    | 32 +++++++++--------
 .../src/app/dashboard/dashboard.component.ts  | 27 +++++++++++---
 .../src/app/dashboard/dashboard.module.ts     | 21 ++++++++---
 .../dashboard/groups/groups.component.html    |  1 +
 .../dashboard/groups/groups.component.scss    |  0
 .../app/dashboard/groups/groups.component.ts  | 15 ++++++++
 .../organization-info.component.html          |  1 +
 .../organization-info.component.scss          |  0
 .../organization-info.component.ts            | 15 ++++++++
 .../subscriptions.component.html              |  1 +
 .../subscriptions.component.scss              |  0
 .../subscriptions/subscriptions.component.ts  | 15 ++++++++
 .../filter-button/filter-button.component.ts  | 36 +++++++++++++++++++
 frontend-admin/src/app/shared/icons.ts        | 25 ++++++++++++-
 frontend-admin/src/assets/svg/add.svg         |  1 +
 frontend-admin/src/assets/svg/home.svg        |  1 +
 .../src/assets/svg/organization.svg           |  1 +
 frontend-admin/src/assets/svg/settings.svg    |  1 +
 24 files changed, 196 insertions(+), 69 deletions(-)
 delete mode 100644 frontend-admin/src/app/app.component.spec.ts
 create mode 100644 frontend-admin/src/app/dashboard/groups/groups.component.html
 create mode 100644 frontend-admin/src/app/dashboard/groups/groups.component.scss
 create mode 100644 frontend-admin/src/app/dashboard/groups/groups.component.ts
 create mode 100644 frontend-admin/src/app/dashboard/organization-info/organization-info.component.html
 create mode 100644 frontend-admin/src/app/dashboard/organization-info/organization-info.component.scss
 create mode 100644 frontend-admin/src/app/dashboard/organization-info/organization-info.component.ts
 create mode 100644 frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.html
 create mode 100644 frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.scss
 create mode 100644 frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.ts
 create mode 100644 frontend-admin/src/app/shared/filter-button/filter-button.component.ts
 create mode 100644 frontend-admin/src/assets/svg/add.svg
 create mode 100644 frontend-admin/src/assets/svg/home.svg
 create mode 100644 frontend-admin/src/assets/svg/organization.svg
 create mode 100644 frontend-admin/src/assets/svg/settings.svg

diff --git a/frontend-admin/src/app/app-routing.module.ts b/frontend-admin/src/app/app-routing.module.ts
index 07f5dd793e..fb0839807e 100644
--- a/frontend-admin/src/app/app-routing.module.ts
+++ b/frontend-admin/src/app/app-routing.module.ts
@@ -4,7 +4,7 @@ import { MissingOrgComponent } from './missing-org/missing-org.component';
 
 const routes: Routes = [
   {
-    path: 'organization/:id',
+    path: 'organization/:organizationId',
     loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
   },
   {
diff --git a/frontend-admin/src/app/app.component.html b/frontend-admin/src/app/app.component.html
index d151b9031a..892748caf9 100644
--- a/frontend-admin/src/app/app.component.html
+++ b/frontend-admin/src/app/app.component.html
@@ -1,8 +1,9 @@
 <!--based on https://getbootstrap.com/docs/5.2/examples/dashboard/ -->
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
     <span class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6">
         <img src="assets/alfio-logo.svg" height="48">
     </span>
+    <span style="color: white;">org id {{organizationId$ | async}}</span>
     <!-- <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search"
         aria-label="Search">
     <div class="navbar-nav">
diff --git a/frontend-admin/src/app/app.component.spec.ts b/frontend-admin/src/app/app.component.spec.ts
deleted file mode 100644
index 82e8e8b069..0000000000
--- a/frontend-admin/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'alfio-admin'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('alfio-admin');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('alfio-admin app is running!');
-  });
-});
diff --git a/frontend-admin/src/app/app.component.ts b/frontend-admin/src/app/app.component.ts
index 50405ef5e1..806a61c590 100644
--- a/frontend-admin/src/app/app.component.ts
+++ b/frontend-admin/src/app/app.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { filter, map, Observable, tap } from 'rxjs';
+import { Organization } from './model/organization';
+import { OrganizationService } from './shared/organization.service';
 
 @Component({
   selector: 'app-root',
@@ -8,11 +12,23 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private readonly translateService: TranslateService) {
+  public organizations$?: Observable<Organization[]>;
+  public organizationId$?: Observable<string | null>;
+
+  constructor(
+    private readonly translateService: TranslateService,
+    private readonly organizationService: OrganizationService,
+    private readonly router: Router,
+  ) {
   }
 
   ngOnInit(): void {
     this.translateService.setDefaultLang('en');
     this.translateService.use('en');
+    this.organizations$ = this.organizationService.getOrganizations();
+    this.organizationId$ = this.router.events.pipe(filter(a => a instanceof ActivationEnd), map(a => {
+      const ae = a as ActivationEnd;
+      return ae.snapshot.paramMap.get('organizationId');
+    }));
   }
 }
diff --git a/frontend-admin/src/app/app.module.ts b/frontend-admin/src/app/app.module.ts
index 123a10951a..36c72787e8 100644
--- a/frontend-admin/src/app/app.module.ts
+++ b/frontend-admin/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import {APP_INITIALIZER, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {provideSvgIcons} from '@ngneat/svg-icon';
+import {provideSvgIconsConfig} from '@ngneat/svg-icon';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {AuthenticationModule} from "./authentication/authentication.module";
@@ -12,7 +12,7 @@ import {firstValueFrom} from "rxjs";
 import { SvgIconComponent } from '@ngneat/svg-icon';
 import {OrganizationService} from './shared/organization.service';
 import {MissingOrgComponent} from './missing-org/missing-org.component';
-import { ICONS } from './shared/icons';
+import { ICON_CONFIG } from './shared/icons';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {CustomLoader} from './shared/i18n.service';
 
@@ -34,7 +34,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
   declarations: [
     AppComponent,
-    MissingOrgComponent
+    MissingOrgComponent,
   ],
   imports: [
     BrowserModule,
@@ -58,7 +58,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     { provide: APP_INITIALIZER, useFactory: RedirectToLoginIfNeeded, deps: [UserService, Router], multi: true},
     { provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true },
     { provide: HttpXsrfTokenExtractor, useClass: DOMXsrfTokenExtractor },
-    provideSvgIcons(ICONS),
+    provideSvgIconsConfig(ICON_CONFIG),
     DOMGidExtractor,
     DOMXsrfTokenExtractor,
     UserService,
diff --git a/frontend-admin/src/app/dashboard/dashboard-menu/dashboard-menu.component.html b/frontend-admin/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
index b1bdd1b410..36c2f25ba8 100644
--- a/frontend-admin/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
+++ b/frontend-admin/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
@@ -1,12 +1,12 @@
 <ul class="nav flex-column">
   <li class="nav-item">
-    <a class="nav-link" [routerLink]="['./']">My events</a>
+    <a class="nav-link" [routerLink]="['./']"><svg-icon key="home"></svg-icon> My events</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" [routerLink]="['./subscriptions']">Subscriptions</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" [routerLink]="['./organization-info']">My organization</a>
+    <a class="nav-link" [routerLink]="['./organization-info']"><svg-icon key="organization"></svg-icon> My organization</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" [routerLink]="['./access-control']">Access Control</a>
@@ -15,6 +15,6 @@
     <a class="nav-link" [routerLink]="['./groups']">Groups</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" [routerLink]="['./configuration']">Configuration</a>
+    <a class="nav-link" [routerLink]="['./configuration']"><svg-icon key="settings"></svg-icon> Configuration</a>
   </li>
 </ul>
diff --git a/frontend-admin/src/app/dashboard/dashboard.component.html b/frontend-admin/src/app/dashboard/dashboard.component.html
index e411832c03..da3e4e0e68 100644
--- a/frontend-admin/src/app/dashboard/dashboard.component.html
+++ b/frontend-admin/src/app/dashboard/dashboard.component.html
@@ -1,15 +1,19 @@
 <h1 translate="admin.dashboard.my-events"></h1>
-<svg-icon key="check"></svg-icon>
-<h2>Active</h2>
-<ul>
-    <li *ngFor="let ev of activeEvents$ | async">
-        {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
-    </li>
-</ul>
-
-<h2>Expired</h2>
-<ul>
-    <li *ngFor="let ev of expiredEvents$ | async">
-        {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
-    </li>
-</ul>
+<app-filter-button text="Active" [checked]="activeFilter" (toggleFilter)="toggleActiveFilter($event)"></app-filter-button>
+<app-filter-button text="Inactive" [checked]="inactiveFilter"  (toggleFilter)="toggleInactiveFilter($event)"></app-filter-button>
+<ng-container *ngIf="activeFilter">
+    <h2>Active</h2>
+    <ul>
+        <li *ngFor="let ev of activeEvents$ | async">
+            {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
+        </li>
+    </ul>
+</ng-container>
+<ng-container *ngIf="inactiveFilter">
+    <h2>Expired</h2>
+    <ul>
+        <li *ngFor="let ev of expiredEvents$ | async">
+            {{ev.displayName}} {{ev.formattedBegin}} {{ev.formattedEnd}}
+        </li>
+    </ul>
+</ng-container>
diff --git a/frontend-admin/src/app/dashboard/dashboard.component.ts b/frontend-admin/src/app/dashboard/dashboard.component.ts
index 3335f90c93..371b9c5f6e 100644
--- a/frontend-admin/src/app/dashboard/dashboard.component.ts
+++ b/frontend-admin/src/app/dashboard/dashboard.component.ts
@@ -12,13 +12,32 @@ export class DashboardComponent implements OnInit {
   public readonly organizationId: string;
   public activeEvents$: Observable<EventInfo[]> = of();
   public expiredEvents$: Observable<EventInfo[]> = of();
+  public activeFilter: boolean = true;
+  public inactiveFilter: boolean = false;
 
   constructor(route: ActivatedRoute, private readonly eventService: EventService) {
-    this.organizationId = route.snapshot.paramMap.get('id') as string;
+    this.organizationId = route.snapshot.paramMap.get('organizationId') as string;
   }
 
-  ngOnInit(): void {
-    this.activeEvents$ = this.eventService.getActiveEvents(this.organizationId);
-    this.expiredEvents$ = this.eventService.getExpiredEvents(this.organizationId);
+  public ngOnInit(): void {
+    this.activeEvents$ = this.eventService.getActiveEvents(this.organizationId); // default
+  }
+
+  public toggleActiveFilter(toggle: boolean): void {
+    this.activeFilter = toggle;
+    if (toggle) {
+      this.activeEvents$ = this.eventService.getActiveEvents(this.organizationId);
+    } else {
+      this.activeEvents$ = of();
+    }
+  }
+
+  public toggleInactiveFilter(toggle: boolean): void {
+    this.inactiveFilter = toggle;
+    if (toggle) {
+      this.expiredEvents$ = this.eventService.getExpiredEvents(this.organizationId);
+    } else {
+      this.expiredEvents$ = of();
+    }
   }
 }
diff --git a/frontend-admin/src/app/dashboard/dashboard.module.ts b/frontend-admin/src/app/dashboard/dashboard.module.ts
index bf1c5b26b5..d47d531a35 100644
--- a/frontend-admin/src/app/dashboard/dashboard.module.ts
+++ b/frontend-admin/src/app/dashboard/dashboard.module.ts
@@ -7,9 +7,13 @@ import {OrganizationService} from "../shared/organization.service";
 import {CommonModule} from "@angular/common";
 import {EventService} from "../shared/event.service";
 import {OrganizationConfigurationComponent} from './organization-configuration/organization-configuration.component';
-import {provideSvgIcons, SvgIconComponent} from '@ngneat/svg-icon';
-import { TranslateModule } from '@ngx-translate/core'
-import { ICONS } from "../shared/icons";
+import {provideSvgIconsConfig, SvgIconComponent} from '@ngneat/svg-icon';
+import {TranslateModule} from '@ngx-translate/core'
+import {ICON_CONFIG} from "../shared/icons";
+import {SubscriptionsComponent} from './subscriptions/subscriptions.component';
+import {OrganizationInfoComponent} from './organization-info/organization-info.component';
+import {GroupsComponent} from './groups/groups.component';
+import {FilterButtonComponent} from "../shared/filter-button/filter-button.component";
 
 @NgModule({
   imports: [
@@ -19,19 +23,26 @@ import { ICONS } from "../shared/icons";
     RouterModule.forChild([
       { path: '', component: DashboardComponent},
       { path: '', component: DashboardMenuComponent, outlet: 'sidebar-content'},
-      { path: 'configuration', component: OrganizationConfigurationComponent }
+      { path: 'configuration', component: OrganizationConfigurationComponent },
+      { path: 'subscriptions', component: SubscriptionsComponent },
+      { path: 'organization-info', component: OrganizationInfoComponent },
+      { path: 'groups', component: GroupsComponent },
     ]),
     SvgIconComponent,
+    FilterButtonComponent,
   ],
   declarations: [
     DashboardComponent,
     DashboardMenuComponent,
     OrganizationConfigurationComponent,
+    SubscriptionsComponent,
+    OrganizationInfoComponent,
+    GroupsComponent,
   ],
   providers: [
     OrganizationService,
     EventService,
-    provideSvgIcons(ICONS),
+    provideSvgIconsConfig(ICON_CONFIG)
   ]
 })
 export class DashboardModule {}
diff --git a/frontend-admin/src/app/dashboard/groups/groups.component.html b/frontend-admin/src/app/dashboard/groups/groups.component.html
new file mode 100644
index 0000000000..41ad0f66d7
--- /dev/null
+++ b/frontend-admin/src/app/dashboard/groups/groups.component.html
@@ -0,0 +1 @@
+<p>groups works!</p>
diff --git a/frontend-admin/src/app/dashboard/groups/groups.component.scss b/frontend-admin/src/app/dashboard/groups/groups.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend-admin/src/app/dashboard/groups/groups.component.ts b/frontend-admin/src/app/dashboard/groups/groups.component.ts
new file mode 100644
index 0000000000..f9072010ee
--- /dev/null
+++ b/frontend-admin/src/app/dashboard/groups/groups.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-groups',
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.scss']
+})
+export class GroupsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend-admin/src/app/dashboard/organization-info/organization-info.component.html b/frontend-admin/src/app/dashboard/organization-info/organization-info.component.html
new file mode 100644
index 0000000000..5cf34fe66b
--- /dev/null
+++ b/frontend-admin/src/app/dashboard/organization-info/organization-info.component.html
@@ -0,0 +1 @@
+<p>organization-info works!</p>
diff --git a/frontend-admin/src/app/dashboard/organization-info/organization-info.component.scss b/frontend-admin/src/app/dashboard/organization-info/organization-info.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend-admin/src/app/dashboard/organization-info/organization-info.component.ts b/frontend-admin/src/app/dashboard/organization-info/organization-info.component.ts
new file mode 100644
index 0000000000..a11143a2f4
--- /dev/null
+++ b/frontend-admin/src/app/dashboard/organization-info/organization-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-organization-info',
+  templateUrl: './organization-info.component.html',
+  styleUrls: ['./organization-info.component.scss']
+})
+export class OrganizationInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.html b/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.html
new file mode 100644
index 0000000000..a0996687a0
--- /dev/null
+++ b/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.html
@@ -0,0 +1 @@
+<p>subscriptions works!</p>
diff --git a/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.scss b/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.ts b/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.ts
new file mode 100644
index 0000000000..3d772342c4
--- /dev/null
+++ b/frontend-admin/src/app/dashboard/subscriptions/subscriptions.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-subscriptions',
+  templateUrl: './subscriptions.component.html',
+  styleUrls: ['./subscriptions.component.scss']
+})
+export class SubscriptionsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend-admin/src/app/shared/filter-button/filter-button.component.ts b/frontend-admin/src/app/shared/filter-button/filter-button.component.ts
new file mode 100644
index 0000000000..7853ee2d22
--- /dev/null
+++ b/frontend-admin/src/app/shared/filter-button/filter-button.component.ts
@@ -0,0 +1,36 @@
+import { NgClass, NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SvgIconComponent } from '@ngneat/svg-icon';
+
+@Component({
+  standalone: true,
+  imports: [SvgIconComponent, NgClass, NgIf],
+  selector: 'app-filter-button',
+  template: `
+  <button
+    type="button"
+    class="btn"
+    style="border-radius: 20px"
+    [ngClass]="{'btn-outline-primary': !checked, 'btn-primary': checked}"
+    (click)="onClick()"
+  >
+    <svg-icon key="check" size="md" *ngIf="checked"></svg-icon> {{text}}
+  </button>`,
+})
+export class FilterButtonComponent {
+
+  @Input()
+  public text?: string;
+
+  @Input()
+  public checked: boolean = false;
+
+  @Output()
+  public toggleFilter = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  public onClick(): void {
+    this.toggleFilter.emit(!this.checked);
+  }
+}
diff --git a/frontend-admin/src/app/shared/icons.ts b/frontend-admin/src/app/shared/icons.ts
index 008c8d888e..391924fefb 100644
--- a/frontend-admin/src/app/shared/icons.ts
+++ b/frontend-admin/src/app/shared/icons.ts
@@ -1,3 +1,26 @@
+import { addIcon } from '../svg/add';
 import {checkIcon} from '../svg/check';
+import {homeIcon} from '../svg/home';
+import { organizationIcon } from '../svg/organization';
+import { settingsIcon } from '../svg/settings';
 
-export const ICONS = [checkIcon];
+const ICONS = [
+  checkIcon,
+  homeIcon,
+  checkIcon,
+  addIcon,
+  organizationIcon,
+  settingsIcon,
+];
+export const ICON_CONFIG = {
+  sizes: {
+    xs: '10px',
+    sm: '12px',
+    md: '16px',
+    lg: '20px',
+    xl: '25px',
+    xxl: '30px',
+  },
+  defaultSize: 'xl',
+  icons: ICONS
+};
diff --git a/frontend-admin/src/assets/svg/add.svg b/frontend-admin/src/assets/svg/add.svg
new file mode 100644
index 0000000000..76d4d8a219
--- /dev/null
+++ b/frontend-admin/src/assets/svg/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M22.5 38V25.5H10v-3h12.5V10h3v12.5H38v3H25.5V38Z"/></svg>
\ No newline at end of file
diff --git a/frontend-admin/src/assets/svg/home.svg b/frontend-admin/src/assets/svg/home.svg
new file mode 100644
index 0000000000..6a001268a4
--- /dev/null
+++ b/frontend-admin/src/assets/svg/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 39h7.5V26.5h11V39H37V19.5L24 9.75 11 19.5Zm-3 3V18L24 6l16 12v24H26.5V29.5h-5V42Zm16-17.65Z"/></svg>
\ No newline at end of file
diff --git a/frontend-admin/src/assets/svg/organization.svg b/frontend-admin/src/assets/svg/organization.svg
new file mode 100644
index 0000000000..e970c3e370
--- /dev/null
+++ b/frontend-admin/src/assets/svg/organization.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M4 42V6h19.5v8.25H44V42Zm3-3h5.25v-5.25H7Zm0-8.25h5.25V25.5H7Zm0-8.25h5.25v-5.25H7Zm0-8.25h5.25V9H7ZM15.25 39h5.25v-5.25h-5.25Zm0-8.25h5.25V25.5h-5.25Zm0-8.25h5.25v-5.25h-5.25Zm0-8.25h5.25V9h-5.25ZM23.5 39H41V17.25H23.5v5.25h4v3h-4v5.25h4v3h-4Zm9.25-13.5v-3h3v3Zm0 8.25v-3h3v3Z"/></svg>
\ No newline at end of file
diff --git a/frontend-admin/src/assets/svg/settings.svg b/frontend-admin/src/assets/svg/settings.svg
new file mode 100644
index 0000000000..0d6f5507c4
--- /dev/null
+++ b/frontend-admin/src/assets/svg/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m19.4 44-1-6.3q-.95-.35-2-.95t-1.85-1.25l-5.9 2.7L4 30l5.4-3.95q-.1-.45-.125-1.025Q9.25 24.45 9.25 24q0-.45.025-1.025T9.4 21.95L4 18l4.65-8.2 5.9 2.7q.8-.65 1.85-1.25t2-.9l1-6.35h9.2l1 6.3q.95.35 2.025.925Q32.7 11.8 33.45 12.5l5.9-2.7L44 18l-5.4 3.85q.1.5.125 1.075.025.575.025 1.075t-.025 1.05q-.025.55-.125 1.05L44 30l-4.65 8.2-5.9-2.7q-.8.65-1.825 1.275-1.025.625-2.025.925l-1 6.3ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Zm0-3q-1.45 0-2.475-1.025Q20.5 25.45 20.5 24q0-1.45 1.025-2.475Q22.55 20.5 24 20.5q1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm0-3.5Zm-2.2 17h4.4l.7-5.6q1.65-.4 3.125-1.25T32.7 32.1l5.3 2.3 2-3.6-4.7-3.45q.2-.85.325-1.675.125-.825.125-1.675 0-.85-.1-1.675-.1-.825-.35-1.675L40 17.2l-2-3.6-5.3 2.3q-1.15-1.3-2.6-2.175-1.45-.875-3.2-1.125L26.2 7h-4.4l-.7 5.6q-1.7.35-3.175 1.2-1.475.85-2.625 2.1L10 13.6l-2 3.6 4.7 3.45q-.2.85-.325 1.675-.125.825-.125 1.675 0 .85.125 1.675.125.825.325 1.675L8 30.8l2 3.6 5.3-2.3q1.2 1.2 2.675 2.05Q19.45 35 21.1 35.4Z"/></svg>
\ No newline at end of file