-een gebruiker kan meerdere bedrijven hebben

-manier van afspraken maken veranderd in de backend ivm meerdere bedrijven gebruiker
 -email is aangepast op bedrijf en gebruiker
 -dropdown voor instellingen toegevoegd

src/app/pages/agenda/agenda.component.ts

@@ -11,20 +11,21 @@ import {
   TuiTextareaModule,
   TuiTextfieldControllerModule
 } from '@taiga-ui/legacy';
-import {TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {TuiDay, TuiMonth, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {DetailsComponent} from '../../components/details/details.component';
 import {DateFormatter} from '../../utils/date-formatter';
 import {WeekDay} from '../../models/week-day';
 import {NewItemComponent} from '../../components/new-item/new-item.component';
 import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
+import {TuiChevron} from '@taiga-ui/kit';
 
 @Component({
   selector: 'app-agenda',
   imports: [NgFor,
     TuiButton, CommonModule, NgIf, ModalComponent, ReactiveFormsModule,
     TuiInputTimeModule, TuiTextfieldControllerModule,
-    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, TuiCalendar, NewItemComponent],
+    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, TuiCalendar, NewItemComponent, TuiChevron],
   templateUrl: './agenda.component.html',
   providers: [tuiDateFormatProvider({separator: '-'}), AppointmentService],
   styleUrl: './agenda.component.scss'
@@ -40,13 +41,14 @@ export class AgendaComponent implements OnInit {
 
   timeSlots: number[] = Array.from({length: 24}, (_, i) => i); // 24 uren
   appointments: Appointment[] = [];
-  isModalOpen = false
+  showNewItem = false
   today = new Date()
   selectedDate = new Date()
   waiting: boolean = false;
   selectedAppointment: Appointment;
   protected value: TuiDay | null = null;
   showCalendar: boolean = false;
+  open = false
 
   private readonly alerts = inject(TuiAlertService);
   protected appointmentForm = new FormGroup({
@@ -60,7 +62,7 @@ export class AgendaComponent implements OnInit {
   registerAppointment(title: string): void {
     this.getAppointmentsByDate(this.selectedDate);
     this.waiting = false
-    this.isModalOpen = false
+    this.showNewItem = false
     this.showNotification(title)
     this.resetForms()
   }
@@ -187,7 +189,7 @@ export class AgendaComponent implements OnInit {
   }
 
   closeNewItemModal() {
-    this.isModalOpen = false
+    this.showNewItem = false
     this.resetForms()
   }
 
@@ -202,5 +204,35 @@ export class AgendaComponent implements OnInit {
   appointmentIsEdited($event: Appointment) {
     this.getAppointmentsByDate(this.selectedDate);
   }
+
+  protected firstMonth = TuiMonth.currentLocal().append({month: -1});
+
+  protected middleMonth = TuiMonth.currentLocal();
+
+  protected lastMonth = TuiMonth.currentLocal().append({month: 2});
+
+  protected hoveredItem: TuiDay | null = null;
+
+  protected onMonthChangeFirst(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -1});
+    this.middleMonth = month
+    this.lastMonth = month.append({month: 2});
+  }
+
+  protected onMonthChangeMiddle(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -1});
+    this.middleMonth = month;
+    this.lastMonth = month.append({month: 1});
+  }
+
+  protected onMonthChangeLast(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -2});
+    this.middleMonth = month.append({month: -1});
+    this.lastMonth = month;
+  }
+
+  openSettings() {
+    this.open = !this.open
+  }
 }