Refactoring betreft date object

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

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

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

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

@@ -1,5 +1,4 @@
 import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
-import {Appointment} from '../../models/appointment';
 import {DateFormatter} from '../../utils/date-formatter';
 import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
 import {TuiTextareaModule} from '@taiga-ui/legacy';
@@ -8,6 +7,7 @@ import {NgIf} from '@angular/common';
 import {ModalComponent} from '../modal/modal.component';
 import {EditItemComponent} from '../edit-item/edit-item.component';
 import {AppointmentService} from '../../services/appointment.service';
+import {AppointmentDto} from '../../models/appointment-dto';
 
 @Component({
   selector: 'app-details',
@@ -36,9 +36,9 @@ export class DetailsComponent implements OnInit {
   constructor(private appointmentService: AppointmentService) {
   }
 
-  @Input() appointment: Appointment;
-  @Output() appointmentDeleted = new EventEmitter<Appointment>();
-  @Output() appointmentEdited = new EventEmitter<Appointment>();
+  @Input() appointment: AppointmentDto;
+  @Output() appointmentDeleted = new EventEmitter<AppointmentDto>();
+  @Output() appointmentEdited = new EventEmitter<AppointmentDto>();
   open: boolean = true;
   readonly = true;
   showDeleteModal = false;
@@ -66,7 +66,7 @@ export class DetailsComponent implements OnInit {
   updateAppointment($event: any) {
     this.showEditModal = false;
 
-    this.appointmentService.getAppointment($event).subscribe((appointment: Appointment) => {
+    this.appointmentService.getAppointment($event).subscribe((appointment: AppointmentDto) => {
       this.appointment = appointment
       this.appointmentEdited.emit(this.appointment);
     })

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.ts

@@ -10,7 +10,6 @@ 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';
@@ -18,6 +17,7 @@ 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 {NewCustomerComponent} from '../new-customer/new-customer.component';
 })
 export class EditItemComponent implements OnInit {
 
-  @Input() appointment: Appointment;
+  @Input() appointment: AppointmentDto;
   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.startDate);
+    let date = new Date(this.appointment.startDateTime);
     this.testForm = new FormGroup({
       title: new FormControl(this.appointment.title, Validators.required),
       notes: new FormControl(this.appointment.description),
-      startTime: new FormControl(new TuiTime(this.appointment.startHour, this.appointment.startMinute), Validators.required),
-      endTime: new FormControl(new TuiTime(this.appointment.endHour, this.appointment.endMinute), Validators.required),
+      startTime: new FormControl(new TuiTime(this.appointment.startDateTime.getHours(), this.appointment.startDateTime.getMinutes()), Validators.required),
+      endTime: new FormControl(new TuiTime(this.appointment.endDateTime.getHours(), this.appointment.endDateTime.getMinutes()), Validators.required),
       date: new FormControl(new TuiDay(date.getFullYear(), date.getMonth(), date.getDate()), Validators.required),
     })
     this.control = new FormControl(this.appointment.customer)
@@ -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.startDate = correctDate;
+    this.appointment.startDateTime = correctDate;
     this.appointment.title = title;
     this.appointment.description = description
-    this.appointment.startHour = startTime.hours
-    this.appointment.startMinute = startTime.minutes
-    this.appointment.endHour = endTime.hours
-    this.appointment.endMinute = endTime.minutes
+    this.appointment.startDateTime = startDateTime;
+    this.appointment.endDateTime = endDateTime;
     this.appointment.customer = customer;
-    this.appointment.durationInMinutes = (this.appointment.endHour * 60 + this.appointment.endMinute) - (this.appointment.startHour * 60 + this.appointment.startMinute);
+    this.appointment.durationInMinutes = (startDateTime.getTime() - startDateTime.getTime()) / 1000;
 
     this.waiting = true
     this.appointmentService.updateAppointment(this.appointment).subscribe(() => {

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

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

@@ -10,7 +10,6 @@ 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';
@@ -19,6 +18,8 @@ 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',
@@ -48,7 +49,7 @@ import {NewCustomerComponent} from '../new-customer/new-customer.component';
 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;
@@ -59,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 {
@@ -73,7 +74,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.startHour - b.startHour || a.startMinute - b.startMinute;
+      return a.startDateTime.getHours() - b.startDateTime.getHours() || a.startDateTime.getMinutes() - b.startDateTime.getMinutes();
     });
   }
 
@@ -85,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)
     })

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 token = authService.getToken();
-
+  const userService = inject(UserService);
   if (excludedUrls.some(url => req.url.includes(url))) {
     return next(req);
   }
+  const token: string | null = userService.userValue.token ?? null;
 
   if (token) {
     const cloned = req.clone({

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

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,7 +10,27 @@
       (click)="previousDay()"
       type="button">
     </button>
-    <h1 class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}
+    <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"
@@ -20,6 +41,7 @@
         [style.color]="'var(--tui-background-accent-1)'"/>
     </h1>
     <button
+      *ngIf="view == 'day'"
       appearance="primary"
       iconStart="@tui.chevron-right"
       size="m"
@@ -28,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
-      id="calenderDatum"
-      [value]="value"
-      (dayClick)="onDayClick($event)"
-    />
+    <datepicker (onSelectedDate)="onDayClick($event)" [currentDate]="selectedDate"></datepicker>
   </div>
   <div class="toolbar">
     <button
@@ -75,11 +103,14 @@
       </tui-icon>
     </button>
     <ng-template #dropdownContent>
-      <div class="dropdown">But there is nothing to choose...</div>
+      <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>
 
@@ -96,12 +127,15 @@
             {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
           <span class="appointment-time">
             <tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
-            {{ getFormattedTime(appointment.startHour, appointment.startMinute) }}
-            - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+            {{ getFormattedTime(appointment.startDateTime.getHours(), appointment.startDateTime.getMinutes()) }}
+            - {{ getFormattedTime(appointment.endDateTime.getHours(), appointment.endDateTime.getMinutes()) }}
           </span>
         </div>
       </div>
     </div>
+
+    <app-week-view *ngIf="view == 'week'" [selectedDate]="selectedDate"
+                   (appointmentSelected)="selectedAppointment = $event"></app-week-view>
   </div>
 </div>
 
@@ -115,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 {Appointment} from '../../models/appointment';
+import {TuiAlertService, TuiButton, tuiDateFormatProvider, TuiIcon} from '@taiga-ui/core';
 import {ModalComponent} from '../../components/modal/modal.component';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {
   TuiInputDateModule,
   TuiInputModule,
@@ -18,20 +17,26 @@ 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,15 +44,18 @@ export class AgendaComponent implements OnInit {
   }
 
   timeSlots: number[] = Array.from({length: 24}, (_, i) => i); // 24 uren
-  appointments: Appointment[] = [];
+  appointments: AppointmentDto[] = [];
   showNewItem = false
   today = new Date()
   selectedDate = new Date()
   waiting: boolean = false;
-  selectedAppointment: Appointment;
+  selectedAppointment: AppointmentDto;
   protected value: TuiDay | null = null;
   showCalendar: boolean = false;
+  showCalendarChange: boolean = false;
   open = false
+  @Input() view: 'day' | 'week' | 'month' = 'day'
+  @ViewChild(WeekViewComponent) childComponent!: WeekViewComponent;
 
   private readonly alerts = inject(TuiAlertService);
   protected appointmentForm = new FormGroup({
@@ -73,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
 
@@ -109,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) {
@@ -137,11 +161,20 @@ 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.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) {
@@ -150,11 +183,11 @@ export class AgendaComponent implements OnInit {
     })
   }
 
-  getInlineStyles(appointment: Appointment): { [key: string]: string } {
+  getInlineStyles(appointment: AppointmentDto): { [key: string]: string } {
     return {
       '--duration': `${appointment.durationInMinutes}`,
-      '--start-minute': `${appointment.startMinute}`,
-      'top': `${appointment.startMinute}px`, // Startpositie binnen het uur
+      '--start-minute': `${appointment.startDateTime.getMinutes()}`,
+      'top': `${appointment.startDateTime.getMinutes()}px`, // Startpositie binnen het uur
       'height': `${appointment.durationInMinutes}px`, // Hoogte over meerdere uren
     };
   }
@@ -163,36 +196,45 @@ export class AgendaComponent implements OnInit {
     return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
   }
 
-  getAppointmentHeight(appointment: Appointment): number {
-    const startInMinutes = (appointment.startHour * 60) + appointment.startMinute;
-    const endInMinutes = (appointment.endHour * 60) + appointment.endMinute;
+  getAppointmentHeight(appointment: AppointmentDto): number {
+    const startInMinutes = (appointment.startDateTime.getHours() * 60) + appointment.startDateTime.getMinutes();
+    const endInMinutes = (appointment.endDateTime.getHours() * 60) + appointment.endDateTime.getMinutes();
     return (endInMinutes - startInMinutes); // 50px per uur
   }
 
-  selectAppointment(appointment: Appointment) {
+  selectAppointment(appointment: AppointmentDto) {
     this.selectedAppointment = appointment;
   }
 
   protected readonly DateFormatter = DateFormatter;
 
-  onDayClick(day: TuiDay) {
-    this.value = day;
-    this.selectedDate = new Date(day.year, day.month, day.day);
+  onDayClick(day: Date) {
+    this.selectedDate = day
+
+    this.toggleCalendar()
+    if (this.view === 'day') {
       this.getAppointmentsByDate(this.selectedDate);
       this.appointmentForm.get('date').setValue(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()))
-    this.toggleCalendar()
+
+    } 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: Appointment) {
+  appointmentIsDeleted(appointment: AppointmentDto) {
     this.selectedAppointment = undefined;
     this.alerts
       .open(`Afspraak <strong>${appointment.title}</strong> is verwijderd.`)
@@ -200,7 +242,7 @@ export class AgendaComponent implements OnInit {
     this.getAppointmentsByDate(this.selectedDate);
   }
 
-  appointmentIsEdited($event: Appointment) {
+  appointmentIsEdited($event: AppointmentDto) {
     this.getAppointmentsByDate(this.selectedDate);
   }
 
@@ -233,5 +275,16 @@ 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,12 +4,14 @@
 </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>
+    <div class="nav-wrapper" [ngClass]="{ 'open': menuOpen }">
       <ul>
-      <li><a routerLink="/home/agenda" id="agenda" routerLinkActive="active">Agenda</a></li>
-      <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>
+        <li><a routerLink="/home/klanten" routerLinkActive="active" (click)="menuOpen = false" id="klanten">Klanten</a></li>
       </ul>
-    <hr/>
+
       <button
         tuiChevron
         type="button"
@@ -17,27 +19,18 @@
         [tuiDropdown]="dropdownContent"
         [tuiDropdownManual]="open"
         [tuiObscuredEnabled]="open"
-      (click)="onClick()"
+        (click)="onClick(); $event.stopPropagation()"
         (tuiActiveZoneChange)="onActiveZone($event)"
         (tuiObscured)="onObscured($event)">
-      <tui-avatar src="{{getInitials()}}"/>
-
-
-
+        <tui-avatar [src]="getInitials()"></tui-avatar>
       </button>
+    </div>
+
     <ng-template #dropdownContent>
       <div class="dropdown">
         <h3>{{ fullName }}</h3>
-        <h4>{{ currentCompany.name }}</h4>
-
-        <button
-          size="m"
-          tuiButton
-          type="button"
-          id="uitloggen"
-          (click)="logout()">
-          Uitloggen
-        </button>
+        <h4>{{ userService.currentCompany.name }}</h4>
+        <button tuiButton size="m" type="button" (click)="logout()">Uitloggen</button>
       </div>
     </ng-template>
   </div>

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

@@ -1,64 +1,106 @@
-.navbar {
-  background-color: #f8f9fa;
-  display: flex;
-  align-items: center;
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-
-ul {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  list-style-type: none;
-  align-items: center;
-}
-
-li {
-  margin: 0 10px;
-}
-
-a {
-  text-decoration: none;
-  color: black;
-  font-size: 16px;
-}
-
-img {
-  display: block;
-  max-width: 230px;
-  max-height: 95px;
-  width: auto;
-  height: auto;
-}
-
-hr {
-  clear: both;
-  visibility: hidden;
-}
-
-tui-avatar {
-  margin-right: 32px;
-  cursor: pointer;
-}
-
-.active {
+.active{
   font-weight: bold;
 }
 
-.dropdown {
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
-  padding: 0.25rem 0.75rem;
-  margin-left: 4px;
-  margin-right: 20px;
-  margin-bottom: 8px;
-  min-width: 200px;
-}
+.navbar {
+  background-color: #f8f9fa;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 
-ui-scrollbar.t-scroll.ng-tns-c452864359-10._native-hidden {
+  > img {
+    max-height: 50px;
+    width: auto;
     margin-right: 24px;
-}
+  }
 
-button {
-  background: transparent;
+  .hamburger {
+    font-size: 24px;
+    background: none;
     border: none;
+    cursor: pointer;
+    display: none;
+    margin-left: auto;
+  }
+
+  .nav-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: space-between;
+
+    ul {
+      display: flex;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li a {
+        text-decoration: none;
+        color: black;
+        font-size: 16px;
+        padding: 0 8px;
+      }
+    }
+
+    button#userMenu {
+      background: none;
+      border: none;
+      margin-left: 16px;
+    }
+  }
+
+  .dropdown {
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.75rem;
+    min-width: 200px;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .hamburger {
+      display: block;
+      align-self: flex-end;
+    }
+
+    .nav-wrapper {
+      display: none;
+      width: 100%;
+      flex-direction: column;
+      margin-top: 10px;
+    }
+
+    .nav-wrapper.open {
+      display: flex;
+      animation: slideDown 0.3s ease-out;
+    }
+
+    ul {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    ul li {
+      padding: 10px 0;
+    }
+
+    button#userMenu {
+      align-self: flex-end;
+      margin-right: 16px;
+      margin-top: 10px;
+    }
+  }
 }

src/app/pages/home/home.component.ts

@@ -3,27 +3,29 @@ 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],
+  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: Company[]
+  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);
   }
@@ -44,29 +46,24 @@ 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.authService.isAuthenticated()) {
+    if (!this.userService.userValue) {
       this.router.navigate(['login']);
     } else {
-      this.companyService.getCompanies().subscribe(
-        response => {
-          this.companies = response
-          this.authService.setCurrentCompany(response[0])
-          console.log(this.companies)
-        }
-      )
+      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;
-  currentCompany: Company;
 }

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

src/app/services/auth.service.ts

@@ -18,6 +18,7 @@ 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,6 +3,7 @@ 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',
@@ -16,4 +17,13 @@ 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

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