commit 558c8d5713a4b6c5e31e91c3b80f42af4e6a73a8
Author: Václav Jirák <jirakv95@gmail.com>
Date:   Mon Jun 10 16:42:49 2019 +0200

    Frontend refactored

diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html
deleted file mode 100644
index 9a09bb2..0000000
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<h1 mat-dialog-title>{{ 'addVacation.headline' | translate }}</h1>
-
-<div mat-dialog-content>
-  <div class="vacation-selection-container">
-    <label id="vacation-type-radio-group-label" class="dialog-label">{{ 'basic.vacationType' | translate }}</label>
-    <mat-radio-group aria-labelledby="vacation-type-radio-group-label" class="vacation-type-radio-group" [(ngModel)]="selectedVacationType">
-      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.SICKDAY>
-        {{ vacationType.SICKDAY | translate }}
-      </mat-radio-button>
-      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.VACATION>
-        {{ vacationType.VACATION | translate }}
-      </mat-radio-button>
-    </mat-radio-group>
-  </div>
-  <div class="datetime-selection-container">
-    <div class="date-selection">
-      <span class="dialog-label">{{ 'basic.date' | translate }}</span>
-      <mat-form-field class="date-input">
-        <input id="date-input" matInput [matDatepicker]="datePicker" [(ngModel)]="data.date">
-        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
-        <mat-datepicker #datePicker></mat-datepicker>
-      </mat-form-field>
-    </div>
-    <div class="datetime-interval" *ngIf="selectedVacationType == vacationType.VACATION">
-      <div class="from-time">
-        <span class="dialog-label">Od:</span>
-        <div class="time-input-container">
-          <input class="time-input" [format]="24" [value]="data.fromTime" [ngxTimepicker]="fromTimePicker">
-          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.fromTime = $event" #fromTimePicker></ngx-material-timepicker>
-          <i class="material-icons">access_time</i>
-        </div>
-      </div>
-      <div class="to-time">
-        <span class="dialog-label">Do:</span>
-        <div class="time-input-container">
-          <input class="time-input" [format]="24" [value]="data.toTime" [ngxTimepicker]="toTimePicker">
-          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.toTime = $event" #toTimePicker></ngx-material-timepicker>
-          <i class="material-icons">access_time</i>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div mat-dialog-actions align="end">
-  <button mat-raised-button color="primary" (click)="onConfirmClick()">{{ 'button.confirm' | translate }}</button>
-  <button mat-raised-button color="basic" (click)="onCloseClick()">{{ 'button.close' | translate }}</button>
-</div>
diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass
deleted file mode 100644
index 3c695cf..0000000
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.sass
+++ /dev/null
@@ -1,41 +0,0 @@
-.dialog-label
-  display: block
-  font-weight: bold
-  color: grey
-
-.datetime-picker > *
-  display: table-cell
-
-.vacation-type-radio-group
-  display: flex
-  flex-direction: column
-  margin: 15px 0
-
-.date-input
-  width: 200px
-
-.from-time
-  display: inline-block
-
-.to-time
-  display: inline-block
-  margin-left: 3px
-
-.datetime-selection-container
-  margin-bottom: 10px
-
-.time-input-container
-  display: inline-block
-  padding: 2px
-  border-bottom: 1px solid grey
-
-  .time-input
-    background-color: transparent
-    border: 0
-    outline: none
-    width: 85px
-
-  .material-icons
-    font-size: 12px
-    font-weight: bold
-    color: grey
diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts
deleted file mode 100644
index 86279de..0000000
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef, MatSnackBar} from '@angular/material';
-import {VacationType} from '../enums/common.enum';
-import {FormControl} from '@angular/forms';
-import {DateFormatterService} from '../services/util/date-formatter.service';
-import {TranslateService} from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-add-days-off-dialog',
-  templateUrl: './add-vacation-dialog.component.html',
-  styleUrls: ['./add-vacation-dialog.component.sass']
-})
-export class AddVacationDialogComponent {
-  MINUTE_STEP = 15;
-
-  vacationType = VacationType;
-
-  selectedVacationType: VacationType;
-
-  dateFormControl: FormControl = new FormControl();
-
-  constructor(
-    public dialogRef: MatDialogRef<AddVacationDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: AddVacationDialogData,
-    private snackBar: MatSnackBar,
-    private dateFormatterService: DateFormatterService,
-    private translateService: TranslateService
-  ) {
-    if (this.data.fromTime == null) {
-      this.data.fromTime = '08:00';
-    }
-    if (data.toTime == null) {
-      this.data.toTime = '16:00';
-    }
-
-    this.dateFormControl.setValue(data.date);
-  }
-
-  onConfirmClick(): void {
-    if (this.selectedVacationType == null) {
-      this.translateService.get('error.vacationTypeNotSelected').subscribe((res: string) => {
-        this.snackBar.open(res, 'X', { duration: 5000 });
-      });
-    } else {
-      let data;
-      const formattedDate = this.dateFormatterService.formatDate(this.data.date);
-
-      if (this.selectedVacationType === VacationType.VACATION) {
-        data = {
-          isConfirmed: true,
-          vacationType: this.selectedVacationType,
-          date: formattedDate,
-          fromTime: this.data.fromTime,
-          toTime: this.data.toTime
-        };
-      } else {
-        data = {
-          isConfirmed: true,
-          vacationType: this.selectedVacationType,
-          date: formattedDate
-        };
-      }
-
-      this.dialogRef.close(data);
-    }
-  }
-
-  onCloseClick(): void {
-    this.dialogRef.close({
-      isConfirmed: false
-    });
-  }
-
-}
-
-export interface AddVacationDialogData {
-  date: Date;
-  fromTime: string; // 'HH:mm' format
-  toTime: string; // 'HH:mm' format
-}
diff --git a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts b/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts
deleted file mode 100644
index 53a3e24..0000000
--- a/webapp/src/app/add-vacation-dialog/add-vacation-dialog.module.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AddVacationDialogComponent } from './add-vacation-dialog.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  MatButtonModule,
-  MatDialogModule,
-  MatDatepickerModule,
-  MatNativeDateModule,
-  MatInputModule, MatRadioModule, MatSnackBarModule
-} from '@angular/material';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {BrowserModule} from '@angular/platform-browser';
-import {SharedModule} from '../shared/shared.module';
-import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
-import {TranslateModule} from '@ngx-translate/core';
-
-
-@NgModule({
-  declarations: [AddVacationDialogComponent],
-  imports: [
-    CommonModule,
-    BrowserAnimationsModule,
-    MatButtonModule,
-    MatDialogModule,
-    NgbModule,
-    FormsModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    ReactiveFormsModule,
-    BrowserModule,
-    MatInputModule,
-    MatRadioModule,
-    MatSnackBarModule,
-    SharedModule,
-    NgxMaterialTimepickerModule,
-    TranslateModule
-  ],
-  exports: [
-    AddVacationDialogComponent
-  ],
-  entryComponents: [
-    AddVacationDialogComponent
-  ]
-})
-export class AddVacationDialogModule { }
diff --git a/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.html b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.html
new file mode 100644
index 0000000..9a09bb2
--- /dev/null
+++ b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.html
@@ -0,0 +1,48 @@
+<h1 mat-dialog-title>{{ 'addVacation.headline' | translate }}</h1>
+
+<div mat-dialog-content>
+  <div class="vacation-selection-container">
+    <label id="vacation-type-radio-group-label" class="dialog-label">{{ 'basic.vacationType' | translate }}</label>
+    <mat-radio-group aria-labelledby="vacation-type-radio-group-label" class="vacation-type-radio-group" [(ngModel)]="selectedVacationType">
+      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.SICKDAY>
+        {{ vacationType.SICKDAY | translate }}
+      </mat-radio-button>
+      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.VACATION>
+        {{ vacationType.VACATION | translate }}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <div class="datetime-selection-container">
+    <div class="date-selection">
+      <span class="dialog-label">{{ 'basic.date' | translate }}</span>
+      <mat-form-field class="date-input">
+        <input id="date-input" matInput [matDatepicker]="datePicker" [(ngModel)]="data.date">
+        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+        <mat-datepicker #datePicker></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div class="datetime-interval" *ngIf="selectedVacationType == vacationType.VACATION">
+      <div class="from-time">
+        <span class="dialog-label">Od:</span>
+        <div class="time-input-container">
+          <input class="time-input" [format]="24" [value]="data.fromTime" [ngxTimepicker]="fromTimePicker">
+          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.fromTime = $event" #fromTimePicker></ngx-material-timepicker>
+          <i class="material-icons">access_time</i>
+        </div>
+      </div>
+      <div class="to-time">
+        <span class="dialog-label">Do:</span>
+        <div class="time-input-container">
+          <input class="time-input" [format]="24" [value]="data.toTime" [ngxTimepicker]="toTimePicker">
+          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.toTime = $event" #toTimePicker></ngx-material-timepicker>
+          <i class="material-icons">access_time</i>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" (click)="onConfirmClick()">{{ 'button.confirm' | translate }}</button>
+  <button mat-raised-button color="basic" (click)="onCloseClick()">{{ 'button.close' | translate }}</button>
+</div>
diff --git a/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.sass b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.sass
new file mode 100644
index 0000000..3c695cf
--- /dev/null
+++ b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.sass
@@ -0,0 +1,41 @@
+.dialog-label
+  display: block
+  font-weight: bold
+  color: grey
+
+.datetime-picker > *
+  display: table-cell
+
+.vacation-type-radio-group
+  display: flex
+  flex-direction: column
+  margin: 15px 0
+
+.date-input
+  width: 200px
+
+.from-time
+  display: inline-block
+
+.to-time
+  display: inline-block
+  margin-left: 3px
+
+.datetime-selection-container
+  margin-bottom: 10px
+
+.time-input-container
+  display: inline-block
+  padding: 2px
+  border-bottom: 1px solid grey
+
+  .time-input
+    background-color: transparent
+    border: 0
+    outline: none
+    width: 85px
+
+  .material-icons
+    font-size: 12px
+    font-weight: bold
+    color: grey
diff --git a/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.ts b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.ts
new file mode 100644
index 0000000..3b41f0b
--- /dev/null
+++ b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.ts
@@ -0,0 +1,80 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef, MatSnackBar} from '@angular/material';
+import {VacationType} from '../../enums/common.enum';
+import {FormControl} from '@angular/forms';
+import {DateFormatterService} from '../../services/util/date-formatter.service';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-add-days-off-dialog',
+  templateUrl: './add-vacation-dialog.component.html',
+  styleUrls: ['./add-vacation-dialog.component.sass']
+})
+export class AddVacationDialogComponent {
+  MINUTE_STEP = 15;
+
+  vacationType = VacationType;
+
+  selectedVacationType: VacationType;
+
+  dateFormControl: FormControl = new FormControl();
+
+  constructor(
+    public dialogRef: MatDialogRef<AddVacationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AddVacationDialogData,
+    private snackBar: MatSnackBar,
+    private dateFormatterService: DateFormatterService,
+    private translateService: TranslateService
+  ) {
+    if (this.data.fromTime == null) {
+      this.data.fromTime = '08:00';
+    }
+    if (data.toTime == null) {
+      this.data.toTime = '16:00';
+    }
+
+    this.dateFormControl.setValue(data.date);
+  }
+
+  onConfirmClick(): void {
+    if (this.selectedVacationType == null) {
+      this.translateService.get('error.vacationTypeNotSelected').subscribe((res: string) => {
+        this.snackBar.open(res, 'X', { duration: 5000 });
+      });
+    } else {
+      let data;
+      const formattedDate = this.dateFormatterService.formatDate(this.data.date);
+
+      if (this.selectedVacationType === VacationType.VACATION) {
+        data = {
+          isConfirmed: true,
+          vacationType: this.selectedVacationType,
+          date: formattedDate,
+          fromTime: this.data.fromTime,
+          toTime: this.data.toTime
+        };
+      } else {
+        data = {
+          isConfirmed: true,
+          vacationType: this.selectedVacationType,
+          date: formattedDate
+        };
+      }
+
+      this.dialogRef.close(data);
+    }
+  }
+
+  onCloseClick(): void {
+    this.dialogRef.close({
+      isConfirmed: false
+    });
+  }
+
+}
+
+export interface AddVacationDialogData {
+  date: Date;
+  fromTime: string; // 'HH:mm' format
+  toTime: string; // 'HH:mm' format
+}
diff --git a/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.module.ts b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.module.ts
new file mode 100644
index 0000000..74b7814
--- /dev/null
+++ b/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.module.ts
@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddVacationDialogComponent } from './add-vacation-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  MatButtonModule,
+  MatDialogModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
+  MatInputModule, MatRadioModule, MatSnackBarModule
+} from '@angular/material';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SharedModule} from '../../shared/shared.module';
+import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+import {TranslateModule} from '@ngx-translate/core';
+
+
+@NgModule({
+  declarations: [AddVacationDialogComponent],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgbModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSnackBarModule,
+    SharedModule,
+    NgxMaterialTimepickerModule,
+    TranslateModule
+  ],
+  exports: [
+    AddVacationDialogComponent
+  ],
+  entryComponents: [
+    AddVacationDialogComponent
+  ]
+})
+export class AddVacationDialogModule { }
diff --git a/webapp/src/app/dashboard/dashboard.component.html b/webapp/src/app/dashboard/dashboard.component.html
index 719fb5c..766addb 100644
--- a/webapp/src/app/dashboard/dashboard.component.html
+++ b/webapp/src/app/dashboard/dashboard.component.html
@@ -1 +1,49 @@
-<app-employer-dashboard></app-employer-dashboard>
+<div class="container-fluid h-100">
+  <div class="row">
+    <div class="col-lg-8 mid-panel">
+
+      <div class="dashboard-user-approval"
+           *ngIf="authorizationRequests && authorizationRequests.length > 0 && isEmployer()">
+        <app-user-approval
+          [authorizationRequests]="authorizationRequests"
+          (userApprovalEvent)="userApproved($event.requestId, $event.approved)"
+        ></app-user-approval>
+      </div>
+
+      <div class="dashboard-vacation-approval"
+           *ngIf="vacationRequests && vacationRequests.length > 0 && isEmployer()">
+        <app-days-off-approval
+          [vacationRequests]="vacationRequests"
+          (vacationApprovalEvent)="vacationApproved($event.requestId, $event.approved)"
+        ></app-days-off-approval>
+      </div>
+
+      <div class="dashboard-oncoming-vacation"
+           *ngIf="oncomingVacation && oncomingVacation.length > 0">
+        <app-coming-days-off
+          [oncomingVacation]="oncomingVacation"
+          (vacationRemove)="removeVacation($event)"
+        ></app-coming-days-off>
+      </div>
+
+      <div class="dashboard-day-picker">
+        <app-day-picker #dayPicker
+                        (selectedDate)="onDateSelect($event)"
+                        (selectedMonth)="onSelectedMonthChange($event)"
+        ></app-day-picker>
+      </div>
+
+    </div>
+
+    <div class="col-lg-4 right-panel">
+
+      <div class="days-off-info" *ngIf="profile">
+        <app-vacation-info
+          [sickDaysRemaining]="profile.sickDayCount - profile.takenSickDayCount"
+          [extraVacationRemaining]="profile.vacationCount"
+        ></app-vacation-info>
+      </div>
+
+    </div>
+  </div>
+</div>
diff --git a/webapp/src/app/dashboard/dashboard.component.sass b/webapp/src/app/dashboard/dashboard.component.sass
index e69de29..50335f0 100644
--- a/webapp/src/app/dashboard/dashboard.component.sass
+++ b/webapp/src/app/dashboard/dashboard.component.sass
@@ -0,0 +1,17 @@
+.row
+  padding: 0
+
+.mid-panel
+  padding: 10px 0 0 10px
+
+.right-panel
+  padding: 10px 10px 0 10px
+
+.dashboard-user-approval
+  padding: 0 0 10px 0
+
+.dashboard-vacation-approval
+  padding: 0 0 10px 0
+
+.dashboard-oncoming-vacation
+  padding: 0 0 10px 0
diff --git a/webapp/src/app/dashboard/dashboard.component.ts b/webapp/src/app/dashboard/dashboard.component.ts
index fe03bc7..d06c11f 100644
--- a/webapp/src/app/dashboard/dashboard.component.ts
+++ b/webapp/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatDialog} from '@angular/material';
+import {AddVacationDialogComponent} from './add-vacation-dialog/add-vacation-dialog.component';
+import {UsersService} from '../services/api/users.service';
+import {AuthorizationRequest, VacationRequest} from '../models/requests.model';
+import {UserService} from '../services/api/user.service';
+import {UserProfile} from '../models/user.model';
+import {LocalizationService} from '../localization/localization.service';
+import {RequestStatus, RequestTypes, UserType} from '../enums/common.enum';
+import {Calendar} from '../models/calendar.model';
+import {DateToolsService} from '../services/util/date-tools.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -6,10 +16,137 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./dashboard.component.sass']
 })
 export class DashboardComponent implements OnInit {
+  @ViewChild('dayPicker') calendar;
 
-  constructor() { }
+  private profile: UserProfile;
+  private authorizationRequests: AuthorizationRequest[];
+  private vacationRequests: VacationRequest[];
+  private oncomingVacation: Calendar[];
+
+  private selectedMonth: Date;
+
+  constructor(
+    public dialog: MatDialog,
+    private localizationService: LocalizationService,
+    private dateToolsService: DateToolsService,
+    private userService: UserService,
+    private usersService: UsersService
+  ) { }
 
   ngOnInit() {
+    this.selectedMonth = this.dateToolsService.toStartOfMonth(new Date());
+
+    this.userService.getLoggedUserProfile()
+      .subscribe((data: UserProfile) => {
+        this.profile = data;
+        if (this.isEmployer()) {
+          this.loadAuthorizationRequests();
+          this.loadVacationRequests();
+        }
+      });
+
+    this.loadMonthVacation(this.selectedMonth);
+    this.loadOncomingVacation();
+  }
+
+  userApproved(requestId: number, approved: boolean) {
+    this.requestApproved(requestId, RequestTypes.AUTHORIZATION, approved)
+      .subscribe(() => this.loadAuthorizationRequests());
+  }
+
+  vacationApproved(requestId: number, approved: boolean) {
+    this.requestApproved(requestId, RequestTypes.VACATION, approved)
+      .subscribe(() => this.loadVacationRequests());
+  }
+
+  requestApproved(requestId: number, requestType: RequestTypes, approved: boolean) {
+    const request = {
+      id: requestId,
+      status: approved ? RequestStatus.ACCEPTED : RequestStatus.REJECTED
+    };
+
+    return this.userService.putUserRequestWithLanguage(request, requestType, this.localizationService.getCurrentLanguage());
+  }
+
+  removeVacation(vac: Calendar) {
+    this.userService.deleteCalendar(vac.id, this.localizationService.getCurrentLanguage())
+      .subscribe(() => {
+        this.loadOncomingVacation();
+        this.loadMonthVacation(this.selectedMonth);
+        this.loadProfile();
+      });
+  }
+
+  onDateSelect( date: Date ) {
+    this.dialog
+      .open(AddVacationDialogComponent, {
+        data: {
+          date
+        }
+      })
+      .afterClosed().subscribe(data => {
+      if (data && data.isConfirmed) {
+        this.userService.postCalendarWithLanguage(
+          {
+            date: data.date,
+            from: data.fromTime,
+            to: data.toTime,
+            type: data.vacationType
+          },
+          this.localizationService.getCurrentLanguage()
+        ).subscribe(() => {
+          this.loadMonthVacation(this.selectedMonth);
+          this.loadOncomingVacation();
+          this.loadProfile();
+        });
+      }
+    });
   }
 
+  onSelectedMonthChange(monthStart: Date) {
+    this.selectedMonth = monthStart;
+    this.loadMonthVacation(monthStart);
+  }
+
+  isEmployer(): boolean {
+    if (this.profile) {
+      return this.profile.role === UserType.EMPLOYER;
+    } else {
+      return false;
+    }
+  }
+
+  private loadProfile() {
+    this.userService.getLoggedUserProfile()
+      .subscribe((data: UserProfile) => this.profile = data);
+  }
+
+  private loadAuthorizationRequests() {
+    this.usersService.getAuthorizationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
+      .subscribe((data: AuthorizationRequest[]) => this.authorizationRequests = data);
+  }
+
+  private loadVacationRequests() {
+    this.usersService.getVacationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
+      .subscribe((data: VacationRequest[]) => this.vacationRequests = data);
+  }
+
+  private loadMonthVacation(month: Date) {
+    const fromDate = this.dateToolsService.toStartOfMonth(month);
+    const toDate = this.dateToolsService.toEndOfMonth(fromDate);
+
+    this.userService.getLoggedUserCalendarWithOptions(fromDate, toDate, this.localizationService.getCurrentLanguage(), RequestStatus.ACCEPTED)
+      .subscribe((data: Calendar[]) => {
+        if (data) {
+          this.calendar.setVacation(data);
+        }
+      });
+  }
+
+  private loadOncomingVacation() {
+    const fromDate = new Date();
+
+    this.userService.getLoggedUserCalendarWithOptions(fromDate, null, this.localizationService.getCurrentLanguage(), null)
+      .subscribe((data: Calendar[]) => this.oncomingVacation = data);
+  }
 }
diff --git a/webapp/src/app/dashboard/dashboard.module.ts b/webapp/src/app/dashboard/dashboard.module.ts
index 6174a19..add5ddd 100644
--- a/webapp/src/app/dashboard/dashboard.module.ts
+++ b/webapp/src/app/dashboard/dashboard.module.ts
@@ -1,12 +1,29 @@
-import {NgModule} from '@angular/core';
-import {EmployerDashboardModule} from './employer-dashboard/employer-dashboard.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DayPickerModule } from '../shared/day-picker/day-picker.module';
+import { VacationInfoModule } from '../shared/vacation-info/vacation-info.module';
+import { UserApprovalModule } from './user-approval/user-approval.module';
+import { VacationApprovalModule } from './vacation-approval/vacation-approval.module';
+import { OncomingVacationModule } from './oncoming-vacation/oncoming-vacation.module';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {AddVacationDialogModule} from './add-vacation-dialog/add-vacation-dialog.module';
+import {MatDialogModule} from '@angular/material';
 import {DashboardComponent} from './dashboard.component';
 
 @NgModule({
   declarations: [ DashboardComponent ],
   exports:      [ DashboardComponent ],
   imports: [
-    EmployerDashboardModule
+    CommonModule,
+    DayPickerModule,
+    VacationInfoModule,
+    UserApprovalModule,
+    VacationApprovalModule,
+    DayPickerModule,
+    OncomingVacationModule,
+    BrowserAnimationsModule,
+    AddVacationDialogModule,
+    MatDialogModule
   ]
 })
 export class DashboardModule { }
diff --git a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.html b/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.html
deleted file mode 100644
index cd9cee6..0000000
--- a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<div class="container-fluid h-100">
-  <div class="row">
-    <div class="col-lg-8 mid-panel">
-
-      <div class="employer-dashboard-user-approval"
-           *ngIf="authorizationRequests && authorizationRequests.length > 0 && isEmployer()">
-        <app-user-approval
-          [authorizationRequests]="authorizationRequests"
-          (userApprovalEvent)="userApproved($event.requestId, $event.approved)"
-        ></app-user-approval>
-      </div>
-
-      <div class="employer-dashboard-vacation-approval"
-           *ngIf="vacationRequests && vacationRequests.length > 0 && isEmployer()">
-        <app-days-off-approval
-          [vacationRequests]="vacationRequests"
-          (vacationApprovalEvent)="vacationApproved($event.requestId, $event.approved)"
-        ></app-days-off-approval>
-      </div>
-
-      <div class="employer-dashboard-oncoming-vacation"
-           *ngIf="oncomingVacation && oncomingVacation.length > 0">
-        <app-coming-days-off
-          [oncomingVacation]="oncomingVacation"
-          (vacationRemove)="removeVacation($event)"
-        ></app-coming-days-off>
-      </div>
-
-      <div class="employer-dashboard-day-picker">
-        <app-day-picker #dayPicker
-          (selectedDate)="onDateSelect($event)"
-          (selectedMonth)="onSelectedMonthChange($event)"
-        ></app-day-picker>
-      </div>
-
-    </div>
-
-    <div class="col-lg-4 right-panel">
-
-      <div class="days-off-info" *ngIf="profile">
-        <app-vacation-info
-          [sickDaysRemaining]="profile.sickDayCount - profile.takenSickDayCount"
-          [extraVacationRemaining]="profile.vacationCount"
-        ></app-vacation-info>
-      </div>
-
-    </div>
-  </div>
-</div>
diff --git a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.sass b/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.sass
deleted file mode 100644
index 66d97fe..0000000
--- a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.sass
+++ /dev/null
@@ -1,17 +0,0 @@
-.row
-  padding: 0
-
-.mid-panel
-  padding: 10px 0 0 10px
-
-.right-panel
-  padding: 10px 10px 0 10px
-
-.employer-dashboard-user-approval
-  padding: 0 0 10px 0
-
-.employer-dashboard-vacation-approval
-  padding: 0 0 10px 0
-
-.employer-dashboard-oncoming-vacation
-  padding: 0 0 10px 0
diff --git a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts b/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts
deleted file mode 100644
index 488faf2..0000000
--- a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material';
-import {AddVacationDialogComponent} from '../../add-vacation-dialog/add-vacation-dialog.component';
-import {UsersService} from '../../services/api/users.service';
-import {AuthorizationRequest, VacationRequest} from '../../models/requests.model';
-import {UserService} from '../../services/api/user.service';
-import {UserProfile} from '../../models/user.model';
-import {LocalizationService} from '../../localization/localization.service';
-import {RequestStatus, RequestTypes, UserType} from '../../enums/common.enum';
-import {Calendar} from '../../models/calendar.model';
-import {DateToolsService} from '../../services/util/date-tools.service';
-
-@Component({
-  selector: 'app-employer-dashboard',
-  templateUrl: './employer-dashboard.component.html',
-  styleUrls: ['./employer-dashboard.component.sass']
-})
-export class EmployerDashboardComponent implements OnInit {
-  @ViewChild('dayPicker') calendar;
-
-  private profile: UserProfile;
-  private authorizationRequests: AuthorizationRequest[];
-  private vacationRequests: VacationRequest[];
-  private oncomingVacation: Calendar[];
-
-  private selectedMonth: Date;
-
-  constructor(
-    public dialog: MatDialog,
-    private localizationService: LocalizationService,
-    private dateToolsService: DateToolsService,
-    private userService: UserService,
-    private usersService: UsersService
-  ) { }
-
-  ngOnInit() {
-    this.selectedMonth = this.dateToolsService.toStartOfMonth(new Date());
-
-    this.userService.getLoggedUserProfile()
-      .subscribe((data: UserProfile) => {
-        this.profile = data;
-        if (this.isEmployer()) {
-          this.loadAuthorizationRequests();
-          this.loadVacationRequests();
-        }
-      });
-
-    this.loadMonthVacation(this.selectedMonth);
-    this.loadOncomingVacation();
-  }
-
-  userApproved(requestId: number, approved: boolean) {
-    this.requestApproved(requestId, RequestTypes.AUTHORIZATION, approved)
-      .subscribe(() => this.loadAuthorizationRequests());
-  }
-
-  vacationApproved(requestId: number, approved: boolean) {
-    this.requestApproved(requestId, RequestTypes.VACATION, approved)
-      .subscribe(() => this.loadVacationRequests());
-  }
-
-  requestApproved(requestId: number, requestType: RequestTypes, approved: boolean) {
-    const request = {
-      id: requestId,
-      status: approved ? RequestStatus.ACCEPTED : RequestStatus.REJECTED
-    };
-
-    return this.userService.putUserRequestWithLanguage(request, requestType, this.localizationService.getCurrentLanguage());
-  }
-
-  removeVacation(vac: Calendar) {
-    this.userService.deleteCalendar(vac.id, this.localizationService.getCurrentLanguage())
-      .subscribe(() => {
-        this.loadOncomingVacation();
-        this.loadMonthVacation(this.selectedMonth);
-        this.loadProfile();
-      });
-  }
-
-  onDateSelect( date: Date ) {
-    this.dialog
-      .open(AddVacationDialogComponent, {
-        data: {
-          date
-        }
-      })
-      .afterClosed().subscribe(data => {
-        if (data && data.isConfirmed) {
-          this.userService.postCalendarWithLanguage(
-            {
-              date: data.date,
-              from: data.fromTime,
-              to: data.toTime,
-              type: data.vacationType
-            },
-            this.localizationService.getCurrentLanguage()
-          ).subscribe(() => {
-            this.loadMonthVacation(this.selectedMonth);
-            this.loadOncomingVacation();
-            this.loadProfile();
-          });
-        }
-      });
-  }
-
-  onSelectedMonthChange(monthStart: Date) {
-    this.selectedMonth = monthStart;
-    this.loadMonthVacation(monthStart);
-  }
-
-  isEmployer(): boolean {
-    if (this.profile) {
-      return this.profile.role === UserType.EMPLOYER;
-    } else {
-      return false;
-    }
-  }
-
-  private loadProfile() {
-    this.userService.getLoggedUserProfile()
-      .subscribe((data: UserProfile) => this.profile = data);
-  }
-
-  private loadAuthorizationRequests() {
-    this.usersService.getAuthorizationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
-      .subscribe((data: AuthorizationRequest[]) => this.authorizationRequests = data);
-  }
-
-  private loadVacationRequests() {
-    this.usersService.getVacationRequestsWithLanguage(this.localizationService.getCurrentLanguage(), RequestStatus.PENDING)
-      .subscribe((data: VacationRequest[]) => this.vacationRequests = data);
-  }
-
-  private loadMonthVacation(month: Date) {
-    const fromDate = this.dateToolsService.toStartOfMonth(month);
-    const toDate = this.dateToolsService.toEndOfMonth(fromDate);
-
-    this.userService.getLoggedUserCalendarWithOptions(fromDate, toDate, this.localizationService.getCurrentLanguage(), RequestStatus.ACCEPTED)
-      .subscribe((data: Calendar[]) => {
-        if (data) {
-          this.calendar.setVacation(data);
-        }
-      });
-  }
-
-  private loadOncomingVacation() {
-    const fromDate = new Date();
-
-    this.userService.getLoggedUserCalendarWithOptions(fromDate, null, this.localizationService.getCurrentLanguage(), null)
-      .subscribe((data: Calendar[]) => this.oncomingVacation = data);
-  }
-}
diff --git a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.module.ts b/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.module.ts
deleted file mode 100644
index cc9537f..0000000
--- a/webapp/src/app/dashboard/employer-dashboard/employer-dashboard.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EmployerDashboardComponent } from './employer-dashboard.component';
-import { DayPickerModule } from '../../day-picker/day-picker.module';
-import { VacationInfoModule } from '../../vacation-info/vacation-info.module';
-import { UserApprovalModule } from '../../user-approval/user-approval.module';
-import { VacationApprovalModule } from '../../vacation-approval/vacation-approval.module';
-import { OncomingVacationModule } from '../../oncoming-vacation/oncoming-vacation.module';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {AddVacationDialogModule} from '../../add-vacation-dialog/add-vacation-dialog.module';
-import {MatDialogModule} from '@angular/material';
-
-@NgModule({
-  declarations: [ EmployerDashboardComponent ],
-  exports:      [ EmployerDashboardComponent ],
-  imports: [
-    CommonModule,
-    DayPickerModule,
-    VacationInfoModule,
-    UserApprovalModule,
-    VacationApprovalModule,
-    DayPickerModule,
-    OncomingVacationModule,
-    BrowserAnimationsModule,
-    AddVacationDialogModule,
-    MatDialogModule
-  ]
-})
-export class EmployerDashboardModule { }
diff --git a/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.html b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.html
new file mode 100644
index 0000000..e54aa2c
--- /dev/null
+++ b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.html
@@ -0,0 +1,52 @@
+<div class="oncoming-days-off-container">
+
+  <div class="component-header">
+    {{'oncomingVacation.headline' | translate}}
+  </div>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+      <tr>
+        <th>{{'basic.vacationType' | translate}}</th>
+        <th>{{'basic.date' | translate}}</th>
+        <th>{{'basic.from' | translate}}</th>
+        <th>{{'basic.to' | translate}}</th>
+        <th>{{'oncomingVacation.status' | translate}}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let vac of oncomingVacation">
+        <td style="width:15%">
+          {{vac.type | translate}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.date}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.from}}
+        </td>
+
+        <td style="width:15%">
+          {{vac.to}}
+        </td>
+
+        <td style="width:15%" class="status {{vac.status}}">
+          {{vac.status | translate}}
+        </td>
+
+        <td class="buttons">
+<!--          <button mat-icon-button (click)="vacationEdit.emit(vac)">-->
+<!--            <i class="material-icons edit-btn">edit</i>-->
+<!--          </button>-->
+          <button mat-icon-button (click)="vacationRemove.emit(vac)">
+            <i class="material-icons remove-btn">delete</i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>
diff --git a/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.sass b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.sass
new file mode 100644
index 0000000..721a6bc
--- /dev/null
+++ b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.sass
@@ -0,0 +1,38 @@
+@import '../../../common-styles/basic-component'
+
+.oncoming-days-off-container
+  @extend .basic-component
+
+  table
+    margin-top: 10px
+
+    td
+      text-align: center
+      vertical-align: middle
+
+    .status
+      font-weight: bold
+
+    .ACCEPTED
+      color: green
+
+    .PENDING
+      color: orange
+
+    .REJECTED
+      color: red
+
+    .buttons
+      text-align: right
+      padding-right: 50px
+
+    button
+      outline: none
+
+    .edit-btn
+      font-size: 18px
+      margin-right: 2px
+      color: orange
+
+    .remove-btn
+      color: grey
diff --git a/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.ts b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.ts
new file mode 100644
index 0000000..c808df9
--- /dev/null
+++ b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.component.ts
@@ -0,0 +1,18 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Calendar} from '../../models/calendar.model';
+
+@Component({
+  selector: 'app-coming-days-off',
+  templateUrl: './oncoming-vacation.component.html',
+  styleUrls: ['./oncoming-vacation.component.sass']
+})
+export class OncomingVacationComponent implements OnInit {
+
+  @Input() oncomingVacation: Calendar[];
+
+  @Output() vacationRemove = new EventEmitter<Calendar>();
+
+  constructor() { }
+
+  ngOnInit() { }
+}
diff --git a/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.module.ts b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.module.ts
new file mode 100644
index 0000000..37bfad3
--- /dev/null
+++ b/webapp/src/app/dashboard/oncoming-vacation/oncoming-vacation.module.ts
@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {OncomingVacationComponent} from './oncoming-vacation.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [OncomingVacationComponent ],
+  exports: [OncomingVacationComponent ],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule],
+})
+export class OncomingVacationModule {}
diff --git a/webapp/src/app/dashboard/user-approval/user-approval.component.html b/webapp/src/app/dashboard/user-approval/user-approval.component.html
new file mode 100644
index 0000000..aff9c7f
--- /dev/null
+++ b/webapp/src/app/dashboard/user-approval/user-approval.component.html
@@ -0,0 +1,35 @@
+<div class="user-approval-container">
+
+  <div class="component-header">
+    {{'userApproval.headline' | translate}}
+  </div>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+    <tr>
+      <th style="width: 35%">{{'basic.name' | translate}}</th>
+      <th style="width: 35%">{{'userApproval.requestDate' | translate}}</th>
+      <th></th>
+    </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let request of authorizationRequests">
+        <td>
+          {{request.firstName}} {{request.lastName}}
+        </td>
+        <td>
+          {{request.timestamp | date:'yyyy/MM/dd'}}
+        </td>
+        <td class="buttons">
+          <button mat-icon-button (click)="userApproved(request.id, true)">
+            <i class="material-icons approve-btn">done</i>
+          </button>
+          <button mat-icon-button (click)="userApproved(request.id, false)">
+            <i class="material-icons reject-btn">delete</i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>
diff --git a/webapp/src/app/dashboard/user-approval/user-approval.component.sass b/webapp/src/app/dashboard/user-approval/user-approval.component.sass
new file mode 100644
index 0000000..6f6567b
--- /dev/null
+++ b/webapp/src/app/dashboard/user-approval/user-approval.component.sass
@@ -0,0 +1,25 @@
+@import '../../../common-styles/basic-component'
+
+.user-approval-container
+  @extend .basic-component
+
+  table
+    margin-top: 10px
+
+    td
+      text-align: center
+      vertical-align: middle
+
+    .buttons
+      text-align: right
+      padding-right: 50px
+
+    button
+      outline: none
+
+    .approve-btn
+      margin-right: 2px
+      color: green
+
+    .reject-btn
+      color: grey
diff --git a/webapp/src/app/dashboard/user-approval/user-approval.component.ts b/webapp/src/app/dashboard/user-approval/user-approval.component.ts
new file mode 100644
index 0000000..f4adbff
--- /dev/null
+++ b/webapp/src/app/dashboard/user-approval/user-approval.component.ts
@@ -0,0 +1,20 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {AuthorizationRequest} from '../../models/requests.model';
+import {LocalizationService} from '../../localization/localization.service';
+
+@Component({
+  selector: 'app-user-approval',
+  templateUrl: './user-approval.component.html',
+  styleUrls: ['./user-approval.component.sass']
+})
+export class UserApprovalComponent {
+
+  @Input() authorizationRequests: AuthorizationRequest[];
+  @Output() userApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
+
+  constructor(private localizationService: LocalizationService) { }
+
+  private userApproved(reqId: number, isApproved: boolean) {
+    this.userApprovalEvent.emit({requestId: reqId, approved: isApproved});
+  }
+}
diff --git a/webapp/src/app/dashboard/user-approval/user-approval.module.ts b/webapp/src/app/dashboard/user-approval/user-approval.module.ts
new file mode 100644
index 0000000..55044fe
--- /dev/null
+++ b/webapp/src/app/dashboard/user-approval/user-approval.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { UserApprovalComponent } from './user-approval.component';
+import { BrowserModule } from '@angular/platform-browser';
+import {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [ UserApprovalComponent ],
+  exports:      [ UserApprovalComponent ],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
+})
+export class UserApprovalModule { }
diff --git a/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.html b/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.html
new file mode 100644
index 0000000..4ee7130
--- /dev/null
+++ b/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.html
@@ -0,0 +1,50 @@
+<div class="days-off-approval-container">
+
+  <div class="component-header">
+    {{'vacationApproval.headline' | translate}}
+  </div>
+
+  <table class="table text-center table-hover">
+    <thead class="thead-light">
+      <tr>
+        <th scope="col"> {{'basic.name' | translate}}</th>
+        <th scope="col"> {{'vacationApproval.requestDate' | translate}}</th>
+        <th scope="col"> {{'basic.vacationType' | translate}} </th>
+        <th scope="col"> {{'basic.date' | translate}} </th>
+        <th scope="col"> {{'basic.from' | translate}} </th>
+        <th scope="col"> {{'basic.to' | translate}} </th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let request of vacationRequests">
+      <td>
+        {{request.firstName}} {{request.lastName}}
+      </td>
+      <td>
+        {{request.timestamp | date:'yyyy/MM/dd HH:mm'}}
+      </td>
+      <td>
+        {{request.type | translate}}
+      </td>
+      <td>
+        {{request.date | date:'yyyy/MM/dd'}}
+      </td>
+      <td>
+        {{request.from}}
+      </td>
+      <td>
+        {{request.to}}
+      </td>
+      <td class="buttons">
+        <button mat-icon-button (click)="vacationApprovalCompleted(request.id, true)">
+          <i class="material-icons approve-btn">done</i>
+        </button>
+        <button mat-icon-button (click)="vacationApprovalCompleted(request.id, false)">
+          <i class="material-icons reject-btn">delete</i>
+        </button>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.sass b/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.sass
new file mode 100644
index 0000000..f5d36ad
--- /dev/null
+++ b/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.sass
@@ -0,0 +1,26 @@
+@import '../../../common-styles/basic-component'
+
+.days-off-approval-container
+  @extend .basic-component
+
+  table
+    margin-top: 10px
+
+  td
+    text-align: center
+    vertical-align: middle
+
+  .buttons
+    text-align: right
+    padding-right: 50px
+
+  button
+    outline: none
+
+  .approve-btn
+    margin-right: 2px
+    color: green
+
+  .reject-btn
+    color: grey
+
diff --git a/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.ts b/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.ts
new file mode 100644
index 0000000..6e22919
--- /dev/null
+++ b/webapp/src/app/dashboard/vacation-approval/vacation-approval.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { VacationRequest } from '../../models/requests.model';
+
+@Component({
+  selector: 'app-days-off-approval',
+  templateUrl: './vacation-approval.component.html',
+  styleUrls: ['./vacation-approval.component.sass']
+})
+export class VacationApprovalComponent {
+
+  @Input() vacationRequests: VacationRequest[];
+  @Output() vacationApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
+
+  constructor() { }
+
+  vacationApprovalCompleted(reqId: number, isApproved: boolean ) {
+    this.vacationApprovalEvent.emit({requestId: reqId, approved: isApproved});
+  }
+}
diff --git a/webapp/src/app/dashboard/vacation-approval/vacation-approval.module.ts b/webapp/src/app/dashboard/vacation-approval/vacation-approval.module.ts
new file mode 100644
index 0000000..272b6ab
--- /dev/null
+++ b/webapp/src/app/dashboard/vacation-approval/vacation-approval.module.ts
@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {VacationApprovalComponent} from './vacation-approval.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {MatButtonModule} from '@angular/material';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [VacationApprovalComponent],
+  exports: [VacationApprovalComponent],
+  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
+})
+export class VacationApprovalModule {
+}
diff --git a/webapp/src/app/day-picker/day-picker.component.html b/webapp/src/app/day-picker/day-picker.component.html
deleted file mode 100644
index bf3a8cb..0000000
--- a/webapp/src/app/day-picker/day-picker.component.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="day-picker-container">
-  <div class="row text-center day-picker-month-selection">
-    <div class="col-4"></div>
-    <div class="col-1">
-      <button
-        mat-icon-button
-        mwlCalendarPreviousView
-        [view]="view"
-        [(viewDate)]="viewDate"
-        (click)="setMonth(currentMonth - 1)"
-      >
-        <i class="material-icons change-month">navigate_before</i>
-      </button>
-    </div>
-    <div class="col-2">
-      <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
-    </div>
-    <div class="col-1">
-      <button
-        mat-icon-button
-        mwlCalendarNextView
-        [view]="view"
-        [(viewDate)]="viewDate"
-        (click)="setMonth(currentMonth + 1)"
-      >
-        <i class="material-icons change-month">navigate_next</i>
-      </button>
-      <div class="col-4"></div>
-    </div>
-  </div>
-
-  <mwl-calendar-month-view
-    [viewDate]="viewDate"
-    [locale]="locale"
-    [refresh]="refresh"
-    [events]="events"
-    [cellTemplate]="customCellTemplate"
-    (dayClicked)="dayClicked($event.day)"
-    weekStartsOn="1"
-  >
-  </mwl-calendar-month-view>
-
-  <ng-template #customCellTemplate let-day="day" let-locale="locale">
-    <div class="cal-cell-top">
-      <span class="cal-day-number">
-        {{ day.date | calendarDate:'monthViewDayNumber':locale }}
-      </span>
-    </div>
-      <span class="vacation-type" *ngFor="let event of day.events">
-        <i class="material-icons sickday" *ngIf="event.title == vacationType.SICKDAY">local_hospital</i>
-        <i class="material-icons vacation" *ngIf="event.title == vacationType.VACATION">beach_access</i>
-
-        <span class="time-interval" *ngIf="event.title == vacationType.VACATION">
-          {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
-        </span>
-      </span>
-  </ng-template>
-</div>
diff --git a/webapp/src/app/day-picker/day-picker.component.sass b/webapp/src/app/day-picker/day-picker.component.sass
deleted file mode 100644
index 818a735..0000000
--- a/webapp/src/app/day-picker/day-picker.component.sass
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../common-styles/basic-component'
-
-.day-picker-container
-  @extend .basic-component
-
-#day-picker-date
-  font-weight: bold
-  text-transform: uppercase
-  line-height: 45px
-  text-align: center
-
-.day-picker-month-selection
-  margin-bottom: 10px
-  button
-    outline: none
-    border: 0
-  .change-month
-    color: blue
-
-.vacation-type
-  font-size: 10px
-  .material-icons
-    font-size: 14px
-  .sickday
-    color: red
-  .vacation
-    color: blue
-  .time-interval
-    font-size: 10px
diff --git a/webapp/src/app/day-picker/day-picker.component.ts b/webapp/src/app/day-picker/day-picker.component.ts
deleted file mode 100644
index 46bb15e..0000000
--- a/webapp/src/app/day-picker/day-picker.component.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
-import {CalendarEvent, CalendarView} from 'angular-calendar';
-import {LocalizationService} from '../localization/localization.service';
-import {VacationType} from '../enums/common.enum';
-import {Calendar} from '../models/calendar.model';
-import {DateToolsService} from '../services/util/date-tools.service';
-import {Subject} from 'rxjs';
-
-@Component({
-  selector: 'app-day-picker',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['day-picker.component.sass'],
-  templateUrl: 'day-picker.component.html'
-})
-export class DayPickerComponent {
-
-  private locale;
-
-  private vacationType = VacationType;
-
-  private currentMonth: number;
-
-  private currentYear: number;
-
-  // Type of calendar (constant)
-  view: CalendarView = CalendarView.Month;
-
-  // Selected date for this component's purpose
-  private viewDate: Date;
-
-  // Events which are shown in calendar (title = VacationType)
-  private events: CalendarEvent[] = [];
-
-  // EventEmitter informing about changes of selected date
-  @Output() selectedDate = new EventEmitter<Date>();
-
-  // EventEmitter informing about changes of selected month (emits start of the selected month)
-  @Output() selectedMonth = new EventEmitter<Date>();
-
-  private refresh: Subject<any> = new Subject();
-
-  constructor(
-    private localizationService: LocalizationService,
-    private dateToolsService: DateToolsService) {
-
-    this.locale = localizationService.getCurrentLocale();
-    localizationService.currentLocaleSubject
-      .subscribe((data) => {
-        this.locale = data;
-      });
-
-    this.viewDate = new Date();
-    this.currentMonth = this.viewDate.getMonth();
-    this.currentYear = this.viewDate.getFullYear();
-
-    // Calendar component needs to be refreshed on language switch or else language switch doesn't have an effect
-    this.localizationService.currentLocaleSubject.subscribe(e => this.refresh.next());
-  }
-
-  public setVacation(vacations: Calendar[]) {
-    this.events = [];
-
-    for (const vac of vacations) {
-      this.events.push({
-        start: this.dateToolsService.toDate(vac.date, vac.from),
-        end: this.dateToolsService.toDate(vac.date, vac.to),
-        title: vac.type
-      });
-    }
-
-    this.refresh.next();
-  }
-
-  /**
-   * Method that is invoked when user clicks on a day.
-   * Sets selected date and emits event informing about new selected date.
-   *
-   * @param date Selected date
-   */
-  private dayClicked({ date }: { date: Date }): void {
-    this.viewDate = date;
-    this.selectedDate.emit(date);
-  }
-
-  private setMonth(newMonth: number): void {
-    this.currentMonth = newMonth % 12;
-    if (newMonth < 0) {
-      this.currentMonth = 11;
-      this.currentYear--;
-    } else if (newMonth > 11) {
-      this.currentMonth = 0;
-      this.currentYear++;
-    } else {
-      this.currentMonth = newMonth;
-    }
-
-    this.selectedMonth.emit(new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0));
-  }
-}
diff --git a/webapp/src/app/day-picker/day-picker.module.ts b/webapp/src/app/day-picker/day-picker.module.ts
deleted file mode 100644
index 7f38eb1..0000000
--- a/webapp/src/app/day-picker/day-picker.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CalendarModule, DateAdapter } from 'angular-calendar';
-import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
-import { DayPickerComponent } from './day-picker.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {MatButtonModule} from '@angular/material';
-
-@NgModule({
-  declarations: [ DayPickerComponent ],
-  exports:      [ DayPickerComponent ],
-  imports:      [
-                  CalendarModule.forRoot({
-                    provide: DateAdapter,
-                    useFactory: adapterFactory
-                  }),
-                  BrowserAnimationsModule,
-                  MatButtonModule
-                ],
-})
-export class DayPickerModule {}
diff --git a/webapp/src/app/employees/employees.module.ts b/webapp/src/app/employees/employees.module.ts
index c53b375..4e07683 100644
--- a/webapp/src/app/employees/employees.module.ts
+++ b/webapp/src/app/employees/employees.module.ts
@@ -19,8 +19,8 @@ import {DefaultSettingsDialogComponent} from './default-settings-dialog/default-
 import {NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';
 import {SharedModule} from '../shared/shared.module';
 import { UserProfileDialogComponent } from './user-profile/user-profile-dialog.component';
-import {DayPickerModule} from '../day-picker/day-picker.module';
-import {VacationInfoModule} from '../vacation-info/vacation-info.module';
+import {DayPickerModule} from '../shared/day-picker/day-picker.module';
+import {VacationInfoModule} from '../shared/vacation-info/vacation-info.module';
 
 @NgModule({
   declarations: [
diff --git a/webapp/src/app/oncoming-vacation/oncoming-vacation.component.html b/webapp/src/app/oncoming-vacation/oncoming-vacation.component.html
deleted file mode 100644
index e54aa2c..0000000
--- a/webapp/src/app/oncoming-vacation/oncoming-vacation.component.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<div class="oncoming-days-off-container">
-
-  <div class="component-header">
-    {{'oncomingVacation.headline' | translate}}
-  </div>
-
-  <table class="table text-center table-hover">
-    <thead class="thead-light">
-      <tr>
-        <th>{{'basic.vacationType' | translate}}</th>
-        <th>{{'basic.date' | translate}}</th>
-        <th>{{'basic.from' | translate}}</th>
-        <th>{{'basic.to' | translate}}</th>
-        <th>{{'oncomingVacation.status' | translate}}</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let vac of oncomingVacation">
-        <td style="width:15%">
-          {{vac.type | translate}}
-        </td>
-
-        <td style="width:15%">
-          {{vac.date}}
-        </td>
-
-        <td style="width:15%">
-          {{vac.from}}
-        </td>
-
-        <td style="width:15%">
-          {{vac.to}}
-        </td>
-
-        <td style="width:15%" class="status {{vac.status}}">
-          {{vac.status | translate}}
-        </td>
-
-        <td class="buttons">
-<!--          <button mat-icon-button (click)="vacationEdit.emit(vac)">-->
-<!--            <i class="material-icons edit-btn">edit</i>-->
-<!--          </button>-->
-          <button mat-icon-button (click)="vacationRemove.emit(vac)">
-            <i class="material-icons remove-btn">delete</i>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-</div>
diff --git a/webapp/src/app/oncoming-vacation/oncoming-vacation.component.sass b/webapp/src/app/oncoming-vacation/oncoming-vacation.component.sass
deleted file mode 100644
index 70082c1..0000000
--- a/webapp/src/app/oncoming-vacation/oncoming-vacation.component.sass
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../../common-styles/basic-component'
-
-.oncoming-days-off-container
-  @extend .basic-component
-
-  table
-    margin-top: 10px
-
-    td
-      text-align: center
-      vertical-align: middle
-
-    .status
-      font-weight: bold
-
-    .ACCEPTED
-      color: green
-
-    .PENDING
-      color: orange
-
-    .REJECTED
-      color: red
-
-    .buttons
-      text-align: right
-      padding-right: 50px
-
-    button
-      outline: none
-
-    .edit-btn
-      font-size: 18px
-      margin-right: 2px
-      color: orange
-
-    .remove-btn
-      color: grey
diff --git a/webapp/src/app/oncoming-vacation/oncoming-vacation.component.ts b/webapp/src/app/oncoming-vacation/oncoming-vacation.component.ts
deleted file mode 100644
index 389be8c..0000000
--- a/webapp/src/app/oncoming-vacation/oncoming-vacation.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Calendar} from '../models/calendar.model';
-
-@Component({
-  selector: 'app-coming-days-off',
-  templateUrl: './oncoming-vacation.component.html',
-  styleUrls: ['./oncoming-vacation.component.sass']
-})
-export class OncomingVacationComponent implements OnInit {
-
-  @Input() oncomingVacation: Calendar[];
-
-  @Output() vacationRemove = new EventEmitter<Calendar>();
-
-  constructor() { }
-
-  ngOnInit() { }
-}
diff --git a/webapp/src/app/oncoming-vacation/oncoming-vacation.module.ts b/webapp/src/app/oncoming-vacation/oncoming-vacation.module.ts
deleted file mode 100644
index 37bfad3..0000000
--- a/webapp/src/app/oncoming-vacation/oncoming-vacation.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {OncomingVacationComponent} from './oncoming-vacation.component';
-import {BrowserModule} from '@angular/platform-browser';
-import {MatButtonModule} from '@angular/material';
-import {TranslateModule} from '@ngx-translate/core';
-import {CommonModule} from '@angular/common';
-
-@NgModule({
-  declarations: [OncomingVacationComponent ],
-  exports: [OncomingVacationComponent ],
-  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule],
-})
-export class OncomingVacationModule {}
diff --git a/webapp/src/app/shared/day-picker/day-picker.component.html b/webapp/src/app/shared/day-picker/day-picker.component.html
new file mode 100644
index 0000000..bf3a8cb
--- /dev/null
+++ b/webapp/src/app/shared/day-picker/day-picker.component.html
@@ -0,0 +1,58 @@
+<div class="day-picker-container">
+  <div class="row text-center day-picker-month-selection">
+    <div class="col-4"></div>
+    <div class="col-1">
+      <button
+        mat-icon-button
+        mwlCalendarPreviousView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (click)="setMonth(currentMonth - 1)"
+      >
+        <i class="material-icons change-month">navigate_before</i>
+      </button>
+    </div>
+    <div class="col-2">
+      <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
+    </div>
+    <div class="col-1">
+      <button
+        mat-icon-button
+        mwlCalendarNextView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (click)="setMonth(currentMonth + 1)"
+      >
+        <i class="material-icons change-month">navigate_next</i>
+      </button>
+      <div class="col-4"></div>
+    </div>
+  </div>
+
+  <mwl-calendar-month-view
+    [viewDate]="viewDate"
+    [locale]="locale"
+    [refresh]="refresh"
+    [events]="events"
+    [cellTemplate]="customCellTemplate"
+    (dayClicked)="dayClicked($event.day)"
+    weekStartsOn="1"
+  >
+  </mwl-calendar-month-view>
+
+  <ng-template #customCellTemplate let-day="day" let-locale="locale">
+    <div class="cal-cell-top">
+      <span class="cal-day-number">
+        {{ day.date | calendarDate:'monthViewDayNumber':locale }}
+      </span>
+    </div>
+      <span class="vacation-type" *ngFor="let event of day.events">
+        <i class="material-icons sickday" *ngIf="event.title == vacationType.SICKDAY">local_hospital</i>
+        <i class="material-icons vacation" *ngIf="event.title == vacationType.VACATION">beach_access</i>
+
+        <span class="time-interval" *ngIf="event.title == vacationType.VACATION">
+          {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
+        </span>
+      </span>
+  </ng-template>
+</div>
diff --git a/webapp/src/app/shared/day-picker/day-picker.component.sass b/webapp/src/app/shared/day-picker/day-picker.component.sass
new file mode 100644
index 0000000..153ba47
--- /dev/null
+++ b/webapp/src/app/shared/day-picker/day-picker.component.sass
@@ -0,0 +1,29 @@
+@import '../../../common-styles/basic-component'
+
+.day-picker-container
+  @extend .basic-component
+
+#day-picker-date
+  font-weight: bold
+  text-transform: uppercase
+  line-height: 45px
+  text-align: center
+
+.day-picker-month-selection
+  margin-bottom: 10px
+  button
+    outline: none
+    border: 0
+  .change-month
+    color: blue
+
+.vacation-type
+  font-size: 10px
+  .material-icons
+    font-size: 14px
+  .sickday
+    color: red
+  .vacation
+    color: blue
+  .time-interval
+    font-size: 10px
diff --git a/webapp/src/app/shared/day-picker/day-picker.component.ts b/webapp/src/app/shared/day-picker/day-picker.component.ts
new file mode 100644
index 0000000..20f9dd6
--- /dev/null
+++ b/webapp/src/app/shared/day-picker/day-picker.component.ts
@@ -0,0 +1,99 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
+import {CalendarEvent, CalendarView} from 'angular-calendar';
+import {LocalizationService} from '../../localization/localization.service';
+import {VacationType} from '../../enums/common.enum';
+import {Calendar} from '../../models/calendar.model';
+import {DateToolsService} from '../../services/util/date-tools.service';
+import {Subject} from 'rxjs';
+
+@Component({
+  selector: 'app-day-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['day-picker.component.sass'],
+  templateUrl: 'day-picker.component.html'
+})
+export class DayPickerComponent {
+
+  private locale;
+
+  private vacationType = VacationType;
+
+  private currentMonth: number;
+
+  private currentYear: number;
+
+  // Type of calendar (constant)
+  view: CalendarView = CalendarView.Month;
+
+  // Selected date for this component's purpose
+  private viewDate: Date;
+
+  // Events which are shown in calendar (title = VacationType)
+  private events: CalendarEvent[] = [];
+
+  // EventEmitter informing about changes of selected date
+  @Output() selectedDate = new EventEmitter<Date>();
+
+  // EventEmitter informing about changes of selected month (emits start of the selected month)
+  @Output() selectedMonth = new EventEmitter<Date>();
+
+  private refresh: Subject<any> = new Subject();
+
+  constructor(
+    private localizationService: LocalizationService,
+    private dateToolsService: DateToolsService) {
+
+    this.locale = localizationService.getCurrentLocale();
+    localizationService.currentLocaleSubject
+      .subscribe((data) => {
+        this.locale = data;
+      });
+
+    this.viewDate = new Date();
+    this.currentMonth = this.viewDate.getMonth();
+    this.currentYear = this.viewDate.getFullYear();
+
+    // Calendar component needs to be refreshed on language switch or else language switch doesn't have an effect
+    this.localizationService.currentLocaleSubject.subscribe(e => this.refresh.next());
+  }
+
+  public setVacation(vacations: Calendar[]) {
+    this.events = [];
+
+    for (const vac of vacations) {
+      this.events.push({
+        start: this.dateToolsService.toDate(vac.date, vac.from),
+        end: this.dateToolsService.toDate(vac.date, vac.to),
+        title: vac.type
+      });
+    }
+
+    this.refresh.next();
+  }
+
+  /**
+   * Method that is invoked when user clicks on a day.
+   * Sets selected date and emits event informing about new selected date.
+   *
+   * @param date Selected date
+   */
+  private dayClicked({ date }: { date: Date }): void {
+    this.viewDate = date;
+    this.selectedDate.emit(date);
+  }
+
+  private setMonth(newMonth: number): void {
+    this.currentMonth = newMonth % 12;
+    if (newMonth < 0) {
+      this.currentMonth = 11;
+      this.currentYear--;
+    } else if (newMonth > 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    } else {
+      this.currentMonth = newMonth;
+    }
+
+    this.selectedMonth.emit(new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0));
+  }
+}
diff --git a/webapp/src/app/shared/day-picker/day-picker.module.ts b/webapp/src/app/shared/day-picker/day-picker.module.ts
new file mode 100644
index 0000000..7f38eb1
--- /dev/null
+++ b/webapp/src/app/shared/day-picker/day-picker.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { DayPickerComponent } from './day-picker.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatButtonModule} from '@angular/material';
+
+@NgModule({
+  declarations: [ DayPickerComponent ],
+  exports:      [ DayPickerComponent ],
+  imports:      [
+                  CalendarModule.forRoot({
+                    provide: DateAdapter,
+                    useFactory: adapterFactory
+                  }),
+                  BrowserAnimationsModule,
+                  MatButtonModule
+                ],
+})
+export class DayPickerModule {}
diff --git a/webapp/src/app/shared/vacation-info/vacation-info.component.html b/webapp/src/app/shared/vacation-info/vacation-info.component.html
new file mode 100644
index 0000000..15389dc
--- /dev/null
+++ b/webapp/src/app/shared/vacation-info/vacation-info.component.html
@@ -0,0 +1,19 @@
+<div class="vacation-info-container">
+
+  <div class="component-header">
+    <span translate>{{ 'vacationInfo.header' | translate }}</span>
+  </div>
+
+  <div class="vacation-type-container">
+    <span class="vacation-remaining">{{extraVacationRemaining}}</span>
+    <span class="units"> {{ 'vacationInfo.hours' | translate }}</span>
+    <span class="vacation-type" translate>vacationType.vacation</span>
+  </div>
+
+  <div class="vacation-type-container">
+    <span class="vacation-remaining">{{sickDaysRemaining}}</span>
+    <span class="units"> {{ 'vacationInfo.days' | translate }}</span>
+    <span class="vacation-type" translate>vacationType.sickday</span>
+  </div>
+
+</div>
diff --git a/webapp/src/app/shared/vacation-info/vacation-info.component.sass b/webapp/src/app/shared/vacation-info/vacation-info.component.sass
new file mode 100644
index 0000000..17816a2
--- /dev/null
+++ b/webapp/src/app/shared/vacation-info/vacation-info.component.sass
@@ -0,0 +1,23 @@
+@import '../../../common-styles/basic-component'
+
+.vacation-info-container
+  @extend .basic-component
+
+.vacation-type-container
+  border-bottom: 1px solid gainsboro
+  padding-left: 20px
+
+.vacation-remaining
+  color: green
+  font-size: 30px
+  font-weight: bold
+
+.vacation-type
+  color: black
+  font-weight: bold
+  display: block
+
+.units
+  color: grey
+  font-size: 10px
+  font-style: italic
diff --git a/webapp/src/app/shared/vacation-info/vacation-info.component.ts b/webapp/src/app/shared/vacation-info/vacation-info.component.ts
new file mode 100644
index 0000000..039e79e
--- /dev/null
+++ b/webapp/src/app/shared/vacation-info/vacation-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import {LocalizationService} from '../../localization/localization.service';
+
+@Component({
+  selector: 'app-vacation-info',
+  templateUrl: './vacation-info.component.html',
+  styleUrls: ['./vacation-info.component.sass']
+})
+export class VacationInfoComponent {
+
+  @Input() sickDaysRemaining: number;
+  @Input() extraVacationRemaining: number;
+
+  constructor(private localizationService: LocalizationService) { }
+}
diff --git a/webapp/src/app/shared/vacation-info/vacation-info.module.ts b/webapp/src/app/shared/vacation-info/vacation-info.module.ts
new file mode 100644
index 0000000..f59a991
--- /dev/null
+++ b/webapp/src/app/shared/vacation-info/vacation-info.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { VacationInfoComponent } from './vacation-info.component';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [TranslateModule],
+  declarations: [ VacationInfoComponent ],
+  exports:      [ VacationInfoComponent ]
+})
+export class VacationInfoModule { }
diff --git a/webapp/src/app/user-approval/user-approval.component.html b/webapp/src/app/user-approval/user-approval.component.html
deleted file mode 100644
index aff9c7f..0000000
--- a/webapp/src/app/user-approval/user-approval.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<div class="user-approval-container">
-
-  <div class="component-header">
-    {{'userApproval.headline' | translate}}
-  </div>
-
-  <table class="table text-center table-hover">
-    <thead class="thead-light">
-    <tr>
-      <th style="width: 35%">{{'basic.name' | translate}}</th>
-      <th style="width: 35%">{{'userApproval.requestDate' | translate}}</th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let request of authorizationRequests">
-        <td>
-          {{request.firstName}} {{request.lastName}}
-        </td>
-        <td>
-          {{request.timestamp | date:'yyyy/MM/dd'}}
-        </td>
-        <td class="buttons">
-          <button mat-icon-button (click)="userApproved(request.id, true)">
-            <i class="material-icons approve-btn">done</i>
-          </button>
-          <button mat-icon-button (click)="userApproved(request.id, false)">
-            <i class="material-icons reject-btn">delete</i>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-</div>
diff --git a/webapp/src/app/user-approval/user-approval.component.sass b/webapp/src/app/user-approval/user-approval.component.sass
deleted file mode 100644
index ea24e80..0000000
--- a/webapp/src/app/user-approval/user-approval.component.sass
+++ /dev/null
@@ -1,25 +0,0 @@
-@import '../../common-styles/basic-component'
-
-.user-approval-container
-  @extend .basic-component
-
-  table
-    margin-top: 10px
-
-    td
-      text-align: center
-      vertical-align: middle
-
-    .buttons
-      text-align: right
-      padding-right: 50px
-
-    button
-      outline: none
-
-    .approve-btn
-      margin-right: 2px
-      color: green
-
-    .reject-btn
-      color: grey
diff --git a/webapp/src/app/user-approval/user-approval.component.ts b/webapp/src/app/user-approval/user-approval.component.ts
deleted file mode 100644
index 83d130d..0000000
--- a/webapp/src/app/user-approval/user-approval.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {AuthorizationRequest} from '../models/requests.model';
-import {LocalizationService} from '../localization/localization.service';
-
-@Component({
-  selector: 'app-user-approval',
-  templateUrl: './user-approval.component.html',
-  styleUrls: ['./user-approval.component.sass']
-})
-export class UserApprovalComponent {
-
-  @Input() authorizationRequests: AuthorizationRequest[];
-  @Output() userApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
-
-  constructor(private localizationService: LocalizationService) { }
-
-  private userApproved(reqId: number, isApproved: boolean) {
-    this.userApprovalEvent.emit({requestId: reqId, approved: isApproved});
-  }
-}
diff --git a/webapp/src/app/user-approval/user-approval.module.ts b/webapp/src/app/user-approval/user-approval.module.ts
deleted file mode 100644
index 55044fe..0000000
--- a/webapp/src/app/user-approval/user-approval.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { UserApprovalComponent } from './user-approval.component';
-import { BrowserModule } from '@angular/platform-browser';
-import {MatButtonModule} from '@angular/material';
-import {TranslateModule} from '@ngx-translate/core';
-import {CommonModule} from '@angular/common';
-
-@NgModule({
-  declarations: [ UserApprovalComponent ],
-  exports:      [ UserApprovalComponent ],
-  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
-})
-export class UserApprovalModule { }
diff --git a/webapp/src/app/vacation-approval/vacation-approval.component.html b/webapp/src/app/vacation-approval/vacation-approval.component.html
deleted file mode 100644
index 4ee7130..0000000
--- a/webapp/src/app/vacation-approval/vacation-approval.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div class="days-off-approval-container">
-
-  <div class="component-header">
-    {{'vacationApproval.headline' | translate}}
-  </div>
-
-  <table class="table text-center table-hover">
-    <thead class="thead-light">
-      <tr>
-        <th scope="col"> {{'basic.name' | translate}}</th>
-        <th scope="col"> {{'vacationApproval.requestDate' | translate}}</th>
-        <th scope="col"> {{'basic.vacationType' | translate}} </th>
-        <th scope="col"> {{'basic.date' | translate}} </th>
-        <th scope="col"> {{'basic.from' | translate}} </th>
-        <th scope="col"> {{'basic.to' | translate}} </th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-    <tr *ngFor="let request of vacationRequests">
-      <td>
-        {{request.firstName}} {{request.lastName}}
-      </td>
-      <td>
-        {{request.timestamp | date:'yyyy/MM/dd HH:mm'}}
-      </td>
-      <td>
-        {{request.type | translate}}
-      </td>
-      <td>
-        {{request.date | date:'yyyy/MM/dd'}}
-      </td>
-      <td>
-        {{request.from}}
-      </td>
-      <td>
-        {{request.to}}
-      </td>
-      <td class="buttons">
-        <button mat-icon-button (click)="vacationApprovalCompleted(request.id, true)">
-          <i class="material-icons approve-btn">done</i>
-        </button>
-        <button mat-icon-button (click)="vacationApprovalCompleted(request.id, false)">
-          <i class="material-icons reject-btn">delete</i>
-        </button>
-      </td>
-    </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/webapp/src/app/vacation-approval/vacation-approval.component.sass b/webapp/src/app/vacation-approval/vacation-approval.component.sass
deleted file mode 100644
index 6d06e7a..0000000
--- a/webapp/src/app/vacation-approval/vacation-approval.component.sass
+++ /dev/null
@@ -1,26 +0,0 @@
-@import '../../common-styles/basic-component'
-
-.days-off-approval-container
-  @extend .basic-component
-
-  table
-    margin-top: 10px
-
-  td
-    text-align: center
-    vertical-align: middle
-
-  .buttons
-    text-align: right
-    padding-right: 50px
-
-  button
-    outline: none
-
-  .approve-btn
-    margin-right: 2px
-    color: green
-
-  .reject-btn
-    color: grey
-
diff --git a/webapp/src/app/vacation-approval/vacation-approval.component.ts b/webapp/src/app/vacation-approval/vacation-approval.component.ts
deleted file mode 100644
index 34f021b..0000000
--- a/webapp/src/app/vacation-approval/vacation-approval.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, EventEmitter, Output, Input } from '@angular/core';
-import { VacationRequest } from '../models/requests.model';
-
-@Component({
-  selector: 'app-days-off-approval',
-  templateUrl: './vacation-approval.component.html',
-  styleUrls: ['./vacation-approval.component.sass']
-})
-export class VacationApprovalComponent {
-
-  @Input() vacationRequests: VacationRequest[];
-  @Output() vacationApprovalEvent = new EventEmitter<{requestId: number, approved: boolean}>();
-
-  constructor() { }
-
-  vacationApprovalCompleted(reqId: number, isApproved: boolean ) {
-    this.vacationApprovalEvent.emit({requestId: reqId, approved: isApproved});
-  }
-}
diff --git a/webapp/src/app/vacation-approval/vacation-approval.module.ts b/webapp/src/app/vacation-approval/vacation-approval.module.ts
deleted file mode 100644
index 272b6ab..0000000
--- a/webapp/src/app/vacation-approval/vacation-approval.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {NgModule} from '@angular/core';
-import {VacationApprovalComponent} from './vacation-approval.component';
-import {BrowserModule} from '@angular/platform-browser';
-import {MatButtonModule} from '@angular/material';
-import {TranslateModule} from '@ngx-translate/core';
-import {CommonModule} from '@angular/common';
-
-@NgModule({
-  declarations: [VacationApprovalComponent],
-  exports: [VacationApprovalComponent],
-  imports: [BrowserModule, MatButtonModule, TranslateModule, CommonModule]
-})
-export class VacationApprovalModule {
-}
diff --git a/webapp/src/app/vacation-info/vacation-info.component.html b/webapp/src/app/vacation-info/vacation-info.component.html
deleted file mode 100644
index 15389dc..0000000
--- a/webapp/src/app/vacation-info/vacation-info.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="vacation-info-container">
-
-  <div class="component-header">
-    <span translate>{{ 'vacationInfo.header' | translate }}</span>
-  </div>
-
-  <div class="vacation-type-container">
-    <span class="vacation-remaining">{{extraVacationRemaining}}</span>
-    <span class="units"> {{ 'vacationInfo.hours' | translate }}</span>
-    <span class="vacation-type" translate>vacationType.vacation</span>
-  </div>
-
-  <div class="vacation-type-container">
-    <span class="vacation-remaining">{{sickDaysRemaining}}</span>
-    <span class="units"> {{ 'vacationInfo.days' | translate }}</span>
-    <span class="vacation-type" translate>vacationType.sickday</span>
-  </div>
-
-</div>
diff --git a/webapp/src/app/vacation-info/vacation-info.component.sass b/webapp/src/app/vacation-info/vacation-info.component.sass
deleted file mode 100644
index 55fefdf..0000000
--- a/webapp/src/app/vacation-info/vacation-info.component.sass
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '../../common-styles/basic-component'
-
-.vacation-info-container
-  @extend .basic-component
-
-.vacation-type-container
-  border-bottom: 1px solid gainsboro
-  padding-left: 20px
-
-.vacation-remaining
-  color: green
-  font-size: 30px
-  font-weight: bold
-
-.vacation-type
-  color: black
-  font-weight: bold
-  display: block
-
-.units
-  color: grey
-  font-size: 10px
-  font-style: italic
diff --git a/webapp/src/app/vacation-info/vacation-info.component.ts b/webapp/src/app/vacation-info/vacation-info.component.ts
deleted file mode 100644
index 831b4f5..0000000
--- a/webapp/src/app/vacation-info/vacation-info.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, Input } from '@angular/core';
-import {LocalizationService} from '../localization/localization.service';
-
-@Component({
-  selector: 'app-vacation-info',
-  templateUrl: './vacation-info.component.html',
-  styleUrls: ['./vacation-info.component.sass']
-})
-export class VacationInfoComponent {
-
-  @Input() sickDaysRemaining: number;
-  @Input() extraVacationRemaining: number;
-
-  constructor(private localizationService: LocalizationService) { }
-}
diff --git a/webapp/src/app/vacation-info/vacation-info.module.ts b/webapp/src/app/vacation-info/vacation-info.module.ts
deleted file mode 100644
index f59a991..0000000
--- a/webapp/src/app/vacation-info/vacation-info.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { VacationInfoComponent } from './vacation-info.component';
-import {TranslateModule} from '@ngx-translate/core';
-
-@NgModule({
-  imports: [TranslateModule],
-  declarations: [ VacationInfoComponent ],
-  exports:      [ VacationInfoComponent ]
-})
-export class VacationInfoModule { }
