Refactoring betreft date object

-delen van agenda toegevoegd
-popup aangepast
-accepteren van uitnodiging toegevoegd

.github/workflows/deploy-docker-to-tst.yml

@@ -26,7 +26,6 @@ jobs:
           path: version.txt
       - name: Notify Mattermost via Bot
         env:
-          VERSION: ${{ VERSION }}
           REPO: ${{ gitea.repository }}
           BRANCH: ${{ gitea.ref }}
           MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
@@ -35,7 +34,7 @@ jobs:
           -H 'Content-Type: application/json' \
           -d '{
                 "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
-                "message": "@all 🚀 *Build gestart!* Een nieuwe build ['"$VERSION"'-SNAPSHOT] is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
+                "message": "@all 🚀 *Build gestart!* Een nieuwe build is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
               }' \
           https://mattermost.melvanveen.nl/api/v4/posts
 
@@ -99,14 +98,40 @@ jobs:
             # 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: ${{ VERSION }}
+          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"
+                "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

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pay-point",
-  "version": "0.0.21",
+  "version": "0.0.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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,

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>

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;
+  }
+}
+

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
+  }
+}

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>

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>

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;
+  }
+}

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();
+  }
+}

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.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
-  - {{ DateFormatter.getFormattedTime(appointment.endHour, appointment.endMinute) }}
+  - {{ DateFormatter.getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
 </h2>
 <h2 *ngIf="appointment.customer">
   <tui-icon

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;
+  @Input() appointment: AppointmentDto;
-  @Output() appointmentDeleted = new EventEmitter<Appointment>();
+  @Output() appointmentDeleted = new EventEmitter<AppointmentDto>();
-  @Output() appointmentEdited = new EventEmitter<Appointment>();
+  @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);
     })

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>

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;
+  }
+}

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'
+  }
+
+}

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

@@ -99,56 +99,5 @@
 </button>
 
 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <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>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="klant-toevoegen"
-      [loading]=waiting
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"/>
-      Klant toevoegen
-    </button>
-  </form>
 </app-modal>

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,18 +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 {
+import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
-  TuiButtonLoading,
-  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',
@@ -41,15 +37,14 @@ import {ModalComponent} from '../modal/modal.component';
     TuiStringifyContentPipe,
     TuiFilterByInputPipe,
     ModalComponent,
-    TuiIcon,
+    NewCustomerComponent
-    TuiButtonLoading
   ],
   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;
@@ -64,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),
+      startTime: new FormControl(new TuiTime(this.appointment.startDateTime.getHours(), this.appointment.startDateTime.getMinutes()), Validators.required),
-      endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), 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)
@@ -89,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.startDateTime = startDateTime;
-    this.appointment.startMinute = startTime.minutes
+    this.appointment.endDateTime = endDateTime;
-    this.appointment.endHour = endTime.hours
-    this.appointment.endMinute = endTime.minutes
     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(() => {
@@ -132,15 +127,8 @@ export class EditItemComponent implements OnInit {
     `${item.firstName} ${item.lastName}`;
 
   saveCustomer() {
-    const firstName = this.customerForm.get('firstName').value
+    this.showNewCustomer = false;
-    const lastName = this.customerForm.get('lastName').value
+    this.getCustomers()
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
   }
 
   getCustomers() {

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>

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);
+    })
+  }
+}

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

@@ -33,6 +33,7 @@
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
+        id="klant-input"
         *tuiDataList
         [itemContent]="stringify | tuiStringifyContent"
         [items]="items | tuiFilterByInput"
@@ -90,7 +91,7 @@
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title + '-' + appointment.customer">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDateTime + '-' + appointment.startDateTime.getHours() + appointment.startDateTime.getMinutes()">
         <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
         <span class="name" id="titel-naam">
         <tui-icon
@@ -103,76 +104,25 @@
           icon="@tui.clock"
           [style.font-size.rem]="1"
           [style.color]="'var(--tui-background-accent-1)'"/>
-          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
+          {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} -
-          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+          {{ 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="afspraakMaken"
+  id="afspraakPlannen"
   [tuiAppearanceState]="formIsValid()">
   Afspraak maken
 </button>
 
 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <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>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="klant-toevoegen"
-      [loading]=waiting
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"/>
-      Klant toevoegen
-    </button>
-  </form>
 </app-modal>

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, TuiValidationError} from '@taiga-ui/cdk';
-import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
-import {
+import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
-  TuiButtonLoading,
-  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('startTime').setValue('', Validators.required)
-    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    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
+    this.showNewCustomer = false;
-    const lastName = this.customerForm.get('lastName').value
+    this.getCustomers()
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
   }
 
   getCustomers() {

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>

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;
+  }
+}
+

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();
+  }
+}

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 userService = inject(UserService);
-  const token = authService.getToken();
-
   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({

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;
+}
+

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;
+  }
+
+}

src/app/models/appointment.ts

@@ -4,26 +4,20 @@ export class Appointment {
   id: string;
   title: string;
   description: string;
-  startDate: Date;
+  startDateTime: Date;
-  startHour: number;
+  endDateTime: Date;
-  startMinute: number;
-  endHour: number;
-  endMinute: number;
   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.startDateTime = startDateTime;
-    this.startMinute = startMinute;
+    this.endDateTime = endDateTime;
-    this.endHour = endHour;
-    this.endMinute = endMinute;
-    this.startDate = date;
     this.customer = customer;
 
-    // Bereken de totale duur in minuten
+    this.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
-    this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
   }
 
 }

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;
+}

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
   }
 }

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
+}

src/app/models/user-dto.ts

@@ -1,9 +0,0 @@
-export class UserDto {
-  username: string
-  fullName: string
-  email: string
-  token: string
-
-  constructor() {
-  }
-}

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>

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;
+}

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;
+}

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>
+

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;
+}
+

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']);
+      }
+    )
+  }
+}

src/app/pages/agenda/agenda.component.html

@@ -1,6 +1,7 @@
 <div class="container">
   <div class="heading">
     <button
+      *ngIf="view == 'day'"
       appearance="primary"
       iconStart="@tui.chevron-left"
       size="m"
@@ -9,8 +10,38 @@
       (click)="previousDay()"
       type="button">
     </button>
-    <h1 class="date" id="geselecteerdeDatum" (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"
@@ -19,13 +50,19 @@
       (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
+    <datepicker (onSelectedDate)="onDayClick($event)" [currentDate]="selectedDate"></datepicker>
-      id="calenderDatum"
-      [value]="value"
-      (dayClick)="onDayClick($event)"
-    />
   </div>
   <div class="toolbar">
     <button
@@ -43,7 +80,7 @@
       size="m"
       tuiButton
       id="afspraakMaken"
-      (click)="isModalOpen = true"
+      (click)="showNewItem = true"
       type="button">
       <tui-icon
         icon="@tui.plus"
@@ -51,9 +88,29 @@
       />
       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>
 
@@ -70,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.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
-            - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+            - {{ 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>
@@ -89,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>

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;
+  }
+}

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 {TuiAlertService, TuiButton, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
-import {Appointment} from '../../models/appointment';
 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[] = [];
+  appointments: AppointmentDto[] = [];
-  isModalOpen = false
+  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);
+    if (this.view === 'day') {
-    this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
+      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}`,
+      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
-      'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
+      '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 {
+  getAppointmentHeight(appointment: AppointmentDto): number {
-    const startInMinutes = (appointment.startHour * 60) + appointment.startMinute;
+    const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
-    const endInMinutes = (appointment.endHour * 60) + appointment.endMinute;
+    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) {
+  onDayClick(day: Date) {
-    this.value = day;
+    this.selectedDate = 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()))
     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);
+  }
 }
 

src/app/pages/home/home.component.html

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

src/app/pages/home/home.component.scss

@@ -1,62 +1,106 @@
-.navbar {
+@keyframes slideDown {
-  background-color: #f8f9fa;
+  0% {
-  display: flex
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-
+.active{
-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 {
   font-weight: bold;
 }
 
-.dropdown {
+.navbar {
-  font-size: 0.8125rem;
+  background-color: #f8f9fa;
-  line-height: 1.25rem;
+  padding: 10px 16px;
-  padding: 0.25rem 0.75rem;
+  display: flex;
-  margin-left: 4px;
+  align-items: center;
-  margin-right: 4px;
+  flex-wrap: wrap;
-  margin-bottom: 8px;
-}
 
-.t-content {
+  > img {
-  margin-right: 24px;
+    max-height: 50px;
-}
+    width: auto;
+    margin-right: 24px;
+  }
 
-button {
+  .hamburger {
-  background: transparent;
+    font-size: 24px;
-  border: none;
+    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;
+    }
+  }
 }

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;
 }

src/app/pages/klanten/klanten.component.html

@@ -19,85 +19,27 @@
         Klant toevoegen
       </button>
     </div>
-    <table class="styled-table">
+    <div class="results">
-      <thead>
+      <table class="styled-table">
-      <tr>
+        <thead>
-        <th>Naam</th>
+        <tr>
-        <th>Email</th>
+          <th>Naam</th>
-      </tr>
+          <th>Email</th>
-      </thead>
+        </tr>
-      <tbody>
+        </thead>
-      <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)" [id]="customer.id">
+        <tbody>
-        <td>{{ customer.firstName }} {{ customer.lastName }}</td>
+        <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)" [id]="customer.id">
-        <td>{{ customer.email }}</td>
+          <td>{{ customer.firstName }} {{ customer.lastName }}</td>
-      </tr>
+          <td>{{ customer.email }}</td>
-      </tbody>
+        </tr>
-    </table>
+        </tbody>
-
+      </table>
+    </div>
   </div>
 </div>
 
 <app-modal title="Nieuwe klant toevoegen" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        id="input-voornaam"
-        formControlName="firstName"
-      />
-    </tui-input>
-    <br>
-
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        id="input-achternaam"
-        formControlName="lastName"
-      />
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        id="input-email"
-        type="email"
-        formControlName="email"
-      />
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="opslaanKlant"
-      (click)="saveCustomer()"
-      [disabled]="customerForm.invalid"
-      type="button">
-      <tui-icon
-        icon="@tui.save"
-        [style.height.rem]="1"
-      />
-      Opslaan
-    </button>
-  </form>
 </app-modal>
 
 <app-modal title="Klant bekijken" *ngIf="selectedCustomer != undefined" (close)="selectedCustomer = undefined">

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;
+}
 

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
+    this.showNewCustomer = false;
-    const lastName = this.customerForm.get('lastName').value
+    this.getCustomers()
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
   }
 
   getCustomers() {

src/app/pages/login/login.component.scss

@@ -51,3 +51,10 @@ p{
   );
   background-size: var(--s) calc(var(--s) * 0.577);
 }
+
+
+@media (max-width: 600px) {
+  .center-container {
+    padding: 0;
+  }
+}

src/app/pages/login/login.component.ts

@@ -4,10 +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',
@@ -35,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)
@@ -44,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) => {
+      next: (user: AppUserDto) => {
-        localStorage.setItem('token', user.token);
+        this.userService.setUser(user);
         this.router.navigate(['/home/agenda']);
       },
       error: (err: HttpErrorResponse) => {

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}`, {})
+  }
+}

src/app/services/appointment.service.ts

@@ -1,7 +1,8 @@
 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',
@@ -13,30 +14,56 @@ export class AppointmentService {
   }
 
   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) {
+  getAppointmentsByWeek(date: Date, endDate: Date) {
-    return this.http.post(`${this.baseApi}`, appointment);
+    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) {
+  updateAppointment(appointment: AppointmentDto) {
-    return this.http.put(`${this.baseApi}`, appointment);
+    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) {

src/app/services/auth.service.ts

@@ -4,6 +4,7 @@ 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',
@@ -11,11 +12,13 @@ import {environment} from '../../environments/environment';
 export class AuthService {
   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;
+  }
 }
 

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}`, {})
+  }
+}

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);
+  }
+
+}
+