wip

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

@@ -0,0 +1,135 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches:
+      - feature/**
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Stap 1: Code ophalen
+      - uses: actions/checkout@v4
+
+      # Stap 2: Versienummer ophalen uit package.json en opslaan als artifact
+      - name: Extract Angular version
+        run: |
+          echo "$(cat package.json | jq -r '.version')" > version.txt
+      - name: Save version as artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: version
+          path: version.txt
+      - name: Notify Mattermost via Bot
+        env:
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "wgcfotx7x3bipcwchzn45tuxxr",
+                "message": "🚀 *Build gestart!* Een nieuwe build is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
+
+      # Stap 3: Inloggen bij Docker Hub
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Stap 4: Docker-image bouwen en taggen met Angular-versie
+      - name: Build the Docker image
+        run: |
+          VERSION=$(cat version.txt)
+          docker buildx build . --file Dockerfile-tst --tag veenm/paypoint:$VERSION-SNAPSHOT --platform linux/amd64
+
+      # Stap 5: Docker-image pushen naar Docker Hub (huidige versie tag)
+      - name: Push the Docker image (version-snapshot)
+        run: |
+          VERSION=$(cat version.txt)
+          docker push veenm/paypoint:$VERSION-SNAPSHOT
+
+  deploy:
+    needs: build-and-push
+    runs-on: ubuntu-latest
+
+    steps:
+      # Stap 1: Artifact ophalen
+      - name: Download version artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: version
+
+      # Stap 2: Lees versie uit het artifact
+      - name: Read version
+        id: read_version
+        run: echo "VERSION=$(cat version.txt)" >> $GITHUB_ENV
+
+      # Stap 3: Maak verbinding via SSH naar de Alpine server en update de container
+      - name: SSH into Alpine and update Docker container
+        uses: appleboy/ssh-action@v0.1.10
+        with:
+          host: ${{ secrets.ALPINE_HOST_ONT }}
+          username: root
+          key: ${{ secrets.ALPINE_SSH_KEY }}
+          script: |
+            VERSION=${{ env.VERSION }}
+            echo "Gekozen versie: $VERSION-SNAPSHOT"
+
+            # Stop en verwijder de huidige container
+            docker stop paypoint-frontend || true
+            docker rm paypoint-frontend || true
+
+            # Haal de nieuwste image binnen
+            docker pull veenm/paypoint:$VERSION-SNAPSHOT
+
+            # Start een nieuwe container
+            docker run -d --name paypoint-frontend --restart unless-stopped -p 15000:80 veenm/paypoint:$VERSION-SNAPSHOT
+
+            # Opruimen oude images
+            docker image prune -f
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Notify Mattermost via Bot
+        env:
+          VERSION: ${{ env.VERSION }}
+        run: |
+          COMMITS=$(git log $(git describe --tags --abbrev=0)..HEAD --pretty=format:"- %s")
+          curl --fail -X POST -H "Authorization: Bearer tspcwdn5rbdk8kkmnex6h1nfha" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "wgcfotx7x3bipcwchzn45tuxxr",
+                "message": "✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op ontwikkel."
+              }' \
+          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

.github/workflows/deploy-docker.yml

@@ -4,10 +4,8 @@ on:
   push:
     branches:
       - main
-    tags:
-      - "docker-build-*"
 
-jobs:        
+jobs:
   build-and-push:
     runs-on: ubuntu-latest
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pay-point",
-  "version": "0.0.3",
+  "version": "0.0.21",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pay-point",
-      "version": "0.0.3",
+      "version": "0.0.21",
       "dependencies": {
         "@angular/animations": "^19.0.0",
         "@angular/cdk": "^19.0.0",
@@ -5974,20 +5974,6 @@
         "@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",
@@ -8357,12 +8343,6 @@
         "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.3",
+  "version": "0.0.21",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.routes.ts

@@ -3,8 +3,6 @@ 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'},
@@ -21,14 +19,6 @@ 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

@@ -1,28 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-.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

@@ -1,46 +0,0 @@
-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

@@ -22,5 +22,5 @@
   <h2>
     Eerst volgende afspraak:
   </h2>
-  <h2>{{ appointment.startDateTime }}</h2>
+  <h2>{{ appointment.startDate }}</h2>
 </ng-template>

src/app/components/datepicker/datepicker.component.html

@@ -1,25 +0,0 @@
-<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

@@ -1,99 +0,0 @@
-$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

@@ -1,97 +0,0 @@
-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.startDateTime.toString()) }}
+  {{ DateFormatter.getDate(appointment.startDate.toString()) }}
 </h2>
 <h2>
   <tui-icon
     icon="@tui.clock"
     [style.color]="'var(--tui-background-accent-1)'"/>
-  {{ DateFormatter.getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
+  {{ DateFormatter.getFormattedTime(appointment.startHour, appointment.startMinute) }}
-  - {{ DateFormatter.getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
+  - {{ DateFormatter.getFormattedTime(appointment.endHour, appointment.endMinute) }}
 </h2>
 <h2 *ngIf="appointment.customer">
   <tui-icon

src/app/components/details/details.component.ts

@@ -1,4 +1,5 @@
 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';
@@ -7,7 +8,6 @@ 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: AppointmentDto;
+  @Input() appointment: Appointment;
-  @Output() appointmentDeleted = new EventEmitter<AppointmentDto>();
+  @Output() appointmentDeleted = new EventEmitter<Appointment>();
-  @Output() appointmentEdited = new EventEmitter<AppointmentDto>();
+  @Output() appointmentEdited = new EventEmitter<Appointment>();
   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: AppointmentDto) => {
+    this.appointmentService.getAppointment($event).subscribe((appointment: Appointment) => {
       this.appointment = appointment
       this.appointmentEdited.emit(this.appointment);
     })

src/app/components/dropdown-content/dropdown-content.component.html

@@ -1,46 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-.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

@@ -1,56 +0,0 @@
-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.ts

@@ -10,6 +10,7 @@ import {
   TuiTextareaModule,
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
+import {Appointment} from '../../models/appointment';
 import {TuiDay, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
@@ -17,7 +18,6 @@ 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',
@@ -44,7 +44,7 @@ import {AppointmentDto} from '../../models/appointment-dto';
 })
 export class EditItemComponent implements OnInit {
 
-  @Input() appointment: AppointmentDto;
+  @Input() appointment: Appointment;
   testForm: FormGroup;
   quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
   waiting: boolean = false;
@@ -59,12 +59,12 @@ export class EditItemComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    let date = new Date(this.appointment.startDateTime);
+    let date = new Date(this.appointment.startDate);
     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.startDateTime.getHours(), this.appointment.startDateTime.getMinutes()), Validators.required),
+      startTime: new FormControl(new TuiTime(this.appointment.startHour, this.appointment.startMinute), Validators.required),
-      endTime: new FormControl(new TuiTime(this.appointment.endDateTime.getHours(), this.appointment.endDateTime.getMinutes()), Validators.required),
+      endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), Validators.required),
       date: new FormControl(new TuiDay(date.getFullYear(), date.getMonth(), date.getDate()), Validators.required),
     })
     this.control = new FormControl(this.appointment.customer)
@@ -84,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.startDateTime = correctDate;
+    this.appointment.startDate = correctDate;
     this.appointment.title = title;
     this.appointment.description = description
-    this.appointment.startDateTime = startDateTime;
+    this.appointment.startHour = startTime.hours
-    this.appointment.endDateTime = endDateTime;
+    this.appointment.startMinute = startTime.minutes
+    this.appointment.endHour = endTime.hours
+    this.appointment.endMinute = endTime.minutes
     this.appointment.customer = customer;
-    this.appointment.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
+    this.appointment.durationInMinutes = (this.appointment.endHour * 60 + this.appointment.endMinute) - (this.appointment.startHour * 60 + this.appointment.startMinute);
 
     this.waiting = true
     this.appointmentService.updateAppointment(this.appointment).subscribe(() => {

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

@@ -91,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.toLowerCase() + '-' + appointment.startDateTime + '-' + appointment.startDateTime.getHours() + appointment.startDateTime.getMinutes()">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDate + '-' + appointment.startHour + appointment.startMinute">
         <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
         <span class="name" id="titel-naam">
         <tui-icon
@@ -104,8 +104,8 @@
           icon="@tui.clock"
           [style.font-size.rem]="1"
           [style.color]="'var(--tui-background-accent-1)'"/>
-          {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }} -
+          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
-          {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
+          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
     </span>
       </div>
     </div>
@@ -118,7 +118,7 @@
   size="m"
   tuiButton
   type="button" (click)="registerAppointment()"
-  id="afspraakPlannen"
+  id="afspraakMaken"
   [tuiAppearanceState]="formIsValid()">
   Afspraak maken
 </button>

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

@@ -10,6 +10,7 @@ import {
   TuiTextareaModule,
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
+import {Appointment} from '../../models/appointment';
 import {TuiDay, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
@@ -18,8 +19,6 @@ 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',
@@ -49,7 +48,7 @@ import {AppointmentDto} from '../../models/appointment-dto';
 export class NewItemComponent implements OnInit {
 
   @Input() appointmentForm: FormGroup;
-  @Input() appointments: AppointmentDto[];
+  @Input() appointments: Appointment[];
   quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
   waiting: boolean = false;
   protected value: TuiDay | null = null;
@@ -60,7 +59,7 @@ export class NewItemComponent implements OnInit {
   timeError = new TuiValidationError('Begintijd moet voor de eindtijd liggen.');
 
 
-  constructor(private appointmentService: AppointmentService, private customerService: CustomerService, private userService: UserService,) {
+  constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
   }
 
   ngOnInit(): void {
@@ -74,7 +73,7 @@ export class NewItemComponent implements OnInit {
     this.appointmentForm.get('startTime').setValue('', Validators.required)
     this.appointmentForm.get('endTime').setValue('', [Validators.required, timeAfterStartValidator('startTime')])
     this.appointments.sort((a, b) => {
-      return a.startDateTime.getHours() - b.startDateTime.getHours() || a.startDateTime.getMinutes() - b.startDateTime.getMinutes();
+      return a.startHour - b.startHour || a.startMinute - b.startMinute;
     });
   }
 
@@ -86,15 +85,11 @@ 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;
 
-    // constructor(id: string, title: string, description: string, startDateTime: Date, endDateTime: Date, customer: Customer, company: CompanyDTO)
+    const appointment = new Appointment(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer)
-    const appointment = new AppointmentDto(title, description, startDateTime, endDateTime, customer)
     this.waiting = true
-    this.appointmentService.addAppointment(appointment, this.userService.currentCompany.id).subscribe(() => {
+    this.appointmentService.addAppointment(appointment).subscribe(() => {
       this.waiting = false
       this.appointmentAddedEvent.emit(title)
     })

src/app/components/week-view/week-view.component.html

@@ -1,36 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-.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

@@ -1,122 +0,0 @@
-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,15 +1,16 @@
 import {HttpInterceptorFn} from '@angular/common/http';
 import {inject} from '@angular/core';
-import {UserService} from '../services/user.service';
+import {AuthService} from '../services/auth.service';
 
 const excludedUrls = ['/auth/login'];
 
 export const AuthInterceptor: HttpInterceptorFn = (req, next) => {
-  const userService = inject(UserService);
+  const authService = inject(AuthService);
+  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

@@ -1,29 +0,0 @@
-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

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

src/app/models/invite-entity.ts

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-<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

@@ -1,139 +0,0 @@
-@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

@@ -1,101 +0,0 @@
-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

@@ -1,31 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-.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

@@ -1,56 +0,0 @@
-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,7 +1,6 @@
 <div class="container">
   <div class="heading">
     <button
-      *ngIf="view == 'day'"
       appearance="primary"
       iconStart="@tui.chevron-left"
       size="m"
@@ -10,27 +9,7 @@
       (click)="previousDay()"
       type="button">
     </button>
-    <button
+    <h1 class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}
-      *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"
@@ -41,7 +20,6 @@
         [style.color]="'var(--tui-background-accent-1)'"/>
     </h1>
     <button
-      *ngIf="view == 'day'"
       appearance="primary"
       iconStart="@tui.chevron-right"
       size="m"
@@ -50,19 +28,13 @@
       (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">
-    <datepicker (onSelectedDate)="onDayClick($event)" [currentDate]="selectedDate"></datepicker>
+    <tui-calendar
+      id="calenderDatum"
+      [value]="value"
+      (dayClick)="onDayClick($event)"
+    />
   </div>
   <div class="toolbar">
     <button
@@ -103,14 +75,11 @@
       </tui-icon>
     </button>
     <ng-template #dropdownContent>
-      <div class="dropdown">
+      <div class="dropdown">But there is nothing to choose...</div>
-        <dropdown-content (close)="open = false" (view)="setView($event)" [currentView]="view"
-                          (changeAgenda)="toggleCalendarChange()"></dropdown-content>
-      </div>
     </ng-template>
   </div>
   <div class="content">
-    <div *ngIf="view == 'day'" class="agenda-container">
+    <div class="agenda-container">
       <div *ngFor="let hour of timeSlots" class="time-slot">
         <span class="time">{{ hour.toString().padStart(2, '0') }}:00</span>
 
@@ -127,15 +96,12 @@
             {{ 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.startHour, appointment.startMinute) }}
-            - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
+            - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
           </span>
         </div>
       </div>
     </div>
-
-    <app-week-view *ngIf="view == 'week'" [selectedDate]="selectedDate"
-                   (appointmentSelected)="selectedAppointment = $event"></app-week-view>
   </div>
 </div>
 
@@ -149,15 +115,3 @@
   <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,107 +139,3 @@ 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,8 +1,9 @@
-import {Component, inject, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {CommonModule, NgFor, NgIf} from '@angular/common';
-import {TuiAlertService, TuiButton, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
+import {TuiAlertService, TuiButton, TuiCalendar, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
+import {Appointment} from '../../models/appointment';
 import {ModalComponent} from '../../components/modal/modal.component';
-import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {
   TuiInputDateModule,
   TuiInputModule,
@@ -17,26 +18,20 @@ 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, NewItemComponent, DropdownContentComponent, WeekViewComponent, DatepickerComponent, TuiCheckbox, FormsModule],
+    TuiInputModule, TuiTextareaModule, TuiInputDateModule, TuiIcon, DetailsComponent, TuiCalendar, NewItemComponent],
   templateUrl: './agenda.component.html',
   providers: [tuiDateFormatProvider({separator: '-'}), AppointmentService],
   styleUrl: './agenda.component.scss'
 })
 export class AgendaComponent implements OnInit {
 
-  constructor(private appointmentService: AppointmentService, protected userService: UserService) {
+  constructor(private appointmentService: AppointmentService) {
   }
 
   ngOnInit(): void {
@@ -44,18 +39,15 @@ export class AgendaComponent implements OnInit {
   }
 
   timeSlots: number[] = Array.from({length: 24}, (_, i) => i); // 24 uren
-  appointments: AppointmentDto[] = [];
+  appointments: Appointment[] = [];
   showNewItem = false
   today = new Date()
   selectedDate = new Date()
   waiting: boolean = false;
-  selectedAppointment: AppointmentDto;
+  selectedAppointment: Appointment;
   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({
@@ -81,13 +73,9 @@ export class AgendaComponent implements OnInit {
   }
 
   getAppointmentsForHour(hour: number) {
-    return this.appointments.filter(appointment => {
+    return this.appointments.filter(appointment => appointment.startHour === hour);
-      const startDateTime = new Date(appointment.startDateTime);
-      return startDateTime.getHours() === hour;
-    });
   }
 
-
   getDate(): string {
     const date = this.selectedDate
 
@@ -121,18 +109,6 @@ 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) {
@@ -161,20 +137,11 @@ export class AgendaComponent implements OnInit {
     return endTime;
   }
 
-  setView(view: 'day' | 'week' | 'month') {
-    this.view = view
-  }
 
   setToday() {
     this.selectedDate = new Date()
-    if (this.view === 'day') {
+    this.getAppointmentsByDate(this.selectedDate);
-      this.getAppointmentsByDate(this.selectedDate);
+    this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
-      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) {
@@ -183,11 +150,11 @@ export class AgendaComponent implements OnInit {
     })
   }
 
-  getInlineStyles(appointment: AppointmentDto): { [key: string]: string } {
+  getInlineStyles(appointment: Appointment): { [key: string]: string } {
     return {
       '--duration': `${appointment.durationInMinutes}`,
-      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
+      '--start-minute': `${appointment.startMinute}`,
-      'top': `${appointment.startDateTime.getMinutes()}px`, // Startpositie binnen het uur
+      'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
       'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren
     };
   }
@@ -196,45 +163,36 @@ export class AgendaComponent implements OnInit {
     return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
   }
 
-  getAppointmentHeight(appointment: AppointmentDto): number {
+  getAppointmentHeight(appointment: Appointment): number {
-    const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
+    const startInMinutes = (appointment.startHour * 60) + appointment.startMinute;
-    const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes();
+    const endInMinutes = (appointment.endHour * 60) + appointment.endMinute;
     return (endInMinutes - startInMinutes); // 50px per uur
   }
 
-  selectAppointment(appointment: AppointmentDto) {
+  selectAppointment(appointment: Appointment) {
     this.selectedAppointment = appointment;
   }
 
   protected readonly DateFormatter = DateFormatter;
 
-  onDayClick(day: Date) {
+  onDayClick(day: TuiDay) {
-    this.selectedDate = day
+    this.value = day;
-
+    this.selectedDate = new Date(day.year, day.month, day.day);
+    this.getAppointmentsByDate(this.selectedDate);
+    this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
     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.showNewItem = false
     this.resetForms()
   }
 
-  appointmentIsDeleted(appointment: AppointmentDto) {
+  appointmentIsDeleted(appointment: Appointment) {
     this.selectedAppointment = undefined;
     this.alerts
       .open(`Afspraak <strong>${appointment.title}</strong> is verwijderd.`)
@@ -242,7 +200,7 @@ export class AgendaComponent implements OnInit {
     this.getAppointmentsByDate(this.selectedDate);
   }
 
-  appointmentIsEdited($event: AppointmentDto) {
+  appointmentIsEdited($event: Appointment) {
     this.getAppointmentsByDate(this.selectedDate);
   }
 
@@ -275,16 +233,5 @@ export class AgendaComponent implements OnInit {
   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,33 +4,40 @@
 </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">
-    <button class="hamburger" (click)="menuOpen = !menuOpen">&#9776;</button>
+    <ul>
-    <div class="nav-wrapper" [ngClass]="{ 'open': menuOpen }">
+      <li><a routerLink="/home/agenda" id="agenda" routerLinkActive="active">Agenda</a></li>
-      <ul>
+      <li><a routerLink="/home/klanten" id="klanten" routerLinkActive="active">Klanten</a></li>
-        <li><a routerLink="/home/agenda" routerLinkActive="active" (click)="menuOpen = false" id="agenda">Agenda</a></li>
+    </ul>
-        <li><a routerLink="/home/klanten" routerLinkActive="active" (click)="menuOpen = false" id="klanten">Klanten</a></li>
+    <hr/>
-      </ul>
+    <button
+      tuiChevron
+      type="button"
+      id="userMenu"
+      [tuiDropdown]="dropdownContent"
+      [tuiDropdownManual]="open"
+      [tuiObscuredEnabled]="open"
+      (click)="onClick()"
+      (tuiActiveZoneChange)="onActiveZone($event)"
+      (tuiObscured)="onObscured($event)">
+      <tui-avatar src="{{getInitials()}}"/>
 
-      <button
-        tuiChevron
-        type="button"
-        id="userMenu"
-        [tuiDropdown]="dropdownContent"
-        [tuiDropdownManual]="open"
-        [tuiObscuredEnabled]="open"
-        (click)="onClick(); $event.stopPropagation()"
-        (tuiActiveZoneChange)="onActiveZone($event)"
-        (tuiObscured)="onObscured($event)">
-        <tui-avatar [src]="getInitials()"></tui-avatar>
-      </button>
-    </div>
 
+
+    </button>
     <ng-template #dropdownContent>
       <div class="dropdown">
         <h3>{{ fullName }}</h3>
-        <h4>{{ userService.currentCompany.name }}</h4>
+        <h4>{{ currentCompany.name }}</h4>
-        <button tuiButton size="m" type="button" (click)="logout()">Uitloggen</button>
+
+        <button
+          size="m"
+          tuiButton
+          type="button"
+          id="uitloggen"
+          (click)="logout()">
+          Uitloggen
+        </button>
       </div>
     </ng-template>
   </div>

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

@@ -1,106 +1,64 @@
-@keyframes slideDown {
+.navbar {
-  0% {
+  background-color: #f8f9fa;
-    opacity: 0;
+  display: flex;
-    transform: translateY(-10%);
+  align-items: center;
-  }
-  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;
 }
 
-.navbar {
+.dropdown {
-  background-color: #f8f9fa;
+  font-size: 0.8125rem;
-  padding: 10px 16px;
+  line-height: 1.25rem;
-  display: flex;
+  padding: 0.25rem 0.75rem;
-  align-items: center;
+  margin-left: 4px;
-  flex-wrap: wrap;
+  margin-right: 20px;
-
+  margin-bottom: 8px;
-  > img {
+  min-width: 200px;
-    max-height: 50px;
+}
-    width: auto;
+
-    margin-right: 24px;
+ui-scrollbar.t-scroll.ng-tns-c452864359-10._native-hidden {
-  }
+  margin-right: 24px;
-
+}
-  .hamburger {
+
-    font-size: 24px;
+button {
-    background: none;
+  background: transparent;
-    border: 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

@@ -3,29 +3,27 @@ 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 {Company} from '../../models/company';
+import {CompanyService} from '../../services/company.service';
 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, TuiSelectModule, ReactiveFormsModule, NgClass],
+  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron, TuiSelectModule, ReactiveFormsModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
 export class HomeComponent implements OnInit {
-  user: AppUserDto;
+  user: User
   fullName: string
-  companies: CompanyDTO[];
+  companies: Company[]
-  menuOpen = false;
-
 
   getInitials(): string {
-    this.user = this.userService.userValue
+    this.user = this.authService.getUserInfo();
     this.fullName = this.user.firstName + ' ' + this.user.lastName;
     return this.fullName.split(' ').map((n) => n[0]).join('').substring(0, 2);
   }
@@ -46,24 +44,29 @@ export class HomeComponent implements OnInit {
     this.open = active && this.open;
   }
 
-
+  constructor(private authService: AuthService, private router: Router, private companyService: CompanyService) {
-  constructor(private authService: AuthService, private router: Router, protected userService: UserService) {
   }
 
   ngOnInit(): void {
-    if (!this.userService.userValue) {
+    if (!this.authService.isAuthenticated()) {
       this.router.navigate(['login']);
     } else {
-      this.companies = this.userService.userValue.companies.map(a => a.company)
+      this.companyService.getCompanies().subscribe(
-      this.userService.currentCompany = this.companies[0];
+        response => {
+          this.companies = response
+          this.authService.setCurrentCompany(response[0])
+          console.log(this.companies)
+        }
+      )
     }
 
   }
 
   logout() {
-    this.userService.clearUser();
+    this.authService.logout();
     this.router.navigate(['login']);
   }
 
   protected readonly environment = environment;
+  currentCompany: Company;
 }

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

@@ -1,60 +1,109 @@
+/* Algemene layout */
+.container {
+  max-width: 100%;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: repeating-conic-gradient(
+      from 30deg,
+      #0000 0 120deg,
+      #3c3c3c 0 180deg
+  ) calc(0.5 * 200px) calc(0.5 * 200px * 0.577),
+  repeating-conic-gradient(
+      from 30deg,
+      #1d1d1d 0 60deg,
+      #4e4f51 0 120deg,
+      #3c3c3c 0 180deg
+  );
+  background-size: 200px calc(200px * 0.577);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Centraal form container */
 .center-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  /* Adjust as needed */
-}
-
-tui-error {
-  text-align: center;
-}
-
-p{
-  text-align: center;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 28px;
-  max-width: 300px;
-  max-height: 300px;
-}
-
-::ng-deep button.custom-button {
-  background-color: #222222 !important;
-  /* Pas kleur aan */
-  color: white !important;
-  /* Tekstkleur aanpassen */
-  width: 300px;
-}
-
-.container {
-  max-width: 100%;
   width: 100%;
-  height: 100%;
+  max-width: 100%;
-  --s: 200px; /* control the size */
-  --c1: #1d1d1d;
-  --c2: #4e4f51;
-  --c3: #3c3c3c;
-
-  background: repeating-conic-gradient(
-      from 30deg,
-      #0000 0 120deg,
-      var(--c3) 0 180deg
-  ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
-  repeating-conic-gradient(
-      from 30deg,
-      var(--c1) 0 60deg,
-      var(--c2) 0 120deg,
-      var(--c3) 0 180deg
-  );
-  background-size: var(--s) calc(var(--s) * 0.577);
 }
 
+/* Het formulier zelf */
+form[tuiForm] {
+  background: white;
+  border-radius: 24px;
+  padding: 2rem;
+  max-width: 32rem; /* 512px */
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
 
+/* Logo */
+.header {
+  display: block;
+  margin: 0 auto 1.75rem auto;
+  max-width: 100%;
+  width: 200px;
+  height: auto;
+}
+
+/* Invoervelden */
+tui-textfield {
+  display: block;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+/* Foutmelding */
+tui-error {
+  display: block;
+  margin-top: 0.5rem;
+  color: #ff3b30;
+  font-size: 0.9rem;
+}
+
+/* Inlogknop */
+button.custom-button {
+  background-color: #222222 !important;
+  color: white !important;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border-radius: 12px;
+  margin-top: 1rem;
+}
+
+/* Versie info */
+p {
+  text-align: center;
+  font-size: 0.9rem;
+  color: #333;
+  margin-top: 1.25rem;
+}
+
+/* Responsiveness */
 @media (max-width: 600px) {
-  .center-container {
+  form[tuiForm] {
-    padding: 0;
+    padding: 1.5rem 1rem;
+    max-width: 100%;
+  }
+
+  .header {
+    width: 150px;
+    margin-bottom: 1.25rem;
+  }
+
+  button.custom-button {
+    font-size: 0.95rem;
+  }
+
+  .container {
+    background-size: 150px calc(150px * 0.577);
+    opacity: 0.9; /* minder druk op mobiel */
   }
 }

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

@@ -4,11 +4,10 @@ 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 {AppUserDto} from '../../models/app-user-dto';
+import {UserDto} from '../../models/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',
@@ -36,7 +35,7 @@ export class LoginComponent {
     return this.enabled ? this.error : null;
   }
 
-  constructor(private router: Router, private authService: AuthService, private userService: UserService) {
+  constructor(private router: Router, private authService: AuthService) {
     this.form = new FormGroup({
       username: new FormControl('', Validators.required),
       password: new FormControl('', Validators.required)
@@ -45,10 +44,9 @@ 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: AppUserDto) => {
+      next: (user: UserDto) => {
-        this.userService.setUser(user);
+        localStorage.setItem('token', user.token);
         this.router.navigate(['/home/agenda']);
       },
       error: (err: HttpErrorResponse) => {

src/app/services/agenda.service.ts

@@ -1,32 +0,0 @@
-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,8 +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 {AuthService} from './auth.service';
-import {map} from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -10,60 +10,35 @@ import {map} from 'rxjs';
 export class AppointmentService {
   baseApi = `${environment.baseApi}/appointments`;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private authService: AuthService) {
   }
 
   getAllAppointments() {
-    return this.http.get<AppointmentDto[]>(`${this.baseApi}`);
+    return this.http.get<Appointment[]>(`${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<AppointmentDto[]>(`${this.baseApi}/date?start=${year}-${month}-${day}`, {}).pipe(
+    return this.http.get<Appointment[]>(`${this.baseApi}/date?start=${year}-${month}-${day}`, {});
-      map(appointments =>
-        appointments.map(dto => ({
-          ...dto,
-          startDateTime: new Date(dto.startDateTime),
-          endDateTime: new Date(dto.endDateTime),
-        }))
-      )
-    )
   }
 
-  getAppointmentsByWeek(date: Date, endDate: Date) {
+  addAppointment(appointment: Appointment) {
-    const day = date.getDate().toString().padStart(2, '0')
+    let companyId = this.authService.getCurrentCompany().id
-    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    return this.http.post(`${this.baseApi}/${companyId}`, appointment);
-    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),
-        }))
-      )
-    )
   }
 
-  addAppointment(appointment: AppointmentDto, companyId: number) {
+  deleteAppointment(appointment: Appointment) {
-    return this.http.post<AppointmentDto>(`${this.baseApi}/${companyId}`, appointment);
-  }
-
-  deleteAppointment(appointment: AppointmentDto) {
     return this.http.delete(`${this.baseApi}?id=${appointment.id}`)
   }
 
-  updateAppointment(appointment: AppointmentDto) {
+  updateAppointment(appointment: Appointment) {
-    return this.http.put<AppointmentDto>(`${this.baseApi}`, appointment);
+    return this.http.put(`${this.baseApi}`, appointment);
   }
 
   getAppointment(id: string) {
-    return this.http.get<AppointmentDto>(`${this.baseApi}/${id}`);
+    return this.http.get(`${this.baseApi}/${id}`);
   }
 
   getMostRecentAppointment(id: number) {

src/app/services/auth.service.ts

@@ -18,7 +18,6 @@ export class AuthService {
   }
 
   login(username: string, password: string): Observable<any> {
-    console.log(username + ' is logging in');
     return this.http.post(this.baseApi, {username, password});
   }
 

src/app/services/company.service.ts

@@ -3,7 +3,6 @@ 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',
@@ -17,13 +16,4 @@ export class CompanyService {
   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

@@ -1,38 +0,0 @@
-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);
-  }
-
-}
-

src/styles.scss

@@ -1,8 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 .container {
   max-width: 70vw;
-  margin: 0 auto;
+  //margin: 0 auto;
-  padding: 20px;
 }
 
 .heading {
@@ -16,3 +15,6 @@
   overflow-y: scroll;
   max-height: 70vh;
 }
+
+html, body{
+}