Refactoring betreft date object

Missing id's + verdere uitwerking afspraken naast elkaar
Work in progress betreft het tonen van afspraken naast elkaar
2025-05-25 18:05:19 +02:00 · 2025-04-21 15:41:32 +02:00 · 2025-04-20 15:23:59 +02:00 · 2025-04-19 14:53:16 +02:00 · 2025-04-19 13:02:32 +02:00 · 2025-04-18 23:30:16 +02:00
64 changed files with 2194 additions and 458 deletions
--- a/.github/workflows/deploy-docker-to-tst.yml
+++ b/.github/workflows/deploy-docker-to-tst.yml
@@ -24,6 +24,20 @@ jobs:
        with:
          name: version
          path: version.txt
+      - name: Notify Mattermost via Bot
+        env:
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all 🚀 *Build gestart!* Een nieuwe build is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+

      # Stap 3: Inloggen bij Docker Hub
      - name: Log in to Docker Hub
@@ -72,14 +86,52 @@ jobs:
            echo "Gekozen versie: $VERSION-SNAPSHOT"

            # Stop en verwijder de huidige container
-            docker stop paypoint || true
-            docker rm paypoint || true
+            docker stop paypoint-frontend || true
+            docker rm paypoint-frontend || true

            # Haal de nieuwste image binnen
            docker pull veenm/paypoint:$VERSION-SNAPSHOT

            # Start een nieuwe container
-            docker run -d --name paypoint --restart unless-stopped -p 15001:80 veenm/paypoint:$VERSION-SNAPSHOT
+            docker run -d --name paypoint-frontend --restart unless-stopped -p 15000:80 veenm/paypoint:$VERSION-SNAPSHOT

            # Opruimen oude images
            docker image prune -f
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Notify Mattermost via Bot
+        env:
+          VERSION: ${{ env.VERSION }}
+        run: |
+          COMMITS=$(git log $(git describe --tags --abbrev=0)..HEAD --pretty=format:"- %s")
+          curl --fail -X POST -H "Authorization: Bearer tspcwdn5rbdk8kkmnex6h1nfha" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all ✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op https://test-paypoint.melvanveen.nl\n\n*Changelog:*\n'"${COMMITS}"'"
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
+  notify-failure:
+    needs: [ build-and-push, deploy ]
+    runs-on: ubuntu-latest
+    if: failure()
+
+    steps:
+      - name: Notify Mattermost via Bot on failure
+        env:
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all ❌ *Build gefaald!* De pipeline is stukgelopen voor *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
--- a/2
+++ b/2
@@ -11,7 +11,7 @@ RUN npm install -g @angular/cli

 COPY . .

-RUN ng build --configuration=production
+RUN ng build --configuration=test

 # Gebruik een multi-architecture versie van Nginx
 FROM nginx:latest
--- a/angular.json
+++ b/angular.json
@@ -94,6 +94,9 @@
            },
            "development": {
              "buildTarget": "PayPoint:build:development"
+            },
+            "test": {
+              "buildTarget": "PayPoint:build:test"
            }
          },
          "defaultConfiguration": "development"
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "pay-point",
-  "version": "0.0.21",
+  "version": "0.0.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "pay-point",
-      "version": "0.0.21",
+      "version": "0.0.3",
      "dependencies": {
        "@angular/animations": "^19.0.0",
        "@angular/cdk": "^19.0.0",
@@ -5974,6 +5974,20 @@
        "@angular/core": ">=15.0.0"
      }
    },
+    "node_modules/angularx-flatpickr": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/angularx-flatpickr/-/angularx-flatpickr-8.1.0.tgz",
+      "integrity": "sha512-U+WXMUXGEiQbdMGSPk7T+HehmAFdVWKu3XlCXFM8mYCCB/fWHW8sbHstxxZgOymD5Q1kfLaHNob1MxhWUgv1hg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=17.0.0",
+        "@angular/forms": ">=17.0.0",
+        "flatpickr": "^4.5.0"
+      }
+    },
    "node_modules/ansi-colors": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -8343,6 +8357,12 @@
        "flat": "cli.js"
      }
    },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+      "license": "MIT"
+    },
    "node_modules/flatted": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "pay-point",
-  "version": "0.0.21",
+  "version": "0.0.3",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -3,6 +3,8 @@ import {AgendaComponent} from './pages/agenda/agenda.component';
 import {LoginComponent} from './pages/login/login.component';
 import {HomeComponent} from './pages/home/home.component';
 import {KlantenComponent} from './pages/klanten/klanten.component';
+import {AgendaInviteComponent} from './pages/agenda-invite/agenda-invite.component';
+import {AgendaDelenComponent} from './pages/agenda-delen/agenda-delen.component';

 export const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
@@ -19,6 +21,14 @@ export const routes: Routes = [
        path: 'klanten',
        component: KlantenComponent,
      },
+      {
+        path: 'agenda-invite',
+        component: AgendaInviteComponent
+      },
+      {
+        path: 'agenda-delen',
+        component: AgendaDelenComponent
+      }
      // {
      //     path: 'dashboard',
      //     component: DashboardComponent,
--- a/src/app/components/appointment/appointment.component.html
+++ b/src/app/components/appointment/appointment.component.html
@@ -0,0 +1,28 @@
+<div
+  class="appointment"
+  *ngIf="size == 'large'"
+  [attr.id]="'afspraak-'+appointment.id"
+  (click)="selectAppointment(appointment)"
+  [ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
+  [ngStyle]="getInlineStyles(appointment)">
+
+  <strong>{{ appointment.title }}</strong>
+  <span class="appointment-time" *ngIf="appointment.customer">
+            <tui-icon icon="@tui.user" [style.font-size.rem]="1"></tui-icon>
+    {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
+  <span class="appointment-time">
+            <tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
+    {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
+    - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
+          </span>
+</div>
+<div
+  class="appointment"
+  *ngIf="size == 'medium'"
+  [attr.id]="'afspraak-'+appointment.id"
+  (click)="selectAppointment(appointment)"
+  [ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
+  [ngStyle]="getInlineStyles(appointment)">
+
+  <strong>{{ appointment.title }}</strong>
+</div>
--- a/src/app/components/appointment/appointment.component.scss
+++ b/src/app/components/appointment/appointment.component.scss
@@ -0,0 +1,38 @@
+.appointment {
+  position: absolute;
+  //width: calc(100% - 100px);
+  background: #1e88e5;
+  color: white;
+  border-radius: 4px;
+  border-left: 5px solid #1565c0;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+
+  z-index: 10;
+  cursor: pointer;
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  min-height: 20px;
+}
+
+.appointment.large {
+  grid-auto-flow: row;
+  align-items: flex-start;
+}
+
+.appointment-time {
+  margin-left: 8px;
+}
+
+@media (max-width: 600px) {
+  .appointment {
+    //width: calc(100% - 80px);
+    font-size: 14px;
+  }
+
+  .appointment-time {
+    font-size: 12px;
+    display: block;
+  }
+}
+
--- a/src/app/components/appointment/appointment.component.ts
+++ b/src/app/components/appointment/appointment.component.ts
@@ -0,0 +1,46 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass, NgIf, NgStyle} from '@angular/common';
+import {AppointmentDto} from '../../models/appointment-dto';
+import {TuiIcon} from '@taiga-ui/core';
+
+@Component({
+  selector: 'component-appointment',
+  imports: [
+    NgClass,
+    NgStyle,
+    TuiIcon,
+    NgIf
+  ],
+  templateUrl: './appointment.component.html',
+  styleUrl: './appointment.component.scss'
+})
+export class AppointmentComponent {
+  @Input() appointment: AppointmentDto;
+  @Input() size: 'large' | 'medium' | 'small' = 'medium';
+  @Input() width: number;
+  @Output() onClick = new EventEmitter<AppointmentDto>();
+
+  selectAppointment(appointment: AppointmentDto) {
+    this.onClick.emit(appointment);
+  }
+
+  getInlineStyles(appointment: AppointmentDto): { [key: string]: string } {
+    return {
+      '--duration': `${appointment.durationInMinutes}`,
+      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
+      'top': `${appointment.startDateTime.getMinutes()}px`, // Startpositie binnen het uur
+      'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren
+      'width': `${this.width}px`,
+    };
+  }
+
+  getFormattedTime(hour: number, minute: number): string {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  }
+
+  getAppointmentHeight(appointment: AppointmentDto): number {
+    const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
+    const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes();
+    return (endInMinutes - startInMinutes); // 50px per uur
+  }
+}
--- a/src/app/components/customer-details/customer-details.component.html
+++ b/src/app/components/customer-details/customer-details.component.html
@@ -10,10 +10,17 @@
    [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>
    Eerst volgende afspraak:
  </h2>
-  <h2>{{ appointment.startDate }}</h2>
+  <h2>{{ appointment.startDateTime }}</h2>
 </ng-template>
--- a/src/app/components/datepicker/datepicker.component.html
+++ b/src/app/components/datepicker/datepicker.component.html
@@ -0,0 +1,25 @@
+<div class="calendar">
+  <div class="calendar-header">
+    <button class="nav-button" (click)="goToPreviousMonth()">‹</button>
+    <h3>{{ currentDate | date:'MMMM yyyy' }} - {{ secondDate | date:'MMMM yyyy' }}</h3>
+    <button class="nav-button" (click)="goToNextMonth()">›</button>
+  </div>
+
+  <div class="calendar-pair">
+    <div *ngFor="let calendar of calendars; let i = index" class="calendar-grid">
+      <div class="week-label">Wk</div>
+      <div *ngFor="let day of ['M','D','W','D','V','Z','Z']" class="day-header">{{ day }}</div>
+
+      <ng-container *ngFor="let week of calendar">
+        <div class="week-number">{{ week.number }}</div>
+        <div *ngFor="let day of week.days"
+             (click)="selectDate(day)"
+             [class.today]="isToday(day)"
+             [class.selected]="isSelected(day)"
+             class="day-cell">
+          {{ day.getDate() }}
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</div>
--- a/src/app/components/datepicker/datepicker.component.scss
+++ b/src/app/components/datepicker/datepicker.component.scss
@@ -0,0 +1,99 @@
+$primary: #1976d2;
+$hover-bg: #e3f2fd;
+$selected-bg: #1565c0;
+$bg-light: #f5f5f5;
+$border-radius: 8px;
+
+.calendar {
+  max-width: 900px;
+  margin: 2rem auto;
+  padding: 1rem;
+  background: #fff;
+  border-radius: $border-radius;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', sans-serif;
+
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+
+    h3 {
+      margin: 0;
+      font-size: 1.3rem;
+      text-align: center;
+    }
+
+    .nav-button {
+      background: none;
+      border: none;
+      font-size: 1.6rem;
+      color: $primary;
+      cursor: pointer;
+      padding: 0.4rem 0.6rem;
+      border-radius: 4px;
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+  }
+
+  .calendar-pair {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+  }
+
+  .calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 6px;
+
+    .day-header,
+    .week-label,
+    .week-number {
+      font-weight: bold;
+      background: $bg-light;
+      padding: 6px 0;
+      border-radius: $border-radius;
+      font-size: 0.9rem;
+      text-align: center;
+      height: 20px;
+      width: 28px;
+    }
+
+    .day-cell {
+      padding: 8px 0;
+      text-align: center;
+      cursor: pointer;
+      border-radius: $border-radius;
+      transition: background-color 0.2s;
+      height: 20px;
+      width: 28px;
+
+      &:hover {
+        background: $hover-bg;
+      }
+
+      &.today {
+        background: $hover-bg;
+        font-weight: bold;
+      }
+
+      &.selected {
+        background: $selected-bg;
+        color: #fff;
+      }
+    }
+  }
+
+  .calendar-footer {
+    text-align: center;
+    margin-top: 1.5rem;
+    font-size: 0.95rem;
+    color: #555;
+  }
+}
--- a/src/app/components/datepicker/datepicker.component.ts
+++ b/src/app/components/datepicker/datepicker.component.ts
@@ -0,0 +1,97 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {DatePipe, NgForOf} from '@angular/common';
+
+@Component({
+  selector: 'datepicker',
+  imports: [
+    NgForOf,
+    DatePipe
+  ],
+  templateUrl: './datepicker.component.html',
+  styleUrl: './datepicker.component.scss'
+})
+export class DatepickerComponent implements OnInit {
+  @Input() currentDate = new Date(); // startmaand
+  secondDate = new Date();  // tweede maand
+
+  calendars: any[][] = [[], []];
+  selectedDate: Date | null = null;
+  @Output() onSelectedDate: EventEmitter<Date> = new EventEmitter();
+
+  ngOnInit() {
+    this.updateSecondDate();
+    this.generateCalendars();
+  }
+
+  updateSecondDate() {
+    this.secondDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
+  }
+
+  generateCalendars() {
+    this.calendars[0] = this.generateCalendar(this.currentDate);
+    this.calendars[1] = this.generateCalendar(this.secondDate);
+  }
+
+  generateCalendar(date: Date) {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    let day = new Date(firstDay);
+    day.setDate(day.getDate() - ((day.getDay() + 6) % 7)); // maandag starten
+
+    const calendar: any[] = [];
+
+    while (day <= lastDay || day.getDay() !== 1) {
+      const week = {
+        number: this.getWeekNumber(day),
+        days: []
+      };
+
+      for (let i = 0; i < 7; i++) {
+        week.days.push(new Date(day));
+        day.setDate(day.getDate() + 1);
+      }
+
+      calendar.push(week);
+    }
+
+    return calendar;
+  }
+
+  getWeekNumber(d: Date): number {
+    const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    const dayNum = date.getUTCDay() || 7;
+    date.setUTCDate(date.getUTCDate() + 4 - dayNum);
+    const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+    return Math.ceil((((+date - +yearStart) / 86400000) + 1) / 7);
+  }
+
+  selectDate(date: Date) {
+    this.selectedDate = date;
+    this.onSelectedDate.emit(date);
+  }
+
+  isToday(date: Date): boolean {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  }
+
+  isSelected(date: Date): boolean {
+    return this.selectedDate?.toDateString() === date.toDateString();
+  }
+
+  goToPreviousMonth() {
+    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
+    this.updateSecondDate();
+    this.generateCalendars();
+  }
+
+  goToNextMonth() {
+    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
+    this.updateSecondDate();
+    this.generateCalendars();
+  }
+}
--- a/src/app/components/details/details.component.html
+++ b/src/app/components/details/details.component.html
@@ -2,14 +2,14 @@
  <tui-icon
    icon="@tui.calendar"
    [style.color]="'var(--tui-background-accent-1)'"/>
-  {{ DateFormatter.getDate(appointment.startDate.toString()) }}
+  {{ DateFormatter.getDate(appointment.startDateTime.toString()) }}
 </h2>
 <h2>
  <tui-icon
    icon="@tui.clock"
    [style.color]="'var(--tui-background-accent-1)'"/>
-  {{ DateFormatter.getFormattedTime(appointment.startHour, appointment.startMinute) }}
-  - {{ DateFormatter.getFormattedTime(appointment.endHour, appointment.endMinute) }}
+  {{ DateFormatter.getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
+  - {{ DateFormatter.getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
 </h2>
 <h2 *ngIf="appointment.customer">
  <tui-icon
@@ -32,6 +32,7 @@
    tuiButton
    iconStart="@tui.pencil"
    size="s"
+    id="bewerkAfspraak"
    (click)="showEditModal = true"
    type="button">
    Bewerken
@@ -41,6 +42,7 @@
    tuiButton
    iconStart="@tui.trash-2"
    size="s"
+    id="verwijderAfspraak"
    (click)="showDeleteModal = true"
    type="button">
    Verwijderen
@@ -59,6 +61,7 @@
      appearance="outline"
      tuiButton
      size="s"
+      id="bevestigAfspraakVerwijderen"
      (click)="deleteAppointment()"
      type="button">
      Ja, afspraak verwijderen
@@ -67,6 +70,7 @@
      appearance="outline"
      tuiButton
      size="s"
+      id="annuleerAfspraakVerwijderen"
      (click)="showDeleteModal = false"
      type="button">
      Nee, ga terug
--- a/src/app/components/details/details.component.ts
+++ b/src/app/components/details/details.component.ts
@@ -1,5 +1,4 @@
 import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
-import {Appointment} from '../../models/appointment';
 import {DateFormatter} from '../../utils/date-formatter';
 import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
 import {TuiTextareaModule} from '@taiga-ui/legacy';
@@ -8,6 +7,7 @@ import {NgIf} from '@angular/common';
 import {ModalComponent} from '../modal/modal.component';
 import {EditItemComponent} from '../edit-item/edit-item.component';
 import {AppointmentService} from '../../services/appointment.service';
+import {AppointmentDto} from '../../models/appointment-dto';

@Component({
  selector: 'app-details',
@@ -36,9 +36,9 @@ export class DetailsComponent implements OnInit {
  constructor(private appointmentService: AppointmentService) {
  }

-  @Input() appointment: Appointment;
-  @Output() appointmentDeleted = new EventEmitter<Appointment>();
-  @Output() appointmentEdited = new EventEmitter<Appointment>();
+  @Input() appointment: AppointmentDto;
+  @Output() appointmentDeleted = new EventEmitter<AppointmentDto>();
+  @Output() appointmentEdited = new EventEmitter<AppointmentDto>();
  open: boolean = true;
  readonly = true;
  showDeleteModal = false;
@@ -66,7 +66,7 @@ export class DetailsComponent implements OnInit {
  updateAppointment($event: any) {
    this.showEditModal = false;

-    this.appointmentService.getAppointment($event).subscribe((appointment: Appointment) => {
+    this.appointmentService.getAppointment($event).subscribe((appointment: AppointmentDto) => {
      this.appointment = appointment
      this.appointmentEdited.emit(this.appointment);
    })
--- a/src/app/components/dropdown-content/dropdown-content.component.html
+++ b/src/app/components/dropdown-content/dropdown-content.component.html
@@ -0,0 +1,46 @@
+<div class="dropdown-content">
+  <div>
+    <div class="dropdown-section-title">Agenda Beheer</div>
+    <tui-data-list>
+      <button tuiOption class="dropdown-item" (click)="shareAgenda();">
+        <tui-icon
+          icon="@tui.share-2"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+        Agenda delen
+      </button>
+      <button tuiOption class="dropdown-item" (click)="switchAgenda();" [disabled]="false">
+        <tui-icon
+          icon="@tui.arrow-left-right"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+        Agenda beheren
+      </button>
+    </tui-data-list>
+  </div>
+
+  <div>
+    <div class="dropdown-section-title">Weergave Instellingen</div>
+    <tui-data-list>
+      <button tuiOption class="dropdown-item" (click)="setView('day');">
+        <tui-icon
+          icon="@tui.check"
+          *ngIf="currentView == 'day'"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+        Dagweergave
+      </button>
+      <button tuiOption class="dropdown-item" (click)="setView('week');">
+        <tui-icon
+          icon="@tui.check"
+          *ngIf="currentView == 'week'"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+        Weekweergave
+      </button>
+      <button tuiOption class="dropdown-item" (click)="setView('month');" [disabled]="true">
+        <tui-icon
+          icon="@tui.check"
+          *ngIf="currentView == 'month'"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+        Jaarweergave
+      </button>
+    </tui-data-list>
+  </div>
+</div>
--- a/src/app/components/dropdown-content/dropdown-content.component.scss
+++ b/src/app/components/dropdown-content/dropdown-content.component.scss
@@ -0,0 +1,35 @@
+.dropdown-content {
+  border-radius: 12px;
+  background-color: white;
+  min-width: 220px;
+}
+
+.dropdown-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+  padding-left: 0.25rem;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  font-size: 0.95rem;
+  gap: 0.5rem;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: #e5e7eb;
+  }
+}
--- a/src/app/components/dropdown-content/dropdown-content.component.ts
+++ b/src/app/components/dropdown-content/dropdown-content.component.ts
@@ -0,0 +1,56 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {TuiDataListComponent, TuiIcon, TuiOption} from '@taiga-ui/core';
+import {Router} from '@angular/router';
+import {NgIf} from '@angular/common';
+
+@Component({
+  selector: 'dropdown-content',
+  standalone: true,
+  imports: [
+    TuiIcon,
+    TuiOption,
+    TuiDataListComponent,
+    NgIf,
+  ],
+  templateUrl: './dropdown-content.component.html',
+  styleUrls: ['./dropdown-content.component.scss']
+})
+export class DropdownContentComponent {
+
+  constructor(private router: Router) {
+  }
+
+  @Input() currentView: string = 'day'
+  @Output() close = new EventEmitter()
+  @Output() view = new EventEmitter()
+  @Output() changeAgenda = new EventEmitter()
+
+  shareAgenda() {
+    this.close.emit()/* open modal etc */
+    this.router.navigate(['/home/agenda-delen'])
+  }
+
+  switchAgenda() {
+    this.changeAgenda.emit()/* toggle agenda */
+    this.close.emit()/* toggle agenda */
+  }
+
+  setView(view: 'day' | 'week' | 'month') {
+    this.currentView = view;
+    this.view.emit(view)
+      this.close.emit()
+  }
+
+  isDay() {
+    return this.currentView === 'day'
+  }
+
+  isWeek() {
+    return this.currentView === 'week'
+  }
+
+  isMonth() {
+    return this.currentView === 'month'
+  }
+
+}
--- a/src/app/components/edit-item/edit-item.component.html
+++ b/src/app/components/edit-item/edit-item.component.html
@@ -5,6 +5,7 @@
      tuiTextfieldLegacy
      formControlName="title"
      type="text"
+      id="titelBewerken"
    />
  </tui-input>
  <div
@@ -17,6 +18,7 @@
      appearance="outline"
      tuiButton
      size="s"
+      [id]="action + '-bewerken'"
      (click)="addAction(action)"
      type="button">{{ action }}
    </button>
@@ -27,6 +29,7 @@
    <tui-combo-box
      [formControl]="control"
      [stringify]="stringify"
+      id="klantBewerken"
      tuiTextfieldSize="m">
      Klant
      <tui-data-list-wrapper
@@ -38,6 +41,7 @@
    <button
      size="m"
      tuiButton
+      id="nieuweKlantBewerken"
      (click)="toggleCustomerModal()"
      iconStart="@tui.plus"
      type="button">
@@ -53,6 +57,7 @@
        formControlName="date"
        tuiTextfieldSize="m"
        class="tui-space_vertical-4"
+        id="datumBewerken"
        [tuiTextfieldLabelOutside]="false"
      >
        Datum
@@ -63,6 +68,7 @@
        formControlName="startTime"
        tuiTextfieldSize="m"
        class="tui-space_top-2"
+        id="vanBewerken"
        [tuiTextfieldLabelOutside]="false">
        Van
      </tui-input-time>
@@ -72,6 +78,7 @@
        formControlName="endTime"
        tuiTextfieldSize="m"
        class="tui-space_top-2"
+        id="totBewerken"
        [tuiTextfieldLabelOutside]="false"
      >
        Tot
@@ -79,71 +86,18 @@
    </div>
  </div>
  <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notitiesBewerken">Notities</tui-textarea>
 </form>
 <br>
 <button
  size="m"
  tuiButton
+  id="afspraakBewerken"
  type="button" (click)="updateAppointment()"
  [tuiAppearanceState]="formIsValid()">
  Afspraak bewerken
 </button>

 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"
-      />
-    </tui-input>
-    <br>
-
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"
-      />
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"
-      />
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"
-      />
-      Klant toevoegen
-    </button>
-  </form>
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
 </app-modal>
--- a/src/app/components/edit-item/edit-item.component.ts
+++ b/src/app/components/edit-item/edit-item.component.ts
@@ -1,7 +1,7 @@
 import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
 import {NgForOf, NgIf} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
+import {TuiAlertService, TuiButton, TuiGroup} from "@taiga-ui/core";
 import {
  TuiComboBoxModule,
  TuiInputDateModule,
@@ -10,13 +10,14 @@ import {
  TuiTextareaModule,
  TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
-import {Appointment} from '../../models/appointment';
 import {TuiDay, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
+import {NewCustomerComponent} from '../new-customer/new-customer.component';
+import {AppointmentDto} from '../../models/appointment-dto';

@Component({
  selector: 'app-edit-item',
@@ -36,14 +37,14 @@ import {ModalComponent} from '../modal/modal.component';
    TuiStringifyContentPipe,
    TuiFilterByInputPipe,
    ModalComponent,
-    TuiIcon
+    NewCustomerComponent
  ],
  templateUrl: './edit-item.component.html',
  styleUrl: './edit-item.component.scss'
 })
 export class EditItemComponent implements OnInit {

-  @Input() appointment: Appointment;
+  @Input() appointment: AppointmentDto;
  testForm: FormGroup;
  quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
  waiting: boolean = false;
@@ -58,12 +59,12 @@ export class EditItemComponent implements OnInit {
  }

  ngOnInit(): void {
-    let date = new Date(this.appointment.startDate);
+    let date = new Date(this.appointment.startDateTime);
    this.testForm = new FormGroup({
      title: new FormControl(this.appointment.title, Validators.required),
      notes: new FormControl(this.appointment.description),
-      startTime: new FormControl(new TuiTime(this.appointment.startHour, this.appointment.startMinute), Validators.required),
-      endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), Validators.required),
+      startTime: new FormControl(new TuiTime(this.appointment.startDateTime.getHours(), this.appointment.startDateTime.getMinutes()), Validators.required),
+      endTime: new FormControl(new TuiTime(this.appointment.endDateTime.getHours(), this.appointment.endDateTime.getMinutes()), Validators.required),
      date: new FormControl(new TuiDay(date.getFullYear(), date.getMonth(), date.getDate()), Validators.required),
    })
    this.control = new FormControl(this.appointment.customer)
@@ -83,17 +84,17 @@ export class EditItemComponent implements OnInit {
    const endTime = this.testForm.get('endTime').value
    let date = this.testForm.get('date').value
    let correctDate = new Date(date.year, date.month, date.day + 1)
+    let startDateTime = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes)
+    let endDateTime = new Date(date.year, date.month, date.day, endTime.hours, endTime.minutes)

    const customer = this.control.value;
-    this.appointment.startDate = correctDate;
+    this.appointment.startDateTime = correctDate;
    this.appointment.title = title;
    this.appointment.description = description
-    this.appointment.startHour = startTime.hours
-    this.appointment.startMinute = startTime.minutes
-    this.appointment.endHour = endTime.hours
-    this.appointment.endMinute = endTime.minutes
+    this.appointment.startDateTime = startDateTime;
+    this.appointment.endDateTime = endDateTime;
    this.appointment.customer = customer;
-    this.appointment.durationInMinutes = (this.appointment.endHour * 60 + this.appointment.endMinute) - (this.appointment.startHour * 60 + this.appointment.startMinute);
+    this.appointment.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;

    this.waiting = true
    this.appointmentService.updateAppointment(this.appointment).subscribe(() => {
@@ -126,15 +127,8 @@ export class EditItemComponent implements OnInit {
    `${item.firstName} ${item.lastName}`;

  saveCustomer() {
-    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);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
+    this.showNewCustomer = false;
+    this.getCustomers()
  }

  getCustomers() {
--- a/src/app/components/modal/modal.component.html
+++ b/src/app/components/modal/modal.component.html
@@ -8,6 +8,7 @@
      size="xs"
      tuiIconButton
      type="button"
+      id="sluitModal"
      [style.border-radius.%]="100"
      (click)="closeModal()"
    >
--- a/src/app/components/new-customer/new-customer.component.html
+++ b/src/app/components/new-customer/new-customer.component.html
@@ -0,0 +1,66 @@
+<form [formGroup]="customerForm">
+  <tui-input
+    formControlName="firstName"
+    tuiTextfieldSize="m"
+    id="voornaam-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Voornaam
+    <input
+      tuiTextfieldLegacy
+      type="text"
+      formControlName="firstName"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="lastName"
+    tuiTextfieldSize="m"
+    id="achternaam-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Achternaam
+    <input
+      tuiTextfieldLegacy
+      type="text"
+      formControlName="lastName"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="email"
+    tuiTextfieldSize="m"
+    id="email-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Email
+    <input
+      tuiTextfieldLegacy
+      autocomplete="email"
+      type="email"
+      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"
+    tuiButton
+    id="klant-toevoegen"
+    [disabled]="customerForm.invalid"
+    [loading]=waiting
+    (click)="saveCustomer()"
+    type="button">
+    <tui-icon
+      icon="@tui.plus"
+      [style.height.rem]="1"/>
+    Klant toevoegen
+  </button>
+</form>
--- a/src/app/components/new-customer/new-customer.component.scss
+++ b/src/app/components/new-customer/new-customer.component.scss
--- a/src/app/components/new-customer/new-customer.component.ts
+++ b/src/app/components/new-customer/new-customer.component.ts
@@ -0,0 +1,50 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiInputModule} from '@taiga-ui/legacy';
+import {TuiButton, TuiIcon, TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiButtonLoading} from '@taiga-ui/kit';
+import {Customer} from '../../models/customer';
+import {CustomerService} from '../../services/customer.service';
+
+@Component({
+  selector: 'app-new-customer',
+  imports: [
+    ReactiveFormsModule,
+    TuiInputModule,
+    TuiTextfieldOptionsDirective,
+    TuiButton,
+    TuiIcon,
+    TuiButtonLoading
+  ],
+  templateUrl: './new-customer.component.html',
+  styleUrl: './new-customer.component.scss'
+})
+export class NewCustomerComponent {
+  waiting: boolean = false;
+  customerForm: FormGroup;
+  @Output() customerAdded: EventEmitter<any> = new EventEmitter();
+  emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+
+  constructor(private customerService: CustomerService) {
+
+    this.customerForm = new FormGroup({
+      firstName: new FormControl('', [Validators.required]),
+      lastName: new FormControl('', [Validators.required]),
+      email: new FormControl('', [Validators.required, Validators.pattern(this.emailRegex)]),
+      phone: new FormControl('', [Validators.required]),
+    })
+  }
+
+  saveCustomer() {
+    const firstName = this.customerForm.get('firstName').value
+    const lastName = this.customerForm.get('lastName').value
+    const email = this.customerForm.get('email').value
+    const phone = this.customerForm.get('phone').value
+    const customer = new Customer(firstName, lastName, email, phone);
+
+    this.customerService.addCustomer(customer).subscribe(() => {
+      this.customerAdded.emit(customer);
+    })
+  }
+}
--- a/src/app/components/new-item/new-item.component.html
+++ b/src/app/components/new-item/new-item.component.html
@@ -5,6 +5,7 @@
      tuiTextfieldLegacy
      formControlName="title"
      type="text"
+      id="titel"
    />
  </tui-input>
  <div
@@ -16,6 +17,7 @@
      *ngFor="let action of quickActions"
      appearance="outline"
      tuiButton
+      [attr.id]="action"
      size="s"
      (click)="addAction(action)"
      type="button">{{ action }}
@@ -27,9 +29,11 @@
    <tui-combo-box
      [formControl]="customerControl"
      [stringify]="stringify"
+      id="klant"
      tuiTextfieldSize="m">
      Klant
      <tui-data-list-wrapper
+        id="klant-input"
        *tuiDataList
        [itemContent]="stringify | tuiStringifyContent"
        [items]="items | tuiFilterByInput"
@@ -38,6 +42,7 @@
    <button
      size="m"
      tuiButton
+      id="klantToevoegen"
      (click)="toggleCustomerModal()"
      iconStart="@tui.plus"
      type="button">
@@ -53,6 +58,7 @@
        formControlName="date"
        tuiTextfieldSize="m"
        class="tui-space_vertical-4"
+        id="datum"
        [tuiTextfieldLabelOutside]="false">
        Datum
      </tui-input-date>
@@ -62,6 +68,7 @@
        formControlName="startTime"
        tuiTextfieldSize="m"
        class="tui-space_top-2"
+        id="van"
        [tuiTextfieldLabelOutside]="false">
        Van
      </tui-input-time>
@@ -71,21 +78,22 @@
        formControlName="endTime"
        tuiTextfieldSize="m"
        class="tui-space_top-2"
+        id="tot"
        [tuiTextfieldLabelOutside]="false">
        Tot
      </tui-input-time>
    </div>
  </div>
  <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
-      	<tui-error [error]="timeError"/>
+      	<tui-error id="timeError" [error]="timeError"/>
    </span>
  <br>
  <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">
-        <span class="title">{{ appointment.title }}</span>
-        <span class="name">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDateTime + '-' + appointment.startDateTime.getHours() + appointment.startDateTime.getMinutes()">
+        <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
+        <span class="name" id="titel-naam">
        <tui-icon
          icon="@tui.user"
          [style.font-size.rem]="1"
@@ -96,72 +104,25 @@
          icon="@tui.clock"
          [style.font-size.rem]="1"
          [style.color]="'var(--tui-background-accent-1)'"/>
-          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
-          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+          {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} -
+          {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
    </span>
      </div>
    </div>
  </ng-container>
-
  <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notities">Notities</tui-textarea>
 </form>
 <br>
 <button
  size="m"
  tuiButton
  type="button" (click)="registerAppointment()"
+  id="afspraakPlannen"
  [tuiAppearanceState]="formIsValid()">
  Afspraak maken
 </button>

 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true">
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true">
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true">
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"/>
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      [loading]=waiting
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"/>
-      Klant toevoegen
-    </button>
-  </form>
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
 </app-modal>
--- a/src/app/components/new-item/new-item.component.ts
+++ b/src/app/components/new-item/new-item.component.ts
@@ -10,19 +10,16 @@ import {
  TuiTextareaModule,
  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 {
-  TuiButtonLoading,
-  TuiDataListWrapperComponent,
-  TuiFilterByInputPipe,
-  TuiStringifyContentPipe
-} from '@taiga-ui/kit';
+import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
 import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
+import {NewCustomerComponent} from '../new-customer/new-customer.component';
+import {UserService} from '../../services/user.service';
+import {AppointmentDto} from '../../models/appointment-dto';

@Component({
  selector: 'app-new-item',
@@ -43,8 +40,8 @@ import {timeAfterStartValidator} from '../../models/validators/time-after-start-
    TuiFilterByInputPipe,
    ModalComponent,
    TuiIcon,
-    TuiButtonLoading,
-    TuiError
+    TuiError,
+    NewCustomerComponent
  ],
  templateUrl: './new-item.component.html',
  styleUrl: './new-item.component.scss'
@@ -52,7 +49,7 @@ import {timeAfterStartValidator} from '../../models/validators/time-after-start-
 export class NewItemComponent implements OnInit {

  @Input() appointmentForm: FormGroup;
-  @Input() appointments: Appointment[];
+  @Input() appointments: AppointmentDto[];
  quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
  waiting: boolean = false;
  protected value: TuiDay | null = null;
@@ -63,7 +60,7 @@ export class NewItemComponent implements OnInit {
  timeError = new TuiValidationError('Begintijd moet voor de eindtijd liggen.');


-  constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
+  constructor(private appointmentService: AppointmentService, private customerService: CustomerService, private userService: UserService,) {
  }

  ngOnInit(): void {
@@ -72,27 +69,15 @@ export class NewItemComponent implements OnInit {
    this.customerForm = new FormGroup({
      firstName: new FormControl('', Validators.required),
      lastName: new FormControl('', Validators.required),
-      email: 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;
+      return a.startDateTime.getHours() - b.startDateTime.getHours() || a.startDateTime.getMinutes() - b.startDateTime.getMinutes();
    });
  }

-  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
@@ -101,11 +86,15 @@ export class NewItemComponent implements OnInit {
    let date = this.appointmentForm.get('date').value
    let correctDate = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes);

+    let startDateTime = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes)
+    let endDateTime = new Date(date.year, date.month, date.day, endTime.hours, endTime.minutes)
+
    const customer = this.customerControl.value;

-    const appointment = new Appointment(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer)
+    // constructor(id: string, title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer, company: CompanyDTO)
+    const appointment = new AppointmentDto(title, description, startDateTime, endDateTime, customer)
    this.waiting = true
-    this.appointmentService.addAppointment(appointment).subscribe(() => {
+    this.appointmentService.addAppointment(appointment, this.userService.currentCompany.id).subscribe(() => {
      this.waiting = false
      this.appointmentAddedEvent.emit(title)
    })
@@ -133,15 +122,8 @@ export class NewItemComponent implements OnInit {
    `${item.firstName} ${item.lastName}`;

  saveCustomer() {
-    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);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
+    this.showNewCustomer = false;
+    this.getCustomers()
  }

  getCustomers() {
--- a/src/app/components/week-view/week-view.component.html
+++ b/src/app/components/week-view/week-view.component.html
@@ -0,0 +1,36 @@
+<div class="calendar-container">
+  <div class="calendar-header">
+    <div class="time-column-header"></div>
+    <div *ngFor="let day of days" class="day-header">
+      {{ getDayLabel(day) }}
+    </div>
+  </div>
+
+  <div class="calendar-body">
+    <div class="time-column">
+      <div *ngFor="let hour of hours" class="hour-label">{{ hour }}</div>
+    </div>
+    <div class="week-grid">
+
+
+      <div *ngFor="let day of days" class="day-column">
+        <div *ngFor="let hour of hours" class="hour-cell">
+          <div *ngIf="searchAppointments(day, hour) as appointmentDtos">
+            <div
+              class="appointments-wrapper"
+              [ngClass]="{ 'multiple': searchAppointments(day, hour).length > 1 }">
+
+              <component-appointment
+                *ngFor="let appointment of appointmentDtos"
+                [appointment]="appointment"
+                size="medium"
+                [width]="100 / appointmentDtos.length"
+                (onClick)="emitAppointment($event)">
+              </component-appointment>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/app/components/week-view/week-view.component.scss
+++ b/src/app/components/week-view/week-view.component.scss
@@ -0,0 +1,87 @@
+.calendar-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+  font-family: Arial, sans-serif;
+  height: 100%;
+  overflow: hidden;
+}
+
+.calendar-header {
+  display: flex;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+}
+
+.time-column-header {
+  width: 60px;
+}
+
+.day-header {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+  font-weight: bold;
+  border-left: 1px solid #ccc;
+}
+
+.calendar-body {
+  display: flex;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.time-column {
+  width: 60px;
+  border-right: 1px solid #ccc;
+}
+
+.hour-label {
+  height: 60px;
+  line-height: 60px;
+  text-align: right;
+  padding-right: 5px;
+  font-size: 12px;
+  color: #666;
+}
+
+.week-grid {
+  display: flex;
+  flex: 1;
+}
+
+.day-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #eee;
+}
+
+.hour-cell {
+  height: 60px;
+  border-bottom: 1px solid #eee;
+  position: relative;
+}
+
+.appointments {
+  display: flex;
+}
+
+.appointments-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 4px; // ruimte tussen de afspraken
+  height: 100%;
+  width: 100%;
+
+  component-appointment {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &.multiple component-appointment {
+    flex: 1 1 0;
+  }
+}
+
--- a/src/app/components/week-view/week-view.component.ts
+++ b/src/app/components/week-view/week-view.component.ts
@@ -0,0 +1,122 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {NgClass, NgForOf, NgIf} from '@angular/common';
+import {AppointmentDto} from '../../models/appointment-dto';
+import {AppointmentService} from '../../services/appointment.service';
+import {AppointmentComponent} from '../appointment/appointment.component';
+
+@Component({
+  selector: 'app-week-view',
+  templateUrl: './week-view.component.html',
+  imports: [
+    NgForOf,
+    AppointmentComponent,
+    NgIf,
+    NgClass
+  ],
+  styleUrls: ['./week-view.component.scss']
+})
+export class WeekViewComponent implements OnInit {
+  hours: string[] = [];
+  days: Date[] = [];
+  @Input() selectedDate: Date;
+  appointments: AppointmentDto[] = [];
+  @Output() appointmentSelected = new EventEmitter<AppointmentDto>();
+
+
+  constructor(private appointmentService: AppointmentService) {
+  }
+
+  ngOnInit(): void {
+    this.generateHours();
+    this.getWeekDates();
+    this.getAppointments()
+  }
+
+  generateHours() {
+    for (let i = 0; i < 24; i++) {
+      const hour = i.toString().padStart(2, '0') + ':00';
+      this.hours.push(hour);
+    }
+  }
+
+  getAppointments() {
+    console.log(this.days[0], this.days[6])
+    console.log('GETTING APPOINTMENTS')
+    this.appointmentService.getAppointmentsByWeek(this.days[0], this.days[6]).subscribe(appointments => {
+      this.appointments = appointments
+      console.log(appointments);
+    });
+  }
+
+  generateWeek() {
+    const today = new Date();
+    const startOfWeek = today.getDate() - today.getDay() + 1; // maandag
+    console.log(today.getDate() - today.getDay());
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(today);
+      date.setDate(startOfWeek + i);
+      this.days.push(date);
+    }
+  }
+
+  getDayLabel(date: Date): string {
+    return date.toLocaleDateString('nl-NL', {weekday: 'short', day: 'numeric', month: 'short'});
+  }
+
+  setSelectedDate(date: Date): void {
+    this.selectedDate = date;
+  }
+
+  getWeekDates() {
+    const startDate = new Date(this.selectedDate);  // Maak een kopie van de ingevoerde datum
+    const dayOfWeek = startDate.getDay(); // Verkrijg de dag van de week (0 = zondag, 1 = maandag, etc.)
+
+    // Pas de datum aan zodat het de maandag van dezelfde week wordt
+    const diff = startDate.getDate() - dayOfWeek + (dayOfWeek == 0 ? -6 : 1); // Als het zondag is (dayOfWeek == 0), gaan we naar vorige maandag
+    startDate.setDate(diff);
+
+    // Genereer de datums voor de volledige week
+    const weekDates: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const currentDay = new Date(startDate);  // Maak een kopie van de startdatum
+      currentDay.setDate(startDate.getDate() + i);  // Voeg de dagen van de week toe
+      weekDates.push(currentDay);
+    }
+
+    this.days = weekDates;
+  }
+
+  searchAppointments(day: Date, hour: string) {
+    const targetHour = Number(hour.substring(0, 2));
+
+    return this.appointments.filter(appointment => {
+      const date = appointment.startDateTime instanceof Date
+        ? appointment.startDateTime
+        : new Date(appointment.startDateTime); // fallback als het nog een string is
+
+      return (
+        date.getFullYear() === day.getFullYear() &&
+        date.getMonth() === day.getMonth() &&
+        date.getDate() === day.getDate() &&
+        date.getHours() === targetHour
+      );
+    });
+  }
+
+
+  formatDateToISO(date: Date): string {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // maand is 0-based
+    const day = date.getDate().toString().padStart(2, '0');
+
+    return `${year}-${month}-${day}`;
+  }
+
+  emitAppointment($event: AppointmentDto) {
+    this.appointmentSelected.emit($event);
+  }
+
+  getISODate(date: Date) {
+    return date.toISOString();
+  }
+}
--- a/src/app/interceptors/auth-interceptor.ts
+++ b/src/app/interceptors/auth-interceptor.ts
@@ -1,16 +1,15 @@
 import {HttpInterceptorFn} from '@angular/common/http';
 import {inject} from '@angular/core';
-import {AuthService} from '../services/auth.service';
+import {UserService} from '../services/user.service';

 const excludedUrls = ['/auth/login'];

 export const AuthInterceptor: HttpInterceptorFn = (req, next) => {
-  const authService = inject(AuthService);
-  const token = authService.getToken();
-
+  const userService = inject(UserService);
  if (excludedUrls.some(url => req.url.includes(url))) {
    return next(req);
  }
+  const token: string | null = userService.userValue.token ?? null;

  if (token) {
    const cloned = req.clone({
--- a/src/app/models/app-user-dto.ts
+++ b/src/app/models/app-user-dto.ts
@@ -0,0 +1,29 @@
+export class AppUserDto {
+  id: number;
+  username: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  token: string;
+  companies: UserCompanyDTO[];
+}
+
+export interface CompanyDTO {
+  id: number;
+  name: string;
+  email: string;
+  address: string;
+  postalCode: string;
+  city: string;
+  imgHref: string;
+}
+
+export type AccessLevel = 'READ_ONLY' | 'USER';
+
+export interface UserCompanyDTO {
+  id: string;
+  accessLevel: AccessLevel;
+  company: CompanyDTO;
+}
+
--- a/src/app/models/appointment-dto.ts
+++ b/src/app/models/appointment-dto.ts
@@ -0,0 +1,24 @@
+import {Customer} from './customer';
+import {CompanyDTO} from './app-user-dto';
+
+export class AppointmentDto {
+  id: string;
+  title: string;
+  description: string;
+  startDateTime: Date;
+  endDateTime: Date;
+  durationInMinutes: number;
+  customer: Customer;
+  company: CompanyDTO;
+
+  constructor(title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer) {
+    this.title = title;
+    this.description = description;
+    this.startDateTime = startDateTime;
+    this.endDateTime = endDateTime;
+    this.customer = customer;
+
+    this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
+  }
+
+}
--- a/src/app/models/appointment.ts
+++ b/src/app/models/appointment.ts
@@ -4,26 +4,20 @@ export class Appointment {
  id: string;
  title: string;
  description: string;
-  startDate: Date;
-  startHour: number;
-  startMinute: number;
-  endHour: number;
-  endMinute: number;
+  startDateTime: Date;
+  endDateTime: Date;
  durationInMinutes: number;
  customer: Customer;

-  constructor(title: string, description: string, startHour: number, startMinute: number, endHour: number, endMinute: number, date: Date, customer: Customer) {
+  constructor(id: string, title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer) {
+    this.id = id;
    this.title = title;
    this.description = description;
-    this.startHour = startHour;
-    this.startMinute = startMinute;
-    this.endHour = endHour;
-    this.endMinute = endMinute;
-    this.startDate = date;
+    this.startDateTime = startDateTime;
+    this.endDateTime = endDateTime;
    this.customer = customer;

-    // Bereken de totale duur in minuten
-    this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
+    this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
  }

 }
--- a/src/app/models/company.ts
+++ b/src/app/models/company.ts
@@ -0,0 +1,9 @@
+export class Company {
+  id: number;
+  name: string;
+  email: string;
+  img_href: string;
+  address: string;
+  postal_code: string;
+  city: string;
+}
--- a/src/app/models/customer.ts
+++ b/src/app/models/customer.ts
@@ -3,11 +3,13 @@ export class Customer {
  firstName: string;
  lastName: string;
  email: string;
+  phone: string;


-  constructor(firstName: string, lastName: string, email: string) {
+  constructor(firstName: string, lastName: string, email: string, phone: string) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
+    this.phone = phone
  }
 }
--- a/src/app/models/invite-entity.ts
+++ b/src/app/models/invite-entity.ts
@@ -0,0 +1,9 @@
+export class InviteEntity {
+    id: string;
+    company_id: number;
+    email: string;
+    token: string;
+    expiresAt: string; // ISO date string
+    used: boolean;
+    createdAt: string; // ISO date string
+}
--- a/src/app/models/user-dto.ts
+++ b/src/app/models/user-dto.ts
@@ -1,9 +0,0 @@
-export class UserDto {
-  username: string
-  fullName: string
-  email: string
-  token: string
-
-  constructor() {
-  }
-}
--- a/src/app/pages/agenda-delen/agenda-delen.component.html
+++ b/src/app/pages/agenda-delen/agenda-delen.component.html
@@ -0,0 +1,30 @@
+<div class="share-wrapper">
+  <h1>Deel je agenda</h1>
+
+  <p>Kies het bedrijf waarvoor je de agenda wilt delen:</p>
+
+  <select [formControl]="companyForm" class="custom-select">
+    <option *ngFor="let item of companies" [value]="item.id">{{ item.name }}</option>
+  </select>
+
+  <div class="link-section">
+    <div class="share-media">
+      <h3>
+        Uitnodigen via email:
+      </h3>
+      <div class="link-box">
+        <input placeholder="Email" type="email" [formControl]="email"/>
+        <button tuiButton size="m" appearance="primary" [disabled]="email.invalid" (click)="sendInvite()">
+          Versturen
+        </button>
+      </div>
+    </div>
+    <br>
+
+    <p class="label" *ngIf="shareLink">Kopieerbare link:</p>
+    <div class="link-box" *ngIf="shareLink">
+      <input type="text" [value]="shareLink" readonly/>
+      <button tuiButton size="m" iconStart="@tui.copy" appearance="secondary" (click)="copyLink()"></button>
+    </div>
+  </div>
+</div>
--- a/src/app/pages/agenda-delen/agenda-delen.component.scss
+++ b/src/app/pages/agenda-delen/agenda-delen.component.scss
@@ -0,0 +1,139 @@
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  90% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+}
+
+.share-wrapper {
+  max-width: 500px;
+  margin: 2rem auto;
+  padding: 2rem;
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', sans-serif;
+
+  h1 {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  p {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .custom-select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    appearance: none;
+    background-color: #f9f9f9;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 1rem;
+    cursor: pointer;
+    transition: border-color 0.3s, box-shadow 0.3s;
+
+    &:focus {
+      outline: none;
+      border-color: #007bff;
+      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+    }
+  }
+
+  .link-section {
+    margin-top: 2rem;
+
+    .label {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    .link-box {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      input[type="text"], input[type="email"] {
+        flex: 1;
+        padding: 0.6rem 1rem;
+        border: 1px solid #ccc;
+        border-radius: 0.5rem;
+        font-size: 0.95rem;
+        background-color: #f5f5f5;
+        transition: box-shadow 0.3s;
+
+        &:focus {
+          outline: none;
+          box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.25);
+        }
+      }
+
+      .copy-button {
+        background: #eee;
+        border: none;
+        border-radius: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        font-size: 1.2rem;
+        cursor: pointer;
+        transition: background 0.2s, transform 0.1s;
+
+        &:hover {
+          background: #ddd;
+        }
+
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+
+    .copied-msg {
+      margin-top: 0.5rem;
+      color: #28a745;
+      font-weight: 600;
+      animation: fadeInOut 2.5s ease-in-out forwards;
+    }
+  }
+}
+
+a{
+  text-decoration: none;
+  color: white;
+}
+
+.share-wrapper{
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.share-media button {
+  margin-right: 8px;
+}
--- a/src/app/pages/agenda-delen/agenda-delen.component.ts
+++ b/src/app/pages/agenda-delen/agenda-delen.component.ts
@@ -0,0 +1,101 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {TuiSelectModule} from '@taiga-ui/legacy';
+import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiAlertService, TuiButton} from '@taiga-ui/core';
+import {NgForOf, NgIf} from '@angular/common';
+import {Company} from '../../models/company';
+import {CompanyService} from '../../services/company.service';
+import {AgendaService} from '../../services/agenda.service';
+import {Router} from '@angular/router';
+import {InviteEntity} from '../../models/invite-entity';
+import {UserService} from '../../services/user.service';
+import {CompanyDTO} from '../../models/app-user-dto';
+
+@Component({
+  selector: 'app-agenda-delen',
+  imports: [
+    TuiSelectModule,
+    FormsModule,
+    NgIf,
+    FormsModule,
+    NgForOf,
+    ReactiveFormsModule,
+    TuiButton,
+  ],
+  templateUrl: './agenda-delen.component.html',
+  styleUrl: './agenda-delen.component.scss'
+})
+export class AgendaDelenComponent implements OnInit {
+  companies: CompanyDTO[];
+  selectedCompany: CompanyDTO | null = null;
+  companyForm: FormControl;
+  email: FormControl;
+  invite: InviteEntity;
+
+  constructor(@Inject(TuiAlertService) private readonly alerts: TuiAlertService, private companyService: CompanyService, private agendaService: AgendaService, private router: Router, private userService: UserService) {
+  }
+
+  ngOnInit(): void {
+    this.companyForm = new FormControl('');
+    this.email = new FormControl('', [
+      Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/),
+      Validators.required]);
+    this.companyForm.valueChanges.subscribe(
+      companyToSelect => {
+        console.log(companyToSelect);
+        this.selectCompany(companyToSelect);
+
+      }
+    )
+    this.email.valueChanges.subscribe(
+      () => {
+        if (this.email.valid) {
+          this.createInvite()
+        }
+      }
+    )
+    this.companies = this.userService.userValue.companies.map(a => a.company)
+    this.selectedCompany = this.companies[0]
+    this.companyForm.setValue(this.selectedCompany.id);
+  }
+
+  get shareLink(): string | null {
+    if (!this.invite) return null;
+    return `${window.location.origin}/#/home/agenda-invite?token=${this.invite.token}`;
+  }
+
+  copyLink(): void {
+    if (this.shareLink) {
+      navigator.clipboard.writeText(this.shareLink);
+      this.alerts.open('Link gekopieerd naar klembord.').subscribe();
+    }
+  }
+
+  selectCompany(companyId: number): void {
+    console.log(companyId);
+    this.selectedCompany = this.companies.find(company =>
+      company.id == companyId
+    );
+    console.log(this.selectedCompany);
+  }
+
+  sendInvite(): void {
+    this.agendaService.sendInvite(this.shareLink, this.email.value).subscribe(
+      () => {
+        console.log('Successfully sent invite')
+        this.router.navigate(['/home/agenda']);
+        this.alerts.open(`Email is verstuurd naar: <strong>${this.email.value}`).subscribe();
+      }
+    )
+  }
+
+  createInvite(): void {
+    this.agendaService.createInvite(this.selectedCompany.id, this.email.value).subscribe(
+      response => {
+        this.invite = response
+      }
+    )
+  }
+
+  protected readonly encodeURIComponent = encodeURIComponent;
+}
--- a/src/app/pages/agenda-invite/agenda-invite.component.html
+++ b/src/app/pages/agenda-invite/agenda-invite.component.html
@@ -0,0 +1,31 @@
+<div class="invite-wrapper" *ngIf="company">
+  <h1>Agenda-uitnodiging ontvangen</h1>
+
+  <p *ngIf="agendaName">
+    Je bent uitgenodigd om toegang te krijgen tot de agenda:
+    <br>
+    <strong>{{ company.name }}</strong>
+  </p>
+
+  <p *ngIf="!company.name">
+    Je bent uitgenodigd om toegang te krijgen tot een agenda. Wil je deze uitnodiging accepteren?
+  </p>
+
+  <button
+    tuiButton
+    appearance="primary"
+    size="m"
+    (click)="acceptInvite()"
+  >
+    Uitnodiging accepteren
+  </button>
+</div>
+<div class="invite-wrapper" *ngIf="inviteExpired">
+  <h1>Agenda-uitnodiging verlopen</h1>
+
+  <p class="error-message">
+    Deze uitnodiging is niet meer geldig. Mogelijk is de geldigheidsduur verstreken of is de uitnodiging ingetrokken.
+  </p>
+
+</div>
+
--- a/src/app/pages/agenda-invite/agenda-invite.component.scss
+++ b/src/app/pages/agenda-invite/agenda-invite.component.scss
@@ -0,0 +1,64 @@
+.invite-wrapper {
+  max-width: 500px;
+  margin: 4rem auto;
+  padding: 2rem;
+  border-radius: 1rem;
+  background-color: #ffffff;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
+  text-align: center;
+  font-family: 'Inter', sans-serif;
+
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    color: #1f2937; // donkergrijs
+  }
+
+  p {
+    font-size: 1rem;
+    color: #4b5563; // medium grijs
+    margin-bottom: 2rem;
+
+    strong {
+      color: #111827; // bijna zwart
+    }
+  }
+
+  button {
+    font-size: 1rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.75rem;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #5b6dfb; // iets donkerder blauw
+    }
+  }
+}
+
+.invite-wrapper {
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.error-message {
+  color: #d9534f;
+  background-color: #fcebea;
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
--- a/src/app/pages/agenda-invite/agenda-invite.component.ts
+++ b/src/app/pages/agenda-invite/agenda-invite.component.ts
@@ -0,0 +1,56 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {TuiAlertService, TuiButton} from '@taiga-ui/core';
+import {NgIf} from '@angular/common';
+import {CompanyService} from '../../services/company.service';
+import {Company} from '../../models/company';
+import {AgendaService} from '../../services/agenda.service';
+import {InviteEntity} from '../../models/invite-entity';
+import {CompanyDTO} from '../../models/app-user-dto';
+import {UserService} from '../../services/user.service';
+
+@Component({
+  selector: 'app-agenda-invite',
+  imports: [
+    TuiButton,
+    NgIf
+  ],
+  templateUrl: './agenda-invite.component.html',
+  styleUrl: './agenda-invite.component.scss'
+})
+export class AgendaInviteComponent implements OnInit {
+  token: string = '';
+  agendaName: string = '...';
+  company: CompanyDTO;
+  inviteEntity: InviteEntity;
+  inviteExpired: boolean = false;
+
+  constructor(private route: ActivatedRoute, private router: Router, private companyService: CompanyService, private agendaService: AgendaService, private userService: UserService, private alerts: TuiAlertService) {
+  }
+
+  ngOnInit(): void {
+    this.token = this.route.snapshot.queryParamMap.get('token');
+    this.agendaService.verifyInvite(this.token).subscribe({
+      next: (invite: InviteEntity) => {
+        this.inviteEntity = invite
+        this.companyService.getCompany(invite.company_id).subscribe(companyResponse => {
+          this.company = companyResponse;
+        })
+      },
+      error: (error) => {
+        if (error.status === 410) {
+          this.inviteExpired = true;
+        }
+      },
+    });
+  }
+
+  acceptInvite(): void {
+    this.companyService.linkCompany(this.userService.userValue.id, this.inviteEntity.token).subscribe(
+      () => {
+        this.alerts.open(`Agenda ${this.company.name} is toegevoegd.`).subscribe();
+        this.router.navigate(['home/agenda']);
+      }
+    )
+  }
+}
--- a/src/app/pages/agenda/agenda.component.html
+++ b/src/app/pages/agenda/agenda.component.html
@@ -1,28 +1,68 @@
 <div class="container">
  <div class="heading">
    <button
+      *ngIf="view == 'day'"
      appearance="primary"
      iconStart="@tui.chevron-left"
      size="m"
      tuiIconButton
+      id="vorigeDag"
      (click)="previousDay()"
      type="button">
    </button>
-    <h1 class="date" (click)="toggleCalendar()">{{ getDate() }}</h1>
    <button
+      *ngIf="view == 'week'"
+      appearance="primary"
+      iconStart="@tui.chevron-left"
+      size="m"
+      tuiIconButton
+      id="vorigeWeek"
+      (click)="previousWeek()"
+      type="button">
+    </button>
+    <h1 *ngIf="view == 'week'" class="date" id="geselecteerdeWeek" (click)="toggleCalendar()">Week {{ getWeek() }}
+      <tui-icon
+        *ngIf="!showCalendar"
+        icon="@tui.chevron-down"
+        [style.color]="'var(--tui-background-accent-1)'"/>
+      <tui-icon
+        *ngIf="showCalendar"
+        icon="@tui.chevron-up"
+        [style.color]="'var(--tui-background-accent-1)'"/>
+    </h1>
+    <h1 *ngIf="view == 'day'" class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}
+      <tui-icon
+        *ngIf="!showCalendar"
+        icon="@tui.chevron-down"
+        [style.color]="'var(--tui-background-accent-1)'"/>
+      <tui-icon
+        *ngIf="showCalendar"
+        icon="@tui.chevron-up"
+        [style.color]="'var(--tui-background-accent-1)'"/>
+    </h1>
+    <button
+      *ngIf="view == 'day'"
      appearance="primary"
      iconStart="@tui.chevron-right"
      size="m"
      tuiIconButton
+      id="volgendeDag"
      (click)="nextDay()"
      type="button">
    </button>
+    <button
+      *ngIf="view == 'week'"
+      appearance="primary"
+      iconStart="@tui.chevron-right"
+      size="m"
+      tuiIconButton
+      id="volgendeWeek"
+      (click)="nextWeek()"
+      type="button">
+    </button>
  </div>
  <div class="calendar" *ngIf="showCalendar">
-    <tui-calendar
-      [value]="value"
-      (dayClick)="onDayClick($event)"
-    />
+    <datepicker (onSelectedDate)="onDayClick($event)" [currentDate]="selectedDate"></datepicker>
  </div>
  <div class="toolbar">
    <button
@@ -30,6 +70,7 @@
      appearance="secondary"
      size="m"
      tuiButton
+      id="vandaag"
      (click)="setToday()"
      type="button">
      Vandaag
@@ -38,7 +79,8 @@
      appearance="secondary"
      size="m"
      tuiButton
-      (click)="isModalOpen = true"
+      id="afspraakMaken"
+      (click)="showNewItem = true"
      type="button">
      <tui-icon
        icon="@tui.plus"
@@ -46,14 +88,35 @@
      />
      Afspraak maken
    </button>
+    <button
+      appearance="secondary"
+      size="m"
+      tuiButton
+      id="instellingen"
+      (click)="openSettings()"
+      [tuiDropdown]="dropdownContent"
+      [tuiDropdownManual]="open"
+      type="button">
+      <tui-icon
+        icon="@tui.settings"
+        [style.height.rem]="1">
+      </tui-icon>
+    </button>
+    <ng-template #dropdownContent>
+      <div class="dropdown">
+        <dropdown-content (close)="open = false" (view)="setView($event)" [currentView]="view"
+                          (changeAgenda)="toggleCalendarChange()"></dropdown-content>
+      </div>
+    </ng-template>
  </div>
  <div class="content">
-    <div class="agenda-container">
+    <div *ngIf="view == 'day'" class="agenda-container">
      <div *ngFor="let hour of timeSlots" class="time-slot">
        <span class="time">{{ hour.toString().padStart(2, '0') }}:00</span>

        <div *ngFor="let appointment of getAppointmentsForHour(hour)"
             class="appointment"
+             [attr.id]="'afspraak-'+appointment.id"
             (click)="selectAppointment(appointment)"
             [ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
             [ngStyle]="getInlineStyles(appointment)">
@@ -64,16 +127,19 @@
            {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
          <span class="appointment-time">
            <tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
-            {{ getFormattedTime(appointment.startHour, appointment.startMinute) }}
-            - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+            {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
+            - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
          </span>
        </div>
      </div>
    </div>
+
+    <app-week-view *ngIf="view == 'week'" [selectedDate]="selectedDate"
+                   (appointmentSelected)="selectedAppointment = $event"></app-week-view>
  </div>
 </div>

-<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="isModalOpen">
+<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="showNewItem">
  <app-new-item [appointments]="appointments" [appointmentForm]="appointmentForm"
                (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
 </app-modal>
@@ -83,3 +149,15 @@
  <app-details [appointment]="selectedAppointment" (appointmentDeleted)="appointmentIsDeleted($event)"
               (appointmentEdited)="appointmentIsEdited($event)"></app-details>
 </app-modal>
+
+<app-modal title="Agenda wisselen" *ngIf="showCalendarChange" (close)="toggleCalendarChange()">
+  <h3>Beschikbare agenda's:</h3>
+  <div *ngFor="let companyDto of userService.userValue.companies" class="appointment-option">
+    <input
+      tuiCheckbox
+      type="checkbox"
+      [ngModel]="true"
+    />
+    <label>{{ companyDto.company.name }} <span *ngIf="companyDto.accessLevel == 'READ_ONLY'">[Alleen inzien]</span></label>
+  </div>
+</app-modal>
--- a/src/app/pages/agenda/agenda.component.scss
+++ b/src/app/pages/agenda/agenda.component.scss
@@ -139,3 +139,107 @@ strong, p {
 .date:hover {
  text-decoration: underline;
 }
+
+.dropdown {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.calendar {
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 600px) {
+  .container {
+    padding: 12px;
+  }
+
+  .heading {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  .heading h1.date {
+    font-size: 1rem;
+    text-align: center;
+    flex: 1;
+    margin: 0 8px;
+  }
+
+  .heading button {
+    flex-shrink: 0;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .toolbar button {
+    margin-left: 0;
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .calendar {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .date {
+    font-size: 1.2rem;
+  }
+
+  .time-slot {
+    font-size: 14px;
+  }
+
+  .appointment {
+    left: 60px;
+    width: calc(100% - 80px);
+    font-size: 14px;
+  }
+
+  .appointment-time {
+    font-size: 12px;
+    display: block;
+  }
+
+  .content {
+    max-height: 70vh; /* Of pas dit aan naar wat past bij jouw UI */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .agenda-container {
+    height: auto; /* Laat het alle tijdslots renderen op vaste hoogte */
+  }
+}
+
+.appointment-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  label {
+    font-weight: bold;
+    font-size: 14px;
+  }
+}
--- a/src/app/pages/agenda/agenda.component.ts
+++ b/src/app/pages/agenda/agenda.component.ts
@@ -1,9 +1,8 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, inject, Input, OnInit, ViewChild} from '@angular/core';
 import {CommonModule, NgFor, NgIf} from '@angular/common';
-import {TuiAlertService, TuiButton, TuiCalendar, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
-import {Appointment} from '../../models/appointment';
+import {TuiAlertService, TuiButton, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
 import {ModalComponent} from '../../components/modal/modal.component';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {
  TuiInputDateModule,
  TuiInputModule,
@@ -11,27 +10,33 @@ 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 {DropdownContentComponent} from '../../components/dropdown-content/dropdown-content.component';
+import {AppointmentDto} from '../../models/appointment-dto';
+import {WeekViewComponent} from '../../components/week-view/week-view.component';
+import {DatepickerComponent} from '../../components/datepicker/datepicker.component';
+import {TuiCheckbox} from '@taiga-ui/kit';
+import {UserService} from '../../services/user.service';

@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, NewItemComponent, DropdownContentComponent, WeekViewComponent, DatepickerComponent, TuiCheckbox, FormsModule],
  templateUrl: './agenda.component.html',
  providers: [tuiDateFormatProvider({separator: '-'}), AppointmentService],
  styleUrl: './agenda.component.scss'
 })
 export class AgendaComponent implements OnInit {

-  constructor(private appointmentService: AppointmentService) {
+  constructor(private appointmentService: AppointmentService, protected userService: UserService) {
  }

  ngOnInit(): void {
@@ -39,14 +44,18 @@ export class AgendaComponent implements OnInit {
  }

  timeSlots: number[] = Array.from({length: 24}, (_, i) => i); // 24 uren
-  appointments: Appointment[] = [];
-  isModalOpen = false
+  appointments: AppointmentDto[] = [];
+  showNewItem = false
  today = new Date()
  selectedDate = new Date()
  waiting: boolean = false;
-  selectedAppointment: Appointment;
+  selectedAppointment: AppointmentDto;
  protected value: TuiDay | null = null;
  showCalendar: boolean = false;
+  showCalendarChange: boolean = false;
+  open = false
+  @Input() view: 'day' | 'week' | 'month' = 'day'
+  @ViewChild(WeekViewComponent) childComponent!: WeekViewComponent;

  private readonly alerts = inject(TuiAlertService);
  protected appointmentForm = new FormGroup({
@@ -60,7 +69,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()
  }
@@ -72,9 +81,13 @@ export class AgendaComponent implements OnInit {
  }

  getAppointmentsForHour(hour: number) {
-    return this.appointments.filter(appointment => appointment.startHour === hour);
+    return this.appointments.filter(appointment => {
+      const startDateTime = new Date(appointment.startDateTime);
+      return startDateTime.getHours() === hour;
+    });
  }

+
  getDate(): string {
    const date = this.selectedDate

@@ -108,6 +121,18 @@ export class AgendaComponent implements OnInit {
    this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
  }

+  nextWeek() {
+    this.selectedDate.setDate(this.selectedDate.getDate() + 7);
+    this.childComponent.getWeekDates()
+    this.childComponent.getAppointments()
+  }
+
+  previousWeek() {
+    this.selectedDate.setDate(this.selectedDate.getDate() - 7);
+    this.childComponent.getWeekDates()
+    this.childComponent.getAppointments()
+  }
+
  getHours() {
    let hours = this.today.getHours()
    if (hours > 23) {
@@ -136,11 +161,20 @@ export class AgendaComponent implements OnInit {
    return endTime;
  }

+  setView(view: 'day' | 'week' | 'month') {
+    this.view = view
+  }

  setToday() {
    this.selectedDate = new Date()
-    this.getAppointmentsByDate(this.selectedDate);
-    this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
+    if (this.view === 'day') {
+      this.getAppointmentsByDate(this.selectedDate);
+      this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
+    } else if (this.view === 'week') {
+      this.childComponent.setSelectedDate(this.selectedDate);
+      this.childComponent.getWeekDates()
+      this.childComponent.getAppointments()
+    }
  }

  getAppointmentsByDate(date: Date) {
@@ -149,11 +183,11 @@ export class AgendaComponent implements OnInit {
    })
  }

-  getInlineStyles(appointment: Appointment): { [key: string]: string } {
+  getInlineStyles(appointment: AppointmentDto): { [key: string]: string } {
    return {
      '--duration': `${appointment.durationInMinutes}`,
-      '--start-minute': `${appointment.startMinute}`,
-      'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
+      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
+      'top': `${appointment.startDateTime.getMinutes()}px`, // Startpositie binnen het uur
      'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren
    };
  }
@@ -162,36 +196,45 @@ export class AgendaComponent implements OnInit {
    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
  }

-  getAppointmentHeight(appointment: Appointment): number {
-    const startInMinutes = (appointment.startHour * 60) + appointment.startMinute;
-    const endInMinutes = (appointment.endHour * 60) + appointment.endMinute;
+  getAppointmentHeight(appointment: AppointmentDto): number {
+    const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
+    const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes();
    return (endInMinutes - startInMinutes); // 50px per uur
  }

-  selectAppointment(appointment: Appointment) {
+  selectAppointment(appointment: AppointmentDto) {
    this.selectedAppointment = appointment;
  }

  protected readonly DateFormatter = DateFormatter;

-  onDayClick(day: TuiDay) {
-    this.value = day;
-    this.selectedDate = new Date(day.year, day.month, day.day);
-    this.getAppointmentsByDate(this.selectedDate);
-    this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
+  onDayClick(day: Date) {
+    this.selectedDate = day
+
    this.toggleCalendar()
+    if (this.view === 'day') {
+      this.getAppointmentsByDate(this.selectedDate);
+      this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
+
+    } else if (this.view === 'week') {
+      this.childComponent.getWeekDates()
+    }
  }

  toggleCalendar() {
    this.showCalendar = !this.showCalendar
  }

+  toggleCalendarChange() {
+    this.showCalendarChange = !this.showCalendarChange
+  }
+
  closeNewItemModal() {
-    this.isModalOpen = false
+    this.showNewItem = false
    this.resetForms()
  }

-  appointmentIsDeleted(appointment: Appointment) {
+  appointmentIsDeleted(appointment: AppointmentDto) {
    this.selectedAppointment = undefined;
    this.alerts
      .open(`Afspraak <strong>${appointment.title}</strong> is verwijderd.`)
@@ -199,8 +242,49 @@ export class AgendaComponent implements OnInit {
    this.getAppointmentsByDate(this.selectedDate);
  }

-  appointmentIsEdited($event: Appointment) {
+  appointmentIsEdited($event: AppointmentDto) {
    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
+  }
+
+  getWeek() {
+
+    const tempDate = new Date(this.selectedDate.getTime());
+    tempDate.setHours(0, 0, 0, 0);
+
+    // Zet de datum naar de donderdag van de week
+    tempDate.setDate(tempDate.getDate() + (4 - (tempDate.getDay() || 7)));// getDay() kan 0-6 zijn, waarbij 0 zondag is
+    const yearStart = new Date(tempDate.getFullYear(), 0, 1);
+    return Math.ceil((((tempDate.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+  }
 }

--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -4,37 +4,35 @@
 </div>
 <header>
  <div class="navbar">
-    <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid">
-    <ul>
-      <li><a routerLink="/home/agenda" routerLinkActive="active">Agenda</a></li>
-      <li><a routerLink="/home/klanten" routerLinkActive="active">Klanten</a></li>
-    </ul>
-    <hr/>
-    <button
-      tuiChevron
-      type="button"
-      [tuiDropdown]="dropdownContent"
-      [tuiDropdownManual]="open"
-      [tuiObscuredEnabled]="open"
-      (click)="onClick()"
-      (tuiActiveZoneChange)="onActiveZone($event)"
-      (tuiObscured)="onObscured($event)"
-    >
-      <tui-avatar src="{{getInitials()}}"/>
-      <ng-template #dropdownContent>
-        <div class="dropdown">
-          <h3>{{ fullName }}</h3>
-          <button
-            size="m"
-            tuiButton
-            type="button"
-            (click)="logout()"
-          >
-            Uitloggen
-          </button>
-        </div>
-      </ng-template>
-    </button>
+    <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid" />
+    <button class="hamburger" (click)="menuOpen = !menuOpen">&#9776;</button>
+    <div class="nav-wrapper" [ngClass]="{ 'open': menuOpen }">
+      <ul>
+        <li><a routerLink="/home/agenda" routerLinkActive="active" (click)="menuOpen = false" id="agenda">Agenda</a></li>
+        <li><a routerLink="/home/klanten" routerLinkActive="active" (click)="menuOpen = false" id="klanten">Klanten</a></li>
+      </ul>
+
+      <button
+        tuiChevron
+        type="button"
+        id="userMenu"
+        [tuiDropdown]="dropdownContent"
+        [tuiDropdownManual]="open"
+        [tuiObscuredEnabled]="open"
+        (click)="onClick(); $event.stopPropagation()"
+        (tuiActiveZoneChange)="onActiveZone($event)"
+        (tuiObscured)="onObscured($event)">
+        <tui-avatar [src]="getInitials()"></tui-avatar>
+      </button>
+    </div>
+
+    <ng-template #dropdownContent>
+      <div class="dropdown">
+        <h3>{{ fullName }}</h3>
+        <h4>{{ userService.currentCompany.name }}</h4>
+        <button tuiButton size="m" type="button" (click)="logout()">Uitloggen</button>
+      </div>
+    </ng-template>
  </div>
 </header>

--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -1,62 +1,106 @@
-.navbar {
-  background-color: #f8f9fa;
-  display: flex
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-
-ul {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  list-style-type: none;
-  align-items: center;
-}
-
-li {
-  margin: 0 10px;
-}
-
-a {
-  text-decoration: none;
-  color: black;
-  font-size: 16px;
-}
-
-img {
-  display: block;
-  max-width: 230px;
-  max-height: 95px;
-  width: auto;
-  height: auto;
-}
-
-hr {
-  clear: both;
-  visibility: hidden;
-}
-
-tui-avatar {
-  margin-right: 32px;
-  cursor: pointer;
-}
-
-.active {
+.active{
  font-weight: bold;
 }

-.dropdown {
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
-  padding: 0.25rem 0.75rem;
-  margin-left: 4px;
-  margin-right: 4px;
-  margin-bottom: 8px;
-}
+.navbar {
+  background-color: #f8f9fa;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;

-.t-content {
-  margin-right: 24px;
-}
+  > img {
+    max-height: 50px;
+    width: auto;
+    margin-right: 24px;
+  }

-button {
-  background: transparent;
-  border: none;
+  .hamburger {
+    font-size: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: none;
+    margin-left: auto;
+  }
+
+  .nav-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: space-between;
+
+    ul {
+      display: flex;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li a {
+        text-decoration: none;
+        color: black;
+        font-size: 16px;
+        padding: 0 8px;
+      }
+    }
+
+    button#userMenu {
+      background: none;
+      border: none;
+      margin-left: 16px;
+    }
+  }
+
+  .dropdown {
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.75rem;
+    min-width: 200px;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .hamburger {
+      display: block;
+      align-self: flex-end;
+    }
+
+    .nav-wrapper {
+      display: none;
+      width: 100%;
+      flex-direction: column;
+      margin-top: 10px;
+    }
+
+    .nav-wrapper.open {
+      display: flex;
+      animation: slideDown 0.3s ease-out;
+    }
+
+    ul {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    ul li {
+      padding: 10px 0;
+    }
+
+    button#userMenu {
+      align-self: flex-end;
+      margin-right: 16px;
+      margin-top: 10px;
+    }
+  }
 }
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,24 +1,31 @@
 import {Component, OnInit} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Router, RouterLink, RouterLinkActive, RouterModule} from '@angular/router';
 import {TuiAvatar, TuiChevron,} from '@taiga-ui/kit';
 import {AuthService} from '../../services/auth.service';
-import {User} from '../../models/user';
 import {TuiButton, TuiDropdown} from '@taiga-ui/core';
 import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
+import {environment} from '../../../environments/environment';
+import {TuiSelectModule} from '@taiga-ui/legacy';
+import {UserService} from '../../services/user.service';
+import {AppUserDto, CompanyDTO} from '../../models/app-user-dto';
+import {NgClass} from '@angular/common';

@Component({
  selector: 'app-home',
-  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron],
+  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron, TuiSelectModule, ReactiveFormsModule, NgClass],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
 })
 export class HomeComponent implements OnInit {
-  user: User
+  user: AppUserDto;
  fullName: string
+  companies: CompanyDTO[];
+  menuOpen = false;
+

  getInitials(): string {
-    this.user = this.authService.getUserInfo();
+    this.user = this.userService.userValue
    this.fullName = this.user.firstName + ' ' + this.user.lastName;
    return this.fullName.split(' ').map((n) => n[0]).join('').substring(0, 2);
  }
@@ -39,17 +46,24 @@ export class HomeComponent implements OnInit {
    this.open = active && this.open;
  }

-  constructor(private authService: AuthService, private router: Router) {
+
+  constructor(private authService: AuthService, private router: Router, protected userService: UserService) {
  }

  ngOnInit(): void {
-    if (!this.authService.isAuthenticated()) {
+    if (!this.userService.userValue) {
      this.router.navigate(['login']);
+    } else {
+      this.companies = this.userService.userValue.companies.map(a => a.company)
+      this.userService.currentCompany = this.companies[0];
    }
+
  }

  logout() {
-    this.authService.logout();
+    this.userService.clearUser();
    this.router.navigate(['login']);
  }
+
+  protected readonly environment = environment;
 }
--- a/src/app/pages/klanten/klanten.component.html
+++ b/src/app/pages/klanten/klanten.component.html
@@ -8,6 +8,7 @@
        size="m"
        tuiButton
        appearance="secondary"
+        id="klantToevoegen"
        type="button"
        (click)="toggleCustomerModal()"
      >
@@ -18,81 +19,27 @@
        Klant toevoegen
      </button>
    </div>
-    <table class="styled-table">
-      <thead>
-      <tr>
-        <th>Naam</th>
-        <th>Email</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)">
-        <td>{{ customer.firstName }} {{ customer.lastName }}</td>
-        <td>{{ customer.email }}</td>
-      </tr>
-      </tbody>
-    </table>
-
+    <div class="results">
+      <table class="styled-table">
+        <thead>
+        <tr>
+          <th>Naam</th>
+          <th>Email</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)" [id]="customer.id">
+          <td>{{ customer.firstName }} {{ customer.lastName }}</td>
+          <td>{{ customer.email }}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
  </div>
 </div>

 <app-modal title="Nieuwe klant toevoegen" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"
-      />
-    </tui-input>
-    <br>
-
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"
-      />
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"
-      />
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      (click)="saveCustomer()"
-      [disabled]="customerForm.invalid"
-      type="button">
-      <tui-icon
-        icon="@tui.save"
-        [style.height.rem]="1"
-      />
-      Opslaan
-    </button>
-  </form>
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
 </app-modal>

 <app-modal title="Klant bekijken" *ngIf="selectedCustomer != undefined" (close)="selectedCustomer = undefined">
--- a/src/app/pages/klanten/klanten.component.scss
+++ b/src/app/pages/klanten/klanten.component.scss
@@ -15,6 +15,7 @@ h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
+  overflow-y: unset;
 }

 .styled-table {
@@ -25,7 +26,7 @@ h2 {
  text-align: left; /* Tekst uitlijning */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Zachte schaduw */
  border-radius: 10px; /* Afgeronde hoeken */
-  overflow: hidden; /* Hoeken correct afronden */
+  overflow: scroll; /* Hoeken correct afronden */
 }

 .styled-table thead {
@@ -39,6 +40,12 @@ h2 {
  padding: 12px 15px; /* Ruimte binnen de cellen */
 }

+.styled-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 .styled-table tbody tr {
  border-bottom: 1px solid #dddddd; /* Lichte scheidingslijn */
 }
@@ -60,6 +67,7 @@ h2 {
 .toolbar {
  button {
    margin-left: 8px;
+    position: sticky;
  }

  margin-bottom: 12px;
@@ -69,4 +77,7 @@ h2 {

 }

+.results{
+  overflow-y: scroll;
+}

--- a/src/app/pages/klanten/klanten.component.ts
+++ b/src/app/pages/klanten/klanten.component.ts
@@ -7,6 +7,7 @@ import {ModalComponent} from '../../components/modal/modal.component';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {TuiInputCopyModule, TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {CustomerDetailsComponent} from '../../components/customer-details/customer-details.component';
+import {NewCustomerComponent} from '../../components/new-customer/new-customer.component';

@Component({
  selector: 'app-klanten',
@@ -20,7 +21,8 @@ import {CustomerDetailsComponent} from '../../components/customer-details/custom
    TuiInputCopyModule,
    TuiInputModule,
    TuiTextfieldControllerModule,
-    CustomerDetailsComponent
+    CustomerDetailsComponent,
+    NewCustomerComponent
  ],
  templateUrl: './klanten.component.html',
  styleUrl: './klanten.component.scss'
@@ -48,15 +50,8 @@ export class KlantenComponent implements OnInit {
  }

  saveCustomer() {
-    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);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
+    this.showNewCustomer = false;
+    this.getCustomers()
  }

  getCustomers() {
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -6,18 +6,20 @@
      </header>
      <tui-textfield>
        <label tuiLabel>Gebruikersnaam</label>
-        <input formControlName="username" placeholder="Voer je gebruikersnaam in" tuiTextfield/>
+        <input formControlName="username" placeholder="Voer je gebruikersnaam in" id="username" tuiTextfield/>
      </tui-textfield>
      <tui-textfield>
        <label tuiLabel>Wachtwoord</label>
-        <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" tuiTextfield/>
+        <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" id="password" tuiTextfield/>
      </tui-textfield>
      <tui-error [error]="computedError"/>
      <footer>
-        <button tuiButton class="custom-button" type="submit" [disabled]="form.invalid" (click)="login()">
+        <button tuiButton class="custom-button" id="inloggen" type="submit" [disabled]="form.invalid" (click)="login()">
          Inloggen
        </button>
      </footer>
+<!--      <br>-->
+      <p>{{appVersion}}</p>
    </form>
  </div>
 </div>
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -10,6 +10,10 @@ tui-error {
  text-align: center;
 }

+p{
+  text-align: center;
+}
+
 .header {
  text-align: center;
  margin-bottom: 28px;
@@ -47,3 +51,10 @@ tui-error {
  );
  background-size: var(--s) calc(var(--s) * 0.577);
 }
+
+
+@media (max-width: 600px) {
+  .center-container {
+    padding: 0;
+  }
+}
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -4,9 +4,11 @@ import {Router} from '@angular/router';
 import {TuiAppearance, TuiButton, TuiError, TuiTextfield,} from '@taiga-ui/core';
 import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout';
 import {AuthService} from '../../services/auth.service';
-import {UserDto} from '../../models/user-dto';
+import {AppUserDto} from '../../models/app-user-dto';
 import {HttpErrorResponse} from '@angular/common/http';
 import {TuiValidationError} from '@taiga-ui/cdk';
+import {environment} from '../../../environments/environment';
+import {UserService} from '../../services/user.service';

@Component({
  selector: 'app-login',
@@ -26,6 +28,7 @@ import {TuiValidationError} from '@taiga-ui/cdk';
 export class LoginComponent {
  form: FormGroup;
  protected enabled = false;
+  appVersion = environment.appVersion;

  protected error = new TuiValidationError('Ongeldige gebruikersnaam of wachtwoord.');

@@ -33,7 +36,7 @@ export class LoginComponent {
    return this.enabled ? this.error : null;
  }

-  constructor(private router: Router, private authService: AuthService) {
+  constructor(private router: Router, private authService: AuthService, private userService: UserService) {
    this.form = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
@@ -42,9 +45,10 @@ export class LoginComponent {


  login() {
+    console.log('IM LOGGING IN')
    this.authService.login(this.form.get('username').value, this.form.get('password').value).subscribe({
-      next: (user: UserDto) => {
-        localStorage.setItem('token', user.token);
+      next: (user: AppUserDto) => {
+        this.userService.setUser(user);
        this.router.navigate(['/home/agenda']);
      },
      error: (err: HttpErrorResponse) => {
--- a/src/app/services/agenda.service.ts
+++ b/src/app/services/agenda.service.ts
@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {environment} from '../../environments/environment';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {InviteEntity} from '../models/invite-entity';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgendaService {
+
+  baseApi = `${environment.baseApi}/agenda`;
+
+  constructor(private http: HttpClient) {
+  }
+
+  sendInvite(url: string, email: string): Observable<any> {
+    return this.http.post(`${this.baseApi}/${email}`, {url});
+  }
+
+  createInvite(companyId: number, email: string): Observable<InviteEntity> {
+    return this.http.post<InviteEntity>(`${this.baseApi}/createinvite`, {companyId: companyId, email: email});
+  }
+
+  verifyInvite(token: string) {
+    return this.http.get(this.baseApi + `/verify?token=${token}`, {})
+  }
+
+  acceptInvite(user: number, company: number): Observable<any> {
+    return this.http.post(this.baseApi + `/link?user=${user}&company=${company}`, {})
+  }
+}
--- a/src/app/services/appointment.service.ts
+++ b/src/app/services/appointment.service.ts
@@ -1,42 +1,69 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {Appointment} from '../models/appointment';
+import {environment} from '../../environments/environment';
+import {AppointmentDto} from '../models/appointment-dto';
+import {map} from 'rxjs';

@Injectable({
  providedIn: 'root',
 })
 export class AppointmentService {
-  // baseApi = "http://localhost:8080/api/appointments";
-  baseApi = "https://api.melvanveen.nl/api/appointments";
+  baseApi = `${environment.baseApi}/appointments`;

  constructor(private http: HttpClient) {
  }

  getAllAppointments() {
-    return this.http.get<Appointment[]>(`${this.baseApi}`);
+    return this.http.get<AppointmentDto[]>(`${this.baseApi}`);
  }

  getAppointmentsByDate(date: Date) {
    const day = date.getDate().toString().padStart(2, '0')
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const year = date.getFullYear();
-    return this.http.get<Appointment[]>(`${this.baseApi}/date?start=${year}-${month}-${day}`, {});
+    return this.http.get<AppointmentDto[]>(`${this.baseApi}/date?start=${year}-${month}-${day}`, {}).pipe(
+      map(appointments =>
+        appointments.map(dto => ({
+          ...dto,
+          startDateTime: new Date(dto.startDateTime),
+          endDateTime: new Date(dto.endDateTime),
+        }))
+      )
+    )
  }

-  addAppointment(appointment: Appointment) {
-    return this.http.post(`${this.baseApi}`, appointment);
+  getAppointmentsByWeek(date: Date, endDate: Date) {
+    const day = date.getDate().toString().padStart(2, '0')
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const year = date.getFullYear();
+    const endDay = endDate.getDate().toString().padStart(2, '0')
+    const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0')
+    const endYear = endDate.getFullYear();
+    return this.http.get<AppointmentDto[]>(`${this.baseApi}/date/week?start=${year}-${month}-${day}&end=${endYear}-${endMonth}-${endDay}`, {}).pipe(
+      map(appointments =>
+        appointments.map(dto => ({
+          ...dto,
+          startDateTime: new Date(dto.startDateTime),
+          endDateTime: new Date(dto.endDateTime),
+        }))
+      )
+    )
  }

-  deleteAppointment(appointment: Appointment) {
+  addAppointment(appointment: AppointmentDto, companyId: number) {
+    return this.http.post<AppointmentDto>(`${this.baseApi}/${companyId}`, appointment);
+  }
+
+  deleteAppointment(appointment: AppointmentDto) {
    return this.http.delete(`${this.baseApi}?id=${appointment.id}`)
  }

-  updateAppointment(appointment: Appointment) {
-    return this.http.put(`${this.baseApi}`, appointment);
+  updateAppointment(appointment: AppointmentDto) {
+    return this.http.put<AppointmentDto>(`${this.baseApi}`, appointment);
  }

  getAppointment(id: string) {
-    return this.http.get(`${this.baseApi}/${id}`);
+    return this.http.get<AppointmentDto>(`${this.baseApi}/${id}`);
  }

  getMostRecentAppointment(id: number) {
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -3,19 +3,22 @@ import {HttpClient} from '@angular/common/http';
 import {JwtHelperService} from '@auth0/angular-jwt';
 import {Observable} from 'rxjs';
 import {jwtDecode} from 'jwt-decode';
+import {environment} from '../../environments/environment';
+import {Company} from '../models/company';

@Injectable({
  providedIn: 'root',
 })
 export class AuthService {
-  // private baseApi = 'http://localhost:8080/api/auth/login';
-  baseApi = "https://api.melvanveen.nl/api/auth/login";
+  baseApi = `${environment.baseApi}/auth/login`;
  jwtHelper = new JwtHelperService();
+  currentCompany: Company;

  constructor(private http: HttpClient) {
  }

  login(username: string, password: string): Observable<any> {
+    console.log(username + ' is logging in');
    return this.http.post(this.baseApi, {username, password});
  }

@@ -39,5 +42,15 @@ export class AuthService {
    }
    return null;
  }
+
+  setCurrentCompany(company: Company): void {
+    this.currentCompany = company;
+    console.log(this.currentCompany);
+  }
+
+  getCurrentCompany(): Company {
+    console.log(this.currentCompany);
+    return this.currentCompany;
+  }
 }

--- a/src/app/services/company.service.ts
+++ b/src/app/services/company.service.ts
@@ -0,0 +1,29 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';
+import {Company} from '../models/company';
+import {CompanyDTO} from '../models/app-user-dto';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CompanyService {
+  baseApi = `${environment.baseApi}/company`;
+
+  constructor(private http: HttpClient) {
+  }
+
+  getCompanies(): Observable<Company[]> {
+    return this.http.get<Company[]>(`${this.baseApi}`);
+  }
+
+  getCompany(id: number): Observable<CompanyDTO> {
+    console.log(id)
+    return this.http.get<CompanyDTO>(`${this.baseApi}/${id}`);
+  }
+
+  linkCompany(user: number, token: string): Observable<any> {
+    return this.http.post(this.baseApi + `/link?user=${user}&token=${token}`, {})
+  }
+}
--- a/src/app/services/customer.service.ts
+++ b/src/app/services/customer.service.ts
@@ -2,14 +2,13 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Customer} from '../models/customer';
 import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';

@Injectable({
  providedIn: 'root',
 })
 export class CustomerService {
-  // baseApi = "http://localhost:8080/api/customers";
-  baseApi = "https://api.melvanveen.nl/api/customers";
-
+  baseApi = `${environment.baseApi}/customers`;

  constructor(private http: HttpClient) {
  }
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import {AppUserDto, CompanyDTO} from '../models/app-user-dto';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private userSubject = new BehaviorSubject<AppUserDto | null>(null);
+  currentCompany: CompanyDTO
+
+  get user$(): Observable<AppUserDto | null> {
+    return this.userSubject.asObservable();
+  }
+
+  get userValue(): AppUserDto | null {
+    return this.userSubject.value;
+  }
+
+  constructor() {
+    const storedUser = localStorage.getItem('appUser');
+    if (storedUser) {
+      this.userSubject.next(JSON.parse(storedUser));
+    }
+  }
+
+  setUser(user: AppUserDto): void {
+    localStorage.setItem('appUser', JSON.stringify(user));
+    this.userSubject.next(user);
+  }
+
+  clearUser(): void {
+    localStorage.removeItem('appUser');
+    this.userSubject.next(null);
+  }
+
+}
+
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -1,4 +1,7 @@
+import { version } from '../../package.json';
+
 export const environment = {
  baseApi: 'http://localhost:8080/api',
-  production: false
+  production: false,
+  appVersion: version + '-LOCAL'
 };
--- a/src/environments/environment.test.ts
+++ b/src/environments/environment.test.ts
@@ -1,4 +1,7 @@
+import { version } from '../../package.json';
+
 export const environment = {
-  baseApi: 'http://localhost:8080/api',
-  production: false
+  baseApi: 'https://api-paypoint-test.melvanveen.nl/api',
+  production: false,
+  appVersion: version + '-SNAPSHOT'
 };
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,4 +1,7 @@
+import { version } from '../../package.json';
+
 export const environment = {
  baseApi: 'https://api.melvanveen.nl/api',
-  production: true
+  production: true,
+  appVersion: version
 };
Author	SHA1	Message	Date
veenm	2c1b7eed35	Refactoring betreft date object All checks were successful Docker Image CI / build-and-push (push) Successful in 2m0s Details Docker Image CI / deploy (push) Successful in 45s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-05-25 18:05:19 +02:00
veenm	7a977a6ba5	Missing id's + verdere uitwerking afspraken naast elkaar All checks were successful Docker Image CI / build-and-push (push) Successful in 1m49s Details Docker Image CI / deploy (push) Successful in 38s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-04-21 15:41:32 +02:00
veenm	211fe2cbb8	Work in progress betreft het tonen van afspraken naast elkaar All checks were successful Docker Image CI / build-and-push (push) Successful in 1m55s Details Docker Image CI / deploy (push) Successful in 43s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-04-20 15:23:59 +02:00
veenm	1fec1dc8c0	mobiele layout toegevoegd voor agenda en inlog All checks were successful Docker Image CI / build-and-push (push) Successful in 1m17s Details Docker Image CI / deploy (push) Successful in 38s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-04-19 14:53:16 +02:00
veenm	77e75ff7b3	mobiele layout toegevoegd All checks were successful Docker Image CI / build-and-push (push) Successful in 1m46s Details Docker Image CI / deploy (push) Successful in 43s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-04-19 13:02:32 +02:00
veenm	524aa879de	fix betreft afspraken All checks were successful Docker Image CI / build-and-push (push) Successful in 1m4s Details Docker Image CI / deploy (push) Successful in 30s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-04-18 23:30:16 +02:00
veenm	781723fddf	Update 0.0.3: All checks were successful Docker Image CI / build-and-push (push) Successful in 2m1s Details Docker Image CI / deploy (push) Successful in 28s Details Docker Image CI / notify-failure (push) Has been skipped Details -delen van agenda toegevoegd -popup aangepast -accepteren van uitnodiging toegevoegd	2025-04-18 22:38:21 +02:00
veenm	aaa712c37c	aftrap pipeline + unused import + toevoeging company All checks were successful Docker Image CI / build-and-push (push) Successful in 1m10s Details Docker Image CI / deploy (push) Successful in 28s Details Docker Image CI / notify-failure (push) Has been skipped Details	2025-04-15 20:55:24 +02:00
veenm	9fbb61fef4	-een gebruiker kan meerdere bedrijven hebben Some checks failed Docker Image CI / build-and-push (push) Failing after 1m21s Details Docker Image CI / deploy (push) Has been skipped Details Docker Image CI / notify-failure (push) Successful in 10s Details -manier van afspraken maken veranderd in de backend ivm meerdere bedrijven gebruiker -email is aangepast op bedrijf en gebruiker -dropdown voor instellingen toegevoegd	2025-04-15 20:45:56 +02:00
veenm	ddabbc62d1	commit messages toegevoegd aan pipeline fix 2 All checks were successful Docker Image CI / build-and-push (push) Successful in 41s Details Docker Image CI / deploy (push) Successful in 28s Details	2025-03-16 22:45:25 +01:00
veenm	33aa00a4db	commit messages toegevoegd aan pipeline Some checks failed Docker Image CI / build-and-push (push) Successful in 53s Details Docker Image CI / deploy (push) Failing after 23s Details	2025-03-16 22:33:45 +01:00
veenm	08ca500570	component gemaakt van nieuwe klant toevoegen + correcte validatie email All checks were successful Docker Image CI / build-and-push (push) Successful in 1m17s Details Docker Image CI / deploy (push) Successful in 33s Details	2025-03-16 22:24:39 +01:00
veenm	cd0f18705c	fix in pipeline	2025-03-16 22:23:41 +01:00
veenm	838faae96b	chevron toegevoegd bij datum	2025-03-16 22:01:26 +01:00
veenm	1dda26b35f	fix teveel klanten	2025-03-16 21:51:32 +01:00
veenm	2d444b0300	id's toegevoegd pt 2 + fix mattermost pipeline All checks were successful Docker Image CI / build-and-push (push) Successful in 1m11s Details Docker Image CI / deploy (push) Successful in 33s Details	2025-03-15 13:44:26 +01:00
veenm	d9829e1eef	id's toegevoegd All checks were successful Docker Image CI / build-and-push (push) Successful in 1m11s Details Docker Image CI / deploy (push) Successful in 28s Details	2025-03-15 13:25:46 +01:00
veenm	ec720b159c	Wijzigingen koppeling Mattermost poging 7 All checks were successful Docker Image CI / build-and-push (push) Successful in 46s Details Docker Image CI / deploy (push) Successful in 23s Details	2025-03-15 13:18:10 +01:00
veenm	7a7e5593a6	Wijzigingen koppeling Mattermost poging 6 All checks were successful Docker Image CI / build-and-push (push) Successful in 55s Details Docker Image CI / deploy (push) Successful in 23s Details	2025-03-15 13:15:39 +01:00
veenm	bd038647cf	Wijzigingen koppeling Mattermost poging 5 All checks were successful Docker Image CI / build-and-push (push) Successful in 55s Details Docker Image CI / deploy (push) Successful in 28s Details	2025-03-15 13:12:16 +01:00
veenm	d8a5373f71	Wijzigingen koppeling Mattermost poging 4 All checks were successful Docker Image CI / build-and-push (push) Successful in 52s Details Docker Image CI / deploy (push) Successful in 28s Details	2025-03-14 17:16:35 +01:00
veenm	bcfb1fd6c2	Wijzigingen koppeling Mattermost poging 3 All checks were successful Docker Image CI / build-and-push (push) Successful in 51s Details Docker Image CI / deploy (push) Successful in 23s Details	2025-03-14 17:14:24 +01:00
veenm	e2c8f4088e	Wijzigingen koppeling Mattermost poging 2 Some checks failed Docker Image CI / deploy (push) Blocked by required conditions Details Docker Image CI / build-and-push (push) Has been cancelled Details	2025-03-14 17:13:37 +01:00
veenm	61ca3cce3b	Wijzigingen koppeling Mattermost! All checks were successful Docker Image CI / build-and-push (push) Successful in 48s Details Docker Image CI / deploy (push) Successful in 23s Details	2025-03-14 17:10:20 +01:00
veenm	3365a9cee2	Build gekoppeld aan mattermost! All checks were successful Docker Image CI / build-and-push (push) Successful in 55s Details Docker Image CI / deploy (push) Successful in 23s Details	2025-03-14 17:02:45 +01:00
veenm	ec2c1f9a78	nieuwe id All checks were successful Docker Image CI / build-and-push (push) Successful in 1m19s Details Docker Image CI / deploy (push) Successful in 28s Details	2025-03-14 16:53:49 +01:00
veenm	0007c5aea9	id's toegevoegd Some checks failed Docker Image CI / deploy (push) Blocked by required conditions Details Docker Image CI / build-and-push (push) Has been cancelled Details	2025-03-14 16:53:23 +01:00
Mel van Veen	9173855aa6	+ /api All checks were successful Docker Image CI / build-and-push (push) Successful in 1m16s Details Docker Image CI / deploy (push) Successful in 28s Details	2025-03-14 09:46:18 +00:00
Mel van Veen	6328502fca	Een / te veel bij de url All checks were successful Docker Image CI / build-and-push (push) Successful in 1m5s Details Docker Image CI / deploy (push) Successful in 33s Details	2025-03-14 09:35:01 +00:00
Mel van Veen	e9b5ed967b	Update src/environments/environment.test.ts All checks were successful Docker Image CI / build-and-push (push) Successful in 1m27s Details Docker Image CI / deploy (push) Successful in 31s Details	2025-03-14 09:31:19 +00:00
veenm	3c69cd2e20	aanpassingen deploy to docker script All checks were successful Docker Image CI / build-and-push (push) Successful in 55s Details Docker Image CI / deploy (push) Successful in 27s Details	2025-03-13 22:30:26 +01:00
veenm	0ebf648017	toevoeging baseApi + versienummer All checks were successful Docker Image CI / build-and-push (push) Successful in 2m16s Details Docker Image CI / deploy (push) Successful in 33s Details	2025-03-13 22:23:44 +01:00