-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/components/customer-details/customer-details.component.html

@@ -10,6 +10,13 @@
     [style.color]="'var(--tui-background-accent-1)'"/>
   {{ customer.email }}
 </h2>
+<h2>
+  <tui-icon
+    icon="@tui.phone"
+    [style.color]="'var(--tui-background-accent-1)'"/>
+  <span *ngIf="customer.phone"> {{ customer.phone }}</span>
+  <span *ngIf="!customer.phone"> -</span>
+</h2>
 <ng-template *ngIf="appointment">
   <br>
   <h2>

src/app/components/new-customer/new-customer.component.html

@@ -36,6 +36,19 @@
       formControlName="email"/>
   </tui-input>
   <br>
+  <tui-input
+    formControlName="phone"
+    tuiTextfieldSize="m"
+    id="telefoon-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Telefoonnummer
+    <input
+      tuiTextfieldLegacy
+      autocomplete=""
+      type="tel"
+      formControlName="phone"/>
+  </tui-input>
+  <br>
   <button
     appearance="secondary"
     size="m"

src/app/components/new-customer/new-customer.component.ts

@@ -32,6 +32,7 @@ export class NewCustomerComponent {
       firstName: new FormControl('', [Validators.required]),
       lastName: new FormControl('', [Validators.required]),
       email: new FormControl('', [Validators.required, Validators.pattern(this.emailRegex)]),
+      phone: new FormControl('', [Validators.required]),
     })
   }
 
@@ -39,7 +40,8 @@ export class NewCustomerComponent {
     const firstName = this.customerForm.get('firstName').value
     const lastName = this.customerForm.get('lastName').value
     const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
+    const phone = this.customerForm.get('phone').value
+    const customer = new Customer(firstName, lastName, email, phone);
 
     this.customerService.addCustomer(customer).subscribe(() => {
       this.customerAdded.emit(customer);

src/app/components/new-item/new-item.component.html

@@ -33,6 +33,7 @@
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
+        id="klant-input"
         *tuiDataList
         [itemContent]="stringify | tuiStringifyContent"
         [items]="items | tuiFilterByInput"
@@ -90,7 +91,7 @@
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title + '-' + appointment.customer">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDate + '-' + appointment.startHour + appointment.startMinute">
         <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
         <span class="name" id="titel-naam">
         <tui-icon
@@ -110,7 +111,7 @@
     </div>
   </ng-container>
   <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notities">Notities</tui-textarea>
 </form>
 <br>
 <button

src/app/components/new-item/new-item.component.ts

@@ -11,7 +11,7 @@ import {
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
 import {Appointment} from '../../models/appointment';
-import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
+import {TuiDay, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
 import {Customer} from '../../models/customer';
@@ -70,25 +70,13 @@ export class NewItemComponent implements OnInit {
       lastName: new FormControl('', Validators.required),
       email: new FormControl('', [Validators.required, Validators.email]),
     })
-    this.appointmentForm.get('startTime').setValue(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required)
-    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    this.appointmentForm.get('startTime').setValue('', Validators.required)
+    this.appointmentForm.get('endTime').setValue('', [Validators.required, timeAfterStartValidator('startTime')])
     this.appointments.sort((a, b) => {
       return a.startHour - b.startHour || a.startMinute - b.startMinute;
     });
   }
 
-  getEndTime(): Date {
-    const endTime = new Date(this.today); // Kopieer startTime
-    endTime.setMinutes(endTime.getMinutes() + 30); // 30 minuten toevoegen
-
-    // Controleer of de dag nog steeds hetzelfde is
-    if (endTime.getDate() !== this.today.getDate()) {
-      endTime.setHours(23, 59, 59, 999); // Zet naar 23:59:59 als het overloopt
-    }
-
-    return endTime;
-  }
-
   registerAppointment() {
     const title = this.appointmentForm.get('title').value
     const description = this.appointmentForm.get('notes').value